/* Built by scripts/build-site.mjs from the design system tokens, app/theme.css and site/site.css. Do not edit. */

/* ---- tokens/fonts.css ---- */
/* Involet webfonts.
     Recoleta        — display serif: headings, large money, the wordmark
     Public Sans     — everything operational: navigation, controls, labels,
                       tables, and every figure. Figures rely on Public Sans'
                       tabular-nums, NOT on a monospaced face — the system has
                       no mono font and no --font-mono token.
     Caveat          — script accent. RARE. See --font-script below.
   Recoleta and Caveat are self-hosted from assets/fonts/; Public Sans loads
   from Google Fonts.

   NOTE: Recoleta ships upright only — there is no italic in the supplied set.
   Nothing in this system sets font-style:italic on the serif; quotes and the
   invoice sign-off use Recoleta Light upright instead. base.css sets
   font-synthesis:none so a stray italic can never be faked. */
@font-face{
  font-family:"Recoleta";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Recoleta-Thin.ttf") format("truetype");
  font-weight:100;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Recoleta";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Recoleta-Light.ttf") format("truetype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Recoleta";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Recoleta-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Recoleta";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Recoleta-Medium.ttf") format("truetype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Recoleta";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Recoleta-SemiBold.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Recoleta";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Recoleta-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Recoleta";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Recoleta-Black.ttf") format("truetype");
  font-weight:900;font-style:normal;font-display:swap;
}

@font-face{
  font-family:"Caveat";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Caveat-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Caveat";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Caveat-Medium.ttf") format("truetype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Caveat";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Caveat-SemiBold.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Caveat";
  src:url("/_ds/involet-design-system-8d248931-c2e9-49d0-b437-b8acca6e310d/assets/fonts/Caveat-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --font-serif:"Recoleta",'Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Script accent — at most ONE instance per view, and never in the app's
     working chrome. Sanctioned uses only:
       · the closing line on an invoice ("Thank you")
       · a marketing annotation beside a headline
       · a milestone moment (first invoice paid, project finished)
     Not for labels, buttons, status, data, or anything a user must read fast. */
  --font-script:"Caveat","Bradley Hand",cursive;
}

/* ---- tokens/colors.css ---- */
/* ── Involet colour system ───────────────────────────────────────────────
   Base ramps are literal. Semantic aliases are what product code should use.
   Light only — Involet ships no dark theme, so there is one set of roles and
   no theme scope to keep in sync.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  /* Warm neutral ramp — paper & ink */
  --warm-25:#FDFCF9;  --warm-50:#FAF7F1;  --warm-100:#F6F2EA;
  --warm-150:#F0EBE1; --warm-200:#E8E1D4; --warm-300:#D9D0BF;
  --warm-400:#BFB5A2; --warm-500:#9C9384; --warm-600:#756E63;
  --warm-700:#544E45; --warm-800:#35312B; --warm-900:#211E19;
  --warm-950:#12100C;

  /* Stationery accents — 100 = surface, 200 = edge / folder tab,
     350 = mount & billing bars, 600 = ink, 800 = deep ink */
  --sky-100:#E5EEF7;  --sky-200:#C9DDEF;  --sky-350:#7FA9CC; --sky-600:#3B6E96; --sky-800:#23455F;
  --lav-100:#E9EAFA;  --lav-200:#D3D7F5;  --lav-350:#A3AEEC; --lav-600:#4F5CB2; --lav-800:#313A78;
  --but-100:#FBF3DA;  --but-200:#F6E5B2;  --but-350:#DFBE63; --but-600:#8E7020; --but-800:#584512;
  --pea-100:#FAE8DD;  --pea-200:#F4D1BB;  --pea-350:#E0A377; --pea-600:#A45C37; --pea-800:#673921;
  --sag-100:#E5EEE3;  --sag-200:#CADDC7;  --sag-350:#8FB58A; --sag-600:#4C7749; --sag-800:#2F4E2D;
  --cor-100:#FBE4E2;  --cor-200:#F5C8C3;  --cor-350:#E39A93; --cor-600:#A64D47; --cor-800:#672E2A;
  --cre-100:#FBF6EB;  --cre-200:#F4EAD4;  --cre-350:#D3BE92;

  /* One step deeper than --paper-<tint>: folder tabs, layered paper edges */
  --edge-sky:var(--sky-200);
  --edge-lavender:var(--lav-200);
  --edge-butter:var(--but-200);
  --edge-peach:var(--pea-200);
  --edge-sage:var(--sag-200);
  --edge-coral:var(--cor-200);
  --edge-cream:var(--cre-200);

  /* Card mounts — the saturated frame around a mounted sheet */
  --mount-sky:var(--sky-350);
  --mount-lavender:var(--lav-350);
  --mount-butter:var(--but-350);
  --mount-peach:var(--pea-350);
  --mount-sage:var(--sag-350);
  --mount-coral:var(--cor-350);
  --mount-cream:var(--cre-350);

  /* Ink used for tactile shadows — warm, never pure black */
  --shadow-ink:38 30 20; /* @kind other */
  --highlight-ink:255 253 248; /* @kind other */

  /* ── Semantic roles: digital paper ──────────────────────────────────── */
  color-scheme:light;

  --bg-page:var(--warm-50);
  --bg-page-deep:var(--warm-150);
  --surface-paper:#FFFDF9;
  --surface-card:#FFFDF9;
  --surface-sunken:var(--warm-100);
  --surface-raised:#FFFFFF;
  --surface-glass:rgb(255 253 249 / .72);
  --surface-glass-strong:rgb(255 253 249 / .88);
  --surface-inverse:var(--warm-900);

  --text-title:var(--warm-950);
  --text-body:var(--warm-900);
  --text-secondary:var(--warm-700);
  --text-muted:var(--warm-600);   /* 4.6:1 on --bg-page — safe for small text */
  --text-faint:var(--warm-500);   /* 2.8:1 — rules, dots, disabled marks, NOT text */
  --text-inverse:var(--warm-25);
  --text-link:var(--lav-600);
  --text-link-hover:var(--lav-800);

  --border-hairline:rgb(33 30 25 / .07);
  --border-subtle:rgb(33 30 25 / .10);
  --border-strong:rgb(33 30 25 / .18);
  --border-glass:rgb(255 255 255 / .70);
  --border-focus:var(--lav-600);

  --accent:var(--lav-600);
  --accent-ink:var(--lav-800);
  --accent-surface:var(--lav-100);
  --accent-edge:var(--lav-200);

  --paper-sky:var(--sky-100);      --ink-sky:var(--sky-800);
  --paper-lavender:var(--lav-100); --ink-lavender:var(--lav-800);
  --paper-butter:var(--but-100);   --ink-butter:var(--but-800);
  --paper-peach:var(--pea-100);    --ink-peach:var(--pea-800);
  --paper-sage:var(--sag-100);     --ink-sage:var(--sag-800);
  --paper-coral:var(--cor-100);    --ink-coral:var(--cor-800);
  --paper-cream:var(--cre-100);    --ink-cream:var(--warm-800);

  /* Product status vocabulary — one colour per state, everywhere */
  --status-draft:var(--warm-600);      --status-draft-surface:var(--warm-100);   --status-draft-edge:var(--warm-200);
  --status-sent:var(--sky-600);        --status-sent-surface:var(--sky-100);     --status-sent-edge:var(--sky-200);
  --status-paid:var(--sag-600);        --status-paid-surface:var(--sag-100);     --status-paid-edge:var(--sag-200);
  --status-overdue:var(--cor-600);     --status-overdue-surface:var(--cor-100);  --status-overdue-edge:var(--cor-200);
  --status-unbilled:var(--but-600);    --status-unbilled-surface:var(--but-100); --status-unbilled-edge:var(--but-200);
  --status-running:var(--lav-600);     --status-running-surface:var(--lav-100);  --status-running-edge:var(--lav-200);
  --status-archived:var(--warm-500);   --status-archived-surface:var(--warm-100);--status-archived-edge:var(--warm-200);

  /* Money and billing */
  --money-positive:var(--warm-950);    /* figures are ink, not green */
  --money-owed:var(--cor-600);
  --money-muted:var(--warm-500);
  --bar-track:var(--warm-150);
  --bar-billed:var(--sag-350);
  --bar-unbilled:var(--but-350);
  --bar-remaining:var(--warm-300);

  --success:var(--sag-600); --success-surface:var(--sag-100);
  --warning:var(--but-600); --warning-surface:var(--but-100);
  --danger:var(--cor-600);  --danger-surface:var(--cor-100);
  --info:var(--sky-600);    --info-surface:var(--sky-100);

  --btn-primary-bg:var(--warm-950);
  --btn-primary-bg-hover:var(--warm-900);
  --btn-primary-text:var(--warm-25);

  --grain-opacity:.32; /* @kind other */
  --grain-blend:multiply; /* @kind other */
}

/* ---- tokens/typography.css ---- */
/* ── Type scale ──────────────────────────────────────────────────────────
   Display and money sizes are Recoleta; UI sizes are Public Sans.
   Recoleta's counters are rounder and its sidebearings tighter than a
   book serif, so display tracking is looser here than a Garamond-style
   face would want. Recoleta has no italic — see tokens/fonts.css.
   Each step ships size / line-height / tracking as three tokens. */
:root{
  --fs-display-xl:4.75rem;
  --lh-display-xl:1.02; /* @kind font */
  --ls-display-xl:-.022em; /* @kind font */
  --fs-display-lg:3.75rem;
  --lh-display-lg:1.05; /* @kind font */
  --ls-display-lg:-.020em; /* @kind font */
  --fs-display-md:2.875rem;
  --lh-display-md:1.10; /* @kind font */
  --ls-display-md:-.017em; /* @kind font */
  --fs-display-sm:2.25rem;
  --lh-display-sm:1.16; /* @kind font */
  --ls-display-sm:-.013em; /* @kind font */

  --fs-title-lg:1.75rem;
  --lh-title-lg:1.24; /* @kind font */
  --ls-title-lg:-.010em; /* @kind font */
  --fs-title-md:1.375rem;
  --lh-title-md:1.32; /* @kind font */
  --ls-title-md:-.008em; /* @kind font */
  --fs-title-sm:1.125rem;
  --lh-title-sm:1.40; /* @kind font */
  --ls-title-sm:-.004em; /* @kind font */

  --fs-read-lg:1.1875rem;
  --lh-read-lg:1.78; /* @kind font */
  --fs-read-md:1.0625rem;
  --lh-read-md:1.72; /* @kind font */

  --fs-body-lg:1.0625rem;
  --lh-body-lg:1.62; /* @kind font */
  --fs-body-md:.9375rem;
  --lh-body-md:1.58; /* @kind font */
  --fs-body-sm:.8125rem;
  --lh-body-sm:1.52; /* @kind font */

  --fs-label-md:.8125rem;
  --lh-label-md:1.30; /* @kind font */
  --ls-label-md:.004em; /* @kind font */
  --fs-label-sm:.6875rem;
  --lh-label-sm:1.20; /* @kind font */
  --ls-label-sm:.09em; /* @kind font */

  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Financial figures and tracked time.
     Large money is the display serif — it is the loudest thing on a screen.
     Table money and all durations are Public Sans with tabular figures, and
     carry weight 500 so they hold their own against label text. */
  --fs-money-xl:3.5rem;    --lh-money-xl:1.0; /* @kind font */  --ls-money-xl:-.022em; /* @kind font */
  --fs-money-lg:2.125rem;  --lh-money-lg:1.05; /* @kind font */ --ls-money-lg:-.018em; /* @kind font */
  --fs-money-md:1.3125rem; --lh-money-md:1.2; /* @kind font */  --ls-money-md:-.010em; /* @kind font */
  --fs-money-sm:.9375rem;  --lh-money-sm:1.4; /* @kind font */  --ls-money-sm:0em; /* @kind font */

  --fs-timer:2.75rem;      --lh-timer:1.0; /* @kind font */  --ls-timer:-.020em; /* @kind font */
  --fs-duration-lg:1.375rem; --ls-duration-lg:-.008em; /* @kind font */
  --fs-duration-md:.9375rem; --ls-duration-md:0em; /* @kind font */

  --fs-table:.875rem;      --lh-table:1.45; /* @kind font */

  /* Script accent. Caveat has a small x-height and a light stroke, so these
     steps run ABOVE the equivalent body sizes and the roles set weight 500. */
  --fs-script-lg:2rem; /* @kind font */
  --fs-script-md:1.5rem; /* @kind font */
  --fs-script-sm:1.25rem; /* @kind font */
  --lh-script:1.25; /* @kind font */
  --fw-script:500; /* @kind font */

  --measure-read:34rem; /* @kind spacing */
  --measure-prose:44rem; /* @kind spacing */
}

