/* ==========================================================================
   Flomoji — public site stylesheet
   Hand-written, no framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens

   Two layers, deliberately.

   The *palette* below is raw colour and nothing outside this block may
   reference it. Everything else in the file — and every view — uses the
   *semantic* tokens underneath it. That separation is what makes the dark
   theme twenty redefinitions rather than an audit of two thousand lines.

   The older --ink-* / --brand-* / --paper names are kept at the end of the
   block as aliases onto the semantic layer, so pages written before this
   palette existed pick it up (and theme correctly) without being touched.
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* Palette — neutral. Cool-tinted greys; a pure grey next to the indigo
       reads dirty. */
    --p-white:   #ffffff;
    --p-n-25:    #fafcfc;
    --p-n-50:    #f4f8f8;
    --p-n-100:   #e8f0f0;
    --p-n-200:   #d8e5e5;
    --p-n-300:   #bccdcd;
    --p-n-400:   #8fa3a3;
    --p-n-500:   #647878;
    --p-n-600:   #485959;
    --p-n-700:   #334141;
    --p-n-800:   #1f2a2a;
    --p-n-900:   #121a1a;
    --p-n-950:   #080e0e;

    /* Palette — brand indigo. The primary action colour. */
    --p-brand-50:   #ecfdfd;
    --p-brand-100:  #d3f7f7;
    --p-brand-200:  #a8eded;
    --p-brand-300:  #6fdede;
    --p-brand-400:  #2ec7c7;
    --p-brand-500:  #0ea5a5;
    --p-brand-600:  #0b8080;
    --p-brand-700:  #096b6b;
    --p-brand-800:  #0a5555;
    --p-brand-900:  #083c3c;

    /* Palette — cyan accent. Used only where something needs to feel live:
       gradients, highlights, the download meter. Never for body text. */
    --p-accent-300: #7ff0dc;
    --p-accent-400: #34e0c0;
    --p-accent-500: #0fb89a;
    --p-accent-700: #0a6b5c;

    /* Palette — status */
    --p-green-100: #d7f5e5;
    --p-green-200: #a5e6c4;
    --p-green-400: #34d399;
    --p-green-600: #0b7a4b;
    --p-green-800: #0d3f2b;

    --p-amber-100: #fdf1d8;
    --p-amber-200: #f6dda6;
    --p-amber-400: #fbbf24;
    --p-amber-600: #9a5b08;
    --p-amber-800: #45320d;

    --p-red-100:   #fee5e3;
    --p-red-200:   #fbcac6;
    --p-red-400:   #f87171;
    --p-red-600:   #c32c26;
    --p-red-800:   #4a1c1c;

    /* ---- Semantic: surfaces ---- */
    --bg:            var(--p-white);
    --bg-subtle:     var(--p-n-50);
    --bg-inset:      var(--p-n-100);
    --surface:       var(--p-white);
    --surface-raised: var(--p-white);
    --surface-invert: var(--p-n-900);

    /* ---- Semantic: lines ---- */
    --line:          var(--p-n-200);
    --line-strong:   var(--p-n-300);
    --line-invert:   rgba(255, 255, 255, .14);

    /* ---- Semantic: text ---- */
    --text:           var(--p-n-900);
    --text-secondary: var(--p-n-600);
    --text-muted:     var(--p-n-500);
    --text-invert:    var(--p-white);
    --text-on-accent: var(--p-white);

    /* ---- Semantic: accent ---- */
    --accent:        var(--p-brand-600);
    --accent-hover:  var(--p-brand-700);
    --accent-soft:   var(--p-brand-50);
    --accent-softer: var(--p-brand-100);
    --accent-line:   var(--p-brand-200);
    --accent-text:   var(--p-brand-700);
    --accent-glow:   rgba(14, 165, 165, .35);
    --ring:          rgba(14, 165, 165, .45);

    /* ---- Semantic: status ---- */
    --success-bg:   var(--p-green-100);
    --success-line: var(--p-green-200);
    --success-fg:   var(--p-green-600);
    --warning-bg:   var(--p-amber-100);
    --warning-line: var(--p-amber-200);
    --warning-fg:   var(--p-amber-600);
    --danger-bg:    var(--p-red-100);
    --danger-line:  var(--p-red-200);
    --danger-fg:    var(--p-red-600);

    /* ---- Gradients ---- */
    --grad-brand: linear-gradient(135deg, var(--p-brand-500), var(--p-brand-700));
    --grad-spot:  radial-gradient(60% 60% at 50% 0%, rgba(14, 165, 165, .16), transparent 70%);
    --grad-mesh:
        radial-gradient(38rem 26rem at 12% -8%, rgba(14, 165, 165, .20), transparent 65%),
        radial-gradient(34rem 24rem at 88% 4%, rgba(52, 224, 192, .16), transparent 62%);

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* ---- Elevation. Tinted with the ink colour, never neutral black. ---- */
    --shadow-sm: 0 1px 2px rgba(18, 26, 26, .05), 0 1px 3px rgba(18, 26, 26, .04);
    --shadow-md: 0 6px 16px rgba(18, 26, 26, .07), 0 2px 6px rgba(18, 26, 26, .05);
    --shadow-lg: 0 18px 40px rgba(18, 26, 26, .10), 0 6px 14px rgba(18, 26, 26, .06);
    --shadow-accent: 0 8px 24px rgba(11, 128, 128, .28);

    /* ---- Space ---- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --font-sans: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --measure: 68ch;
    --container: 1180px;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Height of the sticky header, so full-height layouts can subtract it
       instead of guessing. Kept in sync with .site-header__inner. */
    --header-h: 72px;

    /* ---- Legacy aliases ----------------------------------------------------
       Kept so pre-existing markup themes correctly. New CSS should use the
       semantic tokens above. --ink-300 is mapped one step darker than its old
       value on purpose: it carries small print, and #9aa5b1 never passed
       contrast on white. */
    --ink-900: var(--text);
    --ink-700: var(--p-n-700);
    --ink-500: var(--text-secondary);
    --ink-300: var(--text-muted);
    --ink-200: var(--line-strong);
    --ink-100: var(--line);
    --ink-50:  var(--bg-inset);

    --paper: var(--surface);

    --brand-600: var(--accent);
    --brand-500: var(--p-brand-500);
    --brand-100: var(--accent-soft);

    --ok-600:   var(--success-fg);
    --ok-100:   var(--success-bg);
    --warn-600: var(--warning-fg);
    --warn-100: var(--warning-bg);
    --err-600:  var(--danger-fg);
    --err-100:  var(--danger-bg);
}

/* Dark theme. Applied when the visitor asked the OS for it and has not
   overridden the choice on this site, or when they picked it explicitly.
   Both selectors set the same values — do not let them drift apart. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg:            var(--p-n-950);
        --bg-subtle:     #0e131b;
        --bg-inset:      #161c26;
        --surface:       #121821;
        --surface-raised: #182030;
        --surface-invert: var(--p-n-100);

        --line:          #232c3a;
        --line-strong:   #333e50;
        --line-invert:   rgba(255, 255, 255, .10);

        --text:           #eef2f8;
        --text-secondary: #b3bdcd;
        --text-muted:     #8b95a8;
        --text-invert:    var(--p-n-900);

        --accent:        var(--p-brand-500);
        --accent-hover:  var(--p-brand-400);
        --accent-soft:   rgba(14, 165, 165, .14);
        --accent-softer: rgba(14, 165, 165, .22);
        --accent-line:   rgba(129, 140, 248, .35);
        --accent-text:   var(--p-brand-300);
        --ring:          rgba(129, 140, 248, .55);

        --success-bg:   rgba(52, 211, 153, .14);
        --success-line: rgba(52, 211, 153, .30);
        --success-fg:   var(--p-green-400);
        --warning-bg:   rgba(251, 191, 36, .14);
        --warning-line: rgba(251, 191, 36, .30);
        --warning-fg:   var(--p-amber-400);
        --danger-bg:    rgba(248, 113, 113, .14);
        --danger-line:  rgba(248, 113, 113, .30);
        --danger-fg:    var(--p-red-400);

        --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(14, 165, 165, .26), transparent 70%);
        --grad-mesh:
            radial-gradient(38rem 26rem at 12% -8%, rgba(14, 165, 165, .26), transparent 65%),
            radial-gradient(34rem 24rem at 88% 4%, rgba(52, 224, 192, .16), transparent 62%);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
        --shadow-lg: 0 20px 46px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .40);
        --shadow-accent: 0 8px 28px rgba(14, 165, 165, .40);

        --ink-700: #d3dae6;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:            var(--p-n-950);
    --bg-subtle:     #0e131b;
    --bg-inset:      #161c26;
    --surface:       #121821;
    --surface-raised: #182030;
    --surface-invert: var(--p-n-100);

    --line:          #232c3a;
    --line-strong:   #333e50;
    --line-invert:   rgba(255, 255, 255, .10);

    --text:           #eef2f8;
    --text-secondary: #b3bdcd;
    --text-muted:     #8b95a8;
    --text-invert:    var(--p-n-900);

    --accent:        var(--p-brand-500);
    --accent-hover:  var(--p-brand-400);
    --accent-soft:   rgba(14, 165, 165, .14);
    --accent-softer: rgba(14, 165, 165, .22);
    --accent-line:   rgba(129, 140, 248, .35);
    --accent-text:   var(--p-brand-300);
    --ring:          rgba(129, 140, 248, .55);

    --success-bg:   rgba(52, 211, 153, .14);
    --success-line: rgba(52, 211, 153, .30);
    --success-fg:   var(--p-green-400);
    --warning-bg:   rgba(251, 191, 36, .14);
    --warning-line: rgba(251, 191, 36, .30);
    --warning-fg:   var(--p-amber-400);
    --danger-bg:    rgba(248, 113, 113, .14);
    --danger-line:  rgba(248, 113, 113, .30);
    --danger-fg:    var(--p-red-400);

    --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(14, 165, 165, .26), transparent 70%);
    --grad-mesh:
        radial-gradient(38rem 26rem at 12% -8%, rgba(14, 165, 165, .26), transparent 65%),
        radial-gradient(34rem 24rem at 88% 4%, rgba(52, 224, 192, .16), transparent 62%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 46px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .40);
    --shadow-accent: 0 8px 28px rgba(14, 165, 165, .40);

    --ink-700: #d3dae6;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchored sections must clear the sticky header. */
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-700);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-4);
    line-height: 1.15;
    color: var(--text);
    font-weight: 640;
    letter-spacing: -.02em;
    text-wrap: balance;
}

p {
    margin: 0 0 var(--space-4);
    max-width: var(--measure);
    text-wrap: pretty;
}

a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .15s var(--ease);
}

a:hover {
    color: var(--accent);
}

