/* ═══════════════════════════════════════════════════════════════════════════
   Autonify marketing site — "спокойната машина" on the outside.
   Tokens mirror backend/resources/css/app.css exactly (Хартия / Смола).
   Zero dependencies; Sofia Sans self-hosted; grain + radial theme wipe
   are the same brand signatures the product carries.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Sofia Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 1 1000;
    src: url('../fonts/sofia-sans-cyrillic-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Sofia Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 1 1000;
    src: url('../fonts/sofia-sans-latin-wght-normal.woff2') format('woff2-variations');
    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;
}

/* ── Semantic tokens (identical to the app) ────────────────────────────── */
:root {
    --canvas: #f6f2e9;
    --surface: #fffdf8;
    --surface-2: #f1ecdf;
    --surface-3: #eae4d3;
    --overlay: rgb(31 45 43 / 0.45);

    --ink: #20302d;
    --ink-soft: #4c5d59;
    --ink-faint: #71827e;
    --ink-inverse: #f2efe6;

    --line: #e3dbc8;
    --line-strong: #cfc5ab;

    --brand: #0f766e;
    --brand-strong: #0a5b54;
    --brand-soft: #dcefec;
    --on-brand: #f7fdfc;

    --accent: #c2690f;
    --accent-strong: #a05408;
    --accent-soft: #f8e8cf;
    --on-accent: #fffaf2;

    --ok: #1a7a4b;
    --ok-soft: #ddefe3;
    --info: #176d8d;
    --info-soft: #ddedf3;

    --shadow-color: 32 45 42;
    --grain-opacity: 0.085;

    /* Night tokens — the "Смола" set, used by permanently-dark panels. */
    --pine-canvas: #0c1514;
    --pine-surface: #13201e;
    --pine-surface-2: #1a2b28;
    --pine-line: #253a36;
    --pine-line-strong: #33504a;
    --pine-ink: #ece9dd;
    --pine-ink-soft: #a6b4ae;
    --pine-ink-faint: #78918a;
    --pine-brand: #37c8b4;
    --pine-brand-soft: #123430;
    --pine-accent: #e6963a;

    --radius-card: 1rem;
    --radius-control: 0.625rem;

    --header-h: 68px;
}

.dark {
    --canvas: #0c1514;
    --surface: #13201e;
    --surface-2: #1a2b28;
    --surface-3: #223531;
    --overlay: rgb(4 10 9 / 0.6);

    --ink: #ece9dd;
    --ink-soft: #a6b4ae;
    --ink-faint: #78918a;
    --ink-inverse: #20302d;

    --line: #253a36;
    --line-strong: #33504a;

    --brand: #37c8b4;
    --brand-strong: #63dcca;
    --brand-soft: #123430;
    --on-brand: #052420;

    --accent: #e6963a;
    --accent-strong: #f0b26b;
    --accent-soft: #372812;
    --on-accent: #251503;

    --ok: #46c07d;
    --ok-soft: #10301f;
    --info: #57b7d3;
    --info-soft: #0e2a33;

    --shadow-color: 0 0 0;
    --grain-opacity: 0.11;
}

/* ── Reset-ish base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
    color-scheme: light;
    background: var(--canvas);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
html.dark { color-scheme: dark; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: 'Sofia Sans Variable', ui-sans-serif, system-ui, sans-serif;
    font-variation-settings: 'wght' 430;
    font-size: 16.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
body, .site-header, .btn, .plan, .feature-card, .tl-card, .toast, .faq-item {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
strong, b, th, button { font-variation-settings: 'wght' 620; }
code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: .86em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .1em .4em;
}

/* Paper grain — the same tooth the app carries, but generated rather than
   tiled from a bitmap. The app's 64px PNG repeats often enough that the grid
   reads as a pattern once you notice it, which on the landing's large flat
   fields (and hardest of all on the dark canvas) looks like a texture bug.
   Two SVG turbulence layers at different sizes and frequencies fix it: each
   is seamless on its own (stitchTiles), and because 331 and 173 share no
   factors their repeats only realign every ~57000px — far past any screen, so
   no visible grid survives. Procedural, so it also costs a few hundred bytes
   instead of a bitmap. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='331' height='331'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='331' height='331' filter='url(%23a)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='173' height='173'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='173' height='173' filter='url(%23b)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 331px 331px, 173px 173px;
}
main, .site-header, .site-footer { position: relative; z-index: 1; }

/* Dark canvas carries texture harder than paper: the same specks that
   read as tooth on Хартия read as noise on Смола. A third smaller
   (baseFrequency x1.5 = specks ~33% finer), same seamless tiles. */
.dark body::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='331' height='331'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.39' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='331' height='331' filter='url(%23a)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='173' height='173'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.63' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='173' height='173' filter='url(%23b)' opacity='0.55'/%3E%3C/svg%3E");
}


::selection { background: var(--brand-soft); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 10px 16px;
    transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.shell {
    width: min(1160px, 100% - 48px);
    margin-inline: auto;
}
.shell-narrow { width: min(860px, 100% - 48px); }
section { scroll-margin-top: calc(var(--header-h) + 18px); }
a, button, input, [tabindex] { scroll-margin-top: calc(var(--header-h) + 24px); }

.kicker {
    font-variation-settings: 'wght' 640;
    font-size: 13.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 12px;
}
.kicker-accent { color: var(--accent); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 {
    font-size: clamp(28px, 4.2vw, 42px);
    line-height: 1.08;
    font-variation-settings: 'wght' 730;
}
.section-sub {
    margin-top: 14px;
    font-size: 17.5px;
    color: var(--ink-soft);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    padding: 10px 18px;
    font-size: 15.5px;
    font-variation-settings: 'wght' 620;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .35s ease;
    will-change: transform;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
    background: var(--brand);
    color: var(--on-brand);
}
.btn-primary:hover {
    background: var(--brand-strong);
    box-shadow: 0 10px 28px -10px rgb(15 118 110 / .55);
    transform: translateY(-1px);
}
/* CTA sheen sweep */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .22) 50%, transparent 58%);
    transform: translateX(-120%);
}
.btn-primary:hover::after { transition: transform .7s ease; transform: translateX(120%); }