/* Text roles — apply as classes when not using a component */
.iv-display-xl{font-family:var(--font-serif);font-size:var(--fs-display-xl);line-height:var(--lh-display-xl);letter-spacing:var(--ls-display-xl);font-weight:var(--fw-regular);color:var(--text-title);text-wrap:balance}
.iv-display-lg{font-family:var(--font-serif);font-size:var(--fs-display-lg);line-height:var(--lh-display-lg);letter-spacing:var(--ls-display-lg);font-weight:var(--fw-regular);color:var(--text-title);text-wrap:balance}
.iv-display-md{font-family:var(--font-serif);font-size:var(--fs-display-md);line-height:var(--lh-display-md);letter-spacing:var(--ls-display-md);font-weight:var(--fw-regular);color:var(--text-title);text-wrap:balance}
.iv-display-sm{font-family:var(--font-serif);font-size:var(--fs-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--ls-display-sm);font-weight:var(--fw-regular);color:var(--text-title);text-wrap:balance}
.iv-title-lg{font-family:var(--font-serif);font-size:var(--fs-title-lg);line-height:var(--lh-title-lg);letter-spacing:var(--ls-title-lg);font-weight:var(--fw-regular);color:var(--text-title)}
.iv-title-md{font-family:var(--font-serif);font-size:var(--fs-title-md);line-height:var(--lh-title-md);letter-spacing:var(--ls-title-md);font-weight:var(--fw-medium);color:var(--text-title)}
.iv-title-sm{font-family:var(--font-sans);font-size:var(--fs-title-sm);line-height:var(--lh-title-sm);letter-spacing:var(--ls-title-sm);font-weight:var(--fw-semibold);color:var(--text-title)}
.iv-read{font-family:var(--font-serif);font-size:var(--fs-read-md);line-height:var(--lh-read-md);color:var(--text-body);max-width:var(--measure-read);text-wrap:pretty}
.iv-read-lg{font-family:var(--font-serif);font-size:var(--fs-read-lg);line-height:var(--lh-read-lg);color:var(--text-body);max-width:var(--measure-read);text-wrap:pretty}
.iv-body{font-family:var(--font-sans);font-size:var(--fs-body-md);line-height:var(--lh-body-md);color:var(--text-body)}
.iv-body-lg{font-family:var(--font-sans);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--text-body)}
.iv-body-sm{font-family:var(--font-sans);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text-secondary)}
.iv-label{font-family:var(--font-sans);font-size:var(--fs-label-md);line-height:var(--lh-label-md);letter-spacing:var(--ls-label-md);font-weight:var(--fw-medium);color:var(--text-secondary)}
.iv-eyebrow{font-family:var(--font-sans);font-size:var(--fs-label-sm);line-height:var(--lh-label-sm);letter-spacing:var(--ls-label-sm);font-weight:var(--fw-semibold);text-transform:uppercase;color:var(--text-muted)}
.iv-numeral{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);color:var(--text-secondary)}
/* money — serif at hero sizes, tabular Public Sans in tables */
.iv-money-xl{font-family:var(--font-serif);font-size:var(--fs-money-xl);line-height:var(--lh-money-xl);letter-spacing:var(--ls-money-xl);font-weight:var(--fw-regular);color:var(--money-positive);font-variant-numeric:tabular-nums}
.iv-money-lg{font-family:var(--font-serif);font-size:var(--fs-money-lg);line-height:var(--lh-money-lg);letter-spacing:var(--ls-money-lg);font-weight:var(--fw-regular);color:var(--money-positive);font-variant-numeric:tabular-nums}
.iv-money-md{font-family:var(--font-serif);font-size:var(--fs-money-md);line-height:var(--lh-money-md);letter-spacing:var(--ls-money-md);font-weight:var(--fw-medium);color:var(--money-positive);font-variant-numeric:tabular-nums}
.iv-money-sm{font-family:var(--font-sans);font-size:var(--fs-money-sm);line-height:var(--lh-money-sm);letter-spacing:var(--ls-money-sm);font-weight:var(--fw-medium);color:var(--text-body);font-variant-numeric:tabular-nums}
/* tracked time — Public Sans, always tabular so the timer cannot jitter */
.iv-timer{font-family:var(--font-sans);font-size:var(--fs-timer);line-height:var(--lh-timer);letter-spacing:var(--ls-timer);font-weight:var(--fw-medium);color:var(--text-title);font-variant-numeric:tabular-nums}
.iv-duration-lg{font-family:var(--font-sans);font-size:var(--fs-duration-lg);letter-spacing:var(--ls-duration-lg);font-weight:var(--fw-medium);color:var(--text-title);font-variant-numeric:tabular-nums}
.iv-duration{font-family:var(--font-sans);font-size:var(--fs-duration-md);letter-spacing:var(--ls-duration-md);font-weight:var(--fw-medium);color:var(--text-body);font-variant-numeric:tabular-nums}
.iv-table{font-family:var(--font-sans);font-size:var(--fs-table);line-height:var(--lh-table);color:var(--text-body)}
.iv-table-num{font-family:var(--font-sans);font-size:var(--fs-table);line-height:var(--lh-table);color:var(--text-body);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium)}
/* script accent — rare by design; see --font-script in tokens/fonts.css */
.iv-script{font-family:var(--font-script);font-size:var(--fs-script-md);line-height:var(--lh-script);font-weight:var(--fw-script);color:var(--text-secondary)}
.iv-script-lg{font-family:var(--font-script);font-size:var(--fs-script-lg);line-height:var(--lh-script);font-weight:var(--fw-script);color:var(--text-secondary)}
.iv-script-sm{font-family:var(--font-script);font-size:var(--fs-script-sm);line-height:var(--lh-script);font-weight:var(--fw-script);color:var(--text-secondary)}
/* pulled quotes and the invoice sign-off — Recoleta Light, upright.
   Recoleta has no italic; never set font-style:italic on the serif. */
.iv-quote{font-family:var(--font-serif);font-weight:var(--fw-light);font-style:normal;letter-spacing:-.008em}

/* ---- tokens/spacing.css ---- */
/* ── Spacing scale ───────────────────────────────────────────────────────
   4px base with two sub-steps for hairline optical work. Layout tokens at
   the bottom hold the app's fixed chrome dimensions. */
:root{
  --space-0:0;
  --space-025:2px;
  --space-05:4px;
  --space-1:6px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:96px;
  --space-13:128px;
  --space-14:160px;

  --gutter-mobile:20px;
  --gutter-tablet:32px;
  --gutter-desktop:48px;

  --sidebar-w:252px;
  --sidebar-w-collapsed:68px;
  --rail-w:320px;          /* contextual right panel */
  --topnav-h:60px;
  --mobilenav-h:66px;
  --container-app:1440px;
  --container-site:1180px;

  --touch-min:44px; /* @kind spacing */
  --section-y:var(--space-12); /* @kind spacing */
  --section-y-mobile:var(--space-10); /* @kind spacing */
}

/* ---- tokens/radius.css ---- */
/* ── Radius system ───────────────────────────────────────────────────────
   App UI sits at md/lg. Feature and marketing surfaces go xl and up.
   Pill is reserved for buttons, tags and toggles — not for cards. */
:root{
  --radius-xs:5px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --radius-2xl:28px;
  --radius-3xl:40px;
  --radius-pill:999px;
  --radius-photo:10px;    /* printed-photograph corner */
  --radius-input:11px;
  --radius-card:18px;
  --radius-sheet:26px;    /* paper sheets, modals, notebooks */
}

/* ---- tokens/shadows.css ---- */
/* ── Shadow & border system ──────────────────────────────────────────────
   Large blur, low opacity, warm ink. Objects sit slightly above paper —
   they never punch a hole in it. Elevation shadows pair with an inner
   highlight on light surfaces to read as a physical edge. */
