/* ============================================================
   WP Lab — base.css   v3
   Identical on wplab / wplister / trilister / trylister.
   Per-site palette lives in site.css. Do not put colour here.
   ============================================================ */

/* ---- 1. tokens that never change ------------------------- */
:root{
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* two radii. that is the whole set. */
  --r-card:16px;
  --r-pill:999px;
  --r-xs:6px;   /* focus ring + chips only */

  /* 4px spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --measure:68ch;
  --container:1140px;
  --header-h:68px;
}

/* ---- 2. reset -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}

/* ---- 3. accessibility base ------------------------------- */
/* one focus ring for the whole site. v1 had none on any build. */
:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
:focus:not(:focus-visible){outline:none}

.skip-link{
  position:absolute;left:var(--s-4);top:-4rem;z-index:100;
  background:var(--accent);color:var(--accent-fg);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-card);
  font-weight:600;text-decoration:none;transition:top .15s;
}
.skip-link:focus{top:var(--s-4)}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ---- 4. layout ------------------------------------------- */
.wrap{width:min(var(--container),calc(100% - var(--s-6)));margin-inline:auto}
@media (min-width:720px){.wrap{width:min(var(--container),calc(100% - var(--s-8)))}}

.section{padding:var(--s-8) 0}
@media (min-width:720px){.section{padding:var(--s-9) 0}}
.section + .section{border-top:1px solid var(--line-soft)}
.section-tight{padding:var(--s-7) 0}

/* section head: heading left, support right — BASELINE aligned.
   v1's GPT bottom-aligned this and orphaned the right column. */
.section-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
@media (min-width:820px){
  .section-head{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
    gap:var(--s-6);align-items:start}
}
.section-head p{color:var(--dim);max-width:52ch;margin:0}

.grid{display:grid;gap:var(--s-4)}
/* mobile-first, ascending. keep these in order: a later min-width rule
   must not be overridden by an earlier breakpoint declared below it. */
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- 5. type --------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em;font-weight:600}
/* restrained scale: ~64px h1 at 1440. v1 GPT shipped 122px. */
h1{font-size:clamp(2.3rem,1.4rem + 3.1vw,4rem)}
h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem)}
h3{font-size:1.15rem}
h4{font-size:1rem}
p{margin:0 0 var(--s-4)}
p:last-child{margin-bottom:0}
.lede{font-size:1.08rem;color:var(--dim);max-width:var(--measure)}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--link);
  display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);
}
.eyebrow::before{content:"";width:20px;height:1px;background:currentColor;flex:none}
a{color:var(--link)}
a:hover{color:var(--text)}
code,.mono{font-family:var(--font-mono);font-size:.88em}
strong{font-weight:600;color:var(--text)}
.muted{color:var(--dim)}
.small{font-size:.86rem}

/* ---- 6. buttons ------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);
  font-size:.94rem;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s;
}
.btn-primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-fg)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--link);color:var(--link)}
.btn-sm{padding:var(--s-2) var(--s-4);font-size:.86rem}
.btn-block{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-weight:600;font-size:.92rem;text-decoration:none;
}
.link-arrow .ico{transition:transform .18s}
.link-arrow:hover .ico{transform:translateX(3px)}

/* ---- 7. icons -------------------------------------------- */
/* every icon is an SVG using currentColor. no emoji, no dingbats. */
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:1.25rem;height:1.25rem}

/* ---- 8. header / nav ------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  display:flex;align-items:center;gap:var(--s-4);
  min-height:var(--header-h);
}
.brand{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  text-decoration:none;color:var(--text);
  white-space:nowrap;          /* v1 Grok wrapped its brand at 390px */
  margin-right:auto;
}
.brand:hover{color:var(--text)}
.brand-mark{
  width:30px;height:30px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  background:var(--accent);color:var(--accent-fg);
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;
}
.nav-links{display:none;list-style:none;gap:var(--s-1)}
.nav-links a{
  display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);
  font-size:.92rem;font-weight:500;color:var(--dim);text-decoration:none;
}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a[aria-current="page"]{color:var(--text);background:var(--surface-2)}

.nav-tools{display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-pill);border:1px solid var(--line);
  background:transparent;color:var(--dim);cursor:pointer;
}
.icon-btn:hover{color:var(--text);border-color:var(--link)}
.icon-btn .ico{width:17px;height:17px}
.theme-toggle{width:auto;padding:0 var(--s-3);gap:var(--s-2);display:flex}
.theme-toggle .label{font-size:.82rem;font-weight:500}
.nav-toggle{display:grid}