code {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--bg-inset);
    padding: .15em .4em;
    border-radius: var(--radius-sm);
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--accent-softer);
    color: var(--text);
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
    left: 0;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

/* --------------------------------------------------------------------------
   3. Header and navigation

   One bar, three zones: brand, links, actions. Below 960px the links and the
   actions collapse behind a single button — two separate collapsing regions
   would mean two things to keep in sync and two ways to trap focus.
   -------------------------------------------------------------------------- */

/* Slim strip above the header. Carries one message and one link; anything more
   competes with the navigation for the same glance. */
.promo-bar {
    position: relative;
    z-index: 25;
    background: var(--grad-brand);
    color: var(--text-on-accent);
    font-size: .8125rem;
}

.promo-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    padding-block: .5rem;
    text-align: center;
}

.promo-bar__text { opacity: .92; }

.promo-bar__link {
    color: var(--text-on-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
}

.promo-bar__link:hover {
    color: var(--text-on-accent);
    border-bottom-color: currentColor;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transition: border-color .2s var(--ease), background-color .2s var(--ease),
                box-shadow .2s var(--ease);
}

/* Set by site.js once the page is scrolled, so the bar only earns a border and
   a shadow when there is content passing underneath it. */
.site-header.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-weight: 680;
    font-size: 1.0625rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.025em;
    flex: none;
}

.brand:hover { color: var(--text); }

/* The mark is drawn, not boxed. Sitting it in a filled tile was a holdover
   from an icon-in-a-square logo; this one is a line mark whose open stroke is
   the whole idea, and a tile crops the very gap that carries it. apps/web
   renders it the same way, so the two halves of the product now agree. */
.brand__mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    color: var(--accent);
    transition: color .2s var(--ease), transform .2s var(--ease);
}

.brand__mark svg { width: 30px; height: 30px; display: block; }

.brand:hover .brand__mark {
    color: var(--p-brand-500);
    transform: rotate(-8deg);
}

.brand__name { white-space: nowrap; }

.site-header__collapse {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: 1 1 auto;
    justify-content: space-between;
}

/* Three zones across the bar: identity, navigation, actions. The nav is
   centred in its own track rather than butted against the wordmark, which is
   what made the old bar read as one undifferentiated row of links. */
.site-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: .9375rem;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
}

.site-nav a {
    position: relative;
    padding: .45rem .85rem;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}

.site-nav a:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.site-nav a.is-current {
    color: var(--accent-text);
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* A dot, not an underline. An underline under one of five evenly spaced links
   reads as a text decoration at a glance; a dot centred beneath it reads as a
   position marker, and it survives the labels being different widths. */
.site-nav a.is-current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .1rem;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--accent);
}

.site-nav__pending {
    color: var(--text-muted);
    cursor: not-allowed;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Theme switch. Both glyphs are in the DOM; CSS shows whichever matches the
   theme in force, so there is no flash of the wrong icon and no JS involved in
   drawing it. */
.theme-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease),
                background-color .15s var(--ease);
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--bg-inset);
}

.theme-toggle svg { width: 17px; height: 17px; }

/* Every rule below is written with the element selector included, because
   `.theme-toggle svg` above outranks a bare class and would keep both glyphs
   on screen. */
.theme-toggle svg.theme-toggle__moon { display: none; }
.theme-toggle svg.theme-toggle__sun { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle svg.theme-toggle__moon { display: block; }
    :root:not([data-theme="light"]) .theme-toggle svg.theme-toggle__sun { display: none; }
}

:root[data-theme="dark"] .theme-toggle svg.theme-toggle__moon { display: block; }
:root[data-theme="dark"] .theme-toggle svg.theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle svg.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle svg.theme-toggle__sun { display: block; }

/* ------------------------------------------------------------- User menu */

.user-menu { position: relative; }

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .6rem .3rem .3rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 550;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color .15s var(--ease), background-color .15s var(--ease);
}

.user-menu__trigger:hover { border-color: var(--line-strong); background: var(--bg-inset); }

.user-menu__avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--text-on-accent);
    background: var(--grad-brand);
}

.user-menu__label {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__caret {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: transform .2s var(--ease);
}

.user-menu__trigger[aria-expanded="true"] .user-menu__caret { transform: rotate(180deg); }

.user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 40;
    width: 15rem;
    padding: var(--space-2);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: nav-drop .16s var(--ease-out);
}

.user-menu__panel[hidden] { display: none; }

.user-menu__head {
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-2);
}

.user-menu__name {
    margin: 0;
    max-width: none;
    font-size: .875rem;
    font-weight: 650;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__email {
    margin: 2px 0 0;
    max-width: none;
    font-size: .75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__role {
    display: inline-block;
    margin-top: var(--space-2);
    padding: .1rem .5rem;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent-text);
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
}

.user-menu__list { display: flex; flex-direction: column; }

.user-menu__list a {
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.user-menu__list a:hover { background: var(--bg-inset); color: var(--text); }

.user-menu__signout {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
}

/* Hamburger. Hidden until the breakpoint; the three bars morph into a cross so
   the open state is unambiguous without a second icon. */
.nav-toggle {
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.nav-toggle__box {
    position: relative;
    width: 18px;
    height: 12px;
}

.nav-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .25s var(--ease), opacity .15s var(--ease);
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 5px; }
.nav-toggle__bar:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 960px) {
    :root { --header-h: 64px; }

    .nav-toggle { display: grid; }

    .site-header__inner { min-height: 64px; }

    .site-header__collapse {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-6) var(--space-6);
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
    }

    .site-header__collapse.is-open {
        display: flex;
        animation: nav-drop .18s var(--ease-out);
    }

    .site-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        font-size: 1rem;
    }

    .site-nav a { padding: .7rem .75rem; }

    .site-nav a.is-current::after { left: .75rem; right: auto; width: 14px; bottom: .5rem; }

    .site-header__actions {
        flex-wrap: wrap;
        padding-top: var(--space-4);
        border-top: 1px solid var(--line);
    }

    .site-header__actions .btn,
    .site-header__actions .inline-form { flex: 1 1 auto; }
    .site-header__actions .inline-form .btn { width: 100%; }

    /* Inside the collapsed panel there is nothing to float over, so the menu
       becomes part of the flow rather than a dropdown on top of a dropdown. */
    .user-menu { flex: 1 1 100%; }
    .user-menu__trigger { width: 100%; justify-content: flex-start; }
    .user-menu__label { max-width: none; }
    .user-menu__caret { margin-left: auto; }

    .user-menu__panel {
        position: static;
        width: auto;
        margin-top: var(--space-2);
        box-shadow: none;
        animation: none;
    }
}

@keyframes nav-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .625rem 1.15rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 570;
    line-height: 1.2;
    letter-spacing: -.005em;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), box-shadow .18s var(--ease),
                transform .18s var(--ease);
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--grad-brand);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-accent);
}

.btn--primary:hover {
    color: var(--text-on-accent);
    box-shadow: 0 10px 30px var(--accent-glow);
    filter: brightness(1.06);
}

.btn--ghost {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

.btn--ghost:hover {
    border-color: var(--line-strong);
    background: var(--bg-inset);
    color: var(--text);
}

/* Tinted, for a secondary action that still belongs to the brand. */
.btn--soft {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-text);
}

.btn--soft:hover {
    background: var(--accent-softer);
    color: var(--accent-text);
}

/* Chromeless, for header links that must not compete with the primary action. */
.btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.btn--quiet:hover {
    background: var(--bg-inset);
    color: var(--text);
}

/* On a saturated panel, where the tokens above would vanish. */
.btn--invert {
    background: var(--p-white);
    color: var(--p-brand-700);
}

.btn--invert:hover {
    background: var(--p-white);
    color: var(--p-brand-800);
    box-shadow: var(--shadow-lg);
}

.btn--outline-invert {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: var(--p-white);
}

.btn--outline-invert:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--p-white);
    color: var(--p-white);
}

.btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Alerts
   -------------------------------------------------------------------------- */

.alert {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    max-width: none;
    font-size: .9375rem;
}

.alert--success {
    background: var(--success-bg);
    border-color: var(--success-line);
    color: var(--success-fg);
}

.alert--error {
    background: var(--danger-bg);
    border-color: var(--danger-line);
    color: var(--danger-fg);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) 0 var(--space-12);
    background: var(--grad-mesh), var(--bg);
}

/* A faint grid behind the hero. It reads as engineering rather than marketing,
   and it is the cheapest depth available — no image, no request. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .5;
    mask-image: radial-gradient(70% 60% at 50% 25%, #000 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 25%, #000 25%, transparent 75%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
}

.hero__copy { max-width: 34rem; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--space-6);
    padding: .35rem .875rem .35rem .5rem;
    font-size: .8125rem;
    font-weight: 560;
    letter-spacing: .005em;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
}

.eyebrow__tag {
    padding: .1rem .5rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-on-accent);
    background: var(--accent);
    border-radius: var(--radius-pill);
}

.hero__title {
    font-size: clamp(2.25rem, 5.2vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    margin-bottom: var(--space-6);
}

.hero__title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--p-brand-500), var(--p-accent-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__lede {
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    color: var(--text-secondary);
    max-width: 46ch;
    margin-bottom: var(--space-8);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.hero__note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: .8125rem;
    color: var(--text-muted);
    max-width: none;
}

.hero__note span {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.hero__note svg { width: 14px; height: 14px; color: var(--success-fg); flex: none; }

@media (max-width: 980px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .hero__copy { max-width: 40rem; }
}

/* --------------------------------------------------------------------------
   7. Sections, grid, cards
   -------------------------------------------------------------------------- */

.section {
    padding: var(--space-24) 0;
}

.section--muted {
    background: var(--bg-subtle);
    border-block: 1px solid var(--line);
}

.section__title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    letter-spacing: -.03em;
    margin-bottom: var(--space-8);
}

/* Centred section header: kicker, title, one line of context. */
.section-head {
    max-width: 46rem;
    margin: 0 auto var(--space-12);
    text-align: center;
}

.section-head .section__title { margin-bottom: var(--space-4); }

.section-head__lede {
    margin: 0 auto;
    font-size: 1.0625rem;
    color: var(--text-secondary);
}

.kicker {
    display: block;
    margin-bottom: var(--space-3);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--accent-text);
}

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card__title {
    font-size: 1.0625rem;
    margin-bottom: var(--space-2);
}

.card__body {
    margin: 0;
    color: var(--text-secondary);
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   8. Build status (temporary — replaced by the real site in Phase 11)
   -------------------------------------------------------------------------- */

.build-status__lede {
    color: var(--ink-500);
    margin-bottom: var(--space-8);
}

.phase-list {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.phase-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md);
    font-size: .875rem;
    color: var(--ink-300);
}

