/* ================================================================
   VerandaWeb : shared guide shell
   One stylesheet for every guide at /guides/*.html
   Mobile-first. OKLCH only. Big Shoulders Display + Hanken Grotesk.
   Print rules at the bottom produce the PDF/WhatsApp export.
   ================================================================ */

:root{
  --ironbark:   oklch(0.18 0.018 50);
  --ironbark-2: oklch(0.215 0.02 50);
  --ironbark-3: oklch(0.26 0.022 50);
  --blaze:      oklch(0.70 0.19 45);
  --blaze-hot:  oklch(0.75 0.175 55);
  --blaze-soft: oklch(0.94 0.045 65);
  --bone:       oklch(0.97 0.011 78);
  --bone-2:     oklch(0.99 0.006 80);
  --ink:        oklch(0.24 0.016 50);
  --ink-dim:    oklch(0.46 0.014 55);
  --rule:       oklch(0.24 0.016 50 / 0.14);
  --rule-soft:  oklch(0.24 0.016 50 / 0.08);
  --on-dark:    oklch(0.95 0.01 78);
  --on-dark-dim:oklch(0.79 0.018 70);
  --on-blaze:   oklch(0.165 0.035 45);
  --disp: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", Verdana, sans-serif;
  --r: 14px;
  --pad: clamp(1.15rem, 5vw, 3rem);
}

*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bone);
  color:var(--ink);
  font:16px/1.66 var(--body);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:800; line-height:0.97; text-transform:uppercase; letter-spacing:0.4px; }
::selection{ background:var(--blaze); color:var(--on-blaze); }

.wrap{ max-width:1080px; margin:0 auto; padding:0 var(--pad); }
.narrow{ max-width:760px; }

/* ---------- reading progress ---------- */
.gbar{
  position:fixed; inset:0 auto auto 0; height:3px; width:0%;
  background:var(--blaze); z-index:80; transition:width .12s linear;
}