:root{
  --shadow-xs:
    0 1px 1px rgb(var(--shadow-ink) / .04),
    0 1px 3px -1px rgb(var(--shadow-ink) / .05);
  --shadow-sm:
    0 1px 2px rgb(var(--shadow-ink) / .04),
    0 4px 10px -3px rgb(var(--shadow-ink) / .07);
  --shadow-md:
    0 1px 2px rgb(var(--shadow-ink) / .04),
    0 8px 20px -6px rgb(var(--shadow-ink) / .09),
    0 20px 40px -20px rgb(var(--shadow-ink) / .07);
  --shadow-float:
    0 2px 4px rgb(var(--shadow-ink) / .04),
    0 14px 28px -8px rgb(var(--shadow-ink) / .10),
    0 40px 72px -28px rgb(var(--shadow-ink) / .16);
  --shadow-photo:
    0 1px 2px rgb(var(--shadow-ink) / .10),
    0 10px 22px -8px rgb(var(--shadow-ink) / .18);
  --shadow-press:inset 0 1px 2px rgb(var(--shadow-ink) / .12);
  --shadow-inset-hairline:inset 0 0 0 1px rgb(var(--shadow-ink) / .05);
  --highlight-top:inset 0 1px 0 rgb(var(--highlight-ink) / .75); /* @kind shadow */
  --highlight-soft:inset 0 1px 0 rgb(var(--highlight-ink) / .45); /* @kind shadow */

  /* ── Drop-shadow elevations ──────────────────────────────────────────
     `filter: drop-shadow()` cannot consume the multi-layer --shadow-*
     tokens, so compound silhouettes (a folder tab + body, any clipped or
     multi-part shape) get their own single-layer equivalents. Same intent
     and roughly the same weight as --shadow-xs / -sm / -md: use these only
     where box-shadow genuinely cannot reach. */
  --drop-xs:0 1px 1px rgb(var(--shadow-ink) / .10); /* @kind shadow */
  --drop-sm:0 2px 6px rgb(var(--shadow-ink) / .11); /* @kind shadow */
  --drop-md:0 6px 13px rgb(var(--shadow-ink) / .15); /* @kind shadow */

  /* ── Control depth ───────────────────────────────────────────────────
     Buttons are the one place the system pushes skeuomorphism further than
     a card: a raised control needs a top sheen, a lit top edge, a shaded
     bottom edge, a tight contact shadow and a wide ambient one. The stack
     deepens with size, because a 50px CTA sits visibly higher off the page
     than a 32px control does. */
  --btn-sheen:linear-gradient(180deg,rgb(255 255 255 / .17) 0%,rgb(255 255 255 / .05) 46%,rgb(0 0 0 / .06) 100%); /* @kind other */
  --btn-sheen-paper:linear-gradient(180deg,rgb(var(--highlight-ink) / .95) 0%,rgb(var(--highlight-ink) / .35) 52%,rgb(var(--shadow-ink) / .035) 100%); /* @kind other */

  /* dark-ink controls (primary) */
  --btn-depth-sm:
    inset 0 1px 0 rgb(255 255 255 / .16),
    inset 0 -1px 0 rgb(0 0 0 / .16),
    0 1px 1px rgb(var(--shadow-ink) / .12),
    0 2px 5px -1px rgb(var(--shadow-ink) / .14); /* @kind shadow */
  --btn-depth-md:
    inset 0 1px 0 rgb(255 255 255 / .18),
    inset 0 -1px 0 rgb(0 0 0 / .18),
    0 1px 1px rgb(var(--shadow-ink) / .14),
    0 3px 6px -1px rgb(var(--shadow-ink) / .16),
    0 8px 18px -8px rgb(var(--shadow-ink) / .22); /* @kind shadow */
  --btn-depth-lg:
    inset 0 1px 0 rgb(255 255 255 / .20),
    inset 0 -1px 0 rgb(0 0 0 / .20),
    0 1px 1px rgb(var(--shadow-ink) / .16),
    0 4px 8px -1px rgb(var(--shadow-ink) / .18),
    0 12px 26px -10px rgb(var(--shadow-ink) / .26); /* @kind shadow */
  --btn-depth-lg-hover:
    inset 0 1px 0 rgb(255 255 255 / .22),
    inset 0 -1px 0 rgb(0 0 0 / .18),
    0 1px 1px rgb(var(--shadow-ink) / .14),
    0 6px 12px -2px rgb(var(--shadow-ink) / .18),
    0 20px 40px -14px rgb(var(--shadow-ink) / .30); /* @kind shadow */

  /* paper controls (secondary, tinted) */
  --btn-depth-paper-sm:
    var(--highlight-top),
    inset 0 -1px 0 rgb(var(--shadow-ink) / .07),
    0 1px 1px rgb(var(--shadow-ink) / .05),
    0 2px 4px -1px rgb(var(--shadow-ink) / .07); /* @kind shadow */
  --btn-depth-paper-md:
    var(--highlight-top),
    inset 0 -1px 0 rgb(var(--shadow-ink) / .08),
    0 1px 1px rgb(var(--shadow-ink) / .06),
    0 3px 6px -1px rgb(var(--shadow-ink) / .08),
    0 8px 18px -10px rgb(var(--shadow-ink) / .12); /* @kind shadow */
  --btn-depth-paper-lg:
    var(--highlight-top),
    inset 0 -1px 0 rgb(var(--shadow-ink) / .09),
    0 1px 1px rgb(var(--shadow-ink) / .07),
    0 4px 8px -1px rgb(var(--shadow-ink) / .09),
    0 12px 24px -12px rgb(var(--shadow-ink) / .15); /* @kind shadow */

  /* pressed — the control sits back down into the page */
  --btn-depth-press:
    inset 0 2px 4px rgb(0 0 0 / .22),
    inset 0 1px 0 rgb(0 0 0 / .10),
    0 1px 1px rgb(var(--shadow-ink) / .10); /* @kind shadow */
  --btn-depth-paper-press:
    inset 0 2px 4px rgb(var(--shadow-ink) / .13),
    0 1px 1px rgb(var(--shadow-ink) / .05); /* @kind shadow */

  --border-width:1px; /* @kind spacing */
  --ring-width:3px; /* @kind spacing */
  --ring:0 0 0 var(--ring-width) rgb(79 92 178 / .26); /* @kind shadow */
  --ring-offset:0 0 0 2px var(--bg-page); /* @kind shadow */
  --focus-ring:var(--ring-offset),0 0 0 5px rgb(79 92 178 / .26); /* @kind shadow */
}

/* ---- tokens/motion.css ---- */
/* ── Motion ──────────────────────────────────────────────────────────────
   Calm, physical, short. Hover lifts 1–2px, press settles 1px down.
   Nothing bounces; nothing overshoots more than a hair. */
:root{
  --dur-instant:90ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:340ms; /* @kind other */
  --dur-page:420ms; /* @kind other */

  --ease-standard:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,.84,.32,1); /* @kind other */
  --ease-in-soft:cubic-bezier(.55,.06,.68,.19); /* @kind other */
  --ease-settle:cubic-bezier(.34,1.12,.64,1); /* @kind other */

  --lift-hover:-2px; /* @kind spacing */
  --lift-press:1px; /* @kind spacing */
  --scale-photo-hover:1.02; /* @kind other */

  --t-tactile:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); /* @kind other */
}
@keyframes iv-enter-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes iv-fade{from{opacity:0}to{opacity:1}}
@keyframes iv-sheet-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes iv-drawer-right{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes iv-drawer-left{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes iv-shimmer{from{background-position:-140% 0}to{background-position:240% 0}}
.iv-enter{animation:iv-enter-up var(--dur-page) var(--ease-out-soft) both}
.iv-enter-slow{animation:iv-enter-up 620ms var(--ease-out-soft) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .iv-enter,.iv-enter-slow{animation:iv-fade 1ms both}
}

/* ---- tokens/materials.css ---- */
/* ── Material language ───────────────────────────────────────────────────
   Six materials. Compose with radius + shadow tokens; never invent a new
   surface treatment in product code.
     01 paper   .iv-paper          warm sheet, grain, inner highlight
     02 colour  .iv-paper-<tint>   pastel stationery sheet
     03 glass   .iv-glass          translucent + blur, thin bright border
     04 photo   .iv-photo          printed photograph, physical shadow
     05 card    .iv-card           the workhorse surface
     06 book    .iv-notebook       layered page stack with edge detail
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); /* @kind other */
  --texture-dots:radial-gradient(rgb(var(--shadow-ink) / .13) 1px,transparent 1.1px); /* @kind other */
  --texture-dots-size:18px 18px; /* @kind spacing */
  --texture-grid:linear-gradient(rgb(var(--shadow-ink) / .07) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--shadow-ink) / .07) 1px,transparent 1px); /* @kind other */
  --texture-grid-size:26px 26px; /* @kind spacing */
  --texture-rule:repeating-linear-gradient(to bottom,transparent,transparent 30px,rgb(var(--shadow-ink) / .08) 30px,rgb(var(--shadow-ink) / .08) 31px); /* @kind other */
  --blur-glass:18px; /* @kind spacing */
  --blur-glass-strong:28px; /* @kind spacing */
}

/* grain overlay, shared by paper materials.
   .iv-grain forces position:relative;z-index:2 onto every direct child, so it
   suits a card with flow content — NOT a container whose children carry their
   own stacking order (a desktop, a canvas, anything with absolute layers).
   There, paint grain as an explicit pointer-events:none layer; see
   components/desktop/Wallpaper.jsx. */
.iv-grain{position:relative;isolation:isolate}
.iv-grain::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-image:var(--texture-grain);background-size:160px 160px;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);z-index:1}
.iv-grain>*{position:relative;z-index:2}