.phase-list__item.is-done {
    color: var(--success-fg);
    border-color: var(--success-line);
    background: var(--success-bg);
}

.phase-list__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    font-size: .75rem;
    font-weight: 650;
}

.phase-list__item.is-done .phase-list__num {
    background: var(--success-fg);
    color: var(--bg);
}

.build-status__foot {
    font-size: .9375rem;
    color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   8b. Forms and authentication
   -------------------------------------------------------------------------- */

.auth {
    display: grid;
    place-items: center;
    padding: var(--space-16) var(--space-6);
    min-height: 70vh;
    background: var(--grad-mesh), var(--bg-subtle);
}

/* Used when the card sits inside an already-framed page (the account area)
   rather than standing alone as the whole screen. */
.auth--inline {
    min-height: 0;
    padding: var(--space-12) var(--space-6);
    background: none;
}

/* --------------------------------------------------------------------------
   Split authentication screens

   Form on the left, brand panel on the right, filling what is left of the
   viewport under the header. The panel is decoration with a job: it is the
   only place on these pages where we can answer "what am I signing into?"
   The whole right column disappears below the breakpoint rather than being
   stacked, because on a phone it would push the form below the fold.
   -------------------------------------------------------------------------- */

body.page-auth .promo-bar { display: none; }

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100dvh - var(--header-h));
}

.auth-split__form {
    display: grid;
    place-items: center;
    padding: var(--space-12) var(--space-6);
    background: var(--bg);
}

.auth-split__inner {
    width: 100%;
    max-width: 26rem;
}

.auth-split__title {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    margin-bottom: var(--space-2);
}

.auth-split__lede {
    margin-bottom: var(--space-8);
    font-size: .9375rem;
    color: var(--text-secondary);
}

.auth-split__alt {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    font-size: .875rem;
    color: var(--text-secondary);
}

.auth-split__legal {
    margin: var(--space-6) 0 0;
    font-size: .75rem;
    color: var(--text-muted);
}

.auth-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-12);
    color: var(--text-on-accent);
    background: var(--grad-brand);
}

.auth-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(28rem 20rem at 85% 15%, rgba(52, 224, 192, .38), transparent 62%),
        radial-gradient(24rem 18rem at 10% 90%, rgba(255, 255, 255, .18), transparent 60%);
    pointer-events: none;
}

/* Same faint grid as the marketing hero, so the two read as one system. */
.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .13) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 80%);
    pointer-events: none;
}

.auth-aside > * { position: relative; z-index: 1; max-width: 30rem; }

.auth-aside__kicker {
    margin: 0 0 var(--space-4);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .7);
}

.auth-aside__title {
    margin: 0 0 var(--space-4);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.15;
    color: var(--text-on-accent);
}

.auth-aside__lede { margin: 0; color: rgba(255, 255, 255, .82); font-size: 1rem; }

.auth-aside__list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-aside__list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: var(--space-3);
    font-size: .9375rem;
    color: rgba(255, 255, 255, .9);
}

.auth-aside__list svg { width: 22px; height: 22px; color: var(--p-accent-300); }

.auth-aside__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .75);
}

.auth-aside__foot strong { display: block; font-size: 1.125rem; color: var(--text-on-accent); }

@media (max-width: 900px) {
    .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .auth-aside { display: none; }
    .auth-split__form { padding-block: var(--space-16); }
}

.auth__card {
    width: 100%;
    max-width: 27rem;
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth__title {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.auth__lede {
    color: var(--text-secondary);
    font-size: .9375rem;
    margin-bottom: var(--space-6);
}

.auth__alt {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: .875rem;
    color: var(--text-secondary);
    text-align: center;
}

.field {
    margin-bottom: var(--space-4);
}

.field__label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: .875rem;
    font-weight: 550;
    color: var(--ink-700);
}

.field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.field__link {
    font-size: .8125rem;
}

.field__input,
.field__select,
.field__textarea {
    width: 100%;
    padding: .6rem .75rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--ink-900);
    background: var(--paper);
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.field__input.is-invalid {
    border-color: var(--err-600);
}

.field__input.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--err-100);
}

.field__error {
    margin: var(--space-1) 0 0;
    font-size: .8125rem;
    color: var(--err-600);
    max-width: none;
}

.field__hint {
    margin: var(--space-1) 0 0;
    font-size: .8125rem;
    color: var(--ink-300);
    max-width: none;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: .875rem;
    color: var(--ink-500);
    cursor: pointer;
}

.checkbox input {
    margin-top: .2em;
    flex: none;
    accent-color: var(--brand-600);
}

.checkbox.is-invalid span {
    color: var(--err-600);
}

.btn--block {
    width: 100%;
}

.inline-form {
    display: inline;
}

.btn--small {
    padding: .35rem .75rem;
    font-size: .8125rem;
}

/* Impersonation banner — deliberately loud, because forgetting you are wearing
   someone else's account is how mistakes get made. */
/* Fixed amber rather than the themed token: this bar must look identical and
   alarming in both themes, and the dark-theme amber is far too light to carry
   white text. */
.impersonation-bar {
    background: var(--p-amber-600);
    color: var(--p-white);
    position: relative;
    z-index: 30;
}

.impersonation-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-2);
}

.impersonation-bar__text {
    font-size: .875rem;
}

.impersonation-bar .btn--ghost {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    background: transparent;
}

.impersonation-bar .btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* --------------------------------------------------------------------------
   8c. Notices, detail lists, page headers
   -------------------------------------------------------------------------- */

.notice {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--ink-100);
    background: var(--ink-50);
}

.notice--warn {
    background: var(--warning-bg);
    border-color: var(--warning-line);
}

.notice--dev {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.notice__title {
    margin: 0 0 var(--space-1);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ink-900);
    max-width: none;
}

.notice__body {
    margin: 0 0 var(--space-3);
    font-size: .875rem;
    color: var(--ink-500);
    max-width: none;
}

.notice__body:last-child {
    margin-bottom: 0;
}

.badge {
    display: inline-block;
    padding: .15rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge--ok {
    background: var(--success-bg);
    border-color: var(--success-line);
    color: var(--success-fg);
}

.badge--warn {
    background: var(--warning-bg);
    border-color: var(--warning-line);
    color: var(--warning-fg);
}

.page-head {
    margin-bottom: var(--space-8);
}

.page-head__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: var(--space-2);
}

.page-head__lede {
    color: var(--ink-500);
    margin: 0;
}

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: .875rem;
}

.detail-list dt {
    color: var(--ink-300);
}

.detail-list dd {
    margin: 0;
    color: var(--ink-700);
}

.dashboard__admin-link {
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md);
    font-size: .875rem;
    max-width: none;
}

/* --------------------------------------------------------------------------
   8d. Pricing
   -------------------------------------------------------------------------- */

.pricing-head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-12);
}

.pricing-head__title {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    margin-bottom: var(--space-4);
}

.pricing-head__lede {
    color: var(--ink-500);
    max-width: 56ch;
    margin-bottom: var(--space-6);
}

.currency-switch {
    display: inline-flex;
    padding: 3px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: 999px;
}

.currency-switch__option {
    padding: .35rem 1rem;
    font-size: .875rem;
    font-weight: 550;
    color: var(--ink-500);
    text-decoration: none;
    border-radius: 999px;
}

.currency-switch__option:hover {
    color: var(--ink-900);
}

.currency-switch__option.is-active {
    background: var(--paper);
    color: var(--brand-600);
    box-shadow: var(--shadow-sm);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: var(--space-6);
    align-items: start;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
                transform .2s var(--ease);
}

.plan-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.plan-card--featured {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

/* The featured card lifts a little on its own so the flag has somewhere to sit
   without overlapping the card above it on a narrow screen. */
@media (min-width: 900px) {
    .plan-card--featured { transform: translateY(-8px); }
    .plan-card--featured:hover { transform: translateY(-12px); }
}

.plan-card__flag {
    position: absolute;
    top: -.8rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .25rem .875rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-on-accent);
    background: var(--grad-brand);
    box-shadow: var(--shadow-accent);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.plan-card__name {
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
}

.plan-card__tagline {
    margin: 0 0 var(--space-4);
    font-size: .875rem;
    color: var(--ink-500);
}

.plan-card__price {
    margin: 0 0 var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.plan-card__was {
    font-size: 1rem;
    color: var(--ink-300);
    text-decoration: line-through;
}

.plan-card__amount {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink-900);
    line-height: 1;
}

.plan-card__period {
    font-size: .875rem;
    color: var(--ink-500);
}

.plan-card__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) 0;
    border-block: 1px solid var(--ink-100);
    font-size: .8125rem;
    color: var(--ink-500);
}

.plan-card__meta strong {
    color: var(--ink-900);
}

.plan-card__features {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    gap: var(--space-2);
    font-size: .9375rem;
}

.plan-card__features li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--ink-700);
}

.plan-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: .85rem;
    height: .45rem;
    border-left: 2px solid var(--ok-600);
    border-bottom: 2px solid var(--ok-600);
    transform: rotate(-45deg);
}

.plan-card__description {
    margin: 0 0 var(--space-6);
    font-size: .875rem;
    color: var(--ink-500);
}

/* Pin the call to action to the bottom so cards of differing height align. */
.plan-card .btn {
    margin-top: auto;
}

.pricing-note {
    margin: var(--space-8) auto 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--ink-300);
    max-width: 60ch;
}

.faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.faq__q {
    font-size: 1rem;
    margin-bottom: var(--space-2);
}

.faq__a {
    margin: 0;
    font-size: .9375rem;
    color: var(--text-secondary);
}

/* Accordion variant. <details> gives the open/close behaviour for free, which
   is the whole reason it is used here — no state to script, and it stays
   operable with JS off. */
.faq--accordion {
    display: block;
    max-width: 52rem;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.faq__item--toggle {
    border-bottom: 1px solid var(--line);
}

.faq__item--toggle:last-child { border-bottom: 0; }

.faq__item--toggle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: background-color .15s var(--ease);
}

.faq__item--toggle > summary::-webkit-details-marker { display: none; }
.faq__item--toggle > summary:hover { background: var(--bg-inset); }

.faq__sign {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--text-muted);
}

.faq__sign::before,
.faq__sign::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s var(--ease);
}

.faq__sign::after { transform: rotate(90deg); }

.faq__item--toggle[open] > summary { color: var(--accent-text); }
.faq__item--toggle[open] .faq__sign { color: var(--accent); }
.faq__item--toggle[open] .faq__sign::after { transform: rotate(0deg); }

.faq__item--toggle > .faq__a {
    padding: 0 var(--space-6) var(--space-6);
    max-width: 62ch;
}