.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover {
    background: var(--accent-strong);
    box-shadow: 0 10px 28px -10px rgb(194 105 15 / .55);
    transform: translateY(-1px);
}

.btn-outline {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    color: var(--ink);
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }

.btn-lg { padding: 12px 24px; font-size: 16.5px; }
.btn-xl { padding: 15px 28px; font-size: 17.5px; border-radius: 14px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--canvas) 55%, transparent);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--canvas) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}
.site-header .shell { width: min(1280px, 100% - 48px); }
.header-row {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--header-h);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 20px;
    font-variation-settings: 'wght' 730;
    letter-spacing: -0.015em;
}
/* The mark is inline SVG so it can follow the theme (--accent /
   --ink) — an <img> cannot. Each instance sets its own width and
   height attributes, so this only pins the box and stops the SVG
   stretching to the flex line. */
.brand img,
.brand .brand-mark { display: block; flex: none; }

.main-nav {
    display: flex;
    gap: 4px;
    margin-inline: auto;
}
.main-nav a {
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: 15px;
    font-variation-settings: 'wght' 540;
    padding: 8px 11px;
    border-radius: 9px;
    transition: color .18s ease, background-color .18s ease;
}
.main-nav a:hover { color: var(--ink); background: var(--surface-2); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch {
    text-decoration: none;
    font-size: 13.5px;
    font-variation-settings: 'wght' 640;
    letter-spacing: .06em;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 9px;
    transition: color .18s ease, border-color .18s ease;
}
.lang-switch:hover { color: var(--brand); border-color: var(--brand); }

.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
/* Hover-only: on touch the emulated "sticky hover" would leave the button
   stuck at rotate(12deg) after a tap, so gate the hover tilt to real pointers. */
@media (hover: hover) {
    .theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); transform: rotate(12deg); }
}
/* Touch: a tap plays the tilt once and returns to rest (see landing.js). */
.theme-toggle.tap-tilt { animation: theme-toggle-tap .3s ease; }
@keyframes theme-toggle-tap {
    0%   { transform: rotate(0deg); }
    40%  { transform: rotate(12deg); }
    100% { transform: rotate(0deg); }
}
/* The button shows the theme it switches TO, not the one you are in: a moon
   while the page is light, a sun while it is dark. */
.theme-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .25s ease, transform .35s ease; }
.icon-moon { opacity: 1; transform: none; }
.icon-sun { opacity: 0; transform: rotate(-40deg) scale(.6); }
.dark .icon-sun { opacity: 1; transform: none; }
.dark .icon-moon { opacity: 0; transform: rotate(40deg) scale(.6); }

.nav-burger { display: none; }
.mobile-nav { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    padding: clamp(40px, 7vh, 84px) 0 24px;
    overflow: clip;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-glow {
    position: absolute;
    top: -30%;
    right: -18%;
    width: 74vw;
    height: 74vw;
    max-width: 1100px;
    max-height: 1100px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 62%);
    filter: blur(20px);
}
.hero-rings {
    position: absolute;
    top: 50%;
    right: -12%;
    width: min(62vw, 980px);
    aspect-ratio: 1;
    transform: translateY(-52%);
    color: var(--line-strong);
    opacity: .5;
    animation: rings-rotate 140s linear infinite;
}
@keyframes rings-rotate { to { transform: translateY(-52%) rotate(360deg); } }

.float-doc {
    position: absolute;
    width: 30px; height: 38px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: 0 8px 20px -8px rgb(var(--shadow-color) / .25);
    opacity: .55;
}
.float-doc::before, .float-doc::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px;
    height: 3px;
    border-radius: 2px;
    background: var(--line-strong);
}
.float-doc::before { top: 9px; }
.float-doc::after { top: 17px; right: 12px; background: var(--brand); opacity: .6; }
.fd-1 { top: 16%; left: 46%; animation: float-drift 16s ease-in-out infinite alternate; }
.fd-2 { top: 72%; left: 45%; scale: .82; animation: float-drift 13s ease-in-out infinite alternate-reverse; }
.fd-3 { top: 30%; right: 4%; scale: .7; rotate: 8deg; animation: float-drift 19s ease-in-out infinite alternate; }
@keyframes float-drift {
    from { transform: translate(0, 0) rotate(-4deg); }
    to   { transform: translate(14px, -26px) rotate(5deg); }
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
}

/* load-in choreography */
.anim-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.22,.9,.28,1), transform .7s cubic-bezier(.22,.9,.28,1);
}
body.is-loaded .anim-item { opacity: 1; transform: none; }
.hero-chip.anim-item { transition-delay: .05s; }
.hero-title .anim-item:nth-child(1) { transition-delay: .14s; }
.hero-title .anim-item:nth-child(2) { transition-delay: .24s; }
.hero-sub.anim-item { transition-delay: .34s; }
.hero-cta.anim-item { transition-delay: .42s; }
.hero-fineprint.anim-item { transition-delay: .48s; }
.hero-trust.anim-item { transition-delay: .56s; }
.hero-visual.anim-item { transition-delay: .3s; }

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-variation-settings: 'wght' 600;
    letter-spacing: .02em;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
    border-radius: 999px;
    padding: 7px 14px;
    margin: 0 0 22px;
}
.hero-chip svg { width: 15px; height: 15px; }