/* ---------- masthead ---------- */
.gtop{
  background:var(--ironbark);
  color:var(--on-dark);
  padding:1.4rem 0 clamp(2.2rem, 6vw, 3.6rem);
  position:relative; overflow:hidden;
}
.gtop::after{ /* corrugated tooth strip along the bottom edge */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:14px;
  background:var(--bone);
  -webkit-mask:repeating-conic-gradient(from -45deg at 50% 0, #000 0 25%, transparent 0 50%) 0 0/22px 28px;
  mask:repeating-conic-gradient(from -45deg at 50% 0, #000 0 25%, transparent 0 50%) 0 0/22px 28px;
}
.gtop-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.gbrand{
  display:inline-flex; align-items:center; gap:.5rem;
  font:800 1.35rem/1 var(--disp); letter-spacing:.6px; text-transform:uppercase;
  color:var(--on-dark); text-decoration:none;
}
.gbrand svg{ width:24px; height:24px; flex:none; }
.gbrand > span{ display:inline; }
.gbrand b{ color:var(--blaze); font-weight:800; }
.gkicker{
  font:700 .72rem/1 var(--disp); letter-spacing:2.4px; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.gtop h1{
  margin-top:clamp(1.6rem, 5vw, 2.6rem);
  font-size:clamp(2.35rem, 1.3rem + 7vw, 5rem);
  max-width:17ch;
}
.gtop h1 i{ font-style:normal; color:var(--blaze); }
.gstand{
  margin-top:1rem; max-width:60ch; color:var(--on-dark-dim);
  font-size:clamp(1rem, .96rem + .3vw, 1.15rem);
}
.gmeta{
  margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem .9rem;
  font-size:.8rem; color:var(--on-dark-dim);
}
.gmeta span{ display:inline-flex; align-items:center; gap:.4rem; }
.gmeta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--blaze); flex:none; }

/* ---------- body sections ---------- */
main{ padding:clamp(2.4rem, 6vw, 4rem) 0 0; }
.sect{ margin-bottom:clamp(2.6rem, 6vw, 4.2rem); }
.shead{
  display:flex; align-items:baseline; gap:.85rem;
  border-top:1.5px solid var(--rule); padding-top:.9rem; margin-bottom:1.4rem;
}
.shead .n{
  font:800 1rem/1 var(--disp); letter-spacing:1.6px; color:var(--blaze); flex:none;
}
.shead h2{ font-size:clamp(1.5rem, 1.15rem + 1.7vw, 2.35rem); }
.sect > p{ max-width:68ch; margin-bottom:1rem; }
.sect > p:last-child{ margin-bottom:0; }
strong{ font-weight:800; }
em.hl{ font-style:normal; background:var(--blaze-soft); padding:0 .22em; border-radius:3px; }

/* ---------- card grid ---------- */
.cards{ display:grid; gap:.9rem; grid-template-columns:1fr; }
.cards.two{ grid-template-columns:1fr; }
.card{
  background:var(--bone-2);
  border:1.5px solid var(--rule-soft);
  border-radius:var(--r);
  padding:1.15rem 1.2rem;
  position:relative;
}
.card h3{ font-size:1.15rem; margin-bottom:.45rem; text-transform:none; font-family:var(--body); font-weight:800; letter-spacing:0; line-height:1.3; }
.card p{ font-size:.95rem; color:var(--ink-dim); }
.card p + p{ margin-top:.5rem; }
.cico{
  width:30px; height:30px; margin-bottom:.7rem; color:var(--blaze);
}
.cico svg{ width:100%; height:100%; }

/* numbered step cards */
.step .num{
  width:34px; height:34px; border-radius:50%; background:var(--blaze); color:var(--on-blaze);
  display:grid; place-items:center; font:800 1.05rem/1 var(--disp); margin-bottom:.75rem;
}

/* ---------- flow strip ---------- */
.flow{ display:grid; gap:.55rem; grid-template-columns:1fr; margin-top:.9rem; }
.flow .fbox{
  background:oklch(0.93 0.015 70); border-radius:10px; padding:.85rem 1rem; text-align:center;
}
.flow .fbox b{ display:block; font-size:.98rem; }
.flow .fbox small{ color:var(--ink-dim); font-size:.82rem; }
.flow .farr{ display:grid; place-items:center; color:var(--blaze); font-size:1.1rem; }

/* ---------- price / figure blocks ---------- */
.fig{ font-family:var(--disp); font-weight:800; font-size:clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); line-height:1; letter-spacing:.3px; }
.fig small{ font-size:.44em; color:var(--ink-dim); letter-spacing:1px; }
.subfig{ margin-top:.5rem; font-weight:800; font-size:1rem; }
.note{ margin-top:.6rem; font-size:.84rem; color:var(--ink-dim); }

/* ---------- callout ---------- */
.callout{
  background:oklch(0.96 0.035 68);
  border:1.5px solid oklch(0.70 0.19 45 / 0.32);
  border-radius:var(--r);
  padding:1.1rem 1.2rem;
  margin-top:1.2rem;
}
.callout p{ font-size:.95rem; max-width:none; }
.callout p + p{ margin-top:.55rem; }
.callout b{ color:oklch(0.45 0.15 45); }

/* ---------- checklist ---------- */
ul.check{ list-style:none; padding:0; display:grid; gap:.55rem; }
ul.check li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.97rem; }
ul.check li::before{
  content:"\2713"; color:var(--blaze); font-weight:800; flex:none; line-height:1.6;
}
ul.check li span{ display:block; }
ul.check li small{ display:block; color:var(--ink-dim); font-size:.86rem; margin-top:.1rem; }

/* plain ordered list */
ol.steps{ padding-left:1.1rem; display:grid; gap:.7rem; }
ol.steps li{ font-size:.97rem; padding-left:.25rem; }
ol.steps li::marker{ font-family:var(--disp); font-weight:800; color:var(--blaze); }

/* ---------- dark panel ---------- */
.dark{
  background:var(--ironbark); color:var(--on-dark);
  border-radius:var(--r); padding:1.4rem 1.25rem; margin-top:1.2rem;
}
.dark h3{ color:var(--on-dark); font-size:1.3rem; margin-bottom:.8rem; }
.dark ul.check li{ color:var(--on-dark); }
.dark ul.check li small{ color:var(--on-dark-dim); }
.dark .rule{ height:1px; background:oklch(0.95 0.01 78 / 0.16); margin:1rem 0; }
.dark p{ color:var(--on-dark-dim); font-size:.95rem; }
.dark p b{ color:var(--on-dark); }