/* --------------------------------------------------------------------------
   9. Error pages
   -------------------------------------------------------------------------- */

.error-page {
    padding: var(--space-16) 0;
    min-height: 60vh;
    display: grid;
    place-items: center;
}

.error-page__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.error-page__code {
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--ink-100);
    margin-bottom: var(--space-4);
}

.error-page__title {
    font-size: clamp(1.375rem, 4vw, 2rem);
}

.error-page__body {
    color: var(--ink-500);
    margin-bottom: var(--space-6);
}

.error-page__actions {
    margin-bottom: var(--space-8);
}

.error-page__debug {
    max-width: 100%;
    width: min(100%, 900px);
    overflow-x: auto;
    text-align: left;
    padding: var(--space-4);
    background: var(--p-n-950);
    color: var(--p-n-200);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: .8125rem;
    line-height: 1.5;
}

.error-page__debug pre {
    margin: var(--space-3) 0 0;
    white-space: pre;
}

.error-page__debug-head {
    margin: 0;
    max-width: none;
    color: var(--p-red-400);
}

.error-page__debug-file {
    margin: var(--space-2) 0 0;
    max-width: none;
    color: var(--ink-300);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: var(--space-8) 0 0;
    background: var(--bg-subtle);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    justify-content: space-between;
    align-items: center;
}

.site-footer__copy,
.site-footer__legal {
    margin: 0;
    font-size: .8125rem;
    color: var(--ink-300);
    max-width: none;
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .container { padding-inline: var(--space-4); }

    .hero {
        padding-top: var(--space-12);
    }

    .section {
        padding: var(--space-16) 0;
    }

    .cta-band,
    .cta-band--large { padding: var(--space-6); }

    .cta-band__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Uploaded logo, replacing the built-in wordmark when one is set. */
.brand__logo {
    display: block;
    max-height: 32px;
    max-width: 180px;
}

/* --------------------------------------------------------------------------
   Accepted payment methods
   Rendered from the gateways that accept the currency on screen, so the list
   changes with the currency switcher rather than being decorative.
   -------------------------------------------------------------------------- */

.payment-methods {
    margin: var(--space-12) auto 0;
    max-width: 900px;
    text-align: center;
}

.payment-methods__title {
    margin: 0 0 var(--space-4);
    font-size: .8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
}

.payment-methods__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 150px;
    padding: var(--space-3) var(--space-4);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.payment-method__logo {
    width: auto;
    max-width: 80px;
    max-height: 32px;
    object-fit: contain;
}

.payment-method__name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink-900);
}

.payment-method__note {
    font-size: .75rem;
    color: var(--ink-500);
}

.payment-methods__note {
    margin: var(--space-4) auto 0;
    max-width: 60ch;
    font-size: .8125rem;
    color: var(--ink-300);
}

/* ==========================================================================
   Checkout, orders and receipts
   ========================================================================== */

.container--narrow { max-width: 860px; }

.page-title {
    margin: 0 0 var(--space-6);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ink-900);
}

.page-head .page-title { margin-bottom: 0; }

.breadcrumb {
    margin: 0 0 var(--space-4);
    font-size: .8125rem;
    color: var(--text-muted);
}

.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }

/* Status badges. The public site had only two; orders need the full set. */
.badge--info    { background: var(--brand-100); color: var(--brand-600); }
.badge--err     { background: var(--err-100);   color: var(--err-600); }
.badge--pending { background: var(--ink-50);    color: var(--ink-500); }

.notice--info  { border-left-color: var(--brand-500); background: var(--brand-100); }
.notice--error { border-left-color: var(--err-600);   background: var(--err-100); }

.notice__list { margin: var(--space-2) 0 0; padding-left: 1.1rem; font-size: .875rem; }

.field__hint--ok { color: var(--ok-600); }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
}

/* --------------------------------------------------------------- Checkout */

.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: var(--space-8);
    align-items: start;
}

/* The total should not scroll away while the payment methods are being read. */
@media (min-width: 821px) {
    .checkout__summary { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

.checkout__form {
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 820px) {
    .checkout { grid-template-columns: minmax(0, 1fr); }
    /* Summary first on a phone: what you are paying matters more than how. */
    .checkout__summary { order: -1; }
}

.checkout__block {
    margin: 0 0 var(--space-6);
    padding: 0;
    border: 0;
}

.checkout__legend {
    padding: 0;
    margin: 0 0 var(--space-3);
    font-size: .8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
}

.checkout__coupon { max-width: 320px; }

.checkout__legal {
    margin: var(--space-4) 0 0;
    font-size: .75rem;
    color: var(--ink-300);
}

.checkout__summary {
    position: sticky;
    top: var(--space-4);
    padding: var(--space-6);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.checkout__summary-title {
    margin: 0 0 var(--space-4);
    font-size: .75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-300);
}

.checkout__plan { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--ink-900); }
.checkout__tagline { margin: var(--space-1) 0 0; font-size: .8125rem; color: var(--ink-500); }

.checkout__facts {
    margin: var(--space-3) 0 var(--space-4);
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--ink-500);
}

.checkout__facts li { padding: 2px 0; }

.checkout__totals { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--ink-100); }

.checkout__line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    font-size: .9375rem;
}

.checkout__line dt { color: var(--ink-500); }
.checkout__line dd { margin: 0; font-variant-numeric: tabular-nums; }
.checkout__line--discount dd { color: var(--ok-600); }

.checkout__line--total {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--ink-100);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink-900);
}

.checkout__note {
    margin: var(--space-4) 0 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--ink-300);
}

/* ------------------------------------------------------- Method selection */

.method {
    display: block;
    margin-bottom: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease),
                background-color .15s var(--ease);
}

.method:hover { border-color: var(--line-strong); background: var(--bg-inset); }

.method:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--ring);
}

.method:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.method input { accent-color: var(--accent); }

.method input { margin-right: var(--space-3); }

.method__body { display: inline-block; vertical-align: top; width: calc(100% - 2rem); }

.method__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.method__logo { max-width: 72px; max-height: 28px; width: auto; object-fit: contain; }
.method__name { font-weight: 650; color: var(--ink-900); }

.method__note {
    display: block;
    margin-top: var(--space-1);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ink-500);
}

/* --------------------------------------------------------- Paying offline */

.pay-summary {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    color: var(--text-on-accent);
    background: var(--grad-brand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.pay-summary .pay-summary__label,
.pay-summary .pay-summary__hint { color: rgba(255, 255, 255, .82); }
.pay-summary .pay-summary__amount { color: var(--text-on-accent); }

.pay-summary .pay-summary__reference {
    color: var(--text-on-accent);
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
}

.pay-summary__row { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pay-summary__label { font-size: .875rem; color: var(--ink-700); }

.pay-summary__amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}

.pay-summary__reference {
    padding: .15rem .6rem;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--ink-900);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    user-select: all;
}

.pay-summary__hint { margin: 0; font-size: .8125rem; color: var(--ink-700); }

.pay-steps { margin: 0 0 0 var(--space-6); padding: 0; list-style: none; counter-reset: pay-step; }

@media (max-width: 720px) { .pay-steps { margin-left: 0; } }

.pay-step {
    position: relative;
    margin-bottom: var(--space-6);
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    counter-increment: pay-step;
}

/* The number is drawn rather than left to the list marker, so it can sit on the
   card's edge instead of outside it. */
.pay-step::before {
    content: counter(pay-step);
    position: absolute;
    top: var(--space-8);
    left: calc(var(--space-8) * -1 + .25rem);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-on-accent);
    background: var(--grad-brand);
    box-shadow: var(--shadow-accent);
}

@media (max-width: 720px) {
    .pay-step { padding: var(--space-6); }
    .pay-step::before { position: static; margin-bottom: var(--space-4); }
}

.pay-step__title { margin: 0 0 var(--space-3); font-size: 1.15rem; color: var(--text); }
.pay-step__lede { margin: 0 0 var(--space-4); font-size: .9375rem; color: var(--text-secondary); }
.pay-step__logo { max-height: 34px; width: auto; margin-bottom: var(--space-4); }
.pay-step__instructions { margin: 0 0 var(--space-4); line-height: 1.7; }

.account-details {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md);
}

.account-details__title {
    margin: 0 0 var(--space-2);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-300);
}

.account-details__body {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .875rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: all;
}

.pay-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: .875rem;
}

/* ----------------------------------------------------------- Outcome page */

.outcome {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-8);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.outcome--ok { border-top: 4px solid var(--success-fg); }
.outcome--problem { border-top: 4px solid var(--warning-fg); }

/* Result badge above the headline: a large tick or exclamation, drawn from the
   status colours so the page reads before it is read. */
.outcome__mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-6);
    border-radius: 50%;
    color: var(--text-secondary);
    background: var(--bg-inset);
}

.outcome__mark svg { width: 32px; height: 32px; }
.outcome--ok .outcome__mark { color: var(--success-fg); background: var(--success-bg); }
.outcome--problem .outcome__mark { color: var(--warning-fg); background: var(--warning-bg); }

.outcome__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

.outcome__title { margin: 0 0 var(--space-3); font-size: 1.6rem; color: var(--ink-900); }
.outcome__lede { margin: 0 0 var(--space-4); color: var(--ink-700); }
.outcome__note { margin: 0 0 var(--space-4); font-size: .875rem; color: var(--ink-500); }
.outcome__status { margin: 0 0 var(--space-6); }

.outcome__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------- Order history */

.empty-state {
    padding: var(--space-16) var(--space-6);
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.empty-state__title { margin: 0 0 var(--space-2); font-size: 1.15rem; color: var(--text); }
.empty-state__body { margin: 0 auto var(--space-6); color: var(--text-secondary); max-width: 42ch; }

.order-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }

.order-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.order-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

@media (max-width: 700px) {
    .order-card { grid-template-columns: minmax(0, 1fr); }
    .order-card__side { text-align: left; }
}

.order-card__number { margin: 0; font-family: var(--font-mono); font-size: .9375rem; }
.order-card__plan { margin: var(--space-1) 0 0; font-weight: 650; color: var(--ink-900); }
.order-card__meta { margin: var(--space-1) 0 0; font-size: .8125rem; color: var(--ink-300); }
.order-card__side { text-align: right; }

.order-card__amount {
    margin: 0 0 var(--space-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-900);
}

.order-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.order-status-blurb { margin: 0 0 var(--space-6); color: var(--ink-500); }

.order-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-6);
}

.panel-card {
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
}

.panel-card__title { margin: 0 0 var(--space-4); font-size: 1.05rem; color: var(--ink-900); }