/* 01 Paper */
.iv-paper{background:var(--surface-paper);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sheet);box-shadow:var(--highlight-soft),var(--shadow-sm)}
/* 02 Soft colour paper */
.iv-paper-sky{background:var(--paper-sky);color:var(--ink-sky)}
.iv-paper-lavender{background:var(--paper-lavender);color:var(--ink-lavender)}
/* mounted sheet — saturated frame around a paper interior */
.iv-mount{padding:9px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.iv-mount>*{background:var(--surface-paper);border-radius:var(--radius-md);box-shadow:var(--shadow-inset-hairline)}
.iv-paper-butter{background:var(--paper-butter);color:var(--ink-butter)}
.iv-paper-peach{background:var(--paper-peach);color:var(--ink-peach)}
.iv-paper-sage{background:var(--paper-sage);color:var(--ink-sage)}
.iv-paper-coral{background:var(--paper-coral);color:var(--ink-coral)}
.iv-paper-cream{background:var(--paper-cream);color:var(--ink-cream)}
.iv-paper-sky,.iv-paper-lavender,.iv-paper-butter,.iv-paper-peach,.iv-paper-sage,.iv-paper-coral,.iv-paper-cream{border:var(--border-width) solid rgb(var(--shadow-ink) / .06);border-radius:var(--radius-card);box-shadow:var(--highlight-soft),var(--shadow-xs)}
/* 03 Glass */
.iv-glass{background:var(--surface-glass);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.5);backdrop-filter:blur(var(--blur-glass)) saturate(1.5);border:var(--border-width) solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.iv-glass-strong{background:var(--surface-glass-strong);-webkit-backdrop-filter:blur(var(--blur-glass-strong)) saturate(1.6);backdrop-filter:blur(var(--blur-glass-strong)) saturate(1.6);border:var(--border-width) solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
/* 04 Photograph */
.iv-photo{display:block;border-radius:var(--radius-photo);background:var(--warm-200);box-shadow:var(--shadow-photo);overflow:hidden;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.iv-photo img{display:block;width:100%;height:100%;object-fit:cover}
.iv-photo-tilt{transform:rotate(-1.4deg)}
.iv-photo-tilt-alt{transform:rotate(1.1deg)}
/* 05 Card */
.iv-card{background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-card);box-shadow:var(--highlight-soft),var(--shadow-sm)}
.iv-card-interactive{transition:var(--t-tactile);cursor:pointer}
.iv-card-interactive:hover{transform:translateY(var(--lift-hover));box-shadow:var(--highlight-soft),var(--shadow-md)}
.iv-card-interactive:active{transform:translateY(var(--lift-press));box-shadow:var(--shadow-xs)}
/* 06 Notebook — layered page stack */
.iv-notebook{position:relative;background:var(--surface-paper);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sheet);box-shadow:var(--highlight-soft),var(--shadow-md)}
.iv-notebook::before,.iv-notebook::after{content:"";position:absolute;left:10px;right:10px;bottom:-6px;height:14px;border:var(--border-width) solid var(--border-hairline);border-top:none;border-radius:0 0 var(--radius-sheet) var(--radius-sheet);background:var(--surface-paper);z-index:-1}
.iv-notebook::after{left:18px;right:18px;bottom:-11px;background:var(--surface-sunken)}

/* running-timer pulse — the one ambient animation in the product */
@keyframes iv-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.iv-pulse{animation:iv-pulse 2s var(--ease-standard) infinite}

/* decorative accents — sparing */
.iv-tape{position:absolute;width:86px;height:24px;background:rgb(var(--highlight-ink) / .55);border-left:1px solid rgb(var(--shadow-ink) / .07);border-right:1px solid rgb(var(--shadow-ink) / .07);box-shadow:0 1px 2px rgb(var(--shadow-ink) / .08);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:.85}
.iv-torn-bottom{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v13c-12 3-19-1-30 1s-16 4-27 2-14-4-25-2-18 4-29 2-16-4-27-2-19 3-32-1z' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v13c-12 3-19-1-30 1s-16 4-27 2-14-4-25-2-18 4-29 2-16-4-27-2-19 3-32-1z' fill='%23000'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.iv-ruled{background-image:var(--texture-rule);background-position:0 4px}
.iv-dotted{background-image:var(--texture-dots);background-size:var(--texture-dots-size)}
.iv-gridpaper{background-image:var(--texture-grid);background-size:var(--texture-grid-size)}

/* ---- tokens/base.css ---- */
/* ── Base layer ──────────────────────────────────────────────────────────
   Page substrate, link colours, focus ring, selection. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-body-md);line-height:var(--lh-body-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--text-link);text-decoration-color:rgb(79 92 178 / .34);text-underline-offset:.18em;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-standard),text-decoration-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
::selection{background:var(--but-200);color:var(--warm-950)}
hr{border:none;border-top:1px solid var(--border-hairline);margin:var(--space-6) 0}
.iv-page{background:var(--bg-page);color:var(--text-body);min-height:100%}
.iv-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- app/theme.css ---- */
/* The product's colour, stated once.
 *
 * Involets opens on the Mist wallpaper, and the desk derives its whole accent
 * family from whatever wallpaper is on — so inside the app the blue below is
 * simply what the default wallpaper produces, and choosing another wallpaper
 * replaces it. That behaviour is untouched: the desk sets these same
 * custom properties on its own root, which beats :root, so a wallpaper still
 * decides the colour of the app.
 *
 * What was missing is everywhere ELSE. The design system's own default accent
 * is a lavender, and the signed-out pages each had to opt into the blue by
 * hand — so /extension kept a warm cream ground and a near-black button while
 * /support two links away was blue on blue-grey. One product, two palettes,
 * depending which page you landed on.
 *
 * These are the values accentFamily() derives from Mist (#3A6FD8), written
 * down rather than computed, because a static page should not have to load
 * the application to know what colour the product is. If Mist's hex ever
 * changes, involets-pages.8.jsx carries the same snapshot and both move
 * together.
 *
 * Linked after the design system's tokens in every document, so it overrides
 * them, and before anything that scopes its own accent.
 */
:root {
  --accent: rgb(58 111 216);
  --accent-rgb: 58 111 216;
  --accent-surface: rgb(238 238 239);
  --accent-edge: rgb(214 221 236);
  --accent-wash: rgb(245 244 240);
  --accent-ink: rgb(56 107 209);
  --surface-sunken: rgb(231 233 239);
  --field-bg: rgb(238 239 240);
  --border-focus: rgb(58 111 216);
  --border-selected: rgb(190 204 233);
  --text-link: rgb(53 101 196);
  --text-link-hover: rgb(40 77 151);
  --ring: 0 0 0 3px rgb(58 111 216 / .26);
  --btn-primary-bg: rgb(58 111 216);
  --status-running: rgb(58 111 216);
  --paper-lavender: rgb(235 236 239);
  --edge-lavender: rgb(210 218 236);
  --mount-lavender: rgb(146 174 228);
  --ink-lavender: rgb(58 110 215);

  /* The ground every signed-out page stands on: two soft washes over the
     cool surface, which is what stops a flat panel reading as a form. */
  --page-wash:
    radial-gradient(90% 60% at 10% 0%, var(--paper-lavender) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(70% 50% at 95% 4%, var(--paper-sky) 0%, rgba(0, 0, 0, 0) 58%),
    var(--accent-surface);
}

/* THE THIRTEEN FOLDER COLOURS THE KIT HAS NEVER HEARD OF.
 *
 * A project is given one of twenty colours — involets-desktop.jsx offers them
 * all in the picker and randomFolder() draws a new project's from the same
 * twenty. The design system defines --mount-* for seven of them. Everything
 * that marks a project by rule rather than by drawn folder reads that token,
 * so the other thirteen resolved to nothing and left a blank where the mark
 * should be: a project with a perfectly good colour, invisible in the Reports
 * table and on its own time rows. A new project had a thirteen-in-twenty
 * chance of it.
 *
 * The seven the kit knows are left exactly as they are — its own ramp, not
 * touched. These are the other thirteen, at the hex the desk already draws
 * that folder with, so a rule and its folder are the same colour.
 */
:root {
  --mount-teal: #33A9A0;
  --mount-indigo: #5A65D6;
  --mount-plum: #A063C4;
  --mount-rose: #DE6E92;
  --mount-clay: #B4785A;
  --mount-moss: #7A9E4B;
  --mount-ocean: #2F7EB5;
  --mount-amber: #D98A2B;
  --mount-slate: #6C7A8C;
  --mount-mint: #5EC29A;
  --mount-wine: #A9506B;
  --mount-olive: #95893F;
  --mount-ink: #5A5346;
}

/* ---- site/site.css ---- */
/* The marketing site: home, features, pricing and the help centre.
 *
 * Built into public/site/site.css by scripts/build-site.mjs, AFTER the design
 * system's token files and app/theme.css, so every value below is a token
 * and the product's blue is the site's blue. The design system's own rule
 * for this surface: the marketing site may be playful, the app must be quiet.
 * Grain, pastel panels at very large radii and a floating pill nav live here
 * and nowhere in the desk.
 *
 * Plain CSS with classes, unlike the DC templates: these pages are static
 * HTML a crawler reads as it arrives, not components.
 */

/* ---------- ground ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-body);
  background: var(--accent-surface);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: var(--fw-regular); color: var(--text-title); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* One arrow, everywhere: the rule app.html argues for in full, said again
   because every document carries its own CSS. No hand on a link, a button or
   a summary; text fields keep their caret. */
a, button, summary, label, [role="button"], [role="tab"] { cursor: default !important; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed !important; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: var(--shadow-md); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--container-site); margin: 0 auto; padding: 0 var(--gutter-desktop); }
.wrap-narrow { max-width: 820px; }
@media (max-width: 900px) { .wrap { padding: 0 var(--gutter-tablet); } }
@media (max-width: 560px) { .wrap { padding: 0 var(--gutter-mobile); } }

.section { padding: var(--section-y) 0; }
.section-tight { padding: var(--space-11) 0; }
@media (max-width: 720px) { .section { padding: var(--section-y-mobile) 0; } .section-tight { padding: var(--space-10) 0; } }

.paper-band { background: var(--surface-paper); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); letter-spacing: var(--ls-label-sm);
  font-weight: var(--fw-semibold); text-transform: uppercase; color: var(--text-muted);
}
.eyebrow-accent { color: var(--accent-ink); }
.display {
  font-size: clamp(2.6rem, 6.2vw, var(--fs-display-xl));
  line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl);
}
.h2 { font-size: clamp(2rem, 4.4vw, var(--fs-display-md)); line-height: var(--lh-display-md); letter-spacing: var(--ls-display-md); }
.h3 { font-size: clamp(1.5rem, 3vw, var(--fs-display-sm)); line-height: var(--lh-display-sm); letter-spacing: var(--ls-display-sm); }
.h4 { font-size: var(--fs-title-md); line-height: var(--lh-title-md); letter-spacing: var(--ls-title-md); }
.lede { font-size: var(--fs-read-lg); line-height: var(--lh-body-lg); color: var(--text-secondary); max-width: 40rem; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.center { text-align: center; }
.center .lede, .center.lede { margin-left: auto; margin-right: auto; }
.section-head { max-width: 46rem; margin-bottom: var(--space-10); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head .h2 { margin-top: var(--space-3); }
.section-head .lede { margin-top: var(--space-4); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
  font: var(--fw-semibold) var(--fs-body-md)/1 var(--font-sans); white-space: nowrap;
  text-decoration: none !important;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-primary { color: var(--btn-primary-text); background: var(--btn-sheen), var(--btn-primary-bg); box-shadow: var(--btn-depth-md); }
.btn-primary:hover { color: var(--btn-primary-text); transform: translateY(-2px); box-shadow: var(--btn-depth-lg); }
.btn-paper { color: var(--text-title); background: var(--btn-sheen-paper), var(--surface-raised); box-shadow: var(--btn-depth-paper-md); }
.btn-paper:hover { color: var(--text-title); transform: translateY(-2px); box-shadow: var(--btn-depth-paper-lg); }
.btn-ghost { color: var(--text-title); background: transparent; }
.btn-ghost:hover { color: var(--text-title); background: var(--surface-sunken); }
.btn:active { transform: translateY(1px); box-shadow: var(--btn-depth-press); }
.btn-lg { height: 54px; padding: 0 26px; font-size: var(--fs-body-lg); }
.btn-lg.btn-primary { box-shadow: var(--btn-depth-lg); }
.btn-lg.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--btn-depth-lg-hover); }
.btn-lg.btn-paper { box-shadow: var(--btn-depth-paper-lg); }
.btn-sm { height: 36px; padding: 0 14px; font-size: var(--fs-body-sm); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.center .btn-row, .btn-row.center { justify-content: center; }
.fineprint { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: var(--space-5); font-size: var(--fs-body-sm); color: var(--text-muted); }
.center .fineprint { justify-content: center; }
.fineprint span { display: inline-flex; align-items: center; gap: 6px; }
.fineprint svg { width: 15px; height: 15px; color: var(--success); }

/* ---------- nav: the floating pill ---------- */
.nav-shell { position: sticky; top: 0; z-index: 50; padding: 12px 0 0; }
.nav {
  display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 10px 0 22px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.5); backdrop-filter: blur(var(--blur-glass)) saturate(1.5);
  border: 1px solid var(--border-glass);
  box-shadow: var(--highlight-soft), var(--shadow-sm);
}
.nav-logo { display: inline-flex; align-items: center; color: var(--text-title); margin-right: 18px; }
.nav-logo:hover { color: var(--text-title); }
.nav-logo .logo { height: 22px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; flex: 1; }
.nav-links a, .nav-links summary {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: var(--radius-pill);
  color: var(--text-secondary); font-size: var(--fs-body-md); font-weight: var(--fw-medium); text-decoration: none; list-style: none;
}
.nav-links summary::-webkit-details-marker { display: none; }
.nav-links a:hover, .nav-links summary:hover, .nav-links a[aria-current="page"], .nav-links details[open] > summary { color: var(--text-title); background: rgb(var(--shadow-ink) / .05); }
.nav-links summary svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-standard); }
.nav-links details[open] > summary svg { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.menu-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px)); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--surface-raised); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl);
  box-shadow: var(--highlight-soft), var(--shadow-float);
  animation: fade-up var(--dur-base) var(--ease-out-soft);
}
.nav-links details { position: relative; }
.nav-links .menu-panel a { display: flex; align-items: flex-start; gap: 12px; height: auto; padding: 12px; border-radius: var(--radius-md); }
.menu-panel a:hover { background: var(--surface-sunken); }
.menu-panel b { display: block; color: var(--text-title); font-weight: var(--fw-semibold); font-size: var(--fs-body-md); line-height: 1.3; }
.menu-panel small { display: block; color: var(--text-muted); font-size: var(--fs-body-sm); line-height: 1.4; margin-top: 2px; font-weight: var(--fw-regular); }
.menu-panel .all { grid-column: 1 / -1; justify-content: center; align-items: center !important; color: var(--text-link) !important; font-weight: var(--fw-semibold); border-top: 1px solid var(--border-hairline); border-radius: 0 0 var(--radius-md) var(--radius-md) !important; margin-top: 4px; }
@keyframes fade-up { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.mobile-menu { display: none; }
.mobile-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); color: var(--text-title); }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu > summary svg { width: 22px; height: 22px; }
.mobile-sheet {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding: 12px;
  background: var(--surface-raised); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl);
  box-shadow: var(--highlight-soft), var(--shadow-float);
}
.mobile-sheet a { display: block; padding: 12px 14px; border-radius: var(--radius-md); color: var(--text-title); font-weight: var(--fw-medium); }
.mobile-sheet a:hover { background: var(--surface-sunken); text-decoration: none; }
.mobile-sheet .label { padding: 14px 14px 6px; }
.mobile-sheet .btn { display: flex; width: 100%; margin-top: 8px; color: var(--btn-primary-text); }
.mobile-sheet { max-height: calc(100vh - 100px); overflow-y: auto; }
@media (max-width: 920px) {
  .nav-links, .nav-actions .hide-sm { display: none; }
  .nav { justify-content: space-between; padding-left: 18px; }
  .mobile-menu { display: block; }
  .nav-shell .wrap { position: relative; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: var(--space-11) 0 0; overflow: hidden; }
@media (max-width: 720px) { .hero { padding-top: var(--space-9); } }
/* The Meridian wallpaper from the desk (involets-desktop.jsx, WALLPAPERS):
   butter at the top running into the desk's blue, with its two glows. The
   most colourful of the seven, and the copy sits on its pale top. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(64% 26% at 24% 12%, rgb(255 246 196 / .62) 0%, rgb(255 246 196 / 0) 74%),
    radial-gradient(58% 30% at 78% 84%, rgb(70 120 208 / .42) 0%, rgb(70 120 208 / 0) 72%),
    linear-gradient(178deg, #FDF0C0 0%, #F7E08C 22%, #EFE3B4 44%, #B9C9E4 62%, #6F93D6 84%, #A8BEE2 100%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgb(238 238 239 / 0), var(--accent-surface));
}
.hero { padding-bottom: var(--space-10); }
.hero .demo-caption { color: var(--text-title); }
.hero .demo-caption svg { color: var(--text-title); }
.hero-copy { text-align: center; max-width: 54rem; margin: 0 auto; }
.hero-copy .display { margin-top: var(--space-5); }
.hero-copy .lede { margin: var(--space-6) auto 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.hero-copy .btn-row { justify-content: center; margin-top: var(--space-8); }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--radius-pill);
  background: var(--surface-raised); border: 1px solid var(--border-hairline); box-shadow: var(--highlight-soft), var(--shadow-xs);
  font-size: var(--fs-body-sm); color: var(--text-secondary); font-weight: var(--fw-medium);
}
.hero-pill b { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--status-paid-surface); color: var(--status-paid); font-weight: var(--fw-semibold); }
.script-note { font-family: var(--font-script); font-weight: var(--fw-script); font-size: var(--fs-script-sm); color: var(--accent-ink); }

/* The live desk, in a window of its own. The frame is drawn here; inside it
   the real /app runs at a fixed 1440×900 and is scaled to fit, so it lays out
   exactly as it does on a laptop at every width. site.js does the scaling. */
.demo { position: relative; margin: var(--space-10) auto 0; max-width: 1240px; }
.demo-frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface-paper); border: 1px solid var(--border-subtle);
  box-shadow: var(--highlight-soft), var(--shadow-float), 0 60px 120px -40px rgb(var(--accent-rgb) / .28);
}
.demo-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-hairline); }
.demo-dots { display: flex; gap: 7px; }
.demo-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--shadow-ink) / .14); }
.demo-url {
  flex: 1; max-width: 360px; margin: 0 auto; height: 28px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: var(--shadow-inset-hairline);
  font-size: 12.5px; color: var(--text-muted);
}
.demo-url svg { width: 12px; height: 12px; }
.demo-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--status-running); letter-spacing: .02em; }
.demo-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: iv-pulse 2s var(--ease-standard) infinite; }
.demo-stage { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: var(--accent-surface); }
.demo-stage > img, .demo-stage > iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; }
.demo-stage > iframe { opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard); }
.demo-stage.live > iframe { opacity: 1; }
.demo-cover {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgb(var(--highlight-ink) / 0) 40%, rgb(var(--highlight-ink) / .3));
  transition: opacity var(--dur-base) var(--ease-standard);
}
.demo-cover .btn { box-shadow: var(--btn-depth-lg), 0 20px 60px -10px rgb(var(--shadow-ink) / .35); }
.demo-stage.engaged .demo-cover { opacity: 0; pointer-events: none; }
.demo-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: var(--space-5); font-size: var(--fs-body-sm); color: var(--text-muted); }
.demo-caption span { display: inline-flex; align-items: center; gap: 7px; }
.demo-caption svg { width: 15px; height: 15px; color: var(--accent); }
.narrow-only { display: none; }
@media (max-width: 720px) {
  .wide-only { display: none; } .narrow-only { display: inline; }
  .demo-cover .btn-lg { height: 44px; padding: 0 18px; font-size: var(--fs-body-md); }
  .demo-bar { height: 36px; } .demo-url { display: none; }
  .demo-frame { border-radius: var(--radius-lg); }
}

