/* Shared chrome and prose for the site's document pages -- privacy.html and
   support.html. Colours come from tokens.css, generated from packages/core, so
   these pages cannot drift from the app's palette.

   index.html keeps its own <style> block: it is a landing page with forty
   reveal elements and a dozen bespoke sections, and folding it in here would
   mean one file that neither page reads whole. What is duplicated between this
   file and index.html is only the chrome -- nav, footer, buttons -- and it is
   duplicated once, not twice, which is the point of this file existing. */

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--void);color:var(--mist);font:400 16px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.wrap{max-width:1216px;margin:0 auto;padding:0 32px}
@media(max-width:520px){.wrap{padding:0 22px}}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:2px}

/* Buttons: the same three pieces as index.html -- ground, definition ring, and
   the 1px the lamp catches along the top, held off the corners. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:9999px;font-weight:600;font-size:15px;letter-spacing:.01em;padding:13px 26px;cursor:pointer;
  border:1px solid transparent;transition:box-shadow .18s,background .18s,transform .1s,border-color .18s;
  font-family:inherit;--edge-inset:22px;white-space:nowrap}
.btn:before{content:"";position:absolute;top:0;left:var(--edge-inset);right:var(--edge-inset);height:1px;
  background:var(--edge);transition:background .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-l{background:var(--btn-lit-rest-bg);color:var(--btn-lit-rest-label);border-color:var(--btn-lit-rest-ring);
  box-shadow:var(--btn-lit-rest-cast);--edge:var(--btn-lit-rest-edge)}
.btn-l:active{box-shadow:var(--btn-lit-pressed-cast);--edge:var(--btn-lit-pressed-edge)}
.btn-w{background:var(--btn-primary-rest-bg);color:var(--btn-primary-rest-label);
  box-shadow:var(--btn-primary-rest-cast);--edge:var(--btn-primary-rest-edge)}
.btn-w:active{box-shadow:var(--btn-primary-pressed-cast);--edge:var(--btn-primary-pressed-edge)}
.btn-g{background:var(--btn-ghost-rest-bg);color:var(--btn-ghost-rest-label);
  border-color:var(--btn-ghost-rest-ring);box-shadow:var(--btn-ghost-rest-cast);--edge:var(--btn-ghost-rest-edge)}
.btn-g:hover{color:var(--white)}
.btn-g:active{box-shadow:var(--btn-ghost-pressed-cast);border-color:var(--btn-ghost-pressed-ring);
  --edge:var(--btn-ghost-pressed-edge)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}

/* Chrome. No sticky nav here: a document page is read top to bottom and a bar
   that follows the reader down 3,000 words of policy is 64px of the screen
   spent on a link they already used. */
nav{border-bottom:1px solid var(--floating)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;min-height:44px;gap:9px;font-weight:600;font-size:16.5px;color:var(--white);letter-spacing:-.01em}
.logo svg{width:20px;height:20px;flex:none;display:block}
.nav-r .btn{padding:11px 20px;font-size:13.5px;--edge-inset:21px}

/* The document itself. 68ch, not the 1216px the wrap allows: prose set to the
   full width of a landing page is unreadable, and the measure is the one
   typographic decision a policy page cannot get wrong -- it is the only thing
   standing between a reader and giving up on the section that says what
   happens to their location.

   Both .doc and .body sit on an element that also carries .wrap, so they are
   centred by its `margin:0 auto` -- deliberate for a document, which reads as
   one column rather than as a page with a left rail. Padding is set per side
   rather than with the shorthand: `padding:76px 0 40px` here would also zero
   .wrap's 32px horizontal padding, and did, which put the heading 32px to the
   left of every paragraph under it. */
.doc{padding-top:76px;padding-bottom:40px;max-width:68ch}
@media(max-width:760px){.doc{padding-top:56px;padding-bottom:32px}}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.doc h1{font-size:clamp(40px,5.4vw,60px);line-height:1.04;letter-spacing:-.014em;color:var(--white);font-weight:400;margin:18px 0 20px}
.doc h1 i{font-style:italic}
.doc .lede{color:var(--fog);font-size:18px;line-height:1.6}
.doc .stamp{margin-top:26px;font-size:13px;color:var(--ash);line-height:1.7}