.hero-title {
    font-size: clamp(42px, 6.2vw, 74px);
    line-height: 1.02;
    font-variation-settings: 'wght' 760;
    letter-spacing: -0.025em;
}
.hero-title > span { display: block; }

.hero-underline { position: relative; white-space: nowrap; }
.hero-underline svg {
    position: absolute;
    left: -2%;
    bottom: -0.12em;
    width: 104%;
    height: .16em;
    color: var(--accent);
    overflow: visible;
}
.hero-underline path {
    stroke-dasharray: 230;
    stroke-dashoffset: 230;
}
body.is-loaded .hero-underline path { animation: draw-underline .8s cubic-bezier(.6,.05,.3,1) .75s forwards; }
@keyframes draw-underline { to { stroke-dashoffset: 0; } }

.hero-sub {
    margin-top: 24px;
    max-width: 46ch;
    font-size: clamp(16.5px, 1.35vw, 18.5px);
    color: var(--ink-soft);
}

.hero-cta {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.hero-fineprint {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--ink-faint);
}

.hero-trust {
    list-style: none;
    margin: 30px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
.hero-trust li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-variation-settings: 'wght' 540;
    color: var(--ink-soft);
}
.hero-trust svg { width: 19px; height: 19px; flex: none; color: var(--brand); }

/* hero visual */
.hero-visual { position: relative; }
.browser-frame {
    position: relative;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow:
        0 1px 2px rgb(var(--shadow-color) / .06),
        0 24px 70px -28px rgb(var(--shadow-color) / .45);
    overflow: hidden;
}
.tilt-target {
    transform-style: preserve-3d;
    transition: transform .3s ease;
    animation: hero-bob 9s ease-in-out infinite alternate;
}
@keyframes hero-bob {
    from { translate: 0 0; }
    to   { translate: 0 -10px; }
}
.browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.browser-bar .dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--line-strong);
}
.browser-url {
    margin-inline: auto;
    font-size: 12px;
    color: var(--ink-faint);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 2.5px 26px;
    letter-spacing: .02em;
}
.browser-body { position: relative; }

html:not(.dark) .only-dark { display: none; }
html.dark .only-light { display: none; }

/* toasts — the machine at work */
.hero-toasts {
    position: absolute;
    top: 52px;
    right: 14px;
    width: min(320px, 78%);
    display: grid;
}
.toast {
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 16px 44px -18px rgb(var(--shadow-color) / .5);
    padding: 11px 13px;
    opacity: 0;
    transform: translateX(26px) scale(.97);
    transition: opacity .5s cubic-bezier(.22,.9,.28,1), transform .5s cubic-bezier(.22,.9,.28,1);
    pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }
.toast-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
}
.toast-icon svg { width: 17px; height: 17px; }
.t-brand { background: var(--brand-soft); color: var(--brand); }
.t-ok { background: var(--ok-soft); color: var(--ok); }
.t-info { background: var(--info-soft); color: var(--info); }
.t-accent { background: var(--accent-soft); color: var(--accent); }
.toast-body { display: grid; gap: 1px; min-width: 0; }
.toast-body strong { font-size: 13.5px; line-height: 1.25; }
.toast-body em { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.toast-time {
    margin-left: auto;
    flex: none;
    font-size: 11.5px;
    color: var(--ink-faint);
    font-variation-settings: 'wght' 560;
}

.hero-visual-caption {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-faint);
}

/* ── Stats strip + marquee ──────────────────────────────────────────────── */
.strip-stats {
    padding: clamp(40px, 6vh, 64px) 0 0;
}
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 40px;
}
.stat { display: grid; gap: 5px; align-content: start; }
.stat-num {
    font-size: clamp(30px, 3.4vw, 42px);
    font-variation-settings: 'wght' 750;
    letter-spacing: -0.02em;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 14px; color: var(--ink-soft); max-width: 26ch; }

.marquee {
    border-block: 1px solid var(--line);
    padding: 13px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    gap: 34px;
    animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
    flex: none;
    font-size: 14px;
    color: var(--ink-faint);
    font-variation-settings: 'wght' 540;
    display: flex;
    align-items: center;
    gap: 34px;
}
.marquee-track span::after {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .7;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Night section (always Смола) ───────────────────────────────────────── */
.night {
    position: relative;
    margin-top: clamp(56px, 9vh, 110px);
    background: var(--pine-canvas);
    color: var(--pine-ink);
    padding-bottom: clamp(60px, 8vh, 100px);
    overflow: clip;
}
.night-art { position: relative; }
.night-art img {
    width: 100%;
    height: clamp(220px, 34vw, 460px);
    object-fit: cover;
    -webkit-mask-image: linear-gradient(#000 55%, transparent 98%);
    mask-image: linear-gradient(#000 55%, transparent 98%);
}
.night-inner { position: relative; margin-top: -40px; }
.section-head-dark h2 { color: var(--pine-ink); }
.section-head-dark .section-sub { color: var(--pine-ink-soft); }
.section-head-dark .kicker { color: var(--pine-brand); }

.timeline {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: clamp(26px, 4.5vh, 44px);
    max-width: 760px;
}
.tl-line {
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--pine-line);
    border-radius: 2px;
    overflow: hidden;
}
.tl-line-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(var(--pine-brand), var(--pine-accent));
    transform-origin: top;
    transform: scaleY(0);
}
.tl-item {
    position: relative;
    padding-left: 46px;
    display: grid;
    gap: 8px;
}
.tl-dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--pine-canvas);
    border: 2px solid var(--pine-line-strong);
    transition: border-color .5s ease, box-shadow .5s ease;
}
.tl-item.is-in .tl-dot {
    border-color: var(--pine-brand);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pine-brand) 18%, transparent), 0 0 18px color-mix(in srgb, var(--pine-brand) 45%, transparent);
}
.tl-time {
    font-size: 13.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-variation-settings: 'wght' 640;
    color: var(--pine-accent);
    font-variant-numeric: tabular-nums;
}
.tl-card {
    background: var(--pine-surface);
    border: 1px solid var(--pine-line);
    border-radius: var(--radius-card);
    padding: 20px 24px;
    box-shadow: 0 18px 48px -26px rgb(0 0 0 / .6);
}
.tl-card h3 { font-size: 19px; font-variation-settings: 'wght' 680; margin-bottom: 7px; }
.tl-card p { color: var(--pine-ink-soft); font-size: 15.5px; }