/* The button over the live desk breathes: a ring that leaves it and fades,
   so the eye finds it without the button itself jumping about. */
.btn-pulse { position: relative; }
.btn-pulse::before, .btn-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .55);
  animation: ring 2.4s var(--ease-out-soft) infinite;
}
.btn-pulse::after { animation-delay: 1.2s; }
.btn-pulse { animation: nudge 2.4s var(--ease-standard) infinite; }
.btn-pulse:hover { animation-play-state: paused; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .5); } 100% { box-shadow: 0 0 0 22px rgb(var(--accent-rgb) / 0); } }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* The four numbers under the hero: tinted tiles, each with its own mark. */
.stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.stat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-4); align-items: center;
  padding: var(--space-6); border-radius: var(--radius-2xl);
  box-shadow: var(--highlight-soft), var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.stat:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--highlight-soft), var(--shadow-md); }
.stat-icon { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-raised); box-shadow: var(--highlight-top), var(--shadow-sm); color: inherit; }
.stat-icon svg { width: 22px; height: 22px; }
.stat b { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--text-title); }
.stat > span:last-child { margin-top: 6px; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1.3; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .stat { padding: var(--space-5); column-gap: var(--space-3); } .stat-icon { width: 40px; height: 40px; } }

/* How it works: three steps on a line, each with a small piece of the
   product drawn in markup, joined by a dashed path. */
.how { position: relative; overflow: hidden; }
.how::before {
  content: ""; position: absolute; inset: 10% -10% auto; height: 70%; pointer-events: none; z-index: -1;
  background: radial-gradient(40% 60% at 20% 50%, var(--paper-sage) 0%, transparent 70%), radial-gradient(40% 60% at 80% 40%, var(--paper-sky) 0%, transparent 70%), radial-gradient(30% 50% at 50% 70%, var(--paper-peach) 0%, transparent 70%);
  opacity: .8;
}
.flow { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); position: relative; counter-reset: flow; }
.flow::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: 104px; height: 0; border-top: 2px dashed rgb(var(--shadow-ink) / .18); z-index: 0;
}
.flow-step { position: relative; z-index: 1; text-align: center; }
.flow-art {
  display: flex; align-items: center; justify-content: center; height: 208px; border-radius: var(--radius-3xl);
  box-shadow: var(--highlight-soft), var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out-soft), box-shadow var(--dur-slow) var(--ease-standard);
}
.flow-step:nth-child(1) .flow-art { transform: rotate(-1.6deg); }
.flow-step:nth-child(3) .flow-art { transform: rotate(1.4deg); }
.flow-step:hover .flow-art { transform: translateY(-6px) rotate(0deg); box-shadow: var(--highlight-soft), var(--shadow-float); }
.flow-num { display: inline-block; margin-top: var(--space-6); font-family: var(--font-script); font-size: var(--fs-script-md); color: var(--accent-ink); line-height: 1; }
.flow-step h3 { margin-top: 4px; font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); }
.flow-step p { margin: var(--space-2) auto 0; max-width: 18rem; color: var(--text-secondary); font-size: var(--fs-body-md); }
.mini { background: var(--surface-paper); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--highlight-soft), var(--shadow-md); color: var(--text-body); font-size: 13px; }
.mini-timer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.mini-timer .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-running); animation: iv-pulse 2s var(--ease-standard) infinite; }
.mini-timer b { display: block; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 28px; line-height: 1; color: var(--text-title); font-variant-numeric: tabular-nums; }
.mini-timer small { display: block; margin-top: 4px; color: var(--text-muted); }
.mini-stop { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-raised); box-shadow: var(--btn-depth-paper-sm); color: var(--status-running); margin-left: 6px; }
.mini-stop i { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.mini-invoice { width: min(240px, 80%); padding: 10px 14px; }
.mini-invoice .row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-hairline); font-variant-numeric: tabular-nums; }
.mini-invoice .row:first-child { border-top: 0; }
.mini-invoice .row b { font-weight: var(--fw-semibold); color: var(--text-title); }
.mini-invoice .total { border-top: 1px solid var(--border-strong); font-weight: var(--fw-semibold); }
.mini-invoice .total b { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 18px; }
.mini-paid { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--text-muted); }
.mini-paid svg { width: 18px; height: 18px; }
.mini-paid .pill { padding: 4px 10px; border-radius: var(--radius-xs); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.mini-paid .sent { background: var(--status-sent-surface); color: var(--status-sent); border: 1px solid var(--status-sent-edge); }
.mini-paid .stamp {
  padding: 6px 14px; border: 2.5px solid var(--status-paid); border-radius: 8px; color: var(--status-paid);
  font: var(--fw-bold) 20px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-8deg);
  background: var(--status-paid-surface);
}
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: var(--space-9); }
  .flow::before { display: none; }
  .flow-art { height: 180px; }
}