.detail-grid { margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.detail-grid > div { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.detail-grid dt { font-size: .875rem; color: var(--ink-500); }
.detail-grid dd { margin: 0; font-size: .875rem; text-align: right; }

.proof {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--ink-100);
}

.proof:first-of-type { border-top: 0; padding-top: 0; }

@media (max-width: 600px) { .proof { grid-template-columns: minmax(0, 1fr); } }

.proof__meta p { margin: 0 0 var(--space-1); font-size: .875rem; }
.proof__submitted { color: var(--ink-500); }

.proof__thumb { display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--ink-100); }
.proof__thumb img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- Pagination */

.pagination {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-8);
}

.pagination__link {
    padding: .4rem .75rem;
    font-size: .875rem;
    color: var(--ink-500);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.pagination__link:hover { border-color: var(--brand-500); color: var(--brand-600); }

.pagination__link.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
    font-weight: 650;
}

.pagination__gap { padding: .4rem .25rem; color: var(--ink-300); }

/* ==========================================================================
   Licence cards and devices
   ========================================================================== */

.licence-list { display: grid; gap: var(--space-6); }

.licence-card {
    padding: var(--space-6);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.licence-card--inactive { border-color: var(--warn-600); }

.licence-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.licence-card__plan { margin: 0 0 var(--space-2); font-size: 1.25rem; color: var(--ink-900); }
.licence-card__status { margin: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }

.licence-card__note {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: .875rem;
    color: var(--ink-700);
    background: var(--warn-100);
    border-radius: var(--radius-md);
}

/* The key is the reason this page exists: big, monospaced, selectable, and one
   click from the clipboard. */
.licence-key-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md);
}

.licence-key-value {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ink-900);
    word-break: break-all;
    user-select: all;
}

.btn.is-copied {
    background: var(--ok-100);
    border-color: var(--ok-600);
    color: var(--ok-600);
}

.licence-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--ink-100);
}

.licence-facts dt {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-300);
    margin-bottom: 2px;
}

.licence-facts dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink-900); }
.licence-facts .muted { font-weight: 400; }

.devices__title {
    margin: 0 0 var(--space-3);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-300);
}

.devices__empty { margin: 0; font-size: .875rem; color: var(--ink-500); }

.devices__quota {
    margin: var(--space-3) 0 0;
    padding: var(--space-3) var(--space-4);
    font-size: .8125rem;
    color: var(--ink-700);
    background: var(--ink-50);
    border-radius: var(--radius-md);
}

.device-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }

.device {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: var(--ink-50);
    border-radius: var(--radius-md);
}

.device__name { margin: 0; font-weight: 600; color: var(--ink-900); }
.device__meta { margin: 2px 0 0; font-size: .75rem; color: var(--ink-500); }

.device__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.device__rename { display: flex; gap: var(--space-2); align-items: center; }

.field__input--compact {
    padding: .35rem .55rem;
    font-size: .8125rem;
    width: 11rem;
}

/* ==========================================================================
   Public website — Phase 11
   ========================================================================== */

.page-lede {
    max-width: var(--measure);
    margin: -0.75rem 0 var(--space-8);
    font-size: 1.05rem;
    color: var(--ink-500);
}

.btn--large { padding: .85rem 1.6rem; font-size: 1.0625rem; }

/* ------------------------------------------------------------- Features */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.feature {
    position: relative;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
                transform .2s var(--ease);
}

.feature:hover {
    border-color: var(--accent-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.feature__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.feature__icon svg { width: 20px; height: 20px; display: block; }

.feature__title { margin: 0 0 var(--space-2); font-size: 1.05rem; color: var(--text); }
.feature__body { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--text-secondary); }

/* ----------------------------------------------------------- Comparison */

.comparison {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.comparison__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: transparent;
}

.comparison__table th,
.comparison__table td {
    padding: var(--space-4);
    text-align: left;
    font-size: .9375rem;
    border-bottom: 1px solid var(--line);
}

.comparison__table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    background: var(--bg-inset);
}

/* Our column is the one the table exists to argue for; tint it so the eye lands
   there rather than reading left to right six times. */
.comparison__table thead th:last-child {
    color: var(--accent-text);
    background: var(--accent-soft);
}

.comparison__table tbody td:last-child { background: var(--accent-soft); }

.comparison__table tbody th { font-weight: 600; color: var(--ink-700); }
.comparison__table tr:last-child th,
.comparison__table tr:last-child td { border-bottom: 0; }

.comparison__no { color: var(--text-muted); }

.comparison__yes {
    color: var(--success-fg);
    font-weight: 600;
}

.comparison__yes::before {
    content: "✓";
    margin-right: .4rem;
    font-weight: 700;
}

/* ------------------------------------------------------------- CTA band */

.cta-band {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-8);
    padding: var(--space-8);
    background: var(--grad-brand);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    color: var(--text-on-accent);
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(30rem 18rem at 88% 120%, rgba(52, 224, 192, .35), transparent 65%);
    pointer-events: none;
}

.cta-band > * { position: relative; z-index: 1; }

.cta-band--large { padding: var(--space-12) var(--space-8); }

.cta-band__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--text-on-accent);
}

.cta-band__note { margin: 0; font-size: 1rem; color: rgba(255, 255, 255, .85); }
.cta-band__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Inside the band the neutral button variants would disappear, so they are
   remapped rather than every call site being edited. */
.cta-band .btn--primary,
.cta-band .btn--ghost {
    background: var(--p-white);
    border-color: transparent;
    color: var(--p-brand-700);
    box-shadow: var(--shadow-md);
}

.cta-band .btn--ghost {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .45);
    color: var(--p-white);
    box-shadow: none;
}

.cta-band .btn--ghost:hover {
    background: rgba(255, 255, 255, .22);
    border-color: var(--p-white);
    color: var(--p-white);
}

.cta-band .btn--primary:hover { color: var(--p-brand-800); filter: none; }

/* ------------------------------------------------------------- Download */

.download-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: .4rem .9rem;
    font-size: .8125rem;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.download-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
                transform .2s var(--ease);
}

.download-card:hover {
    border-color: var(--accent-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.download-card--soon { opacity: .72; box-shadow: none; }
.download-card--soon:hover { transform: none; border-color: var(--line); box-shadow: none; }

.download-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-md);
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.download-card__icon svg { width: 26px; height: 26px; }
.download-card__title { margin: 0 0 var(--space-1); font-size: 1.1rem; color: var(--text); }
.download-card__note { margin: 0 0 var(--space-6); font-size: .8125rem; color: var(--text-muted); }
.download-card .btn { margin-top: auto; }

.download-keys {
    padding: var(--space-6);
    background: var(--success-bg);
    border: 1px solid var(--success-line);
    border-radius: var(--radius-lg);
}

.download-keys__title { margin: 0 0 var(--space-2); font-size: 1.05rem; color: var(--text); }
.download-keys__note { margin: 0 0 var(--space-4); font-size: .875rem; color: var(--ink-700); }

.install-steps {
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.install-steps__title { margin: 0 0 var(--space-4); font-size: 1.05rem; color: var(--text); }
.install-steps__list { margin: 0 0 var(--space-4); padding-left: 1.3rem; }
.install-steps__list li { margin-bottom: var(--space-3); font-size: .9375rem; line-height: 1.6; }
.install-steps__note { margin: 0; font-size: .875rem; color: var(--text-secondary); }

/* -------------------------------------------------------------- Contact */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 820px) {
    .contact { grid-template-columns: minmax(0, 1fr); }
}

/* Hidden from people without display:none — some bots skip those, and this one
   is meant to be filled in by them. */
.contact__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact__form {
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.contact__form-title { margin: 0 0 var(--space-2); font-size: 1.25rem; }
.contact__form-lede { margin: 0 0 var(--space-6); font-size: .9375rem; color: var(--text-secondary); }

.contact__aside {
    padding: var(--space-6);
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.contact__aside-title {
    margin: 0 0 var(--space-4);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}

.contact__faq { margin: 0; }
.contact__faq dt { font-weight: 650; font-size: .875rem; color: var(--text); margin-bottom: 2px; }
.contact__faq dd { margin: 0 0 var(--space-4); font-size: .875rem; line-height: 1.55; color: var(--text-secondary); }

.contact__direct {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: .875rem;
}

/* Three facts about getting a reply, shown before the form so nobody has to
   guess how long to wait. */
.contact-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.contact-fact {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.contact-fact__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-sm);
    color: var(--accent-text);
    background: var(--accent-soft);
}

.contact-fact__icon svg { width: 17px; height: 17px; }
.contact-fact__title { display: block; font-size: .875rem; font-weight: 650; color: var(--text); }
.contact-fact__body { display: block; font-size: .8125rem; color: var(--text-secondary); }

/* ----------------------------------------------------------- Legal pages */

.legal-head { margin-bottom: var(--space-8); }
.legal-head__meta { margin: -0.75rem 0 0; font-size: .8125rem; color: var(--text-muted); }

.legal-foot {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    font-size: .875rem;
    color: var(--text-secondary);
}

.legal-foot p { margin: 0; max-width: none; }

/* Sibling policies, so a visitor who landed on Terms can reach Privacy without
   going back to the footer. */
.legal-nav {
    max-width: 52rem;
    margin: var(--space-8) auto 0;
    text-align: center;
}

.legal-nav__title {
    display: block;
    margin-bottom: var(--space-3);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}

.legal-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-nav__list a {
    display: inline-block;
    padding: .45rem .9rem;
    font-size: .875rem;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    transition: border-color .15s var(--ease), color .15s var(--ease);
}

.legal-nav__list a:hover { border-color: var(--accent-line); color: var(--accent-text); }

/* Long-form prose on a panel, so an essay-length page still has an edge and a
   measure rather than floating in the middle of a wide viewport. */
.prose-card {
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--space-12);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.prose-card .prose { max-width: none; }

@media (max-width: 640px) {
    .prose-card { padding: var(--space-6); }
}

/* Long-form prose, used by CMS pages and the about page. */
.prose { max-width: var(--measure); font-size: 1rem; line-height: 1.75; color: var(--ink-700); }

.prose__lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink-900); }

.prose h2 {
    margin: var(--space-8) 0 var(--space-3);
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--ink-900);
}

.prose h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.1rem; color: var(--ink-900); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: 1.4rem; }
.prose li { margin-bottom: var(--space-2); }
.prose strong { color: var(--ink-900); }

.prose a { color: var(--brand-600); }

.prose blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--warn-600);
    background: var(--warn-100);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose blockquote p { margin: 0; }

.prose code {
    padding: .1rem .3rem;
    font-family: var(--font-mono);
    font-size: .875em;
    background: var(--ink-50);
    border-radius: 3px;
}

.prose hr { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--ink-100); }

/* --------------------------------------------------------------- Footer */

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    padding: var(--space-12) 0 var(--space-8);
}

@media (max-width: 760px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
    .site-footer__brand { grid-column: 1 / -1; }
}

