/* =============================================================================
   WorkTrack Pro — public site design system
   -----------------------------------------------------------------------------
   Loaded by layouts/public.blade.php. No web fonts, no CDNs, no build step:
   everything here must work from a static file on shared hosting.

   Palette is deliberately NOT the default Bootstrap blue. Deep green reads as
   trustworthy/established, clay adds warmth. Both are Super Admin editable
   (admin/settings) and are injected as --brand / --accent on :root.

   Structure
     1. Tokens          6. Feature ledger   11. CTA
     2. Reset & base    7. Dark band        12. Footer
     3. Layout          8. Steps            13. Legal document
     4. Typography      9. Integrations     14. Motion & a11y
     5. Nav            10. Product preview  15. Print
   ========================================================================== */

/* 1. Tokens ============================================================== */
/*
 * Aurora identity.
 *
 * Vivid violet with a cyan second stop, hot-pink and amber accents, and colour
 * cast into the shadows so surfaces look lit rather than printed. The brand
 * colour is overridable from Super Admin -> Platform Settings, which replaces
 * --brand; --brand-2 anchors the far side of every gradient so a rebrand still
 * produces a coherent gradient instead of two flat colours.
 */
:root {
    --brand: #5b2bff;
    --brand-2: #00c8ff;
    --brand-strong: #3a12b8;
    --brand-tint: #f1ebff;

    --accent: #ff3d77;
    --accent-2: #ff9f1c;
    --accent-tint: #ffeef3;

    --grad-brand: linear-gradient(120deg, var(--brand), var(--brand-2));
    --grad-accent: linear-gradient(120deg, var(--accent), var(--accent-2));
    --grad-ink: linear-gradient(120deg, var(--brand), var(--accent));

    --paper: #fbfaff;
    --surface: #ffffff;
    --night: #150a2e;
    --night-2: #241045;

    --ink: #12101f;
    --ink-soft: #4b4760;
    --ink-faint: #7d7893;
    --on-night: #f4f0ff;
    --on-night-soft: #bdb2e0;

    --line: rgba(18, 16, 31, .11);
    --line-strong: rgba(18, 16, 31, .24);
    --line-night: rgba(255, 255, 255, .14);

    --radius: 10px;
    --radius-lg: 20px;
    /* Shadows carry the brand hue. A neutral grey shadow on a violet surface
       reads as dirt; this reads as light. */
    --shadow-sm: 0 1px 2px rgba(21, 10, 46, .06), 0 6px 18px -8px rgba(91, 43, 255, .28);
    --shadow-md: 0 2px 4px rgba(21, 10, 46, .06), 0 14px 32px -12px rgba(91, 43, 255, .34);
    --shadow-lg: 0 30px 70px -24px rgba(91, 43, 255, .48), 0 4px 12px rgba(21, 10, 46, .08);
    --glow: 0 12px 30px -10px rgba(91, 43, 255, .65);

    --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
    --serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, "Times New Roman", serif;

    --wrap: 1160px;
    --wrap-narrow: 780px;
    --gutter: clamp(1.15rem, 4vw, 2.5rem);
    --nav-h: 70px;

    --step--1: clamp(.82rem, .79rem + .15vw, .9rem);
    --step-0: clamp(1rem, .96rem + .2vw, 1.075rem);
    --step-1: clamp(1.2rem, 1.12rem + .4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.3rem + .75vw, 1.85rem);
    --step-3: clamp(1.9rem, 1.55rem + 1.5vw, 2.75rem);
    --step-4: clamp(2.5rem, 1.7rem + 3.4vw, 4.35rem);

    /* One easing curve everywhere, so every transition feels like one product. */
    --ease: cubic-bezier(.22, 1, .36, 1);

    color-scheme: light;
}

/* 2. Reset & base ======================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); }

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

::selection { background: var(--brand); color: #fff; }

/* 3. Layout ============================================================= */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--flush-b { padding-bottom: 0; }

.rule { height: 1px; background: var(--line); border: 0; }

/* 4. Typography ========================================================= */
h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.012em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -.028em; }
h2 { font-size: var(--step-3); letter-spacing: -.02em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-soft);
    letter-spacing: -.011em;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--sans);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 1.15rem;
}
.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--accent);
}