/* The four core apps, two by two: a picture and a line each. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.tile {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-2xl);
  background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--highlight-soft), var(--shadow-sm);
  color: var(--text-body); text-decoration: none !important;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--highlight-soft), var(--shadow-float); color: var(--text-body); }
.tile-art { height: 250px; padding: var(--space-7) var(--space-7) 0; overflow: hidden; }
.tile-art .shot { box-shadow: var(--highlight-soft), var(--shadow-md); transition: transform var(--dur-slow) var(--ease-out-soft); }
.tile:hover .tile-art .shot { transform: translateY(-6px); }
.tile-copy { padding: var(--space-6) var(--space-7) var(--space-7); }
.tile-copy h3 { margin-top: var(--space-3); font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); }
.tile-copy p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--fs-body-md); }
.tile .go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-link); }
.tile .go svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-standard); }
.tile:hover .go svg { transform: translateX(3px); }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } .tile-art { height: 200px; padding: var(--space-5) var(--space-5) 0; } .tile-copy { padding: var(--space-5); } }

/* ---------- the desk, drawn ----------
   Windows built from the product's tokens (site/mocks.mjs). Sized in px on
   purpose: they are pictures of a window, and a picture keeps its layout. */
.app-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--s); height: var(--s); border-radius: calc(var(--s) * .26);
  background: linear-gradient(180deg, var(--from), var(--to)); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px rgb(var(--shadow-ink) / .18);
}
.app-ic svg { width: 56%; height: 56%; stroke-width: 2.2; }
.mw {
  width: 100%; text-align: left; overflow: hidden; color: var(--text-body); font-size: 12px; line-height: 1.35;
  background: var(--surface-paper); border: 1px solid var(--border-subtle); border-radius: 14px;
  box-shadow: var(--highlight-top), var(--shadow-float);
}
.mw-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-hairline); font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text-title); }
.mw-x { position: absolute; left: 10px; top: 9px; width: 16px; height: 11px; border-radius: 4px; background: var(--cor-200); }
.mw-more { position: absolute; right: 12px; font-style: normal; color: var(--text-muted); letter-spacing: 1px; }
.mw-body { padding: 14px 16px 16px; }
.mw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mw h4 { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 22px; line-height: 1.1; color: var(--text-title); margin: 0; }
.mw h4 small { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.mw-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; background: var(--btn-primary-bg); color: #fff; font-size: 11px; font-weight: var(--fw-semibold); box-shadow: var(--btn-depth-sm); }
.mw-btn svg { width: 12px; height: 12px; }
.mw-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--surface-sunken); box-shadow: var(--shadow-press); font-size: 11px; color: var(--text-secondary); }
.mw-seg span { padding: 3px 10px; border-radius: 6px; }
.mw-seg .on { background: var(--surface-raised); color: var(--text-title); box-shadow: var(--shadow-xs); }
.mw-seg.sm span { padding: 2px 7px; }
.pill { display: inline-block; padding: 2px 7px; border-radius: var(--radius-xs); font-style: normal; font-size: 9.5px; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.pill.late { color: var(--status-overdue); background: var(--status-overdue-surface); border-color: var(--status-overdue-edge); }
.pill.sent { color: var(--status-sent); background: var(--status-sent-surface); border-color: var(--status-sent-edge); }
.pill.paid { color: var(--status-paid); background: var(--status-paid-surface); border-color: var(--status-paid-edge); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-running); animation: iv-pulse 2s var(--ease-standard) infinite; flex: 0 0 auto; }

.ts-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0; }
.ts-day { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ts-day small { font-size: 10px; font-weight: var(--fw-semibold); }
.ts-day i { display: block; width: 100%; height: 44px; border-radius: 6px; background: var(--bar-track); position: relative; overflow: hidden; }
.ts-day i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--mount-sky); border-radius: 6px; transition: height .9s var(--ease-out-soft); }
.in .ts-day i::after, .ts-week.in .ts-day i::after { height: var(--h); }
.ts-day:nth-child(2) i::after { transition-delay: .08s; } .ts-day:nth-child(3) i::after { transition-delay: .16s; } .ts-day:nth-child(4) i::after { transition-delay: .24s; }
.ts-day.today { color: var(--accent-ink); }
.ts-day.today i::after { background: var(--accent); }
.ts-day b { font-size: 11px; color: inherit; font-weight: var(--fw-semibold); }
.ts-group { border: 1px solid var(--border-hairline); border-radius: 10px; overflow: hidden; }
.ts-proj { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--paper-sky); color: var(--ink-sky); }
.ts-proj svg { width: 13px; height: 13px; }
.ts-proj b { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 14px; color: var(--text-title); }
.ts-proj small { color: var(--text-muted); }
.ts-proj span { margin-left: auto; font-weight: var(--fw-semibold); color: var(--text-title); font-variant-numeric: tabular-nums; }
.ts-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border-hairline); }
.ts-row svg { width: 12px; height: 12px; color: var(--text-muted); }
.ts-row span { flex: 1; }
.ts-row b { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 15px; color: var(--text-title); font-variant-numeric: tabular-nums; }
.ts-row.running { background: var(--status-running-surface); }
.ts-row.running b { color: var(--status-running); }

.iv-kpis, .rp-kpis { display: grid; gap: 8px; margin-bottom: 10px; }
.iv-kpis { grid-template-columns: repeat(3, 1fr); }
.rp-kpis { grid-template-columns: repeat(4, 1fr); }
.k { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border-hairline); background: var(--surface-card); box-shadow: var(--shadow-xs); min-width: 0; }
.k small { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k b { display: block; margin-top: 4px; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 17px; color: var(--text-title); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k.late { background: var(--paper-coral); } .k.paid { background: var(--paper-sage); } .k.un { background: var(--paper-butter); }
.iv-list { border: 1px solid var(--border-hairline); border-radius: 10px; overflow: hidden; }
.iv-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border-hairline); }
.iv-row:first-child { border-top: 0; }
.iv-row b { font-weight: var(--fw-semibold); color: var(--text-title); font-size: 11px; letter-spacing: .02em; }
.iv-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-row em { font-style: normal; font-weight: var(--fw-semibold); color: var(--text-title); font-variant-numeric: tabular-nums; }
.iv-row em.owed { color: var(--money-owed); }
[data-cycle="paid"] .pill.paid { display: none; }
[data-cycle="paid"].on .pill.sent { display: none; }
[data-cycle="paid"].on .pill.paid { display: inline-block; animation: stamp .45s var(--ease-settle); }
@keyframes stamp { from { transform: scale(1.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

.pj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pj { position: relative; padding: 14px 12px 10px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-xs); }
.pj-tab { position: absolute; left: 10px; top: -1px; width: 42px; height: 5px; border-radius: 0 0 4px 4px; }
.pj b { display: block; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 14px; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj small { display: block; color: var(--text-muted); font-size: 10.5px; }
.pj-bar { display: flex; height: 6px; margin: 8px 0 6px; border-radius: 3px; background: var(--bar-track); overflow: hidden; }
.pj-bar i { display: block; height: 100%; width: 0; transition: width 1s var(--ease-out-soft); }
.in .pj-bar i { width: var(--w); }
.pj-bar .billed { background: var(--bar-billed); } .pj-bar .unbilled { background: var(--bar-unbilled); transition-delay: .25s; }
.pj-note { font-weight: var(--fw-semibold); color: var(--text-secondary) !important; }

.rp-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 120px; padding: 10px 6px 0; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--border-hairline); }
.rp-chart .col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.rp-chart .stack { flex: 1; width: 60%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.rp-chart .stack i { display: block; width: 100%; height: 0; transition: height 1s var(--ease-out-soft); }
.rp-chart.in .stack i { height: var(--h); }
.rp-chart .billed { background: var(--bar-billed); border-radius: 0; }
.rp-chart .unbilled { background: var(--bar-unbilled); border-radius: 4px 4px 0 0; }
.rp-chart .col:nth-child(2) i { transition-delay: .08s; } .rp-chart .col:nth-child(3) i { transition-delay: .16s; } .rp-chart .col:nth-child(4) i { transition-delay: .24s; } .rp-chart .col:nth-child(5) i { transition-delay: .32s; } .rp-chart .col:nth-child(6) i { transition-delay: .4s; }
.rp-chart small { font-size: 10px; color: var(--text-muted); padding-bottom: 6px; }

.mw-store .mw-body { padding: 0; }
.st { display: grid; grid-template-columns: 150px 1fr; min-height: 330px; }
.st-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--surface-sunken); border-right: 1px solid var(--border-hairline); color: var(--text-secondary); }
.st-side span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; font-size: 11.5px; }
.st-side span svg { width: 13px; height: 13px; }
.st-side span em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--text-muted); }
.st-side .on { background: var(--surface-raised); color: var(--text-title); font-weight: var(--fw-semibold); box-shadow: var(--shadow-xs); }
.st-side small { margin: 8px 8px 2px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-muted); }
.st-search { background: var(--field-bg); color: var(--text-muted); margin-bottom: 6px; }
.st-main { padding: 14px 16px; }
.st-main h4 { margin-bottom: 10px; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-app { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-xs); min-width: 0; }
.st-app > div { flex: 1; min-width: 0; }
.st-app b { display: block; font-size: 12px; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-app small { display: block; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-get { position: relative; flex: 0 0 auto; min-width: 46px; height: 24px; }
.st-get i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: var(--fw-semibold); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.st-get .get { background: var(--accent-surface); color: var(--accent-ink); border: 1px solid var(--accent-edge); }
.st-get .busy { opacity: 0; color: var(--accent); } .st-get .busy svg { width: 15px; height: 15px; animation: spin .8s linear infinite; }
.st-get .open { opacity: 0; transform: scale(.8); background: var(--btn-primary-bg); color: #fff; }
.st-app.busy .get, .st-app.done .get { opacity: 0; } .st-app.busy .busy { opacity: 1; }
.st-app.done .open { opacity: 1; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The hero's stand-in: the desk at its own 1440 by 900, scaled by site.js
   exactly as the live frame is. */
.desk-mock { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; overflow: hidden; background: var(--accent-surface); font-size: 14px; }
.desk-mock::before { content: ""; position: absolute; inset: 0; background: radial-gradient(30% 24% at 88% 22%, rgb(58 126 224 / .5), transparent 74%), radial-gradient(26% 24% at 14% 76%, rgb(132 180 238 / .4), transparent 74%), linear-gradient(160deg, #EAF2FC 0%, #F4F8FD 40%, #FAFBFD 72%, #F2F6FB 100%); }
.dm-bar { position: absolute; left: 0; right: 0; top: 0; height: 38px; display: flex; align-items: center; gap: 26px; padding: 0 22px; background: rgb(255 255 255 / .7); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border-hairline); font-size: 14px; color: var(--text-secondary); }
.dm-bar img { height: 19px; width: auto; margin-right: 8px; }
.dm-bar em { margin-left: auto; font-style: normal; font-weight: var(--fw-semibold); color: var(--text-title); }
.dm-widget { position: absolute; padding: 18px 20px; border-radius: 18px; background: rgb(255 255 255 / .62); backdrop-filter: blur(18px); border: 1px solid var(--border-glass); box-shadow: var(--shadow-md); }
.dm-widget > small { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--accent-ink); }
.dm-widget > small svg { width: 13px; height: 13px; }
.dm-timer { left: 24px; top: 62px; width: 216px; height: 160px; }
.dm-timer b { display: block; margin-top: 12px; font-size: 38px; font-weight: var(--fw-regular); color: var(--text-title); font-variant-numeric: tabular-nums; }
.dm-timer > span { color: var(--text-secondary); }
.dm-timer .stop { position: absolute; right: 18px; top: 66px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-raised); box-shadow: var(--btn-depth-paper-md); }
.dm-timer .stop i { width: 13px; height: 13px; border: 2px solid var(--accent); border-radius: 3px; }
.dm-week { left: 24px; top: 244px; width: 216px; }
.dm-week .bars { display: flex; align-items: flex-end; gap: 7px; height: 60px; margin: 14px 0; }
.dm-week .bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--mount-sky); }
.dm-widget .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.dm-widget .row small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); }
.dm-widget .row b { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 24px; color: var(--text-title); }
.dm-wait { right: 24px; top: 62px; width: 216px; display: flex; flex-direction: column; gap: 12px; }
.dm-wait .row { border: 0; padding: 0; font-size: 13px; }
.dm-wait .row span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--text-title); }
.dm-wait .row b { font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold); }
.dm-overview { position: absolute; left: 264px; top: 60px; width: 900px; font-size: 14px; }
.dm-overview .mw-bar { height: 38px; font-size: 14px; }
.dm-overview .mw-body { padding: 26px 34px; }
.dm-hello { display: flex; align-items: center; gap: 14px; font-size: 34px !important; }
.dm-hello .avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-peach); color: var(--ink-peach); font-family: var(--font-sans); font-size: 18px; font-weight: var(--fw-semibold); }
.dm-alert { display: flex; align-items: center; gap: 14px; margin: 22px 0; padding: 16px 18px; border-radius: 14px; background: var(--paper-butter); border: 1px solid var(--edge-butter); color: var(--ink-butter); }
.dm-alert svg { width: 20px; height: 20px; }
.dm-alert div { flex: 1; } .dm-alert b { display: block; color: var(--text-title); } .dm-alert small { color: var(--text-secondary); font-size: 13px; }
.dm-alert > span { padding: 7px 14px; border-radius: 9px; background: var(--surface-raised); box-shadow: var(--btn-depth-paper-sm); color: var(--text-title); font-weight: var(--fw-semibold); font-size: 13px; }
.dm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dm-kpis > div { padding: 16px 18px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-sm); }
.dm-kpis small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); }
.dm-kpis b { display: block; margin: 10px 0 6px; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 30px; color: var(--text-title); font-variant-numeric: tabular-nums; }
.dm-kpis span { font-size: 13px; color: var(--text-secondary); }
.dm-kpis .un { background: var(--paper-butter); } .dm-kpis .late { background: var(--paper-coral); }
.dm-overview h5 { margin: 24px 0 10px; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 22px; color: var(--text-title); }
.dm-overview .iv-row { padding: 12px 14px; border: 1px solid var(--border-hairline); border-radius: 0; font-size: 14px; }
.dm-overview .iv-row + .iv-row { border-top: 0; }
.dm-overview .iv-row b { font-size: 14px; }
.dm-overview .pill { font-size: 11px; }
.dm-dock { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 14px; padding: 10px 16px 8px; border-radius: 22px; background: rgb(255 255 255 / .6); backdrop-filter: blur(18px); border: 1px solid var(--border-glass); box-shadow: var(--shadow-md); }
.dm-dock > span { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; }
.dm-dock small { font-size: 12px; color: var(--text-secondary); }

