/* Dottpace landing — colour, type and motion tokens.
   Values are the app's own (app/styles/v103-tokens.css, the token pass of 3 Oct 2026): the same canvas, surfaces, lines, text roles,
   status inks and focus ring, so a screenshot of the app sits on the landing without a seam. The landing adds only its own type scale
   (larger, for reading at a distance) and its spacing rhythm. Light is :root; dark follows the system unless the visitor chose a theme
   (html[data-theme]), and is defined twice below on purpose: once for the system setting, once for the explicit choice. */

/* Geist arrives from Google Fonts with display=swap. Until it does, text is set in Arial resized to Geist's width and line metrics,
   so the swap doesn't move the page (no layout shift). Measured in Chrome on all 37 pages' text: Geist is 1.005 / 0.295 em tall;
   400 is 2.3% wider than Arial, 500 5% wider, 600 (headlines) 0.2% narrower than Arial Bold. The size-adjusts below were then
   picked by cold-loading every page at 1440 and 390 with Geist held back 700 ms: site-wide CLS 0.26 → 0.13, /audit/ 0.10 → 0.0001.
   Overrides are divided by size-adjust. */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT");font-weight:1 449;size-adjust:101.8%;ascent-override:98.72%;descent-override:28.98%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT");font-weight:450 549;size-adjust:106%;ascent-override:94.81%;descent-override:27.83%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 1000;size-adjust:99.6%;ascent-override:100.9%;descent-override:29.62%;line-gap-override:0%}

