/* --accent-on must be ink, not paper. The accent is a mid-tone bronze in both
   themes, so light text on it measures 2.61:1 (dark) and 3.62:1 (light) — the
   header 'Start free' button, the most-clicked control on the site, was failing
   AA on all 49 pages. Ink gives 6.46:1 and 4.66:1. */
/* Ink & Chrome for the app's own server-rendered pages.
   ---------------------------------------------------------------------------
   login, signup, reset, the twelve legal documents, the agency and figure
   pages and the app index were the only surfaces the design migration never
   reached: they carried Frost Candy hexes inline (#F3F6FB canvas, #6E5BFF
   violet, a five-stop candy gradient) and loaded Syne + Space Grotesk. The
   login screen is the first thing every user of this product sees.

   The token values below are lifted verbatim from site/styles.css so the app
   and the marketing site cannot drift. Dark is the default and the choice is
   shared through the same `cle-theme` localStorage key the site and console
   use, so a visitor keeps one theme across all three surfaces. */

:root{
  /* ACCENT · bronze */
  --accent:#B0703C;             /* fills, mark, chart primary */
  --accent-strong:#8F5A2E;      /* hover / pressed */
  --accent-ink:#8F5A2E;         /* accent text — AA on --surface */
  --accent-soft:#F2E4D6;        /* tint fill: selected rows, kickers, badges */
  --accent-line:#DFC4A8;        /* tint border */
  --accent-on:#14120E;          /* text on a bronze fill */

  /* SURFACES · warm neutrals */
  --canvas:#F6F3ED;             /* page */
  --surface:#FFFDF9;            /* cards, panels, rows */
  --surface-2:#F1EDE5;          /* table headers, wells, hover */
  --surface-3:#E9E4DA;          /* pressed, skeleton base */

  /* TEXT */
  --text:#14120E;               /* primary — brown-black, never #000 */
  --text-2:#3B3630;             /* secondary prose */
  --text-muted:#655E51;         /* labels, meta */
  --text-faint:#686458;         /* micro, disabled, placeholders */

  /* LINES */
  --hair:rgba(20,18,14,.12);    /* the workhorse border */
  --hair-2:rgba(20,18,14,.22);  /* emphatic border, input rest */
  --hair-soft:rgba(20,18,14,.06);/* row dividers inside a panel */

  /* STATE · conventional, darkened, desaturated. One job each. */
  --ok:#3F6B4A;      --ok-soft:#E4EDE5;      --ok-line:#B7CDBC;
  --warn:#96702B; --warn-ink:#8B6726;    --warn-soft:#F5ECDA;    --warn-line:#DCC79B;
  --bad:#A03A3A;     --bad-soft:#F4E3E3;     --bad-line:#DCB1B1;

  /* DATA · one bronze series, three neutrals. No rainbow. */
  --data-1:#B0703C; --data-2:#8A7C6B; --data-3:#B4AA9B; --data-4:#D5CEC3;
  --data-track:rgba(20,18,14,.08);

  color-scheme:light;
}
[data-theme="light"]{
  --accent:#B0703C; --accent-strong:#8F5A2E; --accent-ink:#8F5A2E;
  --accent-soft:#F2E4D6; --accent-line:#DFC4A8; --accent-on:#14120E;
  --canvas:#F6F3ED; --surface:#FFFDF9; --surface-2:#F1EDE5; --surface-3:#E9E4DA;
  --text:#14120E; --text-2:#3B3630; --text-muted:#655E51; --text-faint:#686458;
  --hair:rgba(20,18,14,.12); --hair-2:rgba(20,18,14,.22); --hair-soft:rgba(20,18,14,.06);
  --ok:#3F6B4A; --ok-soft:#E4EDE5; --ok-line:#B7CDBC;
  --warn:#96702B; --warn-ink:#8B6726; --warn-soft:#F5ECDA; --warn-line:#DCC79B;
  --bad:#A03A3A; --bad-soft:#F4E3E3; --bad-line:#DCB1B1;
  --data-1:#B0703C; --data-2:#8A7C6B; --data-3:#B4AA9B; --data-4:#D5CEC3;
  --data-track:rgba(20,18,14,.08);
  --shadow-1:0 1px 2px rgba(20,18,14,.05);
  --shadow-2:0 18px 40px -24px rgba(20,18,14,.35);
  --shadow-key:0 30px 60px -40px rgba(20,18,14,.4);
  color-scheme:light;
}
[data-theme="dark"]{
  --accent:#C98A55; --accent-strong:#DDA36B; --accent-ink:#DDA36B;
  --accent-soft:rgba(201,138,85,.13); --accent-line:rgba(201,138,85,.36); --accent-on:#14120E;
  --canvas:#0B0B0D; --surface:#101114; --surface-2:#15171B; --surface-3:#1C1F24;
  --text:#F2F3F5; --text-2:#C3C7CE; --text-muted:#9096A0; --text-faint:#828A96;
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.20); --hair-soft:rgba(255,255,255,.05);
  --ok:#6FA57F; --ok-soft:rgba(111,165,127,.14); --ok-line:rgba(111,165,127,.36);
  --warn:#C79A52;--warn-ink:#C79A52; --warn-soft:rgba(199,154,82,.14); --warn-line:rgba(199,154,82,.36);
  --bad:#D07070; --bad-soft:rgba(208,112,112,.14); --bad-line:rgba(208,112,112,.36);
  --data-1:#C98A55; --data-2:#8B8578; --data-3:#5F5C56; --data-4:#3A3936;
  --data-track:rgba(255,255,255,.08);
  --shadow-1:0 1px 2px rgba(0,0,0,.6);
  --shadow-2:0 24px 50px -28px rgba(0,0,0,.85);
  --shadow-key:0 40px 90px -50px #000;
  color-scheme:dark;
}

