/* ============================================================
   GISTIL — LEGAL / COMPLIANCE PAGES
   Loaded ON TOP OF main.css, which supplies the palette, the
   three faces, the nav and the footer. Nothing below re-declares
   any of that.

   Direction: the landing measures a video against a gold axis of
   ticks and labels. A legal page is the same instrument at rest —
   a document measured section by section. So the one structural
   device here is a hairline SPINE down the left margin with a
   gold tick and a hanging number at every section start, and the
   only picture is the product's own artifact (the pre-baked core
   strip, kern_static.webp) bled faintly through the masthead.
   No new geometry, no invented ornament.

   Everything is scoped under .legal-body so this file can never
   reach the landing, and so it can out-specify main.css's bare
   element selectors without a single !important.
   ============================================================ */

/* ------------------------------------------------------------
   1. UNDO THE LANDING'S STAGE GRID
   main.css styles the bare <main> ELEMENT as the landing's axis
   grid — minmax(0,1fr) | axis | minmax(0,1fr). These pages share
   that stylesheet, so their <main> inherited it and every direct
   child (h1, paragraph, list, table) was auto-placed as a cell in
   a three-track grid: a heading in column 1 and its own paragraph
   in column 2. This one rule is the fix; the rest of the file is
   the design.
   ------------------------------------------------------------ */
/* Only the two properties that made <main> a grid are reset. max-width,
   margin and padding are deliberately left to .lwrap below: main.css sets
   them on the bare element (0,0,1), so a class beats them without a fight. */
.legal-body main{display:block;column-gap:normal}
.legal-body{
  --measure:580px;         /* reading column — measured at 77 characters */
  --rail:78px;             /* margin the spine and section numbers live in */
  --sec-gap:58px;          /* vertical rhythm between sections */
  background:var(--bg);
}

/* shared container: masthead and document sit on the same two lines —
   the text column starts at gutter + rail, the spine lives at gutter */
.lwrap{max-width:calc(var(--measure) + var(--rail) + var(--gutter)*2);margin:0 auto;
  padding-left:calc(var(--gutter) + var(--rail));padding-right:var(--gutter)}

/* ------------------------------------------------------------
   2. MASTHEAD
   ------------------------------------------------------------ */
.lhead{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 150% at 88% -30%,color-mix(in srgb,var(--gold) 8%,transparent) 0%,transparent 60%),
    linear-gradient(180deg,#0A0C10 0%,var(--bg) 100%)}

/* The picture: the mark as a document seal. A legal page is a signed
   instrument, so the graphic is the thing that signs it — the logo FILE
   (public/landing/assets/img/gistil_logo.webp, 1322px square), never
   redrawn in CSS, set large and quiet and cropped by the masthead so it
   sits under the type instead of competing with it. The small mark that
   opens the spine is the same file at reading size. */
.lhead__art{position:absolute;top:50%;right:calc(-1*var(--gutter) - 74px);
  width:320px;height:320px;transform:translateY(-44%);
  background:url('../img/gistil_logo.webp') center/contain no-repeat;
  opacity:.14;filter:saturate(.55);
  pointer-events:none;z-index:0}

.lhead__in{position:relative;padding-top:calc(64px + 62px);padding-bottom:0}

/* the product's own mark opens the spine — the logo FILE, never redrawn,
   sitting on the same vertical line every section tick will sit on */
.lhead__mark{position:absolute;left:calc(var(--gutter) - 22px);top:calc(64px + 60px);
  width:45px;height:45px;opacity:.92;z-index:2}
/* the spine's first segment: from just under the mark to the cut line */
.lhead__in::after{content:"";position:absolute;left:var(--gutter);top:calc(64px + 118px);
  bottom:0;width:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 40%,transparent),var(--edge) 60px)}

.legal-back{display:inline-flex;align-items:center;gap:8px;
  font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute2);margin-bottom:40px;
  transition:color .18s ease}
.legal-back:hover,.legal-back:focus-visible{color:var(--bone)}
.legal-back i{display:inline-block;width:6px;height:6px;border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);position:relative;top:-.5px}