/* The Mac menu bar and its panel. */
.mac { margin-top: var(--space-7); width: min(330px, 100%); }
.mac-bar { display: flex; justify-content: flex-end; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 8px 8px 0 0; background: rgb(255 255 255 / .55); backdrop-filter: blur(12px); font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-title); }
.mac-item { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 5px; }
.mac-item svg { width: 14px; height: 14px; }
.mac-item.on { background: rgb(var(--shadow-ink) / .12); }
.mac-item img { width: 14px; height: 14px; }
.mac-item b { font-variant-numeric: tabular-nums; }
.mac-panel { margin: 6px 0 0 auto; padding: 12px; border-radius: 14px; background: var(--surface-paper); border: 1px solid var(--border-hairline); box-shadow: var(--highlight-soft), var(--shadow-float); color: var(--text-body); font-size: 12px; }
.mac-run { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--status-running-surface); border: 1px solid var(--status-running-edge); }
.mac-run > div { flex: 1; } .mac-run small { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--status-running); font-weight: var(--fw-semibold); }
.mac-run b { display: block; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 24px; color: var(--text-title); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mac-run span { color: var(--text-secondary); }
.mac-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 12px 0 6px; }
.mac-week span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-muted); font-size: 9.5px; font-weight: var(--fw-semibold); }
.mac-week i { position: relative; display: block; width: 100%; height: 30px; border-radius: 4px; background: var(--bar-track); overflow: hidden; }
.mac-week i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--mount-sky); transition: height .9s var(--ease-out-soft); }
.mac-week.in i::after { height: var(--h); }
.mac-week .today { color: var(--accent-ink); } .mac-week .today i::after { background: var(--accent); }
.mac-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--border-hairline); }
.mac-row svg { width: 12px; height: 12px; color: var(--text-muted); } .mac-row span { flex: 1; }
.mac-row b { font-variant-numeric: tabular-nums; color: var(--text-title); }
.mac-foot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border-hairline); color: var(--text-secondary); }
.mac-foot span { display: inline-flex; align-items: center; gap: 4px; } .mac-foot svg { width: 12px; height: 12px; }
.mac-foot b { color: var(--text-title); }

/* The App Store band. */
.store-band { position: relative; overflow: hidden; background:
  radial-gradient(50% 60% at 10% 20%, var(--paper-sage) 0%, transparent 70%),
  radial-gradient(50% 60% at 90% 30%, var(--paper-butter) 0%, transparent 70%),
  radial-gradient(40% 50% at 60% 90%, var(--paper-sky) 0%, transparent 70%),
  var(--surface-paper);
  border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline);
}
.store-hero { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-10); align-items: center; }
.store-copy .h2 { margin-top: var(--space-3); }
.store-copy .lede { margin-top: var(--space-4); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-6); }
.chips li { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-xs); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.store-art { transform: rotate(.8deg); }
.marquee { margin-top: var(--space-11); display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-row { display: flex; gap: 12px; width: max-content; animation: marquee 70s linear infinite; }
.marquee-row.rev { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.mq { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-xs); white-space: nowrap; }
.mq b { font-size: var(--fs-body-sm); color: var(--text-title); font-weight: var(--fw-semibold); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 960px) { .store-hero { grid-template-columns: 1fr; } .store-art { transform: none; } }
@media (max-width: 560px) { .st { grid-template-columns: 1fr; } .st-side { display: none; } .st-grid { grid-template-columns: 1fr; } }

/* Mocks inside a feature tile: the window peeks up from the bottom. */
.tile-art .mw { box-shadow: var(--highlight-top), var(--shadow-md); transition: transform var(--dur-slow) var(--ease-out-soft); }
.tile:hover .tile-art .mw { transform: translateY(-6px); }
.tile-art { height: 290px; }

/* ---------- strips and grids ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--space-11); border-top: 1px solid var(--border-subtle); }
.facts > div { padding: var(--space-6) var(--space-5) 0; border-left: 1px solid var(--border-subtle); }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts b { display: block; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-money-lg); line-height: var(--lh-money-lg); letter-spacing: var(--ls-money-lg); color: var(--text-title); }
.facts span { display: block; margin-top: 8px; font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.45; }
@media (max-width: 820px) {
  .facts { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); counter-reset: step; list-style: none; }
.step { position: relative; padding: var(--space-7); border-radius: var(--radius-2xl); }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--highlight-soft), var(--shadow-xs); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); color: var(--text-title); }
.step h3 { margin-top: var(--space-5); font-size: var(--fs-title-md); line-height: var(--lh-title-md); }
.step p { margin-top: var(--space-2); font-size: var(--fs-body-md); line-height: var(--lh-body-md); color: inherit; opacity: .92; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* The pastel panels. Text on them is the tint's own deep ink, which is what
   the design system pairs each paper with. */
.panel { border-radius: var(--radius-3xl); }
.tint-sky { background: var(--paper-sky); color: var(--ink-sky); }
.tint-lavender { background: var(--paper-lavender); color: var(--ink-lavender); }
.tint-butter { background: var(--paper-butter); color: var(--ink-butter); }
.tint-peach { background: var(--paper-peach); color: var(--ink-peach); }
.tint-sage { background: var(--paper-sage); color: var(--ink-sage); }
.tint-coral { background: var(--paper-coral); color: var(--ink-coral); }
.tint-cream { background: var(--paper-cream); color: var(--ink-cream); }
[class*="tint-"] h2, [class*="tint-"] h3 { color: inherit; }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: var(--texture-grain); background-size: 160px 160px; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); z-index: 1; }
.grain > * { position: relative; z-index: 2; }

/* A feature: words on one side, the window it describes on the other. */
.feature { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-11); align-items: center; }
.feature + .feature { margin-top: var(--space-13); }
.feature.flip > .feature-copy { order: 2; }
.feature-copy .h3 { margin-top: var(--space-3); }
.feature-copy > p { margin-top: var(--space-4); color: var(--text-secondary); }
.ticks { list-style: none; margin-top: var(--space-6); display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
.ticks svg { width: 20px; height: 20px; margin-top: 2px; color: var(--success); }
.feature-copy .more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-6); font-weight: var(--fw-semibold); }
.feature-copy .more svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-standard); }
.feature-copy .more:hover svg { transform: translateX(3px); }
.feature-art { position: relative; padding: var(--space-8); border-radius: var(--radius-3xl); }
@media (max-width: 960px) {
  .feature { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature.flip > .feature-copy { order: 0; }
  .feature + .feature { margin-top: var(--space-11); }
  .feature-art { padding: var(--space-5); border-radius: var(--radius-2xl); }
}

/* A window of the real desk. The picture's own corners carry a sliver of
   wallpaper; the radius is a percentage of the picture so it shrinks with it,
   matching the window's 16px at the size it was taken. */
.shot { display: block; width: 100%; background: var(--surface-paper); box-shadow: var(--highlight-soft), var(--shadow-float); }
.shot-tilt { transform: rotate(-1deg); }
.shot-tilt-alt { transform: rotate(.8deg); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card {
  display: block; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card); box-shadow: var(--highlight-soft), var(--shadow-sm); color: var(--text-body);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--highlight-soft), var(--shadow-md); text-decoration: none; color: var(--text-body); }