/* ---------- table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:.93rem; }
.tbl th, .tbl td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.tbl th{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:1px; font-size:.85rem; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td b{ white-space:nowrap; }
.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- footer ---------- */
.gfoot{
  background:var(--ironbark); color:var(--on-dark);
  margin-top:clamp(2.6rem, 6vw, 4rem);
  padding:clamp(2rem, 5vw, 3rem) 0 2rem;
  position:relative;
}
.gfoot::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:14px;
  background:var(--ironbark);
  -webkit-mask:repeating-conic-gradient(from 135deg at 50% 100%, #000 0 25%, transparent 0 50%) 0 0/22px 28px;
  mask:repeating-conic-gradient(from 135deg at 50% 100%, #000 0 25%, transparent 0 50%) 0 0/22px 28px;
  transform:translateY(-14px);
}
.gfoot h3{ font-size:clamp(1.4rem, 1.1rem + 1.6vw, 2rem); margin-bottom:.6rem; }
.gfoot p{ color:var(--on-dark-dim); max-width:56ch; font-size:.97rem; }
.gfoot .facts{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem;
}
.gbtn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.85rem 1.5rem; min-height:48px; border-radius:999px;
  font-family:var(--body); font-weight:800; font-size:.97rem;
  background:var(--blaze); color:var(--on-blaze); border:1.5px solid transparent;
}
.gbtn:hover{ background:var(--blaze-hot); }
.gbtn.ghost{ background:transparent; color:var(--on-dark); border-color:oklch(0.95 0.01 78 / 0.22); }
.gbtn.ghost:hover{ border-color:var(--blaze); }
.gfine{
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid oklch(0.95 0.01 78 / 0.14);
  font-size:.79rem; color:oklch(0.66 0.016 70); max-width:none;
}
.gfine a{ color:oklch(0.72 0.14 50); }

/* ---------- back link ---------- */
.gback{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font:700 .78rem/1 var(--disp); letter-spacing:2px; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.gback:hover{ color:var(--blaze); }

/* ---------- reveals ---------- */
html.js .rv{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.07s } .rv.d2{ transition-delay:.14s } .rv.d3{ transition-delay:.21s }

@media (prefers-reduced-motion:reduce){
  html.js .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ================= tablet ================= */
@media (min-width:700px){
  body{ font-size:16.5px; }
  .cards{ grid-template-columns:repeat(3, 1fr); }
  .cards.two{ grid-template-columns:repeat(2, 1fr); }
  .flow{ grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; }
  .gfoot .facts{ flex-wrap:nowrap; }
}

/* ================= desktop ================= */
@media (min-width:1040px){
  .gtop{ padding-top:1.8rem; }
  .sect > p{ font-size:1.02rem; }
}


/* ================= AUDIT PASS: focus + hit areas ================= */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--blaze); outline-offset:3px; border-radius:6px;
}
.gtop a:focus-visible, .gfoot a:focus-visible{ outline-color:var(--blaze); }

/* WCAG 2.5.8 target size: transparent 44px overlay, zero visual change. */
.gbrand, .gback, .gcard .gwhen{ position:relative; }
.gbrand::after, .gback::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:44px;
}

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