.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.tnum { font-variant-numeric: tabular-nums; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { margin-bottom: .45em; }

/* 5. Nav ================================================================ */
.skip {
    position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
    background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 200;
    border-radius: 0 0 var(--radius) var(--radius); transition: top .18s ease;
    text-decoration: none;
}
.skip:focus { top: 0; color: #fff; }

.nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(246, 244, 239, .86);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav__inner {
    min-height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}
.brand {
    display: inline-flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--ink);
    font-weight: 680; font-size: 1.06rem; letter-spacing: -.02em;
    font-family: var(--sans);
}
.brand__mark { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.brand__name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__link {
    font-size: var(--step--1); font-weight: 550; color: var(--ink-soft);
    text-decoration: none; letter-spacing: -.005em;
}
.nav__link:hover { color: var(--ink); }
.nav__toggle {
    display: none; background: none; border: 1px solid var(--line-strong);
    border-radius: var(--radius); padding: .4rem .6rem; cursor: pointer;
    color: var(--ink); font-size: .95rem; line-height: 1;
}

/* 6. Buttons ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem;
    padding: .74rem 1.35rem;
    font-family: var(--sans); font-size: var(--step-0); font-weight: 600;
    letter-spacing: -.01em; line-height: 1.2;
    border: 1px solid transparent; border-radius: var(--radius);
    text-decoration: none; cursor: pointer;
    transition: background-color .16s ease, color .16s ease,
                border-color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-strong); color: #fff; }

.btn--ghost {
    background: transparent; color: var(--ink);
    border-color: var(--line-strong);
}
.btn--ghost:hover { background: rgba(20, 24, 28, .05); color: var(--ink); }

.btn--onnight { background: var(--accent); color: #fff; }
.btn--onnight:hover { background: #a9461f; color: #fff; }

.btn--sm { padding: .5rem .95rem; font-size: var(--step--1); }
.btn--lg { padding: .9rem 1.7rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.textlink {
    font-weight: 600; text-decoration: none;
    border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
}
.textlink:hover { border-color: var(--brand); }

/* 7. Hero =============================================================== */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.hero__grid {
    display: grid; gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
}
.hero h1 { margin-bottom: .3em; }
.hero .lede { max-width: 46ch; }
.hero__cta { margin-top: 2rem; }
.hero__meta {
    margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: .4rem 1.75rem;
    font-size: var(--step--1); color: var(--ink-faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* 8. Product preview (pure CSS, no image payload) ======================= */
.preview {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-size: 11px;
}
.preview__bar {
    display: flex; align-items: center; gap: .4rem;
    padding: .6rem .8rem; background: var(--night); border-bottom: 1px solid var(--line-night);
}
.preview__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.24); }
.preview__bar i:first-child { background: var(--accent); }
.preview__url {
    margin-left: .5rem; flex: 1; background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.62); border-radius: 3px; padding: .18rem .5rem;
    font-size: 10px; letter-spacing: .02em;
}
.preview__body { display: grid; grid-template-columns: 108px 1fr; min-height: 300px; }
.preview__side { background: var(--night); padding: .85rem .6rem; display: grid; gap: .3rem; align-content: start; }
.preview__side b {
    color: rgba(255,255,255,.5); font-size: 8.5px; letter-spacing: .14em;
    text-transform: uppercase; margin: .35rem 0 .3rem; font-weight: 650;
}
.preview__nav {
    color: rgba(255,255,255,.72); padding: .3rem .45rem; border-radius: 3px;
    display: flex; align-items: center; gap: .4rem; font-size: 10.5px;
}
.preview__nav::before {
    content: ""; width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 2px;
}
.preview__nav.is-on { background: rgba(255,255,255,.11); color: #fff; }
.preview__nav.is-on::before { border-color: var(--accent); background: var(--accent); }

.preview__main { padding: .95rem; background: #fbfaf7; }
.preview__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.preview__stat { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: .5rem .55rem; }
.preview__stat span { display: block; color: var(--ink-faint); font-size: 9px; letter-spacing: .04em; }
.preview__stat strong { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.preview__stat em { font-style: normal; color: var(--brand); font-size: 9px; font-weight: 650; }

.preview__table { background: #fff; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.preview__row {
    display: grid; grid-template-columns: 1.5fr 1fr .8fr; gap: .5rem;
    padding: .48rem .55rem; border-bottom: 1px solid var(--line); align-items: center;
}
.preview__row:last-child { border-bottom: 0; }
.preview__row--head { background: #faf9f6; color: var(--ink-faint); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 650; }
.preview__who { display: flex; align-items: center; gap: .4rem; font-weight: 550; color: var(--ink); }
.preview__av { width: 16px; height: 16px; border-radius: 50%; background: var(--brand-tint); border: 1px solid var(--line); flex: none; }
.tag {
    justify-self: start; font-size: 8.5px; font-weight: 680; letter-spacing: .05em;
    text-transform: uppercase; padding: .12rem .4rem; border-radius: 999px;
    background: var(--brand-tint); color: var(--brand);
}
.tag--wait { background: var(--accent-tint); color: var(--accent); }
.tag--done { background: #e8f0ea; color: #2f6b4f; }

/* 9. Feature ledger (replaces the three-identical-cards trope) ========== */
.ledger { border-top: 1px solid var(--line); }
.ledger__item {
    display: grid; gap: .35rem 2rem;
    grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
    padding: clamp(1.35rem, 2.6vw, 1.9rem) 0;
    border-bottom: 1px solid var(--line);
    transition: background-color .18s ease;
}
.ledger__item:hover { background: rgba(255, 255, 255, .55); }
.ledger__num {
    font-family: var(--serif); font-size: var(--step-1); font-weight: 600;
    color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.35;
}
.ledger__title { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; margin: 0; letter-spacing: -.015em; }
.ledger__body { color: var(--ink-soft); margin: 0; }

/* 10. Dark band ========================================================= */
.band {
    background: var(--night);
    background-image:
        radial-gradient(760px 320px at 12% -10%, rgba(198, 85, 43, .18), transparent 62%),
        radial-gradient(620px 300px at 92% 110%, rgba(31, 77, 61, .55), transparent 60%);
    color: var(--on-night);
    border-block: 1px solid var(--line-night);
}
.band h2, .band h3 { color: #fff; }
.band .lede, .band p { color: var(--on-night-soft); }
.band .eyebrow { color: #d9e4df; }

.grid-3 { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-2 { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.pillar { border-top: 2px solid var(--accent); padding-top: 1.1rem; }
.pillar h3 { font-size: var(--step-1); margin-bottom: .4em; }
.pillar p { font-size: var(--step--1); line-height: 1.6; }

/* 11. Steps ============================================================= */
.steps { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
.step { padding: clamp(1.4rem, 3vw, 2rem); border-left: 1px solid var(--line); position: relative; }
.step:first-child { border-left: 0; padding-left: 0; }
.step::before {
    counter-increment: step; content: "Step " counter(step);
    display: block; font-size: var(--step--1); font-weight: 680;
    letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
    margin-bottom: .75rem;
}
.step h3 { font-size: var(--step-1); margin-bottom: .35em; }
.step p { color: var(--ink-soft); font-size: var(--step--1); }

/* 12. Integrations ====================================================== */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 999px; padding: .5rem 1rem;
    font-size: var(--step--1); font-weight: 550; color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.chip--off::before { background: var(--line-strong); }

/* 13. CTA =============================================================== */
.cta {
    background: var(--brand); color: #fff;
    border-radius: var(--radius-lg); padding: clamp(2.25rem, 5vw, 3.5rem);
    display: grid; gap: 1.5rem; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.cta::after {
    content: ""; position: absolute; inset: auto -60px -90px auto;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.cta h2 { color: #fff; margin-bottom: .3em; }
.cta p { color: rgba(255, 255, 255, .82); margin: 0; }
.cta .btn--ghost { background: #fff; color: var(--brand); border-color: #fff; }
.cta .btn--ghost:hover { background: rgba(255,255,255,.88); }

/* 14. Footer ============================================================ */
.footer {
    background: var(--surface); border-top: 1px solid var(--line);
    padding-block: clamp(2.5rem, 5vw, 3.75rem) 1.75rem;
    font-size: var(--step--1);
}
.footer__grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.footer h4 {
    font-family: var(--sans); font-size: var(--step--1); font-weight: 680;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: .9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--brand); text-decoration: underline; }
.footer__about { color: var(--ink-soft); max-width: 40ch; }
.footer__base {
    margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
    color: var(--ink-faint);
}

/* 15. Legal document ==================================================== */
.doc { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 230px) minmax(0, 1fr); align-items: start; }
.doc__aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.doc__back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; margin-bottom: 1.25rem; }
.doc__toc { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; border-left: 1px solid var(--line); }
.doc__toc a {
    display: block; padding: .4rem 0 .4rem .9rem; margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--ink-faint); text-decoration: none; font-size: var(--step--1);
    line-height: 1.4;
}
.doc__toc a:hover { color: var(--ink); border-color: var(--line-strong); }
.doc__toc a.is-active { color: var(--brand); border-color: var(--accent); font-weight: 600; }

.doc__head { border-bottom: 2px solid var(--ink); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
.doc__head h1 { margin-bottom: .35em; }
.doc__stamp { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: var(--step--1); color: var(--ink-faint); }

.doc__body section { scroll-margin-top: calc(var(--nav-h) + 1.5rem); margin-bottom: 2.5rem; }
.doc__body h2 {
    font-size: var(--step-2); display: flex; gap: .85rem; align-items: baseline;
    margin-bottom: .7em; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.doc__body h2::before {
    content: attr(data-n); font-family: var(--sans); font-size: var(--step--1);
    font-weight: 700; color: var(--accent); letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.doc__body h3 { font-size: var(--step-1); margin-top: 1.6em; }
.doc__body ul, .doc__body ol { padding-left: 1.25rem; margin: 0 0 1.1em; }
.doc__body li { margin-bottom: .5em; }
.doc__body li::marker { color: var(--accent); }

.callout {
    background: var(--brand-tint); border-left: 3px solid var(--brand);
    padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.5rem 0; font-size: var(--step--1);
}
.callout--warn { background: var(--accent-tint); border-color: var(--accent); }
.callout strong { display: block; margin-bottom: .3em; }

.contact-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 1.75rem);
    box-shadow: var(--shadow-sm);
}
.contact-card dl { display: grid; gap: .15rem 1.5rem; margin: 0; grid-template-columns: max-content 1fr; }
.contact-card dt { color: var(--ink-faint); font-size: var(--step--1); }
.contact-card dd { margin: 0; font-weight: 550; }

/* 16. Auth pages ======================================================== */
/*
   The auth screens are still Bootstrap-rendered (they are server-rendered
   form partials shared with the rest of the app). Bootstrap's primary is a
   different blue, so the controls are re-tuned here to the brand palette —
   otherwise the button, checkbox and focus rings fight the rest of the page.
*/
.auth .btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.auth .btn-primary:hover,
.auth .btn-primary:focus,
.auth .btn-primary:active {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    color: #fff;
}
.auth .btn-primary:disabled,
.auth .btn-primary.disabled { opacity: .65; }

.auth .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.auth .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .22rem var(--brand-tint);
}
.auth .form-control:focus,
.auth .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .22rem var(--brand-tint);
}
.auth .form-label { font-weight: 550; font-size: var(--step--1); }
.auth a { color: var(--brand); }
.auth a:hover { color: var(--brand-strong); }

/* Show/hide password control (wired up in resources/js/app.js). */
.auth .wt-pw { position: relative; }
.auth .wt-pw .form-control { padding-right: 4.4rem; }
.auth .wt-pwtoggle {
    position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .35rem;
    background: transparent; border: 0; margin: 0; padding: .35rem .5rem;
    border-radius: .4rem; cursor: pointer;
    color: var(--ink-faint); font-size: .85rem; line-height: 1;
}
.auth .wt-pwtoggle:hover { color: var(--brand); background: var(--brand-tint); }
.auth .wt-pwtoggle[aria-pressed="true"] { color: var(--brand); }
/* Lights up when Caps Lock is on while typing - invisible otherwise. */
.auth .wt-pwtoggle.is-caps { color: var(--accent); }

.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 460px at 82% -12%, var(--brand-tint), transparent 62%),
        radial-gradient(700px 420px at 8% 108%, var(--accent-tint), transparent 60%),
        var(--paper);
}

/*
 * Two panes from 992px up: a dark brand panel on the left carries the product
 * story, the form sits in a quiet column on the right. Below that it collapses
 * to a single column with a compact header, which is what a phone at a counter
 * actually gets.
 */
.auth__shell {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.auth__aside {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: clamp(2rem, 4vw, 3.25rem);
    color: var(--on-night);
    background: var(--night);
    background-image:
        radial-gradient(680px 320px at 8% -12%, rgba(198, 85, 43, .26), transparent 62%),
        radial-gradient(560px 300px at 96% 108%, rgba(31, 77, 61, .6), transparent 60%);
    border-right: 1px solid var(--line-night);
}

.auth__aside-list {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}
.auth__aside-list li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: .6rem;
    align-items: start;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--on-night-soft);
}
.auth__aside-list li::before {
    content: "";
    width: 1.4rem; height: 1.4rem; margin-top: .1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
}

.auth__main {
    display: flex;
    flex-direction: column;
    padding: 1.25rem var(--gutter) 2rem;
    min-width: 0;
}
.auth__top { margin-bottom: 1.5rem; }
.auth__top .brand { margin-inline: auto; }

.auth__panel {
    width: min(100%, 430px);
    margin: auto;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}
.auth__panel--wide { width: min(100%, 780px); }
.auth__panel h1 { font-size: var(--step-2); margin-bottom: .3em; }
.auth__sub { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 1.75rem; }

.auth__foot {
    padding: 1.25rem var(--gutter) 1.75rem; text-align: center;
    font-size: var(--step--1); color: var(--ink-faint);
}
.auth__foot a { color: var(--ink-soft); }

.auth__aside .brand { color: #fff; }
.auth__aside .eyebrow { color: #d9e4df; margin-bottom: .9rem; }
.auth__aside h2 {
    font-family: var(--serif);
    font-size: var(--step-3);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}
.auth__aside-note { font-size: var(--step--1); color: var(--on-night-soft); margin: 0; }
.auth__aside-note a { color: #d9e4df; }

@media (min-width: 992px) {
    .auth__shell { grid-template-columns: minmax(0, 42%) minmax(0, 58%); }
    .auth__aside { display: flex; }
    .auth__top { display: none; }
}

/* 19. App boot: splash, progress bar, update prompt ====================== */
.wt-boot {
    position: fixed; inset: 0; z-index: 1080;
    display: grid; place-items: center;
    background: var(--paper);
    transition: opacity .35s ease, visibility .35s ease;
}
.wt-boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.wt-boot__inner { display: grid; justify-items: center; gap: 1rem; text-align: center; padding: 1.5rem; }
.wt-boot__logo {
    width: 88px; height: 88px; border-radius: 22px;
    box-shadow: var(--shadow-lg);
    animation: wt-pop .5s cubic-bezier(.2, .8, .3, 1) both;
}
.wt-boot__name {
    font-family: var(--serif); font-size: var(--step-1); font-weight: 600;
    letter-spacing: -.015em; margin: 0; color: var(--ink);
    animation: wt-fade .45s ease .1s both;
}

.wt-boot__loader {
    width: 132px; height: 3px; border-radius: 999px;
    background: rgba(20, 24, 28, .12); overflow: hidden;
}
.wt-boot__loader span {
    display: block; width: 42%; height: 100%; border-radius: inherit;
    background: var(--brand);
    animation: wt-slide 1.1s ease-in-out infinite;
}

@keyframes wt-pop { from { opacity: 0; transform: scale(.86) translateY(10px) } to { opacity: 1; transform: none } }
@keyframes wt-fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes wt-slide { 0% { transform: translateX(-105%) } 100% { transform: translateX(250%) } }

.wt-bootbar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1079;
    overflow: hidden; pointer-events: none;
    opacity: 0; transition: opacity .3s ease;
}
.wt-bootbar::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 38%;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    animation: wt-bar 1.05s ease-in-out infinite;
}
.wt-bootbar.is-on { opacity: 1; }
.wt-bootbar.is-done { opacity: 0; }
@keyframes wt-bar {
    0% { transform: translateX(-100%) }
    100% { transform: translateX(365%) }
}

.wt-update {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1080;
    animation: wt-fade .3s ease both;
}
.wt-update__btn {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--night); color: var(--on-night);
    border: 0; border-radius: 999px; padding: .6rem .5rem .6rem 1.1rem;
    font: inherit; font-size: var(--step--1); cursor: pointer;
    box-shadow: var(--shadow-lg);
}
.wt-update__btn strong {
    background: #fff; color: var(--ink); border-radius: 999px;
    padding: .3rem .8rem; font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
    .wt-boot { display: none; }
    .wt-boot__logo, .wt-boot__name { animation: none; }
}

/* 17. Motion & accessibility =========================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .btn:hover { transform: none; }
}

@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; }
    .doc { grid-template-columns: 1fr; }
    .doc__aside { position: static; }
    .doc__toc { display: none; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta { grid-template-columns: 1fr; }
    .ledger__item { grid-template-columns: 2.75rem 1fr; }
    .ledger__body { grid-column: 2; }
    .step { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; }
    .step:first-child { border-top: 0; }
}

@media (max-width: 720px) {
    .nav__links {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--line);
        padding: .5rem var(--gutter) 1rem; box-shadow: var(--shadow-sm);
    }
    .nav__links.is-open { display: flex; }
    .nav__links .nav__link { padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--step-0); }
    .nav__links .btn { margin-top: .75rem; }
    .nav__toggle { display: inline-flex; }
    .nav { position: sticky; }
    .footer__grid { grid-template-columns: 1fr; }
    .preview__body { grid-template-columns: 1fr; }
    .preview__side { display: none; }
}

/* 18. Print — legal pages are often printed or saved as PDF ============ */
@media print {
    :root { --paper: #fff; }
    .nav, .footer, .doc__aside, .skip, .cta, .btn { display: none !important; }
    body { background: #fff; font-size: 11pt; line-height: 1.5; }
    .doc { display: block; }
    .wrap, .wrap-narrow { width: 100%; }
    .doc__body section { break-inside: avoid-page; margin-bottom: 1.4rem; }
    h1, h2, h3 { break-after: avoid; }
    a { color: #000; text-decoration: underline; }
    .doc__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ==========================================================================
   19. Vivid layer
   --------------------------------------------------------------------------
   Everything above is the structural system; this is the personality. It is
   wrapped in @media screen so print output stays plain black on white, and it
   deliberately overrides earlier rules at equal specificity rather than
   editing them, so the layout can be reasoned about on its own.

   The legal documents get colour only in their chrome and clause numbers:
   those pages are read at length and printed, and the job there is
   legibility, not delight.
   ========================================================================== */

@media screen {

    /* --- Ambient light --------------------------------------------------- */
    .aurora {
        position: absolute;
        inset: -18% -10% auto -10%;
        height: 760px;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
    }
    .aurora i {
        position: absolute;
        display: block;
        border-radius: 50%;
        will-change: transform;
    }
    .aurora i:nth-child(1) {
        width: 520px; height: 520px; top: -120px; left: -60px;
        opacity: .5;
        background: radial-gradient(circle at 30% 30%, var(--brand), transparent 68%);
        animation: drift-a 17s var(--ease) infinite alternate;
    }
    .aurora i:nth-child(2) {
        width: 460px; height: 460px; top: -40px; right: -40px;
        opacity: .42;
        background: radial-gradient(circle at 60% 40%, var(--brand-2), transparent 68%);
        animation: drift-b 21s var(--ease) infinite alternate;
    }
    .aurora i:nth-child(3) {
        width: 420px; height: 420px; top: 190px; left: 42%;
        opacity: .3;
        background: radial-gradient(circle at 50% 50%, var(--accent), transparent 66%);
        animation: drift-c 25s var(--ease) infinite alternate;
    }

    @keyframes drift-a {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(90px, 70px, 0) scale(1.14); }
    }
    @keyframes drift-b {
        from { transform: translate3d(0, 0, 0) scale(1.08); }
        to   { transform: translate3d(-110px, 60px, 0) scale(.92); }
    }
    @keyframes drift-c {
        from { transform: translate3d(0, 0, 0) scale(.95); }
        to   { transform: translate3d(70px, -60px, 0) scale(1.2); }
    }

    /* The hero hosts the ambient light, so it needs its own stacking context
       and must clip the blobs that drift past its edges. */
    .hero { position: relative; overflow: hidden; }
    .hero__grid { position: relative; z-index: 1; }

    /* --- Brand tile ------------------------------------------------------ */
    .brand__mark {
        background: var(--grad-brand);
        box-shadow: var(--glow);
    }
    .brand__mark rect:first-child { fill: transparent; }

    /* --- Chrome ---------------------------------------------------------- */
    .nav {
        background: color-mix(in srgb, var(--paper) 80%, transparent);
        border-bottom-color: transparent;
        box-shadow: 0 1px 0 var(--line);
    }
    /* A moving gradient hairline along the very top: the one piece of motion
       permanently on screen, so the page is never completely static. */
    .nav::before {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent), var(--accent-2), var(--brand));
        background-size: 300% 100%;
        animation: sheen 9s linear infinite;
    }
    @keyframes sheen {
        from { background-position: 0 0; }
        to   { background-position: 300% 0; }
    }

    .nav__link { position: relative; }
    .nav__link::after {
        content: "";
        position: absolute;
        left: 0; right: 100%; bottom: -6px;
        height: 2px;
        border-radius: 2px;
        background: var(--grad-brand);
        transition: right .28s var(--ease);
    }
    .nav__link:hover::after { right: 0; }

    /* --- Buttons --------------------------------------------------------- */
    .btn {
        position: relative;
        overflow: hidden;
        border-radius: 999px;
        transition: transform .2s var(--ease), box-shadow .2s var(--ease),
                    background-color .2s var(--ease), color .2s var(--ease),
                    border-color .2s var(--ease);
    }
    .btn--primary {
        background: var(--grad-brand);
        color: #fff;
        box-shadow: var(--glow);
    }
    /* Sheen sweep on hover, so the primary action feels responsive. */
    .btn--primary::before {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
        transform: translateX(-120%);
        transition: transform .7s var(--ease);
    }
    .btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 38px -12px rgba(91, 43, 255, .8);
        color: #fff;
    }
    .btn--primary:hover::before { transform: translateX(120%); }

    .btn--accent {
        background: var(--grad-accent);
        color: #fff;
        box-shadow: 0 12px 30px -10px rgba(255, 61, 119, .7);
    }
    .btn--ghost {
        background: color-mix(in srgb, var(--surface) 70%, transparent);
        border-color: var(--line-strong);
        backdrop-filter: blur(6px);
    }
    .btn--ghost:hover {
        transform: translateY(-2px);
        background: var(--surface);
        border-color: var(--brand);
        color: var(--brand-strong);
        box-shadow: var(--shadow-sm);
    }

    /* --- Type accents ---------------------------------------------------- */
    .eyebrow { gap: .7rem; }
    .eyebrow::before {
        width: 30px;
        height: 3px;
        border-radius: 2px;
        background: var(--grad-accent);
    }

    .gradient-text {
        background: var(--grad-ink);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .hero h1 { letter-spacing: -.032em; }

    .hero__meta .dot {
        width: 7px; height: 7px;
        background: var(--grad-accent);
        box-shadow: 0 0 0 4px rgba(255, 61, 119, .16);
    }

    .pill-live {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .35rem .85rem .35rem .6rem;
        margin-bottom: 1.4rem;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        font-size: var(--step--1);
        font-weight: 600;
        color: var(--ink-soft);
    }
    .pill-live::before {
        content: "";
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #16c79a;
        animation: ping 2.2s ease-out infinite;
    }
    @keyframes ping {
        0%   { box-shadow: 0 0 0 0 rgba(22, 199, 154, .6); }
        70%  { box-shadow: 0 0 0 9px rgba(22, 199, 154, 0); }
        100% { box-shadow: 0 0 0 0 rgba(22, 199, 154, 0); }
    }

    /* --- Product preview ------------------------------------------------- */
    .preview {
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        animation: float 9s ease-in-out infinite;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-14px); }
    }
    .preview__stat strong { color: var(--brand-strong); }
    .preview__stat em { color: var(--accent); }
    .tag { background: var(--brand-tint); color: var(--brand-strong); }
    .tag--wait { background: var(--accent-tint); color: var(--accent); }
    .tag--done { background: #e2fbf3; color: #0a7d63; }
    .preview__side b { color: rgba(255, 255, 255, .45); }
    .preview__nav.is-on { background: rgba(255, 255, 255, .12); }

    /* --- Ledger ---------------------------------------------------------- */
    .ledger { border-top-color: transparent; }
    .ledger__item {
        border-radius: var(--radius-lg);
        transition: background-color .25s var(--ease), transform .25s var(--ease),
                    box-shadow .25s var(--ease);
    }
    .ledger__item:hover {
        background: var(--surface);
        transform: translateX(6px);
        box-shadow: var(--shadow-md);
    }
    .ledger__num {
        background: var(--grad-ink);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: var(--step-2);
        font-weight: 700;
    }

    /* --- Dark band ------------------------------------------------------- */
    .band {
        background:
            radial-gradient(900px 420px at 10% -10%, rgba(91, 43, 255, .55), transparent 62%),
            radial-gradient(760px 400px at 92% 112%, rgba(255, 61, 119, .38), transparent 60%),
            radial-gradient(700px 360px at 55% 40%, rgba(0, 200, 255, .2), transparent 65%),
            var(--night);
    }
    .pillar {
        background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
        border: 1px solid rgba(255, 255, 255, .13);
        border-top: 3px solid transparent;
        border-image: var(--grad-accent) 1;
        border-radius: var(--radius-lg);
        padding: 1.4rem 1.35rem 1.5rem;
        backdrop-filter: blur(10px);
        transition: transform .28s var(--ease), box-shadow .28s var(--ease);
    }
    .pillar:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .8);
    }
    .band .eyebrow { color: #cfc0ff; }

    /* --- Steps ----------------------------------------------------------- */
    .step::before {
        align-self: start;
        width: fit-content;
        padding: .25rem .8rem;
        border-radius: 999px;
        background: var(--grad-brand);
        color: #fff;
        letter-spacing: .1em;
        box-shadow: var(--glow);
    }

    /* --- Chips ----------------------------------------------------------- */
    .chip {
        box-shadow: var(--shadow-sm);
        transition: transform .2s var(--ease), box-shadow .2s var(--ease);
    }
    .chip::before { background: var(--grad-brand); }
    .chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

    /* --- Call to action -------------------------------------------------- */
    .cta {
        background:
            radial-gradient(600px 300px at 15% 0%, rgba(255, 61, 119, .55), transparent 60%),
            radial-gradient(560px 300px at 90% 100%, rgba(0, 200, 255, .5), transparent 60%),
            var(--grad-brand);
        box-shadow: 0 34px 80px -28px rgba(91, 43, 255, .7);
    }
    .cta::after {
        width: 320px; height: 320px;
        background: linear-gradient(140deg, rgba(255, 255, 255, .22), transparent 60%);
        animation: float 11s ease-in-out infinite;
    }
    .cta .btn--onnight { background: #fff; color: var(--brand-strong); box-shadow: var(--shadow-md); }
    .cta .btn--onnight:hover { transform: translateY(-2px); }
    .cta .btn--ghost {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .5);
        color: #fff;
        backdrop-filter: blur(6px);
    }
    .cta .btn--ghost:hover { background: rgba(255, 255, 255, .28); color: #fff; }

    /* --- Legal document chrome ------------------------------------------
       Colour stops here. Clause numbers and the active table-of-contents entry
       get the brand treatment; the prose stays black on white because that is
       what a shopkeeper printing the page actually needs. */
    .doc__body h2::before {
        background: var(--grad-ink);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 800;
    }
    .doc__toc a.is-active {
        color: var(--brand-strong);
        border-left-color: var(--accent);
        background: linear-gradient(90deg, var(--brand-tint), transparent);
        border-radius: 0 6px 6px 0;
    }
    .doc__head { border-bottom-color: transparent; border-image: var(--grad-brand) 1; }
    .callout {
        background: linear-gradient(100deg, var(--brand-tint), transparent 70%);
        border-left-color: var(--brand);
        border-radius: 0 var(--radius) var(--radius) 0;
    }
    .callout--warn {
        background: linear-gradient(100deg, var(--accent-tint), transparent 70%);
        border-left-color: var(--accent);
    }
    .contact-card { box-shadow: var(--shadow-md); border-top: 3px solid transparent; border-image: var(--grad-brand) 1; }

    /* --- Footer ---------------------------------------------------------- */
    .footer a { transition: color .18s var(--ease); }
    .footer a:hover { color: var(--accent); }

    /* --- Auth ------------------------------------------------------------ */
    .auth {
        background:
            radial-gradient(1000px 520px at 88% -14%, rgba(91, 43, 255, .2), transparent 62%),
            radial-gradient(820px 480px at 4% 108%, rgba(255, 61, 119, .18), transparent 60%),
            radial-gradient(700px 400px at 50% 40%, rgba(0, 200, 255, .12), transparent 65%),
            var(--paper);
    }
    .auth__aside {
        background:
            radial-gradient(700px 420px at 10% -10%, rgba(91, 43, 255, .75), transparent 62%),
            radial-gradient(600px 380px at 95% 110%, rgba(255, 61, 119, .5), transparent 60%),
            var(--night);
    }
    .auth__aside h2 {
        background: linear-gradient(100deg, #fff 30%, #cdb8ff 60%, #7fe4ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .auth__panel { box-shadow: var(--shadow-lg); }
    .auth .btn-primary {
        background: var(--grad-brand);
        border-color: transparent;
        box-shadow: var(--glow);
    }
    .auth .btn-primary:hover {
        background: var(--grad-brand);
        border-color: transparent;
        transform: translateY(-2px);
    }

    /* --- Scroll reveal --------------------------------------------------- */
    .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-in { opacity: 1; transform: none; }
    .reveal { transition-delay: var(--d, 0s); }
    .no-js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. Landing modules
   --------------------------------------------------------------------------
   Landing-page-only pieces: the services grid, the before/after contrast, the
   day timeline, the money tiles, live pricing, the channel cards and the
   zero-JS FAQ. Everything here is a plain grid with no positioning tricks, so
   it reflows on its own from 320px upwards.
   ========================================================================== */

@media screen {

/* --- Services ----------------------------------------------------------- */
.services {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.service {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .72rem .85rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    font-size: var(--step--1);
    font-weight: 550;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease),
                border-color .2s var(--ease);
}
.service svg { width: 22px; height: 22px; flex: none; color: var(--brand); }
.service:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    box-shadow: var(--shadow-md);
}

/* --- Before / after ----------------------------------------------------- */
.contrast {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    align-items: start;
}
.contrast__card {
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    background: var(--surface);
}
.contrast__card h3 { font-size: var(--step-1); margin-bottom: .75rem; }
.contrast__card--before {
    background: linear-gradient(180deg, var(--accent-tint), var(--surface) 70%);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.contrast__card--after {
    background: linear-gradient(180deg, var(--brand-tint), var(--surface) 70%);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    box-shadow: var(--shadow-md);
}
.contrast__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: .6rem;
    font-size: var(--step--1);
    line-height: 1.5;
}
.contrast__list li {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: .55rem;
    color: var(--ink-soft);
}
.contrast__card--before .contrast__list li::before {
    content: "\00d7";
    color: var(--accent);
    font-weight: 800;
    line-height: 1.35;
}
.contrast__card--after .contrast__list li::before {
    content: "\2713";
    color: #0a7d63;
    font-weight: 800;
    line-height: 1.35;
}

/* --- A day at the counter ----------------------------------------------- */
.day { display: grid; gap: 0; max-width: 620px; }
.day__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding-bottom: 1.35rem;
    position: relative;
}
.day__item:last-child { padding-bottom: 0; }
.day__dot {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--glow);
}
.day__dot svg { width: 19px; height: 19px; }
/* Rail between the dots, faded so it reads as a spine and not a border. */
.day__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px; top: 40px; bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand), var(--accent));
    opacity: .32;
}
.day__body h3 { font-size: var(--step-0); margin-bottom: .2em; }
.day__body p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }

/* --- Money tiles -------------------------------------------------------- */
.money {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
}
.money__card {
    border-radius: var(--radius-lg);
    padding: 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.money__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.money__card span {
    display: block;
    font-size: var(--step--1);
    color: var(--ink-faint);
    margin-bottom: .3rem;
}
.money__card b {
    display: block;
    font-family: var(--serif);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--brand-strong);
}
.money__card em { font-style: normal; font-size: var(--step--1); color: var(--ink-soft); }

/* --- Live pricing ------------------------------------------------------- */
.plans {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
}
.plan {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* Two-layer background: a white fill over the gradient border. */
.plan--featured {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--surface), var(--surface)),
                      var(--grad-brand);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--shadow-lg);
}
.plan__tag {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    padding: .2rem .8rem;
    border-radius: 999px;
    background: var(--grad-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plan__name { font-size: var(--step-0); font-weight: 650; margin-bottom: .35rem; }
.plan__price {
    font-family: var(--serif);
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--brand-strong);
}
.plan__price small { font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.plan__list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
}
.plan__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; line-height: 1.45; }
.plan__list li::before {
    content: "";
    width: 1.1rem; height: 1.1rem;
    margin-top: .18rem;
    border-radius: 50%;
    background-color: var(--brand-tint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%235b2bff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 9px 9px;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Channels ----------------------------------------------------------- */
.chans {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.4rem);
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.chan {
    border-radius: var(--radius-lg);
    padding: 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.chan__icon {
    width: 42px; height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: .85rem;
    box-shadow: var(--shadow-sm);
}
.chan__icon svg { width: 21px; height: 21px; }
.chan--telegram .chan__icon { background: linear-gradient(135deg, #2AABEE, #229ED9); }
.chan--whatsapp .chan__icon { background: linear-gradient(135deg, #25D366, #128C7E); }
.chan--email .chan__icon { background: var(--grad-accent); }
.chan h3 { font-size: var(--step-0); margin-bottom: .3em; }
.chan p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }

/* --- FAQ: <details>, so no JavaScript is involved ----------------------- */
.faq { display: grid; gap: .6rem; max-width: 840px; }
.faq details {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.faq summary {
    cursor: pointer;
    padding: 1rem 1.15rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    color: var(--brand);
    font-size: 1.35rem;
    line-height: 1;
    flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.faq__body {
    padding: 0 1.15rem 1.1rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

/* --- Install block ------------------------------------------------------ */
.install {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    align-items: center;
}
}

@media screen and (max-width: 640px) {
    .services { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
    .service { font-size: .8rem; padding: .6rem .7rem; }
}

/*
 * Reduced motion.
 *
 * Sits last so it wins over every animation declared above. The reveal script
 * also short-circuits on this query, but the CSS has to stand on its own: a
 * visitor who sets the preference and then loads a cached page must not get
 * drifting blobs and a floating product mock.
 */
@media screen and (prefers-reduced-motion: reduce) {
    .aurora i,
    .preview,
    .cta::after,
    .nav::before,
    .pill-live::before { animation: none !important; }

    .btn--primary::before { display: none; }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ledger__item:hover,
    .pillar:hover,
    .chip:hover,
    .service:hover,
    .money__card:hover,
    .plan:hover,
    .chan:hover,
    .btn:hover { transform: none !important; }
}