.site-footer__brand .brand { margin-bottom: var(--space-4); }
.site-footer__name { margin: 0 0 var(--space-2); font-weight: 650; color: var(--text); }
.site-footer__blurb { margin: 0 0 var(--space-4); font-size: .875rem; line-height: 1.6; color: var(--text-secondary); max-width: 34ch; }

.site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__badges li {
    padding: .2rem .6rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-secondary);
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.site-footer__heading {
    margin: 0 0 var(--space-3);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-300);
}

.site-footer__column { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__column a { font-size: .875rem; color: var(--ink-500); text-decoration: none; }
.site-footer__column a:hover { color: var(--brand-600); }

.site-footer__base {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Landing page components

   Everything below belongs to the marketing pages. It is deliberately
   image-free: the product shot, the meters and the platform marks are all
   drawn in CSS, so the page has no art dependency, no layout shift, and no
   second request before it looks finished.
   ========================================================================== */

/* ----------------------------------------------------------- Page heroes

   Every page other than the landing page opens the same way: mesh background,
   kicker, title, one paragraph. Having one block for it is what stops the
   secondary pages from slowly drifting into five different headers.
   -------------------------------------------------------------------------- */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) 0 var(--space-12);
    background: var(--grad-mesh), var(--bg);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .45;
    mask-image: radial-gradient(70% 70% at 50% 20%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 70% at 50% 20%, #000 20%, transparent 75%);
    pointer-events: none;
}

.page-hero__inner {
    position: relative;
    max-width: 46rem;
    margin-inline: auto;
}

.page-hero__title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    letter-spacing: -.035em;
    margin-bottom: var(--space-4);
}

.page-hero__lede {
    margin: 0 auto;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    color: var(--text-secondary);
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-6) 0 0;
    font-size: .8125rem;
    color: var(--text-muted);
    max-width: none;
}

.page-hero__meta strong { color: var(--text); font-weight: 600; }

/* The hero already carries generous bottom space; a full section rhythm on top
   of it leaves a hole between the title and the first thing you can act on. */
.page-hero + .section { padding-top: var(--space-16); }

/* ==========================================================================
   Account area — dashboard, licences, orders, password

   The signed-in pages share one shell: a tinted band carrying the title and
   the sub-navigation, then plain sections. It is deliberately quieter than the
   marketing pages — this is somewhere people come to do one specific thing.
   ========================================================================== */

.account-shell {
    padding: var(--space-12) 0 0;
    background: var(--grad-spot), var(--bg-subtle);
    border-bottom: 1px solid var(--line);
}

.account-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.account-head__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    letter-spacing: -.03em;
}

.account-head__lede {
    margin: 0;
    font-size: .9375rem;
    color: var(--text-secondary);
}

.account-head__lede strong { color: var(--text); font-weight: 600; }

.account-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Tabs. They sit on the band's bottom edge and overlap the border, which is
   what makes the current one read as connected to the page below it. */
.account-nav {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    margin-bottom: -1px;
    padding-bottom: 1px;
    scrollbar-width: none;
}

.account-nav::-webkit-scrollbar { display: none; }

.account-nav a {
    padding: .65rem 1rem;
    border-bottom: 2px solid transparent;
    font-size: .9375rem;
    font-weight: 550;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}

.account-nav a:hover { color: var(--text); }

.account-nav a.is-current {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
}

.account-nav__count {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .4rem;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--text-secondary);
    background: var(--bg-inset);
    border-radius: var(--radius-pill);
}

.account-nav a.is-current .account-nav__count {
    color: var(--accent-text);
    background: var(--accent-soft);
}

/* The band carries its own bottom space; a full section rhythm on top of it
   leaves a hole between the tabs and the first tile. */
.account-shell + .section { padding-top: var(--space-8); }

.panel-card .detail-list + .btn { margin-top: var(--space-6); }

/* Headline numbers for the overview. */
.tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.tile {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tile__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--radius-md);
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.tile__icon svg { width: 20px; height: 20px; }

.tile__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--text);
}

.tile__label { display: block; font-size: .8125rem; color: var(--text-secondary); }

/* A card whose whole surface is the link to somewhere else in the account. */
.action-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
                transform .2s var(--ease);
}

.action-card:hover {
    border-color: var(--accent-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.action-card__title { margin: 0 0 var(--space-2); font-size: 1.0625rem; }
.action-card__body { margin: 0 0 var(--space-6); font-size: .9375rem; color: var(--text-secondary); }
.action-card .btn { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   Checkout shell

   A three-step purchase deserves to say which step you are on. The band below
   carries that, and the summary column sticks so the total stays in view while
   the payment methods are read.
   ========================================================================== */

.checkout-shell {
    padding: var(--space-12) 0;
    background: var(--grad-spot), var(--bg-subtle);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.checkout-shell__title {
    margin: 0 0 var(--space-6);
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    letter-spacing: -.03em;
}

.progress-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.progress-step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem .4rem .45rem;
    font-size: .875rem;
    font-weight: 550;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.progress-step__num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-inset);
}

.progress-step.is-current {
    color: var(--accent-text);
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

.progress-step.is-current .progress-step__num {
    color: var(--text-on-accent);
    background: var(--accent);
}

.progress-step.is-done { color: var(--success-fg); border-color: var(--success-line); background: var(--success-bg); }
.progress-step.is-done .progress-step__num { color: var(--bg); background: var(--success-fg); }

.progress-steps__sep { color: var(--text-muted); }

@media (max-width: 620px) {
    .progress-steps__sep { display: none; }
    .progress-step { font-size: .8125rem; }
}

/* ------------------------------------------------------- Hero product shot */

.hero__visual {
    position: relative;
    perspective: 1400px;
}

.app-window {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: rotateY(-7deg) rotateX(3deg) translateZ(0);
    transform-origin: left center;
}

@media (max-width: 980px) {
    .app-window { transform: none; }
}

.app-window__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: .625rem var(--space-4);
    background: var(--bg-inset);
    border-bottom: 1px solid var(--line);
}

.app-window__dots { display: flex; gap: 6px; }

.app-window__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--line-strong);
}

.app-window__title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .01em;
}

.app-window__body {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 340px;
}

.app-side {
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--line);
    background: var(--bg-subtle);
}

.app-side__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 550;
    color: var(--text-secondary);
}

.app-side__item.is-active {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.app-side__item i {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 4px;
    background: currentColor;
    opacity: .35;
}

.app-main { padding: var(--space-4); }

.app-url {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: .55rem .7rem;
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.app-url__caret {
    width: 1px;
    height: 12px;
    background: var(--accent);
    animation: caret 1.1s steps(1) infinite;
}

@keyframes caret { 50% { opacity: 0; } }

.app-job {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
}

.app-job:last-child { border-bottom: 0; }

.app-job__thumb {
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--p-brand-400), var(--p-accent-400));
    opacity: .85;
}

.app-job:nth-child(3) .app-job__thumb { background: linear-gradient(135deg, var(--p-brand-600), var(--p-brand-300)); }
.app-job:nth-child(4) .app-job__thumb { background: linear-gradient(135deg, var(--p-accent-500), var(--p-brand-400)); }

.app-job__name {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-job__meta { display: block; font-size: .6875rem; color: var(--text-muted); }

.app-job__bar {
    display: block;
    height: 4px;
    margin-top: 5px;
    border-radius: 4px;
    background: var(--bg-inset);
    overflow: hidden;
}

.app-job__fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--grad-brand);
}

.app-job__fill--live { animation: fill 4.5s var(--ease) infinite; }

@keyframes fill {
    0%   { width: 12%; }
    70%  { width: 78%; }
    100% { width: 92%; }
}

.app-job__state {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.app-job__state--done { color: var(--success-fg); }
.app-job__state--live { color: var(--accent-text); }

/* A floating card overlapping the window, carrying the one number the visual
   is meant to leave behind. */
.app-float {
    position: absolute;
    right: -12px;
    bottom: -18px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.app-float__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--success-fg);
    background: var(--success-bg);
}

.app-float__mark svg { width: 16px; height: 16px; }
.app-float__value { display: block; font-size: .8125rem; font-weight: 650; color: var(--text); }
.app-float__label { font-size: .6875rem; color: var(--text-muted); }

@media (max-width: 560px) { .app-float { display: none; } }

/* ------------------------------------------------------------- Stat strip */

.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stat {
    padding: var(--space-6);
    background: var(--surface);
    text-align: center;
}

.stat__value {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--text);
}

.stat__label {
    display: block;
    margin-top: var(--space-1);
    font-size: .8125rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------- Platforms */

.pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    font-size: .8125rem;
    font-weight: 550;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.pill svg { width: 15px; height: 15px; color: var(--text-muted); }

/* ------------------------------------------------------------------ Steps */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    counter-reset: step;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    position: relative;
    padding-top: var(--space-8);
}

/* The connector is drawn from the number outwards and clipped at the last
   item, so it never dangles off the end of the row. */
.step::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 44px;
    right: calc(var(--space-6) * -1);
    height: 1px;
    background: linear-gradient(to right, var(--line-strong), transparent);
}

.step:last-child::before { display: none; }

@media (max-width: 760px) { .step::before { display: none; } }

.step__num {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: .875rem;
    font-weight: 700;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.step__title { margin: 0 0 var(--space-2); font-size: 1.0625rem; }
.step__body { margin: 0; font-size: .9375rem; color: var(--text-secondary); }

/* -------------------------------------------------------------- Use cases */

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-4);
}

.usecase {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
}

.usecase__title {
    margin: 0 0 var(--space-2);
    font-size: .9375rem;
    font-weight: 650;
    color: var(--text);
}

.usecase__body { margin: 0; font-size: .875rem; color: var(--text-secondary); }

/* ----------------------------------------------------------- Split feature */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-12);
    align-items: center;
}

.split__title { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: var(--space-4); }
.split__body { color: var(--text-secondary); font-size: 1.0625rem; }

.checklist {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--space-3);
    font-size: .9375rem;
    color: var(--ink-700);
}

.checklist svg { width: 20px; height: 20px; color: var(--success-fg); }

/* A panel of terminal-ish facts, for the "under the hood" half of a split. */
.spec-panel {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--bg-subtle);
    box-shadow: var(--shadow-sm);
}

.spec-panel__title {
    margin: 0 0 var(--space-4);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}

.spec-list { margin: 0; display: grid; gap: var(--space-3); }

.spec-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--line);
}

.spec-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list dt { font-size: .875rem; color: var(--text-secondary); }

.spec-list dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text);
    text-align: right;
}

/* --------------------------------------------------------- Pricing intro */

.pricing-lede {
    max-width: 46rem;
    margin: 0 auto var(--space-12);
    text-align: center;
    color: var(--text-secondary);
}

