/*
 * Shared styles for the LEGAL prose pages: privacy.html and terms.html.
 *
 * Extracted from privacy.html when terms.html was added, rather than copied
 * into it. Two hand-maintained copies of the same 100 lines is how this repo
 * ended up with five diverging versions of the brand mark; one file is the
 * whole point.
 *
 * Safe to change without moving either page's "Last updated" date: build.mjs
 * fingerprints the text inside <main> only, so head and styles are invisible
 * to it. Must be listed in STATIC in build.mjs or it 404s in production.
 */
  :root{
    color-scheme:dark;
    --ground:#0a0e16; --ground-2:#0c1220;
    --ink:#eef3fb; --dim:#9db0cb; --faint:#7a8ba3;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06);
    --violet:#8b7cf3; --accent-ink:#4ad6bd;
    --sheen:linear-gradient(115deg,#4ad6bd,#7fe9d4 42%,#8b7cf3);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0.33 0.33 0.33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='9' intercept='-4.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-o:.08;
    /* App-icon gradient — declared ONCE, never per theme, so the mark is
       identical on every surface. Kept in sync with index.html. */
    --logo-grad:linear-gradient(115deg,#22e3c3,#7ff5e0 42%,#9a8bff);
    /* The primary-button pair. Also declared once — index.html holds the same
       two values in every theme block. These pages had no buttons at all until
       the footer grew its Start free / Sign in CTAs, and without them
       `background:var(--cta)` resolved to transparent: a button with no
       background, invisible against the page on the two legal pages only. */
    --cta:linear-gradient(115deg,#4ad6bd,#7fe9d4 42%,#8b7cf3); --btn-ink:#04120f;
    --nav-bg:linear-gradient(180deg,rgba(10,14,22,.92),rgba(10,14,22,.7));
    --card-grad:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
    --seg-bg:rgba(255,255,255,.05); --seg-active:rgba(74,214,189,.16);
  }
  :root[data-theme="light"]{
    color-scheme:light;
    --ground:#f4f7fc; --ground-2:#e9eef7;
    --ink:#0e1626; --dim:#47576f; --faint:#616f85;
    --line:rgba(14,24,44,.12); --line-2:rgba(14,24,44,.07);
    --violet:#6d5cf0; --accent-ink:#0b7a6a;
    --sheen:linear-gradient(115deg,#10ab90,#22c0a6 42%,#6d5cf0);
    --nav-bg:linear-gradient(180deg,rgba(244,247,252,.9),rgba(244,247,252,.66));
    --card-grad:linear-gradient(180deg,#ffffff,#f7fafe);
    --seg-bg:rgba(14,24,44,.05); --seg-active:rgba(14,168,143,.14);
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme]){
      color-scheme:light;
      --ground:#f4f7fc; --ground-2:#e9eef7;
      --ink:#0e1626; --dim:#47576f; --faint:#616f85;
      --line:rgba(14,24,44,.12); --line-2:rgba(14,24,44,.07);
      --violet:#6d5cf0; --accent-ink:#0b7a6a;
      --sheen:linear-gradient(115deg,#10ab90,#22c0a6 42%,#6d5cf0);
      --nav-bg:linear-gradient(180deg,rgba(244,247,252,.9),rgba(244,247,252,.66));
      --card-grad:linear-gradient(180deg,#ffffff,#f7fafe);
      --seg-bg:rgba(14,24,44,.05); --seg-active:rgba(14,168,143,.14);
    }
  }

  /* On paper the theme is always light — see the long note in index.html's
     print block. A dark-mode reader otherwise printed near-white ink onto white
     paper (0.081 sd against light mode's 0.133), or, with background graphics
     enabled, a near-solid #0a0e16 sheet (0.085 mean luminance). This file owns
     its own tokens, so it needs its own copy. */
  @media print{
    :root, :root[data-theme="dark"], :root:not([data-theme]){
      color-scheme:light;
      --ground:#ffffff; --ground-2:#ffffff;
      --grain-o:0;
      --ink:#0e1626; --dim:#33415c; --faint:#55606f;
      --line:rgba(14,24,44,.22); --line-2:rgba(14,24,44,.14);
      --violet:#4a3bc4; --accent-ink:#086052;
      --nav-bg:#ffffff; --card-grad:none;
      --seg-bg:#ffffff; --seg-active:#ffffff;
      --cta:none; --btn-ink:#0e1626;
    }
    .theme-seg{display:none !important}
    .card, .callout{break-inside:avoid; page-break-inside:avoid}
  }

  *{box-sizing:border-box}
  /* Anchor targets clear the sticky bar. Without this the browser scrolls a
     fragment target to y=0, which is 74px UNDER a 74px sticky header. The worst
     case was not cosmetic: /privacy#device-data is linked from the console's
     Settings -> Organization page, and its <h3> landed COMPLETELY hidden. 82 =
     the 74px bar plus 8px of breathing room. Set on the scroll container, so it
     covers fragment navigation, in-page links and scrollIntoView alike. */
  html{scroll-padding-top:82px}
  /* Matches the generated shell, which has carried this since it was written.
     Without it these compute overflow-wrap:normal, so an unbreakable token — a
     long URL, an API key, a data: URI pasted into copy — would push the page
     sideways rather than breaking. Nothing currently overflows; this closes the
     gap before something does. */
  body{margin:0;background:var(--ground);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
    line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
  a{color:var(--accent-ink);text-decoration:none}
  a:hover{text-decoration:underline}
  /* max-width stays 760px (this is a reading page, not the 1120px landing
     grid), but the 24px gutter matches index.html so the header and the body
     text share one left edge. */
  .wrap{max-width:760px;margin:0 auto;padding:0 24px}

  /* Header chrome unified with index.html: same z-index, blur, divider weight
     and padding-driven height. The ONLY intentional divergences are the
     760px measure above and .brand's color below. */
  header.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
  /* min-height matches index.html's header height. Padding alone reaches only
     71px here: index's row is sized by its 44px "Start free" button and this
     page has just a text link, so without this the sticky header would jump
     3px when moving between the two pages. Border-box (the global default), so
     this is the full row height, and max-width:760px keeps its meaning. */
  .nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 24px;min-height:73px}
  /* The shrink guard index.html and the shared shell both carry, and these two
     lacked. min-height sets a FLOOR, not a ceiling: without nowrap the flex
     children shrink and their labels wrap, the row grows past the floor, and
     the bar silently stops matching every other page. That is not theoretical
     — demo.html measured 97.4px at 375px, against 74px everywhere else,
     because "Back to home" broke onto two lines. Pinning a height without
     pinning what can wrap inside it only moves the failure to a narrower
     viewport. */
  .nav-in > *{white-space:nowrap;flex:0 0 auto}
  /* Typography matched to index.html. `color` is NOT inherited here: this page
     styles `a` as accent-colored for its many inline prose links, so the brand
     needs an explicit override or the wordmark turns teal. */
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
  .brand:hover{text-decoration:none}
  /* Must stay identical to index.html — the ::before/::after draw the screen
     glyph inside the gradient tile. Without them the mark renders as a plain
     square and silently diverges from every other page. */
  .logo{width:30px;height:30px;border-radius:21.875%;flex:none;background:var(--logo-grad)}
  .logo svg{display:block;width:100%;height:100%}
  /* Matches index.html's .nav-links .txtlink — same size, hit-area and
     color-shift hover (no underline, so the generic a:hover is suppressed).
     The negative right margin cancels the 12px padding so the text still lines
     up with the body copy's right edge; index doesn't need it because a button,
     not a text link, sits at its container edge. */
  .back{font-size:14.5px;font-weight:500;color:var(--dim);padding:8px 12px;margin-right:-12px;border-radius:8px;transition:color .15s}
  .back:hover{color:var(--ink);text-decoration:none}
  /* flex:0 1 auto, against the nowrap guard above, for this one child. WCAG
     1.4.12 requires the page to survive a reader's own letter/word/line
     spacing; at 320px with letter-spacing .12em applied this link grew from
     133.8px to 158.1px, pushed its right edge to 353.5px and put the whole
     document into horizontal scroll. It is allowed to shrink and wrap now: the
     header's min-height is a FLOOR, so growing taller under a reader's spacing
     is correct behaviour, where scrolling sideways is a failure.
     Safe to re-allow because the button that used to share this row is gone —
     it was "Start free" plus this link that made demo.html 97px, not the link
     on its own. */
  .back{white-space:normal;flex:0 1 auto;min-width:0}


  .eyebrow{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);margin:0}
  h1{font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.02em;font-weight:800;
    margin:12px 0 6px;text-wrap:balance}
  .meta{color:var(--faint);font-size:14px;margin:0 0 8px}
  h2{font-size:22px;letter-spacing:-.01em;font-weight:700;margin:44px 0 10px;
    padding-top:20px;border-top:1px solid var(--line-2)}
  h3{font-size:16px;font-weight:700;margin:24px 0 6px}
  p,li{color:var(--dim)}
  strong{color:var(--ink);font-weight:650}
  ul{padding-left:20px}
  li{margin:6px 0}
  .lead{font-size:18px;color:var(--ink);opacity:.92}

  /* An orphaned declaration block sat here — a selector line (a highlight rule,
     judging by box-decoration-break) was lost when this file was split out in
     6d8b018, leaving its declarations at the top level with no selector.
     That is not merely dead code. CSS error recovery consumes forward to the
     next `{` looking for the prelude it is missing, so it swallowed the WHOLE
     NEXT RULE: `footer{...}` never applied on /privacy or /terms, and both
     footers rendered with no top border, no 56px margin and no padding, butted
     straight against the prose. Confirmed in the browser — the parser kept zero
     rules matching `footer`, while `.foot-bottom` (the next rule after) parsed
     fine, so it ate exactly one.
     Deleted rather than reconstructed: neither page contains a <mark>, <code>
     or any element those declarations could have targeted. */
  footer{border-top:1px solid var(--line);margin-top:56px;padding:26px 0;position:relative}
  /* Grain — the same faint texture as the CTA band. The texture is MID-GRAY
     speckle carried in the alpha channel, so it darkens a light ground and
     lightens a dark one by itself; no mix-blend-mode, which cancels at both
     luminance extremes (measured) and made the first version invisible.
     pointer-events off keeps every footer link clickable. Uses var(--grain)
     so the selftest can hold all four footer copies together. */
  footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:var(--grain-o)}
  /* Four columns: a brand block that carries the CTAs, then Product / Learn /
     Company. Replaces a single flex row of 15 links that wrapped and left
     "Start free" stranded alone on a second line, with Terms weighted the same
     as Features. Degrades to 2 columns then 1 — and the stacked form is what
     finally gives phone users a full set of links, which the header does not. */
  /* Its OWN measure, not the host page's .wrap — see the long note in
     pages.mjs. Inheriting gave the brand column 339 / 334 / 360 / 214px
     depending on the page, and on the legal pages a PROSE measure was sizing a
     four-column footer. */
  .foot-in{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:32px;align-items:start;
    max-width:1100px;margin:0 auto;padding-left:24px;padding-right:24px}
  .foot-brand{display:flex;flex-direction:column;gap:12px;max-width:320px}
  .foot-tag{color:var(--dim);font-size:13.5px;line-height:1.6;margin:0}
  .foot-cta{display:flex;gap:10px;flex-wrap:wrap}
  .foot-cta a{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;
    border:1px solid transparent;border-radius:10px;padding:9px 16px;transition:transform .12s ease,color .15s,background .15s}
  .foot-cta a:hover{text-decoration:none;transform:translateY(-1px)}
  .foot-cta .btn-primary{background:var(--cta);color:var(--btn-ink);box-shadow:none}
  .foot-cta .btn-ghost{border-color:var(--line);color:var(--ink);background:none}
  .foot-col{display:flex;flex-direction:column;gap:10px}
  /* border:0 and padding:0 are load-bearing, not tidiness. These headings are
     <h2>, and a host page is free to style h2 however it likes — legal.css
     styles every h2 as a prose section heading with
     `padding-top:20px;border-top:1px solid var(--line-2)`. This rule sets
     colour, size, weight, spacing and margin but declared neither of those two,
     so they fell through to the element rule and every footer column on
     /privacy and /terms carried a stray hairline and 20px of dead space that
     existed nowhere else. Shared markup must not depend on what its host does
     to bare elements. */
  /* align-self is what makes the underline below match the WORD rather than the
     column. .foot-col is a flex column, so by default its children stretch to
     the full cross-axis width and any 100%-wide child rule would span the whole
     column. Starting the item instead sizes the heading to its own content, and
     the ::after then inherits exactly that width. */
  .foot-h{color:var(--faint);font-size:11.5px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;margin:0 0 2px;padding:0;border:0;align-self:flex-start}
  /* Brand rule UNDERLINING each column heading. An ::after rather than a
     border-bottom, deliberately: these headings are <h2>, legal.css styles every
     h2 as a prose section heading with its own border, and .foot-h already has
     to say border:0 to fight that off (see the note above) — the bug that
     taught us so put a stray hairline and 20px of dead space under every footer
     column on /privacy and /terms. Re-introducing a border here would put this
     rule straight back into that argument. A pseudo-element sidesteps it, and
     stays out of the accessibility tree since it is decoration.
     var(--sheen) is the same brand gradient the hero headline and the mock
     screens' .bar already use, so it themes with the rest of the palette
     instead of hardcoding a second copy of the colours. */
  .foot-h::after{content:"";display:block;height:3px;border-radius:2px;
    background:var(--sheen);margin:7px 0 0}
  .foot-col a{color:var(--dim);font-size:14px;text-decoration:none}
  .foot-col a:hover{color:var(--accent-ink)}
  /* Copyright left, theme right, on a rule. Both used to sit in one cluster
     with the entire right half of the footer empty. */
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
  @media (max-width:860px){
    .foot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
    .foot-brand{grid-column:1 / -1;max-width:none}
  }
  @media (max-width:480px){.foot-in{grid-template-columns:1fr}}
  .copy{color:var(--faint);font-size:13px}
/* ===== THEME SEG: generated, edit THEME_SEG_CSS in pages.mjs ===== */
  .theme-seg{display:inline-flex;gap:2px;background:var(--seg-bg);border:1px solid var(--line);
    border-radius:999px;padding:3px}
  .theme-seg button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
    color:var(--faint);font:inherit;font-size:12px;padding:5px 9px;border-radius:999px;
    transition:color .15s,background .15s}
  .theme-seg button:hover{color:var(--ink)}
  .theme-seg button[aria-pressed="true"]{background:var(--seg-active);color:var(--ink)}
  .theme-seg button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
  .theme-seg svg{width:14px;height:14px}
  @media (max-width:520px){
    .theme-seg button span{display:none}
    .theme-seg button{min-width:44px;min-height:44px;justify-content:center;padding:6px}
  }
/* ===== END THEME SEG ===== */