.body{padding-bottom:110px;max-width:68ch}
.body h2{font-size:26px;line-height:1.2;letter-spacing:-.008em;color:var(--white);font-weight:400;
  font-family:"Instrument Serif",Georgia,serif;margin:54px 0 14px}
.body h3{font-size:15px;color:var(--bone);font-weight:600;margin:30px 0 8px}
.body p{margin-bottom:16px}
.body p:last-child{margin-bottom:0}
.body a{color:var(--copper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.body a:hover{color:var(--copper-soft)}
.body strong{color:var(--bone);font-weight:600}
.body em{color:var(--bone);font-style:italic}
.body ul,.body ol{margin:0 0 16px;padding-left:22px}
.body li{margin-bottom:9px}
.body li::marker{color:var(--smoke)}
.body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--silver);
  background:var(--panel);border:1px solid var(--floating);border-radius:5px;padding:1px 5px}

/* A table of what is collected is the one place a policy earns a table: the
   columns are the question the reader came with. On a wide screen it is a
   table, and it scrolls if it must.

   On a phone it used to scroll too, and that showed one and a half of three
   columns, cut mid-word, with the Optional column off the screen at every
   width and no scrollbar to say so. So below 640px each row becomes a block
   of its own: the field, then why it exists, then whether it is optional,
   each answer carrying its column's name. The correspondence between field
   and answer is kept, because a field and its answers never leave one block.
   The header row is moved off screen rather than removed, so a screen reader
   still announces the columns. */
.tw{overflow-x:auto;margin:0 0 18px;border:1px solid var(--floating);border-radius:12px;background:var(--card)}
.tw:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:14px}
th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
  font-weight:500;padding:14px 18px;border-bottom:1px solid var(--floating);white-space:nowrap}
td{padding:14px 18px;border-bottom:1px solid var(--floating);color:var(--fog);vertical-align:top;line-height:1.55}
td:first-child{color:var(--bone)}
tr:last-child td{border-bottom:none}
@media(max-width:640px){
  .tw{overflow-x:visible}
  table{min-width:0}
  table,tbody,tr,td{display:block}
  thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  tr{padding:16px 18px;border-bottom:1px solid var(--floating)}
  tr:last-child{border-bottom:none}
  td{padding:0;border:0}
  td:first-child{font-weight:600;margin-bottom:6px}
  td+td{margin-top:4px}
  td:nth-child(2)::before{content:"Why: ";color:var(--ash)}
  td:nth-child(3)::before{content:"Optional? ";color:var(--ash)}
}

/* The first stop for a keyboard, off the screen until it has focus. */
.skip{position:absolute;left:16px;top:-64px;z-index:60;padding:12px 18px;border-radius:9999px;
  background:var(--panel);color:var(--bone);font-size:14px;font-weight:600;box-shadow:0 0 0 1px var(--sf-raised-ring)}
.skip:focus{top:12px}

/* The 911 line. It is not a decorative callout: it is the sentence that has to
   survive a reader skimming, so it gets the copper ring the app gives a lit
   surface and sits above everything else on the page. */
.first{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;
  background:var(--sf-lit-bg);border:1px solid var(--sf-lit-ring);box-shadow:var(--sf-lit-cast);
  margin:0 0 34px;color:var(--bone);font-size:15px;line-height:1.6}
.first svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--copper)}
.note{border-left:2px solid var(--floating);padding-left:18px;color:var(--ash);font-size:14.5px;line-height:1.65;margin:0 0 16px}

footer{border-top:1px solid var(--floating);padding:70px 0 50px;background:var(--card)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:56px}
@media(max-width:760px){.f-grid{grid-template-columns:1fr}}
.f-tag{color:var(--ash);font-size:14px;margin-top:14px;max-width:300px;line-height:1.65}
.f-col b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:18px;font-weight:500}
.f-col a{display:block;color:var(--fog);font-size:14px;padding:11px 0}
.f-col a:hover{color:var(--bone)}
.f-legal{border-top:1px solid var(--floating);padding-top:30px;color:var(--ash);font-size:12.5px;line-height:1.8;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}