.night-close { margin-top: clamp(40px, 6vh, 64px); text-align: center; }
.night-morning {
    border-radius: var(--radius-card);
    border: 1px solid var(--pine-line);
    margin-bottom: 28px;
    box-shadow: 0 24px 60px -30px rgb(0 0 0 / .65);
}
.night-rule {
    font-size: clamp(19px, 2.2vw, 24px);
    font-variation-settings: 'wght' 660;
    margin-bottom: 22px;
}

/* ── Features ───────────────────────────────────────────────────────────── */
.features { padding: clamp(64px, 10vh, 120px) 0 0; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 22px;
    display: grid;
    gap: 10px;
    align-content: start;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .35s ease, color .35s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    box-shadow: 0 22px 48px -24px rgb(var(--shadow-color) / .4);
}
.feature-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    transition: transform .25s ease;
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 17px; font-variation-settings: 'wght' 660; }
.feature-card p { font-size: 14.5px; color: var(--ink-soft); }
.feature-you {
    margin-top: auto;
    padding-top: 4px;
    font-size: 13.5px;
    color: var(--accent);
    font-variation-settings: 'wght' 600;
}
.features-more {
    margin-top: 26px;
    font-size: 14px;
    color: var(--ink-faint);
    max-width: 72ch;
}

/* ── Gallery ────────────────────────────────────────────────────────────── */
.gallery { padding: clamp(64px, 9vh, 110px) 0 0; }
.gallery .section-head { margin-bottom: 30px; }
.gallery-scroll {
    overflow-x: auto;
    /* No scroll-snap anywhere: snapping yanked the strip to the nearest card
       the moment the pointer was released, undoing the throw. Momentum and the
       rubber-band edge in landing.js do the settling instead, so the rail
       comes to rest exactly where it was let go. */
    overscroll-behavior-x: contain;
    /* The page sets scroll-behavior: smooth globally; that turns every
       scrollLeft write during a drag into an animation, which reads as lag. */
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    /* Draggable: the scrollbar is a fallback, not the only way across. */
    cursor: grab;
    /* The rubber-band translateX lands on this element (transforming a
       descendant of a scroller inflates its scrollWidth). */
    will-change: transform;
}
.gallery-track {
    display: flex;
    gap: 22px;
    /* "safe center" centres the strip when it fits and falls back to
       flex-start when it overflows — without the safe keyword, plain centring
       makes the leading card unreachable once the row is wider than the rail. */
    justify-content: safe center;
    padding: 6px 0 22px max(calc((100vw - 1160px) / 2), 24px);
    /* NEVER width: max-content here. WebKit sizes a flex container's
       max-content from each item's CONTENT contribution — the screenshots'
       intrinsic 1600px — not the definite 86vw/32vw flex-basis the cards
       actually render at. On an iPhone that made this track 6482px wide with
       ~1400px of cards in it: five screens of scrollable dead space (Chromium
       honours flex-basis, which is why desktop checks never caught it). At
       100% the items simply overflow the box, which every engine sizes the
       same way. */
    width: 100%;
}
/* The track's right padding cannot wrap overflowing content (engines disagree
   about trailing padding in scrollers), so the end breathing room is a real
   flex item instead — always counted into scrollWidth, in every browser. */
.gallery-track::after {
    content: '';
    flex: 0 0 max(calc((100vw - 1160px) / 2 - 22px), 2px);
}
.gallery-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}
/* Stop the browser's own image-drag ghost from hijacking the gesture. */
.gallery-scroll.is-dragging img,
.gallery-scroll.is-dragging figcaption { pointer-events: none; }
.gallery-scroll img { -webkit-user-drag: none; user-select: none; }
/* Sized so a wide screen shows three cards with the fourth peeking — enough
   to read the screen, and obvious that the strip continues. */
.shot-card {
    flex: 0 0 clamp(300px, 32vw, 560px);
    margin: 0;
}
/* The screenshots are dense app UI: below a certain size they stop being
   readable and the rail just looks like a row of grey rectangles with dead
   space around them. On phones give one card almost the whole width (the next
   still peeks, so the strip is obviously scrollable) and let the tap open it
   full-screen. */
@media (max-width: 700px) {
    .shot-card { flex: 0 0 86vw; }
    .gallery-track { gap: 14px; padding: 6px 0 18px 16px; }
    .gallery-track::after { flex-basis: 2px; }
}