/* eyebrow, in the landing's own vocabulary: gold marker, label, rule */
.lkicker{display:flex;align-items:center;gap:13px;margin:0 0 20px;
  font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.lkicker b{color:var(--gold);font-weight:500}
.lkicker i{flex:0 1 84px;height:1px;background:var(--edge2)}

.legal-body h1{font:800 clamp(34px,4.4vw,52px)/1.06 var(--display);color:var(--bone);
  letter-spacing:-.028em;margin:0;max-width:15ch}

.legal-meta{margin:22px 0 0;max-width:62ch;
  font:400 12.5px/1.75 var(--mono);color:var(--mute2);letter-spacing:.015em}
.legal-meta b{color:var(--mute);font-weight:400}

/* the masthead closes on the landing's cutoff line: dashed gold, labelled */
.lcut{display:flex;align-items:center;gap:16px;margin:52px 0 0;padding:0}
.lcut::before{content:"";flex:1 1 auto;height:0;
  border-top:1px dashed color-mix(in srgb,var(--gold) 46%,transparent)}
.lcut span{flex:0 0 auto;position:relative;top:1px;
  font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ------------------------------------------------------------
   3. THE DOCUMENT + ITS SPINE
   ------------------------------------------------------------ */
.legal-doc{padding-top:52px;padding-bottom:96px;position:relative}
/* the spine itself — one hairline, drawn on the container so it is
   continuous from the first section to the last */
.legal-doc::before{content:"";position:absolute;top:0;bottom:96px;
  left:var(--gutter);width:1px;
  background:linear-gradient(180deg,var(--edge),var(--edge) calc(100% - 110px),transparent)}

.lsec{position:relative;margin:0 0 var(--sec-gap)}
.lsec:last-child{margin-bottom:0}
/* the tick that crosses the spine at every section start */
.lsec__n{position:absolute;left:calc(-1*var(--rail));top:10px;
  display:flex;align-items:center;gap:8px;
  font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--gold)}
.lsec__n::before{content:"";width:13px;height:1px;background:var(--gold);flex:none;
  margin-left:-6px}

.legal-body h2{font:700 clamp(20px,1.9vw,22.5px)/1.3 var(--display);color:var(--bone);
  letter-spacing:-.016em;margin:0 0 16px;max-width:30ch}
.legal-body h3{font:700 15px/1.4 var(--display);color:var(--bone-dim);
  letter-spacing:-.005em;margin:30px 0 10px}

.legal-doc p{font:400 16.4px/1.78 var(--serif);color:var(--mute);margin:0 0 17px}
/* the one paragraph on the delete page that has to be read before anything
   is clicked, so it is set at the landing's lede weight, not at body weight */
.legal-doc .llede{font-size:19px;line-height:1.66;color:var(--bone-dim);margin:0 0 34px}
.legal-doc p:last-child{margin-bottom:0}
.legal-doc strong{color:var(--bone-dim);font-weight:600}
.legal-doc em{color:var(--bone-dim)}

.legal-doc ul,.legal-doc ol{margin:0 0 18px;padding:0;list-style:none}
.legal-doc li{position:relative;padding-left:22px;margin-bottom:11px;
  font:400 16.4px/1.78 var(--serif);color:var(--mute)}
.legal-doc li:last-child{margin-bottom:0}
/* a hairline dash rather than a bullet — the same mark the rail uses */
.legal-doc li::before{content:"";position:absolute;left:0;top:.86em;width:9px;height:1px;
  background:var(--edge2)}
.legal-doc ol{counter-reset:li}
.legal-doc ol li{counter-increment:li;padding-left:30px}
.legal-doc ol li::before{content:counter(li);width:auto;height:auto;top:0;background:none;
  font:500 11.5px/1.78 var(--mono);color:var(--mute2)}

.legal-doc code{font:400 13px/1.5 var(--mono);color:var(--bone-dim);
  background:var(--panel2);border:1px solid var(--edge);border-radius:4px;padding:1.5px 6px;
  white-space:nowrap}

.legal-doc a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--gold-bright) 38%,transparent);
  transition:color .16s ease,text-decoration-color .16s ease}
.legal-doc a:hover{color:var(--bone);text-decoration-color:var(--bone)}
.legal-doc a:focus-visible{text-decoration-color:transparent}

/* ------------------------------------------------------------
   4. CONTENTS — the long documents get a way in
   ------------------------------------------------------------ */
.ltoc{margin:0 0 66px;padding:0 0 34px;border-bottom:1px solid var(--edge)}
.ltoc h2{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);margin:0 0 20px;max-width:none}
.ltoc ol{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:2px}
.ltoc li{margin:0;padding:0}
.ltoc li::before{display:none}
.ltoc a{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;
  padding:6px 0;text-decoration:none;
  font:400 14px/1.5 var(--serif);color:var(--bone-dim)}
