/* AI Basics — one stylesheet, no framework, no web fonts (system stack loads instantly). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

:root{
  --ink:#0B0D10;
  --ink-2:#14181D;
  --ink-3:#1D232B;
  --line:#2A323C;
  --text:#E8ECF1;
  --muted:#9BA6B4;
  --accent:#5B8DEF;
  --radius:14px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1180px;
}

body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

.masthead{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  width:100%;max-width:var(--max);margin:0 auto;padding:22px 24px;
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-weight:800;letter-spacing:-.02em;font-size:1.15rem;text-decoration:none;
}
.wordmark::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-left:7px;vertical-align:middle}
.masthead__note{color:var(--muted);font-size:.86rem}

/* ---------- hero ---------- */
.hero{padding:76px 0 44px}
.hero h1{
  /* Full width by design — no max-width cap, titles never wrap early. */
  font-size:clamp(2.4rem,7.2vw,5.4rem);
  line-height:1.02;letter-spacing:-.035em;font-weight:800;
  margin:0 0 22px;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__lead{font-size:clamp(1.05rem,2.1vw,1.35rem);color:var(--muted);margin:0 0 30px;max-width:none;
  columns:2;column-gap:52px}
@media (max-width:820px){.hero__lead{columns:1}}
.hero__meta{display:flex;gap:26px 40px;flex-wrap:wrap;justify-content:center;text-align:center;
  color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:20px}
.hero__meta b{color:var(--text);font-weight:600}

/* ---------- guide grid ---------- */
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:56px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.section-head h2{font-size:1.5rem;letter-spacing:-.02em;margin:0;font-weight:700}
.section-head p{margin:0;color:var(--muted);font-size:.9rem}

.grid{
  display:grid;gap:18px;padding-bottom:20px;justify-content:center;
  grid-template-columns:repeat(5,minmax(0,1fr));   /* five across = one full-width row */
}
@media (max-width:1180px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

.card{
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover,.card:focus-visible{border-color:var(--card-accent,var(--accent));transform:translateY(-3px)}
.card:focus-visible{outline:2px solid var(--card-accent,var(--accent));outline-offset:3px}
.card__cover{aspect-ratio:16/10;background:var(--ink-3);position:relative;overflow:hidden}
.card__cover img{width:100%;height:100%;object-fit:cover}
.card__body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__title{font-size:1.05rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0}
.card__sub{color:var(--muted);font-size:.87rem;margin:0;flex:1}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.price{font-weight:800;font-size:1.18rem;letter-spacing:-.02em}
.price small{font-weight:500;color:var(--muted);font-size:.72rem;margin-left:5px;letter-spacing:0}
.pill{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill--soon{border-color:var(--card-accent,var(--accent));color:var(--card-accent,var(--accent))}

/* ---------- guide page ---------- */
.guide{padding-top:56px}
.crumb{color:var(--muted);font-size:.86rem;text-decoration:none;display:inline-block;margin-bottom:26px}
.crumb:hover{color:var(--text)}

.guide h1{
  font-size:clamp(2.2rem,6.2vw,4.6rem);line-height:1.03;letter-spacing:-.035em;
  font-weight:800;margin:0 0 18px;
}
.guide__sub{font-size:clamp(1.02rem,2vw,1.24rem);color:var(--muted);margin:0 0 34px;max-width:none}

.guide__split{display:grid;gap:40px;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);align-items:start}
@media (max-width:860px){.guide__split{grid-template-columns:1fr}}

.hook{
  font-size:1.16rem;line-height:1.5;border-left:3px solid var(--accent);
  padding:2px 0 2px 20px;margin:0 0 32px;
}

.block{margin:0 0 30px}
.block h2{font-size:1.02rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:700;margin:0 0 14px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;line-height:1.55}
.ticks li::before{
  content:"";position:absolute;left:0;top:.12em;width:19px;height:19px;border-radius:50%;
  background:color-mix(in srgb, var(--card-accent, var(--accent)) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 42%, transparent);
}
.ticks li::after{
  content:"";position:absolute;left:6px;top:.4em;width:4px;height:8px;
  border-right:2px solid var(--card-accent, var(--accent));
  border-bottom:2px solid var(--card-accent, var(--accent));transform:rotate(42deg);
}
/* The negative list keeps a distinct mark — a tick here would read as a promise. */
.ticks--no li::before{background:transparent;border-color:color-mix(in srgb, var(--muted) 45%, transparent)}
.ticks--no li::after{
  left:6.5px;top:.42em;width:7px;height:7px;transform:none;
  border:0;border-top:2px solid var(--muted);border-right:0;border-bottom:0;
  border-radius:0;
}

.faq{margin:0}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:700;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:12px 0 0}

/* ---------- buy box ---------- */
.buy{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;position:sticky;top:24px;
}
@media (max-width:860px){.buy{position:static}}
.buy__cover{border-radius:10px;overflow:hidden;margin-bottom:20px;background:var(--ink-3)}
.buy__price{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0 0 6px}
.buy__price small{font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:8px}
.buy__format{color:var(--muted);font-size:.88rem;margin:0 0 20px}

.btn{
  display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;
  font:inherit;font-weight:700;font-size:1rem;
  padding:15px 20px;border-radius:10px;border:1px solid transparent;
  background:var(--accent);color:#07090C;
  transition:filter .16s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent)}

.buy__reassure{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;
  color:var(--muted);font-size:.85rem}
.buy__reassure li{padding-left:18px;position:relative}
.buy__reassure li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-size:.8rem}

/* ---------- notify form ---------- */
.notify{margin-top:6px}
.notify label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:8px}
.notify input[type=email]{
  width:100%;font:inherit;padding:13px 14px;border-radius:10px;
  background:var(--ink-3);border:1px solid var(--line);color:var(--text);margin-bottom:10px;
}
.notify input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
/* A honeypot must NEVER depend on its parent's class. This was scoped to
   .notify, so the first form built with a different class showed "Leave this
   empty" and a text box to every visitor. Global, and it stays global. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

.flash{border-radius:10px;padding:13px 16px;margin:0 0 18px;font-size:.92rem;
  background:rgba(91,141,239,.12);border:1px solid var(--accent)}
.flash--bad{background:rgba(232,93,117,.12);border-color:#E85D75}

/* ---------- plain pages ---------- */
/* NEVER use the padding shorthand on anything that also carries .wrap — it
   zeroes the side gutters .wrap provides and the page runs to the screen edge.
   Longhand only. This bit the thank-you page after a real purchase. */
.prose{padding-top:56px;padding-bottom:8px}
/* One left-aligned column at a readable measure. Do NOT centre children
   individually — headings and paragraphs then start at different x positions,
   because 74ch resolves differently at heading and body font sizes. */
.prose__col,.prose > *{max-width:74ch}
.prose h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 24px;font-weight:800}
.prose h2{font-size:1.15rem;margin:36px 0 10px;letter-spacing:-.01em}
.prose p,.prose li{color:var(--muted)}
.prose a{color:var(--accent)}