/* Tap/click to enlarge. */
.shot-card .browser-frame { cursor: zoom-in; }
.shot-card .browser-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    gap: 14px;
    padding: clamp(12px, 4vw, 48px);
    background: color-mix(in srgb, var(--pine-canvas) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .22s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    border: 1px solid var(--pine-line);
    box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8);
    transform: scale(.97);
    transition: transform .28s cubic-bezier(.22,.9,.28,1), opacity .16s ease;
}
.lightbox.is-open img { transform: none; }
/* Navigating between screens: the leaving image slides out toward the
   direction of travel, the next one enters from the other side. The classes
   are staged from landing.js; .lb-snap teleports the swapped image to its
   entry position with transitions off, so only the entry itself animates. */
.lightbox.is-open img.lb-out-next { opacity: 0; transform: translateX(-32px) scale(.985); }
.lightbox.is-open img.lb-out-prev { opacity: 0; transform: translateX(32px) scale(.985); }
.lightbox.is-open img.lb-in-next { opacity: 0; transform: translateX(36px) scale(.985); }
.lightbox.is-open img.lb-in-prev { opacity: 0; transform: translateX(-36px) scale(.985); }
.lightbox img.lb-snap { transition: none !important; }
.lightbox-caption {
    max-width: 60ch;
    text-align: center;
    font-size: 14px;
    color: var(--pine-ink-soft);
}
.lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid var(--pine-line-strong);
    background: var(--pine-surface);
    color: var(--pine-ink);
    cursor: pointer;
}
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-close:hover { background: var(--pine-surface-2); }

/* Prev/next. Pointer devices get the arrows; touch gets the swipe (and the
   arrows would only cover the image on a small screen). */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 1px solid var(--pine-line-strong);
    background: color-mix(in srgb, var(--pine-surface) 90%, transparent);
    color: var(--pine-ink);
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-nav:hover { background: var(--pine-surface-2); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(2px); }
.lightbox-nav[disabled] { opacity: .3; cursor: default; }
.lightbox-nav[disabled]:hover { background: color-mix(in srgb, var(--pine-surface) 90%, transparent); transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
    .lightbox-nav { display: grid; }
}
.browser-frame-sm .browser-bar { padding: 8px 12px; }
.shot-card figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--ink-soft);
    padding-inline: 4px;
}

/* ── SAF-T ──────────────────────────────────────────────────────────────── */
.saft {
    margin-top: clamp(64px, 9vh, 110px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 55%, var(--canvas)), var(--canvas));
    border-block: 1px solid var(--line);
    padding: clamp(56px, 8vh, 96px) 0;
}
.saft-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.saft-copy h2 { font-size: clamp(28px, 4vw, 40px); font-variation-settings: 'wght' 730; margin-bottom: 18px; }
.saft-copy p { color: var(--ink-soft); margin-bottom: 14px; max-width: 54ch; }
.saft-copy strong { color: var(--ink); }
.saft-note {
    display: inline-block;
    font-size: 14px;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 22px;
}
.saft-copy .btn { display: inline-flex; }

.saft-waves {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    position: relative;
}
.saft-waves li {
    position: relative;
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 18px;
    align-items: start;
    padding: 20px 0 20px 0;
}
.saft-waves li + li { border-top: 1px dashed var(--line-strong); }
.wave-year {
    font-size: clamp(24px, 2.6vw, 32px);
    font-variation-settings: 'wght' 740;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.wave-desc { color: var(--ink-soft); font-size: 15.5px; padding-top: 5px; }

/* ── Accountants ────────────────────────────────────────────────────────── */
.pros { padding: clamp(64px, 10vh, 120px) 0 0; }
.pros-inner {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.pros-visual { position: relative; }
.pros-art {
    position: absolute;
    right: -26px;
    bottom: -34px;
    width: clamp(160px, 22vw, 260px);
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px -22px rgb(var(--shadow-color) / .45);
    rotate: 3deg;
}
.pros-copy h2 { font-size: clamp(28px, 4vw, 40px); font-variation-settings: 'wght' 730; margin-bottom: 20px; }
.check-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 14px;
}
.check-list li {
    position: relative;
    padding-left: 34px;
    color: var(--ink-soft);
    font-size: 15.5px;
}
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px; height: 22px;
    border-radius: 7px;
    background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.dark .check-list li::before {
    background-color: var(--brand-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337c8b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { padding: clamp(72px, 10vh, 120px) 0 0; }
.steps-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    counter-reset: step;
}
.step-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 26px 24px 24px;
    display: grid;
    gap: 10px;
    align-content: start;
}
.step-num {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 18px;
    font-variation-settings: 'wght' 700;
    margin-bottom: 6px;
}
.step-card h3 { font-size: 18px; font-variation-settings: 'wght' 670; }
.step-card p { font-size: 15px; color: var(--ink-soft); }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.pricing { padding: clamp(72px, 10vh, 120px) 0 0; }
.pricing .section-head { margin-inline: auto; text-align: center; }
.pricing-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 36px;
}
.seg-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px;
}
.seg-tab {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    padding: 9px 22px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 9px;
    transition: color .25s ease;
    white-space: nowrap;
}
.seg-tab.is-active { color: var(--ink); }
.seg-thumb {
    position: absolute;
    top: 4px; bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    box-shadow: 0 3px 10px -4px rgb(var(--shadow-color) / .3);
    transition: transform .35s cubic-bezier(.35,1.3,.4,1);
}
.seg-tabs[data-active="pro"] .seg-thumb { transform: translateX(100%); }