/* Retired names still referenced by the inline styles on these pages. An
   undefined custom property is invalid at computed-value time — the colour
   becomes inherited, not a sensible default — so these must resolve. */
:root{
  /* The font tokens live in a different :root block in site/styles.css than the
     colour tokens, so lifting the colour block alone left every font-family:
     var(--font-ui) invalid — which does not fall back to the previous value, it
     falls back to the browser default. All 17 pages rendered in Times New Roman. */
  /* The marketing site's stacks, letter for letter (site/tokens/ink/typography.css): since WO-148 every
     Latin glyph comes from Instrument Sans / Bricolage Grotesque (JetBrains Mono and Newsreader next), and Indic and other scripts fall to the Noto faces
     before the generic family. */
  --font-script:"Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Gujarati","Noto Sans Gurmukhi","Noto Sans Oriya","Noto Sans Sinhala","Noto Sans Thai","Noto Sans Khmer","Noto Sans Myanmar","Noto Sans Arabic","Noto Sans Hebrew","Noto Sans";
  --font-display:"Bricolage Grotesque","Newsreader","Segoe UI",var(--font-script),system-ui,sans-serif;
  --font-ui:"Instrument Sans","JetBrains Mono","Segoe UI",var(--font-script),system-ui,sans-serif;
  --font-deva:"Noto Sans Devanagari",system-ui,sans-serif;
  --font-i18n:var(--font-script),"Noto Sans JP","Noto Sans KR","Noto Sans SC",system-ui,sans-serif;
  --bg:var(--canvas); --surf:var(--surface); --panel:var(--surface); --panel2:var(--surface);
  --card:var(--surface); --line:var(--hair); --line2:var(--hair);
  --ink:var(--text); --muted:var(--text-muted); --faint:var(--text-muted);
  --o:var(--accent); --oL:var(--accent); --o2:var(--accent); --grad:var(--accent);
  --green:var(--ok); --neg:var(--bad);
}

/* Base typography for these pages. They were set in Inter/Syne; Ink is
   JetBrains Mono for UI and Newsreader for display. */
body{background:var(--canvas);color:var(--text);font-family:var(--font-ui)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:0}
/* --accent is a fill colour; as text it measured 3.63:1 on --canvas and 3.95:1 on
   --surface in light mode, so every link on these pages was under AA. --accent-ink
   is the same bronze darkened to text weight: 5.17:1 and 5.63:1. */
a{color:var(--accent-ink)}
/* Body copy was #8A94A6 on #F3F6FB — 2.82:1, below the 4.5:1 minimum, on the
   privacy, terms and DPA pages that counsel and platform reviewers read.
   Body text is full-strength ink now; --text-muted is reserved for secondary
   lines, where it measures 5.35:1 and passes. */
p,li,td{color:var(--text)}
.sub,th,.muted,small{color:var(--text-muted)}

/* Wide legal tables (sub-processors lists a name, purpose, location and transfer
   basis per row) cannot fit 390px. Let the table scroll inside its own wrapper
   rather than pushing the page sideways — measured 87px of page overflow. */
.wrap table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wrap table th,.wrap table td{white-space:normal;overflow-wrap:anywhere}

/* Controls that outgrow a phone. A <select> sizes to its widest <option>, and the
   figure page's tab strip is a fixed row of buttons — together they pushed the page
   35px sideways at 390. The select is capped, and any strip of .tab buttons scrolls
   within itself rather than dragging the document with it. */
select,input,textarea{max-width:100%}
.tabs,.tabbar,.seg{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar,.tabbar::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
.tab{flex:none}

/* Page-level horizontal guard. `clip`, never `hidden`: overflow:hidden on one axis
   forces the other from visible to auto, which makes <body> the scroll container and
   kills position:sticky — figure.html's tab bar is sticky, and that is exactly the
   bug this same mistake caused on 13 marketing pages. */
html,body{overflow-x:clip}

/* Drawn glyphs. Our webfont subsets carry no ★ ▦ ⌕ ⏸ and no emoji, and JetBrains Mono has no
   glyph for them either, so these were always icons pretending to be characters — rendered by
   whatever face the visitor's OS happened to substitute, at whatever metrics that face used.
   `1em` and `currentColor` mean they now take their size and colour from the type around them,
   which is what the character was doing right in the first place. */
.gi{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.135em;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Touch targets. Measured at 390px: the cookie banner's buttons came out 42px tall, and the legal
   pages' inter-document links 23-39px wide by 21px tall — under WCAG 2.5.8's 24x24 floor, on the
   two surfaces a customer is most likely to be reading one-handed on a phone. Padding only; no
   layout moves. */
#cleAcc,#cleRej,#cledPrefs,#clePrefs,.cle-cc button,[id^=cle] button{min-height:44px}
.lnav a,.legal-links a,.lfoot a{display:inline-block;padding:7px 6px;min-height:24px;min-width:24px;text-align:center}
@media (max-width:640px){
  #cleAcc,#cleRej,#clePrefs{width:100%}
}