.pricing-assure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--text-secondary);
}

.pricing-assure li { display: inline-flex; align-items: center; gap: .45rem; }
.pricing-assure svg { width: 16px; height: 16px; color: var(--success-fg); flex: none; }

/* ---------------------------------------------------------------------------
   Owning versus renting
   ---------------------------------------------------------------------------
   Two columns, and only one of them is lifted. The lift is the argument, so it
   is spent here and nowhere else in the band: the monthly column keeps the
   page's ordinary card treatment and the lifetime one gets the accent border
   and the tinted ground.
--------------------------------------------------------------------------- */
.ownership {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ownership__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}

.ownership__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.ownership__col--featured {
    border-color: var(--accent-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
        var(--surface);
    box-shadow: var(--shadow-md);
}

.ownership__label {
    margin: 0;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ownership__col--featured .ownership__label { color: var(--accent-text); }

.ownership__price {
    margin: 0;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ownership__price span {
    margin-left: .4rem;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-muted);
}

.ownership__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .9375rem;
    color: var(--text-secondary);
}

.ownership__list li {
    position: relative;
    padding-left: 1.4rem;
}

.ownership__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .5;
}

.ownership__col--featured .ownership__list li::before { opacity: 1; }

.ownership__maths {
    margin: 0;
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.65;
}

.ownership__maths strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .ownership__maths { padding: var(--space-4); }
    .ownership__price { font-size: 2.25rem; }
}

/* ---------------------------------------------------------------------------
   Team
--------------------------------------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.team-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
        var(--surface);
}

.team-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.team-card__photo {
    width: 96px;
    height: 96px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-line);
    background: var(--bg-inset);
}

/* Shown only when the portrait file is absent — see the note in team.php. */
.team-card__photo--initials {
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--accent-text);
    background: var(--accent-soft);
}

.team-card__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--text);
}

.team-card__role {
    margin: .15rem 0 0;
    font-size: .9rem;
    color: var(--accent-text);
    font-weight: 550;
}

.team-card__bio {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.team-card__focus {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.team-card__focus li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    font-size: .8125rem;
    color: var(--text-secondary);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
}

.team-card__focus svg { width: 14px; height: 14px; color: var(--accent); }

.team-note {
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
}

.team-note__title {
    margin: 0 0 var(--space-3);
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}

.team-note p {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
    line-height: 1.7;
}

.team-note__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.team-note__actions svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------------
   Floating WhatsApp button
   ---------------------------------------------------------------------------
   Deliberately not the usual bright-green vendor badge: a second saturated
   colour bolted to the corner of every page competes with the primary action
   on that page. It takes the brand teal like every other control here.
--------------------------------------------------------------------------- */
.wa-float {
    position: fixed;
    right: clamp(12px, 3vw, 24px);
    bottom: clamp(12px, 3vw, 24px);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: transform .18s var(--ease), background-color .18s var(--ease);
}

.wa-float:hover {
    background: var(--accent-hover);
    color: var(--text-on-accent);
    transform: translateY(-2px);
}

.wa-float svg { width: 20px; height: 20px; flex: none; }

/* Below the fold on a phone the label costs more than it earns — the mark is
   understood on its own, and the corner is scarce there. */
@media (max-width: 560px) {
    .wa-float__label { display: none; }
    .wa-float { padding: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
    .wa-float:hover { transform: none; }
    .brand:hover .brand__mark { transform: none; }
}

/* ---------------------------------------------------------------------------
   Feature badges
   ---------------------------------------------------------------------------
   Only worth having while they are true. A badge on every card marks nothing,
   and one left on a two-year-old feature is just noise the reader learns to
   skip — so these are applied by hand, not to the whole grid.
--------------------------------------------------------------------------- */
.feature__badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .15rem .45rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: var(--radius-pill);
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.feature__badge--alt {
    color: var(--warning-fg);
    background: var(--warning-bg);
    border-color: var(--warning-line);
}

/* ---------------------------------------------------------------------------
   Account area — one vocabulary
   ---------------------------------------------------------------------------
   The signed-in pages had grown five different idioms for the same two shapes:
   "a block of related content" and "one row in a list of things". Licences used
   .licence-card/.device, orders used .order-card, the overview used
   .action-card, the order detail borrowed .checkout__* from the checkout flow,
   and the password page was dressed as a sign-in screen.

   Everything below replaces those with .panel (the block) and .data-row (the
   row), so a device, an order and a licence are laid out by the same rules and
   a new account page has something to be built from.
--------------------------------------------------------------------------- */
.panel-stack {
    display: grid;
    gap: var(--space-4);
}

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.panel--accent {
    border-color: var(--accent-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 40%),
        var(--surface);
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--line);
}

/* A head with nothing under it should not draw a line into empty space. */
.panel__head:last-child { border-bottom: 0; }

.panel__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text);
}

.panel__meta {
    margin: .2rem 0 0;
    font-size: .875rem;
    color: var(--text-muted);
}

.panel__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.panel__body { padding: var(--space-6); }
.panel__body--flush { padding: 0; }

/* The <ul> that holds .data-row items. Strips list semantics visually while
   keeping them in the markup, so screen readers still hear "list of N". */
.data-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One row in a list of things — a device, an order, an invoice. */
.data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--line);
}

.data-row:last-child { border-bottom: 0; }
.data-row:hover { background: var(--bg-subtle); }

.data-row__main { min-width: 0; flex: 1 1 16rem; }

.data-row__title {
    margin: 0;
    font-size: .975rem;
    font-weight: 620;
    color: var(--text);
}

.data-row__meta {
    margin: .2rem 0 0;
    font-size: .8125rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.data-row__side {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.data-row__amount {
    font-size: 1.05rem;
    font-weight: 680;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Label/value pairs. Used by the licence summary and the order detail, which
   previously solved the same problem two different ways. */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.facts > div { min-width: 0; }

.facts dt {
    margin: 0;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.facts dd {
    margin: .3rem 0 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.facts dd .muted { font-weight: 400; color: var(--text-muted); }

/* A two-column variant for a receipt, where the value belongs beside the
   label rather than under it. */
.facts--rows { grid-template-columns: 1fr; gap: 0; }

.facts--rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
}

.facts--rows > div:last-child { border-bottom: 0; }
.facts--rows dt { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 500; }
.facts--rows dd { margin: 0; text-align: right; font-size: .875rem; }

@media (max-width: 560px) {
    .panel__head, .panel__body, .data-row { padding-left: var(--space-4); padding-right: var(--space-4); }
    .data-row { align-items: flex-start; }
}

/* A section inside a panel — devices under a licence, say — with a lighter
   head than the panel's own so the hierarchy stays readable. */
.panel__section { border-top: 1px solid var(--line); }

.panel__head--sub {
    padding-block: var(--space-3);
    background: var(--bg-subtle);
}

.panel__subtitle {
    margin: 0;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.panel__head--sub .panel__meta { margin: 0; font-size: .8125rem; }

/* Badges sit on the panel head as a row, not as a paragraph of text. */
.panel__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .45rem;
}

.panel__empty,
.panel__note {
    margin: 0;
    font-size: .875rem;
    color: var(--text-muted);
}

.panel__note { border-top: 1px solid var(--line); }

/* The licence key: monospace, selectable, with the copy control beside it. */
.licence-key-row { margin-bottom: var(--space-4); }

/* Renaming a device happens inline, so the field must not stretch the row. */
.data-row__side .field__input--compact { min-width: 0; width: clamp(8rem, 18vw, 12rem); }

/* Order totals. The total line is the one thing on a receipt people look for,
   so it gets the weight and a rule above it; the discount reads as a credit. */
.facts--totals { margin-top: var(--space-6); border-top: 1px solid var(--line); }
.facts__discount dd { color: var(--success-fg); }

.facts__total {
    border-top: 1px solid var(--line-strong) !important;
    margin-top: .25rem;
    padding-top: .8rem !important;
}

.facts__total dt { font-weight: 650; color: var(--text); font-size: .9375rem; }
.facts__total dd { font-size: 1.15rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* An action panel on the overview: body text, then one control pinned to the
   bottom so three cards of unequal text still line their buttons up. */
.panel--action { display: flex; flex-direction: column; }
.panel--action .panel__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-4); }
.panel--action .panel__body .btn { margin-top: auto; align-self: flex-start; }

.panel__text {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* A form in a full-width panel still wants a readable measure. */
.account-form-panel { max-width: 34rem; }

/* Panels that follow the tile row need separating from it. */
.account-profile { margin-top: var(--space-8); }
.panel-stack + .panel-stack { margin-top: var(--space-4); }

/* The old rule for this spacing was keyed to .panel-card, which the account
   pages no longer use — without this the profile panel's button sits hard
   against the last row of the list. */
.panel__body .detail-list + .btn { margin-top: var(--space-6); }

/* ---------------------------------------------------------------------------
   The wordmark
   ---------------------------------------------------------------------------
   Outfit is self-hosted rather than fetched from Google Fonts: apps/web already
   bundles this exact file (the desktop build loads from file:// and must work
   offline), and the wordmark has to be the same typeface on the site, the admin
   panel and the app or it is not the same wordmark.

   Values below mirror apps/web/src/styles.css's .flomoji-wordmark exactly.
--------------------------------------------------------------------------- */
@font-face {
    font-family: "Outfit";
    src: url("/assets/fonts/outfit-600-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    font-family: "Outfit", var(--font-sans), system-ui, sans-serif;
    font-weight: 600;
    /* Tightened deliberately: at default tracking the mark reads as a separate
       object sitting next to the word rather than as its "o". */
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
    /* Lettering inherits the surrounding colour so it works on either theme;
       only the mark is brand-coloured. */
    color: inherit;
    user-select: none;
}

.wordmark__mark {
    width: 0.92em;
    height: 0.92em;
    flex: none;
    color: var(--accent);
    /* 0.035em, not 0.03em: the mark needs marginally more air than a real "o"
       would, because its stroke stops short of the letter's optical sidebearing
       on the right where the ribbon opens. */
    margin: 0 0.035em;
    /* Optical centring: the mark's own centre sits slightly above the x-height
       midpoint of the surrounding lowercase. */
    transform: translateY(0.02em);
}


/* --------------------------------------------------------------------------
   Affiliate area
   -------------------------------------------------------------------------- */

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* A numbered explanation, as prose rather than as the marketing .steps grid —
   these are read in order, top to bottom, not scanned across. */
.how-list {
    margin: 0;
    padding-left: 1.4rem;
    display: grid;
    gap: var(--space-4);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.how-list strong { color: var(--text); }

.ticks {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
    font-size: .9375rem;
}

.ticks li { padding-left: 1.5rem; position: relative; }

.ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: .7rem;
    height: .4rem;
    border-left: 2px solid var(--brand-600);
    border-bottom: 2px solid var(--brand-600);
    transform: rotate(-45deg);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-6);
}

/* The referral link. Wide, monospaced and selectable in one gesture, because
   copying it correctly is the single thing this page exists to make easy. */
.share-link {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
    flex-wrap: wrap;
}

.share-link .field__input {
    flex: 1 1 18rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875rem;
}

.share-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}

.balance {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.balance--primary { border-color: var(--brand-600); }

.balance__label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.balance__value {
    display: block;
    margin-top: var(--space-1);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.balance__hint {
    display: block;
    margin-top: var(--space-1);
    font-size: .75rem;
    color: var(--text-muted);
}

.detail-list {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: .875rem;
}

.detail-list dt { color: var(--text-secondary); }

.detail-list dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
    user-select: all;
}

/* A secondary action folded away until wanted — changing a referral code is
   rare and mildly destructive, so it should not sit next to the link people
   came to copy. */
.disclosure {
    margin-top: var(--space-5);
    border-top: 1px solid var(--line, var(--ink-100));
    padding-top: var(--space-4);
}

.disclosure > summary {
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
}

.disclosure > summary::-webkit-details-marker { display: none; }

.disclosure > summary::before {
    content: "+ ";
    color: var(--text-muted);
}

.disclosure[open] > summary::before { content: "− "; }

.disclosure > summary:hover { color: var(--text); }

.disclosure > form { margin-top: var(--space-4); }

/* A destructive action, in the one place the public site has one: removing a
   saved payout destination. Quiet until hovered, because it sits in a row of
   ordinary buttons and should not shout. */
.btn--danger {
    background: transparent;
    color: var(--err-600);
    border: 1px solid var(--err-600);
}

.btn--danger:hover {
    background: var(--err-600);
    color: #fff;
}

/* A large link that behaves like a radio choice: pick a payout rail. */
.option-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5);
    border: 1px solid var(--line, var(--ink-200));
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease;
}

.option-card:hover {
    border-color: var(--brand-600);
    transform: translateY(-1px);
}

.option-card__title { font-weight: 650; }

.option-card__hint {
    font-size: .8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .option-card:hover { transform: none; }
}

/* ==========================================================================
   20. Product shots and the sections built around them

   Added when the hero stopped being a hand-drawn approximation of the app and
   became a picture of it. Everything here exists to frame a real screenshot:
   the hero's centred column, the split that puts one beside prose, and the
   dark band that shows three of them side by side.

   The screenshots themselves are generated from the app's own stylesheet
   (see design/hero-concepts/README.md), so this file never has to describe
   what the editor looks like — only how much room to give it.
   ========================================================================== */

/* -- Hero with a product shot under the copy -------------------------------
   The two-column hero put the app in the right-hand third, where it was too
   small to read. Centred copy with the shot full width below gives the
   screenshot the whole measure, which is the only size at which a timeline
   with six tracks is legible. */

.hero--shot {
    padding-bottom: 0;
    text-align: center;
}

.hero--shot .hero__inner {
    display: block;
    max-width: 52rem;
    margin-inline: auto;
}

.hero--shot .hero__copy { max-width: none; }
.hero--shot .hero__lede { max-width: 44ch; margin-inline: auto; }
.hero--shot .hero__actions { justify-content: center; }
.hero--shot .hero__note { justify-content: center; }

/* The shot itself. It is deliberately allowed past the container: a screenshot
   that stops at the text measure reads as an illustration, and one that runs
   wider than the words reads as a window onto something bigger. */
.hero__shot {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: var(--space-12) auto 0;
    padding-inline: var(--space-6);
}

.hero__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Fades the bottom edge into the section below instead of cutting it off with
   a hard line — the same trick as the reference site, done with a mask so it
   works on either theme without a matching solid colour. */
.hero__shot::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 96px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

@media (max-width: 720px) {
    .hero__shot { margin-top: var(--space-8); padding-inline: var(--space-4); }
    .hero__shot::after { height: 48px; }
}

/* -- A step that carries a tag --------------------------------------------- */
.step__tag {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: .2rem .6rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
}

/* -- Split section with a screenshot on one side --------------------------- */
.shotsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-12);
    align-items: center;
}