/* ================= SITE NAV (matches the landing page) ================= */
.gnav{
  position:sticky; top:0; z-index:90;
  background:oklch(0.18 0.018 50 / 0.86); backdrop-filter:blur(14px);
  border-bottom:1px solid oklch(0.95 0.01 78 / 0.14);
}
.gnav-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:1080px; margin:0 auto; padding:.7rem var(--pad);
}
.gnav .gbrand{ font-size:1.2rem; min-height:44px; }
.gnav-links{ display:none; gap:1.5rem; align-items:center; }
.gnav-links a{
  position:relative; text-decoration:none; color:var(--on-dark-dim);
  font-weight:600; font-size:.95rem; min-height:44px;
  display:inline-flex; align-items:center; transition:color .25s ease;
}
.gnav-links a::before{
  content:""; position:absolute; left:0; right:0; bottom:11px; height:2px;
  background:var(--blaze); transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.gnav-links a:hover{ color:var(--on-dark); }
.gnav-links a:hover::before{ transform:scaleX(1); transform-origin:left; }
.gnav-links a.here{ color:var(--blaze); }
.gnav-links a.here::before{ transform:scaleX(1); }
.gnav-cta{
  display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap;
  background:var(--blaze); color:var(--on-blaze); font-weight:800; font-size:.88rem;
  padding:.55rem 1.1rem; min-height:44px; border-radius:999px;
  transition:background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.gnav-cta:hover{ background:var(--blaze-hot); transform:translateY(-2px); }
.gtop-row .gback{ color:var(--on-dark-dim); }
.hubtop .gkicker{ display:block; }
@media (min-width:900px){ .gnav-links{ display:flex; } }

/* ================= INTERACTION: hover + motion, matched to the landing page ==== */
.card{ transition:border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.card:hover{
  border-color:oklch(0.70 0.19 45 / 0.42); transform:translateY(-4px);
  box-shadow:0 18px 40px oklch(0.24 0.016 50 / 0.10);
}
.step:hover .num{ transform:scale(1.08) rotate(-4deg); }
.step .num{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.cico{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.card:hover .cico{ transform:translateY(-2px) scale(1.06); }

.dark ul.check li{ transition:transform .3s ease; }
.dark ul.check li:hover{ transform:translateX(4px); }

.tbl tbody tr{ transition:background .25s ease; }
.tbl tbody tr:hover{ background:oklch(0.70 0.19 45 / 0.05); }

.callout{ transition:border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.callout:hover{ border-color:oklch(0.70 0.19 45 / 0.55); transform:translateY(-2px); }

.gbtn{ transition:background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1); }
.gbtn:hover{ transform:translateY(-2px); }

.gfoot a, .gfine a{ transition:color .25s ease; }
.gfine a:hover{ color:var(--blaze); }

/* section headings draw their rule in as they arrive */
.shead{ position:relative; border-top-color:transparent; }
.shead::before{
  content:""; position:absolute; top:-1.5px; left:0; right:0; height:1.5px;
  background:var(--rule); transform:scaleX(0); transform-origin:left;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.shead.in::before, html:not(.js) .shead::before{ transform:scaleX(1); }
.shead .n{ display:inline-block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.shead.in .n{ transform:none; }
html.js .shead:not(.in) .n{ transform:translateY(6px); }

/* ================= print / PDF ================= */
@media print{
  @page{ margin:14mm 12mm; }
  html, body{ background:#fff; font-size:10.5pt; }
  .gbar, .gfoot .facts, .gback, .gnav{ display:none !important; }
  html.js .rv{ opacity:1 !important; transform:none !important; }
  .gtop, .gfoot, .dark{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .gtop{ padding-bottom:2rem; }
  .gtop::after, .gfoot::before{ display:none; }
  .sect{ break-inside:avoid; margin-bottom:1.6rem; }
  .card, .callout, .dark, .flow{ break-inside:avoid; }
  .gtop h1{ font-size:34pt; }
  a{ text-decoration:none; }
}

/* Reading and navigation safeguards */
.gtop h1{overflow-wrap:anywhere}.gnav-row{gap:1rem}.gnav-links{flex-wrap:wrap}
.totop{position:fixed;right:18px;bottom:18px;z-index:90;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--blaze);color:var(--on-blaze);font-size:1.5rem;cursor:pointer;box-shadow:0 3px 15px #0002}.totop[hidden]{display:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--blaze);outline-offset:4px}
@media(max-width:600px){.gnav-links{display:flex!important;font-size:.8rem;gap:.7rem!important}.gnav-row{flex-wrap:wrap}.gnav-cta{font-size:.78rem}.tblwrap{overflow:auto}.gtop h1{font-size:clamp(2.15rem,9vw,4rem);line-height:1.06}}
@media print{.totop{display:none}}

@media(max-width:600px){.gnav-row{display:grid;grid-template-columns:1fr auto}.gnav-links{grid-row:2;grid-column:1/-1;justify-content:flex-start;gap:.7rem!important}.gnav-links a[href$="#approach"],.gnav-links a[href$="#about"]{display:none}.gnav-cta{grid-column:2;grid-row:1}.gbrand{font-size:1.05rem}.gnav{padding-block:.75rem}}

.js .rv{opacity:1!important}.js .rv.in{transform:none}.js .shead{opacity:1!important}