/* mobile panel */
.nav-panel{
  display:none;
  border-top:1px solid var(--line-soft);
  padding:var(--s-3) 0 var(--s-5);
}
.nav-panel[data-open="true"]{display:block}
.nav-panel ul{list-style:none;display:grid;gap:var(--s-1)}
.nav-panel a{
  display:block;padding:var(--s-3);border-radius:var(--r-card);
  text-decoration:none;color:var(--text);font-weight:500;
}
.nav-panel a:hover{background:var(--surface-2)}
.nav-panel a[aria-current="page"]{background:var(--surface-2);color:var(--link)}
.nav-panel .actions{margin-top:var(--s-4)}

@media (min-width:900px){
  .nav-links{display:flex}
  .nav-toggle{display:none}
  .nav-panel{display:none !important}
}
/* the header CTA is repeated in the hero, so it goes away when space is tight */
@media (max-width:640px){.nav-cta{display:none}}

/* ---- 9. surfaces ----------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-3);
}
.card h3{margin:0}
.card p{color:var(--dim);font-size:.94rem;margin:0}
.card .link-arrow{margin-top:auto;padding-top:var(--s-2)}

.tag{
  display:inline-flex;align-items:center;gap:var(--s-2);
  align-self:flex-start;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--dim);background:var(--surface-2);
}
.tag-live{color:var(--ok-fg);background:var(--ok-bg);border-color:var(--ok-bd)}
.tag-soon{color:var(--wait-fg);background:var(--wait-bg);border-color:var(--wait-bd)}

.panel{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-6);
}
/* a filled accent block sets colour for EVERY text role inside it.
   v1's GPT set the heading and forgot the eyebrow -> 1.57:1. */
.panel-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.panel-accent h2,.panel-accent h3,.panel-accent p,.panel-accent li,
.panel-accent strong,.panel-accent .muted{color:var(--accent-fg)}
.panel-accent .eyebrow{color:var(--accent-fg);opacity:.72}
.panel-accent p{opacity:.88}
.panel-accent .btn-primary{background:var(--accent-fg);color:var(--accent);border-color:var(--accent-fg)}
.panel-accent .btn-primary:hover{background:var(--accent-fg);color:var(--accent);opacity:.9}

/* ---- 10. numbered rows (link affordance) ----------------- */
.rows{display:grid;gap:var(--s-2);list-style:none}
.row-link{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);
  align-items:center;
  padding:var(--s-4) var(--s-5);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);text-decoration:none;color:var(--text);
  transition:border-color .18s,background-color .18s;
}
.row-link:hover{border-color:var(--link);background:var(--surface-2);color:var(--text)}
.row-num{font-family:var(--font-mono);font-size:.8rem;color:var(--link);font-weight:500}
.row-body strong{display:block;font-size:.98rem;margin-bottom:2px}
.row-body span{display:block;color:var(--dim);font-size:.88rem}
.row-link .ico{color:var(--dim)}
.row-link:hover .ico{color:var(--link)}

/* ---- 11. decision table ---------------------------------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.94rem}
caption{text-align:left;padding:var(--s-4) var(--s-5) 0;color:var(--dim);font-size:.88rem}
th,td{text-align:left;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td .link-arrow{font-size:.9rem}

/* ---- 12. checklist --------------------------------------- */
.checks{list-style:none;display:grid;gap:var(--s-3);margin:0}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start;font-size:.94rem}
.checks .ico{color:var(--link);margin-top:.35em;width:15px;height:15px}
.checks span{color:var(--dim)}

/* ---- 13. stats ------------------------------------------- */
.stats{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-6)}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4)}
.stat b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.1}
.stat span{display:block;color:var(--dim);font-size:.84rem;margin-top:2px}

/* ---- 14. hero -------------------------------------------- */
.hero{padding:var(--s-8) 0 var(--s-7);position:relative;overflow:hidden}
@media (min-width:720px){.hero{padding:var(--s-9) 0 var(--s-8)}}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 12% -10%,var(--accent-wash),transparent 60%);
}
.hero > *{position:relative}
.hero h1{max-width:16ch}
.hero .lede{margin-top:var(--s-4)}

