/* ==========================================================================
   Legal pages (privacy-policy) + 404
   Measured from tallorder.vc @1440px.
   frame 1312 = rail 96 + column 1120 + rail 96
   column is a 12-col grid: TOC spans 4 (373px), body spans 8 (747px)
   ========================================================================== */

/* ---- rails (8px dot grid, 1.5px square, --surface) ---- */
.railed{display:flex;align-items:stretch}
.rail{
  width:96px;flex:none;
  background-image:var(--dots-band);
  background-repeat:repeat;
}

/* ---- two-column reading layout ---- */
.lg-grid{
  flex:1 1 auto;min-width:0;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}

/* left — table of contents ---------------------------------------------- */
.lg-toc{
  grid-column:span 4;
  padding:32px;
  border-right:1px solid var(--border);
  align-self:stretch;
}
.lg-toc-inner{display:flex;flex-direction:column;gap:32px}
.lg-title{display:flex;flex-direction:column;gap:8px}
.lg-title h1{
  font-family:var(--font-body);font-weight:600;
  font-size:24px;line-height:28px;letter-spacing:.005em;
  text-transform:none;
}
.lg-updated{
  font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;
  color:var(--muted-2);
}
.lg-toc ol{list-style:none;display:flex;flex-direction:column;gap:12px}
.lg-toc li{display:flex;gap:10px;align-items:flex-start}
.lg-toc .n,
.lg-toc a{
  font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;
  color:var(--muted);
}
.lg-toc .n{flex:none}
.lg-toc a{transition:color .18s}
.lg-toc a:hover{color:var(--text)}

/* right — sections ------------------------------------------------------- */
.lg-body{
  grid-column:span 8;
  padding:32px;
  display:flex;flex-direction:column;gap:32px;
}
.lg-sec{display:flex;flex-direction:column;gap:12px;scroll-margin-top:108px}
.lg-sec h3{
  font-family:var(--font-body);font-weight:600;
  font-size:18px;line-height:24px;letter-spacing:0;
  display:flex;gap:4px;color:var(--text);
}
.lg-sec p{font-size:14px;line-height:20px;color:var(--muted)}

/* ==========================================================================
   404
   ========================================================================== */
.nf{
  position:relative;
  /* Sized to the message, not the old watermark — it was 1000px so the
     clipped wordmark had room, and without it that left the footer below
     the fold on a mostly-empty screen. */
  min-height:min(60vh,560px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* The watermark is clipped at the edge the header's vertical rules sit on
     rather than running out past them. main.frame is already that box on
     404.html, so re-declaring it here inset the block a second time. */
  width:100%;
}
.nf-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:838px;max-width:100%;text-align:center;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(92px,24vw,346px);line-height:.9;letter-spacing:0;
  color:transparent;
  background:linear-gradient(180deg,rgba(250,250,249,.05),rgba(250,250,249,.006));
  -webkit-background-clip:text;background-clip:text;
  user-select:none;pointer-events:none;white-space:nowrap;
}
.nf-msg{
  position:relative;z-index:1;
  padding:20px 40px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
  background:radial-gradient(50% 50% at 50% 50%,#0c0a09 72.4138%,rgba(12,10,9,0) 100%);
}
.nf-msg .t{display:flex;flex-direction:column;align-items:center;gap:4px}
.nf-msg h1{
  font-family:var(--font-body);font-weight:600;
  font-size:18px;line-height:24px;letter-spacing:0;text-transform:none;
}
.nf-msg p{font-size:14px;line-height:20px;color:var(--muted)}
.nf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 12px;border-radius:0;
  background:#292524;color:var(--white);
  font-size:14px;line-height:20px;font-weight:500;
  transition:background .18s;
}
.nf-btn:hover{background:#332e2c}

/* ---- responsive ---- */
@media (max-width:1100px){
  .rail{display:none}
  .lg-grid{grid-template-columns:1fr;border-left:none;border-right:none}
  .lg-toc{grid-column:auto;border-right:none;border-bottom:1px solid var(--border);padding:32px 20px}
  .lg-body{grid-column:auto;padding:20px}
  .nf{min-height:min(56vh,440px)}
}
@media (max-width:620px){
  .nf-msg{padding:20px}
  .nf-mark{font-size:clamp(72px,30vw,180px)}
}

/* Legal pages — Tall Order */
.lg-head{padding:clamp(80px,11vh,128px) var(--pad) clamp(32px,5vh,52px)}
.lg-head .kick{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:20px}
.lg-head h1{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(2rem,4.4vw,58px);line-height:.98;margin:0 0 20px;max-width:20ch}
.lg-head .lede{font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--muted);max-width:56ch;margin:0 0 26px}
.lg-head .meta{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-2);padding-top:22px;border-top:1px solid var(--border)}
.lg-head .meta .todo{color:var(--accent)}
.lg-body{padding:0 var(--pad) 120px}
/* <main> is the page box now, so these only owe it the width. They used to
   re-declare the box themselves because main was bare — which centred them
   correctly but drew no vertical rules, so the legal pages were the only ones
   with no side lines. The 46rem measure is applied to the children, not the box. */
.lg-head,.lg-body{
  width:100%;
}
.lg-head>*,.lg-body>*{max-width:46rem}
.lg-body>.tbl-wrap{max-width:56rem}
.lg-body p{font-size:16px;line-height:1.68;color:var(--muted);margin:0 0 20px}
.lg-body h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(1.3rem,2.1vw,26px);line-height:1.05;color:var(--text);margin:52px 0 18px}
.lg-body h3{font-family:var(--font-body);font-weight:600;font-size:17px;color:var(--text);margin:32px 0 12px}
.lg-body ul{margin:0 0 22px;padding-left:20px;list-style:none}
/* vc.css sets `.prose ul li{list-style:disc}` and these pages carry both
   .lg-body and .prose, so the disc marker beat the ul-level none and drew
   a bullet alongside our dash rule below. Same specificity, loaded later. */
.lg-body ul li,.lg-body ol li{list-style:none}
.lg-body li{position:relative;font-size:16px;line-height:1.68;color:var(--muted);margin-bottom:10px}
.lg-body li::before{content:"";position:absolute;left:-20px;top:.78em;width:7px;height:1px;background:var(--faint)}
.lg-body strong{color:var(--text);font-weight:600}
.lg-body a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.lg-body .callout{border-left:2px solid var(--accent);padding:4px 0 4px 20px;margin:26px 0}
.lg-body .callout p{color:var(--text);margin:0}
.lg-body .tbl-wrap{overflow-x:auto;margin:0 0 26px}
.lg-body table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
.lg-body table.tbl th{text-align:left;font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);font-weight:400;
  padding:0 16px 12px 0;border-bottom:1px solid var(--border-2)}
.lg-body table.tbl td{padding:14px 16px 14px 0;border-bottom:1px solid var(--hairline);color:var(--muted);vertical-align:top}
.lg-body table.tbl td:first-child{color:var(--text)}
.lg-body .fineprint{font-size:13px;font-style:italic;color:var(--muted-2);margin-top:40px;padding-top:22px;border-top:1px solid var(--border)}
@media (max-width:768px){ .lg-head{padding:64px 24px 28px} .lg-body{padding:0 24px 80px} }