/* Shared shell for the text pages (pricing, privacy, terms).
   The landing page keeps its own inlined CSS because it is one big art-directed
   layout; these three are documents, and documents want one stylesheet. */
@font-face{font-family:'Bricolage';src:url(/fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Instrument';src:url(/fonts/instrument.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'JBMono';src:url(/fonts/jbmono.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --ink:#08090b; --panel:#0f1116; --panel-2:#14171d;
  --line:#242a35; --line-soft:#191e27;
  --fg:#e9ecf1; --muted:#858d9c; --dim:#5d6573;
  --accent:#c6f24e; --accent-ink:#0b1004; --accent-soft:rgba(198,242,78,.13);
  --t:.22s; --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:'Instrument',Georgia,serif; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 22px}

nav{display:flex; align-items:center; gap:14px; padding:22px 0;
  border-bottom:1px solid var(--line-soft)}
.logo{display:flex; align-items:center; gap:10px; font-family:'Bricolage',serif;
  font-weight:800; letter-spacing:-.03em; font-size:17px; color:var(--fg);
  text-decoration:none}
.logo img{width:22px; height:22px; border-radius:6px; display:block}
nav .sp{flex:1}
nav a.back{color:var(--muted); text-decoration:none; font-size:14.5px;
  transition:color var(--t)}
nav a.back:hover{color:var(--accent)}

header.pg{padding:56px 0 10px}
h1{font-family:'Bricolage',serif; font-weight:800; letter-spacing:-.035em;
  font-size:clamp(34px,6vw,52px); line-height:1.03; margin:0 0 14px}
.updated{font-family:'JBMono',ui-monospace,monospace; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0}
.lede{color:var(--muted); font-size:19px; margin:18px 0 0}

h2{font-family:'Bricolage',serif; font-weight:700; letter-spacing:-.025em;
  font-size:26px; line-height:1.15; margin:46px 0 12px}
h3{font-family:'Bricolage',serif; font-weight:700; letter-spacing:-.02em;
  font-size:19px; margin:28px 0 8px}
p{margin:0 0 15px}
a{color:var(--accent)}
b,strong{color:var(--fg); font-weight:700}
ul{margin:0 0 15px; padding-left:20px}
li{margin-bottom:9px}
code{font-family:'JBMono',ui-monospace,monospace; font-size:.9em;
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
  padding:2px 6px}
hr{border:0; border-top:1px solid var(--line-soft); margin:44px 0}

table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15.5px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line-soft);
  vertical-align:top}
th{font-family:'JBMono',ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  font-weight:400}

.card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:26px 26px 22px; margin:0 0 18px}
.card.hi{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.price{font-family:'Bricolage',serif; font-weight:800; letter-spacing:-.03em;
  font-size:42px; line-height:1; margin:6px 0 4px}
.price small{font-size:16px; font-weight:600; color:var(--muted);
  letter-spacing:0}
.tag{display:inline-block; font-family:'JBMono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px}
.card ul{margin-top:14px; padding-left:0; list-style:none}
.card ul li{position:relative; padding-left:26px; color:var(--muted)}
.card ul li::before{content:''; position:absolute; left:4px; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--accent); opacity:.85}

.btn{display:inline-flex; align-items:center; gap:9px; border:0; border-radius:11px;
  padding:14px 22px; min-height:48px; background:var(--accent); color:var(--accent-ink);
  font-family:'Instrument',Georgia,serif; font-size:15.5px; font-weight:700;
  text-decoration:none; box-shadow:0 6px 26px rgba(198,242,78,.22);
  transition:transform var(--t) var(--ease), box-shadow var(--t)}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(198,242,78,.3)}
.btn svg{width:17px; height:17px}

footer{margin-top:76px; padding:26px 0 52px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  color:var(--dim); font-size:14px}
footer .sp{flex:1}
footer nav{border:0; padding:0; display:flex; gap:18px}
footer a{color:var(--muted); text-decoration:none; transition:color var(--t)}
footer a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- answer pages (/fix, /for, /alternatives) ---------- */
/* These pages have one job: answer the question in the first screen, then earn
   the rest of the read. The .answer box is that first screen. */
.answer{background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:0 14px 14px 0;
  padding:22px 24px; margin:26px 0 34px}
.answer p:last-child{margin-bottom:0}
.answer .lbl{font-family:'JBMono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 8px}

pre{background:var(--panel-2); border:1px solid var(--line); border-radius:11px;
  padding:16px 18px; overflow-x:auto; margin:0 0 16px;
  font-family:'JBMono',ui-monospace,monospace; font-size:13.5px; line-height:1.6;
  color:var(--fg)}
pre code{background:0; border:0; padding:0; font-size:inherit}

ol.steps{counter-reset:s; list-style:none; padding-left:0; margin:0 0 18px}
ol.steps>li{counter-increment:s; position:relative; padding-left:42px;
  margin-bottom:18px}
ol.steps>li::before{content:counter(s); position:absolute; left:0; top:-1px;
  width:27px; height:27px; border-radius:8px; background:var(--accent-soft);
  border:1px solid var(--line); color:var(--accent);
  font-family:'JBMono',ui-monospace,monospace; font-size:13px;
  display:flex; align-items:center; justify-content:center}

.note{background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin:0 0 18px; color:var(--muted); font-size:16px}
.note b{color:var(--fg)}

.band{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:30px 28px; margin:44px 0 0; text-align:center}
.band h2{margin:0 0 10px; font-size:24px}
.band p{color:var(--muted); max-width:52ch; margin:0 auto 20px}

.crumb{font-family:'JBMono',ui-monospace,monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  margin:0 0 14px}
.crumb a{color:var(--dim); text-decoration:none}
.crumb a:hover{color:var(--accent)}

.yes{color:var(--accent)}
.no{color:var(--dim)}