/* ---------- light mode ---------- */
@media (prefers-color-scheme:light){
  :root{
    --ink:#FBFBFD;--ink-2:#FFFFFF;--ink-3:#F1F3F7;
    --line:#DFE4EC;--text:#0E1116;--muted:#5C6673;
  }
  .btn{color:#fff}
  .footer__small,.footer__small a{color:#8A93A0}
}

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

/* ---------- authority strip ---------- */
.authority{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:start;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;margin:12px 0 8px;
}
@media (max-width:700px){.authority{grid-template-columns:1fr;gap:20px;padding:24px}}
.authority__mark{
  font-size:4.6rem;font-weight:800;letter-spacing:-.05em;line-height:.85;color:var(--accent);
}
.authority__mark span{display:block;font-size:.9rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}
.authority__body h2{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 12px;font-weight:700}
.authority__body p{color:var(--muted);margin:0 0 12px;max-width:none}
.authority__body p:last-child{margin-bottom:0}
.authority__body a{color:var(--accent)}

/* ---------- value grid ---------- */
.valuegrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding-bottom:8px}
.value{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.value h3{margin:0 0 8px;font-size:1.05rem;letter-spacing:-.01em}
.value p{margin:0;color:var(--muted);font-size:.93rem}

.lede{color:var(--muted);margin:0 0 18px;font-size:1.02rem;max-width:none}
.lede a{color:var(--accent)}

/* ---------- guide stats strip ---------- */
.statstrip{
  display:flex;gap:28px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;margin:0 0 34px;
}
.statstrip b{color:var(--text);font-weight:700}

/* ---------- contents list ---------- */
.contents{counter-reset:c;list-style:none;margin:0;padding:0;display:grid;gap:2px}
.contents li{
  counter-increment:c;position:relative;padding:11px 0 11px 46px;
  border-bottom:1px solid var(--line);color:var(--text);font-size:.97rem;
}
.contents li:first-child{border-top:1px solid var(--line)}
.contents li::before{
  content:counter(c,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-size:.78rem;font-weight:700;color:var(--accent);letter-spacing:.04em;
}
.plain{color:var(--muted);margin:0;max-width:none;columns:2;column-gap:44px}
@media (max-width:820px){.plain{columns:1}}

.buy__by{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.82rem;line-height:1.5;
}
.buy__by a{color:var(--accent)}


/* ---------- footer: full-width three-column grid ---------- */
.footer{border-top:1px solid var(--line);margin-top:80px;padding:44px 0 64px}
.footer__grid{
  width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(150px,.5fr) minmax(0,1.5fr);
  gap:48px;align-items:start;
}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer__by{grid-column:1 / -1}}
@media (max-width:600px){.footer__grid{grid-template-columns:1fr;gap:30px}}

.footer__brand{font-weight:800;letter-spacing:-.02em;margin:0 0 10px;font-size:1.1rem}
.footer__line{color:var(--muted);font-size:.9rem;margin:0}
.footer__coltitle{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);font-weight:700;margin:0 0 12px}
.footer__nav{display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.footer__nav a{color:var(--muted);text-decoration:none}
.footer__nav a:hover{color:var(--text)}

.footer__by{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:600px){.footer__by{grid-template-columns:1fr;gap:14px}}
.footer__by-mark img{width:55px;height:auto;display:block}
.footer__by-text p{margin:0 0 10px;color:var(--muted);font-size:.9rem}
.footer__by-lead{font-size:1.05rem!important;color:var(--text)!important;margin-bottom:12px!important}
.footer__by-lead strong{font-weight:800}
.footer__by-small{font-size:.82rem!important;color:#66707D!important}
.footer__by-text a{color:var(--accent)}
@media (prefers-color-scheme:light){.footer__by-small{color:#8A93A0!important}}

/* ---------- bundle offer ---------- */
.bundle{
  width:100%;border:1px solid var(--accent);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(91,141,239,.10),transparent 60%),var(--ink-2);
  padding:36px;margin:14px 0 8px;
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr);gap:40px;align-items:center;
}
@media (max-width:820px){.bundle{grid-template-columns:1fr;gap:26px;padding:26px}}
.bundle h2{font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.03em;line-height:1.08;
  margin:0 0 14px;font-weight:800}
.bundle p{color:var(--muted);margin:0 0 16px;font-size:1rem}
.bundle__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 26px;font-size:.92rem}
.bundle__list li{position:relative;padding-left:28px;color:var(--text);line-height:1.5}
.bundle__list li::before{
  content:"";position:absolute;left:0;top:.1em;width:18px;height:18px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.bundle__list li::after{
  content:"";position:absolute;left:5.5px;top:.36em;width:4px;height:8px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(42deg);
}
.bundle__buy{text-align:center}
.bundle__was{color:var(--muted);text-decoration:line-through;font-size:1.05rem}
.bundle__now{font-size:3.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin:4px 0 2px}
.bundle__save{color:var(--accent);font-weight:700;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 18px}
.bundle__note{color:var(--muted);font-size:.8rem;margin:12px 0 0}

/* Five-across cards are narrow — stop the price/pill row wrapping mid-word. */
.card__foot{flex-wrap:wrap;row-gap:8px}
.price{white-space:nowrap}
.price small{white-space:nowrap}
.pill{white-space:nowrap;font-size:.65rem;padding:4px 9px;letter-spacing:.07em}
@media (min-width:1181px){
  .card__foot{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- alternating guide rows ---------- */
.growlist{display:grid;gap:0}

.grow{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;align-items:start;
  padding:52px 0;border-bottom:1px solid var(--line);
}
.grow:first-child{border-top:1px solid var(--line)}

/* Flip every other row: cover moves to the right. */
.grow:nth-child(even) .grow__cover{order:2}
.grow:nth-child(even) .grow__body{order:1}

@media (max-width:900px){
  .grow{grid-template-columns:1fr;gap:26px;padding:38px 0}
  .grow__cover{position:static}
  .grow:nth-child(even) .grow__cover{order:0}
  .grow:nth-child(even) .grow__body{order:0}
}

.grow__cover{
  display:block;border-radius:var(--radius);overflow:hidden;position:sticky;top:28px;
  border:1px solid var(--line);background:var(--ink-3);
  transition:border-color .2s ease,transform .2s ease;
}
.grow__cover:hover{border-color:var(--card-accent);transform:translateY(-3px)}
.grow__cover img{width:100%;height:auto;display:block}

.grow__num{
  font-size:.78rem;font-weight:800;letter-spacing:.18em;color:var(--card-accent);
  margin:0 0 12px;
}
.grow__title{margin:0 0 10px;font-size:clamp(1.5rem,2.8vw,2.15rem);
  letter-spacing:-.028em;line-height:1.1;font-weight:800}
.grow__title a{text-decoration:none}
.grow__title a:hover{color:var(--card-accent)}
.grow__sub{margin:0 0 16px;color:var(--muted);font-size:1.02rem}
.grow__hook{
  margin:0 0 20px;font-size:1.02rem;line-height:1.5;
  border-left:3px solid var(--card-accent);padding-left:16px;
}
.grow__ticks{margin:0 0 18px}

.grow__who{margin:0 0 18px;color:var(--muted);font-size:.88rem}
.grow__who strong{color:var(--text);font-weight:600}

.grow__meta{
  display:flex;gap:22px;flex-wrap:wrap;font-size:.84rem;color:var(--muted);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin:0 0 20px;
}
.grow__meta b{color:var(--text);font-weight:700}

/* Price and CTA centred under the row content. */
.grow__foot{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center}
.grow__price{font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.grow__price small{font-size:.7rem;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0}
.btn--inline{
  display:inline-block;width:auto;padding:12px 22px;font-size:.94rem;
  background:var(--card-accent);color:#07090C;
}
@media (prefers-color-scheme:light){.btn--inline{color:#fff}}

/* ---------- equal-height rows ----------
   The cover panel stretches to the full height of the content column, and every
   row shares a floor height, so the whole list reads as one tidy rhythm.
   The artwork is letterboxed inside the panel rather than cropped — object-fit:
   cover would slice the title off the top of the SVG. */
.grow{align-items:stretch;min-height:520px}

.grow__cover{
  position:static;               /* sticky fights stretch */
  height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#0C1015;
  padding:26px;
}
.grow__cover img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:8px}

/* Content column: footer pinned to the bottom so every row's price/CTA lines up. */
.grow__body{display:flex;flex-direction:column;height:100%}
.grow__foot{margin-top:auto;padding-top:22px}
.grow__body > .offer{margin-top:22px}

/* Keep the "written for" line from swinging the row height about. */
.grow__who{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:900px){
  .grow{min-height:0;align-items:start}
  .grow__cover{height:auto;padding:0}
  .grow__body{height:auto}
  .grow__foot{margin-top:18px}
  .grow__who{-webkit-line-clamp:none;display:block;overflow:visible}
}

/* ---------- funnel: problem / fix labels in each row ---------- */
.grow__label{
  margin:0 0 6px;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.grow__problem{
  margin:0 0 18px;font-size:1.08rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;
}

/* ---------- funnel: price anchor ---------- */
.anchor{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ink-2);
}
.anchor__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  padding:18px 24px;border-bottom:1px solid var(--line);
}
.anchor__row:last-child{border-bottom:0}
.anchor__what{color:var(--muted);font-size:.98rem}
.anchor__cost{color:var(--muted);font-weight:700;font-size:1.05rem;white-space:nowrap}
.anchor__cost small{font-weight:500;font-size:.78rem}
.anchor__row--us{background:rgba(91,141,239,.10);border-top:1px solid var(--accent)}
.anchor__row--us .anchor__what{color:var(--text)}
.anchor__cost--us{color:var(--accent);font-size:2rem;font-weight:800;letter-spacing:-.03em}

/* ---------- funnel: home FAQ + last call ---------- */
.faq--home{margin-bottom:8px}
.faq--home summary{font-size:1.02rem}

.lastcall{
  text-align:center;padding:64px 24px;margin-top:64px;
  border-top:1px solid var(--line);
}
.lastcall h2{font-size:clamp(1.8rem,4.4vw,3rem);letter-spacing:-.035em;margin:0 0 14px;font-weight:800}
.lastcall p{color:var(--muted);margin:0 auto 26px;max-width:60ch}
.lastcall__links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.lastcall__links .btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}

/* ================= cinematic hero ================= */
.chero{
  position:relative;isolation:isolate;
  min-height:min(78vh,720px);
  display:flex;align-items:flex-end;
  background:#080A0D;overflow:hidden;
}
.chero__img{position:absolute;inset:0;z-index:-2;display:block}
.chero__img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.chero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top, rgba(6,8,11,.96) 0%, rgba(6,8,11,.82) 34%, rgba(6,8,11,.40) 68%, rgba(6,8,11,.30) 100%),
    linear-gradient(to right, rgba(6,8,11,.80) 0%, rgba(6,8,11,.25) 62%, transparent 100%);
}
.chero__inner{
  width:100%;max-width:var(--max);margin:0 auto;padding:64px 24px 54px;color:#F4F7FA;
}
.chero__eyebrow{
  margin:0 0 20px;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#8FB4F5;
}
.chero h1{
  margin:0 0 20px;font-weight:800;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(2.1rem,6.4vw,4.9rem);
}
.chero h1 em{font-style:normal;color:#7FA6F2}
.chero__lead{
  margin:0 0 30px;max-width:56ch;font-size:clamp(1rem,1.7vw,1.22rem);
  color:#C7D2E0;line-height:1.55;
}
.chero__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0}
.chero__price{color:#C7D2E0;font-size:.95rem}
.chero__price b{color:#fff;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}

@media (max-width:700px){
  .chero{min-height:0;padding-top:150px}
  .chero__img img{object-position:center 35%}
  .chero__inner{padding:0 20px 40px}
  .chero h1 br{display:none}
}

/* Meta strip now sits on its own under the hero. */
.hero__meta--solo{border-top:0;border-bottom:1px solid var(--line);padding:22px 0 24px;margin-bottom:8px}

/* ================= photo bands ================= */
.band{margin:56px 0 8px}
.band > picture img{
  width:100%;height:clamp(180px,26vw,340px);object-fit:cover;object-position:center 45%;
  border-radius:var(--radius);display:block;
}
.band figcaption{
  margin-top:14px;color:var(--muted);font-size:.9rem;max-width:70ch;
}

.authority--photo{grid-template-columns:auto minmax(0,1fr);position:relative;overflow:hidden}
.authority__photo{grid-column:1 / -1;display:block;margin:-32px -32px 26px}
.authority__photo img{width:100%;height:clamp(140px,18vw,220px);object-fit:cover;object-position:center 40%;display:block}
@media (max-width:700px){.authority__photo{margin:-24px -24px 20px}}

/* ================= mobile pass ================= */
@media (max-width:1180px){
  .problems{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .masthead{padding:18px 20px}
  .masthead__note{display:none}
  .section-head{margin:40px 0 18px}
  .section-head h2{font-size:1.28rem}
  .problems{grid-template-columns:1fr;gap:12px}
  .problem{padding:18px}
  .anchor__row{padding:14px 16px;gap:8px}
  .anchor__cost--us{font-size:1.6rem}
  .bundle{padding:22px}
  .bundle__now{font-size:2.8rem}
  .authority{padding:24px}
  .authority__mark{font-size:3.2rem}
  .lastcall{padding:44px 0}
  .lastcall__links{flex-direction:column}
  .lastcall__links .btn{width:100%}
  .grow__title{font-size:1.35rem}
  .hero__meta{gap:12px 20px;font-size:.82rem}
  .growlist .grow{padding:32px 0}
}
/* Nothing may cause a sideways scroll on a phone.
   MUST be `clip`, not `hidden`: overflow-x:hidden on html/body turns them into a
   scroll container, which silently disables position:sticky on every descendant
   — that is what blanked the pinned questions section. `clip` crops without
   creating a scroll container, so sticky keeps working. */
html,body{max-width:100%;overflow-x:clip}

/* --card-accent is only defined on guide rows/tiles; everywhere else the button
   must still have a background. Without the fallback it renders as bare text. */
.btn--inline{background:var(--card-accent,var(--accent))}
.chero .btn--inline{background:var(--accent);color:#07090C}
.chero .btn--inline:hover{filter:brightness(1.1)}

/* Five problem tiles: one full-width row on desktop, no orphan. */
@media (min-width:1181px){ .problems{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:821px) and (max-width:1180px){ .problems{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:641px) and (max-width:820px){ .problems{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ================= proof: we run on it ================= */
.practice{
  margin:56px 0 8px;padding:44px;border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(91,141,239,.13), transparent 62%),
    var(--ink-2);
}
@media (max-width:640px){.practice{padding:26px 22px}}

.practice__eyebrow{
  margin:0 0 12px;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.practice__head h2{
  margin:0 0 16px;font-weight:800;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(1.7rem,4.2vw,2.9rem);
}
.practice__lead{margin:0 0 34px;color:var(--muted);font-size:1.04rem;line-height:1.6}

.practice__grid{
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  padding-top:28px;border-top:1px solid var(--line);
}
.practice__item h3{
  margin:0 0 8px;font-size:1.04rem;letter-spacing:-.015em;
  padding-left:16px;position:relative;
}
.practice__item h3::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:var(--accent);
}
.practice__item p{margin:0;color:var(--muted);font-size:.93rem;padding-left:16px}

.practice__close{
  margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-size:1.06rem;line-height:1.55;
}

/* ================= layout corrections ================= */

/* 1 + 6. Kill doubled rules. A .section-head already draws a line underneath,
   so whatever follows must not draw its own on top. */
.grow:first-child{border-top:0}
.faq details:first-of-type{border-top:0}
.section-head + .statstrip,
.section-head + .anchor{border-top:0}
.hero__meta--solo{border-bottom:0}

/* 2. Centre the per-guide meta strip, in the rows and on guide pages. */
.grow__meta,
.statstrip{justify-content:center;text-align:center}

/* 3. Breathing room around the closing line before the bundle. */
.lede{margin:26px 0 34px}
.bundle{margin:34px 0 12px}

/* 4. Bundle: give the buy side a real panel and centre the price stack. */
.bundle{grid-template-columns:minmax(0,1.5fr) minmax(260px,.85fr);gap:44px;align-items:center}
.bundle__buy{
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;
  padding:28px 24px;text-align:center;
}
.bundle__was{margin:0;line-height:1}
.bundle__now{margin:6px 0 4px;line-height:1}
.bundle__save{margin:0 0 20px}
.bundle__list{gap:10px 30px;margin-top:20px}
@media (max-width:820px){.bundle{grid-template-columns:1fr;gap:24px}}

/* 5. The 30 has to carry the section — much bigger, YEARS centred beneath. */
.authority{grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:40px;align-items:center}
.authority__mark{text-align:center;line-height:1}
.authority__mark b{
  display:block;font-weight:800;letter-spacing:-.06em;color:var(--accent);
  font-size:clamp(5rem,11vw,9rem);line-height:.82;
}
.authority__mark span{
  display:block;margin-top:10px;font-size:.82rem;font-weight:800;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);text-indent:.34em;
}
@media (max-width:700px){
  .authority{grid-template-columns:1fr;gap:22px;text-align:left}
  .authority__mark{text-align:left}
  .authority__mark b{font-size:4.4rem}
  .authority__mark span{text-align:left}
}

/* 7. No rule above the closing call to action. */
.lastcall{border-top:0;margin-top:40px}

/* ================= footer, tidied ================= */
.footer{border-top:1px solid var(--line);margin-top:72px;padding:48px 0 0}
.footer__grid{
  width:100%;max-width:var(--max);margin:0 auto;padding:0 24px 44px;
  display:grid;gap:40px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,1.25fr);
  align-items:start;
}
@media (max-width:980px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr;gap:28px}}

.footer__brand{
  font-weight:800;letter-spacing:-.025em;margin:0 0 10px;font-size:1.2rem;
  display:flex;align-items:center;gap:7px;
}
.footer__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.footer__line{color:var(--muted);font-size:.9rem;margin:0;line-height:1.6}

.footer__coltitle{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  font-weight:800;margin:0 0 14px;
}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer__list a{color:var(--muted);text-decoration:none;font-size:.89rem;line-height:1.4}
.footer__list a:hover{color:var(--text)}

.footer__by{display:block}
.footer__by-mark{display:block;margin-bottom:14px}
.footer__by-mark img{width:46px;height:auto;display:block}
.footer__by-lead{margin:0 0 8px;font-size:1rem;color:var(--text)}
.footer__by-lead strong{font-weight:800;letter-spacing:.01em}
.footer__by-text{margin:0;color:var(--muted);font-size:.87rem;line-height:1.6}
.footer__by-text a{color:var(--accent)}

.footer__base{
  border-top:1px solid var(--line);
  width:100%;max-width:var(--max);margin:0 auto;padding:20px 24px 40px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer__base p{margin:0;color:#66707D;font-size:.8rem}
@media (prefers-color-scheme:light){.footer__base p{color:#8A93A0}}
@media (max-width:560px){.footer__base{flex-direction:column;gap:8px}}

/* The band caption runs the full width, like every other section. */
.band figcaption{max-width:none}

/* ================= posts ================= */
.posts{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:8px}
@media (max-width:900px){.posts{grid-template-columns:1fr}}

.post{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--card-accent);
  border-radius:var(--radius);padding:26px 24px;
  transition:transform .18s ease,border-color .18s ease;
}
.post:hover{transform:translateY(-3px);border-color:var(--card-accent);border-top-color:var(--card-accent)}
.post__date{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.post__title{margin:0;font-size:1.2rem;line-height:1.28;letter-spacing:-.018em;font-weight:800}
.post__excerpt{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.post__go{color:var(--card-accent);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em}

/* ================= post page ================= */
.postpage{padding-top:56px}
.postpage__date{margin:0 0 12px;font-size:.76rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--card-accent)}
.postpage h1{font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.05;letter-spacing:-.035em;
  font-weight:800;margin:0 0 18px}
.postpage__standfirst{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);
  margin:0 0 34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.postpage__body{max-width:78ch}
.postpage__body h2{font-size:1.35rem;letter-spacing:-.02em;margin:34px 0 12px;font-weight:800}
.postpage__body p{margin:0 0 16px;font-size:1.04rem;line-height:1.72;color:var(--muted)}
.postpage__body strong{color:var(--text);font-weight:700}

.postcta{
  margin:48px 0 0;padding:30px;border-radius:var(--radius);
  border:1px solid var(--card-accent);
  background:linear-gradient(135deg,rgba(91,141,239,.09),transparent 62%),var(--ink-2);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
}
@media (max-width:700px){.postcta{grid-template-columns:1fr;gap:18px}}
.postcta__label{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--card-accent)}
.postcta h2{margin:0 0 8px;font-size:1.5rem;letter-spacing:-.025em;font-weight:800}
.postcta p{margin:0;color:var(--muted);font-size:.95rem}
.postcta__buy{text-align:center;display:grid;gap:12px;justify-items:center}
.postcta__price{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1}

/* ================= crossfading image stacks =================
   Pure CSS, no JavaScript. Slide i is lit for its own 1/N of the cycle; PHP
   emits a concrete animation-delay of i x (cycle / N) so the windows tile.

   Two things that are easy to get wrong and were:
   - the keyframe MUST start and end at opacity 0, otherwise every slide still
     waiting its turn renders its 0% frame and they all stack up opaque;
   - fill-mode must stay unset for the same reason.
   The fade-out of one slide overlaps the fade-in of the next, so there is never
   a blank frame after the first half-second. */

.slides{position:relative;isolation:isolate;background:#0C1015}
.slides__item{
  position:absolute;inset:0;display:block;opacity:0;
  animation-duration:42s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  animation-name:slideFade6;
}
.slides__item img{width:100%;height:100%;object-fit:cover;display:block}

/* 6 slides — each owns 16.67% of the loop. */
@keyframes slideFade6{
  0%     {opacity:0}
  2%     {opacity:1}
  16.67% {opacity:1}
  19%    {opacity:0}
  100%   {opacity:0}
}
/* 5 slides — 20% each. */
@keyframes slideFade5{
  0%   {opacity:0}
  2%   {opacity:1}
  20%  {opacity:1}
  23%  {opacity:0}
  100% {opacity:0}
}

.chero__img .slides__item img{object-position:center 40%}

.band__stack{
  height:clamp(180px,26vw,340px);border-radius:var(--radius);overflow:hidden;
}
.band__stack .slides__item{animation-duration:35s;animation-name:slideFade5}
.band__stack .slides__item img{object-position:center 45%}

/* One still image for anyone who has asked their machine to stop moving things. */
@media (prefers-reduced-motion:reduce){
  .slides__item{animation:none;opacity:0}
  .slides__item:first-child{opacity:1}
}

/* .slides sets position:relative, which later in the cascade beat the hero's
   own position:absolute and collapsed the image layer to 0x0 — no hero image
   at any width. Restate it after the slides block so it wins. */
.chero__img{position:absolute;inset:0;z-index:-2;display:block}
.chero__img .slides__item{position:absolute;inset:0}

/* ================= mobile padding, consistently =================
   Every page-level container uses the same gutter, and the vertical rhythm is
   scaled down so sections don't sit in acres of space on a phone. */
@media (max-width:640px){
  .wrap,
  .footer__grid,
  .footer__base,
  .chero__inner{padding-left:20px;padding-right:20px}

  /* Page tops: the old desktop values left too much dead space above the title. */
  .guide,
  .postpage{padding-top:30px}
  /* Longhand ONLY — .prose also carries .wrap, and the shorthand was zeroing
     the side gutters, so terms/privacy/404/unsubscribe ran to the screen edge
     on anything between 381px and 640px wide. This is the third time the
     shorthand has done this; see the warning at the top of the file. */
  .prose{padding-top:34px;padding-bottom:8px}

  /* Panels: consistent inner padding rather than three different values. */
  .practice,
  .bundle,
  .authority,
  .postcta,
  .anchor__row,
  .value,
  .problem,
  .post,
  .buy{padding:20px}
  .anchor__row{padding:14px 18px}

  /* Vertical rhythm. */
  .hero{padding:40px 0 26px}
  .chero__inner{padding-top:0;padding-bottom:34px}
  .growlist .grow{padding:28px 0}
  .band{margin:34px 0 4px}
  .practice{margin:34px 0 4px}
  .bundle{margin:26px 0 8px}
  .footer{margin-top:48px;padding-top:34px}
  .footer__grid{padding-bottom:30px}
  .footer__base{padding-top:16px;padding-bottom:30px}

  /* Type that was still sized for a laptop. */
  .postpage__body p,
  .lede{font-size:.98rem}
  .postcta h2{font-size:1.25rem}
  .practice__head h2{font-size:1.55rem}
  .lastcall h2{font-size:1.75rem}

  /* Sticky buy box has no business being sticky on a phone. */
  .buy{position:static}
}

/* Very narrow phones. */
@media (max-width:380px){
  .wrap,.footer__grid,.footer__base,.chero__inner{padding-left:16px;padding-right:16px}
  .hero__meta{gap:10px 16px}
}

/* ================= posts: full width + imagery ================= */

/* Body was capped at 78ch, which left the article hugging the left. Runs the
   full column now, in two columns on wide screens so the measure stays readable
   while the section genuinely fills the width. */
/* One column, always. Two columns made readers jump back up the page, which is
   wrong for an article. The hero image and headings still run the full width;
   the text sits in a centred column at a comfortable measure. */
.postpage__body{max-width:74ch;margin:0 auto;columns:auto}
.postpage__body h2{margin:38px 0 14px}
.postpage__body h2:first-child{margin-top:0}
.postpage__standfirst{max-width:74ch;margin-left:auto;margin-right:auto}
.postpage__date,.postpage h1{max-width:74ch;margin-left:auto;margin-right:auto}

.postpage__standfirst{max-width:none}

.postpage__hero{margin:0 0 36px}
.postpage__hero img{
  width:100%;height:clamp(200px,32vw,420px);object-fit:cover;object-position:center 42%;
  border-radius:var(--radius);display:block;
}

/* Card thumbnails on the home page. */
.post{padding:0;overflow:hidden}
.post__thumb{display:block;background:var(--ink-3)}
.post__thumb img{width:100%;height:160px;object-fit:cover;display:block}
.post__date,.post__title,.post__excerpt,.post__go{padding-left:22px;padding-right:22px}
.post__date{padding-top:20px}
.post__go{padding-bottom:22px}

@media (max-width:640px){
  .post{padding:0}
  .post__date,.post__title,.post__excerpt,.post__go{padding-left:18px;padding-right:18px}
  .postpage__hero{margin-bottom:26px}
}

/* ================= "Which of these is you?" — pinned fade-through =================
   Default (no JS, reduced motion, short screens) is a plain readable list.
   site.js adds .is-live to opt in to the pinned behaviour. */

.pinwrap{position:relative}

.stmt{
  padding:30px 0;border-top:1px solid var(--line);
}
.stmt__n{
  margin:0 0 14px;font-size:.74rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--card-accent);
}
.stmt__n span{color:var(--muted);margin-left:8px;letter-spacing:.1em}
.stmt__quote{
  margin:0 0 16px;font-weight:800;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
}
.stmt__symptom{
  margin:0 0 20px;color:var(--muted);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.5;
}
.stmt__go{
  display:inline-block;color:var(--card-accent);text-decoration:none;font-size:.95rem;
  border-bottom:1px solid transparent;
}
.stmt__go strong{font-weight:700}
.stmt__go:hover{border-bottom-color:var(--card-accent)}

.pindots{display:none}

/* ---- pinned mode ---- */
.pinwrap.is-live .pinsticky{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.pinwrap.is-live .pinstage{position:relative;width:100%;min-height:58vh}

.pinwrap.is-live .stmt{
  position:absolute;inset:0;padding:0;border-top:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:0;transform:translateY(30px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);
}
.pinwrap.is-live .stmt.on{opacity:1;transform:none;pointer-events:auto}

.pinwrap.is-live .stmt__quote{
  font-size:clamp(2.1rem,6vw,4.6rem);max-width:19ch;margin-bottom:22px;
}
.pinwrap.is-live .stmt__symptom{max-width:52ch;margin-bottom:26px}

.pinwrap.is-live .pindots{
  display:flex;gap:14px;align-items:center;justify-content:center;
  padding-top:34px;
}
.pinwrap.is-live .pindots span{
  width:8px;height:8px;border-radius:50%;background:transparent;
  border:1px solid var(--muted);transition:transform .3s,background .3s,border-color .3s;
}
.pinwrap.is-live .pindots span.on{
  background:var(--accent);border-color:var(--accent);transform:scale(1.45);
}

@media (max-width:640px){
  .pinwrap.is-live .pinstage{min-height:64vh}
  .pinwrap.is-live .stmt__quote{font-size:clamp(1.7rem,7.4vw,2.4rem);max-width:none}
  .pinwrap.is-live .stmt__symptom{font-size:1rem}
  .stmt{padding:24px 0}
}

/* ================= touch targets =================
   Navigation and standalone links need a comfortable target on a phone.
   WCAG 2.2 sets the floor at 24px; Apple and Google both recommend ~44px.
   Links sitting inside a sentence are explicitly exempt and are left alone —
   padding those would wreck the line spacing of the prose. */
@media (max-width:768px){
  .footer__list a,
  .footer__nav a{
    display:inline-block;
    padding:10px 0;
    min-height:44px;
    line-height:24px;
  }
  .footer__list{gap:0}

  .wordmark{display:inline-block;padding:8px 0;min-height:44px;line-height:28px}

  .stmt__go,
  .post__go,
  .crumb{
    display:inline-block;
    padding:12px 0;
    min-height:44px;
    line-height:20px;
  }

  .footer__by-text a,
  .footer__base a{display:inline-block;padding:6px 0;min-height:32px}

  /* Buttons are already generous, but make it explicit. */
  .btn,.btn--inline{min-height:48px}
}

/* ================= "talk to us" ================= */
.help{
  margin:56px 0 8px;border-radius:var(--radius);
  border:1px solid var(--accent);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(91,141,239,.16), transparent 58%),
    var(--ink-2);
  padding:44px;
}
.help__inner{max-width:none}
.help__eyebrow{
  margin:0 0 12px;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.help h2{
  margin:0 0 18px;font-weight:800;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(1.7rem,4.2vw,2.9rem);
}
.help__lead{margin:0 0 16px;color:var(--muted);font-size:1.04rem;line-height:1.62;max-width:none}
.help__lead strong{color:var(--text)}
.help__lead em{font-style:italic}

.help__list{
  list-style:none;margin:24px 0 28px;padding:0;
  display:grid;gap:10px 30px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.help__list li{position:relative;padding-left:30px;color:var(--text);font-size:.95rem;line-height:1.5}
/* A ticked circle rather than a dash — these are "this is you" statements, so
   a tick reads as recognition rather than a bullet. */
.help__list li::before{
  content:"";position:absolute;left:0;top:.15em;width:19px;height:19px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.help__list li::after{
  content:"";position:absolute;left:6px;top:.42em;width:4px;height:8px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(42deg);
}

/* Button and reassurance line centred together under the list. */
.help__actions{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line);text-align:center;
}
.help__actions .btn{min-width:260px}
.help__mail{color:var(--accent);font-size:.95rem}
.help__note{margin:0;color:var(--muted);font-size:.88rem}

@media (max-width:640px){
  .help{padding:26px 22px;margin:34px 0 4px}
  .help__actions{align-items:stretch;flex-direction:column;gap:14px}
  .help__actions .btn{width:100%}
  .help__mail{padding:10px 0;min-height:44px;display:inline-block}
}

/* ================= checkout ================= */
.checkout{padding-top:56px}
.checkout > *{max-width:760px;margin-left:auto;margin-right:auto}
.checkout h1{font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-.03em;margin:0 0 10px;font-weight:800}
.checkout__item{margin:0 0 28px;color:var(--muted);font-size:1.05rem}
.checkout__item strong{color:var(--text)}
.checkout__frame{min-height:520px}
.checkout__reassure{list-style:none;margin:30px 0 0;padding:24px 0 0;border-top:1px solid var(--line);
  display:grid;gap:9px;color:var(--muted);font-size:.88rem}
.checkout__reassure li{padding-left:20px;position:relative}
.checkout__reassure li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-size:.8rem}

/* download list on the thank-you page */
.dl{display:grid;gap:12px;margin:26px 0 8px}
.dl__item{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);background:var(--ink-2);text-decoration:none;
  transition:border-color .18s ease,transform .18s ease;
}
.dl__item:hover{border-color:var(--accent);transform:translateY(-2px)}
.dl__name{font-weight:700;letter-spacing:-.01em}
.dl__meta{color:var(--accent);font-size:.85rem;font-weight:700;white-space:nowrap}
@media (max-width:640px){.checkout{padding-top:30px}.dl__item{padding:16px 18px}}

/* The post-purchase download list sits in the same measure as the prose. */
.prose .dl{max-width:74ch}
.prose .dl__item{max-width:none}
@media (max-width:640px){
  .prose{padding-top:34px}
}

/* Help block runs the full width like every other section. The two lead
   paragraphs sit side by side on wide screens so the text fills the space
   rather than stretching into one very long measure. */
.help__inner{max-width:none}
.help__leads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 48px}
@media (max-width:820px){.help__leads{grid-template-columns:1fr;gap:14px}}
.help__list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 40px}

/* Home page guide rows: the meta strip and the price/CTA row both centre. */
.grow__foot{justify-content:center}
.grow__meta{justify-content:center}
@media (max-width:900px){
  .grow__foot{justify-content:flex-start}
  .grow__meta{justify-content:flex-start;text-align:left}
}

/* ================= the offer block =================
   Ends every guide row. Reads as a proper offer rather than a price with a
   button next to it: big number, what you get, one strong action, and the
   bundle as the cheaper-per-guide alternative sitting right underneath. */
.offer{
  margin-top:auto;
  padding:26px 28px 24px;
  border:1px solid var(--line);
  border-top:3px solid var(--card-accent);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--card-accent) 12%, transparent), transparent 62%),
    var(--ink-2);
  text-align:center;
}

.offer__price{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-bottom:16px}
.offer__amount{
  font-size:clamp(2.6rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;
}
.offer__unit{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

.offer__points{
  list-style:none;margin:0 0 22px;padding:0;
  display:inline-grid;gap:7px;text-align:left;
}
.offer__points li{
  position:relative;padding-left:24px;font-size:.9rem;color:var(--muted);
}
.offer__points li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--card-accent);font-size:.82rem;font-weight:800;
}

.offer__cta{
  display:block;width:100%;max-width:340px;margin:0 auto;
  background:var(--card-accent);color:#07090C;
  font-size:1.02rem;padding:15px 22px;
  box-shadow:0 6px 20px -8px color-mix(in srgb, var(--card-accent) 70%, transparent);
}
.offer__cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
@media (prefers-color-scheme:light){.offer__cta{color:#fff}}

.offer__alt{margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.offer__alt a{color:var(--card-accent);font-weight:700}

@media (max-width:640px){
  .offer{padding:22px 20px}
  .offer__cta{max-width:none}
}

@media (max-width:640px){
  .help__actions{margin-top:26px;padding-top:22px}
  .help__actions .btn{width:100%;min-width:0}
}

/* ---------------------------------------------------------------------------
   The bundle offer, turned up.
   This is the one place on the page where somebody spends four times as much,
   so it should look like a price tag rather than a paragraph: the number is the
   biggest thing in the panel, the saving is a badge and not a caption, and the
   button is unmissable. Appended after the earlier rules so it wins outright.
   --------------------------------------------------------------------------- */
.bundle__buy{
  background:var(--ink-2);
  border:2px solid var(--accent);
  border-radius:16px;
  padding-top:26px;padding-bottom:26px;padding-left:22px;padding-right:22px;
  text-align:center;
  box-shadow:0 18px 44px -22px color-mix(in srgb, var(--accent) 70%, transparent);
}
.bundle__eyebrow{
  display:inline-block;margin:0 0 14px;
  padding-top:5px;padding-bottom:5px;padding-left:12px;padding-right:12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:var(--accent);
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
/* Struck-through and real price on one baseline — the contrast IS the message. */
.bundle__price{
  display:flex;align-items:baseline;justify-content:center;gap:14px;
  margin:0 0 12px;flex-wrap:wrap;
}
.bundle__was{
  color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;
  font-size:1.5rem;font-weight:600;margin:0;
}
.bundle__now{
  font-size:clamp(3.8rem,9vw,5.2rem);font-weight:800;letter-spacing:-.05em;
  line-height:.9;margin:0;
}
.bundle__save{
  display:inline-block;margin:0 0 22px;
  padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;
  border-radius:999px;
  background:var(--accent);color:#07090C;
  font-size:.86rem;font-weight:800;letter-spacing:.02em;text-transform:none;
}
.btn--big{
  font-size:1.15rem;
  padding-top:19px;padding-bottom:19px;padding-left:22px;padding-right:22px;
  border-radius:12px;letter-spacing:-.01em;
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--accent) 85%, transparent);
}
.bundle__note{margin-top:14px}

@media (max-width:520px){
  .bundle__now{font-size:3.6rem}
  .bundle__was{font-size:1.3rem}
  .bundle__save{font-size:.8rem}
  .btn--big{font-size:1.05rem}
}

/* `.bundle p` is muted, and .bundle__price is a <p> — so the big number was
   inheriting grey. It is the loudest thing in the panel; it gets full contrast. */
.bundle__now{color:var(--text)}

/* The site flips to a light palette below, and .btn switches to white text
   there. The save pill sits on the same accent, so it has to make the same
   switch — otherwise one pill reads dark and the one under it reads white. */
@media (prefers-color-scheme:light){
  .bundle__save{color:#fff}
}

/* `.bundle p{color:var(--muted)}` is (0,1,1) and beat the (0,1,0) class rules
   above, which is why the two pills came out grey however loudly they were
   styled. Matching the element as well takes the specificity back. */
.bundle p.bundle__eyebrow{color:var(--accent)}
.bundle p.bundle__save{color:#07090C}
@media (prefers-color-scheme:light){
  .bundle p.bundle__save{color:#fff}
}

/* ---------------------------------------------------------------------------
   ONE PRICE TREATMENT, USED EVERYWHERE.
   The bundle panel, the per-guide offer on the home page and the buy panel on
   a guide page are the same thing in three places, so they now share a look:
   accent border, eyebrow pill, oversized number, unmissable button. A visitor
   should recognise "this is the bit where you buy" without reading a word.
   --------------------------------------------------------------------------- */

/* --- guide page: the buy panel -------------------------------------------- */
.buy{
  border:2px solid var(--accent);
  border-radius:16px;
  padding-top:26px;padding-bottom:26px;padding-left:24px;padding-right:24px;
  box-shadow:0 18px 44px -24px color-mix(in srgb, var(--accent) 70%, transparent);
  text-align:center;
}
.buy__cover{margin-bottom:22px}
.buy__eyebrow{
  display:inline-block;margin:0 0 12px;
  padding-top:5px;padding-bottom:5px;padding-left:12px;padding-right:12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:var(--accent);
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.buy__price{
  font-size:clamp(3.4rem,7vw,4.4rem);font-weight:800;letter-spacing:-.05em;
  line-height:.92;margin:0 0 8px;color:var(--text);
}
.buy__format{margin-bottom:22px}
/* The reassurance list reads better left-aligned inside a centred panel. */
.buy__reassure{display:inline-grid;text-align:left;justify-items:start}
.buy__by{text-align:left}
.buy .notify label{text-align:left;display:block}

/* --- home page: the per-guide offer --------------------------------------- */
.offer{
  border:2px solid var(--card-accent);
  border-top:2px solid var(--card-accent);
  border-radius:16px;
  box-shadow:0 18px 44px -24px color-mix(in srgb, var(--card-accent) 60%, transparent);
}
/* Stack the price so the number owns its own line, with the label above it as
   a pill — the same shape as the bundle and the guide page. */
.offer__price{flex-direction:column;align-items:center;gap:8px;margin-bottom:18px}
.offer__unit{
  order:-1;
  padding-top:5px;padding-bottom:5px;padding-left:12px;padding-right:12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--card-accent) 16%, transparent);
  color:var(--card-accent);
}
.offer__amount{
  font-size:clamp(3.2rem,5.6vw,4rem);line-height:.92;color:var(--text);
}
.offer__cta{
  font-size:1.1rem;
  padding-top:18px;padding-bottom:18px;padding-left:22px;padding-right:22px;
  border-radius:12px;
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--card-accent) 85%, transparent);
}

@media (max-width:520px){
  .buy__price{font-size:3.2rem}
  .offer__amount{font-size:3rem}
  .offer__cta{font-size:1.02rem}
}

/* ---------------------------------------------------------------------------
   TOUCH TARGETS — by pointer, not by width.
   The mobile rules stopped at 768px, so an iPad in landscape (1024px, and very
   much a finger) got 22px links. Size the targets for the POINTER: any coarse
   pointer, plus every width up to a laptop, so a touchscreen laptop and an
   emulator both get it right.
   --------------------------------------------------------------------------- */
@media (max-width:1024px), (pointer:coarse){
  .wordmark{display:inline-block;padding-top:8px;padding-bottom:8px;min-height:44px;line-height:28px}
  .stmt__go,
  .post__go,
  .offer__alt a,
  .crumb{
    display:inline-block;
    padding-top:12px;padding-bottom:12px;
    min-height:44px;line-height:20px;
  }
  /* Guide titles on the home page are the main way in — they need thumb room. */
  .grow__title a,
  .card__title a{display:inline-block;padding-top:9px;padding-bottom:9px;min-height:44px}
  .btn,.btn--inline{min-height:48px}
}

/* ---------------------------------------------------------------------------
   FOOTER, PROPERLY.
   It was a hairline and four columns of links. A footer is the last thing a
   hesitant buyer reads, so it should look like the bottom of a real company:
   its own tinted band, an accent edge, the agency credit in a panel of its own,
   and the three reassurances people go looking for before they spend.
   --------------------------------------------------------------------------- */
.footer{
  position:relative;
  background:var(--ink-3);
  border-top:1px solid var(--line);
  margin-top:88px;
  padding-top:52px;padding-bottom:0;
}
/* A thin accent edge across the top — the one flash of colour down here. */
.footer::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));
}

.footer__coltitle{color:var(--text);opacity:.55}
.footer__list a{transition:color .15s ease}
.footer__list a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* The CREATE credit earns a panel — it is the reason to trust a £10 PDF. */
.footer__by{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;
}
.footer__by-mark img{width:42px}
.footer__by-text a{text-decoration:none;font-weight:700}
.footer__by-text a:hover{text-decoration:underline;text-underline-offset:3px}

.footer__trust{
  list-style:none;
  width:100%;max-width:var(--max);margin:0 auto;
  padding-top:20px;padding-bottom:20px;padding-left:24px;padding-right:24px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;
  color:var(--muted);font-size:.85rem;
}
.footer__trust li{position:relative;padding-left:22px}
.footer__trust li::before{
  content:"";position:absolute;left:0;top:.32em;width:13px;height:13px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
}
.footer__trust li::after{
  content:"";position:absolute;left:4px;top:.5em;width:3px;height:6px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(42deg);
}

.footer__base{border-top:1px solid var(--line)}

@media (max-width:640px){
  .footer{margin-top:64px;padding-top:40px}
  /* Stacked on a phone, still centred — the ticks line up under each other. */
  .footer__trust{
    gap:12px;flex-direction:column;align-items:center;
    padding-left:20px;padding-right:20px;
  }
}
@media (max-width:380px){
  .footer__trust{padding-left:16px;padding-right:16px}
}

/* One short paragraph split across two columns makes you read down, jump back
   up, and read down again — the same complaint Dom raised about two-column
   articles. It is a single sentence about who the guide is for; it reads in
   one column. (Same reasoning as the .postpage single-column decision.) */
.plain{columns:1;max-width:74ch}

/* `.bundle p` (0,1,1) was flattening the note's top margin to zero, so the
   "One download. Yours to keep." line sat hard against the button. Matching
   the element takes the specificity back — same trap as the price pills. */
.bundle p.bundle__note{margin-top:12px}
.buy__reassure{margin-top:20px}

/* The old text-only credit lived here; replaced 5 Oct 2026 by the canonical block at the end. */

/* ---------------------------------------------------------------------------
   The free sheet page. It is the only thing here that costs nothing, so it
   gets a confident layout of its own rather than looking like a lesser guide.
   --------------------------------------------------------------------------- */
.freelead{
  display:inline-block;margin:0 0 14px;
  padding-top:5px;padding-bottom:5px;padding-left:12px;padding-right:12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent);
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.freesub{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:60ch;margin:0 0 30px}
.freebox{
  background:var(--ink-2);border:2px solid var(--accent);border-radius:16px;
  padding-top:28px;padding-bottom:28px;padding-left:26px;padding-right:26px;
  margin:0 0 36px;max-width:620px;
  box-shadow:0 18px 44px -24px color-mix(in srgb,var(--accent) 70%,transparent);
}
.freebox--done{border-color:#4FC3A1;box-shadow:none}
.freebox h2{margin-top:0}
.freebox__err{
  background:rgba(232,93,117,.12);border:1px solid #E85D75;color:#E85D75;
  border-radius:9px;margin:0 0 16px;font-size:.92rem;
  padding-top:11px;padding-bottom:11px;padding-left:14px;padding-right:14px;
}
.freeform label{display:block;font-weight:700;margin-bottom:9px}
.freeform input[type=email]{
  width:100%;font:inherit;border-radius:10px;
  padding-top:14px;padding-bottom:14px;padding-left:16px;padding-right:16px;
  background:var(--ink);border:1px solid var(--line);color:var(--text);
}
.freeform input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.freeform .btn{margin-top:16px}
.freebox__note{color:var(--muted);font-size:.85rem;margin:18px 0 0;line-height:1.6}
.freelist{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px;max-width:62ch}
.freelist li{position:relative;padding-left:28px;color:var(--text)}
.freelist li::before{
  content:"";position:absolute;left:0;top:.18em;width:18px;height:18px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
}
.freelist li::after{
  content:"";position:absolute;left:5.5px;top:.42em;width:4px;height:8px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(42deg);
}
.freeback{margin-top:36px}

/* The free band on the home page. Deliberately NOT styled like the paid offer
   panels — it should read as a different kind of thing, not a cheaper one. */
.freeband{
  width:100%;border:1px dashed var(--accent);border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  padding-top:30px;padding-bottom:30px;padding-left:32px;padding-right:32px;
  margin:28px 0 8px;
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr);
  gap:34px;align-items:center;
}
.freeband__kicker{
  margin:0 0 8px!important;color:var(--accent);font-weight:800;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.freeband h2{font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.03em;margin:0 0 12px;font-weight:800}
.freeband p{color:var(--muted);margin:0;font-size:.98rem}
.freeband__cta{text-align:center}
.freeband__note{margin-top:12px!important;font-size:.8rem}
@media (max-width:820px){
  .freeband{grid-template-columns:1fr;gap:22px;padding-left:24px;padding-right:24px}
}

/* The answers page. Generous spacing, because each answer is a standalone unit
   that somebody may land on directly from an AI citation or a #q anchor. */
.faq{margin:34px 0 0}
.faq__item{padding-top:26px;padding-bottom:6px;border-top:1px solid var(--line)}
.faq__item:first-child{border-top:0;padding-top:0}
.faq__q{font-size:clamp(1.1rem,2.2vw,1.35rem)!important;letter-spacing:-.02em;
  margin:0 0 10px!important;color:var(--text)}
.faq__a{color:var(--muted);max-width:74ch;margin:0;line-height:1.7}
.faq__end{margin-top:44px;padding-top:28px;border-top:2px solid var(--accent)}

/* Proof. Only ever rendered when there are real quotes behind it. */
.proof{margin:50px 0 10px}
.proof__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.proof__card{
  margin:0;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding-top:24px;padding-bottom:22px;padding-left:24px;padding-right:24px;
}
.proof__card blockquote{
  margin:0 0 16px;font-size:1.02rem;line-height:1.6;color:var(--text);
}
.proof__card blockquote::before{content:"\201C"}
.proof__card blockquote::after{content:"\201D"}
.proof__card figcaption{color:var(--muted);font-size:.86rem}
.proof__card figcaption strong{display:block;color:var(--text);font-weight:700}

/* ---------------------------------------------------------------------------
   FULL WIDTH. `.prose > *` clamps everything to 74ch, which is right for an
   article and wrong for a landing page — it left the free sheet hugging the
   left edge with half the screen empty. `.prose--wide` releases the clamp and
   lets the content use the page, which is the house rule everywhere else.
   --------------------------------------------------------------------------- */
.prose--wide > *,
.prose--wide .freesub,
.prose--wide .faq__a,
.prose--wide p{max-width:none}

.freehead{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  gap:46px;align-items:start;margin-bottom:10px;
}
@media (max-width:900px){.freehead{grid-template-columns:1fr;gap:28px}}
.freehead h1{margin-bottom:16px}
.freebox{margin:0;max-width:none;position:sticky;top:24px}
@media (max-width:900px){.freebox{position:static}}

/* The contents list reads better across the full width as columns than as one
   long thin ribbon down the left. */
.freelist{max-width:none;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px 34px}
.freewhy{columns:2;column-gap:46px;max-width:none}
.freewhy p{margin:0 0 16px;break-inside:avoid}
@media (max-width:820px){.freewhy{columns:1}}
.faq--wide .faq__a{max-width:none}

/* ================= main menu (5 Oct 2026) =================
   Four links: the shop, the blog, the free sheet, the answers. On a phone the
   tagline is already hidden, and the menu takes its own row under the wordmark. */
.masthead__nav{margin-left:auto;display:flex;gap:4px 22px;flex-wrap:wrap;align-items:baseline}
.masthead__nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600}
.masthead__nav a:hover{color:var(--text)}
.masthead__nav a[aria-current="page"]{color:var(--text);
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
@media (max-width:640px){
  .masthead{row-gap:2px}
  .masthead__nav{margin-left:0;width:100%;gap:0 20px}
}
@media (max-width:1024px), (pointer:coarse){
  .masthead__nav a{display:inline-flex;align-items:center;min-height:44px}
}

/* ================= the blog ================= */
.blogpage{padding-top:56px}
.blogpage__eyebrow{margin:0 0 12px;font-size:.76rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
/* Full width by design, like every title on the site. */
.blogpage h1{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.03;letter-spacing:-.035em;font-weight:800;margin:0 0 18px}
.blogpage__lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);margin:0 0 30px}
.blogpage__empty{color:var(--muted)}

.topics{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0 0 26px;border-bottom:1px solid var(--line)}
.topics a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:600;color:var(--muted)}
.topics a span{font-size:.76rem;color:var(--muted);opacity:.8}
.topics a:hover{color:var(--text);border-color:var(--accent)}
.topics a[aria-current="page"]{color:var(--text);border-color:var(--accent);background:var(--ink-3)}
@media (max-width:1024px), (pointer:coarse){.topics a{min-height:44px}}

.leadpost{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;margin:0 0 22px;
  text-decoration:none;background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--card-accent);
  border-radius:var(--radius);overflow:hidden;transition:border-color .18s ease}
.leadpost:hover{border-color:var(--card-accent)}
.leadpost__img{display:block;background:var(--ink-3)}
.leadpost__img img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.leadpost__text{display:flex;flex-direction:column;gap:12px;padding:30px 30px 26px}
.leadpost .post__date,.leadpost .post__go{padding:0}
.leadpost__title{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.025em;font-weight:800}
.leadpost__excerpt{color:var(--muted);font-size:1rem;flex:1}
@media (max-width:820px){
  .leadpost{grid-template-columns:1fr}
  .leadpost__img img{min-height:0;height:220px}
  .leadpost__text{padding:22px 20px 20px}
}
.blogpage__grid{margin-bottom:10px}
.post__mins{color:var(--muted);font-weight:600;letter-spacing:.04em;margin-left:8px}

.blogfree{margin:44px 0 0;padding:28px 30px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--ink-2);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.blogfree__label{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.blogfree h2{margin:0 0 6px;font-size:1.4rem;letter-spacing:-.02em;font-weight:800}
.blogfree p{margin:0;color:var(--muted)}
@media (max-width:700px){.blogfree{grid-template-columns:1fr;padding:22px 20px}}

/* ================= article extras ================= */
.postpage__date{display:flex;flex-wrap:wrap;gap:4px 0}
.postpage__date span:not(:last-child)::after{content:"\00B7";margin:0 10px;color:var(--muted)}
.postpage__body h3{font-size:1.08rem;letter-spacing:-.01em;margin:26px 0 8px;font-weight:800;color:var(--text)}
.postpage__body ul,.postpage__body ol{margin:0 0 18px;padding-left:1.3em;color:var(--muted)}
.postpage__body li{font-size:1.04rem;line-height:1.66;margin:0 0 8px;padding-left:.2em}
.postpage__body li::marker{color:var(--card-accent)}
.postpage__body a{color:var(--card-accent);text-underline-offset:3px}

.prompt{position:relative;margin:6px 0 22px;padding:18px 20px 16px;border-radius:12px;
  background:var(--ink-3);border:1px solid var(--line);border-left:3px solid var(--card-accent)}
.prompt__label{margin:0 0 6px!important;font-size:.7rem!important;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--card-accent)!important}
.prompt__text{margin:0!important;color:var(--text)!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92rem!important;line-height:1.6!important;white-space:pre-wrap;overflow-wrap:anywhere}
.prompt__copy{position:absolute;top:10px;right:10px;min-height:32px;padding:0 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--ink-2);color:var(--text);font:600 .78rem/1 var(--sans);cursor:pointer}
.prompt__copy:hover{border-color:var(--card-accent)}
@media (max-width:1024px), (pointer:coarse){.prompt{padding-top:52px}.prompt__copy{min-height:40px}}

.postfaq,.postsources{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.postfaq h2,.postsources h2{margin-top:0}
.postsources ul{padding-left:1.1em}
.postsources li{font-size:.92rem;margin-bottom:6px}
.postsources__checked{font-size:.86rem!important;margin-top:10px!important}
.postmore{margin-top:20px}
.postmore .section-head p a{color:var(--accent)}

.previewbar{margin:0;padding:12px 24px;text-align:center;font-size:.9rem;background:#F5C451;color:#1A1300}


/* ================= "Built by CREATE" — the canonical CREATE credit =================
   Copied from _brain/reference/create-footer-credit.md (standing rule, Dom 20 Aug 2026):
   same inline mark, 23px, Barlow Condensed 800 1.28rem/.08em wordmark, baseline-aligned,
   both in CREATE green. Colour is the only thing a site may change. Kept LAST in this
   file so no earlier footer link rule (the coarse-pointer min-height, any hover accent)
   can reach it. The font is self-hosted because this site loads nothing off-domain.  */
@font-face{
  font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/barlow-condensed-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--create-green:#79B949}   /* CREATE's own green; never the site's --accent */
.footer__base .ftr-credit{
  display:inline-flex;align-items:baseline;gap:10px;
  margin:0;color:#66707D;font-size:.8rem;white-space:nowrap;
}
@media (prefers-color-scheme:light){.footer__base .ftr-credit{color:#8A93A0}}
.footer__base .ftr-credit a{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 0;min-height:0;            /* 41px tap target; min-height would break the baseline */
  color:var(--create-green);text-decoration:none;
  transition:opacity .3s ease;
}
.footer__base .ftr-credit a:hover{color:var(--create-green);opacity:.72;text-decoration:none}
.footer__base .ftr-credit .create-mark{
  height:23px;width:auto;flex:none;
  color:var(--create-green);          /* paths are fill="currentColor" */
}
.footer__base .ftr-credit b{
  font-family:"Barlow Condensed","Inter",sans-serif;
  font-weight:800;font-size:1.28rem;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--create-green);
}
/* The credit is taller than the copyright line beside it (43px tap target), so on a wide
   screen the base row lines everything up on the text baseline instead of the top. The
   phone layout stacks the row, where this would change nothing useful, so it is left alone. */
@media (min-width:561px){.footer__base{align-items:baseline}}

/* The "Why take our word for it" photo is now a real guide on a tablet (6 Oct 2026).
   At the old 140-220px strip the portrait tablet was cut in half, so the strip is
   taller and centred on it. The guide cover on the screen is the actual PDF cover. */
.authority__photo img{height:clamp(220px,30vw,380px);object-position:center 50%}