.ltoc a b{font:500 11px/1.6 var(--mono);color:var(--mute2);font-weight:500;text-align:right;
  transition:color .16s ease}
.ltoc a:hover{color:var(--bone)}
.ltoc a:hover b{color:var(--gold)}

/* ------------------------------------------------------------
   5. TABLE
   ------------------------------------------------------------ */
.legal-table{width:100%;border-collapse:collapse;margin:4px 0 22px;
  font:400 14px/1.62 var(--serif);table-layout:fixed}
.legal-table th,.legal-table td{border-bottom:1px solid var(--edge);padding:14px 20px 14px 0;
  text-align:left;color:var(--mute);vertical-align:top}
.legal-table td:last-child,.legal-table th:last-child{padding-right:0}
.legal-table thead th{border-bottom:1px solid var(--edge2);padding-bottom:11px;
  font:600 10px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute2)}
.legal-table tbody td:first-child{color:var(--bone-dim);width:42%}
.legal-table tbody tr:last-child th,.legal-table tbody tr:last-child td{border-bottom:none}

/* ------------------------------------------------------------
   6. NOTES / CALLOUTS
   ------------------------------------------------------------ */
.legal-note{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-left:2px solid var(--edge2);border-radius:10px;
  padding:20px 24px;margin:0 0 26px;
  box-shadow:0 14px 34px -26px rgba(0,0,0,.9)}
.legal-doc .legal-note p{font-size:15.2px;line-height:1.72;color:var(--mute);margin:0}
.legal-note p+p{margin-top:10px}
.legal-note b{display:block;margin-bottom:6px;
  font:600 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.legal-note--todo{border-left-color:var(--skip)}
.legal-note--todo b{color:var(--skip)}
.legal-note--ok{border-left-color:var(--worth)}
.legal-note--ok b{color:var(--worth)}

.legal-hr{border:none;border-top:1px solid var(--edge);margin:44px 0}

/* ------------------------------------------------------------
   7. DELETE ACCOUNT — the one page that is a control, not a text
   ------------------------------------------------------------ */
/* signed-out: the gate and the way through it are one object */
.lgate{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-radius:14px;padding:26px 28px 28px;margin:0 0 34px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 44px -30px rgba(0,0,0,.9)}
.lgate__k{margin:0 0 10px;font:600 10.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute2)}
.legal-doc .lgate p{margin:0 0 20px;color:var(--bone-dim);font-size:15.5px}
.lgate .acct--cta{font:700 13px/1 var(--mono);letter-spacing:.06em;padding:15px 28px}

/* signed-in: the destructive card. Red is used once, on the edge and the
   button, so the page has exactly one place that can hurt. */
.lform{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-left:2px solid var(--skip);border-radius:14px;
  padding:26px 28px 28px;margin:0 0 34px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 44px -30px rgba(0,0,0,.9)}
.lform__who{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--edge)}
.lform__who span{font:600 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute2)}
.lform__who strong{font:600 15px/1.3 var(--display);color:var(--bone);letter-spacing:-.01em}
.lform__who em{font:400 13px/1.3 var(--mono);font-style:normal;color:var(--mute)}
.legal-doc .lform p{margin:0 0 22px;font-size:15px;color:var(--mute)}
.lform__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* The typed confirmation. Deletion is irreversible, so it costs a word rather
   than a dialog the browser can be told to stop showing. */
.lconfirm{display:flex;flex-direction:column;gap:8px;max-width:320px;margin:0 0 22px}
.lconfirm span{font:600 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute2)}
.lconfirm span b{color:var(--bone);letter-spacing:.12em}
.lconfirm input{width:100%;height:42px;padding:0 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--edge);color:var(--bone);
  font:500 14px/1 var(--mono);letter-spacing:.08em;
  transition:border-color .18s ease,background .18s ease}
.lconfirm input::placeholder{color:var(--mute2);letter-spacing:.08em}
.lconfirm input:focus{outline:none;border-color:var(--skip);background:rgba(255,255,255,.05)}

.legal-danger{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font:700 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#160604;
  background:var(--skip);border:1px solid var(--skip);border-radius:999px;padding:14px 24px;
  box-shadow:0 12px 30px -18px color-mix(in srgb,var(--skip) 90%,transparent);
  transition:filter .18s ease,box-shadow .18s ease,transform .12s ease}
