/* ═══════════════════════════════════════════════════════════════════════════
   legal.css — /terms, /privacy, /refunds.

   🔴 WHY THESE ARE THREE STATIC DOCUMENTS AND NOT THREE VIEWS. Until today all
   three answered 200 with the app shell, which is the SPA fallback doing its job
   and looks exactly like a working page. A stranger about to hand over a card
   went looking for the terms and got the product.

   ⛔ THEY MUST WORK SIGNED OUT, WITH NO SESSION, NO ROUTER AND NO JAVASCRIPT.
   A person reads the refund policy at the moment they trust the product least.
   Anything that can fail between them and the words is a thing that will.
   So: no scripts on these pages beyond the theme boot, and nothing fetched.

   ⭐ THEY BORROW base.css AND NOTHING ELSE, so the palette, both themes and the
   fonts are the ones the app already has. This file is only the shape of a long
   document, which no other screen in the product needs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🔴 astra.css RESERVES THE DESKTOP NAV RAIL ON EVERY BODY THAT IS NOT .v-auth:
   `body:not(.v-auth){padding:44px 48px 60px 230px!important}`. These pages have
   no rail, so the whole document sat 230px right of where it should be, and on a
   phone it carried 98px of padding under it for a nav bar that is not there.
   Measured: .lgwrap was 379px from the left edge and 197px from the right in a
   1280 window. ⛔ The override needs !important to beat an !important, and it
   wins on source order rather than specificity, so legal.css must keep loading
   after astra.css. */
body.v-legal{padding:0!important}

body{background:var(--s0);color:var(--txt1);
  font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}

.lgwrap{max-width:44rem;margin:0 auto;padding:28px 22px 96px}

/* ── the way back, and it is the first thing on the page ─────────────────────
   Somebody who arrived here from a checkout needs the door back more than they
   need anything else on the screen. */
.lgtop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:22px;border-bottom:1px solid var(--edge)}
.lgtop a.home{font-family:"Fraunces",Georgia,serif;font-size:19px;letter-spacing:-.01em;
  color:var(--txt1);text-decoration:none}
.lgtop a.home em{font-style:normal;color:var(--lime-txt)}
.lgtop nav{display:flex;gap:14px;flex-wrap:wrap}
.lgtop nav a{font:400 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim1);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent}
.lgtop nav a:hover{color:var(--txt1)}
.lgtop nav a[aria-current]{color:var(--txt1);border-bottom-color:var(--lime-edge2)}

h1{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(28px,6vw,40px);
  line-height:1.12;letter-spacing:-.02em;margin:34px 0 6px}
.lgdate{font:400 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2);margin-bottom:30px}
.lglede{font-size:18px;line-height:1.6;color:var(--txt2);margin:0 0 34px;
  padding-bottom:30px;border-bottom:1px solid var(--edge)}

h2{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:22px;letter-spacing:-.01em;
  line-height:1.25;margin:40px 0 12px}
h3{font-size:15px;font-weight:600;margin:26px 0 8px;color:var(--txt1)}
p,li{color:var(--txt2)}
p{margin:0 0 14px}
ul{margin:0 0 16px;padding-left:20px}
li{margin:0 0 8px}
a{color:var(--lime-txt);text-underline-offset:3px}
strong{color:var(--txt1);font-weight:600}

/* ── the plain answer, before the paragraph that qualifies it ────────────────
   His own rule for anything a person has to act on: the ask first, the
   supporting detail after, optional. */
.lgplain{background:var(--s1);border:1px solid var(--edge);border-left:2px solid var(--lime-edge2);
  border-radius:10px;padding:16px 18px;margin:0 0 22px}
.lgplain p:last-child{margin-bottom:0}
.lgplain p{color:var(--txt1)}

table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
th,td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--edge);
  vertical-align:top;color:var(--txt2)}
th{color:var(--txt1);font-weight:600;white-space:nowrap;width:1%}

.lgwho{font-size:14.5px;line-height:1.7;background:var(--s1);border:1px solid var(--edge);
  border-radius:10px;padding:16px 18px;margin:0 0 22px;color:var(--txt2)}
.lgwho b{color:var(--txt1)}

.lgfoot{margin-top:56px;padding-top:22px;border-top:1px solid var(--edge);
  font-size:13.5px;color:var(--dim1)}
.lgfoot a{color:var(--dim1)}

@media (max-width:520px){
  .lgwrap{padding:20px 18px 72px}
  .lgtop{flex-direction:column;gap:12px}
  table{font-size:14px}
  th,td{display:block;border-bottom:0;padding:0}
  th{padding-top:12px}
  td{padding-bottom:10px;border-bottom:1px solid var(--edge)}
}
