@font-face {
font-family: "Fragment Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/fragment-mono-latin-ext-400.e3085219.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Fragment Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/fragment-mono-latin-400.4f4dc27f.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/inter-cyrillic-400-600.aebf2ab4.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/inter-greek-400-600.46dd4cdc.woff2) format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/inter-latin-ext-400-600.a28eb6d3.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/inter-latin-400-600.c9407645.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/inter-cyrillic-400-600.aebf2ab4.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/inter-greek-400-600.46dd4cdc.woff2) format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/inter-latin-ext-400-600.a28eb6d3.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/inter-latin-400-600.c9407645.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/inter-cyrillic-400-600.aebf2ab4.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/inter-greek-400-600.46dd4cdc.woff2) format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/inter-latin-ext-400-600.a28eb6d3.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/inter-latin-400-600.c9407645.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lato";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(fonts/lato-latin-ext-400-italic.faa2f045.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Lato";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(fonts/lato-latin-400-italic.5c3360f8.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/lato-latin-ext-400.b85c84c6.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/lato-latin-400.d4ae5188.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/lato-latin-ext-700.78e850d5.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/lato-latin-700.7a7ce1a3.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(fonts/lato-latin-ext-900.5aaafef3.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(fonts/lato-latin-900.bd9a6192.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url(fonts/manrope-cyrillic-500-700.95a49306.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url(fonts/manrope-greek-500-700.40af1132.woff2) format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url(fonts/manrope-latin-ext-500-700.ce093b34.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url(fonts/manrope-latin-500-700.e310b55a.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/poppins-latin-ext-500.f8f0c286.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/poppins-latin-500.289e0afc.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/poppins-latin-ext-600.72efc6a3.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/poppins-latin-600.872e8629.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--paper: #F6F6F1;
--paper-2: #EEF1EA;
--white: #FFFFFF;
--ink: #0E2622;
--ink-2: #4B5D58;
--ink-3: #7D8B87;
--line: #E2E6E0;
--btn: #0B2420;
--teal: #004746;
--teal-2: #0E6362;
--green: #4C9F7C;
--green-2: #2FBF84;
--mint: #E3F4EA;
--deep: #04302A;
--deep-2: #0A4A40;
--eye: #F4EFB0;
--grad: linear-gradient(100deg, #0E6362 0%, #2F8F6E 55%, #4C9F7C 100%);
--glow: radial-gradient(closest-side, rgba(191, 230, 208, 0.9) 0%, rgba(191, 230, 208, 0.45) 45%, rgba(191, 230, 208, 0) 100%);
--ink-mute: #66736F;
--line-2: #D3DAD2;
--line-soft: #EDF0EB;
--hover: #F3F5F0;
--btn-hover: #17403A;
--mint-2: #CDEBDA;
--glow-c: #BFE6D0;
--on-dark: #FFFFFF;
--on-dark-2: rgba(255, 255, 255, 0.74);
--on-dark-3: rgba(255, 255, 255, 0.56);
--line-dark: rgba(255, 255, 255, 0.14);
--grad-light: linear-gradient(100deg, #CFF0DC 0%, #8EDDB3 50%, #4FC995 100%);
--grad-panel: linear-gradient(160deg, #0A4A40 0%, #0E6362 45%, #4C9F7C 100%);
--grad-panel-soft: linear-gradient(160deg, #F1F8F2 0%, #DDF0E4 50%, #C3E5D1 100%);
--grad-deep: linear-gradient(180deg, #04302A 0%, #0A4A40 100%);
--glass: rgba(255, 255, 255, 0.52);
--glass-mint: rgba(248, 255, 251, 0.55);
--glass-deep: rgba(225, 254, 250, 0.55);
--grain-a: 0.02;
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--pdf-bg: #FCE9E6;  --pdf-fg: #C2412D;
--xlsx-bg: #E1F3E8; --xlsx-fg: #1C7A4C;
--docx-bg: #E5EDFB; --docx-fg: #2D5BB8;
--csv-bg: #ECEFEB;  --csv-fg: #55625E;
--av-a-bg: #F0E2D3; --av-a-fg: #7A4B24;
--av-b-bg: #DCE6F2; --av-b-fg: #2E4F7C;
--av-c-bg: #EADDEE; --av-c-fg: #6A3C78;
--av-d-bg: #DCEDE0; --av-d-fg: #2B6544;
--font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--fs-h1: clamp(48px, 7vw, 88px);
--fs-h2: clamp(36px, 5vw, 64px);
--fs-h3: clamp(24px, 2.1vw, 28px);
--fs-lead: 18px;
--fs-body: 16px;
--fs-small: 14px;
--fs-xs: 13px;
--ls-display: -0.045em;
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 20px;
--r-prompt: 24px;
--r-xl: 28px;
--r-2xl: 40px;
--r-pill: 999px;
--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px;
--s-16: 64px; --s-20: 80px; --s-24: 96px; --s-28: 112px;
--shadow-xs: 0 1px 2px rgba(14, 38, 34, 0.06);
--shadow-sm: 0 1px 2px rgba(14, 38, 34, 0.05), 0 2px 8px -2px rgba(14, 38, 34, 0.06);
--shadow-md: 0 1px 2px rgba(14, 38, 34, 0.04), 0 8px 24px -8px rgba(14, 38, 34, 0.12);
--shadow-lg: 0 2px 6px rgba(14, 38, 34, 0.04), 0 24px 48px -16px rgba(14, 38, 34, 0.18);
--shadow-xl: 0 4px 12px rgba(4, 48, 42, 0.05), 0 40px 90px -28px rgba(4, 48, 42, 0.30);
--shadow-prompt:
0 1px 1px rgba(14, 38, 34, 0.03),
0 2px 6px -1px rgba(14, 38, 34, 0.04),
0 14px 28px -14px rgba(14, 38, 34, 0.12),
0 36px 72px -36px rgba(4, 48, 42, 0.26);
--ring: 0 0 0 1px rgba(14, 38, 34, 0.07);
--focus-soft: 0 0 0 4px rgba(76, 159, 124, 0.14);
--container: 1280px;
--gutter: 32px;
--section-y: 112px;
--nav-h: 72px;
--z-base: 1;
--z-raised: 10;
--z-dropdown: 50;
--z-nav: 100;
--z-drawer: 110;
--z-skip: 1000;
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
--dur-1: 0.2s;
--dur-2: 0.25s;
--dur-3: 0.45s;
--dur-4: 0.6s;
--dur-reveal: 0.5s;
--rise: 14px;
}
html:lang(el), html:lang(bg) {
--font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html:lang(bg) { font-feature-settings: "locl" 0; }
html:is(:lang(el), :lang(bg)) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4, .s-europe__stat-value,
.cmp-name, .how-title, .hire-card__title, .tm-quote, .pr-h, .plan__name, .plan__amount, .tier__weight,
.how-card__title, .how-card__big, .ft-heading, .s-nav__drawer-link) {
word-spacing: 0.08em;
font-variation-settings: "wght" 610;
}
@media (max-width: 1023px) {
:root { --section-y: 88px; }
}
@media (max-width: 767px) {
:root { --gutter: 20px; --section-y: 64px; --nav-h: 64px; --fs-lead: 17px; }
}
@media (max-width: 419px) {
:root { --gutter: 16px; }
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 24px);
hanging-punctuation: first last;
}
body {
min-height: 100vh;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: 1.15; overflow-wrap: break-word; text-wrap: balance; }
p, li, figcaption, blockquote { overflow-wrap: break-word; text-wrap: pretty; }
table { border-collapse: collapse; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--glow-c); color: var(--ink); }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--teal-2);
outline-offset: 3px;
}
.section--deep :focus-visible,
.on-dark :focus-visible,
.panel-grad :focus-visible { outline-color: #9FE3C0; }
.chat :focus-visible, .card :focus-visible, .prompt-box :focus-visible { outline-color: var(--teal-2); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
left: 16px;
top: 12px;
z-index: var(--z-skip);
padding: 10px 18px;
border-radius: var(--r-pill);
background: var(--btn);
color: #fff;
font-weight: 500;
font-size: 15px;
box-shadow: var(--shadow-md);
transform: translateY(calc(-100% - 40px));
transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: var(--green-2); }
.container {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(960px + var(--gutter) * 2); }
.container--text { max-width: calc(760px + var(--gutter) * 2); }
.section {
position: relative;
padding-block: var(--section-y);
}
.section--paper { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--deep {
background: var(--deep);
color: var(--on-dark);
}
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 860px;
margin: 0 auto 64px;
text-align: center;
}
.section-head > .lead { max-width: 640px; }
.section-head--left { align-items: flex-start; text-align: left; margin-inline: 0; }
@media (max-width: 767px) {
.section-head { gap: 16px; margin-bottom: 40px; }
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, 12px); }
.text-center { text-align: center; }
.glow {
position: absolute;
pointer-events: none;
background: var(--glow);
z-index: 0;
}
.h1, .h2, .h3, .display {
font-family: var(--font-display);
font-weight: 500;
color: inherit;
text-wrap: balance;
}
.h1 {
font-size: var(--fs-h1);
line-height: 1.04;
letter-spacing: var(--ls-display);
}
.h2 {
font-size: var(--fs-h2);
line-height: 1.04;
letter-spacing: var(--ls-display);
}
.h3 {
font-size: var(--fs-h3);
line-height: 1.16;
letter-spacing: -0.03em;
}
.h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 20px;
line-height: 1.25;
letter-spacing: -0.02em;
}
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ink-2);
letter-spacing: -0.008em;
}
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-mute); }
.small { font-size: var(--fs-small); line-height: 1.5; }
.mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.01em;
}
.section--deep .lead, .section--deep .muted,
.on-dark .lead, .on-dark .muted { color: var(--on-dark-2); }
.section--deep .subtle, .on-dark .subtle { color: var(--on-dark-3); }
.link {
color: var(--teal-2);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(14, 99, 98, 0.3);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.link:hover { color: var(--teal); text-decoration-color: currentColor; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
padding: 4px 12px;
border-radius: var(--r-pill);
background: var(--mint);
color: var(--teal-2);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.005em;
white-space: nowrap;
width: fit-content;
max-width: 100%;
}
.eyebrow .icon { width: 14px; height: 14px; }
@media (max-width: 420px) {
.eyebrow { white-space: normal; text-align: center; text-wrap: balance; }
}
@media (max-width: 600px) {
html:is(:lang(de), :lang(nl), :lang(fi), :lang(hu), :lang(sv), :lang(da), :lang(nb), :lang(et), :lang(el))
:is(h1, h2, h3, .pr-h) {
hyphens: auto;
-webkit-hyphenate-limit-before: 5;
-webkit-hyphenate-limit-after: 5;
hyphenate-limit-chars: 12 5 5;
}
}
.eyebrow--dot::before {
content: "";
flex: none;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green-2);
box-shadow: 0 0 0 3px rgba(47, 191, 132, 0.18);
}
.eyebrow--white { background: var(--white); box-shadow: var(--ring); }
.eyebrow--dark,
.section--deep .eyebrow:not(.eyebrow--white) {
background: rgba(255, 255, 255, 0.08);
color: #BFE6D0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.grad-text, .grad-text--light {
color: var(--teal-2);
background-image: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-bottom: 0.04em;
}
.grad-text--light { color: #8EDDB3; background-image: var(--grad-light); }
@media (forced-colors: active) {
.grad-text, .grad-text--light { -webkit-text-fill-color: currentColor; background: none; }
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
flex: none;
vertical-align: -0.14em;
fill: currentColor;
overflow: visible;
}
.icon--sm { width: 14px; height: 14px; }
.icon--md { width: 18px; height: 18px; }
.icon--lg { width: 24px; height: 24px; }
.btn {
--btn-h: 56px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: var(--btn-h);
padding: 0 32px;
border: 1px solid transparent;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.011em;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--dur-1) var(--ease-out),
border-color var(--dur-1) var(--ease-out),
color var(--dur-1) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out),
transform var(--dur-1) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; }
.btn .icon--trail { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .icon--trail { transform: translateX(2px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--primary {
background-color: var(--btn);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 2px rgba(11, 36, 32, 0.16),
0 4px 12px -6px rgba(11, 36, 32, 0.32);
}
.btn--primary:hover {
background-color: var(--btn-hover);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 1px 2px rgba(11, 36, 32, 0.18),
0 8px 18px -8px rgba(11, 36, 32, 0.40);
}
.btn--secondary {
background: var(--white);
color: var(--ink);
border-color: var(--line);
box-shadow: 0 1px 1px rgba(14, 38, 34, 0.03);
}
.btn--secondary:hover { border-color: var(--line-2); background: #FBFBF8; box-shadow: var(--shadow-sm); }
.btn--light {
background: var(--white);
color: var(--ink);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -12px rgba(0, 0, 0, 0.40);
}
.btn--light:hover { background: #EAF7EF; }
.btn--outline-light {
background: rgba(255, 255, 255, 0.04);
color: #fff;
border-color: rgba(255, 255, 255, 0.28);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.45); }
.btn--ghost {
background: transparent;
color: inherit;
padding-inline: 16px;
}
.btn--ghost:hover { background: rgba(14, 38, 34, 0.06); }
.section--deep .btn--ghost:hover, .on-dark .btn--ghost:hover, .panel-grad .btn--ghost:hover { background: rgba(255, 255, 255, 0.10); }
.btn--sm { --btn-h: 40px; padding: 0 20px; font-size: 14.5px; }
.btn--sm .icon { width: 16px; height: 16px; }
.btn--xs { --btn-h: 32px; padding: 0 14px; font-size: 13.5px; gap: 6px; }
.btn--xs .icon { width: 14px; height: 14px; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 767px) {
.btn { --btn-h: 48px; padding: 0 24px; font-size: 15.5px; }
.btn--sm { --btn-h: 40px; padding: 0 16px; font-size: 14.5px; }
.btn--xs { --btn-h: 32px; padding: 0 12px; font-size: 13.5px; }
}
.card {
position: relative;
background: var(--white);
border-radius: var(--r-xl);
padding: 32px;
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.03);
}
.card--paper { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.04); }
.card--flat { box-shadow: none; }
.card--lift { box-shadow: var(--ring), var(--shadow-md); }
.card--interactive {
transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.card--interactive:hover { transform: translateY(-1px); box-shadow: var(--ring), var(--shadow-md); }
@media (max-width: 767px) {
.card { padding: 24px; border-radius: 24px; }
}
.panel-grad {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-xl);
color: #fff;
background:
radial-gradient(90% 70% at 88% -6%, rgba(191, 230, 208, 0.42) 0%, rgba(191, 230, 208, 0) 60%),
radial-gradient(70% 60% at 0% 110%, rgba(4, 48, 42, 0.55) 0%, rgba(4, 48, 42, 0) 70%),
var(--grad-panel);
background-repeat: no-repeat;
}
.panel-grad::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--noise);
opacity: var(--grain-a);
pointer-events: none;
}
.panel-grad::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
pointer-events: none;
}
.panel-grad--soft {
color: var(--ink);
background:
radial-gradient(80% 60% at 85% 0%, rgba(244, 239, 176, 0.55) 0%, rgba(244, 239, 176, 0) 60%),
var(--grad-panel-soft);
background-repeat: no-repeat;
}
.panel-grad--soft::after { box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.panel-grad--deep {
background:
radial-gradient(80% 60% at 50% -10%, rgba(76, 159, 124, 0.45) 0%, rgba(76, 159, 124, 0) 65%),
var(--grad-deep);
background-repeat: no-repeat;
}
.tag {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 8px;
border-radius: 7px;
background: var(--mint);
color: var(--teal-2);
font-size: 12px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.tag .icon { width: 12px; height: 12px; }
.tag--amber { background: #FBF1D9; color: #855A08; }
.tag--red { background: var(--pdf-bg); color: #A8331F; }
.tag--blue { background: var(--docx-bg); color: var(--docx-fg); }
.tag--grey { background: #EEF0EC; color: var(--ink-2); }
.cc {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
min-width: 26px;
height: 20px;
padding: 0 5px;
border-radius: 6px;
background: var(--paper-2);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.06);
color: var(--ink-2);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1;
letter-spacing: 0.04em;
}
.check-list { display: grid; gap: 14px; padding: 0; list-style: none; }
.check-list > li {
position: relative;
padding-left: 34px;
line-height: 1.5;
}
.check-list > li::before {
content: "";
position: absolute;
left: 0; top: 1px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--mint);
}
.check-list > li::after {
content: "";
position: absolute;
left: 5px; top: 6px;
width: 12px; height: 12px;
background: var(--teal-2);
-webkit-mask: var(--check) center / contain no-repeat;
mask: var(--check) center / contain no-repeat;
}
.list-rows { display: grid; gap: 6px; }
.row-item {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 34px;
padding: 6px 8px 6px 10px;
border-radius: 10px;
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
color: var(--ink);
}
.row-item > .icon { width: 14px; height: 14px; color: var(--ink-3); }
.row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item > .tag { flex: none; }
.skel {
display: block;
height: 10px;
border-radius: 5px;
background: #EDF0EB;
}
.seg {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: var(--r-pill);
background: var(--paper-2);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.05);
}
.seg__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 16px;
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
transition:
background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.seg__btn .icon { width: 16px; height: 16px; }
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"], .seg__btn.is-active {
background: var(--white);
color: var(--ink);
box-shadow: 0 1px 2px rgba(14, 38, 34, 0.08), 0 0 0 1px rgba(14, 38, 34, 0.05);
}
.chat-frame {
position: relative;
padding: 10px;
border-radius: 30px;
background: var(--glass);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.75),
0 0 0 1px rgba(14, 38, 34, 0.05),
0 2px 6px rgba(4, 48, 42, 0.04),
0 30px 80px -30px rgba(4, 48, 42, 0.30);
}
.chat-frame--sm { padding: 7px; border-radius: 22px; }
.chat-frame--sm > .chat { border-radius: 15px; }
.chat {
--c-font: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--c-ink: #1D1C1D;
--c-ink-2: #616061;
--c-ink-3: #868686;
--c-line: #DDDDDD;
--c-soft: #F8F8F8;
--c-skel: #ECECEC;
--c-link: #1264A3;
--c-mention-bg: rgba(29, 155, 209, 0.10);
--c-primary: #007A5A;
--c-primary-hover: #148567;
--c-btn-line: rgba(29, 28, 29, 0.20);
--c-active: #E3F4EA;
--chat-fs: 15px;
--chat-lh: 1.46668;
--name-fs: 15px;
--avatar: 36px;
--avatar-r: 8px;
--chat-px: 20px;
--msg-gap: 8px;
--head-h: 60px;
--side-w: 260px;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border-radius: 20px;
background: #FFFFFF;
color: var(--c-ink);
font-family: var(--c-font);
font-size: var(--chat-fs);
line-height: var(--chat-lh);
letter-spacing: 0;
text-align: left;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.07), 0 1px 3px rgba(14, 38, 34, 0.05);
}
html:lang(el) .chat, html:lang(bg) .chat {
--c-font: "Lato", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
html:lang(el) .chat--teams, html:lang(el) .chat[data-skin="teams"],
html:lang(bg) .chat--teams, html:lang(bg) .chat[data-skin="teams"] {
--c-font: "Segoe UI", "Segoe UI Web (West European)", "Inter", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}
.chat--teams, .chat[data-skin="teams"] {
--c-font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
--c-ink: #242424;
--c-ink-2: #616161;
--c-ink-3: #707070;
--c-line: #E0E0E0;
--c-soft: #F5F5F5;
--c-skel: #EDEDED;
--c-link: #5B5FC7;
--c-mention-bg: transparent;
--c-primary: #5B5FC7;
--c-primary-hover: #4F52B2;
--c-btn-line: #D1D1D1;
--c-active: #F0F0F0;
--chat-fs: 14px;
--chat-lh: 1.43;
--name-fs: 12px;
--avatar: 32px;
--msg-gap: 12px;
--chat-px: 24px;
}
.chat--lg { --chat-fs: 16px; --chat-lh: 1.5; --name-fs: 16px; --avatar: 40px; --avatar-r: 9px; --chat-px: 24px; --msg-gap: 10px; --head-h: 72px; --side-w: 300px; }
.chat--lg:is(.chat--teams, [data-skin="teams"]) { --chat-fs: 15px; --chat-lh: 1.47; --name-fs: 12.5px; --avatar: 34px; --msg-gap: 14px; }
.chat--sm { --chat-fs: 14px; --chat-lh: 1.43; --name-fs: 14px; --avatar: 32px; --avatar-r: 7px; --chat-px: 16px; --msg-gap: 8px; --head-h: 48px; }
.chat--sm:is(.chat--teams, [data-skin="teams"]) { --chat-fs: 13.5px; --name-fs: 11.5px; --avatar: 28px; --msg-gap: 10px; }
.chat--xs { --chat-fs: 13px; --chat-lh: 1.42; --name-fs: 13px; --avatar: 28px; --avatar-r: 6px; --chat-px: 14px; --msg-gap: 8px; --head-h: 44px; }
.chat--xs:is(.chat--teams, [data-skin="teams"]) { --chat-fs: 12.5px; --name-fs: 11px; --avatar: 26px; --msg-gap: 9px; }
@media (max-width: 767px) {
.chat, .chat--lg { --chat-fs: 15px; --chat-lh: 1.46668; --name-fs: 15px; --avatar: 34px; --avatar-r: 8px; --chat-px: 16px; --msg-gap: 8px; --head-h: 54px; }
.chat:is(.chat--teams, [data-skin="teams"]) { --chat-fs: 14px; --chat-lh: 1.43; --name-fs: 12px; --avatar: 30px; --msg-gap: 10px; --chat-px: 14px; }
.chat--sm { --chat-fs: 14px; --name-fs: 14px; --avatar: 30px; --avatar-r: 7px; --chat-px: 14px; --head-h: 46px; }
.chat--xs { --chat-fs: 13px; --name-fs: 13px; --avatar: 28px; --avatar-r: 6px; --chat-px: 12px; --head-h: 44px; }
}
.chat:not(.chat--teams):not([data-skin="teams"]) [data-only="teams"],
.chat:is(.chat--teams, [data-skin="teams"]) [data-only="slack"] { display: none !important; }
.chat--app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: stretch; }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat:not(.chat--teams):not([data-skin="teams"]) > .teams-list,
.chat:is(.chat--teams, [data-skin="teams"]) > .chat-side { display: none; }
@media (max-width: 899px) {
.chat--app { grid-template-columns: minmax(0, 1fr); }
.chat--app > .chat-side, .chat--app > .teams-list { display: none !important; }
}
.chat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: var(--head-h);
padding: 8px 14px 8px var(--chat-px);
border-bottom: 1px solid var(--c-line);
background: #FFFFFF;
}
.chat-title {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
margin: 0;
color: var(--c-ink);
font-family: var(--c-font);
font-size: 17px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
}
.chat-title > .icon { width: 16px; height: 16px; color: var(--c-ink); }
.chat-title > .icon--chev { width: 13px; height: 13px; margin-left: 1px; color: var(--c-ink-2); }
.chat-hash { font-weight: 900; }
.chat-title .chat-hash { margin-right: 3px; }
.chat--lg .chat-title { font-size: 19px; }
.chat--sm .chat-title, .chat--xs .chat-title { font-size: 15px; gap: 5px; }
.chat-head__right, .chat-head-right { display: flex; align-items: center; gap: 10px; flex: none; }
.chat--sm .chat-head, .chat--xs .chat-head { padding-right: var(--chat-px); }
.chat-toggle {
display: inline-flex;
align-items: center;
flex: none;
gap: 2px;
padding: 4px;
border-radius: var(--r-pill);
background: #F3F4F2;
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.035);
font-family: var(--font-body);
}
.chat-toggle__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 18px;
border-radius: var(--r-pill);
color: #6B716F;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.006em;
white-space: nowrap;
transition:
background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.chat-toggle__btn .icon { width: 18px; height: 18px; }
.chat-toggle__btn:hover { color: var(--ink); }
.chat-toggle__btn[aria-pressed="true"], .chat-toggle__btn[aria-selected="true"], .chat-toggle__btn.is-active {
background: #FFFFFF;
color: var(--ink);
box-shadow: 0 1px 2px rgba(14, 38, 34, 0.07), 0 0 0 1px rgba(14, 38, 34, 0.05);
}
.chat--lg .chat-toggle__btn { height: 40px; padding: 0 22px; font-size: 14.5px; }
.chat--lg .chat-toggle__btn .icon { width: 20px; height: 20px; }
.chat--sm .chat-toggle__btn, .chat--xs .chat-toggle__btn { height: 30px; padding: 0 12px; font-size: 13px; gap: 6px; }
.chat--sm .chat-toggle__btn .icon, .chat--xs .chat-toggle__btn .icon { width: 15px; height: 15px; }
@media (max-width: 767px) {
.chat-toggle__btn, .chat--lg .chat-toggle__btn { height: 34px; padding: 0 14px; font-size: 13.5px; gap: 7px; }
.chat-toggle__btn .icon { width: 16px; height: 16px; }
}
@media (max-width: 519px) {
.chat-toggle__btn, .chat--lg .chat-toggle__btn { width: 42px; padding: 0; }
.chat-toggle__label {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
}
.chat-side {
display: flex;
flex-direction: column;
min-width: 0;
border-right: 1px solid var(--c-line);
background: #FFFFFF;
}
.chat-side-head, .chat-ws {
display: flex;
align-items: center;
gap: 8px;
min-height: var(--head-h);
margin: 0;
padding: 8px 16px 8px 24px;
border-bottom: 1px solid var(--c-line);
color: var(--c-ink);
font-size: 18px;
font-weight: 900;
line-height: 1.2;
white-space: nowrap;
}
.chat-side-head .icon, .chat-ws .icon { width: 12px; height: 12px; color: var(--c-ink-3); }
.chat--lg .chat-side-head { font-size: 19px; }
.chat-side-nav, .chat-nav { display: flex; flex-direction: column; padding: 14px 10px 16px; }
.chat-side-group, .chat-nav-label {
display: flex;
align-items: center;
gap: 7px;
height: 30px;
margin: 0;
padding: 0 12px 0 10px;
color: var(--c-ink-2);
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.chat-side-group .icon, .chat-nav-label .icon { width: 13px; height: 13px; color: var(--c-ink-2); }
.chat-channel {
display: flex;
align-items: center;
gap: 9px;
height: 30px;
margin: 0;
padding: 0 12px;
overflow: hidden;
border-radius: 6px;
color: var(--c-ink);
font-size: 15px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
.chat-channel .chat-hash { flex: none; width: 11px; color: var(--c-ink); font-weight: 700; text-align: center; }
.chat-channel .icon { width: 14px; height: 14px; color: var(--c-ink-2); }
.chat-channel.is-active, .chat-channel[aria-current="true"] {
background: linear-gradient(90deg, rgba(227, 244, 234, 0.55) 0%, #E3F4EA 70%);
font-weight: 700;
}
.chat-channel.is-active .icon { color: var(--c-ink); }
.chat--lg .chat-channel, .chat--lg .chat-side-group { height: 31px; font-size: 16px; }
.chat-skel, .chat-channel--skel {
display: flex;
align-items: center;
gap: 10px;
height: 30px;
padding: 0 12px;
}
.chat-skel::before, .chat-channel--skel::before {
content: "";
flex: none;
width: 15px;
height: 14px;
border-radius: 3px;
background: var(--c-skel);
}
.chat-skel::after {
content: "";
width: var(--w, 80px);
max-width: 70%;
height: 14px;
border-radius: 3px;
background: var(--c-skel);
}
.chat-channel .skel { flex: none; width: var(--w, 80px); height: 14px; border-radius: 3px; background: var(--c-skel); }
.chat-skel:nth-last-child(2), .chat-channel--skel:nth-last-child(2) { opacity: 0.6; }
.chat-skel:nth-last-child(1), .chat-channel--skel:nth-last-child(1) { opacity: 0.32; }
.teams-list {
display: flex;
flex-direction: column;
min-width: 0;
border-right: 1px solid var(--c-line);
background: #FFFFFF;
font-family: var(--c-font);
}
.teams-list__title {
display: flex;
align-items: center;
min-height: var(--head-h);
margin: 0;
padding: 8px 20px;
border-bottom: 1px solid var(--c-line);
color: var(--c-ink);
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.teams-list__nav { display: flex; flex-direction: column; gap: 1px; padding: 8px 8px 14px; }
.teams-list__group {
display: flex;
align-items: center;
gap: 7px;
height: 28px;
margin: 2px 0 0;
padding: 0 12px;
color: var(--c-ink-2);
font-size: 12px;
line-height: 1;
}
.teams-list__group::before {
content: "";
flex: none;
width: 7px;
height: 4px;
background: currentColor;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.teams-row {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
column-gap: 10px;
min-height: 48px;
padding: 6px 10px;
border-radius: 6px;
}
.teams-row.is-selected, .teams-row[aria-current="true"] { background: #F0F0F0; }
.teams-row__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.teams-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.teams-row__title {
overflow: hidden;
color: var(--c-ink);
font-size: 14px;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.teams-row__time { flex: none; color: var(--c-ink-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.teams-row__preview {
display: block;
overflow: hidden;
color: var(--c-ink-2);
font-size: 12px;
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
.teams-skel {
position: relative;
display: block;
height: 48px;
}
.teams-skel::before {
content: "";
position: absolute;
left: 10px;
top: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--c-skel);
}
.teams-skel::after {
content: "";
position: absolute;
left: 52px;
right: 14px;
top: 12px;
height: 24px;
background:
linear-gradient(var(--c-skel), var(--c-skel)) 0 0 / var(--w, 58%) 9px no-repeat,
linear-gradient(var(--c-skel), var(--c-skel)) 0 100% / 88% 8px no-repeat;
border-radius: 4px;
}
.teams-skel:nth-last-child(2) { opacity: 0.6; }
.teams-skel:nth-last-child(1) { opacity: 0.32; }
.teams-letter {
display: inline-grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: #E8EBFA;
color: #4F52B2;
font-family: var(--c-font, inherit);
font-size: 13px;
font-weight: 600;
line-height: 1;
user-select: none;
}
.teams-letter--a { background: #DCE8FA; color: #2C5AA8; }
.teams-letter--b { background: #DDEFDD; color: #2D7031; }
.teams-letter--c { background: #F8E3D2; color: #A9531B; }
.teams-letter--d { background: #E6E5F7; color: #4F52B2; }
.teams-letter--e { background: #F2E0F2; color: #883C8F; }
.teams-letter--f { background: #F2EFCB; color: #6E6416; }
.chat-title > .teams-letter { width: 28px; height: 28px; font-size: 12px; margin-right: 3px; }
.chat:is(.chat--teams, [data-skin="teams"]) .chat-title { gap: 8px; font-size: 16px; font-weight: 700; }
.chat--lg:is(.chat--teams, [data-skin="teams"]) .chat-title { font-size: 17px; }
.chat-body {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
padding: 10px var(--chat-px) 16px;
}
.chat-body--bottom {
justify-content: flex-end;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px);
mask-image: linear-gradient(180deg, transparent 0, #000 40px);
}
.msg {
display: grid;
grid-template-columns: var(--avatar) minmax(0, 1fr);
column-gap: var(--msg-gap);
align-items: start;
padding: 8px 0;
}
.msg--cont { padding-top: 0; }
.msg--cont > .msg-avatar { visibility: hidden; height: 0; }
.msg-body { min-width: 0; }
.msg-body > * { margin-top: 0; margin-bottom: 0; }
.msg-body > * + * { margin-top: 8px; }
.msg-body > .msg-meta + * { margin-top: 0; }
.msg-body > .msg-text + .msg-text { margin-top: 6px; }
.msg-avatar {
position: relative;
display: grid;
place-items: center;
flex: none;
width: var(--avatar, 36px);
height: var(--avatar, 36px);
overflow: hidden;
border-radius: var(--avatar-r, 8px);
font-family: var(--c-font, var(--font-body));
font-size: calc(var(--avatar, 36px) * 0.4);
font-weight: 700;
line-height: 1;
user-select: none;
}
.msg-avatar--photo { background: #E9ECEA; }
.msg-avatar--photo > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
transform: scale(var(--zoom, 1.45));
transform-origin: var(--focus, 50% 36%);
}
.msg-avatar--otto { background: var(--deep); }
.msg-avatar--otto > svg { width: 100%; height: 100%; }
.msg-avatar--person { background: var(--av-a-bg); color: var(--av-a-fg); }
.msg-avatar--a { background: var(--av-a-bg); color: var(--av-a-fg); }
.msg-avatar--b { background: var(--av-b-bg); color: var(--av-b-fg); }
.msg-avatar--c { background: var(--av-c-bg); color: var(--av-c-fg); }
.msg-avatar--d { background: var(--av-d-bg); color: var(--av-d-fg); }
.msg-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 6px;
margin: 0;
line-height: calc(var(--chat-fs) * var(--chat-lh));
}
.msg-name {
color: var(--c-ink);
font-size: var(--name-fs);
font-weight: 900;
letter-spacing: 0;
}
.msg-app {
display: inline-flex;
align-items: center;
align-self: center;
height: 16px;
padding: 0 4px;
border-radius: 3px;
background: rgba(29, 28, 29, 0.06);
color: var(--c-ink-2);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
.msg-time {
color: var(--c-ink-2);
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.chat--xs .msg-time, .chat--sm .msg-time { font-size: 11.5px; }
.msg-text {
margin: 0;
color: var(--c-ink);
font-size: var(--chat-fs);
line-height: var(--chat-lh);
letter-spacing: 0;
text-wrap: wrap;
}
.msg-text p { margin: 0; }
.msg-text p + p { margin-top: 6px; }
.msg-text strong, .msg-text b { font-weight: 700; }
.msg-text a { color: var(--c-link); text-decoration: none; }
.msg-text a:hover { text-decoration: underline; }
.msg-text ul, .msg-text ol { margin: 4px 0 0; padding-left: 22px; }
.msg-text ul { list-style: disc outside; }
.msg-text ol { list-style: decimal outside; }
.msg-text li { text-wrap: wrap; }
.msg-text li + li { margin-top: 2px; }
.msg-text li::marker { color: var(--c-ink); }
.mention {
display: inline;
padding: 0 2px;
border-radius: 3px;
background: var(--c-mention-bg);
color: var(--c-link);
font-weight: 400;
white-space: nowrap;
}
.chat:is(.chat--teams, [data-skin="teams"]) .msg { padding: 0; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg + .msg { margin-top: 12px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg--cont { margin-top: 4px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-avatar { margin-top: 4px; border-radius: 50%; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-avatar--photo { --zoom: 1.8; --focus: 50% 33%; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg--cont > .msg-avatar { margin-top: 0; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body {
position: relative;
padding: 8px 16px 11px;
border-radius: 6px;
background: #F5F5F5;
}
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body > * + * { margin-top: 10px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body > .msg-meta + * { margin-top: 2px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body > .msg-text + .msg-text { margin-top: 6px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-meta { column-gap: 8px; line-height: 18px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body:has(> .reactions) > .msg-meta { padding-right: 96px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-name { color: #616161; font-size: var(--name-fs); font-weight: 600; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-time { color: #616161; font-size: var(--name-fs); }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-app { display: none; }
.chat:is(.chat--teams, [data-skin="teams"]) .mention { padding: 0; border-radius: 0; }
.chat:is(.chat--teams, [data-skin="teams"]) .mention-at { display: none; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-text li::marker { color: var(--c-ink-2); }
.chat:is(.chat--teams, [data-skin="teams"]) .msg--me { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg--me > .msg-avatar { display: none; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg--me > .msg-body { max-width: 80%; background: #E8EBFA; }
.attach-card {
position: relative;
width: 100%;
max-width: 400px;
padding: 14px;
border: 1px solid #D4E6DB;
border-radius: 14px;
background: #EEF6F1;
color: var(--c-ink, var(--ink));
font-family: var(--c-font, var(--font-body));
font-size: 13px;
line-height: 1.4;
}
.attach-card--art { display: grid; place-items: center; min-height: 168px; padding: 18px; }
.attach-card--wide { max-width: 520px; }
.attach-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 0 2px 10px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.attach-head > small { color: var(--c-ink-2, var(--ink-2)); font-size: 12px; font-weight: 400; white-space: nowrap; }
ul.attach-sheet, ol.attach-sheet, .attach-sheet {
margin: 0;
padding: 2px 12px;
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.05), 0 1px 2px rgba(14, 38, 34, 0.05);
list-style: none;
}
.attach-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 34px;
padding: 6px 0;
color: var(--c-ink, var(--ink));
font-size: 12.5px;
line-height: 1.3;
}
.attach-row + .attach-row { border-top: 1px solid #EEF0EE; }
.attach-row__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.attach-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-row__sub { overflow: hidden; color: var(--c-ink-2, var(--ink-2)); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.attach-row__meta { flex: none; margin-left: auto; color: var(--c-ink-2, var(--ink-2)); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.attach-status {
display: inline-grid;
place-items: center;
flex: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2EA66A;
color: #FFFFFF;
font-family: var(--c-font, var(--font-body));
font-size: 10px;
font-weight: 900;
line-height: 1;
}
.attach-status:empty::after {
content: "";
width: 10px;
height: 10px;
background: currentColor;
-webkit-mask: var(--check) center / contain no-repeat;
mask: var(--check) center / contain no-repeat;
}
.attach-status--warn { background: #E0A325; }
.attach-status--no { background: #D2483D; }
.attach-status--todo { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #C9CFCB; }
.attach-status--todo::after { display: none; }
.attach-flow {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px 108px;
align-items: center;
width: 100%;
}
.attach-flow > svg { width: 100%; height: 100%; overflow: visible; }
.attach-doc {
display: flex;
flex-direction: column;
gap: 7px;
padding: 12px 11px 13px;
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.05), 0 6px 14px -8px rgba(14, 38, 34, 0.18);
}
.attach-doc > .icon { width: 30px; height: 30px; margin: -2px 0 2px -3px; }
.attach-doc > i { display: block; width: var(--w, 100%); height: 5px; border-radius: 3px; background: #DCEEE3; }
.attach-doc__name { margin-top: 2px; color: var(--c-ink, var(--ink)); font-size: 10.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.chat:is(.chat--teams, [data-skin="teams"]) .attach-card { border-radius: 8px; }
.chat--sm .attach-card, .chat--xs .attach-card { padding: 10px; border-radius: 12px; }
@media (max-width: 519px) {
.attach-flow { grid-template-columns: minmax(0, 1fr); }
.attach-flow > svg, .attach-flow > .attach-doc { display: none; }
}
.chat-actions, .approve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msg-body > .chat-actions, .msg-body > .approve { margin-top: 10px; }
.slack-btn, .teams-btn, .approve .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 16px;
border: 1px solid var(--c-btn-line, rgba(29, 28, 29, 0.20));
border-radius: 8px;
background: #FFFFFF;
color: var(--c-ink, #1D1C1D);
font-family: var(--c-font, "Lato", sans-serif);
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
box-shadow: none;
cursor: pointer;
transition:
background-color var(--dur-1) var(--ease-out),
border-color var(--dur-1) var(--ease-out),
box-shadow var(--dur-1) var(--ease-out);
}
.slack-btn .icon, .teams-btn .icon, .approve .btn .icon { width: 15px; height: 15px; }
.slack-btn:hover, .approve .btn:hover { background: #F8F8F8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.slack-btn--primary, .approve .btn--primary {
border-color: var(--c-primary, #007A5A);
background: var(--c-primary, #007A5A);
color: #FFFFFF;
}
.slack-btn--primary:hover, .approve .btn--primary:hover {
border-color: var(--c-primary-hover, #148567);
background: var(--c-primary-hover, #148567);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.approve .btn:active, .slack-btn:active, .teams-btn:active { transform: none; }
.approve .btn--ghost, .approve .btn--secondary { background: #FFFFFF; color: var(--c-ink, #1D1C1D); }
.approve-note { color: var(--c-ink-2, var(--ink-mute)); font-size: 13px; }
.approve.is-approved .btn--primary, .chat-actions.is-approved .slack-btn--primary { opacity: 0.55; }
.teams-btn,
.chat:is(.chat--teams, [data-skin="teams"]) .slack-btn,
.chat:is(.chat--teams, [data-skin="teams"]) .approve .btn {
height: 32px;
min-width: 96px;
padding: 0 12px;
border-color: #D1D1D1;
border-radius: 4px;
color: #242424;
font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 600;
}
.teams-btn:hover,
.chat:is(.chat--teams, [data-skin="teams"]) .slack-btn:hover,
.chat:is(.chat--teams, [data-skin="teams"]) .approve .btn:hover { background: #F5F5F5; box-shadow: none; }
.teams-btn--primary,
.chat:is(.chat--teams, [data-skin="teams"]) .slack-btn--primary,
.chat:is(.chat--teams, [data-skin="teams"]) .approve .btn--primary { border-color: #5B5FC7; background: #5B5FC7; color: #FFFFFF; }
.teams-btn--primary:hover,
.chat:is(.chat--teams, [data-skin="teams"]) .slack-btn--primary:hover,
.chat:is(.chat--teams, [data-skin="teams"]) .approve .btn--primary:hover { border-color: #4F52B2; background: #4F52B2; }
.chat--lg .slack-btn, .chat--lg .approve .btn { height: 40px; padding: 0 22px; font-size: 16px; }
.chat--sm .slack-btn, .chat--xs .slack-btn, .chat--sm .approve .btn, .chat--xs .approve .btn { height: 32px; padding: 0 13px; font-size: 14px; }
.chat--lg:is(.chat--teams, [data-skin="teams"]) .slack-btn, .chat--lg:is(.chat--teams, [data-skin="teams"]) .approve .btn { height: 32px; padding: 0 14px; font-size: 14px; }
.chat--sm:is(.chat--teams, [data-skin="teams"]) .slack-btn, .chat--xs:is(.chat--teams, [data-skin="teams"]) .slack-btn { height: 30px; min-width: 84px; font-size: 13px; }
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.msg-body > .reactions { margin-top: 8px; }
.reaction {
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 8px 0 6px;
border-radius: 12px;
background: #F8F8F8;
box-shadow: inset 0 0 0 1px #E0E0E0;
color: var(--c-ink, #1D1C1D);
font-family: var(--c-font, inherit);
font-size: 12px;
font-weight: 400;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.reaction-emoji, .reaction > span[aria-hidden="true"]:first-child {
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
}
.reaction.is-mine { background: #E8F5FA; box-shadow: inset 0 0 0 1px #1264A3; color: #1264A3; }
.reaction--add { width: 32px; justify-content: center; padding: 0; }
.reaction--add::before {
content: "";
width: 16px;
height: 16px;
background: #616061;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M17.2 9.4A7.3 7.3 0 1 1 10.6 2.8'/%3E%3Cpath d='M6.9 11.9c.8 1.2 1.8 1.8 3.1 1.8s2.3-.6 3.1-1.8'/%3E%3Ccircle cx='7.5' cy='8.2' r='.4' fill='%23000'/%3E%3Ccircle cx='12.5' cy='8.2' r='.4' fill='%23000'/%3E%3Cpath d='M16 1.6v4.8M13.6 4h4.8'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M17.2 9.4A7.3 7.3 0 1 1 10.6 2.8'/%3E%3Cpath d='M6.9 11.9c.8 1.2 1.8 1.8 3.1 1.8s2.3-.6 3.1-1.8'/%3E%3Ccircle cx='7.5' cy='8.2' r='.4' fill='%23000'/%3E%3Ccircle cx='12.5' cy='8.2' r='.4' fill='%23000'/%3E%3Cpath d='M16 1.6v4.8M13.6 4h4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat--lg .reaction { height: 26px; padding: 0 9px 0 7px; font-size: 13px; }
.chat--lg .reaction-emoji { font-size: 16px; }
.chat--lg .reaction--add { width: 34px; padding: 0; }
.chat--sm .reaction, .chat--xs .reaction { height: 22px; padding: 0 7px 0 5px; font-size: 11.5px; }
.chat--sm .reaction-emoji, .chat--xs .reaction-emoji { font-size: 14px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body > .reactions {
position: absolute;
top: 7px;
right: 12px;
gap: 10px;
margin: 0;
}
.chat:is(.chat--teams, [data-skin="teams"]) .reaction {
gap: 3px;
height: 20px;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--c-ink-2);
font-size: 12px;
}
.chat:is(.chat--teams, [data-skin="teams"]) .reaction-emoji { font-size: 14px; }
.chat:is(.chat--teams, [data-skin="teams"]) .reaction--add { display: none; }
.file-list { display: grid; gap: 6px; max-width: 440px; }
.file {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
max-width: 440px;
padding: 10px 14px 10px 10px;
border-radius: 12px;
background: #FFFFFF;
box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(14, 38, 34, 0.04);
text-align: left;
}
.file-badge {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
width: 32px;
height: 38px;
padding-bottom: 6px;
border-radius: 6px;
background: var(--csv-bg);
color: var(--csv-fg);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1;
clip-path: polygon(0 0, 66% 0, 100% 28%, 100% 100%, 0 100%);
}
.file-badge::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 34%;
height: 28%;
border-bottom-left-radius: 3px;
background: currentColor;
opacity: 0.28;
}
.file--pdf .file-badge { background: var(--pdf-bg); color: var(--pdf-fg); }
.file--xlsx .file-badge { background: var(--xlsx-bg); color: var(--xlsx-fg); }
.file--docx .file-badge { background: var(--docx-bg); color: var(--docx-fg); }
.file--csv .file-badge { background: var(--csv-bg); color: var(--csv-fg); }
.file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-name {
overflow: hidden;
color: var(--c-ink, var(--ink));
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-meta {
overflow: hidden;
color: var(--c-ink-2, var(--ink-mute));
font-size: 12px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-open {
padding: 6px 10px;
border-radius: 8px;
color: var(--teal-2);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
transition: background-color var(--dur-1) var(--ease-out);
}
a.file-open:hover, button.file-open:hover { background: var(--mint); }
.chat .file {
padding: 10px 14px 10px 10px;
border-radius: 10px;
box-shadow: inset 0 0 0 1px var(--c-line);
}
.chat .file-badge {
align-items: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 7px;
clip-path: none;
background: #616061;
color: #FFFFFF;
font-family: var(--c-font);
font-size: 9px;
font-weight: 900;
letter-spacing: 0.03em;
}
.chat .file-badge::after { display: none; }
.chat .file--pdf .file-badge { background: #D2483D; }
.chat .file--xlsx .file-badge { background: #1E7145; }
.chat .file--docx .file-badge { background: #2B579A; }
.chat .file--csv .file-badge { background: #616061; }
.chat .file-name { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.chat .file-meta { font-size: 13px; }
.chat .file-open { color: var(--c-link); font-weight: 700; }
.chat .file-open:hover { background: var(--c-soft); }
.chat:is(.chat--teams, [data-skin="teams"]) .file { border-radius: 6px; background: #FFFFFF; }
.chat:is(.chat--teams, [data-skin="teams"]) .file-badge { border-radius: 4px; }
.chat:is(.chat--teams, [data-skin="teams"]) .file-name { font-size: 14px; font-weight: 600; }
.chat:is(.chat--teams, [data-skin="teams"]) .file-meta { font-size: 12px; }
.chat--xs .file, .chat--sm .file { gap: 10px; padding: 8px 10px 8px 8px; }
.chat--xs .file-badge, .chat--sm .file-badge { width: 30px; height: 30px; font-size: 8px; border-radius: 6px; }
.chat--xs .file-name, .chat--sm .file-name { font-size: 13px; }
.chat--xs .file-meta, .chat--sm .file-meta { font-size: 11.5px; }
.chat--xs .file-open, .chat--sm .file-open { font-size: 12px; padding: 4px 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 11px;
border-radius: var(--r-pill);
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line), 0 1px 1px rgba(14, 38, 34, 0.03);
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition:
background-color var(--dur-3) var(--ease-out),
color var(--dur-3) var(--ease-out),
box-shadow var(--dur-3) var(--ease-out);
}
.chip .icon { width: 14px; height: 14px; color: var(--ink-3); }
.chip > img { width: 14px; height: 14px; border-radius: 3px; }
a.chip:hover, button.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(14, 38, 34, 0.05); }
.chip.is-active { background: #F3FAF6; color: var(--teal-2); box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.38); }
.chip.is-active::before {
content: "";
flex: none;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green-2);
box-shadow: 0 0 0 3px rgba(47, 191, 132, 0.16);
}
.chip.is-done { background: var(--mint); color: var(--teal-2); box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.18); }
.chip.is-done::before {
content: "";
flex: none;
width: 12px; height: 12px;
background: currentColor;
-webkit-mask: var(--check) center / contain no-repeat;
mask: var(--check) center / contain no-repeat;
}
.chip.is-active .icon, .chip.is-done .icon { color: currentColor; }
.chat--xs .chip, .chat--sm .chip { height: 24px; padding: 0 9px; font-size: 12px; }
.tender-list { display: grid; gap: 8px; }
.tender-list--row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tender {
--match: 0%;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
padding: 12px 14px;
border-radius: 10px;
background: #FFFFFF;
box-shadow: inset 0 0 0 1px var(--c-line, var(--line));
text-align: left;
}
.tender-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tender-title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--c-ink, var(--ink));
font-size: 14px;
font-weight: 700;
line-height: 1.35;
}
.tender-buyer {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
margin-top: -4px;
color: var(--c-ink-2, var(--ink-2));
font-size: 12.5px;
line-height: 1.35;
}
.tender-top > .tender-buyer { margin-top: 0; }
.tender-buyer > span:not(.cc) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tender-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
color: var(--c-ink-2, var(--ink-2));
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.tender-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tender-meta .icon { width: 13px; height: 13px; color: var(--c-ink-3, var(--ink-3)); }
.tender-deadline.is-soon { color: #855A08; }
.tender-deadline.is-soon .icon { color: currentColor; }
.tender-value { color: var(--c-ink, var(--ink)); font-weight: 700; }
.match { display: flex; align-items: center; gap: 10px; }
.match-bar { position: relative; flex: 1; height: 6px; min-width: 48px; overflow: hidden; border-radius: 3px; background: #E9EDE7; }
.match-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--match, 0%); border-radius: inherit; background: var(--grad); transition: width var(--dur-4) var(--ease-out); }
.match-label { color: var(--teal-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.match--mid .match-bar > i { background: linear-gradient(90deg, #D9A441, #E8BE62); }
.match--mid .match-label { color: #855A08; }
.match--low .match-bar > i { background: #B9C3BE; }
.match--low .match-label { color: var(--ink-2); }
.chat-day { position: relative; display: flex; justify-content: center; margin: 6px 0 8px; }
.chat-day::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--c-line); }
.chat-day > span {
position: relative;
padding: 3px 14px;
border-radius: var(--r-pill);
background: #FFFFFF;
box-shadow: inset 0 0 0 1px var(--c-line);
color: var(--c-ink);
font-size: 13px;
font-weight: 700;
}
.chat-members { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-ink-2); font-size: 13px; font-weight: 700; }
.chat-members > .msg-avatar { --avatar: 22px; --avatar-r: 6px; font-size: 10px; box-shadow: 0 0 0 2px #FFFFFF; }
.chat-members > .msg-avatar + .msg-avatar { margin-left: -6px; }
.typing { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 1px; }
.typing > i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-ink-3, var(--ink-3));
animation: kit-typing 1.2s var(--ease-in-out) infinite;
}
.typing > i:nth-child(2) { animation-delay: 0.16s; }
.typing > i:nth-child(3) { animation-delay: 0.32s; }
.chat-typing {
display: flex;
align-items: center;
gap: 6px;
min-height: 20px;
margin: 0;
padding: 0 var(--chat-px) 6px;
color: var(--c-ink-2);
font-size: 12px;
line-height: 1.4;
}
.chat-typing b { font-weight: 700; }
.working {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--c-ink-2, var(--ink-mute));
font-size: 14px;
font-style: italic;
line-height: 20px;
}
.working-tools { display: inline-flex; align-items: center; gap: 4px; flex: none; font-style: normal; }
.working-tools > .icon, .working-tools > img { width: 14px; height: 14px; color: var(--c-ink-3, var(--ink-3)); }
.working > .icon, .working > .spinner { width: 14px; height: 14px; color: var(--c-ink-3, var(--ink-3)); animation: kit-spin 0.9s linear infinite; }
.chat--xs .working, .chat--sm .working { font-size: 13px; }
.spinner {
display: inline-block;
flex: none;
width: 14px;
height: 14px;
border: 2px solid rgba(29, 28, 29, 0.14);
border-top-color: var(--c-ink-2, #616061);
border-radius: 50%;
animation: kit-spin 0.9s linear infinite;
}
.working.is-done { color: var(--c-ink-2, var(--ink-2)); }
.working.is-done > .icon, .working.is-done > .spinner { animation: none; }
.composer {
margin: 0 var(--chat-px, 20px) var(--chat-px, 20px);
overflow: hidden;
border: 1px solid rgba(29, 28, 29, 0.30);
border-radius: 8px;
background: #FFFFFF;
font-family: var(--c-font, var(--font-body));
}
.composer-format {
display: flex;
align-items: center;
gap: 2px;
min-height: 34px;
padding: 3px 6px;
background: #F8F8F8;
border-bottom: 1px solid #EEEEEE;
color: var(--c-ink-3, var(--ink-3));
}
.composer-format .composer-tool { min-width: 26px; height: 26px; font-size: 13px; }
.composer-format > i { width: 1px; height: 16px; margin: 0 4px; background: #DDDDDD; }
.composer-input {
display: flex;
align-items: center;
min-height: 44px;
padding: 11px 12px 4px;
color: var(--c-ink, var(--ink));
font-size: var(--chat-fs, 15px);
line-height: 1.45;
}
.composer-placeholder { color: var(--c-ink-3, var(--ink-mute)); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; }
.composer-tools { display: flex; align-items: center; gap: 2px; color: var(--c-ink-2, var(--ink-3)); }
.composer-tool {
display: inline-grid;
place-items: center;
min-width: 28px;
height: 28px;
padding: 0 4px;
border-radius: 6px;
color: var(--c-ink-2, var(--ink-3));
font-size: 14px;
font-weight: 700;
}
.composer-tool .icon { width: 16px; height: 16px; }
.composer-plus {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
margin-right: 4px;
border-radius: 50%;
background: #EEEEEE;
color: var(--c-ink-2, var(--ink-2));
}
.composer-plus .icon { width: 14px; height: 14px; }
.composer-send {
display: inline-grid;
place-items: center;
width: 32px;
height: 28px;
border-radius: 6px;
background: transparent;
color: var(--c-ink-3, var(--ink-3));
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.composer-send .icon { width: 15px; height: 15px; }
.composer.is-ready .composer-send, .composer-send.is-ready { background: var(--c-primary, #007A5A); color: #FFFFFF; }
.chat:is(.chat--teams, [data-skin="teams"]) .composer { border-color: #E0E0E0; border-radius: 4px; }
.chat:is(.chat--teams, [data-skin="teams"]) .composer-format { display: none; }
.caret {
display: inline-block;
width: 1.5px;
height: 1.15em;
margin-left: 1px;
vertical-align: -0.2em;
background: var(--c-ink, var(--teal-2));
}
.chat--xs .composer-input, .chat--sm .composer-input { min-height: 38px; padding: 9px 12px 4px; }
.chat--xs .composer-bar, .chat--sm .composer-bar { padding: 2px 6px 6px; }
@media (max-width: 599px) {
.chat-head { padding-right: 10px; }
.chat-title, .chat--lg .chat-title { font-size: 16px; }
.attach-card, .attach-card--wide { max-width: none; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body { padding: 8px 12px 10px; }
.chat:is(.chat--teams, [data-skin="teams"]) .msg-body > .reactions { right: 10px; }
}
.msg.is-hidden, .chat .is-hidden, .prompt-box .is-hidden { display: none !important; }
.msg.is-shown, .chat .is-shown, .prompt-box .is-shown { animation: kit-in var(--dur-reveal) var(--ease-out) both; }
@keyframes kit-in {
from { opacity: 0; translate: 0 12px; }
to { opacity: 1; translate: none; }
}
@keyframes kit-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-3px); opacity: 1; }
}
@keyframes kit-spin { to { transform: rotate(360deg); } }
.prompt-box {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 720px;
margin-inline: auto;
padding: 18px 20px 14px;
border: 1px solid var(--line);
border-radius: var(--r-prompt);
background: var(--white);
color: var(--ink);
text-align: left;
box-shadow: var(--shadow-prompt);
transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.prompt-box:focus-within {
border-color: var(--line-2);
box-shadow: var(--focus-soft), var(--shadow-prompt);
}
.prompt-input {
display: block;
width: 100%;
min-height: 52px;
max-height: 232px;
padding: 0 2px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.011em;
resize: none;
overflow-y: auto;
field-sizing: content;
caret-color: var(--teal-2);
-webkit-appearance: none;
appearance: none;
}
.prompt-input::placeholder { color: var(--ink-3); opacity: 1; }
.prompt-input:focus, .prompt-input:focus-visible { outline: none; }
.prompt-field { position: relative; }
.prompt-ph {
position: absolute;
inset: 0;
padding: 0 2px;
overflow: hidden;
color: var(--ink-3);
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.011em;
text-align: left;
white-space: pre-wrap;
overflow-wrap: break-word;
pointer-events: none;
user-select: none;
contain: layout paint style;
will-change: transform;
}
.prompt-field.is-ph-live > .prompt-input::placeholder { color: transparent; }
.prompt-ph__cover {
position: absolute;
left: 0;
top: 0;
background: var(--white);
will-change: transform;
}
div.prompt-input { min-height: 0; padding-bottom: 26px; }
.prompt-placeholder { color: var(--ink-3); }
.prompt-bar {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin: 10px -6px 0;
}
.prompt-bar__start { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prompt-bar__end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.prompt-icon-btn {
display: inline-grid;
place-items: center;
flex: none;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--white);
color: var(--ink-2);
transition:
background-color var(--dur-1) var(--ease-out),
border-color var(--dur-1) var(--ease-out),
color var(--dur-1) var(--ease-out),
transform var(--dur-1) var(--ease-out);
}
.prompt-icon-btn .icon { width: 17px; height: 17px; }
.prompt-icon-btn:hover { background: var(--hover); border-color: var(--line-2); color: var(--ink); }
.prompt-icon-btn:active { transform: translateY(1px); }
.prompt-icon-btn--plain { border-color: transparent; }
.prompt-icon-btn--plain:hover { border-color: transparent; }
.prompt-select {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
height: 34px;
padding: 0 10px 0 12px;
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: var(--ink-2);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.006em;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.prompt-select:hover, .prompt-select[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.prompt-select .icon { width: 14px; height: 14px; color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out); }
.prompt-select[aria-expanded="true"] > .icon:last-child { transform: rotate(180deg); }
.prompt-select:has(> select) { padding: 0; }
.prompt-select > select {
height: 100%;
margin: 0;
padding: 0 30px 0 12px;
border: 0;
border-radius: inherit;
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
cursor: pointer;
field-sizing: content;
-webkit-appearance: none;
appearance: none;
}
.prompt-select > select + .icon { position: absolute; right: 11px; top: 50%; margin-top: -7px; pointer-events: none; }
.prompt-menu {
position: absolute;
z-index: var(--z-dropdown);
min-width: 200px;
padding: 6px;
border-radius: 16px;
background: var(--white);
box-shadow: var(--ring), var(--shadow-lg);
}
.prompt-menu__item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 12px;
border-radius: 10px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
text-align: left;
transition: background-color var(--dur-1) var(--ease-out);
}
.prompt-menu__item .icon { width: 16px; height: 16px; color: var(--ink-3); }
.prompt-menu__item:hover, .prompt-menu__item:focus-visible { background: var(--hover); outline-offset: -2px; }
.prompt-menu__item[aria-selected="true"], .prompt-menu__item[aria-checked="true"] { color: var(--teal-2); }
.prompt-menu__item[aria-selected="true"]::after, .prompt-menu__item[aria-checked="true"]::after {
content: "";
width: 14px;
height: 14px;
margin-left: auto;
background: currentColor;
-webkit-mask: var(--check) center / contain no-repeat;
mask: var(--check) center / contain no-repeat;
}
.prompt-send {
display: inline-grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--btn);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(11, 36, 32, 0.18);
transition:
background-color var(--dur-1) var(--ease-out),
opacity var(--dur-2) var(--ease-out),
transform var(--dur-1) var(--ease-out);
}
.prompt-send .icon { width: 18px; height: 18px; }
.prompt-send:hover { background: var(--btn-hover); }
.prompt-send:active { transform: translateY(1px); }
.prompt-send:disabled, .prompt-send[aria-disabled="true"] {
opacity: 0.3;
cursor: default;
box-shadow: none;
}
.prompt-send:disabled:hover, .prompt-send[aria-disabled="true"]:hover { background: var(--btn); }
.prompt-send:disabled:active, .prompt-send[aria-disabled="true"]:active { transform: none; }
.prompt-files { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px -6px 12px; }
.prompt-file {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
min-width: 0;
height: 32px;
padding: 0 3px 0 10px;
border-radius: 10px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink);
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.prompt-file > .icon { width: 14px; height: 14px; color: var(--ink-3); }
.prompt-file__name { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.prompt-file__meta { color: var(--ink-mute); font-weight: 400; }
.prompt-file__remove {
display: inline-grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
border-radius: 8px;
color: var(--ink-3);
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.prompt-file__remove .icon { width: 13px; height: 13px; }
.prompt-file__remove:hover { background: rgba(14, 38, 34, 0.07); color: var(--ink); }
.prompt-file__remove:focus-visible { outline-offset: 0; }
.prompt-file--stack {
gap: 10px;
height: auto;
min-height: 46px;
padding: 6px 4px 6px 6px;
border-radius: 12px;
}
.prompt-file__icon {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink-2);
}
.prompt-file__icon .icon { width: 15px; height: 15px; }
.prompt-file__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prompt-file__info > .prompt-file__name { max-width: 240px; line-height: 1.2; }
.prompt-file__info > .prompt-file__meta { font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.prompt-thread { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.prompt-bubble {
align-self: flex-end;
max-width: 86%;
padding: 10px 14px;
border-radius: 18px 18px 6px 18px;
background: var(--paper-2);
color: var(--ink);
font-size: 15.5px;
line-height: 1.45;
letter-spacing: -0.008em;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.prompt-bubble .prompt-file { margin-top: 8px; background: var(--white); }
.prompt-reply {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
column-gap: 12px;
align-items: start;
font-size: 15.5px;
line-height: 1.5;
letter-spacing: -0.008em;
color: var(--ink);
}
.prompt-reply > .msg-avatar { --avatar: 28px; --avatar-r: 8px; margin-top: -2px; }
.prompt-reply__body { min-width: 0; }
.prompt-reply__body > * + * { margin-top: 12px; }
.prompt-reply__name { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
.prompt-reply__body > .prompt-reply__name + * { margin-top: 2px; }
.prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.prompt-actions > .link { font-size: 14.5px; }
.prompt-note { font-size: 12.5px; line-height: 1.4; color: var(--ink-mute); }
.prompt-reset { margin-top: 4px; }
@media (max-width: 767px) {
.prompt-box { padding: 14px 16px 12px; border-radius: 20px; }
.prompt-input { font-size: 16px; min-height: 48px; }
.prompt-ph { font-size: 16px; }
.prompt-bar { margin-inline: -4px; margin-top: 8px; gap: 6px; }
.prompt-bar__end { gap: 6px; }
.prompt-select { padding-inline: 10px 8px; font-size: 13.5px; }
.prompt-select > select { padding: 0 26px 0 10px; }
.prompt-select > select + .icon { right: 9px; }
.prompt-files { margin-inline: -4px; }
.prompt-file__name { max-width: 180px; }
.prompt-bubble, .prompt-reply { font-size: 15px; }
}
.otto {
position: relative;
display: block;
width: 100%;
flex: none;
contain: layout paint style;
}
.otto > svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.otto > .otto-face {
position: absolute;
left: 0;
top: 0;
height: 100%;
pointer-events: none;
will-change: transform;
}
.otto--xs { width: 40px; }
.otto--sm { width: 64px; }
.otto--md { width: 88px; }
.otto--lg { width: 120px; }
.otto--xl { width: 180px; }
.otto-face--eyes {
transform-origin: 50% 41.2221%;
transition: scale 90ms var(--ease-out);
}
.otto.is-blink .otto-face--eyes { scale: 1 0.08; }
.otto--follow > .otto-face {
translate: calc(var(--look-ux, 0) * 100% / 620) calc(var(--look-uy, 0) * 100% / 770);
transition: translate 0.3s var(--ease-out), scale 90ms var(--ease-out);
}
.otto-halo { position: relative; isolation: isolate; }
.otto-halo::before {
content: "";
position: absolute;
inset: -28% -36% -18%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(191, 230, 208, 0.38), rgba(191, 230, 208, 0.12) 55%, rgba(191, 230, 208, 0) 100%);
background-repeat: no-repeat;
pointer-events: none;
}
[data-reveal].reveal-armed {
opacity: 0;
translate: 0 var(--rise);
transition:
opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
translate var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal="fade"].reveal-armed { translate: none; }
[data-reveal].reveal-armed.is-revealed { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
.otto > .otto-face { transition: none; }
.otto.is-blink .otto-face--eyes { scale: none; }
.otto--follow > .otto-face { translate: none; }
[data-reveal].reveal-armed { opacity: 1; translate: none; transition: none; }
.msg.is-shown, .chat .is-shown, .prompt-box .is-shown { animation: none; }
.typing > i { animation: none; opacity: 0.6; }
.working > .icon, .working > .spinner, .spinner { animation: none; }
.match-bar > i { transition: none; }
.btn, .btn .icon--trail, .chip, .seg__btn, .skip-link, .card--interactive,
.prompt-box, .prompt-icon-btn, .prompt-select, .prompt-select .icon, .prompt-send,
.chat-toggle__btn, .slack-btn, .teams-btn, .composer-send, .file-open { transition: none; }
.btn:active, .prompt-icon-btn:active, .prompt-send:active, .card--interactive:hover { transform: none; }
.btn:hover .icon--trail { transform: none; }
}
@media print {
[data-reveal] { opacity: 1 !important; translate: none !important; }
}
.s-nav {
--nav-ctl-h: 38px;
position: sticky;
top: 0;
z-index: var(--z-nav);
height: var(--nav-h);
color: var(--ink);
}
.s-nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: color-mix(in srgb, var(--white) 95%, transparent);
box-shadow:
0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent),
0 10px 30px -22px color-mix(in srgb, var(--ink) 30%, transparent);
transition: opacity var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
will-change: opacity;
}
html.js .s-nav:not(.is-scrolled):not(.is-open)::before { opacity: 0; }
.s-nav.is-open::before { background: var(--white); }
.s-nav::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: color-mix(in srgb, rgb(214 226 223) 95%, transparent);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-2) var(--ease-out);
will-change: opacity;
}
.s-nav.is-deep:not(.is-open)::after { opacity: 1; }
.s-nav__bar {
display: flex;
align-items: center;
height: 100%;
gap: 8px;
}
.s-nav__logo {
display: inline-flex;
align-items: center;
flex: none;
margin-left: -4px;
padding: 6px 4px;
border-radius: 8px;
}
.s-nav__logo img {
display: block;
width: auto;
height: 27px;
}
.s-nav__main { margin-left: 28px; min-width: 0; }
.s-nav__links {
display: flex;
align-items: center;
gap: 2px;
}
.s-nav__link {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 13px;
border-radius: var(--r-pill);
color: var(--ink);
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.012em;
white-space: nowrap;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.s-nav__link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.s-nav__link:focus-visible { outline-offset: 0; }
.s-nav__link[aria-current="page"] { background: color-mix(in srgb, var(--ink) 6.5%, transparent); }
.s-nav__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s-nav__item { position: relative; }
.s-nav__trigger { gap: 5px; padding-right: 10px; }
.s-nav__chev {
width: 15px;
height: 15px;
margin-top: 1px;
color: var(--ink-3);
transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.s-nav__trigger:hover .s-nav__chev,
.s-nav__trigger[aria-expanded="true"] .s-nav__chev { color: var(--ink); }
.s-nav__trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.s-nav__trigger[aria-expanded="true"] .s-nav__chev { transform: rotate(180deg); }
.s-nav__item--menu:has(a[aria-current="page"]) > .s-nav__trigger { background: color-mix(in srgb, var(--ink) 6.5%, transparent); }
.s-nav__menu {
position: absolute;
top: 100%;
left: -14px;
z-index: var(--z-dropdown);
display: none;
width: 400px;
padding-top: 10px;
opacity: 0;
translate: 0 -6px;
transition-property: opacity, translate, display;
transition-duration: var(--dur-2);
transition-timing-function: var(--ease-out);
transition-behavior: allow-discrete;
}
.s-nav__item--menu.is-open > .s-nav__menu,
html:not(.js) .s-nav__item--menu:hover > .s-nav__menu,
html:not(.js) .s-nav__item--menu:focus-within > .s-nav__menu {
display: block;
opacity: 1;
translate: none;
}
@starting-style {
.s-nav__item--menu.is-open > .s-nav__menu { opacity: 0; translate: 0 -6px; }
}
.s-nav__menu-list {
display: grid;
gap: 2px;
margin: 0;
padding: 8px;
border-radius: var(--r-lg);
background: var(--white);
box-shadow: var(--ring), var(--shadow-lg);
}
.s-nav__feat {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 10px 12px;
border-radius: var(--r-md);
color: var(--ink);
transition: background-color var(--dur-1) var(--ease-out);
}
.s-nav__feat:hover,
.s-nav__feat:focus-visible { background: var(--hover); }
.s-nav__feat:focus-visible { outline-offset: -2px; }
.s-nav__feat-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--mint);
color: var(--teal-2);
transition: background-color var(--dur-1) var(--ease-out);
}
.s-nav__feat-icon svg { width: 21px; height: 21px; }
.s-nav__feat:hover .s-nav__feat-icon { background: var(--mint-2); }
.s-nav__feat-text { display: grid; gap: 2px; min-width: 0; }
.s-nav__feat-title {
font-size: 15px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.012em;
}
.s-nav__feat-desc {
color: var(--ink-mute);
font-size: 13.5px;
line-height: 1.4;
letter-spacing: -0.005em;
}
.s-nav__feat[aria-current="page"] { background: var(--hover); }
.s-nav__feat[aria-current="page"] .s-nav__feat-title { color: var(--teal-2); }
.s-nav__actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex: none;
}
.s-nav .s-nav__btn {
--btn-h: var(--nav-ctl-h);
padding: 0 17px;
font-size: 14.5px;
letter-spacing: -0.01em;
}
.s-nav .s-nav__login { background: color-mix(in srgb, var(--white) 72%, transparent); }
.s-nav .s-nav__login:hover { background: var(--white); }
.s-nav__burger {
display: none;
place-items: center;
width: 40px;
height: 40px;
margin-right: -6px;
border-radius: 12px;
color: var(--ink);
transition: background-color var(--dur-1) var(--ease-out);
}
.s-nav__burger:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.s-nav__burger .icon { grid-area: 1 / 1; width: 22px; height: 22px; }
.s-nav__burger-close,
.s-nav__burger[aria-expanded="true"] .s-nav__burger-open { display: none; }
.s-nav__burger[aria-expanded="true"] .s-nav__burger-close { display: block; }
.s-nav__drawer {
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--white);
box-shadow: inset 0 1px 0 var(--line-soft);
opacity: 0;
translate: 0 -8px;
transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.s-nav__drawer.is-open { opacity: 1; translate: none; }
.s-nav__drawer-inner {
display: flex;
flex-direction: column;
gap: 28px;
width: 100%;
max-width: 640px;
margin-inline: auto;
padding: 12px var(--gutter) max(32px, env(safe-area-inset-bottom));
}
.s-nav__drawer-links > li { border-bottom: 1px solid var(--line-soft); }
.s-nav__drawer-link {
display: flex;
align-items: center;
min-height: 60px;
color: var(--ink);
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.025em;
transition: color var(--dur-1) var(--ease-out);
}
.s-nav__drawer-link:hover,
.s-nav__drawer-link[aria-current="page"] { color: var(--teal-2); }
.s-nav__drawer-link:focus-visible { outline-offset: -2px; border-radius: 8px; }
.s-nav__drawer-link--quiet {
font-family: var(--font-body);
font-size: 17px;
letter-spacing: -0.012em;
color: var(--ink-2);
}
.s-nav__drawer-actions { display: grid; gap: 10px; }
.s-nav__drawer-toggle {
justify-content: space-between;
gap: 12px;
width: 100%;
text-align: left;
}
.s-nav__drawer-toggle .s-nav__chev { width: 22px; height: 22px; margin: 0; }
.s-nav__drawer-toggle[aria-expanded="true"] .s-nav__chev { color: var(--ink); transform: rotate(180deg); }
.s-nav__drawer-group:has(a[aria-current="page"]) > .s-nav__drawer-toggle { color: var(--teal-2); }
.s-nav__drawer-sub {
display: grid;
gap: 2px;
margin: -4px 0 0;
padding: 0 0 14px;
}
.s-nav__drawer-sub:not([hidden]) { animation: s-nav-sub-in var(--dur-2) var(--ease-out); }
@keyframes s-nav-sub-in { from { opacity: 0; } }
.s-nav__feat--drawer { margin-inline: -12px; padding-block: 9px; }
.s-nav__feat--drawer .s-nav__feat-title { font-size: 16px; }
.s-nav__feat--drawer .s-nav__feat-desc { font-size: 14px; }
@media (max-width: 1100px) {
.s-nav__main { margin-left: 16px; }
.s-nav__link { padding: 0 10px; }
}
@media (max-width: 960px) {
.s-nav__main,
.s-nav__login { display: none; }
.s-nav__burger { display: grid; }
}
.s-nav.is-compact .s-nav__main,
.s-nav.is-compact .s-nav__login { display: none; }
.s-nav.is-compact .s-nav__burger { display: grid; }
@media (min-width: 961px) {
.s-nav:not(.is-compact) .s-nav__drawer { display: none !important; }
}
@media (max-width: 767px) {
.s-nav { --nav-ctl-h: 36px; }
.s-nav__logo img { height: 25px; }
.s-nav .s-nav__btn { padding: 0 15px; font-size: 14px; }
.s-nav__actions { gap: 6px; }
}
@media (max-width: 430px) {
.s-nav__logo img { height: 22px; }
.s-nav__actions { flex: 0 1 auto; min-width: 0; gap: 4px; }
.s-nav .s-nav__btn { padding: 0 12px; font-size: 13px; }
.s-nav .s-nav__cta {
flex: 0 1 auto;
min-width: 0;
height: auto;
min-height: var(--btn-h);
padding-block: 3px;
line-height: 1.12;
white-space: normal;
text-align: center;
text-wrap: balance;
}
}
@media (max-width: 359px) {
.s-nav__logo img { height: 20px; }
.s-nav .s-nav__btn { padding: 0 10px; }
}
@media (max-width: 960px) {
html:not(.js) .s-nav { height: auto; }
html:not(.js) .s-nav__bar { flex-wrap: wrap; height: auto; min-height: var(--nav-h); padding-block: 12px 4px; }
html:not(.js) .s-nav__burger { display: none; }
html:not(.js) .s-nav__main {
display: block;
order: 3;
flex: 1 0 100%;
margin: 0;
overflow-x: auto;
scrollbar-width: none;
}
html:not(.js) .s-nav__link { padding: 0 10px; font-size: 14.5px; }
html:not(.js) .s-nav__trigger { display: none; }
html:not(.js) .s-nav__item--menu,
html:not(.js) .s-nav__menu,
html:not(.js) .s-nav__menu-list,
html:not(.js) .s-nav__menu-list > li { display: contents; }
html:not(.js) .s-nav__menu .s-nav__feat {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 10px;
border-radius: var(--r-pill);
font-size: 14.5px;
font-weight: 500;
white-space: nowrap;
}
html:not(.js) .s-nav__menu .s-nav__feat-icon,
html:not(.js) .s-nav__menu .s-nav__feat-desc { display: none; }
html:not(.js) .s-nav__menu .s-nav__feat-title { font-size: inherit; font-weight: inherit; }
html:not(.js) .s-nav__menu-list > li:first-child .s-nav__feat { margin-left: -10px; }
}
@media (prefers-reduced-motion: reduce) {
.s-nav::before,
.s-nav::after,
.s-nav__link,
.s-nav__burger,
.s-nav__drawer,
.s-nav__drawer-link,
.s-nav__chev,
.s-nav__menu,
.s-nav__feat,
.s-nav__feat-icon { transition: none; }
.s-nav__drawer,
.s-nav__menu { translate: none; }
.s-nav__drawer-sub:not([hidden]) { animation: none; }
}
.s-hero {
--hero-stack: 500px;
--hero-gap-box: 120px;
--otto-w: 128px;
--warm-size: 24% 20%;
position: relative;
isolation: isolate;
min-height: calc(100vh - var(--nav-h));
min-height: calc(100svh - var(--nav-h));
padding-top: clamp(48px, calc((100vh - var(--nav-h) - var(--hero-stack)) * 0.44), 210px);
padding-top: clamp(48px, calc((100svh - var(--nav-h) - var(--hero-stack)) * 0.44), 210px);
padding-bottom: clamp(104px, 14vh, 168px);
text-align: center;
background: var(--paper);
}
.s-hero__wash {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
background:
linear-gradient(180deg, color-mix(in srgb, var(--glow-c) 0%, transparent) 66%, color-mix(in srgb, var(--glow-c) 50%, transparent) 86%, var(--glow-c) 100%),
linear-gradient(180deg, var(--paper) 0%, var(--paper) 12%, color-mix(in srgb, var(--paper) 0%, transparent) 32%),
radial-gradient(ellipse 34% 24% at 50% 59%, color-mix(in srgb, var(--white) 75%, transparent) 0%, color-mix(in srgb, var(--white) 0%, transparent) 100%),
radial-gradient(ellipse var(--warm-size) at 50% 94%, color-mix(in srgb, var(--eye) 70%, transparent) 0%, color-mix(in srgb, var(--eye) 0%, transparent) 100%),
radial-gradient(ellipse 26% 40% at 0% 74%, color-mix(in srgb, var(--teal-2) 20%, transparent) 0%, color-mix(in srgb, var(--teal-2) 0%, transparent) 100%),
radial-gradient(ellipse 89% 116% at 50% 0%,
var(--paper) 0%,
var(--paper) 54%,
var(--glow-c) 65%,
color-mix(in srgb, var(--green) 42%, var(--glow-c)) 76%,
color-mix(in srgb, var(--green) 64%, var(--glow-c)) 87%,
color-mix(in srgb, var(--green) 50%, var(--glow-c)) 100%,
var(--glow-c) 114%);
background-repeat: no-repeat;
}
.s-hero__wash::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--noise);
background-size: 180px 180px;
opacity: var(--grain-a);
}
.s-hero__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.s-hero__eyebrow { margin: 0 auto 22px; }
.s-hero__title {
max-width: 100%;
font-size: clamp(44px, 4.2vw + 12px, 64px);
line-height: 1.04;
letter-spacing: -0.045em;
text-wrap: balance;
}
.s-hero__phrase { display: inline-block; white-space: nowrap; }
@media (max-width: 600px) {
.s-hero__phrase { max-width: 100%; white-space: normal; text-wrap: balance; }
}
.s-hero__title .grad-text { padding-right: 0.04em; }
.s-hero__sub {
max-width: 760px;
margin: 18px auto 0;
text-wrap: balance;
}
.s-hero__perch {
position: relative;
width: 100%;
max-width: 720px;
margin: var(--hero-gap-box) auto 0;
}
.s-hero__otto {
position: absolute;
z-index: 0;
right: 46px;
top: calc(var(--otto-w) * -0.80);
width: var(--otto-w);
pointer-events: none;
}
.s-hero__box { position: relative; z-index: 1; }
.s-hero__input {
min-height: 51px;
max-height: calc(17px * 1.5 * 6);
scrollbar-width: thin;
}
.s-hero__compose { display: flex; flex-direction: column; }
.s-hero__files { margin-top: -6px; }
.s-hero__file .prompt-file__icon { background: var(--white); }
.s-hero__file .prompt-file__icon .icon { width: 18px; height: 18px; }
html:not(.js) .s-hero__attach { display: none; }
.s-hero__bar-end { position: relative; }
.s-hero__task-btn .icon { width: 14px; height: 14px; }
.s-hero__menu {
top: calc(100% + 10px);
right: -6px;
width: 332px;
max-width: calc(100vw - 2 * var(--gutter));
opacity: 0;
translate: 0 -4px;
transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.s-hero__menu.is-open { opacity: 1; translate: none; }
.s-hero__menu-label {
display: block;
padding: 8px 12px 6px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-mute);
}
.s-hero__menu .prompt-menu__item {
position: relative;
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 16px;
align-items: center;
column-gap: 10px;
min-height: 0;
padding: 9px 10px;
cursor: pointer;
outline: none;
}
.s-hero__menu .prompt-menu__item::after { grid-column: 3; margin: 0; }
.s-hero__menu .prompt-menu__item:focus-visible,
.s-hero__menu .prompt-menu__item.is-active { background: var(--hover); }
.s-hero__menu .prompt-menu__item:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teal-2) 55%, transparent); }
.s-hero__opt-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink-2);
}
.s-hero__opt-icon .icon { width: 16px; height: 16px; color: inherit; }
.prompt-menu__item[aria-selected="true"] .s-hero__opt-icon { background: var(--mint); box-shadow: none; color: var(--teal-2); }
.s-hero__opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-hero__opt-label { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.3; }
.s-hero__opt-desc { color: var(--ink-mute); font-size: 12.5px; font-weight: 400; line-height: 1.35; }
.s-hero__quiet {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 12px;
margin-top: 28px;
}
.s-hero__works-label {
color: var(--ink-2);
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.006em;
}
.s-hero__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.s-hero__tool {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.06);
}
.s-hero__tool .icon { width: 16px; height: 16px; }
.s-hero__tool--more { color: var(--ink-2); }
.s-hero__tool--more .icon { width: 14px; height: 14px; }
@media (max-width: 1023px) {
.s-hero { --hero-stack: 520px; }
}
@media (max-width: 767px) {
.s-hero {
--hero-stack: 530px;
--hero-gap-box: 78px;
--otto-w: 84px;
--warm-size: 46% 12%;
padding-bottom: 96px;
}
.s-hero__eyebrow { margin-bottom: 18px; }
.s-hero__title { font-size: clamp(38px, 10vw, 44px); line-height: 1.06; }
.s-hero__sub { margin-top: 14px; font-size: 17px; }
.s-hero__otto { right: 22px; }
.s-hero__input { min-height: 48px; max-height: calc(16px * 1.5 * 6); }
.s-hero__menu { right: -4px; width: 300px; }
.s-hero__quiet { flex-direction: column; gap: 10px; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.s-hero__menu { transition: none; translate: none; }
}
.s-demo {
isolation: isolate;
overflow: clip;
padding-top: 40px;
padding-bottom: 96px;
}
.s-demo__wash {
position: absolute;
inset: 0 0 auto;
z-index: -1;
height: 900px;
pointer-events: none;
background:
radial-gradient(ellipse 46% 28.9% at 50% 47.8%, color-mix(in srgb, var(--white) 55%, transparent) 0%, color-mix(in srgb, var(--white) 0%, transparent) 100%),
radial-gradient(ellipse 30% 33.3% at 0% 57.8%, color-mix(in srgb, var(--green) 14%, transparent) 0%, color-mix(in srgb, var(--green) 0%, transparent) 100%),
radial-gradient(ellipse 30% 33.3% at 100% 57.8%, color-mix(in srgb, var(--teal-2) 10%, transparent) 0%, color-mix(in srgb, var(--teal-2) 0%, transparent) 100%),
linear-gradient(180deg,
var(--glow-c) 0%,
color-mix(in srgb, var(--glow-c) 78%, var(--paper)) 17.8%,
color-mix(in srgb, var(--glow-c) 46%, var(--paper)) 42.2%,
color-mix(in srgb, var(--glow-c) 18%, var(--paper)) 68.9%,
var(--paper) 100%);
background-repeat: no-repeat;
}
.s-demo__wash::after {
content: "";
position: absolute;
inset: 0 0 30% 0;
background-image: var(--noise);
background-size: 180px 180px;
opacity: var(--grain-a);
}
.s-demo__inner { position: relative; }
.s-demo__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
margin: 0 auto 48px;
text-align: center;
}
.s-demo__title {
max-width: none;
font-size: clamp(32px, 3.9vw, 56px);
}
.s-demo__phrase { white-space: nowrap; }
.s-demo__figure { margin: 0; }
.s-demo__frame { padding: 10px; border-radius: 32px; background: var(--glass-mint); }
.s-demo__chat {
--side-w: 324px;
--avatar: 44px;
--chat-px: 18px;
border-radius: 22px;
min-height: 648px;
}
.s-demo__body { padding-top: 4px; padding-bottom: 28px; }
.s-demo__chat .chat-side-group { color: #454245; }
.s-demo__chat .chat-side-group .icon { color: #454245; }
.s-demo__chat .chat-channel .chat-hash { font-weight: 400; }
.s-demo__chat .chat-channel.is-active .chat-hash { font-weight: 700; }
.s-demo__tabs { display: flex; flex-direction: column; min-width: 0; }
.s-demo__list .s-demo__tabs { gap: 1px; }
.s-demo__chat .chat-channel,
.s-demo__chat .teams-row {
width: 100%;
text-align: left;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease-out);
}
.s-demo__chat .chat-channel:not(.is-active):hover { background: rgba(29, 28, 29, 0.045); }
.s-demo__chat .teams-row:not(.is-selected):hover { background: #F7F7F7; }
.s-demo__chat .chat-channel:focus-visible,
.s-demo__chat .teams-row:focus-visible { outline-offset: -2px; }
.s-demo__conv:focus-visible { outline-offset: 2px; border-radius: 6px; }
.s-demo__now.is-switching > span { animation: s-demo-fade var(--dur-2) var(--ease-out) both; }
.s-demo__chat:not(.chat--teams) .msg { padding: 8px 0 10px; }
.s-demo__chat:not(.chat--teams) .msg-meta { column-gap: 8px; }
.s-demo__chat:not(.chat--teams) .msg-time { font-size: 13px; }
.s-demo__convs { display: grid; min-width: 0; }
.s-demo__conv { grid-area: 1 / 1; min-width: 0; }
.s-demo__conv:not(.is-current) { display: none; }
.s-demo__chat.is-live .s-demo__conv { display: block; visibility: hidden; }
.s-demo__chat.is-live .s-demo__conv.is-current { visibility: visible; }
.s-demo__chat.is-live .s-demo__conv.is-leaving {
visibility: visible;
pointer-events: none;
animation: s-demo-out var(--dur-2) var(--ease-out) both;
}
.s-demo__working { display: none; min-width: 0; font-size: 15px; line-height: 24px; }
.s-demo__working .working-tools { gap: 5px; }
.s-demo__working .working-tools > .icon { width: 15px; height: 15px; }
.s-demo__working-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-demo__chat:not(.is-measuring) .s-demo__conv.is-working .s-demo__working { display: flex; }
.s-demo__chat:not(.is-measuring) .s-demo__conv.is-working .s-demo__answer { display: none; }
.s-demo__card {
container: demo-card / inline-size;
max-width: 580px;
padding: 14px;
border-radius: 16px;
}
.msg-body > .s-demo__card { margin-top: 14px; }
.s-demo__card .attach-head {
flex-wrap: wrap;
row-gap: 2px;
margin: 1px 16px 11px;
font-size: 14px;
white-space: nowrap;
}
.s-demo__card .attach-head > small { font-size: 12.5px; }
.s-demo__card .s-demo__sheet { padding: 0 16px; border-radius: 11px; }
.s-demo__row { min-width: 0; padding: 12px 0 13px; }
.s-demo__row + .s-demo__row { border-top: 1px solid #EEF0EE; }
.s-demo__t-title, .s-demo__r-title, .s-demo__u-title, .s-demo__d-name {
min-width: 0;
color: var(--c-ink);
font-size: 15px;
font-weight: 700;
line-height: 20px;
}
.s-demo__t-buyer, .s-demo__t-due, .s-demo__r-note, .s-demo__r-ref, .s-demo__u-buyer, .s-demo__u-date {
min-width: 0;
color: var(--c-ink-2);
font-size: 13px;
line-height: 18px;
}
.s-demo__tag {
display: inline-flex;
align-items: center;
flex: none;
height: 19px;
padding: 0 6px;
border-radius: 4px;
background: rgba(0, 122, 90, 0.10);
color: #007A5A;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.s-demo__tag--warn { background: rgba(224, 163, 37, 0.16); color: #855A08; }
.s-demo__tender {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title value"
"buyer due";
align-items: baseline;
column-gap: 20px;
row-gap: 3px;
}
.s-demo__t-title { grid-area: title; display: flex; align-items: center; gap: 8px; }
.s-demo__t-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-demo__t-buyer { grid-area: buyer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-demo__t-value {
grid-area: value;
color: var(--c-ink);
font-size: 15px;
font-weight: 700;
line-height: 20px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.s-demo__t-due { grid-area: due; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-demo__req {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title ref"
"note note";
align-items: baseline;
column-gap: 20px;
row-gap: 3px;
}
.s-demo__r-title { grid-area: title; }
.s-demo__r-ref { grid-area: ref; white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-demo__r-note { grid-area: note; }
.s-demo__card .s-demo__file {
max-width: none;
margin-top: 10px;
padding: 9px 14px 9px 9px;
border-radius: 11px;
background: #FFFFFF;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.05), 0 1px 2px rgba(14, 38, 34, 0.05);
}
.s-demo__card .s-demo__file .file-badge { width: 34px; height: 34px; }
.s-demo__doc {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
padding: 10px 0 11px;
}
.s-demo__ftype {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: #616061;
color: #FFFFFF;
font-size: 7.5px;
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1;
}
.s-demo__ftype--pdf { background: #D2483D; }
.s-demo__ftype--xlsx { background: #1E7145; }
.s-demo__ftype--docx { background: #2B579A; }
.s-demo__d-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-demo__due {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 24px;
grid-template-areas:
"title date owner"
"buyer date owner";
align-items: center;
column-gap: 16px;
row-gap: 3px;
}
.s-demo__u-title { grid-area: title; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-demo__u-buyer { grid-area: buyer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-demo__u-date { grid-area: date; color: var(--c-ink); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-demo__owner {
grid-area: owner;
position: relative;
width: 24px;
height: 24px;
overflow: hidden;
border-radius: 6px;
background: #E9ECEA;
}
.s-demo__owner > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
transform: scale(1.45);
transform-origin: 50% 36%;
}
.s-demo__range { position: relative; }
.s-demo__card .s-demo__range { padding: 12px 18px 11px; }
.s-demo__scale { position: relative; height: 18px; }
.s-demo__lbl {
position: absolute;
top: 0;
left: var(--x);
color: var(--c-ink-3);
font-size: 12.5px;
line-height: 18px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
transform: translateX(-50%);
}
.s-demo__lbl > b { color: var(--c-ink); font-weight: 700; }
.s-demo__nb { white-space: nowrap; }
.s-demo__lbl--mid, .s-demo__lbl--ours { color: var(--c-ink-2); }
.s-demo__lbl--min { transform: translateX(-30%); }
.s-demo__lbl--max { transform: translateX(-70%); }
.s-demo__lbl--ours { transform: translateX(-62%); }
.s-demo__strip { position: relative; height: 34px; margin: 2px 0; }
.s-demo__strip > i { position: absolute; top: 50%; display: block; }
.s-demo__band {
left: var(--a);
right: calc(100% - var(--b));
height: 6px;
margin-top: -3px;
border-radius: 3px;
background: #DCEEE3;
}
.s-demo__median {
left: var(--x);
width: 2px;
height: 34px;
margin: -17px 0 0 -1px;
border-radius: 1px;
background: var(--c-ink);
}
.s-demo__dot {
left: var(--x);
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: #2E9A6C;
box-shadow: 0 0 0 2px #FFFFFF;
}
.s-demo__ours {
left: var(--x);
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 3px solid var(--c-ink);
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 0 2px #FFFFFF;
}
@container demo-card (max-width: 400px) {
.s-demo__card .s-demo__sheet { padding: 0 12px; }
.s-demo__row { padding: 10px 0 11px; }
.s-demo__t-title, .s-demo__r-title, .s-demo__u-title, .s-demo__d-name { font-size: 14px; }
.s-demo__tender {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"title title"
"buyer buyer"
"value due";
column-gap: 0;
}
.s-demo__t-title { align-items: flex-start; flex-wrap: wrap; row-gap: 3px; }
.s-demo__t-name { white-space: normal; }
.s-demo__tag { margin-top: 1px; }
.s-demo__t-value { font-size: 13px; line-height: 18px; text-align: left; }
.s-demo__t-due { text-align: left; }
.s-demo__t-due::before { content: "·"; margin: 0 6px; }
.s-demo__t-buyer { white-space: normal; }
.s-demo__req { column-gap: 12px; }
.s-demo__doc { column-gap: 10px; padding: 9px 0 10px; }
.s-demo__d-name { font-size: 13.5px; }
.s-demo__due {
grid-template-areas:
"title title owner"
"buyer buyer owner"
"date  date  owner";
column-gap: 12px;
}
.s-demo__u-title, .s-demo__u-buyer { white-space: normal; }
.s-demo__card .s-demo__range { padding: 11px 12px 10px; }
.s-demo__lbl { font-size: 12px; }
.s-demo__card .s-demo__file { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.s-demo__card .s-demo__file .file-badge { width: 30px; height: 30px; font-size: 8px; }
.s-demo__card .s-demo__file .file-name { font-size: 14px; }
}
@container demo-card (max-width: 300px) {
.s-demo__doc {
grid-template-columns: 28px minmax(0, 1fr);
grid-template-areas:
"tile name"
"tile tag";
row-gap: 4px;
}
.s-demo__doc > .s-demo__ftype { grid-area: tile; }
.s-demo__doc > .s-demo__d-name { grid-area: name; }
.s-demo__doc > .s-demo__tag { grid-area: tag; justify-self: start; }
.s-demo__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 1.5px #FFFFFF; }
.s-demo__ours { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2.5px; }
}
.s-demo__chat .chat-actions > .slack-btn { cursor: default; }
.s-demo__chat .chat-actions > .slack-btn:hover { background: #FFFFFF; box-shadow: none; }
.s-demo__chat .chat-actions > .slack-btn--primary:hover { background: var(--c-primary); border-color: var(--c-primary); }
.s-demo__chat:not(.chat--teams) .msg-body > .chat-actions { margin-top: 16px; }
.s-demo__chat:not(.chat--teams) .chat-actions > .slack-btn { min-width: 108px; }
.s-demo__chat:not(.chat--teams) .msg-body > .reactions { margin-top: 12px; }
.s-demo__chat.chat--teams { --avatar: 32px; }
.s-demo__chat.chat--teams .s-demo__body { padding-top: 20px; }
.s-demo__chat.chat--teams .msg-body { padding: 9px 18px 14px; }
.s-demo__chat.chat--teams .msg-body > .reactions { top: 9px; right: 16px; }
.s-demo__chat.chat--teams .s-demo__working { font-size: 14.5px; line-height: 22px; }
.s-demo__chat.chat--teams .msg-body > .s-demo__card { margin-top: 14px; }
.s-demo__chat.chat--teams .s-demo__card { border-radius: 8px; }
.s-demo__chat.chat--teams .s-demo__card .s-demo__sheet,
.s-demo__chat.chat--teams .s-demo__card .s-demo__file { border-radius: 6px; }
.s-demo__chat.chat--teams .s-demo__card .attach-head { font-weight: 600; }
.s-demo__chat.chat--teams :is(.s-demo__t-title, .s-demo__t-value, .s-demo__r-title, .s-demo__u-title, .s-demo__d-name, .s-demo__u-date) { font-size: 14px; font-weight: 600; }
.s-demo__chat.chat--teams .s-demo__lbl > b { font-weight: 600; }
.s-demo__chat.chat--teams :is(.s-demo__t-buyer, .s-demo__t-due, .s-demo__r-note, .s-demo__r-ref, .s-demo__u-buyer) { font-size: 12.5px; }
.s-demo__chat.chat--teams .s-demo__tag { border-radius: 4px; background: #F1FAF1; color: #0E700E; font-weight: 600; box-shadow: inset 0 0 0 1px #9FD89F; }
.s-demo__chat.chat--teams .s-demo__tag--warn { background: #FFF9F0; color: #8A4A00; box-shadow: inset 0 0 0 1px #F4C98B; }
.s-demo__chat.chat--teams .s-demo__ftype { border-radius: 4px; font-weight: 700; }
.s-demo__chat.chat--teams .s-demo__owner { border-radius: 50%; }
.s-demo__chat.chat--teams .s-demo__owner > img { transform: scale(1.8); transform-origin: 50% 33%; }
.s-demo__chat.chat--teams .msg-body > .chat-actions { margin-top: 14px; }
.s-demo__chat.chat--teams .chat-actions > .slack-btn:hover { background: #FFFFFF; }
.s-demo__chat.chat--teams .chat-actions > .slack-btn--primary:hover { background: #5B5FC7; border-color: #5B5FC7; }
.s-demo__chat:not(.is-measuring) .s-demo__conv.is-armed [data-step]:not(.is-in) { display: none; }
.s-demo__conv.is-armed [data-step].is-in { animation: s-demo-in var(--dur-reveal) var(--ease-out) both; }
.s-demo__conv.is-armed [data-step="actions"].is-in,
.s-demo__conv.is-armed [data-step="react"].is-in { animation-name: s-demo-in-sm; }
.s-demo__conv.is-armed:not(.is-working) .s-demo__answer { animation: s-demo-fade var(--dur-3) var(--ease-out) both; }
.s-demo__chat.is-measuring,
.s-demo__chat.is-measuring * { transition: none !important; }
@keyframes s-demo-in {
from { opacity: 0; translate: 0 12px; }
to { opacity: 1; translate: none; }
}
@keyframes s-demo-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes s-demo-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes s-demo-in-sm {
from { opacity: 0; translate: 0 6px; }
to { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
.s-demo__conv.is-armed [data-step].is-in,
.s-demo__conv.is-armed .s-demo__answer,
.s-demo__chat.is-live .s-demo__conv.is-leaving,
.s-demo__now.is-switching > span { animation: none; }
.s-demo__chat.is-live .s-demo__conv.is-leaving { visibility: hidden; }
.s-demo__chat .chat-channel, .s-demo__chat .teams-row { transition: none; }
}
@media (max-width: 1199px) {
.s-demo__chat { --side-w: 264px; }
}
@media (max-width: 1023px) {
.s-demo__chat { --side-w: 240px; }
.s-demo__chat .teams-row__preview { font-size: 11.5px; }
}
@media (max-width: 899px) {
.s-demo__chat { min-height: 600px; }
}
@media (max-width: 767px) {
.s-demo { padding-top: 24px; padding-bottom: 64px; }
.s-demo__wash { height: 760px; }
.s-demo__head { gap: 14px; margin-bottom: 32px; }
.s-demo__frame { padding: 6px; border-radius: 26px; }
.s-demo__chat { --avatar: 36px; border-radius: 20px; min-height: 0; }
.s-demo__chat.chat--teams { --avatar: 30px; }
.s-demo__body { padding-top: 8px; padding-bottom: 20px; }
.s-demo__chat.chat--teams .s-demo__body { padding-top: 14px; }
.s-demo__chat.chat--teams .msg-body { padding: 8px 12px 12px; }
.s-demo__chat.chat--teams .msg-body > .reactions { right: 10px; }
.s-demo__working { font-size: 14px; line-height: 22px; }
.s-demo__card { padding: 10px; border-radius: 14px; }
.s-demo__card .attach-head { margin: 1px 12px 9px; font-size: 13px; }
.s-demo__card .attach-head > small { font-size: 12px; }
.s-demo__card .s-demo__file { margin-top: 8px; }
.s-demo__chat:not(.chat--teams) .chat-actions > .slack-btn { min-width: 0; height: 36px; padding: 0 14px; font-size: 15px; }
}
@media (max-width: 479px) {
.s-demo__phrase { white-space: normal; }
.s-demo__card .attach-head { white-space: normal; }
}
.s-logos {
padding-top: 8px;
padding-bottom: 104px;
}
.s-logos__row {
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
align-items: center;
column-gap: 64px;
padding-block: 28px;
}
.s-logos__label {
margin: 0;
max-width: 300px;
color: var(--ink-2);
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.006em;
text-wrap: balance;
}
.s-logos__marks {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
margin: 0;
}
.s-logos__mark {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 16px;
color: var(--ink-mute);
line-height: 1;
white-space: nowrap;
user-select: none;
}
.s-logos__mark + .s-logos__mark { border-left: 1px solid var(--line); }
.s-logos__mark--energenas {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: 0.04em;
}
.s-logos__mark--bonameda {
font-family: var(--font-display);
font-size: 25px;
font-weight: 500;
letter-spacing: -0.05em;
text-transform: lowercase;
padding-bottom: 3px;
}
.s-logos__mark--inospectra {
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.32em;
margin-right: -0.32em;
}
@media (max-width: 1199px) {
.s-logos__row { grid-template-columns: 240px minmax(0, 1fr); column-gap: 48px; }
}
@media (max-width: 1023px) {
.s-logos__row {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
row-gap: 18px;
padding-block: 26px;
text-align: center;
}
.s-logos__label { max-width: 420px; }
.s-logos__marks { width: 100%; max-width: 720px; }
}
@media (max-width: 767px) {
.s-logos { padding-top: 8px; padding-bottom: 64px; }
.s-logos__row { padding-block: 24px; }
.s-logos__label { max-width: 320px; font-size: 14.5px; }
.s-logos__marks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 32px;
}
.s-logos__mark { min-height: 40px; padding: 0; }
.s-logos__mark + .s-logos__mark { border-left: 0; }
.s-logos__mark--energenas { font-size: 18px; }
.s-logos__mark--bonameda { font-size: 23px; }
.s-logos__mark--inospectra { font-size: 14px; letter-spacing: 0.26em; margin-right: -0.26em; }
}
.s-logos__mark img { display: block; width: auto; max-width: 100%; opacity: 0.85; }
.s-logos__mark--energenas img { height: 34px; }
.s-logos__mark--bonameda img { height: 22px; }
.s-logos__mark--inospectra img { height: 30px; }
@media (max-width: 767px) {
.s-logos__mark--energenas img { height: 28px; }
.s-logos__mark--bonameda img { height: 16px; }
.s-logos__mark--inospectra img { height: 24px; }
}
.s-logos__mark img { object-fit: contain; }
.s-logos__mark--helso img { height: 30px; }
.s-logos__mark--lemona img { height: 30px; }
@media (max-width: 767px) {
.s-logos__mark--helso img, .s-logos__mark--lemona img { height: 24px; }
}
.s-logos__viewport {
position: relative;
width: 100%;
max-width: 100%;
justify-self: stretch;
min-width: 0;
overflow: hidden;
}
.s-logos__viewport::before,
.s-logos__viewport::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 9%;
pointer-events: none;
}
.s-logos__viewport::before { left: 0; background: linear-gradient(90deg, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent)); }
.s-logos__viewport::after { right: 0; background: linear-gradient(270deg, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent)); }
.s-logos__track {
display: flex;
width: max-content;
animation: s-logos-scroll 38s linear infinite;
}
.s-logos__viewport:hover .s-logos__track { animation-play-state: paused; }
.s-logos__viewport.is-off .s-logos__track { animation-play-state: paused; }
.s-logos .s-logos__track .s-logos__marks {
display: flex;
flex: none;
flex-wrap: nowrap;
align-items: center;
gap: 64px;
width: auto;
max-width: none;
margin: 0;
padding: 0 64px 0 0;
}
.s-logos .s-logos__track .s-logos__mark,
.s-logos .s-logos__track .s-logos__mark + .s-logos__mark {
flex: none;
min-height: 48px;
padding: 0;
border-left: 0;
}
.s-logos .s-logos__track .s-logos__mark img { max-width: none; }
@keyframes s-logos-scroll { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
.s-logos .s-logos__track .s-logos__marks { gap: 44px; padding-right: 44px; }
.s-logos__track { animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce) {
.s-logos__viewport::before, .s-logos__viewport::after { display: none; }
.s-logos__track { width: auto; animation: none; justify-content: center; }
.s-logos .s-logos__track .s-logos__marks { flex-wrap: wrap; justify-content: center; gap: 16px 40px; padding: 0; }
.s-logos__marks--dup { display: none !important; }
}
.s-europe {
overflow: clip;
}
.s-europe:has(+ .s-statement) {
margin-bottom: -48px;
padding-bottom: calc(var(--section-y) + 48px);
}
.s-europe__grid {
display: grid;
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
align-items: center;
column-gap: 48px;
}
.s-europe__copy {
position: relative;
z-index: 1;
max-width: 540px;
}
.s-europe__title {
margin-top: 20px;
font-size: clamp(40px, 4.2vw, 60px);
}
.s-europe__line { display: block; }
.s-europe__lead {
max-width: 470px;
margin-top: 24px;
}
.s-europe__stats {
margin: 44px 0 0;
border-bottom: 1px solid var(--line);
}
.s-europe__stat {
display: grid;
grid-template-columns: 158px minmax(0, 1fr);
column-gap: 24px;
align-items: baseline;
padding: 18px 0 19px;
border-top: 1px solid var(--line);
}
.s-europe__stat-value {
color: var(--ink);
font-family: var(--font-display);
font-size: 21px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.03em;
white-space: nowrap;
}
.s-europe__stat-text {
margin: 0;
color: var(--ink-2);
font-size: 15px;
line-height: 1.5;
text-wrap: pretty;
}
.s-europe__figure {
position: relative;
margin: 0;
margin-right: calc(-1 * clamp(var(--gutter), (100vw - var(--container)) / 2, 120px));
}
.s-europe__map {
position: relative;
isolation: isolate;
}
.s-europe__map::before {
content: "";
position: absolute;
left: 18%;
top: 22%;
width: 62%;
height: 66%;
z-index: -1;
background: var(--glow);
opacity: 0.5;
pointer-events: none;
}
.s-europe__svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.s-europe__dots {
fill: none;
stroke-linecap: round;
}
.s-europe__dots--other { stroke: var(--line-2); stroke-width: 6.6; }
.s-europe__dots--base { stroke: var(--line-2); stroke-width: 8.8; opacity: 0; }
.s-europe__dots--ted { stroke-width: 8.8; }
.s-europe__pin-halo { fill: var(--green); fill-opacity: 0.16; }
.s-europe__pin-knock { fill: var(--white); }
.s-europe__pin-dot {
fill: var(--white);
stroke: var(--teal-2);
stroke-width: 3.2;
}
.s-europe__note {
position: absolute;
top: 15.5%;
left: -6%;
z-index: 2;
width: 292px;
}
.s-europe__note .chat { --avatar: 32px; --avatar-r: 7px; --msg-gap: 10px; }
.s-europe__note .chat-body { padding: 12px 14px 12px 12px; }
.s-europe__note .msg { padding: 0; }
.s-europe__note .msg-text { text-wrap: wrap; }
.s-europe__note .msg-text b { font-weight: 700; }
.s-europe__note .reactions { margin-top: 7px; }
.s-europe__legend {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 8px;
padding-left: 4%;
color: var(--ink-mute);
font-size: 13px;
line-height: 18px;
}
.s-europe__key {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.s-europe__key::before {
content: "";
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--line-2);
}
.s-europe__key--ted::before { background: var(--grad); }
.s-europe__figure.is-armed .s-europe__dots--base { opacity: 1; }
.s-europe__figure.is-armed .s-europe__dots--ted,
.s-europe__figure.is-armed .s-europe__pin { opacity: 0; }
.s-europe__figure.is-armed .s-europe__note { opacity: 0; translate: 0 var(--rise); }
.s-europe__figure.is-lit .s-europe__dots--ted {
opacity: 1;
transition: opacity var(--dur-4) var(--ease-out);
}
.s-europe__figure.is-lit .s-europe__dots--base {
opacity: 0;
transition: opacity 0s linear var(--dur-4);
}
.s-europe__figure.is-lit .s-europe__pin {
opacity: 1;
transition: opacity var(--dur-3) var(--ease-out) var(--d, 300ms);
}
.s-europe__figure.is-lit .s-europe__note {
opacity: 1;
translate: none;
transition:
opacity var(--dur-reveal) var(--ease-out) 760ms,
translate var(--dur-reveal) var(--ease-out) 760ms;
}
@media (max-width: 1279px) {
.s-europe__grid { column-gap: 40px; }
.s-europe__stat { grid-template-columns: 146px minmax(0, 1fr); column-gap: 20px; }
.s-europe__note { width: 268px; left: -4%; }
}
@media (max-width: 1199px) {
.s-europe__grid {
display: flex;
flex-direction: column;
align-items: center;
}
.s-europe__copy { display: contents; }
.s-europe__eyebrow, .s-europe__title, .s-europe__lead { text-align: center; }
.s-europe__title { max-width: 760px; font-size: var(--fs-h2); }
.s-europe__lead { max-width: 600px; text-wrap: balance; }
.s-europe__figure {
order: 2;
width: 100%;
max-width: 780px;
margin: 48px auto 0;
}
.s-europe__stats {
order: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 32px;
width: 100%;
max-width: 960px;
margin-top: 48px;
border-bottom: 0;
}
.s-europe__stat {
display: block;
padding: 20px 0 0;
}
.s-europe__stat-text { margin-top: 6px; }
.s-europe__note { top: 15%; left: 0; }
.s-europe__legend { justify-content: center; padding-left: 0; margin-top: 4px; }
}
@media (max-width: 767px) {
.s-europe__figure { margin-top: 36px; }
.s-europe__note {
position: relative;
top: auto;
right: auto;
width: min(100%, 320px);
margin: -36px auto 0;
}
.s-europe__legend { margin-top: 18px; }
.s-europe__stats {
grid-template-columns: minmax(0, 1fr);
margin-top: 36px;
border-bottom: 1px solid var(--line);
}
.s-europe__stat {
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
column-gap: 16px;
padding: 16px 0 17px;
}
.s-europe__stat-value { font-size: 19px; }
.s-europe__stat-text { margin-top: 0; font-size: 14.5px; }
}
@media (max-width: 459px) {
.s-europe__stat { display: block; }
.s-europe__stat-text { margin-top: 4px; }
}
@media (max-width: 767px) {
.s-europe:has(+ .s-statement) {
margin-bottom: -28px;
padding-bottom: calc(var(--section-y) + 28px);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.s-europe:has(+ .s-statement) {
margin-bottom: -40px;
padding-bottom: calc(var(--section-y) + 40px);
}
}
@media (prefers-reduced-motion: reduce) {
.s-europe__figure.is-armed .s-europe__dots--ted,
.s-europe__figure.is-armed .s-europe__pin,
.s-europe__figure.is-armed .s-europe__note { opacity: 1; translate: none; transition: none; }
.s-europe__figure.is-armed .s-europe__dots--base { opacity: 0; transition: none; }
}
@media print {
.s-europe__figure .s-europe__dots--ted,
.s-europe__figure .s-europe__pin,
.s-europe__figure .s-europe__note { opacity: 1 !important; translate: none !important; }
.s-europe__figure .s-europe__dots--base { opacity: 0 !important; }
}
.s-statement {
--band-r: 48px;
z-index: 1;
isolation: isolate;
overflow: clip;
padding-block: 136px 128px;
border-radius: var(--band-r);
background:
radial-gradient(60% 52% at 50% 0%, color-mix(in srgb, var(--deep-2) 90%, transparent) 0%, transparent 100%),
radial-gradient(70% 60% at 50% 115%, color-mix(in srgb, var(--deep-2) 80%, transparent) 0%, transparent 100%),
var(--deep);
background-repeat: no-repeat;
text-align: center;
}
.s-statement__bg {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.s-statement__bg::before {
content: "";
position: absolute;
left: 50%;
top: -6%;
width: min(980px, 120%);
height: 70%;
translate: -50% 0;
background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 22%, transparent) 0%, color-mix(in srgb, var(--green) 8%, transparent) 55%, transparent 100%);
background-repeat: no-repeat;
}
.s-statement__contours {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: var(--glow-c);
}
.s-statement__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.s-statement__mascot {
width: 100px;
margin-bottom: 44px;
}
.s-statement__mascot.otto-halo::before {
inset: -42% -62% -30%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--glow-c) 30%, transparent) 0%, color-mix(in srgb, var(--glow-c) 9%, transparent) 55%, transparent 100%);
background-repeat: no-repeat;
}
.s-statement__otto { width: 100%; }
.s-statement__title {
max-width: 1120px;
font-size: clamp(34px, 5.1vw, 72px);
line-height: 1.06;
color: var(--on-dark);
}
.s-statement__lead { display: block; }
.s-statement__rotator {
--caret: #4FC995;
display: grid;
justify-items: center;
align-items: start;
margin-top: 0.02em;
}
.s-statement__phrase {
grid-area: 1 / 1;
max-width: 100%;
padding: 0.02em 0.06em 0.12em;
margin-bottom: -0.1em;
}
.s-statement__phrase--ghost { visibility: hidden; }
.s-statement__rotator.is-live .s-statement__line {
contain: layout paint style;
will-change: transform;
}
.s-statement__rest { visibility: hidden; }
.s-statement__glue { white-space: nowrap; }
.s-statement__next { visibility: hidden; }
.s-statement__caret {
--caret-w: 3px;
display: inline-block;
width: var(--caret-w);
height: 0.72em;
margin: 0 calc(-1 * var(--caret-w) - 0.03em) 0 0.03em;
vertical-align: -0.04em;
border-radius: 1px;
background: var(--caret);
}
.s-statement__rotator[data-state="hold"]:not(.is-paused) .s-statement__caret {
animation: s-statement-caret 1.06s steps(1, end) infinite;
}
@keyframes s-statement-caret {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.s-statement__cta { margin-top: 52px; }
@media (max-width: 1023px) {
.s-statement { --band-r: 40px; padding-block: 112px 104px; }
.s-statement__mascot { width: 92px; margin-bottom: 36px; }
.s-statement__cta { margin-top: 44px; }
}
@media (max-width: 767px) {
.s-statement { --band-r: 28px; padding-block: 80px 72px; }
.s-statement__mascot { width: 76px; margin-bottom: 28px; }
.s-statement__title { line-height: 1.08; }
.s-statement__phrase { text-wrap: balance; }
.s-statement__caret { --caret-w: 2px; }
.s-statement__cta { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.s-statement__caret { display: none; }
.s-statement__rest, .s-statement__next { visibility: visible; }
}
@media print {
.s-statement__caret { display: none; }
.s-statement__rest, .s-statement__next { visibility: visible; }
}
.s-statement + .s-together {
margin-top: -48px;
padding-top: calc(var(--section-y) + 48px);
}
@media (max-width: 1023px) {
.s-statement + .s-together { margin-top: -40px; padding-top: calc(var(--section-y) + 40px); }
}
@media (max-width: 767px) {
.s-statement + .s-together { margin-top: -28px; padding-top: calc(var(--section-y) + 28px); }
}
.s-together__grid {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
grid-template-rows: 1fr auto auto 1fr;
grid-template-areas:
".     media"
"intro media"
"quote media"
".     media";
column-gap: clamp(48px, 5.6vw, 80px);
row-gap: 0;
}
.s-together__intro { grid-area: intro; padding-top: 4px; }
.s-together__title {
max-width: 600px;
font-size: clamp(36px, 4.2vw, 56px);
line-height: 1.05;
}
.s-together__text {
max-width: 500px;
margin-top: 28px;
}
.s-together__quote {
grid-area: quote;
align-self: start;
margin-top: 48px;
max-width: 520px;
padding: 28px 32px 28px;
border-radius: var(--r-xl);
background: var(--paper);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent);
}
.s-together__quote-text p {
font-size: 17px;
line-height: 1.55;
letter-spacing: -0.01em;
color: var(--ink);
text-indent: -0.42em;
}
.s-together__person {
display: flex;
align-items: center;
gap: 14px;
margin-top: 24px;
}
.s-together__avatar {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--mint);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent);
color: var(--teal-2);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
.s-together__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-together__name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); }
.s-together__role { font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.s-together__media {
--frame-x: 60px;
--comp-x: 22px;
--overlap: 34px;
grid-area: media;
display: flex;
flex-direction: column;
padding: 0 0 36px;
border-radius: 32px;
}
.s-together__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s-together__figure { position: relative; display: flex; flex-direction: column; }
.s-together__frame {
margin: 0 var(--frame-x);
background: var(--glass-deep);
padding-top: 0;
border-radius: 0 0 26px 26px;
}
.s-together__chat { border-radius: 0 0 17px 17px; }
.s-together__head { min-height: 50px; }
.s-together__body {
padding-top: 8px;
padding-bottom: calc(var(--overlap) + 10px);
}
.s-together__body .msg { padding-block: 9px; }
.msg-text > .s-together__list { padding-left: 24px; list-style: disc outside; }
.s-together__list li { padding-left: 2px; }
.s-together__list li::marker { font-size: 0.9em; }
.s-together__file { max-width: 360px; }
.s-together__draft { max-width: 430px; padding: 10px 14px 12px; }
.s-together__draft-label {
margin: 0 0 3px;
color: var(--c-ink-2);
font-size: 12px;
line-height: 1.4;
}
.s-together__draft > .msg-text { font-size: var(--chat-fs); }
.s-together__actions .slack-btn { cursor: default; pointer-events: none; }
.s-together__composer {
position: relative;
z-index: 1;
margin: calc(-1 * var(--overlap)) var(--comp-x) 0;
overflow: hidden;
border: 1px solid rgba(29, 28, 29, 0.20);
border-radius: 10px;
background: #FFFFFF;
color: #616061;
font-family: "Lato", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
text-align: left;
box-shadow:
0 1px 2px rgba(4, 48, 42, 0.08),
0 20px 44px -20px rgba(4, 48, 42, 0.55);
}
.s-together__ic { flex: none; width: 18px; height: 18px; color: inherit; }
.s-together__sep {
flex: none;
width: 1px;
height: 20px;
margin: 0 1px;
background: #DDDDDD;
}
.s-together__fmt {
display: flex;
align-items: center;
gap: 12px;
height: 36px;
padding: 0 12px;
background: #F8F8F8;
color: #9A9A9A;
}
.s-together__input {
display: flex;
align-items: center;
min-height: 40px;
margin: 0;
padding: 9px 12px 3px;
color: #868686;
font-size: 15px;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
}
.s-together__caret {
flex: none;
width: 1.5px;
height: 19px;
margin-right: 1px;
background: #1D1C1D;
}
.s-together__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 3px 10px 8px 8px;
}
.s-together__tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s-together__plus {
display: grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(29, 28, 29, 0.06);
color: #616061;
}
.s-together__plus > .s-together__ic { width: 15px; height: 15px; }
.s-together__aa {
flex: none;
color: #616061;
font-size: 15px;
line-height: 1;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.s-together__send {
display: flex;
align-items: center;
gap: 8px;
flex: none;
padding-right: 2px;
color: #ABABAB;
}
.s-together__send > .s-together__ic { width: 17px; height: 17px; }
.s-together__send > .s-together__chev { width: 12px; height: 12px; }
.s-together__send > .s-together__sep { height: 18px; }
.s-together__works {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 36px;
text-align: center;
}
.s-together__works::before {
content: "";
position: absolute;
inset: -36px -96px -40px;
z-index: -1;
background: radial-gradient(closest-side, color-mix(in srgb, var(--deep) 34%, transparent) 0%, color-mix(in srgb, var(--deep) 22%, transparent) 55%, transparent 100%);
background-repeat: no-repeat;
pointer-events: none;
}
.s-together__works-label {
font-size: 14.5px;
font-weight: 500;
letter-spacing: -0.006em;
color: var(--on-dark);
}
.s-together__tools-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.s-together__tool {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--white);
box-shadow:
0 1px 2px rgba(4, 48, 42, 0.18),
0 6px 14px -8px rgba(4, 48, 42, 0.5);
}
.s-together__tool > svg { width: 21px; height: 21px; }
.s-together__tool--more {
background: color-mix(in srgb, var(--white) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 32%, transparent);
color: var(--white);
}
.s-together__tool--more > svg { width: 18px; height: 18px; }
.s-together [data-step].is-pending {
opacity: 0;
translate: 0 12px;
}
.s-together [data-step].is-pending.is-in {
opacity: 1;
translate: none;
transition:
opacity var(--dur-reveal) var(--ease-out),
translate var(--dur-reveal) var(--ease-out);
}
@media (max-width: 1279px) {
.s-together__media { --frame-x: 40px; --comp-x: 14px; }
}
@media (max-width: 1119px) {
.s-together__grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-template-areas:
"intro"
"media"
"quote";
row-gap: 56px;
}
.s-together__intro { max-width: 720px; }
.s-together__title { max-width: 720px; font-size: clamp(36px, 6vw, 56px); }
.s-together__text { max-width: 620px; }
.s-together__media { --frame-x: 40px; --comp-x: 0px; padding: 0 40px 40px; }
.s-together__figure { width: 100%; max-width: 700px; margin-inline: auto; }
.s-together__quote { align-self: start; max-width: 620px; margin-top: 0; }
}
@media (max-width: 767px) {
.s-together__grid { row-gap: 36px; }
.s-together__text { margin-top: 20px; }
.s-together__media { --frame-x: 12px; --comp-x: 0px; --overlap: 30px; padding: 0 12px 28px; border-radius: 24px; }
.s-together__frame { padding: 0 6px 6px; border-radius: 0 0 20px 20px; }
.s-together__chat { border-radius: 0 0 15px 15px; }
.s-together__head { min-height: 46px; }
.msg-text > .s-together__list { padding-left: 20px; }
.s-together__file { max-width: none; }
.s-together__draft { max-width: none; }
.s-together__fmt { gap: 10px; height: 36px; padding: 0 10px; }
.s-together__tools { gap: 10px; }
.s-together__works { margin-top: 28px; gap: 12px; }
.s-together__tool { width: 38px; height: 38px; }
.s-together__tool > svg { width: 19px; height: 19px; }
.s-together__quote { padding: 22px 22px 22px; border-radius: 24px; }
.s-together__quote-text p { font-size: 16px; }
}
@media (max-width: 599px) {
.s-together__wide { display: none; }
.s-together__input { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
.s-together [data-step].is-pending { opacity: 1; translate: none; transition: none; }
}
@media print {
.s-together [data-step].is-pending { opacity: 1; translate: none; }
}
.s-together__avatar--photo { overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 2px var(--white); }
.s-together__avatar--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-hire {
--hire-media-h: 356px;
overflow: clip;
}
.s-hire__head { margin-bottom: 64px; }
.s-hire__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.s-hire .hire-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border-radius: var(--r-xl);
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.03);
isolation: isolate;
}
.s-hire .hire-card__text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 32px 36px;
text-align: center;
}
.s-hire .hire-card__title {
font-size: clamp(24px, 2vw, 27px);
line-height: 1.12;
letter-spacing: -0.032em;
font-family: var(--font-display);
font-weight: 500;
color: var(--ink);
}
.s-hire .hire-card__lead {
margin-top: 18px;
font-size: 17px;
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.012em;
color: var(--ink);
}
.s-hire .hire-card__body {
max-width: 340px;
margin-top: 6px;
font-size: 16px;
line-height: 1.55;
letter-spacing: -0.006em;
color: var(--ink-2);
}
.s-hire .hire-card__media {
position: relative;
display: grid;
place-items: center;
flex: none;
height: var(--hire-media-h);
padding: 24px;
border-radius: var(--r-xl);
}
.s-hire .hire-shot {
position: relative;
z-index: 1;
width: min(100%, 344px);
background: var(--glass-deep);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.6),
0 2px 6px rgba(4, 48, 42, 0.10),
0 24px 48px -20px rgba(4, 30, 26, 0.55);
}
.s-hire .hire-shot--files { width: min(100%, 322px); }
.s-hire .hire-shot .chat { --avatar: 32px; --avatar-r: 7px; --msg-gap: 9px; }
.s-hire .hire-shot .chat-body { padding: 12px 14px 13px 12px; }
.s-hire .hire-shot .msg { padding: 0; }
.s-hire .hire-shot .msg-text { text-wrap: wrap; }
.s-hire .hire-shot .file-list { gap: 5px; }
.s-hire .hire-picks {
display: grid;
gap: 5px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.s-hire .hire-pick {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 34px;
padding: 5px 6px 5px 8px;
border: 1px solid var(--c-line);
border-radius: 8px;
background: #FFFFFF;
font-size: 12.5px;
line-height: 1.3;
}
.s-hire .hire-pick__cc {
display: inline-grid;
place-items: center;
flex: none;
width: 20px;
height: 18px;
border-radius: 4px;
background: #EFEFEF;
color: var(--c-ink-2);
font-size: 9px;
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1;
}
.s-hire .hire-pick__title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: var(--c-ink);
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.s-hire .hire-pick__tag {
display: inline-flex;
align-items: center;
flex: none;
height: 20px;
padding: 0 8px;
border-radius: 999px;
background: #E3F4EA;
color: #17694A;
font-size: 11.5px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
.s-hire .hire-pick__tag--warn { background: #FCF0D7; color: #865600; }
.s-hire .hire-pick__tag--info { background: #E8F3FA; color: #1264A3; }
.s-hire .hire-card__media--hub { padding: 12px 8px; }
.s-hire .hire-hub {
width: 100%;
max-width: 380px;
height: auto;
max-height: 100%;
overflow: visible;
}
.s-hire .hire-hub__ring {
fill: none;
stroke: rgba(14, 99, 98, 0.10);
stroke-width: 1;
}
.s-hire .hire-hub__ring--far { stroke: rgba(14, 99, 98, 0.06); stroke-dasharray: 2 6; }
.s-hire .hire-hub__wires path {
fill: none;
stroke: var(--teal-2);
stroke-opacity: 0.42;
stroke-width: 1.4;
stroke-dasharray: 0.5 5.5;
stroke-linecap: round;
}
.s-hire .hire-hub__dots circle { fill: var(--white); stroke: var(--teal-2); stroke-opacity: 0.5; stroke-width: 1.2; }
.s-hire .hire-hub__frame {
fill: rgba(255, 255, 255, 0.55);
stroke: rgba(255, 255, 255, 0.9);
stroke-width: 1;
}
.s-hire .hire-hub__node rect { fill: var(--white); stroke: rgba(14, 38, 34, 0.06); stroke-width: 1; }
.s-hire .hire-hub__eu { fill: #003399; }
.s-hire .hire-hub__eu-stars { color: #FFCC00; }
.s-hire .hire-hub__portal { fill: var(--mint); }
.s-hire .hire-hub__portal-ico { color: var(--teal-2); }
.s-hire .hire-hub__ted {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
fill: var(--ink);
}
.s-hire .hire-hub__ted--portals { text-anchor: start; }
.s-hire__cta {
display: flex;
justify-content: center;
margin-top: 56px;
}
@media (max-width: 1179px) {
.s-hire__grid {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
max-width: 880px;
margin-inline: auto;
}
.s-hire .hire-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
align-items: stretch;
}
.s-hire .hire-card__text {
justify-content: center;
align-items: flex-start;
padding: 40px 36px;
text-align: left;
}
.s-hire .hire-card__body { max-width: 360px; }
.s-hire .hire-card__media { height: auto; min-height: var(--hire-media-h); }
}
@media (max-width: 767px) {
.s-hire { --hire-media-h: 344px; }
.s-hire__head { margin-bottom: 40px; }
.s-hire__grid { max-width: 520px; }
.s-hire .hire-card { display: flex; border-radius: 24px; }
.s-hire .hire-card__text {
align-items: center;
padding: 32px 24px 28px;
text-align: center;
}
.s-hire .hire-card__lead { margin-top: 14px; }
.s-hire .hire-card__media { height: var(--hire-media-h); min-height: 0; padding: 20px 16px; border-radius: 24px; }
.s-hire .hire-card__media--hub { padding: 12px 10px; }
.s-hire__cta { margin-top: 40px; }
}
.s-compare .section-head { margin-bottom: 56px; }
.s-compare .section-head > .lead { max-width: 720px; }
.s-compare .cmp-tabbar { position: relative; margin-bottom: 40px; }
.s-compare .cmp-tabs {
display: flex;
gap: 4px;
padding: 5px;
border-radius: var(--r-pill);
background: var(--paper);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.045);
}
.s-compare .cmp-tab {
display: inline-flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: 10px;
min-width: max-content;
height: 48px;
padding: 0 22px;
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.012em;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.s-compare .cmp-tab .icon { width: 18px; height: 18px; color: var(--ink-3); transition: color var(--dur-2) var(--ease-out); }
.s-compare .cmp-tab:hover { color: var(--ink); background: rgba(14, 38, 34, 0.04); }
.s-compare .cmp-tab:hover .icon { color: var(--ink-2); }
.s-compare .cmp-tab[aria-selected="true"] {
background: var(--btn);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 2px rgba(11, 36, 32, 0.16),
0 6px 14px -8px rgba(11, 36, 32, 0.45);
}
.s-compare .cmp-tab[aria-selected="true"] .icon { color: #9FE3C0; }
.s-compare .cmp-tab:focus-visible { outline-offset: 2px; }
.s-compare .cmp-panels { display: grid; gap: 48px; }
.s-compare .cmp-panel { display: flex; flex-direction: column; min-width: 0; }
.s-compare .cmp-panel:focus-visible { outline-offset: 6px; border-radius: var(--r-xl); }
.s-compare .cmp-panel__title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink-2);
}
.s-compare .cmp-panel__title .icon { width: 17px; height: 17px; color: var(--teal-2); }
.s-compare.is-tabs .cmp-panels { gap: 0; }
.s-compare.is-tabs .cmp-panel {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.s-compare.is-tabs .cmp-panel.is-active {
opacity: 1;
visibility: visible;
transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear 0s;
}
.s-compare.cmp-static .cmp-panel,
.s-compare.cmp-static .cmp-tab,
.s-compare.cmp-static .cmp-tab .icon { transition: none !important; }
.s-compare.is-tabs .cmp-panel__title {
position: absolute;
width: 1px; height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.s-compare .cmp-row {
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
align-items: stretch;
}
.s-compare .cmp-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
min-width: 0;
min-height: 212px;
padding: 28px 30px 30px;
border-radius: 24px;
}
.s-compare .cmp-card--ai {
background: var(--paper);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.05);
}
.s-compare .cmp-name {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.03em;
color: var(--ink-2);
}
.s-compare .cmp-name__mark {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink-3);
}
.s-compare .cmp-name__mark .icon { width: 17px; height: 17px; }
.s-compare .cmp-text {
font-size: 18px;
line-height: 1.5;
letter-spacing: -0.012em;
color: var(--ink-2);
}
.s-compare .cmp-arrow {
position: relative;
display: grid;
place-items: center;
align-self: center;
height: 40px;
color: var(--ink-3);
}
.s-compare .cmp-arrow::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px dashed var(--line-2);
}
.s-compare .cmp-arrow > .icon {
position: relative;
box-sizing: content-box;
width: 16px;
height: 16px;
padding: 11px;
border-radius: 50%;
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(14, 38, 34, 0.05), 0 6px 14px -8px rgba(14, 38, 34, 0.18);
}
.s-compare .cmp-card--otto {
display: block;
padding: 0;
container: cmp-otto / inline-size;
}
.s-compare .cmp-otto {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto 1fr;
grid-template-areas:
"name result"
"text text";
column-gap: 24px;
row-gap: 24px;
height: 100%;
padding: 28px 28px 30px 30px;
}
.s-compare .cmp-name--otto {
grid-area: name;
align-self: start;
gap: 9px;
font-size: 24px;
letter-spacing: -0.035em;
color: #fff;
}
.s-compare .cmp-glyph {
flex: none;
width: 30px;
height: 30px;
filter: drop-shadow(0 2px 4px rgba(4, 30, 26, 0.35));
}
.s-compare .cmp-otto > .cmp-text {
grid-area: text;
align-self: end;
color: rgba(255, 255, 255, 0.94);
}
.s-compare .cmp-hl {
padding: 1px 8px 2px;
margin-right: 2px;
border-radius: 7px;
background: var(--mint);
color: var(--teal);
font-weight: 500;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.s-compare .cmp-result {
grid-area: result;
align-self: start;
width: 272px;
padding: 5px;
border-radius: 17px;
background: rgba(255, 255, 255, 0.16);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.30),
0 18px 36px -18px rgba(4, 30, 26, 0.6);
}
.s-compare .cmp-result .file {
max-width: none;
padding: 10px 14px 10px 10px;
box-shadow: 0 1px 2px rgba(14, 38, 34, 0.08);
}
.s-compare .cmp-result .file-meta { font-variant-numeric: tabular-nums; }
.s-compare .cmp-cal__day {
display: flex;
flex-direction: column;
flex: none;
width: 34px;
height: 38px;
overflow: hidden;
border-radius: 7px;
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line);
text-align: center;
}
.s-compare .cmp-cal__day > span {
display: block;
height: 13px;
background: var(--teal-2);
color: #fff;
font-size: 8px;
font-weight: 600;
line-height: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.s-compare .cmp-cal__day > b {
display: grid;
place-items: center;
flex: 1;
color: var(--ink);
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
}
@container cmp-otto (max-width: 560px) {
.s-compare .cmp-otto {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas: "name" "text" "result";
row-gap: 22px;
}
.s-compare .cmp-otto > .cmp-text { align-self: start; }
.s-compare .cmp-result { align-self: start; width: min(100%, 320px); }
}
@media (max-width: 1023px) {
.s-compare .cmp-tab { gap: 8px; padding: 0 14px; font-size: 15px; }
.s-compare .cmp-tabbar {
display: flex;
margin-inline: calc(var(--gutter) * -1);
padding: 2px 0 2px var(--gutter);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.s-compare .cmp-tabbar::-webkit-scrollbar { display: none; }
.s-compare .cmp-tabbar::after { content: ""; flex: 0 0 var(--gutter); }
.s-compare .cmp-tabs { flex: 1 0 auto; }
.s-compare .cmp-tab { flex: 1 0 auto; }
.s-compare .cmp-row { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
.s-compare .cmp-card--ai { padding: 24px 24px 26px; }
.s-compare .cmp-otto { padding: 24px 24px 26px; }
.s-compare .cmp-text { font-size: 17px; }
}
@media (max-width: 899px) {
.s-compare .cmp-row { grid-template-columns: minmax(0, 1fr); }
.s-compare .cmp-card { min-height: 0; }
.s-compare .cmp-card--ai { gap: 20px; }
.s-compare .cmp-arrow { height: 52px; }
.s-compare .cmp-arrow::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px dashed var(--line-2); }
.s-compare .cmp-arrow > .icon { transform: rotate(90deg); padding: 9px; width: 15px; height: 15px; }
}
@media (max-width: 767px) {
.s-compare .section-head { margin-bottom: 36px; }
.s-compare .cmp-tabbar {
display: flex;
margin: 0 calc(var(--gutter) * -1) 28px;
padding: 2px 0 2px var(--gutter);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.s-compare .cmp-tabbar::-webkit-scrollbar { display: none; }
.s-compare .cmp-tabbar::after { content: ""; flex: 0 0 var(--gutter); }
.s-compare .cmp-tabs { flex: 1 0 auto; }
.s-compare .cmp-tab { flex: 1 0 auto; height: 42px; padding: 0 16px; font-size: 14.5px; }
.s-compare .cmp-tab .icon { width: 16px; height: 16px; }
.s-compare .cmp-panels { gap: 40px; }
.s-compare .cmp-card { border-radius: 22px; }
.s-compare .cmp-card--ai { padding: 22px 22px 24px; }
.s-compare .cmp-otto { padding: 22px 22px 24px; row-gap: 20px; }
.s-compare .cmp-name { font-size: 20px; }
.s-compare .cmp-name--otto { font-size: 22px; }
.s-compare .cmp-name__mark { width: 30px; height: 30px; }
.s-compare .cmp-text { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
.s-compare .cmp-tab, .s-compare .cmp-tab .icon { transition: none; }
.s-compare.is-tabs .cmp-panel, .s-compare.is-tabs .cmp-panel.is-active { transition: none; }
}
.s-how {
--how-r: var(--r-xl);
--how-media-h: 336px;
--how-shadow-ui:
0 1px 2px color-mix(in srgb, var(--deep) 14%, transparent),
0 18px 36px -18px color-mix(in srgb, var(--deep) 62%, transparent);
}
.s-how .how-head { margin-bottom: 64px; }
.s-how .how-head .grad-text { display: inline-block; text-wrap: balance; }
.s-how .how-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.s-how .how-step {
display: flex;
flex-direction: column;
min-width: 0;
padding: 0;
overflow: hidden;
isolation: isolate;
}
.s-how .how-media {
position: relative;
display: grid;
place-items: center;
flex: none;
height: var(--how-media-h);
border-radius: var(--how-r) var(--how-r) 0 0;
}
.s-how .how-body { padding: 28px 32px 34px; }
.s-how .how-title {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 500;
line-height: 1.16;
letter-spacing: -0.03em;
color: var(--ink);
text-wrap: balance;
}
.s-how .how-num {
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin-top: calc((1.16em - 26px) / 2);
border-radius: 8px;
background: var(--grad);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent), 0 1px 2px color-mix(in srgb, var(--teal) 30%, transparent);
color: var(--white);
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
}
.s-how .how-text {
margin-top: 12px;
color: var(--ink-2);
font-size: var(--fs-body);
line-height: 1.55;
}
.s-how .how-cta {
display: flex;
justify-content: center;
margin-top: 56px;
}
.s-how .how-src {
width: min(318px, 100% - 48px);
overflow: hidden;
border-radius: 18px;
background: var(--white);
color: var(--ink);
box-shadow:
0 0 0 7px color-mix(in srgb, var(--white) 18%, transparent),
var(--how-shadow-ui);
}
.s-how .how-src__row {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
min-height: 56px;
padding: 10px 14px 10px 12px;
}
.s-how .how-src__row + .how-src__row { border-top: 1px solid var(--line-soft); }
.s-how .how-src__tile {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--mint);
color: var(--teal-2);
}
.s-how .how-src__tile .icon { width: 17px; height: 17px; }
.s-how .how-src .file-badge {
justify-self: center;
width: 27px;
height: 33px;
padding-bottom: 5px;
border-radius: 5px;
font-size: 7.5px;
}
.s-how .how-src__stack {
position: relative;
display: grid;
place-items: center;
width: 32px;
height: 36px;
}
.s-how .how-src__stack::before {
content: "";
position: absolute;
top: 0;
left: 9px;
width: 25px;
height: 31px;
border-radius: 5px;
background: color-mix(in oklab, var(--pdf-bg) 70%, var(--pdf-fg) 12%);
transform: rotate(9deg);
transform-origin: 50% 100%;
}
.s-how .how-src__stack > .file-badge { position: relative; margin: 3px 4px 0 0; }
.s-how .how-src__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-how .how-src__name {
overflow: hidden;
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.s-how .how-src__meta { font-size: 12px; line-height: 1.3; color: var(--ink-mute); }
.s-how .how-ok { width: 18px; height: 18px; color: var(--green); }
.s-how .how-src__foot {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px 10px 12px;
border-top: 1px solid color-mix(in oklab, var(--mint-2) 70%, var(--white));
background: color-mix(in oklab, var(--mint) 72%, var(--white));
color: var(--teal-2);
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
}
.s-how .how-src__foot > .msg-avatar { --avatar: 22px; --avatar-r: 6px; margin-left: 5px; margin-right: 5px; }
.s-how .how-connect {
display: grid;
gap: 10px;
width: min(336px, 100% - 44px);
}
.s-how .how-conn {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) 20px;
align-items: center;
column-gap: 13px;
min-height: 62px;
padding: 11px 16px 11px 15px;
border-radius: 18px;
background: var(--white);
color: var(--ink);
box-shadow: var(--how-shadow-ui);
}
.s-how .how-conn__logo { width: 26px; height: 26px; }
.s-how .how-conn__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-how .how-conn__name {
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
}
.s-how .how-conn__meta {
overflow: hidden;
font-size: 12px;
line-height: 1.3;
color: var(--ink-mute);
text-overflow: ellipsis;
white-space: nowrap;
}
.s-how .how-conn__ok { width: 20px; height: 20px; color: var(--green); }
.s-how .how-chat {
width: min(352px, 100% - 44px);
background: var(--glass-deep);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.6),
0 2px 6px rgba(4, 48, 42, 0.10),
0 24px 48px -20px rgba(4, 30, 26, 0.55);
}
.s-how .how-chat .chat { --avatar: 32px; --avatar-r: 7px; --msg-gap: 9px; }
.s-how .how-chat .chat-body { padding: 12px 14px 13px 12px; }
.s-how .how-chat .msg { padding: 0; }
.s-how .how-chat .msg-text { text-wrap: wrap; }
.s-how .how-chat .msg + .msg { margin-top: 12px; }
.s-how .how-chat .file-list { gap: 5px; }
@media (max-width: 1139px) {
.s-how .how-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 920px; margin-inline: auto; }
}
@media (min-width: 760px) and (max-width: 1139px) {
.s-how .how-step {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
}
.s-how .how-media { height: auto; min-height: var(--how-media-h); align-self: stretch; border-radius: var(--how-r) 0 0 var(--how-r); }
.s-how .how-body { padding: 32px 36px; }
}
@media (max-width: 767px) {
.s-how { --how-r: 24px; }
.s-how .how-head { margin-bottom: 40px; }
.s-how .how-cta { margin-top: 40px; }
}
@media (max-width: 759px) {
.s-how { --how-media-h: 328px; }
.s-how .how-media--chat { height: auto; min-height: var(--how-media-h); padding: 26px 0; }
.s-how .how-body { padding: 24px 24px 28px; }
.s-how .how-title { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; }
.s-how .how-num { width: 24px; height: 24px; margin-top: calc((1.16em - 24px) / 2); border-radius: 7px; font-size: 13px; }
}
@media (max-width: 419px) {
.s-how .how-src { width: calc(100% - 36px); }
.s-how .how-connect { width: calc(100% - 32px); }
.s-how .how-conn { column-gap: 11px; padding-inline: 13px 14px; }
.s-how .how-chat { width: calc(100% - 32px); }
}
.s-control .ctl-grid {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
gap: 80px;
align-items: center;
}
.s-control .ctl-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.s-control .ctl-h2 {
margin-top: 20px;
font-size: clamp(36px, 4.2vw, 56px);
}
.s-control .ctl-lead {
max-width: 500px;
margin-top: 24px;
color: var(--ink-2);
font-size: var(--fs-lead);
line-height: 1.55;
letter-spacing: -0.008em;
}
.s-control .ctl-list {
display: grid;
gap: 14px;
margin: 32px 0 0;
padding: 0;
list-style: none;
}
.s-control .ctl-list > li {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--ink);
font-size: var(--fs-body);
line-height: 1.5;
}
.s-control .ctl-list .icon {
width: 22px;
height: 22px;
margin-top: 0;
color: var(--green);
}
.s-control .ctl-action { margin-top: 40px; }
.s-control .ctl-panel {
--sc-wall-1: color-mix(in oklab, var(--deep-2) 72%, var(--deep));
--sc-wall-2: color-mix(in oklab, var(--deep) 88%, black);
--sc-sky-1: color-mix(in oklab, var(--teal-2) 70%, var(--deep));
--sc-sky-2: color-mix(in oklab, var(--green) 85%, var(--teal-2));
--sc-sky-3: var(--glow-c);
--sc-sky-4: var(--eye);
--sc-frame: color-mix(in oklab, var(--deep) 78%, black);
--sc-sill: color-mix(in oklab, var(--teal-2), var(--eye) 30%);
--sc-shade: color-mix(in oklab, var(--deep) 55%, black);
--sc-lamp-1: color-mix(in oklab, var(--green), var(--eye) 12%);
--sc-lamp-2: var(--teal-2);
--sc-lamp-3: var(--deep-2);
--sc-cord: color-mix(in oklab, var(--deep-2), var(--white) 14%);
--sc-screen-1: color-mix(in oklab, var(--glow-c) 78%, var(--white));
--sc-screen-2: color-mix(in oklab, var(--green) 62%, var(--glow-c));
--sc-bezel: color-mix(in oklab, var(--btn) 82%, black);
--sc-alu-1: color-mix(in oklab, var(--paper-2), var(--eye) 22%);
--sc-alu-2: color-mix(in oklab, var(--paper-2) 58%, var(--deep-2));
--sc-alu-3: color-mix(in oklab, var(--paper-2) 34%, var(--deep));
--sc-mug-1: color-mix(in oklab, var(--paper), var(--eye) 26%);
--sc-mug-2: color-mix(in oklab, var(--paper-2) 72%, var(--deep-2));
--sc-mug-3: color-mix(in oklab, var(--paper-2) 38%, var(--deep));
--sc-leaf-0: color-mix(in oklab, var(--deep) 80%, black);
--sc-leaf-1: color-mix(in oklab, var(--teal-2) 78%, var(--deep));
--sc-leaf-2: color-mix(in oklab, var(--green) 88%, var(--teal-2));
--sc-leaf-3: color-mix(in oklab, var(--green), var(--eye) 32%);
--sc-pot-1: color-mix(in oklab, var(--paper-2) 82%, var(--eye));
--sc-pot-2: color-mix(in oklab, var(--paper-2) 56%, var(--deep-2));
--sc-pot-3: color-mix(in oklab, var(--paper-2) 30%, var(--deep));
--sc-desk-1: color-mix(in oklab, var(--teal-2), var(--eye) 26%);
--sc-desk-2: color-mix(in oklab, var(--deep-2), var(--eye) 8%);
--sc-desk-front-1: color-mix(in oklab, var(--deep-2) 66%, var(--deep));
--sc-desk-front-2: color-mix(in oklab, var(--deep) 82%, black);
--pad-x: 56px;
--desk-depth: 46px;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
padding: 104px var(--pad-x) 0;
border-radius: var(--r-xl);
color: var(--on-dark);
background:
radial-gradient(48% 34% at 22% 4%, color-mix(in srgb, var(--eye) 20%, transparent) 0%, transparent 72%),
radial-gradient(24% 22% at 92% 13%, color-mix(in srgb, var(--eye) 26%, transparent) 0%, transparent 76%),
radial-gradient(56% 38% at 50% 60%, color-mix(in srgb, var(--glow-c) 16%, transparent) 0%, transparent 72%),
linear-gradient(180deg, var(--sc-wall-1) 0%, var(--sc-wall-2) 100%);
background-repeat: no-repeat;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 30%, transparent);
}
.s-control .ctl-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background-image: var(--noise);
opacity: var(--grain-a);
pointer-events: none;
}
.s-control .ctl-scene {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.s-control .ctl-scene::before {
content: "";
position: absolute;
top: -6.385%;
left: 10.982%;
width: 86.035%;
height: 90.77%;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADjCAYAAADaD7vlAAAMwElEQVR42u2d0Y4jRwhFwfL/f0v+LC95HvKQrDSyuqugum0XcJBGG2Uzm7G3ry9cLqD//P2XEATxXzx4CwgCQBAEgCCIWTw3/tn0S/9f47EAEFUf7k/9rIAIQJQCwZ2vFXAAiDAQKoDFJq8NYACIwwe9AkDM8TMbwAAQowdEAw+9FmAKHQADUDQDxOjh10WQZKwR7AQYgKIRIM4e8rNfszOCBoABKJoBwgOGasCwlwf89UG3we8BioY1xCsYvODIBojRgw9TNASETkBx9HUGjF3rCpsA4s+v0fSJaFRUq/MrW/r0mha9AuL1awQKANJUdn39egSYYvd06RUMP47vBRQNG3N6kjo9nEyxe9p0xA4//7++V2BQOyC7TuuJR8LUyU5Y4hUcf4DxM+hfwBINzX3qLLKzKE9H9YMegODPr6PXAgCa27/VCYwdU6cjW4a+MMPj1z///GLBH6edA5ZoOiDkAcZuaZNOGm6/awj9NYH4MwE6AAAQrl7FzorTqAn3ygpHrwmWaAIIO/kE9LpbK3Swz8DwG0SwBAwxbVTpoBDfCRhH/iVx9F2OwG6wRA9A2El6cQQOdTDJTizh/Xl1whLGuGldQIwejqPCc2Rn8KpLusGUnA2A4mEJaokGe5ks8O/OwGGbjZnqSe6vi/4tmShrRMFFZUfd29lXhrUus4lAXTA2inOqkEgECJt4frygMAcYbPPR0kjzEZZotspyBQweYHwLFLaQZkU68rBE4T7Emc15xAgji4QmYwpbBAXFdNEaIjpYE5k+kwSrL1d9W7BE8ZRplg550ydLvJkjWk8QBWVXG4BjBoLR7EEGEKx8wRJNrBtHnWsvKGQyYJOFJczZwaaWKJgymVxTnbzK0g51ht0oxcISDRjCThQjWWSJyCepfkluPVLGjhS3EUuwsqYYIFYlWJsY4NRhKd8x5XhlCBswxGgrByApcGNutuQr2sHeOb828e+qksBmQ6Lg0UVbAEC0g7277CoO2TW6OZ1IAgiv/SKqOmUDhacvkXGUFkC8qVEnTpYYAWQHYNhFJ6zAEj1VptH27DNQaOILoDrwaM3mrimmGxxuj9o5JNCrqGrpgCWKq0yjQlsCKpMlA8HZZpFokU0UqiFkUAeMLOEez5MkONe7stITliicMslEVl2ZpstoF1+xdACAIoBYlWCjvYhMipM3dYIlpMcqS+/stQ4e9GxO0bP1NWd2DuPwe+1O9dVGnRQorlf6FELDrnYNEW3USWJ/U9TSsfLwA44CKtMVr5Mks3LYDZ4nbB3FGWIkr4pjvNTjdcqcKgks0adTLY5+hAT3No3+HPlySrgKDGEZgbRRmUZeJ5ssStaAzylbbWETULAkuXBR7WnUSaDAzqo2zXoPsESTTrVnO/gofaoiwUrAGs4ygsIp06y7ewYKdayq0QSKkzoajrNjKzTtiqpMK34nr3JVyQ0LSzRhiNGn51GRrc5VNbbZresrlg5YopHKNDtweOZt8q6qyVxwn4FCUJxq1xA6uPZ5VE+cfbLuXkd4m2sWbNQBgCKyqzgHh1abdlJg1NTbuaaWSA6IyBkt79BQFlDYTZ1rAFCYIbw+JgnucrIitnBhGUGfTrW3UbdqBd9pos5uXnAGAArKrp5GnZ4sRR4dUs9YfI7UMztZkCwsSa6TMkVYYjZrXcXKIeJbcwlLFK8hJDg5l3VVTXS2wTtmSi1RFBAzA1/GjRzRTvaIFWQgwwKAAoCYLTITJyvMgJH51K8ndYIlChbVng62OU5QjfxNu3ucvINEcjJARDFdABDmVInU4W3ynOKyxJYOm5j+UJwKMoTHHq4F5iSuWjoMlqjdqb7DzlHp6tBIRbpyootIqjJFZdbMq2osaOkY9SSIIoCwgP1h5Z5E1o3hKzPYCkvUYgjv8rLRMjPvOk3ZZK2nd9TU05MgihXVkUbdqKhU55RetvrCHCOms6PwRBLrhjjSHZukRlX8TbqQOhHFGWLm7DRnYZpdgh31G2CJwjVExM7hYYFshbUFLB2oTU1rCM9CAglaOao07GxhHgSWSKoyeabhZrtez35v1tzbXXGKrtCHPYqpTLNP/6tWDkvCBh7VaeRtIhLPQ0S72bPb19Um6kTmk3TYOQpZNzyNOm9nugooIls6SJmaMoQ4xkwzgsIWGAPTX4MRUu8pruhDb8mbdupkDABQ1LohzsLRnDJlRPvfcZJOTqbndLAcmgGiYp1qveBfMoe/KUNKpRMQm/NGHVGAITwsoQ2sHLNxU5mwISyRuKj2btXwzElU3BYugTqCWqKoyuSZpBPxbQ6vpDiN5FkUp6IpkyedMufe1N1Oca2AQZ3+L6KYdUMDe5lGu4vEkWNnM/h5Cmys4U0ZQiYbwr0PTJWZCViiaA3hadSNVlxWtHJ4ZiYk4JJVAFGDESKWDisKCo8REJWpGCCusIR3O2BmxWmkKM2sHm0B8yyqLElgFkAdTb6MYDDqit6dapuoSeaQJrOrTR7FTRx2jraK07Nw/0ECC4A16G/Kur9pxn5GDVE7ZgpTheMqV+YmRnaOlrXEsxgjmLMhZ053aMW+xOxwDOa+ZjGbt7ZCg0MrDCHS2Aj4LFg3mKMQnHWrqytOHv9TSwvHU3qGTTxPUmQpsucT3oLSrQGIOhKsx9hXUW26AhRk1+KNOm+KURkUerHBZxTVtewcFkiLshbW5hwAYmiomcrk3Qlb6fD7lb2urbeHd0qZLJg/7374/Y7mnGc7eKsBomeTuiFaS2iRw++r03Vtm3SPxk25iCXcmipN7ewczyapUvSTvrKVQxfGZw2G6MUUs0m7iqY/XWSR0izxbFRQa8D27N141yVlasMSXRnCyxLeee0s9verJ7bKs0Q32VUDe5iu1CBVi26DIWo36qJ1hBVWl1R8h+BLW8MfzcHgSaE6SLC6CCAYotC+plmuXWEx8up+2BlTlGUJUiZfCmVN2EKlOUs8G4FAAzucovMTGR4Qe8M8tlSzhnedmJPgA+3t7FqxDnbE70UNUaCg9lrDpdkO2Cv2cAUQ9Zt0Ir0WI48K7FmjDoZoxhKV0iSTa2tsyrEEDHHd8JddhpWL2/4U2bUeY9hCHTH7nkyL2jwdbJEGy8ueTUGgi4qTBW5cW7HZidla/RJjpqRM11ii0/BMi1vXD3oPIdt0tzNcs4e+nJ0DhoiZ/jpLsFcWJQOIAqY/7y0JKW7687BAGQkWhriXJaI9jJ0VJ5XYud8SEuwTEAxNfxZQVjptrYjufE2jOMEQ6zteq1vB7cJh+LQsASB8xbIFlipXVpk8aVTqWgJA3MMSVabprkixJVgCQPhdrbMpukr+JrsABsnMEgDCJ6V6H/SsitOVn1FvAougMu2vPtnkQKOc/HddFCd1vC+kTMVZonvX2rO9L21xDSDitcRqqlXZ+1WmuAYQ72MJaag2eVfUKICoyRKedZfZZViTexyxSlFdc4DIszx5dedTtr1No9Nctvi9ACKp4qQLG8Y7TNaNpua2V55Ima7XEsxIrNcTCiDq1hLSxN9klfe/Aoj3sIRIzzU1coNBEEAUYwnP4BDsIKhMHU//dj/DNRqmMlKmGvbvaDFtzd9DlUQuWADxvjQKUCR0wQKI9bzZHADpCopRd3prCRZAvCeNkoK36TzvRfRhpw9RlCUia/arAMNuZo4tAILKdK/fyQaKCmqT0JjryhLS9OH3FNFbj5wCiPcDpFNhbW84Fg8gioGg65oayQgOAPH+tfrdN/0dpUvbFtcA4v0s4VGbOipOgpep34SdLJ7z6po2fX2YCIb4PEvw4G88aw0g3n98pfP+13R+JwDxGY+TNFxTY6zDByArvYiKbGFO5UiRXXsY/e68fNqNGb6aNqEyfXZ9TWe1KcU6GhjiMyyB2nStW60Aovfp3+5AoFPdiCW6LkUWVCYikiZVZgu7uPnvY6wBID7DEhbsY1TxN6V7HahMe+xzYqhok+k7GOI7LIHadP3oCoAoDiSAQVENSzRNkWzX6ToA8V2lqeJC5LvBgHWDoaFDqwPOVwDRRl1CbYqpSW9Tm0iZ9lhAgNpEUQ1IAIX7dX/M7wQgvmvuQ4KFIYighYP+C0V1ecUpUlRbhhWQVRQnAJEDFNQZH1KbSJn49OR9ABBbF9gU1V/sWAOInPudYAcA0fLh78YW9m3moKje7xzXlcVflQFgqEyAhQKclKl9asCDDiAABaDYgw0BBLYGwAAgUv1ldwaGYd2gkJZmStNWqSKAyKcuUWuQMpEeEJ953wAEoCAABKDgvQIQSK6AgaK6yF+68lZ8hkEBRM6HQAEBgCCoMyiqCQJAEASAIAgAQRAAgiAABEEACIIAEAQBIAgCQBAEgCAIAEEQAIIgAARBAAiCIAAEQbzEv+tUTANP4szvAAAAAElFTkSuQmCC") 0 0 / 100% 100% no-repeat;
}
.s-control .ctl-window {
position: absolute;
top: 0;
left: 4%;
width: min(56%, 380px);
height: auto;
}
.s-control .ctl-lamp {
position: absolute;
top: 0;
right: 3%;
width: 96px;
height: auto;
}
.s-control .sc-frame { fill: var(--sc-frame); }
.s-control .sc-sill { fill: var(--sc-sill); }
.s-control .sc-sun { fill: var(--eye); }
.s-control .sc-hill-far { fill: color-mix(in oklab, var(--teal-2) 70%, var(--glow-c)); opacity: 0.55; }
.s-control .sc-hill-mid { fill: color-mix(in oklab, var(--deep-2) 80%, var(--green)); opacity: 0.8; }
.s-control .sc-hill-near { fill: var(--deep); opacity: 0.92; }
.s-control .sc-cord { fill: var(--sc-cord); }
.s-control .sc-cap { fill: var(--sc-lamp-3); }
.s-control .sc-rim { stroke: color-mix(in srgb, var(--white) 26%, transparent); }
.s-control .sc-bezel { fill: var(--sc-bezel); }
.s-control .sc-ui rect { fill: var(--white); opacity: 0.32; }
.s-control .sc-notch { fill: var(--sc-alu-3); }
.s-control .sc-contact { fill: var(--sc-shade); opacity: 0.45; }
.s-control .sc-steam { stroke: color-mix(in srgb, var(--white) 11%, transparent); }
.s-control .sc-mug-handle { stroke: var(--sc-mug-2); }
.s-control .sc-mug-rim { fill: var(--sc-mug-1); }
.s-control .sc-coffee { fill: color-mix(in oklab, var(--deep) 70%, var(--eye) 12%); }
.s-control .sc-rib { stroke: color-mix(in srgb, var(--eye) 18%, transparent); stroke-width: 1.2; stroke-linecap: round; }
.s-control .sc-pot-rim { fill: var(--sc-pot-1); }
.s-control .ctl-fig {
position: relative;
z-index: 2;
width: 100%;
max-width: 480px;
margin: 0 auto 96px;
}
.s-control .ctl-card {
background: rgba(212, 251, 241, 0.33);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--white) 55%, transparent),
0 2px 6px color-mix(in srgb, var(--deep) 20%, transparent),
0 34px 70px -28px color-mix(in srgb, var(--sc-shade) 85%, transparent);
}
.s-control .ctl-card .chat-body { padding: 14px var(--chat-px) 12px; }
.s-control .ctl-attach { max-width: 340px; }
.s-control .ctl-attach .attach-sheet { padding: 2px 12px; }
.s-control .ctl-card .slack-btn { cursor: default; pointer-events: none; }
.s-control .ctl-desk {
position: relative;
z-index: 1;
margin: 0 calc(var(--pad-x) * -1);
padding: 18px 24px 22px;
background: linear-gradient(180deg, var(--sc-desk-front-1) 0%, var(--sc-desk-front-2) 100%);
background-repeat: no-repeat;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--eye) 34%, transparent);
}
.s-control .ctl-desk::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: var(--desk-depth);
background:
linear-gradient(180deg, color-mix(in srgb, var(--sc-shade) 60%, transparent) 0%, transparent 9px),
radial-gradient(60% 160% at 18% 100%, color-mix(in srgb, var(--eye) 20%, transparent) 0%, transparent 70%),
linear-gradient(180deg, var(--sc-desk-2) 0%, var(--sc-desk-1) 100%);
background-repeat: no-repeat;
}
.s-control .ctl-props {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 0;
}
.s-control .ctl-props > svg { position: absolute; height: auto; }
.s-control .ctl-laptop { left: 50%; bottom: 12px; width: min(64%, 400px); transform: translateX(-50%); }
.s-control .ctl-mug { left: 6%; bottom: 5px; width: 60px; }
.s-control .ctl-plant { right: 2.5%; bottom: 16px; width: 150px; }
.s-control .ctl-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
margin: 0;
padding: 0;
list-style: none;
color: var(--on-dark-2);
font-size: 13.5px;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.005em;
}
.s-control .ctl-trust > li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.s-control .ctl-trust .icon { width: 16px; height: 16px; color: var(--glow-c); }
@media (min-width: 1024px) and (max-width: 1279px) {
.s-control .ctl-grid { gap: 56px; }
.s-control .ctl-panel { --pad-x: 32px; }
}
@media (max-width: 1023px) {
.s-control .ctl-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.s-control .ctl-copy { max-width: 620px; }
.s-control .ctl-panel { width: 100%; max-width: 760px; }
}
@media (max-width: 767px) {
.s-control .ctl-grid { gap: 40px; }
.s-control .ctl-lead { margin-top: 20px; font-size: 17px; }
.s-control .ctl-list { margin-top: 28px; }
.s-control .ctl-action { margin-top: 32px; }
.s-control .ctl-panel { --pad-x: 16px; --desk-depth: 38px; padding-top: 76px; border-radius: 24px; }
.s-control .ctl-window { left: 2%; width: min(74%, 340px); }
.s-control .ctl-lamp { right: 1%; width: 76px; }
.s-control .ctl-fig { margin-bottom: 80px; }
.s-control .ctl-laptop { width: min(76%, 360px); bottom: 10px; }
.s-control .ctl-mug { left: 2%; width: 46px; }
.s-control .ctl-plant { right: -2%; width: 104px; bottom: 12px; }
.s-control .ctl-desk { padding: 16px 16px 20px; }
.s-control .ctl-trust { gap: 8px 20px; font-size: 13px; }
}
@media (max-width: 479px) {
.s-control .ctl-card { padding: 7px; border-radius: 22px; }
.s-control .ctl-card > .chat { border-radius: 15px; --chat-px: 12px; --avatar: 32px; --avatar-r: 7px; }
.s-control .ctl-attach { padding: 10px; border-radius: 12px; }
.s-control .ctl-attach .attach-head { flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 8px; }
.s-control .ctl-attach .attach-sheet { padding: 2px 10px; }
.s-control .ctl-attach .attach-row { gap: 8px; font-size: 12px; }
.s-control .ctl-attach .attach-row__title { white-space: normal; }
.s-control .ctl-card .slack-btn { height: 34px; padding: 0 12px; font-size: 14px; }
.s-control .ctl-laptop { width: 68%; }
.s-control .ctl-mug { width: 40px; }
.s-control .ctl-plant { width: 92px; right: -3%; }
}
.s-testimonials .tm-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px 64px;
margin-bottom: 56px;
}
.s-testimonials .tm-head__main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
min-width: 0;
}
.s-testimonials .tm-head__sub {
flex: 0 1 300px;
margin-bottom: 10px;
color: var(--ink-2);
font-size: 17px;
line-height: 1.5;
letter-spacing: -0.008em;
}
.s-testimonials .tm-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
grid-auto-rows: auto;
gap: 20px;
}
.s-testimonials .tm-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
min-width: 0;
margin: 0;
padding: 32px;
border-radius: var(--r-xl);
}
.s-testimonials .tm-card--plain {
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.03);
}
.s-testimonials .tm-card--feature {
grid-row: span 2;
gap: 32px;
padding: 40px 44px 40px;
min-height: 520px;
}
.s-testimonials .tm-company {
display: inline-flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 12px 0 10px;
border-radius: var(--r-pill);
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink-2);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.06em;
white-space: nowrap;
}
.s-testimonials .tm-company .icon { width: 14px; height: 14px; color: var(--ink-3); }
.s-testimonials .tm-card--feature .tm-company {
background: rgba(255, 255, 255, 0.10);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
color: #fff;
}
.s-testimonials .tm-card--feature .tm-company .icon { color: var(--glow-c); }
.s-testimonials .tm-quote { margin: 0; }
.s-testimonials .tm-quote p {
text-indent: -0.4em;
text-wrap: pretty;
}
.s-testimonials .tm-card--plain .tm-quote p {
color: var(--ink);
font-size: 18px;
line-height: 1.55;
letter-spacing: -0.012em;
}
.s-testimonials .tm-card--feature .tm-quote p {
max-width: 21em;
color: #fff;
font-family: var(--font-display);
font-size: clamp(26px, 2.5vw, 34px);
font-weight: 500;
line-height: 1.24;
letter-spacing: -0.03em;
text-indent: -0.36em;
}
.s-testimonials .tm-person {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
margin-top: auto;
}
.s-testimonials .tm-avatar {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
user-select: none;
}
.s-testimonials .tm-avatar--a { background: var(--av-a-bg); color: var(--av-a-fg); }
.s-testimonials .tm-avatar--b { background: var(--av-b-bg); color: var(--av-b-fg); }
.s-testimonials .tm-card--feature .tm-avatar {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
color: #fff;
font-size: 16px;
}
.s-testimonials .tm-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-testimonials .tm-name {
color: var(--ink);
font-size: 15.5px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.012em;
}
.s-testimonials .tm-role {
color: var(--ink-mute);
font-size: 14px;
line-height: 1.4;
}
.s-testimonials .tm-card--feature .tm-name { color: #fff; font-size: 16px; }
.s-testimonials .tm-card--feature .tm-role { color: var(--on-dark-2); }
@media (max-width: 1199px) {
.s-testimonials .tm-head { flex-direction: column; align-items: flex-start; gap: 20px; }
.s-testimonials .tm-head__sub { flex: none; max-width: 520px; margin: 0; }
}
@media (max-width: 1023px) {
.s-testimonials .tm-head { margin-bottom: 48px; }
.s-testimonials .tm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.s-testimonials .tm-card--feature { grid-row: auto; grid-column: 1 / -1; min-height: 0; padding: 40px; }
.s-testimonials .tm-card--feature .tm-quote p { max-width: 24em; font-size: clamp(26px, 3.4vw, 32px); }
}
@media (max-width: 767px) {
.s-testimonials .tm-head { gap: 16px; margin-bottom: 36px; }
.s-testimonials .tm-head__sub { font-size: 16.5px; }
.s-testimonials .tm-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.s-testimonials .tm-card { gap: 20px; padding: 24px; border-radius: 24px; }
.s-testimonials .tm-card--feature { gap: 24px; padding: 28px 24px 26px; }
.s-testimonials .tm-card--feature .tm-quote p { font-size: 24px; line-height: 1.27; }
.s-testimonials .tm-card--plain .tm-quote p { font-size: 17px; }
}
.s-testimonials .tm-avatar--photo { overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 2px var(--white); }
.s-testimonials .tm-card--feature .tm-avatar--photo { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.s-testimonials .tm-avatar--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-testimonials .tm-company--logo { height: auto; padding: 0; background: none; box-shadow: none; }
.s-testimonials .tm-card--feature .tm-company--logo { background: none; box-shadow: none; }
.s-testimonials .tm-company--logo img { display: block; width: auto; height: 26px; }
.s-testimonials .tm-card--feature .tm-company--logo img { height: 32px; }
.s-testimonials .tm-company--logo img[src*="bonameda"] { height: 18px; }
.pr-plans,
.pr-usage,
.pr-how {
--p-card-r: 32px;
--p-gap: 20px;
}
.pr-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.pr-nowrap { white-space: nowrap; }
.pr-phrase { display: block; }
@media (min-width: 600px) {
.pr-phrase { white-space: nowrap; }
}
.pr-h {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 500;
line-height: 1.06;
letter-spacing: var(--ls-display);
color: var(--ink);
text-wrap: balance;
}
.pr-plans {
--plan-r: 26px;
--plan-px: 28px;
--plan-low: #EDF1EA;
overflow: clip;
padding-top: 40px;
padding-bottom: 8px;
background: var(--paper);
}
.pr-plans::before {
content: "";
position: absolute;
z-index: 0;
inset: 0 0 auto;
height: 760px;
pointer-events: none;
background:
radial-gradient(34% 46% at 14% 30%, rgba(244, 239, 176, 0.62) 0%, rgba(244, 239, 176, 0) 100%),
radial-gradient(36% 50% at 88% 22%, rgba(191, 230, 208, 0.85) 0%, rgba(191, 230, 208, 0) 100%);
background-repeat: no-repeat;
}
.pr-head {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.pr-head__title {
margin-top: 16px;
font-family: var(--font-display);
font-size: clamp(40px, 4.8vw, 68px);
font-weight: 500;
line-height: 1.04;
letter-spacing: var(--ls-display);
color: var(--ink);
text-wrap: balance;
}
.pr-head__lead {
max-width: 760px;
margin-top: 14px;
color: var(--ink-2);
font-size: 17px;
line-height: 1.5;
letter-spacing: -0.008em;
text-wrap: balance;
}
@media (max-width: 899px) {
.pr-br { display: none; }
}
.pr-billing {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 12px;
margin-top: 24px;
}
.pr-billing__track {
position: relative;
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
padding: 4px;
border-radius: var(--r-pill);
background: var(--white);
box-shadow:
var(--ring),
0 1px 2px rgba(14, 38, 34, 0.05),
0 8px 22px -14px rgba(14, 38, 34, 0.22);
}
.pr-billing__opt {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 112px;
height: 38px;
padding: 0 20px;
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
cursor: pointer;
transition: color var(--dur-1) var(--ease-out);
}
.pr-billing__opt:hover { color: var(--ink); }
.pr-billing__opt[aria-checked="true"]:hover { color: #fff; }
.pr-billing__track.is-init .pr-billing__opt,
.pr-billing__track.is-init .pr-billing__thumb { transition: none !important; }
.pr-billing__opt[aria-checked="true"] { background: var(--btn); color: #fff; }
.pr-billing__opt:focus-visible { outline-offset: 2px; }
.pr-billing__thumb { display: none; }
.pr-billing__track.has-thumb .pr-billing__opt[aria-checked="true"] { background: transparent; }
.pr-billing__track.has-thumb .pr-billing__thumb {
display: block;
position: absolute;
z-index: 0;
top: 4px;
bottom: 4px;
left: 4px;
width: calc((100% - 8px) / var(--n, 2));
border-radius: var(--r-pill);
background: var(--btn);
box-shadow: 0 6px 14px -8px rgba(4, 48, 42, 0.55);
transform: translateX(calc(var(--i, 0) * 100%));
transition: transform 0.3s var(--ease-out);
}
.pr-billing__hint {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 11px 0 8px;
border-radius: var(--r-pill);
background: var(--mint);
color: var(--teal-2);
font-size: 13.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.pr-billing__hint-icon { width: 15px; height: 15px; }
.pr-cards {
position: relative;
z-index: 1;
margin-top: 32px;
}
.pr-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(8, auto);
column-gap: 16px;
max-width: 1200px;
margin-inline: auto;
}
.pr-plans .plan {
position: relative;
display: grid;
grid-row: span 8;
grid-template-rows: subgrid;
row-gap: 0;
min-width: 0;
padding-bottom: 6px;
border-radius: var(--plan-r);
background: var(--plan-low);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.06);
}
.pr-plans .plan__top {
grid-row: 1 / span 6;
display: grid;
grid-template-rows: subgrid;
row-gap: 0;
min-width: 0;
padding: 26px var(--plan-px) var(--plan-px);
border-radius: var(--plan-r);
background: var(--white);
box-shadow:
0 0 0 1px rgba(14, 38, 34, 0.07),
0 1px 2px rgba(14, 38, 34, 0.04),
0 16px 36px -24px rgba(4, 48, 42, 0.30);
}
.pr-plans .plan--max .plan__top {
border: 1.5px solid transparent;
padding: 24.5px calc(var(--plan-px) - 1.5px) calc(var(--plan-px) - 1.5px);
background:
linear-gradient(var(--white), var(--white)) padding-box,
linear-gradient(160deg, #EADF92 0%, #9FDCBB 34%, #3F9677 70%, #0E6362 100%) border-box;
background-repeat: no-repeat;
box-shadow:
0 1px 2px rgba(14, 38, 34, 0.05),
0 22px 48px -26px rgba(4, 48, 42, 0.5);
}
.pr-plans .plan--max { background: #E6F1E9; }
.pr-plans .plan__head {
display: flex;
flex-wrap: wrap;
align-self: start;
align-items: center;
justify-content: space-between;
gap: 6px 10px;
min-width: 0;
}
.pr-plans .plan__name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.pr-plans .plan__tag {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
padding: 3px 10px 3px 8px;
border-radius: var(--r-pill);
background: linear-gradient(100deg, rgba(244, 239, 176, 0.75) 0%, var(--mint) 75%);
background-repeat: no-repeat;
box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.18);
color: var(--teal);
font-size: 12.5px;
font-weight: 500;
line-height: 1.25;
}
.pr-plans .plan__tag-icon { flex: none; width: 14px; height: 14px; color: var(--teal-2); }
.pr-plans .plan__for {
margin-top: 2px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.45;
}
.pr-plans .plan__price {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px 12px;
min-height: 54px;
margin-top: 18px;
}
.pr-plans .plan__now {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
min-width: 0;
}
.pr-plans .plan__amount {
display: inline-block;
font-family: var(--font-display);
font-size: 50px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.045em;
color: var(--ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pr-plans .plan__amount--word { font-size: 44px; letter-spacing: -0.04em; line-height: 54px; }
.pr-plans .plan__amount.is-swap,
.pr-plans .plan__save.is-swap,
.pr-plans .plan__keys .is-swap { animation: p58-swap 0.3s var(--ease-out) both; }
.pr-plans .plan__per { color: var(--ink-2); font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.pr-plans .plan__save {
display: flex;
flex: none;
flex-direction: column;
align-items: flex-end;
gap: 5px;
padding-bottom: 4px;
}
.pr-plans .plan__save[hidden] { display: none; }
.pr-plans .plan__was {
color: var(--ink-mute);
font-size: 14px;
line-height: 1;
font-variant-numeric: tabular-nums;
text-decoration-thickness: 1.5px;
white-space: nowrap;
}
.pr-plans .plan__off {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: var(--r-pill);
background: var(--mint);
box-shadow: inset 0 0 0 1px var(--mint-2);
color: var(--teal-2);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1;
letter-spacing: 0.06em;
white-space: nowrap;
}
.pr-plans .plan__billed {
min-height: 20px;
margin-top: 6px;
color: var(--ink-mute);
font-size: 13.5px;
line-height: 1.5;
font-variant-numeric: tabular-nums;
}
.pr-plans .plan__usage,
.pr-plans .picker__btn,
.pr-plans .picker__static {
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
padding: 8px 14px;
border-radius: 12px;
font-size: 14.5px;
line-height: 1.3;
letter-spacing: -0.005em;
}
.pr-plans .plan__usage,
.pr-plans .picker__static {
gap: 10px;
background: var(--paper);
color: var(--ink-2);
}
.pr-plans .meter {
display: inline-flex;
flex: none;
align-items: flex-end;
gap: 2px;
height: 14px;
}
.pr-plans .meter > i {
width: 4px;
height: 5px;
border-radius: 1.5px;
background: var(--line-2);
}
.pr-plans .meter > i:nth-child(2) { height: 8px; }
.pr-plans .meter > i:nth-child(3) { height: 11px; }
.pr-plans .meter > i:nth-child(4) { height: 14px; }
.pr-plans .meter--1 > i:nth-child(-n + 1),
.pr-plans .meter--2 > i:nth-child(-n + 2),
.pr-plans .meter--3 > i:nth-child(-n + 3),
.pr-plans .meter--4 > i { background: var(--teal-2); }
.pr-plans .meter--plus::after {
content: "";
align-self: flex-start;
width: 7px;
height: 7px;
margin-left: 1px;
background: var(--teal-2);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5v7M.5 4h7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5v7M.5 4h7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pr-plans .plan__usage,
.pr-plans .picker { margin-top: 18px; align-self: end; }
.pr-plans .plan__cta { margin-top: 12px; }
.pr-plans .plan__btn { --btn-h: 48px; font-size: 15.5px; }
.pr-plans .picker { position: relative; min-width: 0; }
.pr-plans .picker__btn {
justify-content: space-between;
gap: 10px;
padding-right: 12px;
border: 1px solid var(--line-2);
background: var(--white);
color: var(--ink);
font-weight: 500;
text-align: left;
cursor: pointer;
transition:
border-color var(--dur-1) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.pr-plans .picker__btn:hover { border-color: #B9C4BC; box-shadow: var(--shadow-sm); }
.pr-plans .picker__btn[aria-expanded="true"] { border-color: var(--green); box-shadow: var(--focus-soft); }
.pr-plans .picker__value { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pr-plans .picker__chev {
flex: none;
width: 16px;
height: 16px;
color: var(--ink-2);
transition: transform var(--dur-2) var(--ease-out);
}
.pr-plans .picker__btn[aria-expanded="true"] .picker__chev { transform: rotate(180deg); }
.pr-plans .picker__menu {
position: absolute;
z-index: var(--z-dropdown);
top: calc(100% + 6px);
left: 0;
right: 0;
display: grid;
gap: 2px;
padding: 6px;
border-radius: 16px;
background: var(--white);
box-shadow: var(--ring), var(--shadow-lg);
}
.pr-plans .picker__menu[hidden] { display: none; }
.pr-plans .picker__menu:not([hidden]) { animation: p58-menu 0.2s var(--ease-out) both; }
.pr-plans .picker__menu:focus,
.pr-plans .picker__menu:focus-visible { outline: none; }
.pr-plans .picker__opt {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 1px 12px;
padding: 9px 12px 9px 36px;
border-radius: 10px;
color: var(--ink);
cursor: pointer;
user-select: none;
transition: background-color var(--dur-1) var(--ease-out);
}
.pr-plans .picker__opt-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pr-plans .picker__opt-for { grid-column: 1 / -1; color: var(--ink-mute); font-size: 13px; line-height: 1.35; }
.pr-plans .picker__opt-price { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-plans .picker__opt-price .is-rest { color: var(--ink-mute); font-size: 12.5px; }
.pr-plans .picker__opt.is-active { background: var(--hover); }
.pr-plans .picker__menu:focus-visible .picker__opt.is-active { box-shadow: inset 0 0 0 2px var(--teal-2); }
.pr-plans .picker__opt[aria-selected="true"] .picker__opt-name,
.pr-plans .picker__opt[aria-selected="true"] .picker__opt-price { color: var(--teal-2); }
.pr-plans .picker__opt[aria-selected="true"]::before {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 15px;
height: 15px;
background: var(--teal-2);
-webkit-mask: var(--check) center / contain no-repeat;
mask: var(--check) center / contain no-repeat;
}
.pr-plans .picker__static { display: none; }
html:not(.js) .pr-plans .picker__btn { display: none; }
html:not(.js) .pr-plans .picker__static { display: flex; }
.pr-plans .plan > .plan__keys,
.pr-plans .plan__keys-wrap {
grid-row: 7;
padding: 22px var(--plan-px) 0;
}
.pr-plans .plan__plus {
margin-bottom: 12px;
color: var(--ink);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.005em;
}
.pr-plans .plan__keys,
.pr-plans .plan__list {
display: grid;
gap: 10px;
}
.pr-plans .plan__keys > li,
.pr-plans .plan__list > li {
position: relative;
padding-left: 28px;
color: var(--ink);
font-size: 15px;
line-height: 1.45;
letter-spacing: -0.005em;
}
.pr-plans .plan__keys > li::before,
.pr-plans .plan__list > li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 19px;
height: 19px;
background: var(--teal-2);
-webkit-mask: var(--check) center / 16px no-repeat;
mask: var(--check) center / 16px no-repeat;
}
.pr-plans .plan__more {
grid-row: 8;
min-width: 0;
margin: 18px var(--plan-px) 0;
padding-bottom: 14px;
border-top: 1px solid rgba(14, 38, 34, 0.08);
}
.pr-plans .plan__toggle {
display: flex;
align-items: center;
gap: 6px;
width: fit-content;
max-width: 100%;
min-height: 44px;
margin-top: 6px;
color: var(--teal-2);
font-size: 14.5px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.005em;
list-style: none;
cursor: pointer;
transition: color var(--dur-1) var(--ease-out);
}
.pr-plans .plan__toggle::-webkit-details-marker { display: none; }
.pr-plans .plan__toggle::marker { content: ""; }
.pr-plans .plan__toggle:hover { color: var(--teal); }
.pr-plans .plan__toggle:focus-visible { outline-offset: 2px; border-radius: 6px; }
.pr-plans .plan__toggle-chev { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.pr-plans .plan__more[open] .plan__toggle-chev { transform: rotate(180deg); }
.pr-plans .plan__toggle-open { display: none; }
.pr-plans .plan__more[open] .plan__toggle-open { display: inline; }
.pr-plans .plan__more[open] .plan__toggle-closed { display: none; }
.pr-plans .plan__all { padding: 8px 0 8px; }
html.js .pr-grid:not(.is-ready) .plan__more > .plan__all,
html.js .pr-grid:not(.is-ready) .plan__toggle-open { display: none; }
html.js .pr-grid:not(.is-ready) .plan__toggle-closed { display: inline; }
html.js .pr-grid:not(.is-ready) .plan__toggle-chev { transform: none; }
.pr-grid.is-ready .plan__more[open] > .plan__all { animation: p58-swap 0.3s var(--ease-out) both; }
.pr-plans .plan__all > .plan__plus { margin-bottom: 4px; }
.pr-plans .plan__group {
margin: 18px 0 10px;
color: var(--ink-2);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
}
.pr-plans .plan__plus + .plan__group { margin-top: 10px; }
.pr-plans .plan__list > li { font-size: 14.5px; }
.pr-plans .plan__levels {
display: grid;
gap: 4px;
margin-top: 8px;
}
.pr-plans .plan__levels > li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 1px 12px;
padding: 9px 12px;
border-radius: 12px;
transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.pr-plans .plan__levels > li.is-on { background: var(--white); box-shadow: var(--ring); }
.pr-plans .plan__level-name { color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pr-plans .plan__level-price { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-plans .plan__level-price .is-rest { color: var(--ink-mute); font-size: 12.5px; }
.pr-plans .plan__level-for { grid-column: 1 / -1; color: var(--ink-mute); font-size: 13px; line-height: 1.4; }
.pr-plans .plan__example {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 18px;
padding: 12px 14px;
border-radius: 14px;
background: var(--white);
box-shadow: var(--ring);
color: var(--ink-2);
font-size: 14px;
line-height: 1.5;
}
.pr-plans .plan__example svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--teal-2); }
.pr-plans .plan__example strong { color: var(--ink); font-weight: 600; }
.pr-plans .plan__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
color: var(--teal-2);
font-size: 14.5px;
font-weight: 500;
transition: color var(--dur-1) var(--ease-out);
}
.pr-plans .plan__link .icon { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease-out); }
.pr-plans .plan__link:hover { color: var(--teal); }
.pr-plans .plan__link:hover .icon { transform: translateX(2px); }
.pr-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 16px;
width: fit-content;
max-width: 100%;
margin: 36px auto 0;
padding: 8px 18px 8px 22px;
border-radius: var(--r-pill);
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.04), 0 10px 26px -18px rgba(4, 48, 42, 0.25);
}
.pr-tools__label {
color: var(--ink);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.01em;
text-align: center;
}
.pr-tools__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
}
.pr-tool {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.06);
}
.pr-tool > svg { width: 18px; height: 18px; }
.pr-tool--more { color: var(--ink-2); }
.pr-tool--more > svg { width: 15px; height: 15px; }
.pr-foot {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 0;
margin-top: 18px;
color: var(--ink-mute);
font-size: 13.5px;
line-height: 1.45;
text-align: center;
}
.pr-foot > li { display: inline-flex; align-items: center; }
.pr-foot > li + li::before {
content: "";
width: 3px;
height: 3px;
margin: 0 12px;
border-radius: 50%;
background: var(--ink-3);
}
.pr-foot__link {
color: var(--teal-2);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(14, 99, 98, 0.3);
text-underline-offset: 3px;
transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.pr-foot__link:hover { color: var(--teal); text-decoration-color: currentColor; }
.pr-usage { padding-bottom: 0; }
.pr-uses {
max-width: 1040px;
margin: 0 auto 64px;
text-align: center;
}
.pr-uses__visual { display: block; }
.pr-uses__visual > .pr-phrase:nth-child(2) { display: inline; }
.pr-usage .rot {
display: inline-grid;
vertical-align: bottom;
margin-left: 0.12em;
text-align: left;
}
.pr-usage .rot__item {
grid-area: 1 / 1;
display: inline-flex;
align-items: center;
gap: 0.2em;
white-space: nowrap;
}
.pr-usage .rot__item:not(.is-on) { visibility: hidden; }
.pr-usage .rot__item.is-out { animation: p58-rot-out 0.22s var(--ease-out) both; }
.pr-usage .rot__item.is-in { animation: p58-rot-in 0.38s var(--ease-out) both; }
.pr-usage .rot__tile {
display: grid;
place-items: center;
flex: none;
width: 0.8em;
height: 0.8em;
margin-top: 0.06em;
border-radius: 0.2em;
background: var(--grad);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -8px rgba(4, 48, 42, 0.6);
color: #fff;
}
.pr-usage .rot__tile > svg { width: 0.5em; height: 0.5em; }
.pr-tiers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--p-gap);
max-width: 1088px;
margin-inline: auto;
}
.pr-usage .tier {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border-radius: var(--p-card-r);
color: #fff;
background:
radial-gradient(80% 50% at 85% 100%, rgba(142, 221, 179, 0.35) 0%, rgba(142, 221, 179, 0) 100%),
linear-gradient(180deg, #04302A 0%, #073D35 30%, #0E6362 66%, #3F9677 100%);
background-repeat: no-repeat;
box-shadow: 0 1px 2px rgba(4, 48, 42, 0.1), 0 24px 56px -32px rgba(4, 48, 42, 0.5);
}
.pr-usage .tier::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--noise);
opacity: var(--grain-a);
pointer-events: none;
}
.pr-usage .tier::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
pointer-events: none;
}
.pr-usage .tier__text { padding: 34px 32px 26px; }
.pr-usage .tier__label {
color: var(--eye);
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.005em;
}
.pr-usage .tier__weight {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 18px;
margin-top: 12px;
font-family: var(--font-display);
font-size: clamp(36px, 3.4vw, 48px);
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.04em;
}
.pr-usage .tier__meter {
display: inline-flex;
flex: none;
align-items: flex-end;
gap: 5px;
height: 0.6em;
}
.pr-usage .tier__meter > i {
width: 9px;
height: 45%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
}
.pr-usage .tier__meter > i:nth-child(2) { height: 72%; }
.pr-usage .tier__meter > i:nth-child(3) { height: 100%; }
.pr-usage .tier__meter--1 > i:nth-child(-n + 1),
.pr-usage .tier__meter--2 > i:nth-child(-n + 2),
.pr-usage .tier__meter--3 > i { background: var(--eye); box-shadow: 0 0 12px -2px rgba(244, 239, 176, 0.45); }
.pr-usage .tier__ex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 6px;
margin-top: 10px;
color: var(--on-dark-2);
font-size: 15px;
line-height: 1.4;
}
.pr-usage .tier__arrow {
display: inline-block;
flex: none;
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 12h14.5M13.25 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 12h14.5M13.25 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
.pr-usage .tier__fig {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
margin: 0 16px 16px;
}
.pr-usage .tier__frame {
display: flex;
flex: 1;
flex-direction: column;
padding: 8px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.13);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.42),
0 24px 48px -28px rgba(0, 0, 0, 0.45);
}
.pr-usage .tier__chat { flex: 1; border-radius: 16px; --chat-px: 20px; }
.pr-usage .tier__body { padding-top: 12px; padding-bottom: 14px; }
.pr-usage .tier__file { margin-top: 10px; max-width: 320px; }
.pr-usage .tier__emoji {
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
font-size: 0.95em;
}
.pr-usage .tier--full {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 372px);
min-height: 400px;
}
.pr-usage .tier--full .tier__text {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
padding: 34px 32px 40px;
}
.pr-usage .tier__weight--xl { font-size: clamp(40px, 4.2vw, 56px); line-height: 1; }
.pr-usage .tier__steps {
display: grid;
gap: 10px;
color: var(--on-dark-2);
font-size: 15px;
line-height: 1.4;
}
.pr-usage .tier__steps > li {
position: relative;
padding-left: 28px;
}
.pr-usage .tier__steps > li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 18px;
height: 18px;
background: var(--eye);
-webkit-mask: var(--check) center / 16px no-repeat;
mask: var(--check) center / 16px no-repeat;
}
.pr-usage .tier__fig--side { margin: 14px 0 0 0; }
.pr-usage .tier__frame--side {
padding: 8px 0 0 8px;
border-radius: 28px 0 0 0;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.42),
-24px 0 48px -32px rgba(0, 0, 0, 0.5);
}
.pr-usage .tier__frame--side > .tier__chat { border-radius: 20px 0 0 0; }
.pr-usage .tier__frame--side .tier__body { padding-top: 16px; }
.pr-usage .pack {
position: relative;
align-self: end;
margin: 0 18px -22px 0;
z-index: 0;
}
.pr-usage .pack__sheet {
position: absolute;
left: 14px;
right: 14px;
top: -12px;
height: 40px;
border-radius: 16px 16px 0 0;
background: linear-gradient(180deg, #F2F0D2 0%, #E3EEDF 100%);
background-repeat: no-repeat;
opacity: 0.85;
}
.pr-usage .pack__win {
position: relative;
overflow: hidden;
border-radius: 16px;
background: var(--white);
color: var(--ink);
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.06), 0 24px 48px -24px rgba(0, 0, 0, 0.45);
font-family: var(--font-body);
}
.pr-usage .pack__bar {
display: flex;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 10px;
border-bottom: 1px solid var(--line-soft);
background: #FBFBF8;
}
.pr-usage .pack__bar > i { width: 8px; height: 8px; border-radius: 50%; background: #E46A5E; }
.pr-usage .pack__bar > i:nth-child(2) { background: #E8B84A; }
.pr-usage .pack__bar > i:nth-child(3) { background: #5CB26A; }
.pr-usage .pack__url {
flex: 1;
margin-left: 8px;
padding: 3px 8px;
border-radius: 6px;
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line-soft);
color: var(--ink-2);
font-size: 10.5px;
line-height: 1.3;
text-align: center;
}
.pr-usage .pack__app { display: grid; grid-template-columns: 38px minmax(0, 1fr); }
.pr-usage .pack__side {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 8px;
border-right: 1px solid var(--line-soft);
}
.pr-usage .pack__side > span { height: 6px; border-radius: 3px; background: #EDF0EB; }
.pr-usage .pack__side > span.is-on { background: var(--mint-2); }
.pr-usage .pack__main { min-width: 0; padding: 0 0 12px; }
.pr-usage .pack__hero {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 12px 13px;
background: linear-gradient(120deg, #0A4A40 0%, #0E6362 70%, #2F8F6E 100%);
background-repeat: no-repeat;
color: #fff;
}
.pr-usage .pack__title { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.pr-usage .pack__sub { color: rgba(255, 255, 255, 0.72); font-size: 10.5px; line-height: 1.3; }
.pr-usage .pack__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 10px 4px; }
.pr-usage .pack__stat {
display: flex;
flex-direction: column;
gap: 3px;
padding: 7px 8px;
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--line);
}
.pr-usage .pack__stat > small { color: var(--ink-mute); font-size: 8.5px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; }
.pr-usage .pack__stat > b { font-size: 13px; font-weight: 600; line-height: 1.1; }
.pr-usage .pack__table { margin: 6px 10px 0; }
.pr-usage .pack__th,
.pr-usage .pack__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
min-width: 0;
}
.pr-usage .pack__th {
padding: 6px 2px;
color: var(--ink-mute);
font-size: 8.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pr-usage .pack__row {
min-height: 32px;
padding: 4px 2px;
border-top: 1px solid var(--line-soft);
font-size: 10.5px;
font-weight: 500;
}
.pr-usage .pack__file {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pr-usage .pack__file > .icon { width: 16px; height: 16px; }
.pr-usage .pack__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pr-usage .pack__row > .tag { height: 18px; padding: 0 6px; border-radius: 5px; font-size: 9.5px; }
.pr-usage .pack__note {
display: block;
overflow: hidden;
text-overflow: ellipsis;
margin: 8px 10px 0;
padding: 6px 8px;
border-radius: var(--r-pill);
background: var(--mint);
color: var(--teal-2);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.pr-usage .pack__otto { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 4px; vertical-align: -3px; }
.pr-how { padding-top: 128px; }
.pr-how__inner { max-width: calc(1088px + var(--gutter) * 2); }
.pr-how__head { margin-bottom: 48px; }
.pr-how__sub {
margin-top: 24px;
color: var(--ink-2);
font-size: 17px;
line-height: 1.5;
letter-spacing: -0.008em;
}
.pr-how__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--p-gap);
}
.pr-how .how-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 32px;
border-radius: 28px;
background: var(--white);
box-shadow:
0 0 0 1px rgba(14, 38, 34, 0.05),
0 1px 2px rgba(14, 38, 34, 0.03),
0 18px 40px -30px rgba(4, 48, 42, 0.28);
}
.pr-how .how-card__icon { flex: none; width: 40px; height: 40px; }
.pr-how .how-card__title {
margin-top: 28px;
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.pr-how .how-card__text {
margin-top: 12px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.55;
}
.pr-faq .faq-a__inner > p + p,
.pr-faq .faq-a__inner > .faq-plans + p { margin-top: 12px; }
.pr-faq .faq-plans {
display: grid;
grid-template-columns: max-content minmax(0, 1fr) max-content;
column-gap: 20px;
max-width: 62ch;
margin: 14px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.pr-faq .faq-plans li {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 15px;
line-height: 1.45;
}
.pr-faq .faq-plans__name { color: var(--ink); font-weight: 600; white-space: nowrap; }
.pr-faq .faq-plans__for { color: var(--ink-2); -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.pr-faq .faq-plans__price {
color: var(--ink);
font-weight: 500;
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.pr-usage .tier__body { flex: 1; justify-content: flex-end; }
.pr-usage .tier__groups { display: grid; gap: 10px; }
.pr-usage .tier__group {
margin: 6px 0 2px;
color: var(--eye);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.pr-usage .tier__groups .tier__steps { gap: 8px; font-size: 14.5px; }
@media (max-width: 1199px) {
.pr-usage .tier--full { grid-template-columns: minmax(0, 1fr) minmax(0, 270px) minmax(0, 340px); }
.pr-plans { --plan-px: 24px; }
.pr-plans .plan__amount { font-size: 44px; }
.pr-plans .plan__amount--word { font-size: 40px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
.pr-usage .tier--full { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); min-height: 0; }
.pr-usage .pack { display: none; }
.pr-plans { --plan-px: 20px; }
.pr-plans .plan__keys > li, .pr-plans .plan__list > li { font-size: 14.5px; }
}
@media (max-width: 899px) {
.pr-grid {
grid-template-columns: minmax(0, 560px);
grid-template-rows: none;
justify-content: center;
row-gap: 16px;
}
.pr-plans .plan { display: flex; flex-direction: column; grid-row: auto; padding-bottom: 4px; }
.pr-plans .plan__top { display: flex; flex-direction: column; }
.pr-plans .plan__head, .pr-plans .plan__usage, .pr-plans .picker { align-self: stretch; }
.pr-plans .plan__price { min-height: 0; }
.pr-plans .plan__amount { font-size: 48px; }
.pr-plans .plan__amount--word { font-size: 42px; line-height: 50px; }
.pr-usage .tier--full { display: flex; min-height: 0; }
.pr-usage .tier--full .tier__text { gap: 20px; padding: 34px 32px 26px; }
.pr-usage .pack { display: none; }
.pr-usage .tier__fig--side { margin: 0 16px 16px; }
.pr-usage .tier__frame--side { padding: 8px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 24px 48px -28px rgba(0, 0, 0, 0.45); }
.pr-usage .tier__frame--side > .tier__chat { border-radius: 16px; }
.pr-how__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 899px) {
.pr-usage .tier__chat { --chat-px: 16px; }
}
@media (max-width: 767px) {
.pr-usage, .pr-how { --p-card-r: 26px; --p-gap: 16px; }
.pr-plans { --plan-px: 22px; --plan-r: 24px; padding-top: 28px; }
.pr-head__title { margin-top: 14px; }
.pr-head__lead { margin-top: 12px; font-size: 16px; }
.pr-billing { margin-top: 20px; }
.pr-cards { margin-top: 24px; }
.pr-plans .plan__top { padding-top: 22px; }
.pr-plans .plan--max .plan__top { padding-top: 20.5px; }
.pr-tools { flex-direction: column; gap: 10px; margin-top: 28px; padding: 14px 16px 16px; border-radius: 22px; }
.pr-foot { flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; }
.pr-foot > li + li::before { content: none; }
.pr-uses { margin-bottom: 40px; }
.pr-uses__visual > .pr-phrase:nth-child(2) { display: block; }
.pr-usage .rot { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin: 0.08em 0 0; }
.pr-usage .rot__item { max-width: 100%; white-space: normal; text-wrap: balance; text-align: left; hyphens: auto; overflow-wrap: anywhere; }
.pr-tiers { grid-template-columns: minmax(0, 1fr); }
.pr-usage .tier__text, .pr-usage .tier--full .tier__text { padding: 28px 24px 22px; }
.pr-usage .tier__fig, .pr-usage .tier__fig--side { margin: 0 10px 10px; }
.pr-usage .tier__frame, .pr-usage .tier__frame--side { padding: 6px; border-radius: 20px; }
.pr-usage .tier__chat, .pr-usage .tier__frame--side > .tier__chat { border-radius: 14px; --chat-px: 14px; }
.pr-how { padding-top: 96px; }
.pr-how__head { margin-bottom: 32px; }
.pr-how__sub { margin-top: 16px; font-size: 16px; }
.pr-how .how-card { padding: 26px 24px; border-radius: 24px; }
.pr-how .how-card__title { margin-top: 22px; }
.pr-faq .faq-plans { column-gap: 12px; }
.pr-faq .faq-plans li { font-size: 14.5px; }
}
@media (max-width: 479px) {
.pr-billing__opt { min-width: 100px; height: 36px; padding: 0 16px; font-size: 14.5px; }
.pr-plans .plan__amount { font-size: 44px; }
.pr-plans .plan__amount--word { font-size: 38px; line-height: 46px; }
.pr-usage .tier__weight { font-size: 36px; }
.pr-usage .tier__weight--xl { font-size: 40px; }
}
@keyframes p58-swap {
from { opacity: 0; translate: 0 6px; }
to { opacity: 1; translate: none; }
}
@keyframes p58-menu {
from { opacity: 0; translate: 0 -4px; }
to { opacity: 1; translate: none; }
}
@keyframes p58-rot-out {
from { opacity: 1; translate: none; }
to { opacity: 0; translate: 0 -0.14em; }
}
@keyframes p58-rot-in {
from { opacity: 0; translate: 0 0.18em; }
to { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
.pr-plans .plan__amount.is-swap,
.pr-plans .plan__save.is-swap,
.pr-plans .plan__keys .is-swap,
.pr-plans .picker__menu:not([hidden]),
.pr-grid.is-ready .plan__more[open] > .plan__all,
.pr-usage .rot__item.is-out,
.pr-usage .rot__item.is-in { animation: none; }
.pr-plans .picker__btn, .pr-plans .picker__chev, .pr-plans .picker__opt,
.pr-plans .plan__toggle, .pr-plans .plan__toggle-chev, .pr-plans .plan__levels > li,
.pr-plans .plan__link, .pr-plans .plan__link .icon,
.pr-billing__opt, .pr-billing__track.has-thumb .pr-billing__thumb,
.pr-foot__link { transition: none; }
}
.s-faq .faq-panel {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(0, 640px);
align-items: start;
gap: 40px 64px;
padding: 72px 64px;
border-radius: var(--r-2xl);
background: var(--paper-2);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.035);
}
.s-faq .faq-intro {
position: sticky;
top: calc(var(--nav-h) + 40px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
min-width: 0;
padding-top: 4px;
}
.s-faq .faq-title { font-size: clamp(48px, 5.4vw, 72px); line-height: 1; }
.s-faq .faq-line {
max-width: 300px;
margin-top: 4px;
color: var(--ink-2);
font-size: 17px;
line-height: 1.5;
letter-spacing: -0.008em;
}
.s-faq .faq-demo { margin-top: 12px; }
.s-faq .faq-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.s-faq .faq-item {
border-radius: 24px;
background: var(--white);
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.04), 0 1px 2px rgba(14, 38, 34, 0.03);
transition: box-shadow var(--dur-2) var(--ease-out);
}
.s-faq .faq-item:hover { box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.06), var(--shadow-sm); }
.s-faq .faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 64px;
padding: 14px 18px 14px 26px;
border-radius: inherit;
color: var(--ink);
font-size: 17px;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.014em;
list-style: none;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-1) var(--ease-out);
}
.s-faq .faq-q::-webkit-details-marker { display: none; }
.s-faq .faq-q::marker { content: ""; }
.s-faq .faq-q:focus-visible { outline-offset: 2px; }
.s-faq .faq-q__text { min-width: 0; }
.s-faq .faq-item[open]:not(.is-closing) > .faq-q { color: var(--teal-2); }
.s-faq .faq-icon {
position: relative;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--paper);
color: var(--ink-2);
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.s-faq .faq-icon::before,
.s-faq .faq-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 1.75px;
margin: -0.875px 0 0 -6px;
border-radius: 1px;
background: currentColor;
transition: transform var(--dur-2) var(--ease-out);
}
.s-faq .faq-icon::after { transform: rotate(90deg); }
.s-faq .faq-q:hover .faq-icon { background: var(--mint); color: var(--teal-2); }
.s-faq .faq-item[open]:not(.is-closing) .faq-icon { background: var(--mint); color: var(--teal-2); }
.s-faq .faq-item[open]:not(.is-closing) .faq-icon::after { transform: rotate(0deg); }
.s-faq .faq-a.is-animating { overflow: hidden; }
.s-faq .faq-a__inner { padding: 0 72px 24px 26px; }
.s-faq .faq-a p {
max-width: 62ch;
color: var(--ink-2);
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.006em;
}
@media (max-width: 1199px) {
.s-faq .faq-panel { gap: 36px 48px; padding: 56px 48px; }
.s-faq .faq-a__inner { padding-right: 56px; }
}
@media (max-width: 899px) {
.s-faq .faq-panel { grid-template-columns: minmax(0, 1fr); }
.s-faq .faq-intro { position: static; }
.s-faq .faq-line { max-width: 420px; }
}
@media (max-width: 767px) {
.s-faq .faq-panel { gap: 28px; padding: 36px 16px 16px; border-radius: var(--r-xl); }
.s-faq .faq-intro { gap: 12px; padding-inline: 8px; }
.s-faq .faq-title { font-size: 44px; }
.s-faq .faq-line { font-size: 16px; }
.s-faq .faq-demo { margin-top: 6px; }
.s-faq .faq-list { gap: 8px; }
.s-faq .faq-item { border-radius: 20px; }
.s-faq .faq-q { gap: 14px; min-height: 58px; padding: 14px 14px 14px 18px; font-size: 16px; }
.s-faq .faq-icon { width: 28px; height: 28px; }
.s-faq .faq-icon::before, .s-faq .faq-icon::after { width: 11px; margin-left: -5.5px; }
.s-faq .faq-a__inner { padding: 0 18px 20px; }
.s-faq .faq-a p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
.s-faq .faq-item, .s-faq .faq-q, .s-faq .faq-icon,
.s-faq .faq-icon::before, .s-faq .faq-icon::after { transition: none; }
}
.s-cta {
--cta-warm: color-mix(in srgb, var(--eye) 62%, transparent);
--cta-mint: color-mix(in srgb, var(--glow-c) 96%, transparent);
--cta-mint-2: color-mix(in srgb, var(--glow-c) 46%, transparent);
--cta-green: color-mix(in srgb, var(--green) 46%, transparent);
--cta-teal: color-mix(in srgb, var(--teal-2) 26%, transparent);
--cta-ry: 520px;
padding-top: calc(var(--section-y) + 8px);
padding-bottom: clamp(140px, 13vw, 196px);
background:
radial-gradient(24% calc(var(--cta-ry) * 0.5) at 50% 100%, var(--cta-warm) 0%, transparent 100%),
radial-gradient(62% var(--cta-ry) at 50% 100%, var(--cta-mint) 0%, var(--cta-mint-2) 46%, transparent 100%),
radial-gradient(40% calc(var(--cta-ry) * 1.05) at 0% 100%, var(--cta-green) 0%, transparent 100%),
radial-gradient(40% calc(var(--cta-ry) * 1.05) at 100% 100%, var(--cta-green) 0%, transparent 100%),
radial-gradient(20% calc(var(--cta-ry) * 0.55) at 0% 100%, var(--cta-teal) 0%, transparent 100%),
radial-gradient(20% calc(var(--cta-ry) * 0.55) at 100% 100%, var(--cta-teal) 0%, transparent 100%),
linear-gradient(180deg, var(--white) 0%, var(--paper) 220px);
background-repeat: no-repeat;
}
.s-cta .cta-inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.s-cta .cta-otto {
width: 110px;
margin-bottom: 22px;
}
.s-cta .cta-otto > .otto { width: 100%; }
.s-cta .cta-sub {
max-width: 520px;
margin-top: 22px;
text-wrap: balance;
}
.s-cta .cta-actions {
justify-content: center;
margin-top: 40px;
}
@media (max-width: 767px) {
.s-cta { --cta-ry: 340px; padding-bottom: 112px; }
.s-cta .cta-otto { width: 84px; margin-bottom: 18px; }
.s-cta .cta-sub { margin-top: 18px; }
.s-cta .cta-actions { margin-top: 32px; }
}
.s-footer {
--cta-warm: color-mix(in srgb, var(--eye) 62%, transparent);
--cta-mint: color-mix(in srgb, var(--glow-c) 96%, transparent);
--cta-mint-2: color-mix(in srgb, var(--glow-c) 46%, transparent);
--cta-green: color-mix(in srgb, var(--green) 46%, transparent);
--cta-teal: color-mix(in srgb, var(--teal-2) 26%, transparent);
--ft-ry: 820px;
--ft-edge: 24px;
position: relative;
padding: 0 var(--ft-edge) var(--ft-edge);
background:
radial-gradient(24% calc(var(--ft-ry) * 0.5) at 50% 0%, var(--cta-warm) 0%, transparent 100%),
radial-gradient(62% var(--ft-ry) at 50% 0%, var(--cta-mint) 0%, var(--cta-mint-2) 46%, transparent 100%),
radial-gradient(40% calc(var(--ft-ry) * 1.05) at 0% 0%, var(--cta-green) 0%, transparent 100%),
radial-gradient(40% calc(var(--ft-ry) * 1.05) at 100% 0%, var(--cta-green) 0%, transparent 100%),
radial-gradient(20% calc(var(--ft-ry) * 0.55) at 0% 0%, var(--cta-teal) 0%, transparent 100%),
radial-gradient(20% calc(var(--ft-ry) * 0.55) at 100% 0%, var(--cta-teal) 0%, transparent 100%),
radial-gradient(50% 200px at 50% 100%, var(--cta-mint-2) 0%, transparent 100%),
radial-gradient(32% 320px at 0% 100%, color-mix(in srgb, var(--green) 30%, transparent) 0%, transparent 100%),
radial-gradient(32% 320px at 100% 100%, color-mix(in srgb, var(--green) 30%, transparent) 0%, transparent 100%),
var(--paper);
background-repeat: no-repeat;
}
.s-footer .ft-panel {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 32px;
color: var(--on-dark);
background:
radial-gradient(80% 420px at 50% -60px, color-mix(in srgb, var(--green) 26%, transparent) 0%, transparent 100%),
linear-gradient(180deg, var(--deep-2) 0%, var(--deep) 58%);
background-repeat: no-repeat;
box-shadow: 0 18px 40px -30px rgba(4, 48, 42, 0.35);
}
.s-footer .ft-panel::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--noise);
opacity: var(--grain-a);
pointer-events: none;
}
.s-footer .ft-panel::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.s-footer .ft-inner { position: relative; padding-top: 80px; }
.s-footer .ft-top {
display: grid;
grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2fr);
gap: 48px 56px;
}
.s-footer .ft-logo { display: block; width: auto; height: 30px; }
.s-footer .ft-tagline {
max-width: 290px;
margin-top: 22px;
color: var(--on-dark-2);
font-size: 15px;
line-height: 1.55;
}
.s-footer .ft-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px 24px;
}
.s-footer .ft-heading {
margin-bottom: 18px;
color: var(--on-dark);
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
}
.s-footer .ft-links { display: grid; gap: 12px; margin: 0; padding: 0; }
.s-footer .ft-links li {
color: var(--on-dark-2);
font-size: 15px;
line-height: 1.4;
}
.s-footer .ft-links a {
color: var(--on-dark-2);
border-radius: 4px;
transition: color var(--dur-1) var(--ease-out);
}
.s-footer .ft-links a:hover,
.s-footer .ft-links a[aria-current="page"] { color: var(--on-dark); }
.s-footer .ft-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-top: 72px;
padding-top: 24px;
border-top: 1px solid var(--line-dark);
}
.s-footer .ft-bottom__start { display: flex; align-items: center; gap: 12px; }
.s-footer .ft-social {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
color: var(--on-dark-2);
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.s-footer .ft-social .icon { width: 17px; height: 17px; }
.s-footer .ft-social:hover { background: rgba(255, 255, 255, 0.12); color: var(--on-dark); }
.s-footer .ft-lang {
position: relative;
display: inline-flex;
align-items: center;
flex: none;
}
.s-footer .ft-lang__icon {
position: absolute;
left: 14px;
top: 50%;
width: 17px;
height: 17px;
margin-top: -8.5px;
color: var(--on-dark-2);
pointer-events: none;
transition: color var(--dur-1) var(--ease-out);
}
.s-footer .lang-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 220px;
max-width: 100%;
height: 36px;
margin: 0;
padding: 0 18px 0 41px;
border: 0;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.12);
color: var(--on-dark-2);
color-scheme: dark;
font: inherit;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: 36px;
letter-spacing: -0.005em;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.s-footer .lang-select::-ms-expand { display: none; }
.s-footer .lang-select:hover { background: rgba(255, 255, 255, 0.17); color: var(--on-dark); }
.s-footer .ft-lang:hover .ft-lang__icon,
.s-footer .ft-lang:focus-within .ft-lang__icon { color: var(--on-dark); }
.s-footer .lang-select:focus-visible { outline-offset: 2px; }
.s-footer .lang-select option { background-color: var(--deep); color: var(--on-dark); }
.s-footer .ft-copy { color: var(--on-dark-3); font-size: 13.5px; line-height: 1.4; }
.s-footer .ft-wordmark {
position: relative;
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin: 56px auto 0;
padding-inline: var(--gutter);
pointer-events: none;
user-select: none;
}
.s-footer .ft-wordmark img {
display: block;
width: 100%;
height: auto;
margin-bottom: -2.7%;
opacity: 0.075;
}
@media (max-width: 1023px) {
.s-footer .ft-inner { padding-top: 64px; }
.s-footer .ft-top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.s-footer .ft-bottom { margin-top: 56px; }
}
@media (max-width: 767px) {
.s-footer { --ft-edge: 16px; --ft-ry: 640px; }
.s-footer .ft-panel { border-radius: 28px; }
.s-footer .ft-inner { padding-top: 48px; }
.s-footer .ft-top { gap: 40px; }
.s-footer .ft-logo { height: 26px; }
.s-footer .ft-tagline { margin-top: 18px; font-size: 14.5px; }
.s-footer .ft-nav { display: flex; flex-wrap: wrap; gap: 36px 20px; }
.s-footer .ft-col { flex: 1 1 40%; }
.s-footer .ft-heading { margin-bottom: 14px; }
.s-footer .ft-links { gap: 11px; }
.s-footer .ft-bottom { margin-top: 44px; padding-top: 20px; }
.s-footer .ft-wordmark { margin-top: 40px; }
}
@media (max-width: 359px) {
.s-footer .ft-nav { gap: 32px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.s-footer .ft-links a, .s-footer .ft-social, .s-footer .lang-select, .s-footer .ft-lang__icon { transition: none; }
}
.sec-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.sec-phrase { display: block; }
.sec-hero {
--otto-w: 96px;
position: relative;
overflow: clip;
padding: 64px 0 96px;
background:
radial-gradient(46% 300px at 22% 0%, color-mix(in srgb, var(--glow-c) 70%, transparent) 0%, transparent 100%),
radial-gradient(28% 220px at 4% 0%, color-mix(in srgb, var(--eye) 60%, transparent) 0%, transparent 100%),
var(--paper);
background-repeat: no-repeat;
}
.sec-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
gap: 48px;
align-items: center;
}
.sec-hero__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.sec-hero__title {
margin-top: 22px;
font-size: clamp(44px, 4.5vw, 66px);
line-height: 1.04;
}
.sec-hero__lead {
max-width: 540px;
margin-top: 24px;
text-wrap: pretty;
}
.sec-hero__actions { margin-top: 36px; }
ul.sec-chips {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
width: 100%;
max-width: 600px;
margin-top: 56px;
padding-top: 28px;
border-top: 1px dashed var(--line-2);
}
.sec-chip {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.006em;
}
.sec-chip__icon {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
}
.sec-chip__icon svg { width: 15px; height: 15px; }
.sec-chip__icon--progress { background: #FBF1D9; color: #A9700E; box-shadow: inset 0 0 0 1px rgba(169, 112, 14, 0.18); }
.sec-chip__icon--eu { background: var(--mint); color: var(--teal-2); box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.26); }
.sec-hero__panel {
display: grid;
place-items: center;
min-height: 540px;
padding: 108px 48px 52px;
border-radius: var(--r-2xl);
}
.sec-acard-wrap {
position: relative;
width: 100%;
max-width: 452px;
}
.sec-hero__otto {
position: absolute;
z-index: 0;
right: 40px;
top: calc(var(--otto-w) * -0.80);
width: var(--otto-w);
pointer-events: none;
}
.sec-acard-frame { position: relative; z-index: 1; background: var(--glass-deep); }
.sec-acard {
position: relative;
padding: 18px 18px 18px;
border-radius: 20px;
background: var(--white);
color: var(--ink);
font-size: 14px;
line-height: 1.4;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.07), 0 1px 3px rgba(14, 38, 34, 0.05);
}
.sec-acard__head {
display: flex;
align-items: center;
gap: 12px;
padding: 0 2px 14px;
border-bottom: 1px solid var(--line-soft);
}
.sec-acard__avatar {
flex: none;
width: 38px;
height: 38px;
overflow: hidden;
border-radius: 10px;
background: var(--deep);
}
.sec-acard__avatar > svg { width: 100%; height: 100%; }
.sec-acard__title {
display: flex;
flex-direction: column;
min-width: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.012em;
}
.sec-acard__title > small {
margin-top: 2px;
color: var(--ink-mute);
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0;
}
.sec-acard__tag { margin-left: auto; }
ul.sec-acard__list { padding: 4px 0 10px; }
.sec-acard__row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 9px 2px;
}
.sec-acard__row + .sec-acard__row { border-top: 1px solid var(--line-soft); }
.sec-acard__logo { justify-self: center; width: 22px; height: 22px; }
.sec-acard__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sec-acard__name { font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-acard__scope {
display: -webkit-box;
overflow: hidden;
color: var(--ink-mute);
font-size: 12.5px;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.sec-acard__oauth {
padding: 3px 7px;
border-radius: 6px;
background: var(--mint);
color: var(--teal-2);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.3;
}
.sec-acard__revoke {
padding: 5px 11px;
border-radius: var(--r-pill);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink-2);
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
}
ul.sec-acard__rules {
display: grid;
gap: 8px;
padding: 12px 14px;
border-radius: 14px;
background: var(--paper);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.04);
}
.sec-acard__rules > li {
display: flex;
align-items: center;
gap: 10px;
color: var(--ink-2);
font-size: 13px;
}
.sec-acard__rules .icon { width: 16px; height: 16px; color: var(--ink-3); }
.sec-acard__rule { min-width: 0; }
.sec-acard__val {
margin-left: auto;
color: var(--ink);
font-weight: 600;
text-align: right;
}
.sec-acard__val--on { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-2); }
.sec-acard__val--on::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green-2);
box-shadow: 0 0 0 3px rgba(47, 191, 132, 0.16);
}
.sec-comp {
--comp-cols: minmax(190px, 1.05fr) minmax(150px, 0.7fr) minmax(0, 1.5fr) minmax(0, 1.3fr);
padding-top: 40px;
background: var(--paper);
}
.sec-comp__head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
align-items: end;
gap: 28px 64px;
margin-bottom: 56px;
}
.sec-comp__lede { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sec-comp__note {
color: var(--ink-2);
font-size: 17px;
line-height: 1.55;
letter-spacing: -0.008em;
}
.sec-comp__cols,
.sec-std {
display: grid;
grid-template-columns: var(--comp-cols);
column-gap: 32px;
}
.sec-comp__cols {
padding: 0 28px 14px;
color: var(--ink-mute);
font-size: 14px;
font-weight: 500;
}
.sec-comp__cols > span { display: inline-flex; align-items: center; gap: 8px; }
.sec-comp__cols .icon { width: 16px; height: 16px; color: var(--ink-3); }
.sec-comp__list { display: grid; gap: 10px; }
.sec-std {
align-items: center;
min-height: 96px;
padding: 22px 28px;
border-radius: 24px;
background: var(--white);
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.04), 0 1px 2px rgba(14, 38, 34, 0.03);
}
.sec-std__name {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.02em;
}
.sec-std__glyph {
display: grid;
place-items: center;
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--paper-2);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.06);
color: var(--teal-2);
}
.sec-std__glyph > svg { width: 21px; height: 21px; }
.sec-std__label { min-width: 0; }
.sec-std__label > small {
display: block;
margin-top: 3px;
color: var(--ink-mute);
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 400;
line-height: 1.35;
letter-spacing: 0;
}
.sec-std__data {
display: grid;
grid-column: 2 / -1;
grid-template-columns: subgrid;
align-items: center;
}
@supports not (grid-template-columns: subgrid) {
.sec-std__data { grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.5fr) minmax(0, 1.3fr); column-gap: 32px; }
}
.sec-std__cell { min-width: 0; }
.sec-std__cell > dd { color: var(--ink); font-size: 15px; line-height: 1.5; letter-spacing: -0.004em; }
@media (min-width: 900px) {
.sec-std__cell > dt {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
}
.sec-status {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 4px 13px 4px 10px;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
}
.sec-status > svg { flex: none; width: 15px; height: 15px; }
.sec-status--progress { background: #FBF1D9; color: #7A5206; box-shadow: inset 0 0 0 1px rgba(169, 112, 14, 0.24); }
.sec-status--progress > svg { color: #C08A1E; }
.sec-status--applies { background: var(--mint); color: #0B5A45; box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.38); }
.sec-status--applies > svg { color: var(--green); }
.sec-dd__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 48px;
max-width: 1080px;
margin: 0 auto;
}
@supports (grid-template-rows: subgrid) {
@media (min-width: 900px) {
.sec-dd__grid { grid-template-rows: repeat(6, auto); }
.sec-dd__col { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
.sec-dd__list { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}
}
.sec-dd__col { min-width: 0; }
.sec-dd__banner {
position: relative;
height: 92px;
margin-bottom: 52px;
border-radius: 30px;
}
.sec-dd__col--does .sec-dd__banner {
background:
radial-gradient(60% 140% at 50% 0%, rgba(244, 239, 176, 0.5) 0%, rgba(244, 239, 176, 0) 70%),
var(--grad-panel);
background-repeat: no-repeat;
}
.sec-dd__col--not .sec-dd__banner {
background:
radial-gradient(60% 140% at 50% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%),
linear-gradient(160deg, #D5DAD6 0%, #B6BEBA 55%, #9DA6A2 100%);
background-repeat: no-repeat;
}
.sec-dd__badge {
position: absolute;
left: 50%;
bottom: -38px;
width: 84px;
height: 84px;
padding: 9px;
border-radius: 26px;
background: var(--white);
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.05), 0 10px 26px -12px rgba(4, 48, 42, 0.32);
translate: -50% 0;
}
.sec-dd__badge > svg {
width: 100%;
height: 100%;
border-radius: 18px;
background: var(--deep);
}
.sec-dd__col--not .sec-dd__badge > svg { filter: grayscale(1); opacity: 0.72; }
.sec-dd__label {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.008em;
}
.sec-dd__label::before,
.sec-dd__label::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.sec-dd__label > span {
flex: none;
max-width: 80%;
padding: 5px 16px;
border-radius: var(--r-pill);
text-align: center;
}
.sec-dd__col--does .sec-dd__label > span { background: var(--mint); color: var(--teal-2); }
.sec-dd__col--not .sec-dd__label > span { background: #EEF0EC; color: var(--ink-2); }
.sec-dd__list { display: grid; gap: 12px; }
.sec-dd__item {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: start;
gap: 16px;
padding: 22px 26px 24px 22px;
border-radius: 22px;
background: var(--paper);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.sec-dd__mark {
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin-top: 1px;
border-radius: 50%;
}
.sec-dd__mark > svg { width: 15px; height: 15px; }
.sec-dd__col--does .sec-dd__mark { background: var(--grad); color: var(--white); }
.sec-dd__col--not .sec-dd__mark { background: #E3E6E2; color: #5E6A66; }
.sec-dd__title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.02em;
}
.sec-dd__text > p {
margin-top: 6px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.55;
}
.sec-ai { background: var(--paper); }
.sec-ai__panel {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 80px 72px 0;
border-radius: var(--r-2xl);
color: var(--on-dark);
background:
radial-gradient(70% 55% at 88% -8%, rgba(76, 159, 124, 0.5) 0%, rgba(76, 159, 124, 0) 65%),
radial-gradient(60% 50% at 0% 105%, rgba(14, 99, 98, 0.55) 0%, rgba(14, 99, 98, 0) 70%),
var(--grad-deep);
background-repeat: no-repeat;
}
.sec-ai__panel::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--noise);
opacity: var(--grain-a);
pointer-events: none;
}
.sec-ai__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: 56px;
}
.sec-ai__intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
min-width: 0;
}
.sec-ai__title {
color: var(--on-dark);
font-size: clamp(36px, 3.4vw, 48px);
line-height: 1.06;
}
.sec-ai__tabbar { width: 100%; margin-top: 18px; }
.sec-ai__tabs { display: flex; flex-direction: column; gap: 6px; }
.sec-tab {
display: flex;
align-items: flex-start;
gap: 14px;
width: 100%;
padding: 15px 22px;
border-radius: 26px;
color: var(--on-dark-3);
text-align: left;
transition:
background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.sec-tab__icon { width: 20px; height: 20px; margin-top: 3px; }
.sec-tab__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sec-tab__label { font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
.sec-tab__sub { display: none; color: var(--on-dark-2); font-size: 14px; line-height: 1.4; }
.sec-tab:hover { color: var(--on-dark-2); background: rgba(255, 255, 255, 0.04); }
.sec-tab[aria-selected="true"] {
color: var(--on-dark);
background: rgba(255, 255, 255, 0.10);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 14px 32px -20px rgba(0, 0, 0, 0.55);
}
.sec-tab[aria-selected="true"] .sec-tab__sub { display: block; }
.sec-tab:focus-visible { outline-offset: 2px; }
.sec-ai__panes { display: grid; gap: 20px; min-width: 0; }
.sec-ai__pane {
display: grid;
grid-template-rows: auto 1fr;
gap: 28px;
min-width: 0;
padding: 36px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.07);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.sec-ai.is-tabs .sec-ai__pane {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.sec-ai.is-tabs .sec-ai__pane.is-active {
opacity: 1;
visibility: visible;
transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear 0s;
}
.sec-ai.sec-static .sec-ai__pane { transition: none; }
.sec-ai__pane:focus-visible { outline-offset: 4px; }
.sec-ai__copy { max-width: 540px; margin: 0 auto; text-align: center; }
.sec-ai__pane-title {
color: var(--on-dark);
font-family: var(--font-display);
font-size: 23px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
}
.sec-ai__copy > p {
margin-top: 10px;
color: var(--on-dark-2);
font-size: 16px;
line-height: 1.6;
}
.sec-vis {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 0;
}
.sec-vis__note {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--on-dark-2);
font-size: 13.5px;
line-height: 1.4;
text-align: center;
}
.sec-vis__note .icon { width: 16px; height: 16px; color: var(--eye); }
.sec-ctx {
width: 100%;
max-width: 480px;
padding: 16px 20px 6px;
border-radius: 20px;
background: var(--white);
color: var(--ink);
box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.55);
}
.sec-ctx__head {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line-soft);
color: var(--ink-mute);
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.02em;
}
.sec-ctx__dot {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-2);
box-shadow: 0 0 0 3px rgba(47, 191, 132, 0.16);
}
.sec-ctx__row {
display: grid;
grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
align-items: center;
gap: 14px;
min-height: 46px;
padding: 9px 0;
font-size: 14px;
line-height: 1.4;
}
.sec-ctx__row + .sec-ctx__row { border-top: 1px solid var(--line-soft); }
.sec-ctx__row > dt { color: var(--ink-2); font-family: var(--font-mono); font-size: 12.5px; }
.sec-ctx__row > dd { min-width: 0; color: var(--ink); font-weight: 500; }
.sec-redact {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border-radius: 7px;
background: repeating-linear-gradient(135deg, #0E2622 0 6px, #18352F 6px 12px);
color: var(--white);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.02em;
white-space: nowrap;
}
.sec-redact > svg { width: 13px; height: 13px; color: var(--eye); }
.sec-vis__frame { width: 100%; max-width: 480px; }
.sec-vis__body { padding-block: 16px 18px; }
.sec-vis__q { max-width: none; }
.sec-vis__q .attach-head { flex-wrap: wrap; gap: 2px 10px; }
.sec-vis__q .attach-head > small { min-width: 0; white-space: normal; }
.sec-vis__qtext { margin: 0 2px; font-size: 13.5px; line-height: 1.45; }
.sec-policy {
width: 100%;
max-width: 420px;
padding: 4px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
font-size: 14px;
line-height: 1.4;
}
.sec-policy__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.sec-policy__row + .sec-policy__row { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.sec-policy__row > dt { flex: none; color: var(--on-dark-3); }
.sec-policy__row > dd { min-width: 0; color: var(--on-dark); text-align: right; }
.sec-policy__wait { display: inline-flex; align-items: center; gap: 8px; }
.sec-policy__wait::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: #E8BE62;
box-shadow: 0 0 0 3px rgba(232, 190, 98, 0.2);
}
.sec-use {
width: 100%;
max-width: 460px;
padding: 16px 20px 6px;
border-radius: 20px;
background: var(--white);
color: var(--ink);
box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.55);
}
.sec-use__head {
padding-bottom: 12px;
border-bottom: 1px solid var(--line-soft);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
}
.sec-use__row {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 12px 0;
}
.sec-use__row + .sec-use__row { border-top: 1px solid var(--line-soft); }
.sec-use__mark {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--grad);
color: var(--white);
}
.sec-use__mark > svg { width: 14px; height: 14px; }
.sec-use__row--no .sec-use__mark { background: #E3E6E2; color: #5E6A66; }
.sec-use__text { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.sec-use__text > small {
display: block;
margin-top: 2px;
color: var(--ink-mute);
font-size: 13px;
font-weight: 400;
}
.sec-iso {
display: grid;
grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
width: 100%;
max-width: 500px;
}
.sec-iso__ws {
min-width: 0;
padding: 16px;
border-radius: 18px;
background: var(--white);
color: var(--ink);
box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.55);
}
.sec-iso__ws--other {
background: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
color: var(--on-dark-2);
}
.sec-iso__head {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
}
.sec-iso__avatar {
flex: none;
width: 28px;
height: 28px;
overflow: hidden;
border-radius: 8px;
background: var(--deep);
}
.sec-iso__avatar > svg { width: 100%; height: 100%; }
.sec-iso__avatar--other { display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); }
.sec-iso__avatar--other > svg { width: 16px; height: 16px; color: var(--on-dark-2); }
.sec-iso__list { display: grid; gap: 8px; margin-top: 14px; }
.sec-iso__list > li {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
height: 38px;
padding: 0 12px;
border-radius: 10px;
background: var(--paper);
font-size: 13.5px;
font-weight: 500;
}
.sec-iso__list .icon { width: 16px; height: 16px; color: var(--teal-2); }
.sec-iso__ws--other .sec-iso__list > li { background: rgba(255, 255, 255, 0.07); }
.sec-iso__skel {
display: block;
width: var(--w, 60%);
height: 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.22);
}
.sec-iso__wall { position: relative; display: grid; place-items: center; }
.sec-iso__wall::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: calc(50% - 1px);
width: 2px;
background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0 6px, transparent 6px 12px);
}
.sec-iso__lock {
position: relative;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--eye);
color: var(--deep);
box-shadow: 0 0 0 6px rgba(244, 239, 176, 0.14);
}
.sec-iso__lock > svg { width: 17px; height: 17px; }
.sec-ai__inject {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: start;
gap: 20px;
margin-top: 56px;
padding: 36px 0 60px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sec-ai__inject-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.10);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
color: #9FE3C0;
}
.sec-ai__inject-icon > svg { width: 24px; height: 24px; }
.sec-ai__inject-title {
color: var(--on-dark);
font-family: var(--font-display);
font-size: 23px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
}
.sec-ai__inject p { max-width: 700px; margin-top: 8px; color: var(--on-dark-2); font-size: 16px; line-height: 1.6; }
.sec-access__panel {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 72px 64px 64px;
border-radius: var(--r-2xl);
background:
radial-gradient(70% 60% at 86% 0%, rgba(244, 239, 176, 0.55) 0%, rgba(244, 239, 176, 0) 60%),
var(--grad-panel-soft);
background-repeat: no-repeat;
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.sec-access__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
align-items: center;
gap: 48px;
}
.sec-access__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.sec-access__copy .lead { max-width: 540px; }
.sec-access__hub { position: relative; height: 330px; }
.sec-tile {
position: absolute;
left: var(--x);
top: var(--y);
display: grid;
place-items: center;
width: 76px;
height: 76px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.74);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.9),
0 1px 2px rgba(14, 38, 34, 0.05),
0 16px 32px -16px rgba(4, 48, 42, 0.32);
translate: -50% -50%;
}
.sec-tile > svg { width: 34px; height: 34px; }
.sec-tile--sm { width: 60px; height: 60px; border-radius: 19px; }
.sec-tile--sm > svg { width: 26px; height: 26px; }
.sec-tile--lock { color: var(--teal-2); }
.sec-tile--otto {
width: 116px;
height: 116px;
overflow: hidden;
border-radius: 34px;
background: var(--deep);
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5), 0 24px 48px -20px rgba(4, 48, 42, 0.5);
}
.sec-tile--otto > svg { width: 100%; height: 100%; }
.sec-access__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 56px;
}
.sec-acc {
min-width: 0;
padding: 28px;
border-radius: 26px;
background: var(--white);
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.05), 0 12px 30px -20px rgba(4, 48, 42, 0.28);
}
.sec-acc__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--grad);
color: var(--white);
}
.sec-acc__icon > svg { width: 22px; height: 22px; }
.sec-acc__title {
margin-top: 20px;
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.025em;
}
html:is(:lang(de), :lang(nl), :lang(fi), :lang(hu), :lang(sv), :lang(da), :lang(nb), :lang(et), :lang(el)) .sec-acc__title {
-webkit-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-limit-before: 5;
-webkit-hyphenate-limit-after: 5;
hyphenate-limit-chars: 12 5 5;
}
.sec-acc > p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.sec-vdp { background: var(--paper); }
.sec-vdp__panel { padding: 88px 64px 80px; border-radius: var(--r-2xl); }
.sec-vdp__lock {
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
width: 600px;
height: 600px;
color: var(--white);
opacity: 0.06;
translate: -50% -46%;
pointer-events: none;
}
.sec-vdp__head {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 780px;
margin: 0 auto;
text-align: center;
}
.sec-vdp__head .h2 { color: var(--on-dark); }
.sec-vdp__head .lead { max-width: 680px; color: var(--on-dark-2); text-wrap: pretty; }
.sec-vdp__contact {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 12px;
}
.sec-vdp__mail {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 100%;
min-height: 56px;
padding: 8px 20px;
border-radius: var(--r-pill);
background: rgba(4, 48, 42, 0.32);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.sec-vdp__mail-icon { flex: none; width: 20px; height: 20px; color: var(--on-dark-2); }
.sec-vdp__address {
min-width: 0;
color: var(--on-dark);
font-family: var(--font-mono);
font-size: 16px;
letter-spacing: 0.01em;
overflow-wrap: anywhere;
-webkit-user-select: all;
user-select: all;
}
.sec-vdp__address::selection { background: var(--eye); color: var(--deep); }
.sec-vdp__copy {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
height: 40px;
margin-right: -12px;
padding: 0 14px;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.14);
color: var(--on-dark);
font-size: 14px;
font-weight: 500;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.sec-vdp__copy > svg { width: 16px; height: 16px; }
.sec-vdp__copy:hover { background: rgba(255, 255, 255, 0.22); }
.sec-vdp__copy.is-done { background: var(--eye); color: var(--deep); }
.sec-vdp__send { --btn-h: 56px; }
.sec-vdp__grid {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px 56px;
max-width: 920px;
margin: 64px auto 0;
padding-top: 48px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.sec-vdp__block { min-width: 0; }
.sec-vdp__block:first-child { grid-column: 1 / -1; }
.sec-vdp__h {
color: var(--on-dark);
font-family: var(--font-body);
font-size: 17px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
}
.sec-vdp__block > p,
.sec-vdp__list {
margin-top: 8px;
color: var(--on-dark-2);
font-size: 15.5px;
line-height: 1.6;
}
.sec-vdp__list { display: grid; gap: 6px; }
.sec-vdp__list > li { position: relative; padding-left: 28px; }
.sec-vdp__list > li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 19px;
height: 19px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
}
.sec-vdp__list > li::after {
content: "";
position: absolute;
left: 4.5px;
top: 7.5px;
width: 10px;
height: 10px;
background: var(--eye);
-webkit-mask: var(--check) center / contain no-repeat;
mask: var(--check) center / contain no-repeat;
}
@media (max-width: 1279px) {
.sec-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.sec-hero__panel { padding: 104px 28px 36px; }
}
@media (max-width: 1199px) {
.sec-comp__head { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px 48px; }
.sec-ai__panel { padding: 64px 48px 0; }
.sec-ai__grid { gap: 40px; }
.sec-ai__pane { padding: 30px 26px; }
.sec-access__panel { padding: 64px 48px 48px; }
.sec-vdp__panel { padding: 80px 48px 72px; }
}
@media (max-width: 1023px) {
.sec-hero { padding: 48px 0 80px; }
.sec-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.sec-hero__title { font-size: clamp(42px, 8vw, 72px); }
.sec-hero__panel { min-height: 0; padding: 104px 40px 44px; }
.sec-ai__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sec-ai__tabbar {
align-self: stretch;
width: auto;
margin: 10px -48px 0;
padding: 4px 48px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.sec-ai__tabbar::-webkit-scrollbar { display: none; }
.sec-ai__tabs { flex-direction: row; width: max-content; gap: 6px; }
.sec-tab { align-items: center; width: auto; padding: 10px 18px 10px 14px; border-radius: var(--r-pill); white-space: nowrap; }
.sec-tab__icon { width: 18px; height: 18px; margin-top: 0; }
.sec-tab__label { font-size: 15.5px; }
.sec-tab[aria-selected="true"] .sec-tab__sub { display: none; }
.sec-tab:not([aria-selected="true"]) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
.sec-access__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sec-access__hub { width: 100%; max-width: 520px; height: 300px; margin: 0 auto; }
}
@media (max-width: 899px) {
.sec-comp__head { grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 36px; }
.sec-comp__cols { display: none; }
.sec-std {
grid-template-columns: minmax(0, 1fr);
row-gap: 18px;
padding: 22px;
}
.sec-std__data {
grid-column: auto;
grid-template-columns: minmax(0, 1fr);
row-gap: 14px;
padding-top: 16px;
border-top: 1px solid var(--line-soft);
}
.sec-std__cell > dt {
margin-bottom: 4px;
color: var(--ink-mute);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
}
.sec-std__cell--status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sec-std__cell--status > dt { margin-bottom: 0; }
.sec-dd__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 620px; }
.sec-access__cards { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.sec-vdp__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
.sec-hero { padding: 36px 0 64px; }
.sec-hero__lead { margin-top: 20px; }
.sec-hero__actions { margin-top: 28px; }
ul.sec-chips { flex-direction: column; gap: 10px; margin-top: 40px; padding-top: 24px; }
.sec-hero__panel { padding: 92px 16px 20px; border-radius: var(--r-xl); }
.sec-hero { --otto-w: 80px; }
.sec-hero__otto { right: 24px; }
.sec-comp { padding-top: 24px; }
.sec-comp__note { font-size: 16px; }
.sec-std { border-radius: 20px; }
.sec-std__name { font-size: 19px; }
.sec-dd__banner { height: 76px; margin-bottom: 46px; border-radius: 24px; }
.sec-dd__badge { width: 72px; height: 72px; bottom: -32px; border-radius: 22px; padding: 8px; }
.sec-dd__badge > svg { border-radius: 15px; }
.sec-dd__item { gap: 14px; padding: 18px 18px 20px 16px; border-radius: 20px; }
.sec-dd__title { font-size: 18px; }
.sec-dd__text > p { font-size: 15px; }
.sec-ai__panel { padding: 48px 20px 0; border-radius: var(--r-xl); }
.sec-ai__tabbar { margin: 6px -20px 0; padding: 4px 20px; }
.sec-ai__pane { gap: 24px; padding: 24px 16px 20px; border-radius: 24px; }
.sec-vis { justify-content: flex-start; }
.sec-ai__pane-title { font-size: 21px; }
.sec-ai__copy > p { font-size: 15.5px; }
.sec-ai__inject { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; padding: 28px 0 40px; }
.sec-ai__inject-icon { width: 44px; height: 44px; }
.sec-ai__inject-title { font-size: 21px; }
.sec-ai__inject p { font-size: 15.5px; }
.sec-access__panel { padding: 48px 20px 20px; border-radius: var(--r-xl); }
.sec-access__hub { height: 250px; }
.sec-tile { width: 62px; height: 62px; border-radius: 20px; }
.sec-tile > svg { width: 28px; height: 28px; }
.sec-tile--sm { width: 50px; height: 50px; border-radius: 16px; }
.sec-tile--sm > svg { width: 22px; height: 22px; }
.sec-tile--otto { width: 92px; height: 92px; border-radius: 28px; }
.sec-tile--otto > svg { width: 100%; height: 100%; }
.sec-access__cards { margin-top: 36px; gap: 12px; }
.sec-acc { padding: 24px 22px; border-radius: 22px; }
.sec-acc__title { margin-top: 16px; font-size: 20px; }
.sec-vdp__panel { padding: 56px 20px 48px; border-radius: var(--r-xl); }
.sec-vdp__lock { width: 380px; height: 380px; }
.sec-vdp__contact { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
.sec-vdp__mail { justify-content: center; padding: 8px 16px; }
.sec-vdp__send { width: 100%; }
.sec-vdp__grid { margin-top: 44px; padding-top: 36px; }
.sec-vdp__block > p, .sec-vdp__list { font-size: 15px; }
}
@media (max-width: 479px) {
.sec-acard { padding: 14px 12px 12px; }
.sec-acard__name { white-space: normal; }
.sec-acard__row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; }
.sec-acard__oauth { display: none; }
ul.sec-acard__rules { padding: 10px 12px; }
.sec-acard__rules > li { flex-wrap: wrap; gap: 4px 10px; }
.sec-ctx__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sec-iso { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 340px; }
.sec-iso__wall { height: 44px; }
.sec-iso__wall::before {
top: calc(50% - 1px);
bottom: auto;
left: 10px;
right: 10px;
width: auto;
height: 2px;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 6px, transparent 6px 12px);
}
.sec-vdp__mail-icon { display: none; }
.sec-vdp__address { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
.sec-tab, .sec-vdp__copy { transition: none; }
.sec-ai.is-tabs .sec-ai__pane, .sec-ai.is-tabs .sec-ai__pane.is-active { transition: none; }
}
.s-faq .faq-a__inner > p + p { margin-top: 10px; }
.fx-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.fx-hero {
--otto-w: 96px;
position: relative;
overflow: clip;
padding: 32px 0 88px;
background:
radial-gradient(32% 480px at 8% 120px, rgba(244, 239, 176, 0.55) 0%, rgba(244, 239, 176, 0) 100%),
radial-gradient(38% 540px at 94% 40px, rgba(191, 230, 208, 0.85) 0%, rgba(191, 230, 208, 0) 100%),
radial-gradient(64% 520px at 50% 820px, rgba(191, 230, 208, 0.62) 0%, rgba(191, 230, 208, 0) 100%),
var(--paper);
background-repeat: no-repeat;
}
.fx-hero__head {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.fx-switch {
max-width: 100%;
margin-bottom: 44px;
}
ul.fx-switch__list {
display: flex;
align-items: center;
gap: 2px;
max-width: 100%;
padding: 4px;
overflow-x: auto;
border-radius: var(--r-pill);
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.04), 0 10px 26px -18px rgba(4, 48, 42, 0.25);
scrollbar-width: none;
}
.fx-switch__list::-webkit-scrollbar { display: none; }
.fx-switch__list > li { flex: none; }
.fx-switch__link {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 18px 0 15px;
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: 14.5px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.008em;
white-space: nowrap;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.fx-switch__link .icon { width: 17px; height: 17px; color: var(--ink-3); transition: color var(--dur-1) var(--ease-out); }
.fx-switch__link:hover { background: var(--hover); color: var(--ink); }
.fx-switch__link:hover .icon { color: var(--teal-2); }
.fx-switch__link:focus-visible { outline-offset: -2px; }
.fx-switch__link[aria-current="page"] {
background: var(--btn);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(11, 36, 32, 0.16);
}
.fx-switch__link[aria-current="page"] .icon { color: #9FE3C0; }
.fx-hero__title {
margin-top: 18px;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(42px, 4.8vw, 68px);
font-weight: 500;
line-height: 1.04;
letter-spacing: var(--ls-display);
text-wrap: balance;
}
.fx-phrase { display: block; }
.fx-hero__lead {
max-width: 660px;
margin-top: 24px;
text-wrap: balance;
}
.fx-hero__actions { justify-content: center; margin-top: 36px; }
.fx-hero__stage {
position: relative;
z-index: 1;
margin-top: 96px;
}
.fx-mock { position: relative; margin: 0; }
.fx-mock__otto {
position: absolute;
z-index: 0;
right: 64px;
top: calc(var(--otto-w) * -0.80);
width: var(--otto-w);
pointer-events: none;
}
.fx-mock__frame {
position: relative;
z-index: 1;
padding: 10px;
border-radius: 32px;
background: var(--glass-mint);
}
.fx-mock__chat {
--side-w: 300px;
--avatar: 40px;
border-radius: 22px;
}
.fx-mock__body { padding-top: 6px; padding-bottom: 30px; }
.fx-mock__chat .chat-side-group, .fx-mock__chat .chat-side-group .icon { color: #454245; }
.fx-mock__chat .chat-channel .chat-hash { font-weight: 400; }
.fx-mock__chat .chat-channel.is-active .chat-hash { font-weight: 700; }
.fx-mock__chat:not(.chat--teams) .msg { padding: 8px 0 10px; }
.fx-mock__chat:not(.chat--teams) .msg--cont { padding-top: 0; }
.fx-mock__chat:not(.chat--teams) .msg-meta { column-gap: 8px; }
.fx-mock__chat:not(.chat--teams) .msg-time { font-size: 13px; }
.fx-mock__chat .msg-body > .attach-card { margin-top: 12px; }
.fx-mock__chat .msg-body > .file { margin-top: 10px; }
.fx-mock__chat:not(.chat--teams) .msg-body > .chat-actions { margin-top: 14px; }
.fx-mock__chat:not(.chat--teams) .chat-actions > .slack-btn { min-width: 104px; }
.fx-mock__chat:not(.chat--teams) .msg-body > .reactions { margin-top: 10px; }
.fx-mock__chat .chat-actions > .slack-btn, .fx-ui .chat-actions > .slack-btn { cursor: default; }
.fx-mock__chat:not(.chat--teams) .chat-actions > .slack-btn:hover,
.fx-ui .chat-actions > .slack-btn:hover { background: #FFFFFF; box-shadow: none; }
.fx-mock__chat:not(.chat--teams) .chat-actions > .slack-btn--primary:hover,
.fx-ui .chat-actions > .slack-btn--primary:hover { background: var(--c-primary); border-color: var(--c-primary); }
.fx-mock__chat.chat--teams .chat-actions > .slack-btn:hover { background: #FFFFFF; }
.fx-mock__chat.chat--teams .chat-actions > .slack-btn--primary:hover { background: #5B5FC7; border-color: #5B5FC7; }
.fx-mock__chat .teams-row { cursor: default; }
html:not(.js) .fx-mock .chat-toggle { display: none; }
.fx-mock__chat.chat--teams { --avatar: 32px; }
.fx-mock__chat.chat--teams .fx-mock__body { padding-top: 22px; }
.fx-mock__chat.chat--teams .msg-body { padding: 9px 18px 14px; }
.fx-mock__chat.chat--teams .msg-body > .reactions { top: 9px; right: 16px; }
.fx-mock__chat.chat--teams .msg-body > .attach-card { margin-top: 12px; }
.fx-mock__chat.chat--teams .msg-body > .chat-actions { margin-top: 12px; }
.fx-mock [data-step].is-pending { opacity: 0; translate: 0 12px; }
.fx-mock [data-step].is-pending.is-in {
opacity: 1;
translate: none;
transition:
opacity var(--dur-reveal) var(--ease-out),
translate var(--dur-reveal) var(--ease-out);
}
.fx-hero .pr-tools { margin-top: 40px; }
.fx-att {
container: fx-att / inline-size;
max-width: 600px;
padding: 14px;
border-radius: 16px;
}
.fx-att--wide { max-width: 660px; }
.fx-att .attach-head {
flex-wrap: wrap;
row-gap: 2px;
margin: 1px 16px 11px;
font-size: 14px;
}
.fx-att .attach-head > small { font-size: 12.5px; }
.fx-att ul.attach-sheet, .fx-att .attach-sheet { padding: 0 16px; border-radius: 11px; }
.fx-att > .attach-sheet + .attach-sheet, .fx-att > .fx-cov + .attach-sheet { margin-top: 8px; }
.fx-att > .file {
max-width: none;
margin-top: 8px;
padding: 9px 14px 9px 9px;
border-radius: 11px;
background: #FFFFFF;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.05), 0 1px 2px rgba(14, 38, 34, 0.05);
}
.fx-att > .file .file-badge { width: 34px; height: 34px; }
.chat--teams .fx-att { border-radius: 8px; }
.chat--teams .fx-att .attach-sheet, .chat--teams .fx-att > .file { border-radius: 6px; }
.chat--teams .fx-att .attach-head { font-weight: 600; }
.fx-draft { max-width: 560px; padding: 12px 16px 13px; }
.fx-draft__label {
margin: 0 0 4px;
color: var(--c-ink-2);
font-size: 12.5px;
font-weight: 700;
line-height: 1.3;
}
.chat--teams .fx-draft__label { font-weight: 600; }
.fx-draft > .msg-text { font-size: calc(var(--chat-fs) - 1px); }
.fx-li {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 14px;
min-width: 0;
padding: 12px 0 13px;
}
.fx-li--nolead { grid-template-columns: minmax(0, 1fr) auto; }
.fx-li--top { align-items: start; }
.fx-li--noend { grid-template-columns: auto minmax(0, 1fr); }
.fx-li + .fx-li { border-top: 1px solid #EEF0EE; }
.fx-li__main, .fx-li__end { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-li__end { align-items: flex-end; text-align: right; }
.fx-li__t {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--c-ink, var(--ink));
font-size: 15px;
font-weight: 700;
line-height: 20px;
}
.fx-li__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-li__s {
min-width: 0;
color: var(--c-ink-2, var(--ink-2));
font-size: 13px;
line-height: 18px;
}
.fx-li__main > .fx-li__s { overflow-wrap: break-word; }
.fx-li__v {
color: var(--c-ink, var(--ink));
font-size: 15px;
font-weight: 700;
line-height: 20px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.fx-li__end > .fx-li__s { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chat--teams .fx-li__t, .chat--teams .fx-li__v { font-size: 14px; font-weight: 600; }
.chat--teams .fx-li__s { font-size: 12.5px; }
.fx-li__k { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--c-ink-2, var(--ink-2)); font-size: 12.5px; line-height: 18px; }
.fx-li__k b { color: var(--c-ink, var(--ink)); font-weight: 700; font-variant-numeric: tabular-nums; }
.chat--teams .fx-li__k b { font-weight: 600; }
.fx-tag {
display: inline-flex;
align-items: center;
flex: none;
height: 20px;
padding: 0 7px;
border-radius: 5px;
background: rgba(0, 122, 90, 0.10);
color: #007A5A;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.fx-tag--warn { background: rgba(224, 163, 37, 0.16); color: #855A08; }
.fx-tag--no { background: rgba(210, 72, 61, 0.11); color: #A8331F; }
.fx-tag--info { background: rgba(18, 100, 163, 0.10); color: #1264A3; }
.fx-tag--grey { background: rgba(29, 28, 29, 0.06); color: #616061; }
.chat--teams .fx-tag { border-radius: 4px; background: #F1FAF1; color: #0E700E; font-weight: 600; box-shadow: inset 0 0 0 1px #9FD89F; }
.chat--teams .fx-tag--warn { background: #FFF9F0; color: #8A4A00; box-shadow: inset 0 0 0 1px #F4C98B; }
.chat--teams .fx-tag--no { background: #FDF3F4; color: #B10E1C; box-shadow: inset 0 0 0 1px #EEACB2; }
.chat--teams .fx-tag--info { background: #EBF3FC; color: #115EA3; box-shadow: inset 0 0 0 1px #A9D3F2; }
.chat--teams .fx-tag--grey { background: #F5F5F5; color: #616161; box-shadow: inset 0 0 0 1px #E0E0E0; }
.fx-ftype {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 6px;
background: #616061;
color: #FFFFFF;
font-family: var(--c-font, var(--font-body));
font-size: 7.5px;
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1;
}
.fx-ftype--pdf { background: #D2483D; }
.fx-ftype--xlsx { background: #1E7145; }
.fx-ftype--docx { background: #2B579A; }
.fx-ftype--lg { width: 36px; height: 36px; border-radius: 9px; font-size: 9px; }
.chat--teams .fx-ftype { border-radius: 4px; font-weight: 700; }
.fx-face {
position: relative;
display: block;
flex: none;
width: 24px;
height: 24px;
overflow: hidden;
border-radius: 6px;
background: #E9ECEA;
}
.fx-face > img, .fx-face > svg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
}
.fx-face > img { transform: scale(1.45); transform-origin: 50% 36%; }
.fx-face--otto { background: var(--deep); }
.chat--teams .fx-face { border-radius: 50%; }
.chat--teams .fx-face > img { transform: scale(1.8); transform-origin: 50% 33%; }
.fx-letter {
display: grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border-radius: 8px;
background: #ECEFEB;
color: #4B5D58;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.fx-letter--you { background: var(--mint); color: var(--teal-2); }
.fx-cov { padding: 12px 16px 13px; }
.fx-cov__label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 8px;
color: var(--c-ink, var(--ink));
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.fx-cov__label > b { font-size: 15px; font-variant-numeric: tabular-nums; }
.chat--teams .fx-cov__label { font-weight: 600; }
.fx-bar {
display: flex;
gap: 2px;
height: 8px;
overflow: hidden;
border-radius: 4px;
background: #EDF0EC;
}
.fx-bar > i { display: block; flex: 0 1 var(--w); min-width: 0; }
.fx-bar > .is-ok { background: #2E9A6C; }
.fx-bar > .is-warn { background: #E0A325; }
.fx-bar > .is-no { background: #D9D2CB; }
.fx-legend {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
margin: 9px 0 0;
padding: 0;
color: var(--c-ink-2, var(--ink-2));
font-size: 12.5px;
line-height: 1.3;
list-style: none;
}
.fx-legend > li { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.fx-legend > li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #2E9A6C; }
.fx-legend > .is-warn::before { background: #E0A325; }
.fx-legend > .is-no::before { background: #D9D2CB; }
.fx-legend > .is-risk::before { background: #D2483D; }
.fx-legend b { color: var(--c-ink, var(--ink)); font-weight: 600; }
.fx-legend--ui { margin: 0; font-size: 13px; }
.fx-range { position: relative; padding: 12px 18px 11px; }
.fx-range__scale { position: relative; height: 18px; }
.fx-range__lbl {
position: absolute;
top: 0;
left: var(--x);
color: var(--c-ink-3, var(--ink-3));
font-size: 12.5px;
line-height: 18px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
transform: translateX(-50%);
}
.fx-range__lbl > b { color: var(--c-ink, var(--ink)); font-weight: 700; }
.chat--teams .fx-range__lbl > b { font-weight: 600; }
.fx-range__lbl--mid, .fx-range__lbl--ours { color: var(--c-ink-2, var(--ink-2)); }
.fx-range__lbl--min { transform: translateX(-30%); }
.fx-range__lbl--max { transform: translateX(-70%); }
.fx-range__lbl--ours { transform: translateX(-62%); }
.fx-range__strip { position: relative; height: 34px; margin: 2px 0; }
.fx-range__strip > i { position: absolute; top: 50%; display: block; }
.fx-range__band {
left: var(--a);
right: calc(100% - var(--b));
height: 6px;
margin-top: -3px;
border-radius: 3px;
background: #DCEEE3;
}
.fx-range__median {
left: var(--x);
width: 2px;
height: 34px;
margin: -17px 0 0 -1px;
border-radius: 1px;
background: var(--c-ink, var(--ink));
}
.fx-range__dot {
left: var(--x);
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: #2E9A6C;
box-shadow: 0 0 0 2px #FFFFFF;
}
.fx-range__ours {
left: var(--x);
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 3px solid var(--c-ink, var(--ink));
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 0 2px #FFFFFF;
}
.fx-nb { white-space: nowrap; }
.fx-ui .fx-range--ui { padding: 20px 22px 14px; }
.fx-ui .fx-range--ui + ul.fx-stats { padding-top: 4px; }
@container fx-att (max-width: 420px) {
.fx-att .attach-sheet { padding: 0 11px; }
.fx-att .attach-head { margin-inline: 11px; }
.fx-att .attach-head > small { white-space: normal; }
.fx-att > .file .file-name { white-space: normal; overflow-wrap: anywhere; }
.fx-li { column-gap: 10px; padding: 10px 0 11px; }
.fx-li__t, .fx-li__v { font-size: 14px; }
.fx-li--wrap { grid-template-columns: auto minmax(0, 1fr); }
.fx-li--wrap.fx-li--nolead { grid-template-columns: minmax(0, 1fr); }
.fx-li--wrap > .fx-li__end { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; }
.fx-li--wrap:not(.fx-li--nolead) > .fx-li__end { grid-column: 2; }
.fx-li--wrap .fx-li__name { white-space: normal; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.fx-li__main > .fx-li__s { white-space: normal; }
.fx-li--wrap > .fx-li__end > .fx-li__v { font-size: 13px; line-height: 18px; }
.fx-cov { padding: 10px 12px 11px; }
.fx-range { padding: 11px 12px 10px; }
.fx-range__lbl { font-size: 12px; }
}
@container fx-att (max-width: 300px) {
.fx-range__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 1.5px #FFFFFF; }
.fx-range__ours { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2.5px; }
}
.fx-caps {
position: relative;
padding-block: var(--section-y);
background: var(--white);
}
.fx-cap {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
align-items: center;
gap: 80px;
}
.fx-cap + .fx-cap { margin-top: 136px; }
.fx-cap--flip { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.fx-cap--flip > .fx-cap__text { order: 2; }
.fx-cap__text {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.fx-cap__title {
margin-top: 18px;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(34px, 3.7vw, 54px);
font-weight: 500;
line-height: 1.06;
letter-spacing: var(--ls-display);
text-wrap: balance;
}
.fx-cap__lead { max-width: 520px; margin-top: 20px; }
.fx-cap__list { max-width: 520px; margin-top: 30px; }
.fx-cap__list > li { color: var(--ink); font-size: 16px; }
.fx-cap__list .link { font-weight: 500; }
.fx-cap__vis {
display: grid;
place-items: center;
min-width: 0;
min-height: 540px;
padding: 60px 52px;
border-radius: var(--r-2xl);
}
.fx-frame {
position: relative;
z-index: 1;
width: min(100%, 500px);
padding: 8px;
border-radius: 27px;
background: var(--glass-deep);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.6),
0 2px 6px rgba(4, 48, 42, 0.10),
0 28px 56px -24px rgba(4, 30, 26, 0.55);
}
.panel-grad--soft .fx-frame {
background: var(--glass);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(14, 38, 34, 0.04),
0 2px 6px rgba(4, 48, 42, 0.05),
0 28px 60px -28px rgba(4, 48, 42, 0.32);
}
.fx-frame--wide { width: min(100%, 600px); }
.fx-ui {
--c-ink: var(--ink);
--c-ink-2: var(--ink-2);
--c-ink-3: var(--ink-3);
--c-line: var(--line);
--c-font: var(--font-body);
position: relative;
overflow: hidden;
border-radius: 20px;
background: #FFFFFF;
color: var(--ink);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
text-align: left;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.07), 0 1px 3px rgba(14, 38, 34, 0.05);
}
.fx-ui__head {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--line-soft);
}
.fx-ui__ico {
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 10px;
background: var(--mint);
color: var(--teal-2);
}
.fx-ui__ico > .icon { width: 18px; height: 18px; }
.fx-ui__ico > svg:not(.icon) { width: 100%; height: 100%; }
.fx-ui__ico--otto { background: var(--deep); }
.fx-ui__ico--sm { width: 32px; height: 32px; border-radius: 9px; }
.fx-ui__ico--sm > .icon { width: 16px; height: 16px; }
.fx-ui__ico--grey { background: #EEF0EC; color: var(--ink-3); }
.fx-ui__ico--add { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-mute); }
.fx-ui__ico--eu { background: #003399; color: #FFCC00; }
.fx-ui__ht {
display: block;
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: var(--ink);
font-size: 15px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.012em;
}
.fx-ui__ht > small {
display: block;
margin-top: 2px;
overflow: hidden;
color: var(--ink-mute);
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.fx-ui__aside { flex: none; margin-left: auto; color: var(--ink-mute); font-size: 12.5px; white-space: nowrap; }
.fx-ui__body { padding: 2px 18px; }
.fx-ui__sub {
margin: 0;
padding: 12px 18px 2px;
color: var(--ink-mute);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.fx-ui__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
padding: 12px 18px 13px;
border-top: 1px solid var(--line-soft);
background: #F8F9F6;
color: var(--ink-2);
font-size: 13px;
line-height: 1.35;
}
.fx-ui__foot b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-ui__foot-note { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fx-ui__foot-note .icon { width: 15px; height: 15px; color: var(--teal-2); }
.fx-ui__foot-note .fx-face { width: 22px; height: 22px; border-radius: 6px; }
.fx-ui .fx-li { padding: 11px 0 12px; }
.fx-ui .fx-li + .fx-li, .fx-ui .fx-why + .fx-li { border-top: 1px solid var(--line-soft); }
.fx-ui .fx-cov--ui { padding: 14px 18px 15px; border-bottom: 1px solid var(--line-soft); }
.fx-ui .fx-li__t, .fx-ui .fx-li__v { font-size: 14px; font-weight: 600; letter-spacing: -0.006em; }
.fx-ui .fx-li__s { font-size: 12.5px; color: var(--ink-mute); }
.fx-ui .fx-li__k { font-size: 12px; color: var(--ink-mute); }
.fx-ui .fx-li__k b { font-weight: 600; }
.fx-ui .fx-tag { font-weight: 600; border-radius: 6px; }
.fx-ui .fx-ftype { font-family: var(--font-body); font-weight: 700; font-size: 7.5px; }
.fx-ui__btns { display: flex; gap: 6px; }
.fx-ui__btn {
display: inline-block;
height: 30px;
padding: 0 12px;
line-height: 30px;
border-radius: var(--r-pill);
background: #FFFFFF;
box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--ink);
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
}
.fx-ui__btn--dark { background: var(--btn); box-shadow: none; color: #FFFFFF; }
.fx-ui__btn--muted { background: #ECEFEA; box-shadow: none; color: var(--ink-mute); }
.fx-ui__btn .icon { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.fx-ring {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
}
.fx-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fx-ring circle { fill: none; stroke-width: 4; }
.fx-ring__track { stroke: #EDF0EC; }
.fx-ring__fill { stroke: #2E9A6C; stroke-linecap: round; }
.fx-ring--mid .fx-ring__fill { stroke: #E0A325; }
.fx-ring--low .fx-ring__fill { stroke: #B9C3BE; }
.fx-ring > b {
position: relative;
color: var(--ink);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
ul.fx-why {
display: grid;
gap: 6px;
margin: -2px 0 0;
padding: 0 0 13px 58px;
list-style: none;
}
.fx-why > li {
display: flex;
align-items: flex-start;
gap: 8px;
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.4;
}
.fx-why .attach-status { width: 14px; height: 14px; margin-top: 1px; }
.fx-why .attach-status:empty::after { width: 9px; height: 9px; }
.fx-why b { color: var(--ink); font-weight: 600; }
.fx-why code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.fx-fields { display: grid; gap: 14px; padding: 16px 18px 18px; }
.fx-field { display: grid; gap: 7px; min-width: 0; }
.fx-field__label { margin: 0; color: var(--ink-mute); font-size: 12px; font-weight: 500; line-height: 1.2; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fx-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border-radius: 8px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink);
font-size: 12.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.fx-chip > code { color: var(--teal-2); font-family: var(--font-mono); font-size: 11.5px; }
.fx-chip > .icon { width: 14px; height: 14px; }
.fx-chip--no { background: #FCF1EF; box-shadow: inset 0 0 0 1px #F2D6D1; color: #A8331F; }
.fx-chip--no::before { content: "-"; font-weight: 600; }
.fx-chip--add { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-mute); }
.fx-chip--eu > .icon { padding: 2px; border-radius: 50%; background: #003399; color: #FFCC00; width: 16px; height: 16px; }
.fx-deliver { display: grid; gap: 6px; }
.fx-deliver > p {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--ink);
font-size: 13px;
line-height: 1.35;
}
.fx-deliver .icon { width: 16px; height: 16px; }
ul.fx-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 14px 18px 4px;
margin: 0;
list-style: none;
}
.fx-stat {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
padding: 10px 12px 11px;
border-radius: 12px;
background: var(--paper);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.04);
}
.fx-stat > b { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.fx-stat > span { color: var(--ink-mute); font-size: 11.5px; line-height: 1.3; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.fx-span {
position: relative;
display: block;
width: 120px;
height: 6px;
border-radius: 3px;
background: #EDF0EC;
}
.fx-span > i {
position: absolute;
top: 0;
bottom: 0;
left: var(--a);
right: calc(100% - var(--b));
border-radius: 3px;
background: #2E9A6C;
}
.fx-span > i.is-you { background: var(--btn); }
.fx-docbar {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--line-soft);
background: #F8F9F6;
}
.fx-docbar__name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fx-page { padding: 22px 26px 24px; }
.fx-page__h1 {
margin: 0 0 14px;
color: var(--ink);
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.2;
}
.fx-page__h2 {
margin: 16px 0 8px;
color: var(--ink);
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
}
.fx-page__line { display: block; height: 7px; margin-top: 7px; border-radius: 4px; background: #EDF0EB; width: var(--w, 100%); }
.fx-page__p {
margin: 0;
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.65;
}
.fx-fill {
margin-inline: -1px;
padding: 1px 3px;
border-radius: 4px;
background: #E3F4EA;
color: var(--ink);
font-weight: 500;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.fx-src {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
padding: 3px 8px 3px 4px;
border-radius: var(--r-pill);
background: #FFFFFF;
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink-mute);
font-size: 11.5px;
line-height: 1.2;
white-space: nowrap;
}
.fx-src > .fx-face { width: 16px; height: 16px; border-radius: 50%; }
ul.fx-page__checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fx-page__checks > li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.fx-page__checks .attach-status { width: 14px; height: 14px; }
.fx-page__checks .attach-status:empty::after { width: 9px; height: 9px; }
.fx-sheet {
display: grid;
grid-template-columns: var(--cols);
font-size: 12.5px;
line-height: 1.35;
}
.fx-sheet > span {
display: flex;
align-items: center;
min-width: 0;
min-height: 40px;
padding: 6px 10px;
border-bottom: 1px solid var(--line-soft);
color: var(--ink);
}
.fx-sheet > span:nth-child(n) { overflow: hidden; }
.fx-sheet > .fx-sheet__h {
min-height: 32px;
background: #F8F9F6;
color: var(--ink-mute);
font-size: 11.5px;
font-weight: 600;
}
.fx-sheet > .fx-sheet__n { justify-content: center; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.fx-sheet > .fx-sheet__num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.fx-sheet > .fx-sheet__mute { color: var(--ink-mute); }
.fx-sheet > span > em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-sheet__input {
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 26px;
padding: 0 8px;
border: 1px dashed #9CC9B0;
border-radius: 6px;
background: #F3FAF6;
color: var(--teal-2);
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
}
.fx-sheet__set { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-sheet__set > .fx-face { width: 16px; height: 16px; border-radius: 50%; }
.fx-ui--cq { container: fx-ui / inline-size; }
@container fx-ui (max-width: 440px) {
.fx-sheet { grid-template-columns: var(--cols-sm, var(--cols)); }
.fx-sheet > .fx-sheet__opt { display: none; }
}
.fx-app {
container: fx-app / inline-size;
overflow: hidden;
border-radius: 20px;
background: #FFFFFF;
color: var(--ink);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.35;
text-align: left;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.07), 0 1px 3px rgba(14, 38, 34, 0.05);
}
.fx-app__bar {
display: flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 0 14px;
background: var(--deep);
}
.fx-app__logo { width: auto; height: 12px; }
.fx-app__bar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fx-app__bar-end > i { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.fx-app__bar-end > b { display: grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.86); font-size: 10.5px; font-weight: 600; }
.fx-app__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); }
ul.fx-app__nav {
display: flex;
flex-direction: column;
gap: 2px;
width: max-content;
min-width: 140px;
max-width: 168px;
margin: 0;
padding: 12px 8px;
border-right: 1px solid var(--line-soft);
background: #F8F9F6;
list-style: none;
}
.fx-app__nav > li {
display: block;
min-width: 0;
height: 30px;
padding: 0 7px;
overflow: hidden;
border-radius: 8px;
color: var(--ink-2);
font-size: 12px;
line-height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
}
.fx-app__nav .icon { display: inline-block; width: 14px; height: 14px; margin-right: 6px; color: var(--ink-3); vertical-align: -3px; }
.fx-app__nav > .is-active { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(14, 99, 98, 0.45); color: var(--ink); font-weight: 600; }
.fx-app__nav > .is-active .icon { color: var(--teal-2); }
.fx-app__main { min-width: 0; padding: 14px 14px 16px; }
.fx-app__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fx-app__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.fx-app__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #EEF1EC; }
.fx-app__seg > span { display: grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 6px; color: var(--ink-mute); font-size: 11.5px; font-weight: 500; }
.fx-app__seg > .is-on { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 38, 34, 0.08); }
.fx-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: 12px; background: #F3F5F1; }
.fx-col__head { display: flex; align-items: center; gap: 6px; margin: 0 2px 2px; color: var(--ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.fx-col__head::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #9AA6A2); }
.fx-col__head > small { display: grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: #FFFFFF; color: var(--ink-mute); font-size: 10.5px; font-weight: 600; }
.fx-task {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 9px 9px 8px;
border-radius: 9px;
background: #FFFFFF;
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.06), 0 1px 2px rgba(14, 38, 34, 0.05);
}
.fx-task__t { color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.fx-task__s { overflow: hidden; color: var(--ink-mute); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.fx-task__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }
.fx-due { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 5px; background: #F1F3EF; color: var(--ink-2); font-size: 10.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-due--soon { background: #FBF1D9; color: #855A08; }
.fx-due--done { background: var(--mint); color: var(--teal-2); }
.fx-task .fx-face { width: 20px; height: 20px; border-radius: 50%; }
.fx-task .fx-face > img { transform: scale(1.8); transform-origin: 50% 33%; }
.fx-app__me { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.fx-app__me > img { transform: scale(1.8); transform-origin: 50% 33%; }
@container fx-app (max-width: 470px) {
.fx-app__grid { grid-template-columns: minmax(0, 1fr); }
.fx-app__nav { display: none !important; }
}
@container fx-app (max-width: 380px) {
.fx-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-board > .fx-col:nth-child(3) { display: none; }
}
.fx-shot .chat { --avatar: 34px; --avatar-r: 8px; }
.fx-shot .chat-body { padding: 14px 16px 16px 14px; }
.fx-shot .msg { padding: 0; }
.fx-shot .msg-text { text-wrap: wrap; }
.fx-shot .attach-card { max-width: none; margin-top: 10px; }
.fx-shot .fx-li { padding: 9px 0 10px; }
.fx-shot .fx-li__t { font-size: 13.5px; line-height: 18px; }
.fx-shot .fx-li__s { font-size: 12px; line-height: 16px; }
.fx-shot .fx-li__main > .fx-li__s { white-space: normal; }
.fx-shot .msg-body > .chat-actions { margin-top: 12px; }
.fx-shot .fx-draft > .msg-text { font-size: 13.5px; }
.fx-more {
padding-block: 96px;
background: var(--paper);
}
.fx-more__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 32px;
}
.fx-more__title {
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 40px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.04em;
}
ul.fx-more__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.fx-more__card {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
height: 100%;
padding: 22px 22px 22px 20px;
border-radius: 24px;
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.03);
transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.fx-more__card:hover { transform: translateY(-1px); box-shadow: var(--ring), var(--shadow-md); }
.fx-more__ico {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: var(--grad-panel);
background-repeat: no-repeat;
color: #FFFFFF;
}
.fx-more__ico .icon { width: 20px; height: 20px; }
.fx-more__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-more__name { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.014em; }
.fx-more__line { color: var(--ink-2); font-size: 14.5px; line-height: 1.4; }
.fx-more__arrow { width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.fx-more__card:hover .fx-more__arrow { transform: translateX(2px); color: var(--teal-2); }
@media (max-width: 1199px) {
.fx-mock__chat { --side-w: 260px; }
.fx-cap { gap: 56px; }
.fx-cap__vis { padding: 52px 36px; }
}
@media (max-width: 1023px) {
.fx-mock__chat { --side-w: 236px; }
.fx-mock__chat .teams-row__preview { font-size: 11.5px; }
}
@media (max-width: 899px) {
.fx-cap, .fx-cap--flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.fx-cap--flip > .fx-cap__text { order: 0; }
.fx-cap__text { max-width: 640px; }
.fx-cap + .fx-cap { margin-top: 96px; }
.fx-cap__vis { min-height: 0; padding: 56px 40px; }
ul.fx-more__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.fx-more__head { display: block; }
}
@media (max-width: 767px) {
.fx-hero { --otto-w: 68px; padding: 20px 0 64px; }
.fx-switch { margin-bottom: 32px; }
.fx-switch__link { height: 38px; padding: 0 14px 0 12px; font-size: 14px; }
.fx-hero__lead { margin-top: 18px; }
.fx-hero__actions { margin-top: 28px; }
.fx-hero__stage { margin-top: 72px; }
.fx-mock__otto { right: 28px; }
.fx-mock__frame { padding: 6px; border-radius: 26px; }
.fx-mock__chat { --avatar: 36px; border-radius: 20px; }
.fx-mock__chat.chat--teams { --avatar: 30px; }
.fx-mock__body { padding-top: 8px; padding-bottom: 20px; }
.fx-mock__chat.chat--teams .fx-mock__body { padding-top: 14px; }
.fx-mock__chat.chat--teams .msg-body { padding: 8px 12px 12px; }
.fx-mock__chat.chat--teams .msg-body > .reactions { right: 10px; }
.fx-mock__chat:not(.chat--teams) .chat-actions > .slack-btn { min-width: 0; height: 36px; padding: 0 14px; font-size: 15px; }
.fx-att { padding: 10px; border-radius: 14px; }
.fx-att .attach-head { margin: 1px 12px 9px; font-size: 13px; }
.fx-att .attach-head > small { font-size: 12px; }
.fx-cap + .fx-cap { margin-top: 80px; }
.fx-cap { gap: 32px; }
.fx-cap__lead { margin-top: 16px; }
.fx-cap__list { margin-top: 24px; }
.fx-cap__list > li { font-size: 15.5px; }
.fx-cap__vis { padding: 32px 14px; border-radius: var(--r-xl); }
.fx-frame { padding: 6px; border-radius: 22px; }
.fx-ui, .fx-app { border-radius: 16px; }
.fx-more { padding-block: 64px; }
.fx-more__card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 18px 18px 18px 16px; border-radius: 20px; }
.fx-more__ico { width: 40px; height: 40px; border-radius: 12px; }
}
@media (max-width: 599px) {
.fx-ui__head { padding: 14px 14px 12px; gap: 10px; }
.fx-ui__body { padding: 2px 14px; }
.fx-ui__sub { padding-inline: 14px; }
.fx-ui__foot { padding: 11px 14px 12px; }
.fx-fields { padding: 14px 14px 16px; }
ul.fx-stats { padding: 12px 14px 4px; gap: 6px; }
.fx-stat { padding: 9px 10px 10px; }
.fx-ui .fx-li { column-gap: 10px; }
.fx-ui .fx-li--wrap { grid-template-columns: auto minmax(0, 1fr); }
.fx-ui .fx-li--wrap.fx-li--nolead { grid-template-columns: minmax(0, 1fr); }
.fx-ui .fx-li--wrap > .fx-li__end { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; }
.fx-ui .fx-li--wrap:not(.fx-li--nolead) > .fx-li__end { grid-column: 2; }
.fx-ui .fx-li--wrap .fx-li__name { white-space: normal; }
.fx-ui .fx-li__main > .fx-li__s { white-space: normal; }
ul.fx-why { padding-left: 0; }
.fx-page { padding: 18px 16px 20px; }
.fx-sheet > span { padding: 6px 7px; }
.fx-span { width: 84px; }
}
@media (max-width: 479px) {
.fx-att { padding: 8px; }
.fx-att .attach-head { margin: 1px 8px 8px; }
.fx-mock__chat.chat--teams .msg-body { padding: 8px 10px 10px; }
}
@media (max-width: 419px) {
.fx-switch__link .icon { display: none; }
.fx-switch__link { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
.fx-mock [data-step].is-pending { opacity: 1; translate: none; transition: none; }
.fx-switch__link, .fx-switch__link .icon, .fx-more__card, .fx-more__arrow { transition: none; }
.fx-more__card:hover, .fx-more__card:hover .fx-more__arrow { transform: none; }
}
@media print {
.fx-mock [data-step].is-pending { opacity: 1; translate: none; }
}
.ct-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.ct-phrase { display: block; }
.ct-hero {
--otto-w: 92px;
position: relative;
overflow: clip;
padding: 64px 0 104px;
background:
radial-gradient(46% 300px at 22% 0%, color-mix(in srgb, var(--glow-c) 70%, transparent) 0%, transparent 100%),
radial-gradient(28% 220px at 4% 0%, color-mix(in srgb, var(--eye) 60%, transparent) 0%, transparent 100%),
var(--paper);
background-repeat: no-repeat;
}
.ct-hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
grid-template-rows: auto auto 1fr;
grid-template-areas:
"copy panel"
"next panel"
"co   panel";
column-gap: 64px;
align-items: start;
}
.ct-hero__copy {
grid-area: copy;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding-top: 28px;
}
.ct-hero__title {
margin-top: 22px;
font-size: clamp(44px, 4.5vw, 66px);
line-height: 1.04;
}
.ct-hero__lead {
max-width: 520px;
margin-top: 24px;
text-wrap: pretty;
}
.ct-side-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.ct-next {
grid-area: next;
min-width: 0;
max-width: 560px;
margin-top: 44px;
padding-top: 32px;
border-top: 1px dashed var(--line-2);
}
ol.ct-steps {
display: grid;
gap: 18px;
margin-top: 20px;
}
.ct-step {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.ct-step__n {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--mint);
box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.24);
color: var(--teal-2);
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.ct-step__body { min-width: 0; padding-top: 4px; }
.ct-step__title {
color: var(--ink);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.011em;
}
.ct-step__text {
margin-top: 3px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.55;
}
.ct-co {
grid-area: co;
align-self: start;
min-width: 0;
max-width: 560px;
margin-top: 36px;
padding: 26px 28px 12px;
}
.ct-co__addr { margin-top: 14px; font-style: normal; }
.ct-co__list { margin: 0; }
.ct-co__row {
display: grid;
grid-template-columns: minmax(104px, 0.32fr) minmax(0, 1fr);
gap: 16px;
align-items: baseline;
padding: 11px 0;
border-top: 1px solid var(--line-soft);
}
.ct-co__row:first-child { border-top: 0; }
.ct-co__row > dt {
color: var(--ink-mute);
font-size: 14px;
line-height: 1.45;
}
.ct-co__row > dd {
min-width: 0;
margin: 0;
color: var(--ink);
font-size: 15px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.ct-co__mail {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
}
.ct-co__mail .link { overflow-wrap: anywhere; }
.ct-panel {
grid-area: panel;
align-self: stretch;
display: grid;
place-items: center;
min-width: 0;
padding: 104px 48px 48px;
border-radius: var(--r-2xl);
}
.ct-card-wrap {
position: relative;
width: 100%;
max-width: 544px;
}
.ct-otto {
position: absolute;
z-index: 0;
right: 44px;
top: calc(var(--otto-w) * -0.80);
width: var(--otto-w);
pointer-events: none;
}
.ct-frame { position: relative; z-index: 1; background: var(--glass-deep); }
.ct-card {
position: relative;
display: flex;
flex-direction: column;
padding: 28px;
border-radius: 20px;
background: var(--white);
color: var(--ink);
box-shadow: 0 0 0 1px rgba(14, 38, 34, 0.07), 0 1px 3px rgba(14, 38, 34, 0.05);
}
.ct-card :focus-visible { outline-color: var(--teal-2); }
.ct-form { display: block; }
.ct-intent {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.ct-intent__legend {
padding: 0;
color: var(--ink);
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.03em;
}
.ct-intent__seg {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
margin-top: 16px;
padding: 4px;
border-radius: var(--r-pill);
background: var(--paper-2);
box-shadow: inset 0 0 0 1px rgba(14, 38, 34, 0.05);
}
.ct-intent__opt {
position: relative;
display: block;
min-width: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ct-intent__input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.ct-intent__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 6px 14px;
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.011em;
text-align: center;
transition:
background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.ct-intent__btn .icon { width: 17px; height: 17px; color: var(--ink-3); transition: color var(--dur-2) var(--ease-out); }
.ct-intent__opt:hover .ct-intent__btn { color: var(--ink); }
.ct-intent__input:checked + .ct-intent__btn {
background: var(--white);
color: var(--ink);
box-shadow: 0 1px 2px rgba(14, 38, 34, 0.08), 0 0 0 1px rgba(14, 38, 34, 0.05);
}
.ct-intent__input:checked + .ct-intent__btn .icon { color: var(--teal-2); }
.ct-intent__input:focus-visible + .ct-intent__btn { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.ct-intent__line {
display: grid;
margin-top: 14px;
color: var(--ink-2);
font-size: 14.5px;
line-height: 1.5;
}
.ct-intent__line > span { grid-area: 1 / 1; }
.ct-card .ct-when-question { display: none; }
.ct-card .ct-intent__line > .ct-when-question { display: block; visibility: hidden; }
.ct-card:has(.ct-intent__input[value="question"]:checked) .ct-when-demo { display: none; }
.ct-card:has(.ct-intent__input[value="question"]:checked) .ct-when-question { display: inline; }
.ct-card:has(.ct-intent__input[value="question"]:checked) .ct-intent__line > .ct-when-demo { display: block; visibility: hidden; }
.ct-card:has(.ct-intent__input[value="question"]:checked) .ct-intent__line > .ct-when-question { display: block; visibility: visible; }
.ct-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 14px;
margin-top: 22px;
}
.ct-field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.ct-field--full { grid-column: 1 / -1; }
.ct-label {
color: var(--ink);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
.ct-opt { color: var(--ink-mute); font-weight: 400; }
.ct-input {
display: block;
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid var(--line-2);
border-radius: 12px;
background: var(--white);
color: var(--ink);
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.011em;
box-shadow: inset 0 1px 1px rgba(14, 38, 34, 0.03);
-webkit-appearance: none;
appearance: none;
transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ct-input::placeholder { color: var(--ink-3); opacity: 1; }
.ct-input:hover { border-color: #C3CCC3; }
.ct-input:focus,
.ct-input:focus-visible {
outline: none;
border-color: var(--teal-2);
box-shadow: 0 0 0 4px rgba(14, 99, 98, 0.12);
}
.ct-input:user-invalid { border-color: #C2412D; }
.ct-input:user-invalid:focus { box-shadow: 0 0 0 4px rgba(194, 65, 45, 0.12); }
.ct-input--area {
height: auto;
min-height: 124px;
padding: 12px 14px;
line-height: 1.5;
resize: vertical;
}
.ct-select { position: relative; display: block; }
.ct-input--select { padding-right: 42px; cursor: pointer; text-overflow: ellipsis; }
.ct-select__icon {
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
color: var(--ink-3);
pointer-events: none;
}
.ct-hint {
display: none;
color: var(--ink-2);
font-size: 13.5px;
line-height: 1.45;
}
.ct-form:has(.ct-input--select option[value="security"]:checked) .ct-hint--security { display: block; }
.ct-hp {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.ct-submit { margin-top: 22px; }
.ct-submit__btn { --btn-h: 52px; }
.ct-submit__busy { display: none; }
.ct-card.is-sending .ct-submit__idle { display: none; }
.ct-card.is-sending .ct-submit__busy { display: inline; }
.ct-submit__btn[aria-disabled="true"] { opacity: 0.72; pointer-events: none; }
.ct-consent {
margin-top: 12px;
color: var(--ink-mute);
font-size: 13px;
line-height: 1.5;
text-align: center;
text-wrap: balance;
}
.ct-consent a {
color: var(--ink-2);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(14, 38, 34, 0.3);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.ct-consent a:hover { color: var(--ink); text-decoration-color: currentColor; }
.ct-error {
display: none;
gap: 12px;
align-items: flex-start;
margin-top: 16px;
padding: 14px 16px 16px;
border-radius: 14px;
background: #FDF2EF;
box-shadow: inset 0 0 0 1px rgba(194, 65, 45, 0.16);
color: var(--ink);
}
.ct-error:focus { outline: none; }
.ct-card.is-error .ct-error,
.ct-error:target { display: flex; }
.ct-error__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #B0402B; }
.ct-error__body { min-width: 0; }
.ct-error__title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.ct-error__text { margin-top: 2px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.ct-mail {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.ct-mail__address {
min-width: 0;
padding: 6px 12px;
border-radius: 9px;
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink);
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.01em;
overflow-wrap: anywhere;
-webkit-user-select: all;
user-select: all;
}
.ct-copy {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
height: 34px;
padding: 0 12px;
border-radius: var(--r-pill);
background: var(--white);
box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--ink);
font-size: 13.5px;
font-weight: 500;
line-height: 1;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.ct-copy > svg { width: 15px; height: 15px; }
.ct-copy:hover { background: var(--hover); }
.ct-copy.is-done { background: var(--mint); color: var(--teal-2); box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.32); }
.ct-copy--sm { height: 30px; padding: 0 10px; font-size: 13px; }
.ct-copy--sm > svg { width: 14px; height: 14px; }
.ct-done {
display: none;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 12px 28px;
text-align: center;
}
.ct-done:focus { outline: none; }
.ct-card.is-sent .ct-done,
.ct-done:target { display: flex; }
.ct-card.is-sent .ct-form,
.ct-card:has(.ct-done:target) .ct-form { display: none; }
.ct-done__badge {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--mint);
box-shadow: inset 0 0 0 1px rgba(76, 159, 124, 0.26);
color: var(--teal-2);
}
.ct-done__badge svg { width: 26px; height: 26px; }
.ct-done__title {
max-width: 440px;
margin-top: 20px;
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.03em;
}
.ct-done__thanks { display: block; }
.ct-done__text {
max-width: 400px;
margin-top: 12px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.55;
}
.ct-done__actions { justify-content: center; margin-top: 26px; }
@media (max-width: 1199px) {
.ct-hero__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); column-gap: 40px; }
.ct-panel { padding: 100px 24px 32px; }
.ct-card { padding: 24px 22px; }
}
@media (max-width: 1023px) {
.ct-hero { padding: 48px 0 88px; }
.ct-hero__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
grid-template-areas:
"copy  copy"
"panel panel"
"next  co";
column-gap: 32px;
}
.ct-hero__copy { padding-top: 0; }
.ct-hero__title { font-size: clamp(42px, 8vw, 72px); }
.ct-hero__lead { max-width: 620px; }
.ct-panel { margin-top: 44px; padding: 104px 40px 44px; }
.ct-next { margin-top: 56px; padding-top: 0; border-top: 0; }
.ct-co { margin-top: 56px; }
}
@media (max-width: 767px) {
.ct-hero { --otto-w: 72px; padding: 32px 0 64px; }
.ct-hero__grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"copy"
"panel"
"next"
"co";
}
.ct-hero__title { margin-top: 18px; }
.ct-hero__lead { margin-top: 18px; }
.ct-panel { margin-top: 32px; padding: 80px 12px 12px; border-radius: var(--r-xl); }
.ct-otto { right: 28px; }
.ct-frame { padding: 6px; border-radius: 26px; }
.ct-card { padding: 22px 18px 20px; border-radius: 20px; }
.ct-intent__legend { font-size: 22px; }
.ct-next { margin-top: 48px; }
.ct-co { margin-top: 32px; padding: 22px 20px 10px; }
.ct-done { padding: 32px 4px 20px; }
.ct-done__title { font-size: 23px; }
}
@media (max-width: 559px) {
.ct-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 419px) {
.ct-intent__btn { gap: 6px; padding-inline: 8px; font-size: 14px; }
.ct-intent__btn .icon { width: 15px; height: 15px; }
.ct-co__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.ct-intent__btn, .ct-intent__btn .icon, .ct-input, .ct-copy, .ct-consent a { transition: none; }
}
.lg-page {
--lg-aside: 240px;
--lg-measure: 700px;
--lg-gap: clamp(48px, 6vw, 96px);
--lg-text: color-mix(in srgb, var(--ink) 92%, var(--paper));
--lg-bar: 0px;
--cta-warm: color-mix(in srgb, var(--eye) 62%, transparent);
--cta-mint: color-mix(in srgb, var(--glow-c) 96%, transparent);
--cta-mint-2: color-mix(in srgb, var(--glow-c) 46%, transparent);
--cta-green: color-mix(in srgb, var(--green) 46%, transparent);
--cta-teal: color-mix(in srgb, var(--teal-2) 26%, transparent);
--cta-ry: 520px;
position: relative;
background:
radial-gradient(24% calc(var(--cta-ry) * 0.5) at 50% 100%, var(--cta-warm) 0%, transparent 100%),
radial-gradient(62% var(--cta-ry) at 50% 100%, var(--cta-mint) 0%, var(--cta-mint-2) 46%, transparent 100%),
radial-gradient(40% calc(var(--cta-ry) * 1.05) at 0% 100%, var(--cta-green) 0%, transparent 100%),
radial-gradient(40% calc(var(--cta-ry) * 1.05) at 100% 100%, var(--cta-green) 0%, transparent 100%),
radial-gradient(20% calc(var(--cta-ry) * 0.55) at 0% 100%, var(--cta-teal) 0%, transparent 100%),
radial-gradient(20% calc(var(--cta-ry) * 0.55) at 100% 100%, var(--cta-teal) 0%, transparent 100%),
var(--paper);
background-repeat: no-repeat;
}
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lg-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
.lg-grid {
grid-template-columns: var(--lg-aside) minmax(0, var(--lg-measure));
column-gap: var(--lg-gap);
justify-content: center;
}
.lg-hero__copy { grid-column: 2; }
}
.lg-hero {
position: relative;
padding: 56px 0 48px;
background:
radial-gradient(46% 280px at 30% 0%, color-mix(in srgb, var(--glow-c) 62%, transparent) 0%, transparent 100%),
radial-gradient(26% 200px at 10% 0%, color-mix(in srgb, var(--eye) 52%, transparent) 0%, transparent 100%),
var(--paper);
background-repeat: no-repeat;
}
.lg-hero__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.lg-switch {
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--ink) 6%, transparent);
max-width: 100%;
}
.lg-switch__opt {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 14px;
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lg-switch__opt:hover { color: var(--ink); background: color-mix(in srgb, var(--white) 55%, transparent); }
.lg-switch__opt[aria-current="page"] {
background: var(--white);
color: var(--ink);
box-shadow: 0 1px 2px rgba(14, 38, 34, 0.08), 0 0 0 1px rgba(14, 38, 34, 0.04);
}
.lg-title {
margin-top: 24px;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(40px, 5vw, 60px);
line-height: 1.04;
letter-spacing: var(--ls-display);
color: var(--ink);
}
.lg-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin-top: 16px;
}
.lg-meta__date {
color: var(--ink-mute);
font-size: 15px;
}
.lg-print {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border-radius: var(--r-pill);
background: var(--white);
box-shadow: var(--ring);
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
transition: color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.lg-print .icon { width: 15px; height: 15px; }
.lg-print:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-xs); }
.lg-lead {
max-width: 64ch;
margin-top: 24px;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--ink-2);
text-wrap: pretty;
}
.lg-body {
padding-top: 8px;
padding-bottom: clamp(140px, 13vw, 196px);
align-items: start;
}
.lg-aside { min-width: 0; }
.lg-toc__sum {
display: flex;
align-items: center;
gap: 10px;
list-style: none;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.lg-toc__sum::-webkit-details-marker { display: none; }
.lg-toc__sum::marker { content: ""; }
.lg-toc__icon { width: 18px; height: 18px; color: var(--teal-2); }
.lg-toc__label { font-weight: 600; font-size: 15px; color: var(--ink); }
.lg-toc__pos { margin-left: auto; font-size: 13px; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-toc__chev { width: 18px; height: 18px; color: var(--ink-2); transition: transform var(--dur-2) var(--ease-out); }
.lg-toc[open] .lg-toc__chev { transform: rotate(180deg); }
.lg-toc__title {
margin: 0 0 8px;
padding: 0 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink-mute);
}
ol.lg-toc__list {
display: grid;
gap: 1px;
margin: 0;
}
.lg-toc__link {
display: grid;
grid-template-columns: 1.9em minmax(0, 1fr);
align-items: baseline;
padding: 6px 10px;
border-radius: 8px;
color: var(--ink-2);
font-size: 14px;
line-height: 1.38;
text-wrap: balance;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lg-toc__n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; }
.lg-toc__link:hover { background: var(--hover); color: var(--ink); }
.lg-toc__link.is-active {
background: var(--mint);
color: var(--teal);
font-weight: 500;
}
.lg-toc__link.is-active .lg-toc__n { color: var(--teal-2); }
@media (min-width: 1024px) {
.lg-aside {
position: sticky;
top: calc(var(--nav-h) + 24px);
padding-top: 4px;
}
.lg-toc__sum { display: none; }
.lg-toc__panel {
max-height: calc(100vh - var(--nav-h) - 56px);
max-height: calc(100dvh - var(--nav-h) - 56px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
margin-left: -10px;
padding-bottom: 8px;
}
}
@media (max-width: 1023px) {
.lg-page { --lg-bar: 64px; }
.lg-aside {
z-index: 20;
margin-bottom: 28px;
}
html.js .lg-aside {
position: sticky;
top: var(--nav-h);
padding-top: 8px;
margin-top: -8px;
background: linear-gradient(var(--paper), var(--paper)) no-repeat;
background-size: 100% 28px;
}
.lg-toc {
position: relative;
border-radius: 16px;
background: var(--white);
box-shadow: var(--ring), var(--shadow-sm);
}
.lg-toc__sum {
min-height: 48px;
padding: 0 14px 0 16px;
border-radius: 16px;
}
.lg-toc__sum:focus-visible { outline-offset: 2px; }
.lg-toc__title {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.lg-toc__panel {
padding: 4px 8px 10px;
border-top: 1px solid var(--line-soft);
}
html.js .lg-toc__panel {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
max-height: min(62vh, 560px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px;
border-top: 0;
border-radius: 16px;
background: var(--white);
box-shadow: var(--ring), var(--shadow-lg);
}
.lg-toc__link { padding: 9px 10px; font-size: 15px; }
}
.lg-doc {
min-width: 0;
max-width: var(--lg-measure);
font-size: 16.5px;
line-height: 1.7;
color: var(--lg-text);
}
.lg-doc strong { font-weight: 600; color: var(--ink); }
.lg-link, .lg-xref {
color: var(--teal-2);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--teal-2) 32%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
overflow-wrap: anywhere;
transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.lg-link:hover, .lg-xref:hover { color: var(--teal); text-decoration-color: currentColor; }
.lg-short {
padding: 28px 32px 26px;
border-radius: 24px;
background: var(--white);
box-shadow: var(--ring), var(--shadow-sm);
}
.lg-short__head { display: flex; align-items: center; gap: 12px; }
.lg-short__avatar {
flex: none;
width: 32px;
height: 32px;
border-radius: 9px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(4, 48, 42, 0.18);
}
.lg-short__avatar > svg { width: 100%; height: 100%; }
.lg-short__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
}
ul.lg-short__list {
display: grid;
gap: 12px;
margin-top: 20px;
}
.lg-short__list li {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
column-gap: 12px;
align-items: start;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
}
.lg-short__tick {
width: 22px;
height: 22px;
margin-top: 1px;
padding: 4px;
border-radius: 50%;
background: var(--mint);
color: var(--teal-2);
}
.lg-short__note {
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed var(--line-2);
font-size: 14px;
line-height: 1.5;
color: var(--ink-mute);
}
.lg-sec {
margin-top: 56px;
padding-top: 48px;
border-top: 1px solid var(--line);
}
.lg-sec, .lg-cl { scroll-margin-top: calc(var(--lg-bar) + 8px); }
.lg-sec__head {
display: flex;
align-items: flex-start;
gap: 6px;
}
.lg-h2 {
flex: 0 1 auto;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.45em;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.1vw, 27px);
line-height: 1.22;
letter-spacing: -0.025em;
color: var(--ink);
text-wrap: balance;
}
.lg-h2__n { color: var(--teal-2); font-variant-numeric: tabular-nums; }
.lg-anchor {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-top: -1px;
border-radius: 8px;
color: var(--ink-3);
opacity: 0;
transition: opacity var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.lg-anchor .icon { width: 17px; height: 17px; }
.lg-sec__head:hover .lg-anchor,
.lg-anchor:focus-visible,
.lg-anchor.is-copied { opacity: 1; }
.lg-anchor:hover { color: var(--teal-2); background: var(--mint); }
.lg-anchor.is-copied { color: var(--teal-2); background: var(--mint); }
@media (hover: none) {
.lg-anchor { opacity: 0.55; }
}
.lg-intro {
margin-top: 14px;
font-size: 18px;
line-height: 1.55;
color: var(--ink-2);
text-wrap: pretty;
}
.lg-intro + * { margin-top: 22px; }
.lg-cl {
display: grid;
grid-template-columns: 3.3em minmax(0, 1fr);
margin-top: 16px;
}
.lg-cl--sub {
grid-template-columns: 4.3em minmax(0, 1fr);
margin-top: 10px;
padding-left: 3.3em;
}
.lg-cl__n {
color: var(--ink-mute);
font-size: 0.9em;
font-variant-numeric: tabular-nums;
line-height: 1.88;
}
.lg-cl__t { min-width: 0; overflow-wrap: break-word; }
.lg-cl:target {
border-radius: 10px;
background: color-mix(in srgb, var(--mint) 70%, transparent);
box-shadow: 0 0 0 10px color-mix(in srgb, var(--mint) 70%, transparent);
}
.lg-p { margin-top: 16px; }
.lg-intro + .lg-p, .lg-intro + .lg-cl { margin-top: 22px; }
ul.lg-list {
display: grid;
gap: 10px;
margin-top: 16px;
}
.lg-list li {
position: relative;
padding-left: 24px;
}
.lg-list li::before {
content: "";
position: absolute;
left: 6px;
top: 0.72em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
}
.lg-addr {
margin-top: 16px;
padding: 18px 22px;
border-radius: 16px;
background: var(--white);
box-shadow: var(--ring);
font-style: normal;
font-size: 15.5px;
line-height: 1.65;
color: var(--ink);
}
.lg-table-wrap {
margin-top: 20px;
border-radius: 16px;
background: var(--white);
box-shadow: var(--ring);
overflow: hidden;
}
table.lg-table {
width: 100%;
font-size: 15px;
line-height: 1.55;
}
.lg-table th, .lg-table td {
padding: 14px 18px;
text-align: left;
vertical-align: top;
}
.lg-table thead th {
padding-top: 12px;
padding-bottom: 12px;
background: var(--paper-2);
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
.lg-table tbody tr + tr > * { border-top: 1px solid var(--line-soft); }
.lg-table tbody th {
width: 34%;
font-weight: 600;
color: var(--ink);
}
@media (max-width: 599px) {
.lg-table thead, .lg-table thead th {
position: absolute;
width: 1px; height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.lg-table, .lg-table tbody, .lg-table tr, .lg-table th, .lg-table td { display: block; width: 100%; }
.lg-table tbody th { width: 100%; padding-bottom: 2px; }
.lg-table tbody td { padding-top: 0; }
.lg-table tbody tr + tr > td { border-top: 0; }
}
.lg-end {
margin-top: 64px;
padding: 32px;
border-radius: 24px;
background:
radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--glow-c) 55%, transparent) 0%, transparent 100%),
var(--white);
background-repeat: no-repeat;
box-shadow: var(--ring), var(--shadow-sm);
}
.lg-end__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.1vw, 27px);
line-height: 1.2;
letter-spacing: -0.025em;
color: var(--ink);
}
.lg-end__text { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.lg-end__actions { margin-top: 22px; }
@media (max-width: 767px) {
.lg-hero { padding: 40px 0 32px; }
.lg-title { margin-top: 20px; }
.lg-lead { margin-top: 18px; }
.lg-page { --cta-ry: 340px; }
.lg-body { padding-bottom: 112px; }
.lg-doc { font-size: 16px; line-height: 1.68; }
.lg-short { padding: 22px 20px 20px; border-radius: 20px; }
.lg-short__list li { font-size: 15.5px; }
.lg-sec { margin-top: 44px; padding-top: 36px; }
.lg-intro { font-size: 17px; }
.lg-end { padding: 24px 20px; border-radius: 20px; }
.lg-end__actions .btn { flex: 1 1 auto; }
}
@media (max-width: 559px) {
.lg-cl { display: block; }
.lg-cl--sub { padding-left: 14px; }
.lg-cl__n {
margin-right: 0.4em;
font-size: 0.92em;
font-weight: 600;
color: var(--ink-2);
line-height: inherit;
}
.lg-sec__head { gap: 2px; }
.lg-anchor { margin-right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
.lg-switch__opt, .lg-print, .lg-toc__chev, .lg-toc__link, .lg-anchor, .lg-link, .lg-xref { transition: none; }
}
@page lg-doc { margin: 18mm 16mm; }
@media print {
.lg-page { page: lg-doc; }
body:is([data-page="terms"], [data-page="privacy"]), .lg-page { background: #fff; }
body:is([data-page="terms"], [data-page="privacy"]) :is(.skip-link, .s-nav, .s-footer, .lg-aside, .lg-switch, .lg-print, .lg-anchor, .lg-end__actions) {
display: none !important;
}
.lg-page { --lg-text: #000; }
.lg-hero { padding: 0 0 10pt; background: none; }
.lg-grid { display: block; }
.lg-hero .container, .lg-body.container { max-width: none; padding: 0; }
.lg-title { margin-top: 0; font-size: 24pt; color: #000; }
.lg-meta__date, .lg-lead, .lg-intro { color: #222; }
.lg-lead { max-width: none; font-size: 11pt; }
.lg-body { padding: 0; }
.lg-doc { max-width: none; font-size: 10.5pt; line-height: 1.5; }
.lg-short__list li, .lg-addr, table.lg-table, .lg-end__text { font-size: 10.5pt; line-height: 1.5; }
.lg-short__title, .lg-end__title { font-size: 14pt; color: #000; }
.lg-table thead th { background: none; color: #000; }
.lg-short, .lg-addr, .lg-table-wrap, .lg-end { background: none; box-shadow: none; border: 1px solid #bbb; }
.lg-short { break-inside: avoid; }
.lg-sec { margin-top: 18pt; padding-top: 12pt; border-top-color: #ccc; }
.lg-h2 { font-size: 14pt; color: #000; break-after: avoid; }
.lg-h2__n { color: #000; }
.lg-intro { font-size: 11pt; break-after: avoid; }
.lg-cl, .lg-list li, .lg-table tr { break-inside: avoid; }
.lg-link, .lg-xref { color: #000; }
.lg-doc a.lg-link[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
.lg-end { margin-top: 18pt; }
}
.auth {
--auth-inset: 16px;
--otto-w: 112px;
display: grid;
grid-template-columns: minmax(420px, 2fr) 3fr;
align-items: start;
min-height: 100vh;
min-height: 100svh;
background: var(--paper);
}
.auth__side {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100svh;
padding: 48px 32px;
}
.auth__col { width: 100%; max-width: 360px; }
.auth__logo {
display: inline-block;
border-radius: 6px;
}
.auth__logo img { width: auto; height: 26px; }
.auth__head { margin-top: 44px; }
.auth__title {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.035em;
color: var(--ink);
}
.auth__lead {
margin-top: 10px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.5;
letter-spacing: -0.008em;
text-wrap: pretty;
}
.auth__lead strong { color: var(--ink); font-weight: 500; }
.auth__providers { display: grid; gap: 12px; margin-top: 30px; }
.auth-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 10px 48px;
border: 1px solid var(--line-2);
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink);
font-size: 15px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.011em;
text-align: center;
box-shadow: 0 1px 1px rgba(14, 38, 34, 0.03);
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--dur-1) var(--ease-out),
border-color var(--dur-1) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out),
transform var(--dur-1) var(--ease-out);
}
.auth-btn:hover { background: #FBFBF8; border-color: #C3CCC3; box-shadow: var(--shadow-sm); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline-offset: 3px; }
.auth-btn__logo {
position: absolute;
left: 19px;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
}
.auth__or {
display: flex;
align-items: center;
gap: 14px;
margin: 22px 0 18px;
color: var(--ink-mute);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auth__or::before,
.auth__or::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, color-mix(in srgb, var(--line-2) 0%, transparent), var(--line-2));
}
.auth__or::after { background: linear-gradient(270deg, color-mix(in srgb, var(--line-2) 0%, transparent), var(--line-2)); }
.auth__label {
display: block;
margin-bottom: 8px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
.auth__input {
display: block;
width: 100%;
height: 48px;
padding: 0 20px;
border: 1px solid var(--line-2);
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink);
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.011em;
box-shadow: inset 0 1px 1px rgba(14, 38, 34, 0.03);
-webkit-appearance: none;
appearance: none;
transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.auth__input::placeholder { color: var(--ink-3); opacity: 1; }
.auth__input:hover { border-color: #C3CCC3; }
.auth__input:focus,
.auth__input:focus-visible {
outline: none;
border-color: var(--teal-2);
box-shadow: 0 0 0 4px rgba(14, 99, 98, 0.12);
}
.auth__submit { --btn-h: 48px; margin-top: 12px; font-size: 15px; }
.auth__switch {
margin-top: 20px;
color: var(--ink-2);
font-size: 14.5px;
line-height: 1.5;
text-align: center;
}
.auth__switch a,
.auth__terms a {
color: var(--ink);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(14, 38, 34, 0.3);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.auth__switch a:hover,
.auth__terms a:hover { color: var(--teal-2); text-decoration-color: currentColor; }
.auth__fine { margin-top: 18px; text-align: center; }
.auth__terms {
color: var(--ink-mute);
font-size: 12.5px;
line-height: 1.55;
}
.auth__terms a { font-weight: 400; color: var(--ink-2); }
.auth__sso {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--ink-mute);
font-size: 13px;
line-height: 1.4;
}
.auth__terms + .auth__sso { margin-top: 14px; }
.auth__fine > .auth__sso:first-child { margin-top: 0; }
.auth__sso .icon { width: 14px; height: 14px; color: var(--ink-3); }
.auth__sso strong { color: var(--ink-2); font-weight: 500; }
.auth__panel {
position: sticky;
top: var(--auth-inset);
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - var(--auth-inset) * 2);
height: calc(100svh - var(--auth-inset) * 2);
min-height: 560px;
margin: var(--auth-inset) var(--auth-inset) var(--auth-inset) 0;
overflow: hidden;
isolation: isolate;
border-radius: var(--r-xl);
background: var(--paper);
}
.auth__wash {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 46% 22% at 50% 51%, color-mix(in srgb, var(--white) 90%, transparent) 0%, color-mix(in srgb, var(--white) 0%, transparent) 100%),
radial-gradient(ellipse 44% 30% at 50% 102%, var(--eye) 0%, color-mix(in srgb, var(--eye) 0%, transparent) 100%),
radial-gradient(ellipse 60% 70% at 50% 120%, color-mix(in srgb, var(--glow-c) 90%, transparent) 0%, color-mix(in srgb, var(--glow-c) 0%, transparent) 100%),
radial-gradient(ellipse 34% 60% at 0% 78%, color-mix(in srgb, var(--teal-2) 46%, transparent) 0%, color-mix(in srgb, var(--teal-2) 0%, transparent) 100%),
radial-gradient(ellipse 34% 60% at 100% 78%, color-mix(in srgb, var(--teal-2) 32%, transparent) 0%, color-mix(in srgb, var(--teal-2) 0%, transparent) 100%),
radial-gradient(ellipse 66% 92% at 50% 0%,
var(--paper) 0%,
var(--paper) 48%,
var(--glow-c) 60%,
color-mix(in srgb, var(--green) 55%, var(--glow-c)) 72%,
var(--green) 86%,
color-mix(in srgb, var(--green) 70%, var(--teal-2)) 100%);
background-repeat: no-repeat;
}
.auth__wash::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--noise);
background-size: 180px 180px;
opacity: var(--grain-a);
}
.auth__stage {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 640px;
padding: 24px 40px;
}
.auth__perch {
position: relative;
width: 100%;
max-width: 560px;
padding-top: calc(var(--otto-w) * 0.8);
}
.auth__otto {
position: absolute;
z-index: 0;
right: 40px;
top: 0;
width: var(--otto-w);
pointer-events: none;
}
.auth-box {
position: relative;
z-index: 1;
max-width: none;
}
.auth-box:focus-within { border-color: var(--line); box-shadow: var(--shadow-prompt); }
.auth-box__files { display: flex; margin: -4px -6px 12px; }
.auth-box__file .prompt-file__name { max-width: 300px; }
.auth-box__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
line-clamp: 6;
min-height: 51px;
max-height: calc(17px * 1.5 * 6);
padding: 0 2px;
overflow: hidden;
color: var(--ink);
font-size: 17px;
line-height: 1.5;
letter-spacing: -0.011em;
white-space: pre-wrap;
overflow-wrap: anywhere;
text-wrap: auto;
}
.auth-box__caret {
display: inline-block;
width: 2px;
height: 1.2em;
margin-left: 2px;
margin-right: -4px;
vertical-align: -0.24em;
border-radius: 1px;
background: var(--teal-2);
will-change: opacity;
animation: auth-caret 1.1s steps(1, end) 0.8s 9;
}
@keyframes auth-caret { 50% { opacity: 0; } }
.auth-box__bar { pointer-events: none; }
.auth-box__task .icon { width: 14px; height: 14px; }
.auth__works {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 30px;
text-align: center;
}
.auth__works-label {
color: var(--ink);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.006em;
}
.auth__tools {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.auth__tool {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--white);
box-shadow: var(--ring), 0 1px 2px rgba(14, 38, 34, 0.06), 0 6px 14px -8px rgba(4, 48, 42, 0.30);
}
.auth__tool > svg { width: 18px; height: 18px; }
.auth__tool--more { color: var(--ink-2); }
.auth__tool--more > svg { width: 16px; height: 16px; }
@media (max-width: 1180px) {
.auth { --otto-w: 100px; }
.auth__side { padding-inline: 24px; }
.auth__stage { padding-inline: 32px; }
}
@media (min-width: 960px) and (max-height: 780px) {
.auth__side { padding-block: 32px; }
.auth__head { margin-top: 32px; }
.auth__providers { margin-top: 24px; }
.auth__or { margin: 18px 0 14px; }
}
@media (max-width: 959px) {
.auth {
--otto-w: 64px;
--auth-w: min(400px, 100% - var(--gutter) * 2);
grid-template-columns: minmax(0, 1fr);
align-content: start;
padding-bottom: 48px;
}
.auth__side,
.auth__col { display: contents; }
.auth__col > * { order: 3; justify-self: center; width: var(--auth-w); }
.auth__col > .auth__logo { order: 1; margin-top: 36px; }
.auth__logo img { height: 24px; }
.auth__head { margin-top: 36px; }
.auth__panel { display: none; }
.auth.has-prompt .auth__panel {
order: 2;
display: flex;
position: relative;
top: auto;
justify-self: center;
width: var(--auth-w);
height: auto;
min-height: 0;
margin: 28px 0 0;
border-radius: 22px;
}
.auth.has-prompt .auth__head { margin-top: 32px; }
.auth__stage { padding: 26px 16px 18px; }
.auth__otto { right: 24px; }
.auth__works { display: none; }
.auth-box { padding: 14px 16px 10px; }
.auth-box__text { -webkit-line-clamp: 3; line-clamp: 3; min-height: 0; max-height: calc(16px * 1.5 * 3); font-size: 16px; }
.auth-box__bar { margin-top: 8px; }
.auth-box__bar .prompt-icon-btn { width: 30px; height: 30px; }
.auth-box__bar .prompt-send { width: 32px; height: 32px; }
.auth-box__bar .prompt-select { height: 30px; font-size: 13.5px; }
}
@media (max-width: 419px) {
.auth__title { font-size: 30px; }
.auth-btn { padding-inline: 44px; }
.auth-btn__logo { left: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.auth-btn, .auth__input, .auth__switch a, .auth__terms a { transition: none; }
.auth-btn:active { transform: none; }
.auth-box__caret { animation: none; }
}