.card h3 { font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.card .serif-title { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-title-md); line-height: var(--lh-title-md); }
.card p { margin-top: 6px; font-size: var(--fs-body-md); line-height: var(--lh-body-md); color: var(--text-secondary); }
.card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-link); }
.card .go svg { width: 15px; height: 15px; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; margin-bottom: var(--space-4); box-shadow: var(--highlight-top), var(--shadow-xs); }
.icon-tile svg { width: 22px; height: 22px; }
@media (max-width: 960px) { .cards, .cards.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cards, .cards.two, .cards.four { grid-template-columns: 1fr; } }

/* The two surfaces beyond the browser tab. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.duo > * { padding: var(--space-9); border-radius: var(--radius-3xl); overflow: hidden; }
.duo .h3 { margin-top: var(--space-3); }
.duo p { margin-top: var(--space-3); }
.duo .btn-row { margin-top: var(--space-6); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo > * { padding: var(--space-7); } }

/* The extension popup, drawn: it is small enough to state in markup, and a
   picture of a 380px popup at page scale would be all chrome. */
.popup {
  width: min(320px, 100%); margin-top: var(--space-7); padding: 16px; border-radius: var(--radius-lg);
  background: var(--surface-paper); border: 1px solid var(--border-hairline); box-shadow: var(--highlight-soft), var(--shadow-float);
  color: var(--text-body); font-size: var(--fs-body-sm);
}
.popup-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-title); }
.popup-head .logo { height: 16px; width: auto; }
.popup-timer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--status-running-surface); border: 1px solid var(--status-running-edge); }
.popup-timer b { display: block; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 30px; line-height: 1; color: var(--text-title); font-variant-numeric: tabular-nums; }
.popup-timer small { display: block; margin-top: 6px; color: var(--text-secondary); }
.popup-stop { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-raised); box-shadow: var(--btn-depth-paper-md); color: var(--status-running); }
.popup-stop i { width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.popup-row { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-hairline); color: var(--text-muted); }
.popup-row b { color: var(--text-title); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--surface-raised); border: 1px solid var(--border-subtle); box-shadow: 0 1px 0 var(--border-subtle); font: var(--fw-semibold) .82em/1.5 var(--font-sans); color: var(--text-title); }

/* ---------- pricing ---------- */
.price-card {
  position: relative; max-width: 760px; margin: 0 auto; padding: var(--space-10); border-radius: var(--radius-3xl);
  background: var(--surface-paper); border: 1px solid var(--border-hairline); box-shadow: var(--highlight-soft), var(--shadow-float);
}
.price-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.price { display: flex; align-items: flex-start; gap: 4px; font-family: var(--font-serif); color: var(--text-title); }
.price sup { font-size: 2rem; line-height: 1; margin-top: 14px; }
.price b { font-weight: var(--fw-regular); font-size: 6rem; line-height: .9; letter-spacing: -.03em; }
.price-for { margin-top: var(--space-3); color: var(--text-secondary); }
.price-list { list-style: none; columns: 2; column-gap: var(--space-8); margin-top: var(--space-7); }
.price-list li { break-inside: avoid; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 7px 0; font-size: var(--fs-body-md); line-height: 1.45; }
.price-list svg { width: 19px; height: 19px; margin-top: 1px; color: var(--success); }
@media (max-width: 720px) { .price-card { padding: var(--space-7); } .price-list { columns: 1; } .price b { font-size: 4.5rem; } }
.nots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); max-width: 900px; margin: var(--space-9) auto 0; list-style: none; }
.nots li { padding: var(--space-5); border-radius: var(--radius-card); background: var(--surface-paper); border: 1px dashed var(--border-strong); text-align: center; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.nots b { display: block; margin-bottom: 4px; font-size: var(--fs-body-md); color: var(--text-title); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
@media (max-width: 760px) { .nots { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border-subtle); }
.faq details { border-bottom: 1px solid var(--border-subtle); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6) 0; list-style: none; font-family: var(--font-serif); font-size: var(--fs-title-md); line-height: var(--lh-title-md); color: var(--text-title); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-standard); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 var(--space-10) var(--space-6) 0; color: var(--text-secondary); }
.faq .answer p + p { margin-top: var(--space-3); }

/* ---------- closing call ---------- */
.cta {
  position: relative; overflow: hidden; padding: var(--space-12) var(--space-9); border-radius: var(--radius-3xl); text-align: center;
  background: var(--surface-inverse); color: var(--text-inverse);
}
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 20% 0%, rgb(var(--accent-rgb) / .45), transparent 70%), radial-gradient(50% 70% at 90% 100%, rgb(var(--accent-rgb) / .28), transparent 70%); pointer-events: none; }
.cta > * { position: relative; }
.cta h2 { color: var(--text-inverse); }
.cta .lede { color: rgb(var(--highlight-ink) / .78); margin: var(--space-4) auto 0; }
.cta .btn-row { justify-content: center; margin-top: var(--space-8); }
.cta .btn-paper { color: var(--text-title); }
.cta .fineprint { justify-content: center; color: rgb(var(--highlight-ink) / .7); }
.cta .fineprint svg { color: var(--sag-350); }
@media (max-width: 720px) { .cta { padding: var(--space-10) var(--space-6); border-radius: var(--radius-2xl); } }

/* ---------- inner page header ---------- */
.page-head { position: relative; padding: var(--space-11) 0 var(--space-10); overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 700px; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 15% 30%, var(--paper-lavender) 0%, transparent 70%), radial-gradient(40% 50% at 88% 10%, var(--paper-sky) 0%, transparent 70%);
}
.page-head .display { font-size: clamp(2.4rem, 5vw, var(--fs-display-lg)); line-height: var(--lh-display-lg); margin-top: var(--space-4); }
.page-head .lede { margin-top: var(--space-5); }
.page-head .btn-row { margin-top: var(--space-7); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-body-sm); color: var(--text-muted); list-style: none; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text-title); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-faint); }

/* A feature page's hero picture, under its header. */
.hero-shot { margin-top: var(--space-9); padding: var(--space-8); border-radius: var(--radius-3xl); }
.hero-shot .shot { max-width: 980px; margin: 0 auto; }
@media (max-width: 720px) { .hero-shot { padding: var(--space-4); border-radius: var(--radius-2xl); } }

/* ---------- help centre ---------- */
.search {
  position: relative; max-width: 620px; margin: var(--space-7) auto 0;
}
.search input {
  width: 100%; height: 58px; padding: 0 20px 0 54px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--surface-raised); box-shadow: var(--highlight-soft), var(--shadow-md);
  font: var(--fw-regular) var(--fs-body-lg) var(--font-sans); color: var(--text-title); outline: none;
}
.search input:focus { border-color: var(--border-focus); box-shadow: var(--ring), var(--shadow-md); }
.search > svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-results { list-style: none; max-width: 620px; margin: var(--space-3) auto 0; text-align: left; background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--highlight-soft), var(--shadow-float); overflow: hidden; }
.search-results:empty { display: none; }
.search-results a { display: block; padding: 14px 20px; border-top: 1px solid var(--border-hairline); color: var(--text-title); }
.search-results li:first-child a { border-top: 0; }
.search-results a:hover, .search-results a:focus { background: var(--surface-sunken); text-decoration: none; }
.search-results small { display: block; color: var(--text-muted); font-size: var(--fs-body-sm); }
.search-results .none { padding: 16px 20px; color: var(--text-muted); }

.topic h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-title-md); }
.topic h2 .icon-tile { margin: 0; width: 38px; height: 38px; border-radius: 11px; }
.topic h2 .icon-tile svg { width: 19px; height: 19px; }
.topic ul { list-style: none; margin-top: var(--space-4); }
.topic li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-hairline); color: var(--text-body); font-size: var(--fs-body-md); }
.topic li a:hover { color: var(--text-link); text-decoration: none; }
.topic li a svg { width: 15px; height: 15px; color: var(--text-faint); flex: 0 0 auto; }
.topic li a:hover svg { color: var(--text-link); }

.article-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-11); align-items: start; }
.toc { position: sticky; top: 100px; }
.toc h2 { font-family: var(--font-sans); font-size: var(--fs-label-sm); letter-spacing: var(--ls-label-sm); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-muted); }
.toc ul { list-style: none; margin-top: var(--space-3); }
.toc a { display: block; padding: 7px 12px; margin-left: -12px; border-radius: var(--radius-sm); font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.4; }
.toc a:hover { background: rgb(var(--shadow-ink) / .05); color: var(--text-title); text-decoration: none; }
.toc a[aria-current="page"] { background: var(--surface-raised); color: var(--text-title); font-weight: var(--fw-semibold); box-shadow: var(--highlight-soft), var(--shadow-xs); }
.toc .group + .group { margin-top: var(--space-6); }
.toc .others { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; gap: var(--space-8); } .toc { position: static; order: 2; } }

/* Long-form reading: help articles and feature detail. */
.prose { max-width: var(--measure-prose); font-size: var(--fs-read-md); line-height: var(--lh-read-md); color: var(--text-body); }
.prose > * + * { margin-top: var(--space-5); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: var(--space-9); font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); letter-spacing: var(--ls-title-lg); }
.prose h3 { margin-top: var(--space-7); font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li > ul { margin-top: 8px; list-style: circle; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--text-muted); }
.prose strong { color: var(--text-title); font-weight: var(--fw-semibold); }
.prose kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--surface-raised); border: 1px solid var(--border-subtle); box-shadow: 0 1px 0 var(--border-subtle); font: var(--fw-medium) .85em var(--font-sans); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--surface-sunken); font-size: .9em; }
.prose .ui { font-weight: var(--fw-semibold); color: var(--text-title); }
.note { padding: var(--space-5) var(--space-6); border-radius: var(--radius-card); font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
.note b { display: block; margin-bottom: 4px; }
.prose .shot { margin-top: var(--space-7); }
.article-foot { margin-top: var(--space-10); padding-top: var(--space-7); border-top: 1px solid var(--border-subtle); }
.article-foot .cards { margin-top: var(--space-5); }

/* ---------- footer ---------- */
.footer { margin-top: var(--space-6); padding: var(--space-11) 0 var(--space-9); background: var(--surface-paper); border-top: 1px solid var(--border-hairline); font-size: var(--fs-body-sm); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-8); }
.footer .logo { height: 22px; width: auto; color: var(--text-title); }
.footer-blurb { margin-top: var(--space-4); max-width: 18rem; color: var(--text-secondary); line-height: var(--lh-body-sm); }
.footer h2 { font-family: var(--font-sans); font-size: var(--fs-label-sm); letter-spacing: var(--ls-label-sm); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-muted); }
.footer ul { list-style: none; margin-top: var(--space-4); display: grid; gap: 10px; }
.footer a { color: var(--text-secondary); }
.footer a:hover { color: var(--text-title); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-hairline); color: var(--text-muted); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}