/* ---- 15. forms ------------------------------------------- */
.field{display:grid;gap:var(--s-2);margin-bottom:var(--s-4)}
.field label{font-size:.86rem;font-weight:500}
.field .hint{font-size:.8rem;color:var(--faint)}
input,textarea,select{
  width:100%;padding:var(--s-3) var(--s-4);
  background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-xs);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:132px;resize:vertical}
select{
  appearance:none;                      /* v1 Grok left this at auto */
  padding-right:var(--s-8);
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right var(--s-4) center;
  background-size:14px;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--link)}

.inline-form{display:grid;gap:var(--s-2);margin-top:var(--s-5);max-width:30rem}
@media (min-width:520px){.inline-form{grid-template-columns:1fr auto}}
.form-note{font-size:.82rem;color:var(--faint);margin-top:var(--s-3)}
.trust-row{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  margin-top:var(--s-4);font-size:.86rem;color:var(--dim);
}
.trust-row span{display:inline-flex;align-items:center;gap:var(--s-2)}
.trust-row .ico{color:var(--link);width:14px;height:14px}

/* ---- 16. candour block ----------------------------------- */
.candour{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-card);background:var(--surface);
  padding:var(--s-6);
}
.candour h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem)}
.candour p{color:var(--dim);max-width:60ch}
.candour .proof{
  display:grid;gap:var(--s-3);margin-top:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid var(--line-soft);
}
@media (min-width:760px){.candour .proof{grid-template-columns:repeat(3,1fr)}}
.proof-item{font-size:.9rem}
.proof-item b{display:block;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s-1)}
.proof-item span{color:var(--dim)}

/* ---- 17. pricing ----------------------------------------- */
.price-grid{display:grid;gap:var(--s-4)}
@media (min-width:820px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.price-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-6);
  display:flex;flex-direction:column;gap:var(--s-4);
}
.price-card.featured{border-color:var(--accent)}
.price-amount{font-family:var(--font-display);font-size:2.4rem;font-weight:600;line-height:1}
.price-amount span{font-family:var(--font-body);font-size:.92rem;font-weight:400;color:var(--dim)}
.price-card ul{list-style:none;display:grid;gap:var(--s-3);margin:0}
.price-card li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);
  align-items:start;font-size:.92rem;color:var(--dim)}
.price-card li .ico{color:var(--link);margin-top:.4em;width:14px;height:14px}
.price-card .btn{margin-top:auto}
.todo{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:2px var(--s-2);border-radius:var(--r-xs);
  background:var(--wait-bg);color:var(--wait-fg);border:1px dashed var(--wait-bd);
  vertical-align:middle;
}

/* ---- 18. diagram ----------------------------------------- */
.diagram{margin:var(--s-6) 0 0}
.diagram svg{width:100%;height:auto}
.diagram text{font-family:var(--font-body);font-size:11px;fill:var(--text)}
.diagram .d-label{font-family:var(--font-mono);font-size:9px;fill:var(--faint);letter-spacing:.08em}
.diagram .d-node{fill:var(--surface);stroke:var(--line)}
.diagram .d-hub{fill:var(--accent);stroke:var(--accent)}
.diagram .d-hub-text{fill:var(--accent-fg);font-weight:600}
.diagram .d-line{stroke:var(--line);stroke-width:1.5;fill:none}
.diagram .d-line-soft{stroke:var(--line);stroke-width:1.5;fill:none;stroke-dasharray:4 4}

/* ---- 18b. small utilities (replaces every inline style) --- */
.panel-lede{max-width:56ch;margin-top:var(--s-3)}
.form-narrow{max-width:34rem}
.checks-faq{gap:var(--s-5);max-width:var(--measure)}
.prose-measure{max-width:var(--measure)}
.field-flush{margin:0}
.actions-flush{margin-top:0}

/* ---- 19. footer ------------------------------------------ */
.site-footer{border-top:1px solid var(--line);padding:var(--s-8) 0 var(--s-7);margin-top:var(--s-8)}
.footer-grid{display:grid;gap:var(--s-6)}
@media (min-width:760px){.footer-grid{grid-template-columns:1.6fr repeat(3,1fr)}}
.footer-about p{color:var(--dim);font-size:.9rem;margin-top:var(--s-3);max-width:34ch}
.footer-col .col-head{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  margin-bottom:var(--s-3);
}
.footer-col ul{list-style:none;display:grid;gap:var(--s-2)}
.footer-col a{font-size:.9rem;color:var(--dim);text-decoration:none}
.footer-col a:hover{color:var(--text)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line-soft);
  font-size:.84rem;color:var(--faint);
}