.shotsplit--flip > :first-child { order: 2; }

.shotsplit__figure {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
}

.shotsplit__figure img { display: block; width: 100%; height: auto; }

.shotsplit__title {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    letter-spacing: -.03em;
    margin-bottom: var(--space-4);
}

.shotsplit__body {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
    .shotsplit { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .shotsplit--flip > :first-child { order: 0; }
}

/* -- The dark band ---------------------------------------------------------
   A band that is dark on both themes. Its colours are hard-coded rather than
   taken from the semantic tokens on purpose: it is a fixed piece of art
   direction, not a surface that should follow the reader's preference. */
.band-dark {
    background: radial-gradient(900px 520px at 12% -10%, rgba(14, 165, 165, .22), transparent 62%),
                radial-gradient(760px 520px at 92% 108%, rgba(52, 224, 192, .14), transparent 60%),
                #0a1616;
    color: #fff;
    border-block: 1px solid rgba(255, 255, 255, .08);
}

.band-dark .section__title { color: #fff; }
.band-dark .kicker { color: var(--p-accent-400); }
.band-dark .section-head__lede { color: rgba(255, 255, 255, .72); }

.showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.showcase__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .035);
    overflow: hidden;
}

.showcase__media {
    position: relative;
    margin: 0;
    background: #000;
}

.showcase__media img { display: block; width: 100%; height: auto; }

/* The dashed frame over the zoom example, marking where the picture was cut
   from. Drawn here rather than baked into the image so the label stays live
   text. */
.showcase__crop {
    position: absolute;
    /* 914x1626 out of 1080x1920 — the crop the 1.18x zoom actually takes. */
    inset: 7.7% 7.7%;
    border: 2px dashed rgba(255, 255, 255, .85);
    border-radius: 4px;
}

.showcase__crop span {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .1rem .5rem;
    font-size: .6875rem;
    font-weight: 700;
    color: #0a1616;
    background: var(--p-accent-400);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* The split marker over the before/after example. */
.showcase__split {
    position: absolute;
    inset: 0 auto 0 50%;
    width: 2px;
    background: rgba(255, 255, 255, .85);
}

.showcase__mark {
    position: absolute;
    bottom: .75rem;
    padding: .15rem .55rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10, 22, 22, .78);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-pill);
}

.showcase__mark--left { left: .75rem; }
.showcase__mark--right { right: .75rem; }

/* The strip that quotes the line the graphic was made from — the device that
   makes the whole section land: it ties a picture to a spoken sentence. */
.showcase__quote {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .78);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.showcase__quote svg { width: 14px; height: 14px; flex: none; margin-top: .15rem; color: var(--p-accent-400); }
.showcase__quote b { color: #fff; font-weight: 650; }

/* The three cards carry different numbers of tags, so the text block grows to
   fill the row's height and the tags sit on its floor — otherwise the shortest
   card ends with a hole in it. */
.showcase__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-4) var(--space-4) var(--space-6);
}

.showcase__text .tagset { margin-top: auto; }

.showcase__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 var(--space-2);
    font-size: 1.0625rem;
    color: #fff;
}

.showcase__title svg { width: 18px; height: 18px; color: var(--p-accent-400); }

.showcase__body {
    margin: 0 0 var(--space-4);
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .70);
}

.tagset {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tagset li {
    padding: .25rem .625rem;
    font-size: .75rem;
    color: rgba(255, 255, 255, .80);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius-pill);
}

.tagset li.is-more { color: rgba(255, 255, 255, .55); background: none; }

/* The four plain columns under the cards. No boxes: after three bordered
   cards, a fourth row of them would read as more of the same rather than as
   the guarantees they are. */
.assurances {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-16);
}

.assurance__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--p-accent-400);
    background: rgba(52, 224, 192, .12);
}

.assurance__icon svg { width: 19px; height: 19px; }
.assurance__title { margin: 0 0 var(--space-2); font-size: .9375rem; color: #fff; }
.assurance__body { margin: 0; font-size: .8125rem; line-height: 1.6; color: rgba(255, 255, 255, .68); }

.band-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    max-width: 44rem;
    margin: var(--space-16) auto 0;
    padding: var(--space-4) var(--space-6);
    font-size: .875rem;
    text-align: center;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius-lg);
}

.band-note svg { width: 17px; height: 17px; flex: none; color: var(--p-accent-400); }

@media (max-width: 960px) {
    .showcase { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; }
    .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (max-width: 560px) {
    .assurances { grid-template-columns: minmax(0, 1fr); }
}

/* -- A wide screenshot presented on its own --------------------------------- */
.shot-wide {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
}

.shot-wide img { display: block; width: 100%; height: auto; }

.shot-wide__caption {
    margin: var(--space-4) 0 0;
    font-size: .8125rem;
    text-align: center;
    color: var(--text-muted);
}

/* -- Use-case cards that carry an icon -------------------------------------- */
.usecase__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.usecase__icon svg { width: 19px; height: 19px; }

/* Six cards want three columns, not the five that auto-fit would give them at
   this container width. */
.usecase-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) { .usecase-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .usecase-grid--three { grid-template-columns: minmax(0, 1fr); } }

/* A screenshot in half a column is always small. On wide viewports the figure
   is allowed to run to the edge of the window, which buys it another 150-odd
   pixels — enough for the timeline's row labels to be legible. */
@media (min-width: 1200px) {
    .shotsplit__figure--bleed {
        margin-right: calc((100vw - var(--container)) / -2 - var(--space-6));
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        border-right: 0;
    }
}

/* A screenshot has a theme of its own, so each one ships twice and the pair is
   switched the same way every other themed thing on this page is: the media
   query for the reader's system setting, and the attribute for the header's
   toggle overriding it.

   Shipping two files costs nothing to download: the inactive one is
   display:none, and a lazy image that is never laid out is never fetched — so
   a reader only ever pulls the pictures for the theme they are actually in.
   That holds only while every one of these carries loading="lazy"; drop the
   attribute and the hidden file starts being downloaded by everybody. */
/* Written as `img.shot-dark` rather than `.shot-dark`: the figures above each
   set `display: block` on their own `img` descendant, which is a (0,1,1)
   selector, and a bare class would lose to it and leave both files on screen. */
img.shot-dark { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img.shot-light { display: none; }
    :root:not([data-theme="light"]) img.shot-dark { display: block; }
}

:root[data-theme="dark"] img.shot-light { display: none; }
:root[data-theme="dark"] img.shot-dark { display: block; }
:root[data-theme="light"] img.shot-light { display: block; }
:root[data-theme="light"] img.shot-dark { display: none; }