:root{
  --font:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* surfaces (app: --canvas · --surface-1 · --surface-2 · --well) */
  --bg:#fbfbfd;            /* the page (app --lvl-1) */
  --bg-band:#f5f5f7;       /* a tinted band behind product UI (app --canvas) */
  --surface:#fff;          /* cards, panels, the report (app --surface-1) */
  --surface-2:#f5f5f7;     /* a well inside a card */
  --surface-3:#efeff2;
  --glass:rgba(251,251,253,.78);
  --glass-fx:saturate(180%) blur(20px);

  /* text (app --text-1…3, --fg-4) — every role ≥ 4.5:1 on --bg and --surface */
  --text-1:#1d1d1f;
  --text-2:#424245;
  --text-3:#5f5f64;
  --text-4:#616166;
  --text-dim:#6a6a70;      /* the grey continuation of a statement — large text, 4.9:1 */

  /* lines and fills */
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.14);
  --line-ctl:rgba(0,0,0,.18);
  --line-ctl-h:rgba(0,0,0,.32);
  --field-line:rgba(0,0,0,.45);   /* a text field's edge: ≥3:1 on --surface and --bg (WCAG 1.4.11) — the review, Oct 16 */
  --field-line-h:rgba(0,0,0,.6);
  --hover:rgba(116,116,128,.09);
  --selected:rgba(116,116,128,.15);
  --fill-1:rgba(116,116,128,.08);
  --fill-2:rgba(118,118,128,.12);

  /* accent and the inverted button (the B&W brand: the primary action is ink, not colour) */
  --accent-text:#0066cc;
  --ring:#0071e3;
  --sel:rgba(0,136,255,.24);
  --inv:#1d1d1f;--inv-h:#000;--inv-fg:#f5f5f7;
  --on-fill:#fff;
  --logo:#000;             /* the dP mark and lockup: one flat colour — ink on light, paper on dark (Dottpace-Identity v1.0) */

  /* status inks and chip tints (app §4.5, ≥ 4.5:1 on their tint) */
  --pos:#00782c;--pos-bg:#e7f8eb;
  --neg:#c8001f;--neg-bg:#ffe7e8;
  --warn:#a84a00;--warn-bg:#fff1e5;
  --info:#0060c0;--info-bg:#e0f1ff;
  --gray-fg:#636368;--gray-bg:#efeff1;

  /* the chart palette (app --c1, --chart-quiet) */
  --c1:#1f60d4;--chart-quiet:rgba(60,60,67,.56);--grid:rgba(0,0,0,.07);

  /* depth: light lifts, dark relies on edges (app §4.9) */
  --shot-shadow:0 1px 1px rgba(0,0,0,.04),0 12px 32px -8px rgba(0,0,0,.12),0 40px 80px -24px rgba(0,0,0,.14);
  --pop-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 40px -12px rgba(0,0,0,.22);
  --shot-edge:rgba(0,0,0,.10);

  --scroll:rgba(0,0,0,.18);--scroll-h:rgba(0,0,0,.32);

  /* radius by role (app rules): surfaces 18 · blocks 12 · rows 8 · controls 8 · status capsule */
  --r-card:18px;--r-12:12px;--r-8:8px;--r-ctl:8px;--r-full:9999px;

  /* motion (app plan I): three durations, one ease-out; never a bounce */
  --dur-1:120ms;--dur-2:160ms;--dur-3:200ms;--dur-reveal:900ms;
  --ease-out:cubic-bezier(.33,1,.68,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);

  /* landing type scale — Geist; display steps fluid between 375 and 1440 */
  --t-display:clamp(2.25rem,1.55rem + 2.4vw,3.5rem);   /* 36 → 56 */
  --t-h2:clamp(2rem,1.45rem + 2.35vw,3.25rem);         /* 32 → 52 */
  --t-h3:clamp(1.625rem,1.3rem + 1.4vw,2.5rem);        /* 26 → 40 */
  --t-statement:clamp(1.5rem,1.15rem + 1.5vw,2.5rem);  /* 24 → 40 */
  --t-lead:clamp(1.0625rem,.98rem + .35vw,1.25rem);    /* 17 → 20 */
  --t-body:1rem;--t-small:.875rem;--t-micro:.75rem;

  /* rhythm */
  --gutter:clamp(16px,4vw,48px);
  --max:1200px;
  --sec-y:clamp(88px,10vw,160px);

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e0e10;--bg-band:#0b0b0d;--surface:#161617;--surface-2:#1c1c1f;--surface-3:#2c2c30;
    --glass:rgba(14,14,16,.72);
    --text-1:#f5f5f7;--text-2:rgba(235,235,245,.80);--text-3:rgba(235,235,245,.68);--text-4:rgba(235,235,245,.6);--text-dim:rgba(235,235,245,.52);
    --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.14);--line-ctl:rgba(255,255,255,.20);--line-ctl-h:rgba(255,255,255,.34);--field-line:rgba(255,255,255,.36);--field-line-h:rgba(255,255,255,.5);
    --hover:rgba(132,132,146,.17);--selected:rgba(132,132,146,.25);--fill-1:rgba(118,118,128,.14);--fill-2:rgba(118,118,128,.22);
    --accent-text:#2997ff;--ring:#0091ff;--sel:rgba(0,145,255,.35);
    --inv:#f5f5f7;--inv-h:#fff;--inv-fg:#1d1d1f;--logo:#fff;
    --pos:#30d158;--pos-bg:#1a3421;--neg:#ff6165;--neg-bg:#3b1d1e;--warn:#ff9230;--warn-bg:#3b2a1b;--info:#5cb8ff;--info-bg:#122a3c;--gray-fg:rgba(235,235,245,.72);--gray-bg:#2a2a2d;
    --c1:#5680e6;--chart-quiet:rgba(235,235,245,.42);--grid:rgba(255,255,255,.07);
    --shot-shadow:0 0 0 1px rgba(255,255,255,.02),0 30px 80px -20px rgba(0,0,0,.7);
    --pop-shadow:0 0 0 1px rgba(255,255,255,.04),0 24px 48px -12px rgba(0,0,0,.75);
    --shot-edge:rgba(255,255,255,.10);
    --scroll:rgba(255,255,255,.18);--scroll-h:rgba(255,255,255,.34);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e0e10;--bg-band:#0b0b0d;--surface:#161617;--surface-2:#1c1c1f;--surface-3:#2c2c30;
  --glass:rgba(14,14,16,.72);
  --text-1:#f5f5f7;--text-2:rgba(235,235,245,.80);--text-3:rgba(235,235,245,.68);--text-4:rgba(235,235,245,.6);--text-dim:rgba(235,235,245,.52);
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.14);--line-ctl:rgba(255,255,255,.20);--line-ctl-h:rgba(255,255,255,.34);--field-line:rgba(255,255,255,.36);--field-line-h:rgba(255,255,255,.5);
  --hover:rgba(132,132,146,.17);--selected:rgba(132,132,146,.25);--fill-1:rgba(118,118,128,.14);--fill-2:rgba(118,118,128,.22);
  --accent-text:#2997ff;--ring:#0091ff;--sel:rgba(0,145,255,.35);
  --inv:#f5f5f7;--inv-h:#fff;--inv-fg:#1d1d1f;--logo:#fff;
  --pos:#30d158;--pos-bg:#1a3421;--neg:#ff6165;--neg-bg:#3b1d1e;--warn:#ff9230;--warn-bg:#3b2a1b;--info:#5cb8ff;--info-bg:#122a3c;--gray-fg:rgba(235,235,245,.72);--gray-bg:#2a2a2d;
  --c1:#5680e6;--chart-quiet:rgba(235,235,245,.42);--grid:rgba(255,255,255,.07);
  --shot-shadow:0 0 0 1px rgba(255,255,255,.02),0 30px 80px -20px rgba(0,0,0,.7);
  --pop-shadow:0 0 0 1px rgba(255,255,255,.04),0 24px 48px -12px rgba(0,0,0,.75);
  --shot-edge:rgba(255,255,255,.10);
  --scroll:rgba(255,255,255,.18);--scroll-h:rgba(255,255,255,.34);
  color-scheme:dark;
}

@media (prefers-contrast:more){
  :root{--text-3:#515154;--text-dim:#515154;--line:rgba(60,60,67,.3);--line-strong:rgba(60,60,67,.42)}
  :root[data-theme="dark"]{--text-3:rgba(235,235,245,.78);--text-dim:rgba(235,235,245,.72);--line:rgba(255,255,255,.2);--line-strong:rgba(255,255,255,.3)}
}
@media (prefers-reduced-transparency:reduce){:root{--glass:var(--bg)}}