.annual-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}
.annual-toggle em {
    font-style: normal;
    font-size: 12.5px;
    font-variation-settings: 'wght' 650;
    color: var(--ok);
    background: var(--ok-soft);
    padding: 2.5px 8px;
    border-radius: 999px;
}
.annual-toggle input {
    position: absolute;
    left: 0;
    top: 50%;
    width: 42px;
    height: 24px;
    margin: 0;
    transform: translateY(-50%);
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.annual-toggle .switch {
    width: 42px; height: 24px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    position: relative;
    transition: background-color .25s ease, border-color .25s ease;
}
.annual-toggle .switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 4px rgb(var(--shadow-color) / .3);
    transition: transform .25s cubic-bezier(.35,1.3,.4,1);
}
.annual-toggle input:checked + .switch { background: var(--brand); border-color: var(--brand); }
.annual-toggle input:checked + .switch::after { transform: translateX(18px); }
.annual-toggle input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }

.plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
}
.plans[hidden] { display: none; }
.plans-pro { grid-template-columns: repeat(3, 1fr); max-width: 920px; margin-inline: auto; }
.plan {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 26px 22px 22px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .35s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -22px rgb(var(--shadow-color) / .35); }
.plan-featured {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: 0 24px 54px -24px rgb(var(--shadow-color) / .4);
}
.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12.5px;
    font-variation-settings: 'wght' 650;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 999px;
    padding: 4px 13px;
    box-shadow: 0 6px 16px -6px rgb(15 118 110 / .5);
}
.plan h3 { font-size: 19px; font-variation-settings: 'wght' 700; }
.plan-for { font-size: 13.5px; color: var(--ink-faint); min-height: 2.6em; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 6px; }
.plan-price .amount {
    font-size: 40px;
    font-variation-settings: 'wght' 760;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: opacity .18s ease, transform .18s ease;
}
.plan-price.is-flipping .amount { opacity: 0; transform: translateY(-7px); }
/* The Enterprise configurator's own change signal — see landing.js recalc(). */
.plan-price .amount.is-bumped { animation: amount-bump .3s cubic-bezier(.22,.9,.28,1); }
@keyframes amount-bump {
    from { opacity: .35; transform: translateY(-5px); }
    to { opacity: 1; transform: none; }
}
.plan-price .per { font-size: 14px; color: var(--ink-faint); }
.plan ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.plan li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    color: var(--ink-soft);
}
.plan li::before {
    content: '';
    position: absolute;
    left: 0; top: 3px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.dark .plan li::before {
    background-color: var(--brand-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337c8b4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
/* An ADD-ON, marked with a plus rather than a tick.
   Every other line in this list is a thing the price already buys, and the tick
   says so. A paid extra wearing the same tick is the half-truth a customer only
   catches on the invoice — so it gets its own mark and a quieter colour. */
.plan li.plan-addon {
    color: var(--ink-faint);
}
.plan li.plan-addon::before {
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371827e' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 9px no-repeat;
    border: 1px solid var(--line);
    box-sizing: border-box;
}
.dark .plan li.plan-addon::before {
    background-color: var(--surface-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378918a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.plan .btn { margin-top: auto; width: 100%; }

/* ── Enterprise: the wide one ───────────────────────────────────────────────
   It is the last plan in price order, so in a four-column row it landed alone
   on a second row: one narrow column carrying twice the content of any other
   card, with three empty columns beside it. It takes the whole row instead and
   arranges itself in three — who it is for, what it includes, and the switches
   that shape it. Below 700px the row is one column anyway and this card goes
   back to being a normal stacked one, because three columns of 110px is not a
   layout. */
.plan-enterprise { grid-column: 1 / -1; }
.plan-enterprise .plan-for { min-height: 0; }
.plan-enterprise .ent-list ul { margin-bottom: 0; }
.plan-enterprise .plan-config { margin: 0; }
.ent-label {
    margin: 0 0 9px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

@media (min-width: 701px) {
    .plan-enterprise {
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4.4fr);
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "head list config"
            "cta  list config";
        column-gap: 34px;
        row-gap: 14px;
        align-content: stretch;
    }
    .plan-enterprise .ent-head { grid-area: head; }
    .plan-enterprise .ent-list { grid-area: list; }
    .plan-enterprise .ent-config { grid-area: config; }
    /* The button keeps the bottom of its own column rather than floating in the
       middle of a band that is twice as tall as it is. */
    .plan-enterprise .btn { grid-area: cta; align-self: end; margin-top: 0; }
}

.pricing-notes {
    list-style: none;
    margin: 30px auto 0;
    padding: 0;
    max-width: 720px;
    display: grid;
    gap: 7px;
    text-align: center;
}
.pricing-notes li { font-size: 13.5px; color: var(--ink-faint); }

/* Over the Firm ceiling. Set apart from the notes below it -- those are
   caveats, this is an invitation, and burying it among the small print is how a
   practice with two hundred clients concludes the product cannot take them. */
.pricing-b2b {
    margin: 26px auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 14.5px;
    color: var(--ink-soft);
}
.pricing-b2b a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { padding: clamp(72px, 10vh, 120px) 0 0; }
.faq .section-head { text-align: center; margin-inline: auto; }
.faq-list { display: grid; gap: 10px; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: clip;
    transition: border-color .25s ease, background-color .35s ease;
}
.faq-item.is-open { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.faq-item h3 { margin: 0; }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 16.5px;
    font-variation-settings: 'wght' 620;
    color: var(--ink);
    padding: 18px 20px;
    cursor: pointer;
}
.faq-q svg {
    flex: none;
    width: 19px; height: 19px;
    color: var(--ink-faint);
    transition: transform .35s cubic-bezier(.35,1.3,.4,1), color .25s ease;
}
.faq-item.is-open .faq-q svg { transform: rotate(180deg); color: var(--brand); }
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.22,.9,.28,1);
}
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
    padding: 0 20px 20px;
    color: var(--ink-soft);
    font-size: 15.5px;
    max-width: 68ch;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.cta-final { padding: clamp(80px, 11vh, 130px) 0 clamp(60px, 8vh, 90px); }
.cta-panel {
    position: relative;
    text-align: center;
    background: var(--pine-canvas);
    color: var(--pine-ink);
    border-radius: 24px;
    border: 1px solid var(--pine-line);
    padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 72px);
    overflow: clip;
}
.cta-glow {
    position: absolute;
    inset: -40% -20%;
    background:
        radial-gradient(ellipse at 30% 120%, color-mix(in srgb, var(--pine-brand) 26%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 75% -10%, color-mix(in srgb, var(--pine-accent) 20%, transparent) 0%, transparent 50%);
    pointer-events: none;
}
.cta-panel h2 {
    position: relative;
    font-size: clamp(30px, 4.6vw, 48px);
    font-variation-settings: 'wght' 750;
    margin-bottom: 14px;
}
.cta-panel > p { position: relative; color: var(--pine-ink-soft); font-size: 17px; }
.cta-row { position: relative; margin-top: 28px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-panel .btn-primary { background: var(--pine-brand); color: #052420; }
.cta-panel .btn-primary:hover { background: #63dcca; box-shadow: 0 12px 34px -10px rgb(55 200 180 / .5); }
.cta-demo {
    position: relative;
    margin-top: 26px;
    font-size: 13.5px;
    color: var(--pine-ink-faint);
}
.cta-demo a { color: var(--pine-brand); }
.cta-demo code {
    background: var(--pine-surface);
    border-color: var(--pine-line);
    color: var(--pine-ink-soft);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--line);
    padding: clamp(40px, 6vh, 64px) 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 36px;
    padding-bottom: 40px;
}
.footer-brand p { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); max-width: 34ch; }
.footer-brand .footer-made { font-size: 13px; color: var(--ink-faint); }
/* Social. Icon-only links, so each carries its own aria-label and a 44px
   box — the WCAG target floor for a thumb, which a 20px glyph is not. These
   are the only links on the site that open a new tab: everything else here
   leads deeper into Autonify, and these lead away from it. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}
.footer-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink-soft);
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
}
.footer-social svg { width: 20px; height: 20px; }
.footer-col { display: grid; gap: 9px; align-content: start; }
.footer-col h4 {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 5px;
}
.footer-col a {
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 14.5px;
    width: fit-content;
}
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 18px 0 26px;
    font-size: 13px;
    color: var(--ink-faint);
}

/* ── Reveal-on-scroll system ────────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s cubic-bezier(.22,.9,.28,1), transform .75s cubic-bezier(.22,.9,.28,1);
    transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── Theme wipe (View Transitions) ─────────────────────────────────────────
   Ported from the app (backend/resources/css/app.css), where this was already
   hardened against real-browser behaviour. The clip-path is driven from
   landing.js with LITERAL px coordinates via the Web Animations API — custom
   properties do not reliably reach ::view-transition-* pseudos and silently
   re-centre the reveal.

   Disable ONLY the old/new cross-fade, never the group or image-pair:
   disabling the group leaves the snapshot un-positioned in real browsers, so
   the clip origin and coverage drift (it looks correct only in headless). */
::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
/* Direction just stacks the animating snapshot on top. Going dark, the NEW
   (dark) snapshot is on top and grows out of the button; going light, the OLD
   (dark) snapshot is on top and shrinks back into it, uncovering the light
   theme underneath. */
html[data-theme-anim='dark']::view-transition-old(root) { z-index: 0; }
html[data-theme-anim='dark']::view-transition-new(root) { z-index: 1; }
html[data-theme-anim='light']::view-transition-new(root) { z-index: 0; }
html[data-theme-anim='light']::view-transition-old(root) { z-index: 1; }

/* While the wipe plays, freeze every element's own colour transition. The
   surfaces below carry a .35s background/border transition; without this the
   API snapshots them mid-fade, so patches of the page stay in the OLD theme
   under the reveal and only catch up once it finishes. data-theme-anim sits on
   <html> for the ~0.5s the transition runs. */
html[data-theme-anim] *,
html[data-theme-anim] *::before,
html[data-theme-anim] *::after {
    transition: none !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .main-nav, .header-login { display: none; }
    .nav-burger {
        display: grid;
        gap: 4.5px;
        place-content: center;
        width: 40px; height: 40px;
        background: transparent;
        border: 1px solid var(--line);
        border-radius: 10px;
        cursor: pointer;
    }
    .nav-burger span {
        width: 17px; height: 1.8px;
        border-radius: 2px;
        background: var(--ink);
        transition: transform .25s ease, opacity .2s ease;
    }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.3px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.3px) rotate(-45deg); }
    .header-row { gap: 12px; }
    .header-actions { margin-left: auto; }
    .mobile-nav {
        display: grid;
        gap: 2px;
        padding: 10px 24px 20px;
        border-bottom: 1px solid var(--line);
        background: color-mix(in srgb, var(--canvas) 92%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    .mobile-nav[hidden] { display: none; }
    .mobile-nav a {
        text-decoration: none;
        color: var(--ink);
        font-size: 17px;
        padding: 11px 4px;
        border-bottom: 1px solid var(--line);
    }
    .mobile-nav-cta { display: flex; gap: 10px; margin-top: 16px; }
    .mobile-nav-cta .btn { flex: 1; }

    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { order: 2; max-width: 720px; }
    .hero-rings { right: -30%; opacity: .35; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .plans { grid-template-columns: repeat(2, 1fr); }
    .plans-pro { grid-template-columns: repeat(3, 1fr); }
    .saft-inner, .pros-inner { grid-template-columns: 1fr; }
    .pros-visual { order: 2; }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

@media (max-width: 700px) {
    body { font-size: 16px; }
    .shell { width: calc(100% - 36px); }
    .header-actions .btn-primary { display: none; }
    .header-row { gap: 10px; }
    .hero { padding-top: 28px; }
    .hero-trust { grid-template-columns: 1fr; gap: 10px; }
    .hero-cta .btn { width: 100%; }
    .steps-row, .plans, .plans-pro { grid-template-columns: 1fr; }
    .plan-featured { order: -1; }
    .feature-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .stat-label { max-width: none; }
    .hero-toasts { top: 44px; right: 8px; }
    .pros-art { right: 0; bottom: -26px; }
    .pricing-controls { flex-direction: column; gap: 16px; }
    .night-inner { margin-top: -20px; }
}

/* ── Reduced motion: the kill-switch ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .anim-item, [data-reveal] { opacity: 1 !important; transform: none !important; }
    .hero-underline path { stroke-dashoffset: 0; }
    .tl-line-fill { transform: none !important; }
    .toast { opacity: 0; }
    .toast:first-child { opacity: 1; transform: none; }
    .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ── Enterprise configurator ───────────────────────────────────────────────
   Lives inside the plan card, so it borrows the card's own surface rather than
   introducing a second visual language halfway down the pricing table. */
.plan-config {
    margin: 10px 0 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
    display: grid;
    gap: 8px;
}
.plan-config .config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ink-soft);
}
.plan-config .config-row input {
    width: 5.5rem;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    /* 16px on phones: anything smaller makes iOS zoom the whole page on focus. */
    font-size: 16px;
}
.plan-config .config-legend {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--ink-faint);
}
.plan-config .config-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.35;
}
.plan-config .config-check input {
    margin-top: 2px;
    flex: none;
    /* Otherwise the tick is the browser default blue, which is the one colour
       on the page that belongs to nobody. */
    accent-color: var(--brand);
}
.plan-config .config-total {
    margin: 4px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 16px;
    font-variation-settings: 'wght' 700;
    color: var(--ink);
}
.plan-config .config-per { font-size: 12.5px; font-variation-settings: 'wght' 400; color: var(--ink-faint); }

/* ==========================================================================
   Answer hub (/answers/, /en/answers/)

   Long-form pages built for reading and for being quoted. The measure is
   capped in ch rather than px so it holds at any font size, and every wide
   thing (tables) scrolls inside its own box - a page that scrolls sideways on
   a phone is the mobile trap this project has shipped more than once.
   ========================================================================== */

.answers-main {
    padding: 2.5rem 0 4rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-bottom: 1.5rem;
}

.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }

.answers-hero {
    max-width: 46rem;
    margin-bottom: 2.5rem;
}

.answers-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.answers-hero p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

.answers-index {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}

.answers-index a {
    display: block;
    height: 100%;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.answers-index a:hover { border-color: var(--brand); transform: translateY(-2px); }
.answers-index h2 { font-size: 1.05rem; margin: 0 0 0.4rem; line-height: 1.3; }
.answers-index p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.answer {
    /* 68ch keeps a line at the length people actually read comfortably. */
    max-width: 68ch;
}

.answer h1 {
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

/*
   The lead is the answer. It is styled to be visibly the answer, because a
   reader who only reads one paragraph should still leave with the right one.
*/
.answer-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink);
    border-inline-start: 3px solid var(--accent);
    padding-inline-start: 1rem;
    margin: 0 0 2rem;
}

.answer h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 2.25rem 0 0.75rem;
}

