/* Self-hosted webfonts (4 Sep 2026). This was an @import of Google's font CDN, which sent
   every visitor's IP address, User-Agent and Referer to Google on every funnel page load — an
   undisclosed transfer to a company that is not among the subprocessors the privacy policy names.
   Absolute, not relative: these pages are served from two URLs (/f/x.html and /x), and a relative
   path would resolve differently from each. See scripts/vendor-fonts.mjs. */
@import url('/fonts/fonts.css');

:root{
  --ink:#0b211f;
  --ink-soft:#17322f;
  --ivory:#f4f1e9;
  --paper:#fbfaf6;
  --white:#ffffff;
  --sage:#b8d3c7;
  --sage-soft:#e3eee9;
  --mint:#9de0cc;
  --lime:#d9ed8f;
  --gold:#f2c977;
  --rose:#d99b91;
  --muted:#647672;
  --line:rgba(11,33,31,.12);
  --line-light:rgba(255,255,255,.14);
  --shadow:0 30px 80px rgba(11,33,31,.12);
  --shadow-deep:0 40px 100px rgba(1,13,12,.26);
  --radius:24px;
  --radius-lg:38px;
  --max:1220px;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::selection{background:var(--lime);color:var(--ink)}
a{color:inherit}
button,input,select,textarea{font:inherit}
img,svg{display:block;max-width:100%}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.narrow{width:min(840px,calc(100% - 48px));margin-inline:auto}
.serif{font-family:var(--serif);font-weight:400}
.italic{font-style:italic}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase
}
.kicker::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.kicker.light{color:#d9ebe5}
h1,h2,h3,h4{margin:0;letter-spacing:-.04em;line-height:.98}
h1{font-size:clamp(2.4rem,4vw,3.75rem);font-weight:500}
h2{font-size:clamp(1.9rem,2.8vw,2.75rem);font-weight:500}
h3{font-size:clamp(1.35rem,2.3vw,2rem);font-weight:600}
h4{font-size:1.05rem}
p{margin:0 0 18px}
.lead{font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.55;color:var(--muted);max-width:760px}
.lead.light{color:#c8d8d3}
.small{font-size:.84rem;color:var(--muted)}
.eyeline{height:1px;background:var(--line)}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:.3s ease;
}

.nav.nav-on-dark:not(.scrolled) .brand,
.nav.nav-on-dark:not(.scrolled) .nav-links a{color:#fff}
/* Over a dark hero, before the nav picks up its cream backdrop on scroll. Once .scrolled adds
   that backdrop the rule stops applying and the standard dark mark takes over again, which is
   correct in both states. */
.nav.nav-on-dark:not(.scrolled) .brand-mark{background-image:url(/brand/mark-light.png)}
.nav.nav-on-dark:not(.scrolled) .btn-outline{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.nav.nav-on-dark:not(.scrolled) .btn-dark{background:#fff;color:var(--ink);box-shadow:none}

.nav.scrolled{
  background:rgba(244,241,233,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  width:min(1370px,calc(100% - 40px));margin:auto;height:84px;
  display:flex;align-items:center;justify-content:space-between;gap:24px
}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;letter-spacing:-.03em;min-height:24px}
/* The real mark, replacing the CSS-drawn dark circle with two mint dots that stood in for it
   until 26 Aug 2026. Served from /brand/ at the site root rather than from this directory,
   because the same files are used by the app and by email and there should be exactly one copy.

   The light variant exists because 14 of the 15 pages here open with a dark hero and the nav
   sits on top of it — the standard artwork is near-black teal and simply vanishes there. The
   two files are generated through an identical trim-and-scale path, so swapping the image is
   the only thing that changes: same box, same optical size, no reflow. */
.brand-mark{
  width:36px;height:36px;
  background:url(/brand/mark.png) center/contain no-repeat
}
.brand-mark::before,.brand-mark::after{content:none}
.brand.light{color:#fff}
.brand.light .brand-mark{background-image:url(/brand/mark-light.png)}
.nav-links{display:flex;align-items:center;gap:28px}
/* WCAG 2.2 target-size (2.5.8) wants 24x24 CSS px, and a bare text link at .88rem is about
   fourteen. The padding is vertical only so the 28px gap between items is untouched — widening
   them horizontally would run the row out of the header on a narrow laptop. */
.nav-links a{
  text-decoration:none;font-size:.88rem;font-weight:600;color:var(--ink-soft);
  display:inline-flex;align-items:center;min-height:24px;
}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn{
  min-height:52px;padding:0 23px;border:1px solid transparent;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;font-weight:700;font-size:.91rem;transition:.25s ease;white-space:nowrap
}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 14px 30px rgba(11,33,31,.18)}
.btn-dark:hover{background:#143934}
.btn-light{background:#fff;color:var(--ink)}
.btn-outline{border-color:var(--line);background:rgba(255,255,255,.45)}
.btn-outline-light{border-color:var(--line-light);color:#fff;background:rgba(255,255,255,.04)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-text{padding:0;border-radius:0;min-height:auto;border-bottom:1px solid currentColor}
.btn-small{min-height:44px;padding:0 18px;font-size:.84rem}
.arrow{font-size:1.1rem;line-height:1;transition:.2s}
.btn:hover .arrow{transform:translateX(3px)}
.hero{
  position:relative;min-height:100vh;padding:148px 0 82px;
  display:flex;align-items:center;overflow:hidden;background:var(--ivory)
}
.hero::before{
  content:"";position:absolute;width:700px;height:700px;border-radius:50%;
  top:-330px;right:-150px;background:radial-gradient(circle,rgba(157,224,204,.58),rgba(157,224,204,0) 68%);
  pointer-events:none
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center;position:relative;z-index:2}
.hero-copy h1{max-width:760px;margin:22px 0 26px}
.hero-copy .lead{max-width:655px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.microproof{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}
.microproof span{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
.dot-check{width:20px;height:20px;border-radius:50%;background:var(--sage-soft);display:grid;place-items:center}
.dot-check svg{width:12px;height:12px}
.hero-visual{position:relative;min-height:650px}
.orbit{
  position:absolute;border:1px solid rgba(11,33,31,.13);border-radius:50%;
  animation:spin 28s linear infinite
}
.orbit.one{width:610px;height:610px;right:-90px;top:8px}
.orbit.two{width:490px;height:490px;right:-28px;top:67px;animation-direction:reverse;animation-duration:22s}
.orbit::before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--rose);left:16%;top:9%}
@keyframes spin{to{transform:rotate(360deg)}}
.product-shell{
  position:absolute;right:6px;top:38px;width:min(590px,100%);
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.84);border-radius:32px;padding:16px;
  box-shadow:var(--shadow-deep);transform:rotate(1.5deg)
}
.product-window{background:#fff;border:1px solid var(--line);border-radius:23px;overflow:hidden;color:var(--ink)}
.window-top{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line)}
.window-brand{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:700}
.window-brand .brand-mark{width:25px;height:25px}
.window-actions{display:flex;gap:6px}.window-actions i{width:7px;height:7px;border-radius:50%;background:#d7dfdb}
.product-body{display:grid;grid-template-columns:150px 1fr;min-height:455px}
.product-sidebar{padding:18px 12px;background:#f4f7f4;border-right:1px solid var(--line);color:var(--ink)}
.side-item{height:35px;border-radius:10px;margin-bottom:7px;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:.7rem;color:#7a8b86}
.side-item.active{background:var(--ink);color:#fff}
.side-icon{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.65}
.product-main{padding:26px}
.product-head{display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:24px}
.product-head h4{font-size:1.1rem}
.anonymous-badge{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--sage-soft);border-radius:999px;font-size:.65rem;font-weight:700}
.conversation{display:grid;gap:12px}
.message{max-width:84%;padding:13px 15px;border-radius:16px;font-size:.78rem;line-height:1.45}
.message.user{justify-self:end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.message.guide{justify-self:start;background:#eef2ef;border-bottom-left-radius:4px}
.composer{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:14px;padding:11px;margin-top:20px;color:#86938f;font-size:.72rem}
.composer span:last-child{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--ink)}
.float-card{
  position:absolute;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  border-radius:18px;padding:16px 18px;z-index:4;color:var(--ink)}
.float-card.top{top:0;left:-34px;width:220px;animation:float 5.5s ease-in-out infinite}
.float-card.bottom{bottom:34px;right:-22px;width:240px;animation:float 6.4s ease-in-out infinite reverse}
@keyframes float{50%{transform:translateY(-10px)}}
.float-label{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.float-number{font-family:var(--serif);font-size:2rem;margin:2px 0}
.mini-bars{display:flex;align-items:end;gap:5px;height:42px;margin-top:10px}
.mini-bars i{display:block;flex:1;border-radius:99px;background:var(--sage)}
.mini-bars i:nth-child(1){height:35%}.mini-bars i:nth-child(2){height:60%}.mini-bars i:nth-child(3){height:45%}.mini-bars i:nth-child(4){height:82%;background:var(--mint)}.mini-bars i:nth-child(5){height:68%}
.trust-strip{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#f8f6f0}
.trust-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.trust-copy{font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.trust-list{display:flex;gap:38px;flex-wrap:wrap}
.trust-list span{font-family:var(--serif);font-size:1.1rem;color:#5f6f6a}
.section{padding:125px 0;position:relative}
.section-compact{padding:82px 0}
.section-dark{background:var(--ink);color:#fff}
.section-sage{background:var(--sage-soft)}
.section-ivory{background:var(--ivory)}
.section-head{display:grid;grid-template-columns:1fr .72fr;gap:70px;align-items:end;margin-bottom:70px}
.section-head h2{margin-top:18px}
.section-head .lead{justify-self:end}
.editorial-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:90px;align-items:start}
.sticky-copy{position:sticky;top:130px}
.sticky-copy h2{margin:18px 0 28px}
.statement{
  font-family:var(--serif);font-size:clamp(2rem,4vw,4.4rem);line-height:1.03;
  letter-spacing:-.035em;margin-bottom:32px
}
.issue-list{border-top:1px solid var(--line)}
.issue{
  display:grid;grid-template-columns:60px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line)
}
.issue-num{font-family:var(--serif);font-size:1.8rem;color:var(--rose)}
.issue h3{margin-bottom:10px}
.issue p{color:var(--muted);margin:0;max-width:650px}
.split-banner{
  display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow)
}
.split-panel{padding:68px}
.split-panel.old{background:#efe9df}
.split-panel.new{background:var(--ink);color:#fff}
.split-panel h3{font-family:var(--serif);font-size:2.5rem;font-weight:400;margin-bottom:28px}
.path-list{display:grid;gap:18px}
.path-step{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.path-step b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(11,33,31,.08);font-size:.75rem}
.new .path-step b{background:rgba(255,255,255,.1)}
.path-step p{margin:0;color:var(--muted)}
.new .path-step p{color:#c2d0cc}
.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.workflow-card{
  min-height:310px;padding:28px;border-radius:24px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:.3s ease;color:var(--ink)}
.workflow-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.workflow-index{font-family:var(--serif);font-size:2.3rem;color:var(--rose)}
.workflow-card h3{margin-top:auto;margin-bottom:12px}
.workflow-card p{color:var(--muted);margin:0}
.feature-stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.feature-visual{
  min-height:620px;border-radius:36px;background:linear-gradient(145deg,#dcece5,#a9d5c4);
  position:relative;overflow:hidden;padding:46px
}
.feature-visual::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid rgba(11,33,31,.15);
  right:-120px;top:-110px
}
.security-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(390px,76%);background:rgba(255,255,255,.9);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:30px;box-shadow:var(--shadow)
}
.shield{
  width:58px;height:58px;border-radius:18px;background:var(--ink);display:grid;place-items:center;margin-bottom:26px
}
.shield svg{width:28px;height:28px;stroke:#fff}
.security-line{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:.82rem}
.security-line span:last-child{font-weight:700}
.feature-copy h2{margin:18px 0 28px}
.feature-list{display:grid;gap:18px;margin-top:34px}
.feature-row{display:grid;grid-template-columns:44px 1fr;gap:16px}
.feature-icon{width:44px;height:44px;border-radius:14px;background:var(--sage-soft);display:grid;place-items:center}
.feature-icon svg{width:20px;height:20px;stroke:var(--ink)}
.feature-row h4{margin:2px 0 5px}
.feature-row p{color:var(--muted);font-size:.92rem;margin:0}
.product-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;
  position:relative;display:flex;flex-direction:column;color:var(--ink)}
.product-card.large{grid-column:span 7}
.product-card.medium{grid-column:span 5}
.product-card.full{grid-column:1/-1}
.product-card h3{max-width:450px;margin-bottom:14px}
.product-card p{color:var(--muted);max-width:500px}
/* Normal document flow, not an absolute overlay — a mockup graphic sized as a
   percentage of the card and pinned to a corner will, on a narrower card,
   sit on top of the text above it instead of below it. A fixed-height block
   that follows the text in flow can never overlap it, at any card width. */
.card-art{margin-top:22px;width:100%;height:170px;background:var(--sage-soft);border-radius:16px;padding:16px}
.card-art.dark{background:var(--ink)}
.tiny-window{height:100%;border-radius:12px;background:#fff;border:1px solid var(--line);padding:12px;color:var(--ink)}
.tiny-row{height:20px;border-radius:7px;background:#eef3f0;margin-bottom:6px}
.tiny-row.active{background:var(--ink)}
.data-art{display:flex;align-items:end;gap:8px;height:100%}
.data-art i{flex:1;border-radius:8px 8px 0 0;background:var(--sage)}
.data-art i:nth-child(1){height:32%}.data-art i:nth-child(2){height:48%}.data-art i:nth-child(3){height:69%}.data-art i:nth-child(4){height:86%;background:var(--mint)}.data-art i:nth-child(5){height:58%}
.testimonial{
  display:grid;grid-template-columns:.36fr 1fr;gap:70px;align-items:start;
  padding:70px;border-radius:36px;background:var(--ink);color:#fff
}
.testimonial-mark{font-family:var(--serif);font-size:10rem;line-height:.6;color:var(--mint)}
.testimonial blockquote{font-family:var(--serif);font-size:clamp(2rem,4vw,4rem);line-height:1.08;margin:0 0 34px}
.testimonial cite{font-style:normal;color:#b8c7c2;font-size:.9rem}
.proof-note{margin-top:18px;font-size:.78rem;color:#879994}
.offer-shell{
  background:var(--ivory);border-radius:42px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line)
}
.offer-inner{
  border-radius:30px;background:#fff;padding:66px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start;color:var(--ink)}
.offer-copy h2{margin:18px 0 26px}
.price-wrap{padding:35px;border-radius:24px;background:var(--ink);color:#fff}
.price-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#a9bcb6;font-weight:700}
.price{font-family:var(--serif);font-size:4.6rem;line-height:1;margin:12px 0 8px}
.price-sub{color:#b9c9c4}
.inclusions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}
.inclusion{display:flex;gap:11px;align-items:start;font-size:.9rem}
.inclusion i{width:20px;height:20px;border-radius:50%;background:var(--sage-soft);display:grid;place-items:center;flex:0 0 auto;font-style:normal;font-size:.72rem;font-weight:700;color:var(--ink);line-height:1}
.inclusion svg{width:11px;height:11px}
.guarantee{
  margin-top:22px;padding:18px;border-radius:16px;border:1px solid var(--line-light);
  background:rgba(255,255,255,.05);font-size:.85rem;color:#c7d6d1
}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:26px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq p{max-width:780px;color:var(--muted);margin:15px 0 0}
.final-cta{
  margin:0 24px 24px;border-radius:42px;background:var(--ink);color:#fff;overflow:hidden;position:relative
}
.final-cta::before{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(157,224,204,.28),transparent 68%);right:-90px;top:-260px
}
.final-inner{padding:110px 0;position:relative;z-index:2}
.final-inner h2{max-width:940px;margin:18px 0 28px}
.final-inner .lead{max-width:650px}
.final-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.footer{padding:50px 0 34px}
.footer-top{display:flex;justify-content:space-between;gap:45px;align-items:start;padding-bottom:38px;border-bottom:1px solid var(--line)}
.footer-copy{max-width:620px;color:var(--muted);font-size:.84rem}
.footer-links{display:grid;grid-template-columns:repeat(2,auto);gap:12px 35px;font-size:.84rem;font-weight:600}
.footer-links a{text-decoration:none}
.footer-bottom{padding-top:24px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.78rem}
.reveal{opacity:0;transform:translateY(26px);transition:.8s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}
.stage-hero{
  padding:160px 0 100px;background:var(--ink);color:#fff;position:relative;overflow:hidden
}
.stage-hero::after{
  content:"";position:absolute;width:700px;height:700px;border:1px solid rgba(255,255,255,.08);border-radius:50%;
  right:-230px;top:-290px
}
.stage-grid{display:grid;grid-template-columns:1fr .8fr;gap:80px;align-items:end;position:relative;z-index:2}
.stage-hero h1{font-size:clamp(2.6rem,4.2vw,4.1rem);margin:20px 0 28px;max-width:880px}
.stage-card{
  background:#fff;color:var(--ink);border-radius:28px;padding:30px;box-shadow:var(--shadow-deep)
}
.score-layout{display:grid;grid-template-columns:350px 1fr;gap:45px;align-items:start}
.score-aside{position:sticky;top:120px}
.progress{height:7px;background:#dce6e1;border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--ink);transition:.25s}
.progress-meta{display:flex;justify-content:space-between;margin-top:9px;font-size:.72rem;color:var(--muted)}
.question{
  padding:30px;background:#fff;border:1px solid var(--line);border-radius:24px;margin-bottom:15px;
  transition:.2s;color:var(--ink)}
.question:hover{box-shadow:0 15px 40px rgba(11,33,31,.07)}
.question h3{font-size:1.15rem;line-height:1.35;letter-spacing:-.02em;margin:7px 0 18px}
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.option{
  padding:13px 16px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;gap:12px;
  cursor:pointer;font-size:.86rem;line-height:1.3;transition:.2s
}
.option:hover{border-color:#7fae9c;background:#f5faf7}
/* The global `input{width:100%}` rule (for the text fields elsewhere on the
   site) also catches these radios, stretching each one's layout box to fill
   almost the whole option row and shoving the label off to the far right
   with a big dead gap in between. Pin the radio back to its natural size so
   it sits directly next to its own label, the way a radio option should. */
.option input{accent-color:var(--ink);width:18px;height:18px;flex:none}
.result-box{display:none;background:var(--ink);color:#fff;border-radius:28px;padding:34px;margin-top:22px}
.result-score{font-family:var(--serif);font-size:4.5rem;line-height:1}
.result-label{display:inline-flex;padding:8px 12px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.75rem;font-weight:700;margin:14px 0}
/* color is not optional here. .form-card sits inside .stage-hero, which sets color:#fff for the
   dark hero, and this card puts a white background over it — so every label inside inherited
   white on white and was invisible. The field labels were in the markup the whole time and
   simply could not be seen. .stage-card above already resets this; .form-card was missed. */
.form-card{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow)}

/* Two columns for the fields, and everything else spans the full width. Previously the button
   and the note were ordinary grid items, so they dropped into the next two cells — button under
   the email, note under the organisation — which is what made the layout look broken. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:7px;min-width:0}
.field.full,.form-grid>button,.form-grid>.form-note,.form-grid>.form-error{grid-column:1/-1}
label{font-size:.78rem;font-weight:700}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:13px;background:#fbfcfa;
  padding:14px 15px;color:var(--ink);outline:none;font:inherit
}

/* Validation state. Colour alone is not a sufficient signal, so the message carries the
   explanation and aria-invalid carries it to assistive tech. */
input[aria-invalid="true"]{border-color:#b4472f;background:#fdf7f5}
input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(180,71,47,.15)}
.form-error{font-size:.78rem;font-weight:600;color:#b4472f;margin:0}
.form-error:empty{display:none}

/* Honeypot. Off-screen rather than display:none, because some bots skip fields that are not
   rendered at all. Real people never reach it: it is aria-hidden and out of the tab order. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
input:focus,select:focus,textarea:focus{border-color:#78aa97;box-shadow:0 0 0 4px rgba(157,224,204,.2)}

/* Buttons and links had no focus style whatsoever, so anyone navigating by keyboard could not
   tell where they were on the page. :focus-visible keeps it to keyboard use, so a mouse click
   does not leave a ring behind. The dark outline reads on the cream page; the light one is for
   the dark hero and footer, where a dark ring would be invisible. */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--ink);outline-offset:3px;border-radius:6px
}
.stage-hero a:focus-visible,.stage-hero button:focus-visible,
.nav.nav-on-dark:not(.scrolled) a:focus-visible{outline-color:#9de0cc}
/* ...but the form card is a light surface sitting inside that dark hero, so it flips back. */
.form-card a:focus-visible,.form-card button:focus-visible{outline-color:var(--ink)}
textarea{min-height:120px;resize:vertical}
.form-note{font-size:.73rem;color:var(--muted);margin-top:12px}
.success{display:none;padding:14px;border-radius:12px;background:var(--sage-soft);font-size:.83rem;font-weight:700}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Light panels state their own text colour, added 26 Aug 2026.
   These sit inside .stage-hero on several pages, and .stage-hero sets color:#fff for the dark
   hero behind them. A panel that paints itself white without also setting a colour inherits
   that white and renders white-on-white. It had already happened twice — .stage-card carried
   the fix from the start, .form-card was missing it and hid every field label, and .price-card
   was missing it and hid the entire "what you get" list on the £195 checkout page. Setting the
   colour on the panel rather than patching each context is what stops it happening a fourth
   time; the deliberately dark variants (.price-card.featured) override it by specificity. */
.price-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;color:var(--ink)}
.price-card.featured{background:var(--ink);color:#fff;transform:translateY(-14px);box-shadow:var(--shadow-deep)}
.price-card .amount{font-family:var(--serif);font-size:3.6rem;margin:16px 0 4px}
.price-card ul{list-style:none;padding:0;margin:26px 0;display:grid;gap:12px}
.price-card li{display:flex;gap:10px;font-size:.88rem}
/* flex:0 0 auto is load-bearing. .price-card li is a flex container, so this pseudo-element
   is a flex item — and a flex item defaults to flex-shrink:1. Without it the dot is squeezed
   to a one-pixel vertical sliver whenever the label beside it is long, which is exactly how
   it was rendering on the audit page. */
.price-card li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);margin-top:7px;flex:0 0 auto}
/* An .inclusion supplies its own tick, so it must not also inherit the plain dot above. */
.inclusions .inclusion::before{content:none}
.mobile-toggle{display:none;background:none;border:0;padding:8px}
@media(max-width:1050px){
  .nav-links{display:none}
  .hero-grid,.feature-stage,.section-head,.editorial-grid,.offer-inner,.stage-grid{grid-template-columns:1fr}
  .hero{padding-top:130px}
  .hero-visual{min-height:590px}
  .section-head .lead{justify-self:start}
  .workflow{grid-template-columns:repeat(2,1fr)}
  .sticky-copy{position:static}
  .product-card.large,.product-card.medium{grid-column:1/-1}
  .score-layout{grid-template-columns:1fr}
  .score-aside{position:static}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.featured{transform:none}
}
@media(max-width:720px){
  .container,.narrow{width:min(100% - 28px,var(--max))}
  .nav-inner{width:calc(100% - 24px);height:72px}
  .nav-actions .btn-outline{display:none}
  .hero{padding:116px 0 70px;min-height:auto}
  h1{font-size:clamp(2rem,8vw,2.6rem)}
  h2{font-size:clamp(1.7rem,6.5vw,2.1rem)}
  .stage-hero h1{font-size:clamp(2.1rem,8.5vw,2.75rem)}
  .hero-grid{gap:45px}
  .hero-visual{min-height:490px}
  .orbit.one{width:460px;height:460px}
  .orbit.two{width:360px;height:360px}
  .product-shell{top:45px;right:-36px;width:500px;transform:scale(.78) rotate(1deg);transform-origin:top right}
  .float-card.top{left:0;top:5px}
  .float-card.bottom{right:0;bottom:8px}
  .product-body{grid-template-columns:110px 1fr}
  .section{padding:88px 0}
  .section-compact{padding:62px 0}
  .section-head{gap:24px;margin-bottom:45px}
  .split-banner{grid-template-columns:1fr}
  .split-panel{padding:38px 26px}
  .workflow{grid-template-columns:1fr}
  .workflow-card{min-height:245px}
  .feature-visual{min-height:520px;padding:24px}
  .product-card{padding:25px}
  .testimonial{grid-template-columns:1fr;gap:20px;padding:38px 26px}
  .testimonial-mark{font-size:6rem}
  .offer-shell{padding:9px}
  .offer-inner{padding:34px 24px;gap:35px}
  .inclusions{grid-template-columns:1fr}
  .final-cta{margin:0 10px 10px;border-radius:28px}
  .final-inner{padding:80px 0}
  .footer-top,.footer-bottom{display:grid}
  .footer-links{grid-template-columns:1fr 1fr}
  .stage-hero{padding:125px 0 75px}
  .options{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
}