.legal-danger:hover{filter:brightness(1.09);
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--skip) 80%,transparent)}
.legal-danger:active{transform:translateY(1px)}
.legal-cancel{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute2);text-decoration:none;transition:color .18s ease}
.legal-doc .legal-cancel:hover{color:var(--bone);text-decoration:none}

/* the three short answers under the control read as a set, not as more prose */
.lqa{margin-top:8px;border-top:1px solid var(--edge)}
.lqa .lsec{margin:0;padding:30px 0;border-bottom:1px solid var(--edge)}
.lqa .lsec:last-child{border-bottom:none}
.lqa h2{font-size:18px;max-width:30ch}
.lqa .lsec__n{top:38px}
.lqa .lsec__n::before{background:var(--edge2)}

/* ------------------------------------------------------------
   8. RESPONSIVE
   Below 980 the spine has no margin to live in: numbers fold back
   inline in front of their headings (they are the first child of
   the h2, so reading order never changed) and the rail collapses.
   ------------------------------------------------------------ */
@media (max-width:980px){
  .legal-body{--rail:0px;--sec-gap:48px}
  .lwrap{padding-left:var(--gutter);max-width:var(--measure)}
  .legal-doc::before,.lhead__in::after{display:none}
  .lsec__n{position:static;display:flex;margin:0 0 10px;color:var(--gold)}
  /* the delete page's markers carry no number — with no spine to cross,
     a lone dash above a heading is noise, so it goes */
  .lqa .lsec__n{display:none}
  .lsec__n::before{margin-left:0}
  /* no room to stand beside the title here — the seal drops to the foot of
     the masthead and is cropped by the cut line, so it never sits under type */
  .lhead__art{top:auto;bottom:-56px;transform:none;
    right:calc(-1*var(--gutter) - 46px);width:212px;height:212px;opacity:.12}
  .lhead__mark{position:static;display:block;margin:0 0 24px;width:40px;height:40px}
  .ltoc ol{grid-template-columns:1fr}
}
@media (max-width:720px){
  .legal-body{--sec-gap:42px}
  .lhead__in{padding-top:calc(64px + 44px)}
  .legal-back{margin-bottom:30px}
  .legal-body h1{max-width:none}
  .lcut{margin-top:34px}
  .legal-doc{padding-top:40px;padding-bottom:70px}
  .ltoc{margin-bottom:48px}
  .lgate,.lform,.legal-note{padding:20px 20px 22px;border-radius:12px}
  .lform__actions{gap:14px}
  .legal-danger{width:100%;justify-content:center}
  .legal-cancel{width:100%;text-align:center}

  /* the 2-column table stops being a table and becomes a list of pairs */
  .legal-table{display:block;table-layout:auto}
  .legal-table thead{display:none}
  .legal-table tbody,.legal-table tr,.legal-table td{display:block;width:auto}
  .legal-table tr{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--edge)}
  .legal-table tbody tr:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
  .legal-table td{border:none;padding:0;width:auto}
  .legal-table tbody td:first-child{width:auto;color:var(--bone-dim);margin-bottom:8px;
    font-weight:600}
  .legal-table tbody td:last-child{position:relative;padding-left:18px;color:var(--mute);
    font-size:13.6px}
  .legal-table tbody td:last-child::before{content:"";position:absolute;left:0;top:.86em;
    width:9px;height:1px;background:var(--edge2)}
}
@media (max-width:420px){
  .legal-doc p,.legal-doc li{font-size:15.2px}
  .lform__who{gap:4px 10px}
}

@media (prefers-reduced-motion:reduce){
  .legal-doc a,.legal-back,.legal-danger,.legal-cancel,.ltoc a b{transition:none}
}

/* print: a legal page has to survive being printed to PDF for a store review */
@media print{
  .legal-body{background:#fff;color:#000}
  .nav,footer,.lhead__art,.legal-back,.skip-link{display:none}
  .lhead{border-bottom:1px solid #ccc;background:none}
  .lhead__in{padding-top:0}
  .lwrap{padding-left:0;padding-right:0;max-width:none}
  .legal-body h1,.legal-body h2,.legal-body h3,.legal-doc strong{color:#000}
  .legal-doc p,.legal-doc li,.legal-table td{color:#222}
  .legal-doc::before,.lhead__in::after{display:none}
  .lsec__n{position:static;display:flex;color:#666}
  .legal-doc a{color:#000}
}