.answer p { line-height: 1.7; color: var(--ink-soft); margin: 0 0 1rem; }
.answer strong { color: var(--ink); }

.answer-note {
    background: var(--surface-2);
    border-radius: 0.75rem;
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
}

.answer-list { padding-inline-start: 1.15rem; margin: 0 0 1rem; }
.answer-list li { line-height: 1.7; color: var(--ink-soft); margin-bottom: 0.4rem; }

/* The table scrolls; the page never does. */
.answer-table-wrap {
    overflow-x: auto;
    margin: 0 0 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.answer-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 30rem; }
.answer-table th,
.answer-table td { text-align: start; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.answer-table th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.answer-table tbody tr:last-child td { border-bottom: 0; }

.answer-meta,
.answer-disclaimer {
    font-size: 0.82rem;
    color: var(--ink-faint);
    line-height: 1.6;
    margin: 1.5rem 0 0;
}

.answer-disclaimer { margin-top: 0.5rem; }

.answer-cta {
    margin: 2.5rem 0 0;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}

.answer-cta h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.answer-cta p { margin: 0 0 1rem; color: var(--ink-soft); }

.answer-also { margin-top: 2.5rem; }
.answer-also h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.answer-also ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.answer-also a { color: var(--brand); text-decoration: none; }
.answer-also a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .answers-main { padding-top: 1.5rem; }
    .answer-lead { font-size: 1.05rem; }
}

/*
   The home page hides the header CTA below 700px because a burger menu is
   competing for the same row. The answer pages have no burger - their nav is
   three links and the mobile nav does not exist - so the row has space, and
   hiding the one route into the product on a page a stranger arrived at from a
   search result is the wrong trade.
*/
@media (max-width: 700px) {
    .answers-page .header-actions .btn-primary {
        display: inline-flex;
        padding-inline: 0.85rem;
        font-size: 0.85rem;
    }

    .answers-page .main-nav { display: none; }
}