/* Sparkitive — site-v2.css (design-plan.md v2, round 5 Gate B, 2026-10-26).
   Written with the Contact and Book a call mockups. css/site.css is the r4 stylesheet and is left
   untouched because the How it works mockup (out of scope until Gate A) still links it. */
:root{
  /* surfaces */
  --bg-night:#121130; --bg-deep:#1E1C4A; --bg-paper:#F7F6FE; --bg-mist:#ECEBFC; --bg-card:#FFFFFF;
  /* ink */
  --ink:#1B1A33; --ink-soft:#4C4B68; --on-dark:#FFFFFF; --on-dark-2:#A9A8D6; --lav:#C9C8F4;
  /* brand */
  --indigo:#5551D3; --indigo-dk:#3E39B5; --peri:#8C8AEC; --line:#D9D8F2; --hl:#CCCBF7;
  /* D-670 #14 About ecosystem node colours (design-plan 16.15); graphics only, text never takes them */
  --eco-bp:#3F6E9E; --eco-ch:#B8573F; --eco-sp:#5551D3; --eco-ff:#A63A86;
  /* action: buttons only (D4) */
  --cta:#2B6CE0; --cta-hover:#1F5BD0; --cta-ink:#FFFFFF;
  --cta-edge-light:#121130; --cta-edge-dark:#8FB8FF;
  /* links stay indigo */
  --link:var(--indigo); --link-hover:var(--indigo-dk); --link-dark:var(--peri);
  --focus-light:var(--indigo); --focus-dark:#8FB8FF;
  --shadow-card:0 1px 2px rgb(18 17 48 / .06), 0 8px 24px rgb(18 17 48 / .08);
  --serif:Fraunces, Georgia, serif;
  --sans:"Atkinson Hyperlegible Next","Atkinson Hyperlegible", system-ui, sans-serif;
  --ff-icon:url("https://assets.cdn.filesafe.space/Hmk188x3x1aSwwAtBIZy/media/7548afa6-2e12-4dee-a174-1b5cd4afa646.png"); --m-body:68ch; --m-lede:60ch;
  /* the only two H2 sizes (design-plan v2 §3, §13 R1; c123): the heading that opens a band, and an H2 inside a card or one of several in a reading column */
  --h2-section:clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem); --h2-inner:clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --pad:clamp(64px, 8vw, 112px);
  --cross:clamp(48px, 6vw, 96px);   /* how far a hero scene crosses the seam (plan §1) */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{margin:0; background:var(--bg-paper); color:var(--ink); font:400 1.125rem/1.65 var(--sans); -webkit-font-smoothing:antialiased}
img,svg,iframe,video{max-width:100%; display:block}
h1,h2{font-family:var(--serif); font-optical-sizing:auto; text-wrap:balance; margin:0 0 .5em}
h1{font-size:clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); font-weight:700; line-height:1.04; letter-spacing:-.02em}
h2{font-size:var(--h2-section); font-weight:600; line-height:1.1; letter-spacing:-.015em}
/* inner tier: inside a card, panel, plan sheet, sidebar card or callout, or one of several H2s that divide a single reading column */
.addr-card h2,.sheet h2,.cal h2,.news h2,.side-cta h2,.post-body h2,.legal h2,.legal-toc h2,.read-sec h2,.hw-note h2,.hw-call h2,.hw-bubble h2{font-family:var(--serif); font-size:var(--h2-inner); font-weight:600; line-height:1.15; letter-spacing:-.01em}
h3{font:700 1.25rem/1.3 var(--sans); margin:0 0 .3em}
p{margin:0 0 1em; max-width:var(--m-body)}
a{color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--link-hover); text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus-light); outline-offset:2px; border-radius:4px}
.dark :focus-visible{outline-color:var(--focus-dark)}
.dark a{color:var(--link-dark)} .dark a:hover{color:#fff}
.wrap{width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(20px, 4vw, 40px); position:relative; z-index:2}
.skip{position:absolute; left:-9999px} .skip:focus{left:16px; top:12px; z-index:100; background:#fff; padding:8px 12px}
/* c104: a hyphenated word in a heading never breaks at its hyphen ("30-" / "minute"); the markup wraps each one in .nb */
.nb{white-space:nowrap}
[hidden]{display:none !important}   /* qafix A (blog F2): .btn, .acard etc. set display and otherwise beat the hidden attribute */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* highlighter: behind ink only, light bands only (plan §5) */
mark.hl{color:inherit; padding:0 .08em; background:linear-gradient(transparent 38%, var(--hl) 38% 92%, transparent 92%); -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* primary button: blue pill, 2px border and hard shadow in the band's edge colour (plan §4.1, §5) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding:.7em 1.5em; border-radius:999px;
  border:2px solid var(--cta-edge-light); background:var(--cta); color:var(--cta-ink); font:700 1.0625rem/1.2 var(--sans); text-decoration:none;
  box-shadow:4px 4px 0 var(--cta-edge-light); cursor:pointer; transition:transform .15s, box-shadow .15s, background-color .15s}
.btn:hover{background:var(--cta-hover); color:var(--cta-ink)}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--cta-edge-light)}
.dark .btn{border-color:var(--cta-edge-dark); box-shadow:4px 4px 0 var(--cta-edge-dark); color:var(--cta-ink)}
.dark .btn:hover{color:var(--cta-ink)}
.dark .btn:active{box-shadow:2px 2px 0 var(--cta-edge-dark)}

/* header */
.site-head{position:sticky; top:0; z-index:50; background:var(--bg-night); border-bottom:1px solid rgb(255 255 255 / .08)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px}
.logo{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.nav{display:flex; align-items:center; gap:28px; flex:0 0 auto; white-space:nowrap}
@media (min-width:900px) and (max-width:1099px){ .nav{gap:18px} }   /* D-528: the fourth link (design-plan 15.10) */
.nav a:not(.btn){color:var(--on-dark); text-decoration:none; font-weight:700; font-size:1rem; padding:6px 0; border-bottom:2px solid transparent}
.nav a:not(.btn):hover{color:#fff; border-bottom-color:rgb(140 138 236 / .6)}
.nav .btn{min-height:44px; padding:.55em 1.2em; font-size:1rem}
.burger{display:none; width:44px; height:44px; border:1px solid rgb(255 255 255 / .25); border-radius:999px; background:transparent; color:#fff; cursor:pointer; padding:0; align-items:center; justify-content:center}
.burger svg{width:22px; height:22px}
.drawer{position:fixed; inset:0 0 0 auto; width:min(86vw, 360px); max-height:100dvh; overflow-y:auto; background:var(--bg-night); z-index:60; padding:20px 24px 32px; transform:translateX(100%); visibility:hidden; transition:transform .25s, visibility .25s}
.drawer.open{transform:none; visibility:visible}
.drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px}
.drawer ul{list-style:none; margin:0 0 28px; padding:0}
.drawer li a{display:block; color:#fff; text-decoration:none; font:700 1.25rem/1.3 var(--sans); min-height:44px; padding:12px 0; border-bottom:1px solid rgb(255 255 255 / .1)}   /* R13c: navigation is Atkinson */
.scrim{position:fixed; inset:0; background:rgb(10 9 30 / .6); z-index:55; opacity:0; visibility:hidden; transition:opacity .25s}
.scrim.open{opacity:1; visibility:visible}
body.locked{overflow:hidden}
@media (max-width:959px){
  .nav{display:none} .burger{display:inline-flex}
  .site-head .wrap{height:68px}
}

/* bands */
.dark{background:var(--bg-night); color:var(--on-dark)}
.dark p{color:var(--on-dark-2)}
.paper{background:var(--bg-paper)} .mist{background:var(--bg-mist)}
section{position:relative}
.pad{padding-block:var(--pad)}

/* ===== split night hero (plan §1, §5, §8) ===== */
.hero{overflow-x:clip; overflow-y:visible; z-index:3; padding-top:clamp(40px, 5vw, 72px); padding-bottom:var(--hero-foot, clamp(120px, 12vw, 176px))}
.hero::before{content:""; position:absolute; width:min(900px, 110vw); aspect-ratio:1; right:-14%; top:-95%; background:radial-gradient(closest-side, rgb(140 138 236 / .22), transparent 72%); pointer-events:none}
.hero .wrap{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(32px, 4vw, 56px); align-items:center}
.hero-copy{position:relative; z-index:3}
.hero-copy h1{margin-bottom:.3em}
.hero-copy .lede{font-size:1.25rem; max-width:var(--m-lede); margin-bottom:1.4em; color:var(--on-dark-2)}
.hero-copy .lede:last-child{margin-bottom:0}
.hero-act{position:relative; display:inline-block}
.hero-act::before{content:""; position:absolute; inset:-60px -90px; background:radial-gradient(closest-side, rgb(143 184 255 / .12), transparent 75%); pointer-events:none; z-index:-1}
/* the scene: no frame; its edges dissolve into the night with a mask (S2's edges are painted, not flat) */
.scene{position:relative; z-index:4; margin:0}
.scene img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:var(--pos, 50% 40%);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fl, 9%), #000 calc(100% - var(--fr, 9%)), transparent), linear-gradient(to bottom, transparent, #000 var(--ft, 7%), #000 calc(100% - var(--fb, 12%)), transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent, #000 var(--fl, 9%), #000 calc(100% - var(--fr, 9%)), transparent), linear-gradient(to bottom, transparent, #000 var(--ft, 7%), #000 calc(100% - var(--fb, 12%)), transparent);
          mask-composite:intersect}
/* the seam: a shallow arc whose fill is the next band; its container is night, set in the same rule (plan §5) */
.seam{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(28px, 3.5vw, 56px); display:block; z-index:1; pointer-events:none;
  /* c101/c102: the hero's night shows above the arc, but NOT in the seam's last 2px. The seam's bottom edge lands on a fractional pixel
     (heights are fractional); the box background snaps to the pixel grid while the svg fill is anti-aliased, so a night background
     under that edge bled through as a 1px grey line. The bottom 2px are the arc's own fill over the next band, with no night under them. */
  background:linear-gradient(var(--bg-night), var(--bg-night)) 0 0 / 100% calc(100% - 2px) no-repeat}
.seam path{fill:var(--seam-fill, var(--bg-paper))}

/* sparkles: pure geometry, static, decorative */
.decor-spark{position:absolute; pointer-events:none; z-index:5; overflow:visible}
.decor-spark path{fill:currentColor}
.decor-spark .s1{color:var(--lav)} .decor-spark .s2{color:var(--peri)} .decor-spark .s3{color:#8FB8FF}
.decor-spark--light{color:var(--indigo); opacity:.35}
.decor-spark--light path{fill:var(--indigo)}

/* ===== Contact (compact split hero, S1 crossing the seam; the form card crosses it too) ===== */
.p-contact .hero{--hero-foot:clamp(128px, 12vw, 176px)}
.p-contact .scene{--pos:70% 40%; --fl:18%; --fr:12%; --ft:12%; --fb:20%; max-width:460px; justify-self:end; width:100%;
  align-self:end; margin-bottom:calc(-1 * var(--hero-foot) - var(--cross))}
.p-contact .scene img{max-height:420px; position:relative; z-index:1}
/* a soft night pool under the scene where it crosses the seam, so its dark floor dissolves into the paper band */
.p-contact .scene::before{content:""; position:absolute; left:8%; right:4%; bottom:-6%; height:44%; background:radial-gradient(closest-side, rgb(18 17 48 / .55), rgb(18 17 48 / 0)); pointer-events:none; z-index:0}
.p-contact .hero-copy{align-self:center; padding-bottom:clamp(8px, 2vw, 32px)}
.ask{padding-bottom:clamp(48px, 6vw, 80px)}
.ask .wrap{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(32px, 4vw, 56px); align-items:start; z-index:6}
.qcard{position:relative; z-index:6; margin-top:calc(-1 * clamp(80px, 8vw, 120px)); background:var(--bg-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); padding:clamp(24px, 3vw, 40px)}
.contact-side{padding-top:calc(var(--cross) + clamp(24px, 3vw, 40px)); display:grid; gap:28px}
.field{margin:0 0 20px}
.field label{display:block; font-weight:700; margin:0 0 6px}
.field .help{display:block; font-size:1rem; color:var(--ink-soft); margin:-2px 0 8px}
.field input,.field textarea{width:100%; font:400 1.0625rem/1.5 var(--sans); color:var(--ink); background:#fff; border:1.5px solid #B9B8DA; border-radius:10px; padding:11px 14px}
.field input::placeholder,.field textarea::placeholder{color:#6E6D8A; opacity:1}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--focus-light); outline-offset:2px; border-color:var(--indigo)}
.ferr{display:block; margin:6px 0 0; font-size:1rem; font-weight:700; color:#A3243B}
.field [aria-invalid="true"]{border-color:#A3243B}
.qdone{display:none; margin:16px 0 0; font-weight:700; color:var(--indigo-dk)}
.qdone.show{display:block}
.addr-card{background:var(--bg-mist); border-radius:16px; padding:28px 30px}
.addr-card address{font-style:normal; line-height:1.7}
.quiet-line{margin:0; color:var(--ink-soft); font-size:1rem; max-width:none}

/* ===== Book a call (split hero, S2 inside the hero; the panel and calendar cross the seam) ===== */
.p-book .hero{--hero-foot:clamp(120px, 11vw, 168px)}
.p-book .scene{--pos:50% 40%; --fl:8%; --fr:8%; --ft:6%; --fb:10%; max-width:520px; justify-self:end; width:100%}
.p-book .scene img{max-height:380px}
.book{padding-bottom:var(--pad)}
.book .wrap{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:calc(-1 * clamp(88px, 8vw, 120px)); z-index:6}
.sheet,.cal{background:var(--bg-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); position:relative}
.sheet{padding:28px 28px 24px}
.sheet h2,.cal h2{margin-bottom:.6em}
.sheet-head{display:flex; gap:18px; align-items:center; margin:0 0 18px}
.sheet-head h2{margin:0}
.portrait{flex:0 0 auto; width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:50% 30%; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--hl)}
.sheet ol{list-style:none; margin:0; padding:0}
.sheet li{padding:16px 0 14px; border-top:1px solid var(--line)}
.sheet summary{list-style:none; cursor:default; display:flex; gap:12px; align-items:flex-start}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary h3{display:flex; gap:14px; align-items:flex-start; margin:0; flex:1 1 auto}
.n{flex:0 0 auto; display:inline-grid; place-items:center; width:36px; height:36px; margin-top:-4px; border-radius:50%; background:var(--bg-mist); color:var(--indigo-dk); font:600 1.25rem/1 var(--serif); font-variant-numeric:lining-nums}
.sheet li p{margin:6px 0 0 50px; font-size:1.0625rem; color:var(--ink-soft)}
.sheet .after{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:1.0625rem}
.sheet .after + .after{border-top:0; padding-top:0; margin-top:10px}
.cal{padding:28px 28px 20px}
.cal-len{display:inline-flex; align-items:center; gap:10px; margin:0 0 12px; padding:8px 16px; border-radius:999px; background:var(--bg-mist); color:var(--ink); font-weight:700}
.cal-len svg{width:20px; height:20px; color:var(--indigo)}
.cal-frame{position:relative; margin:8px -12px 0; border-radius:10px; background:none}
.cal-frame iframe{display:block; width:100%; height:640px; border:0; position:relative; z-index:1; background:transparent}   /* round 6 #16: height set from the widget's own message (inline script on /book-a-call) */

/* feature quote (plan §5): large Fraunces italic, a 64px indigo mark, name only, sparkles beside */
.fquote{position:relative; max-width:880px; margin:0 auto}
.fquote video{width:100%; aspect-ratio:16/9; height:auto; border-radius:16px; background:var(--bg-night); box-shadow:var(--shadow-card)}
.fquote .qm{display:block; font:700 64px/1 var(--serif); color:var(--indigo); height:40px; margin:32px 0 0}
.fquote blockquote{margin:8px 0 0}
.fquote blockquote p{font:italic 400 clamp(1.25rem, 1rem + 1vw, 1.875rem)/1.4 var(--serif); color:var(--ink); max-width:none}
.fquote cite{display:block; font:700 1rem/1.4 var(--sans); font-style:normal; color:var(--ink-soft); margin-top:4px}
.fquote .decor-spark{right:-120px; top:calc(min(880px, 100%) * 9 / 16 + 8px)}

.quiet{padding-block:clamp(36px, 4vw, 56px)}
.quiet p{max-width:none; margin:0; color:var(--ink-soft); font-size:1rem}

/* ===== footer (plan §9): four columns, the ecosystem column 4 ===== */
.site-foot{background:var(--bg-night); color:var(--on-dark-2); padding-block:64px 28px; border-top:1px solid rgb(255 255 255 / .08)}
.foot-grid{display:grid; grid-template-columns:5fr 3fr 4fr; gap:40px}
.foot-logo{display:inline-flex; margin-bottom:24px}
.site-foot address{font-style:normal; font-size:1rem; line-height:1.6; color:var(--on-dark-2)}
.site-foot .lbl{display:block; font-weight:700; color:#fff; font-size:.9375rem}
.foot-col h2{font:700 .9375rem/1.3 var(--sans); text-transform:uppercase; letter-spacing:.12em; color:var(--peri); margin:0 0 14px}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin:0 0 8px}
.foot-col a{color:var(--on-dark-2); text-decoration:none; font-size:1rem}
.foot-col a:hover{color:#fff; text-decoration:underline}
/* ===== footer ecosystem strip (round 6 #24, design-plan §14.11) ===== */
.eco-strip{padding-bottom:clamp(28px, 3vw, 40px); margin-bottom:clamp(28px, 3vw, 40px); border-bottom:1px solid rgb(255 255 255 / .1)}
.eco-strip h2{font:700 .9375rem/1.3 var(--sans); text-transform:uppercase; letter-spacing:.12em; color:var(--peri); margin:0 0 16px}
.eco-strip ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px){ .eco-strip ul{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .eco-strip ul{grid-template-columns:repeat(4, minmax(0,1fr))} }
.eco-strip a,.eco-strip .eco-tile{display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:14px; align-items:center; min-height:72px; padding:12px 14px; border-radius:16px; background:rgb(255 255 255 / .04); border:1px solid rgb(255 255 255 / .1); text-decoration:none; height:100%}
.eco-strip a:hover{background:rgb(255 255 255 / .08)}
.eco-strip a:focus-visible{outline:3px solid var(--focus-dark); outline-offset:2px}
.eco-strip img{grid-row:1 / span 2; width:48px; height:48px; border-radius:50%; object-fit:cover; background:#fff}
/* D-670 #24: Sparkitive strip icon is her favicon-version art (assets/logo/d670/sparkitive-strip-*), shown whole inside the round */
.eco-strip picture{grid-row:1 / span 2; display:block; width:48px; height:48px}
.eco-strip img.eco-sp-img{box-sizing:border-box; padding:3px; object-fit:contain}
.eco-strip .eco-name{color:#fff; font:700 1.0625rem/1.3 var(--sans)}
.eco-strip .eco-desc{color:var(--on-dark-2); font:400 .9375rem/1.4 var(--sans)}
.eco-strip a:hover .eco-name{text-decoration:underline}
.foot-bar{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:48px; padding-top:24px; border-top:1px solid rgb(255 255 255 / .1); font-size:.875rem}
.foot-bar a{color:var(--on-dark-2)} .foot-bar a:hover{color:#fff}
.socials{display:flex; gap:10px; list-style:none; margin:0; padding:0}
.socials a{display:block; width:36px; height:36px; color:var(--on-dark-2)}
.socials a:hover{color:#fff}
.socials svg{width:36px; height:36px}
.credit{margin-left:auto}

/* motion: a one-time fade-and-rise, button press, card lift; nothing moves on its own */
.rv{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease; animation:rvsafe 0s 3s forwards}
  .js .rv.in{opacity:1; transform:none}
  @keyframes rvsafe{to{opacity:1; transform:none}}
  .sheet,.cal,.qcard{transition:transform .2s, box-shadow .2s}
  .sheet:hover,.cal:hover,.qcard:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }

/* ===== responsive ===== */
@media (max-width:1279px){ .decor-spark--margin,.fquote .decor-spark{display:none} }
@media (max-width:1099px){
  .book .wrap{grid-template-columns:1fr; gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1}
}
@media (max-width:899px){
  .hero .wrap{grid-template-columns:1fr; gap:28px}
  .scene{justify-self:stretch; max-width:none}
  .scene img{aspect-ratio:16/10; max-height:46vh}
  .p-contact .hero,.p-book .hero{--hero-foot:clamp(40px, 6vw, 56px)}
  .hero .scene > .decor-spark{left:auto !important; right:0 !important; top:-40px !important}
  .p-contact .scene{--pos:60% 35%; --fl:8%; --fr:6%; margin-bottom:calc(-1 * var(--hero-foot) - var(--cross))}
  .p-contact .scene img{max-height:46vh}
  .p-book .scene{--pos:50% 35%; --fl:5%; --fr:5%; margin-bottom:calc(-1 * var(--hero-foot) - var(--cross))}
  .p-book .scene img{max-height:46vh}
  .ask{padding-top:calc(var(--cross) + 28px)}
  .ask .wrap{grid-template-columns:1fr; gap:28px}
  .qcard{margin-top:0}
  .contact-side{padding-top:0}
  .book{padding-top:calc(var(--cross) + 28px)}
  .book .wrap{margin-top:0}
}
@media (max-width:639px){
  .sheet{padding:22px 18px 18px}
  .sheet summary{cursor:pointer; justify-content:space-between; min-height:44px}
  .sheet summary::after{content:""; flex:0 0 auto; width:10px; height:10px; margin-top:9px; border-right:2px solid var(--indigo); border-bottom:2px solid var(--indigo); transform:rotate(45deg); transition:transform .2s}
  .sheet details[open] summary::after{transform:rotate(-135deg); margin-top:14px}
  .sheet li p{margin-left:0}
  .portrait{width:72px; height:72px}
  .cal{padding:22px 16px 16px} .cal-frame{margin-inline:-8px} .cal-frame iframe{height:600px}
  .addr-card{padding:24px 22px}
  .credit{margin-left:0}
}

/* ===== How it works (round 5 part 2, 2026-10-26). New selectors only: every rule below is .p-how or an .hw-* class,
   so nothing on Contact or Book a call matches it. Components: split sections, the belief bubble, the note,
   the steps sheet, the four-up, the three endings, the fit comparison, testimonials, the call card, the FAQ
   and the after-the-call card, the close band. ===== */
/* Gate B rework, 2026-11-03: the H1 one step down; S3 sits inside the night on wide screens, the way Book a call's scene does.
   Below 900px it crosses the seam, as Book a call's does there. */
.p-how .hero,.p-svc .hero{--hero-foot:clamp(88px, 8vw, 128px)}
.p-how .hero-copy h1,.p-svc .hero-copy h1{font-size:clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height:1.06}
/* 13/11 rather than Book a call's 6/6: the H1 sets in three lines at 1440 (four at 6/6) and the scene keeps 488px */
.p-how .hero .wrap,.p-svc .hero .wrap{grid-template-columns:minmax(0,13fr) minmax(0,11fr)}
.p-how .scene,.p-svc .scene{--pos:50% 45%; --fl:8%; --fr:8%; --ft:6%; --fb:10%; max-width:520px; justify-self:end; width:100%}
.p-how .scene img,.p-svc .scene img{max-height:380px; position:relative; z-index:1}
/* both bands carrying a seam here are night already, so the seam needs no fill of its own; without it, a fractional seam height
   left a 1px night line under the arc at 1440 once the scene no longer covered it */
.p-how .seam,.p-svc .seam{background:transparent}

/* split: heading column + reading column */
.hw-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 80px); align-items:start}
.hw-split > h2,.hw-split > div > h2{margin:0 0 .6em}
.hw-split > h2:only-child{margin:0}
.hw-hero-spark{right:-8px; top:-56px}
/* R8 F-3 (D-665 G-4): at 320-359 the hero spark sat over the button; smaller and lower there, whole and still beside the scene */
@media (max-width:359px){ .p-how .hero .scene > .hw-hero-spark{width:64px; height:64px; top:-24px !important} }   /* beats the .hero .scene > .decor-spark top:-40px !important rule */
.hw-call-spark{right:-28px; top:-28px}
.hw-body p:last-child{margin-bottom:0}
.hw-first mark.hl .nw{white-space:nowrap}   /* keep "half-built" from breaking at its hyphen inside the swipe */
.hw-lead{font:italic 400 clamp(1.25rem, 1.05rem + .8vw, 1.5rem)/1.45 var(--serif); color:var(--ink)}
.hw-split--problem .hw-lead{font-size:clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); line-height:1.4; margin:0}
.hw-nb{white-space:nowrap}   /* review L3: "3-month", "90-Minute" never break at the hyphen */
/* review M6: a card crosses the band edge above it (plan 1, Expressive body) */
.hw-lift{margin-top:calc(-1 * var(--pad) - var(--cross)); position:relative; z-index:3}
.hw-before-lift{padding-bottom:calc(var(--pad) + var(--cross))}
.hw-h-wide{max-width:none; margin-bottom:clamp(28px, 3vw, 44px)}

/* the belief, as the reader's own speech bubble (plan 5) */
.hw-bubble{position:relative; display:block; max-width:960px; background:var(--bg-card); border:1.5px solid var(--line); border-radius:28px;
  padding:clamp(22px, 2.6vw, 36px) clamp(24px, 3.2vw, 44px); box-shadow:var(--shadow-card); margin:0 0 clamp(36px, 4vw, 56px)}
.hw-bubble::after{content:""; position:absolute; left:64px; bottom:-13px; width:24px; height:24px; background:var(--bg-card);
  border-right:1.5px solid var(--line); border-bottom:1.5px solid var(--line); transform:rotate(45deg); border-bottom-right-radius:4px}
.hw-bubble h2{margin:0; font-style:italic; font-weight:400; line-height:1.25}   /* R13b: inner tier size, italic 400 kept */
/* Gate B rework: the text in one column, the belief spot (S-belief, 1:1) in the right column, centred against each other */
.hw-belief{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.hw-belief-text p:last-child{margin-bottom:0}
.hw-belief-text p,.hw-hand-list p{text-wrap:pretty}   /* review F4: no one-word last lines */
.hw-belief-spot{margin:0}
.hw-belief-spot img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:50% 30%; border-radius:24px; box-shadow:var(--shadow-card)}
.hw-spark-r{right:-110px; top:12px}
.hw-spark-l{left:-110px; top:12px}
/* review M6: below 1280 the margin clusters move into the band's top padding instead of disappearing */
@media (max-width:1279px){
  .p-how .decor-spark--margin{display:block; width:56px; height:56px; left:auto; right:clamp(20px, 4vw, 40px); top:calc(-1 * var(--pad) + 6px)}
}

/* D-528 gate D-3: the margin clusters stay inside the viewport from 1280. They sit 12px in from the viewport edge
   and at least 12px clear of the content edge, shrinking to 56px where the margin is narrow; from about 1444 exactly as before. */
@media (min-width:1280px){
  .hw-spark-r,.hw-spark-l{width:clamp(56px, calc((100vw - 1200px) / 2 + 16px), 96px); height:clamp(56px, calc((100vw - 1200px) / 2 + 16px), 96px)}
  .hw-spark-r{right:calc(-1 * min(110px, (100vw - 1200px) / 2 - 12px))}
  .hw-spark-l{left:calc(-1 * min(110px, (100vw - 1200px) / 2 - 12px))}
}
/* D-571 S1 (design-plan 15.15): the Contact margin sparkle stays inside the viewport from 1280, as D-3 does on How it works.
   12px in from the viewport edge, at least 12px clear of the content edge, 56px where the margin is narrow; from 1460 exactly as before.
   !important on right only: the sparkle's position is an inline style on contact l.109. */
@media (min-width:1280px){
  .p-contact .ask .decor-spark--margin{width:clamp(56px, calc((100vw - 1200px) / 2 + 16px), 96px); height:clamp(56px, calc((100vw - 1200px) / 2 + 16px), 96px);
    right:calc(-1 * min(118px, (100vw - 1200px) / 2 - 12px)) !important}
}

/* a note from Christina */
.hw-note{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px, 4vw, 56px); align-items:start; max-width:1040px; margin-inline:auto;
  background:var(--bg-card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-card); padding:clamp(28px, 4vw, 56px)}
.hw-note-photo img{width:168px; height:168px; border-radius:50%; object-fit:cover; object-position:50% 30%; box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--hl)}
.hw-sign{font:italic 400 1.875rem/1.1 var(--serif); color:var(--indigo-dk); margin:.2em 0 .5em}
.hw-more{margin:0; font-weight:700}

/* Gate B rework: the four steps as four cards read left to right (2x2 below 1100px, stacked below 640px).
   Number then branded icon on top; an indigo chevron in each gap carries the order to the next card. */
.hw-steps{--g:clamp(16px, 2vw, 28px); list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--g); align-items:stretch}
.hw-steps li{position:relative; display:flex; flex-direction:column; gap:18px; background:var(--bg-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); padding:24px 22px 26px}
.hw-step-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.hw-step-top .n{order:-1; margin-top:0; width:44px; height:44px; font-size:1.375rem}
.hw-step-icon{width:56px; height:56px}
.hw-steps p{margin:0; font-size:1.0625rem}
.hw-steps strong{display:block; font:600 1.5rem/1.2 var(--serif); color:var(--ink); margin:0 0 .35em; text-wrap:balance}
.hw-steps li:not(:last-child)::after{content:""; position:absolute; z-index:2; top:42px; right:calc(var(--g) / -2 - 6px); width:9px; height:9px;
  border-top:2.5px solid var(--indigo); border-right:2.5px solid var(--indigo); transform:rotate(45deg)}

/* Gate B rework (D-204): "Hand off as much as you like" as a night band mid-page. Heading on the left, centred against
   the three ways the hand-off flexes on the right; the ownership line closes the band as a full-width strip. Each row's mark is two circles, lavender (your team) and periwinkle (ours),
   whose overlap changes: mostly ours; half and half; ours scaling (dashed ring). DOM order is the copy's order. */
.hw-hand{--seam-h:clamp(28px, 3.5vw, 56px); padding-block:calc(var(--pad) + var(--seam-h)); overflow:hidden}
.hw-hand::before{content:""; position:absolute; width:min(820px, 110vw); aspect-ratio:1; left:-18%; top:50%; transform:translateY(-50%); background:radial-gradient(closest-side, rgb(140 138 236 / .18), transparent 72%); pointer-events:none}
.hw-hand .seam path{fill:var(--bg-mist)}
.hw-hand .hw-seam-top{top:-1px; bottom:auto; transform:scaleY(-1)}
.hw-hand .wrap{display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"h" "list" "own"; row-gap:clamp(32px, 4vw, 48px)}
.hw-hand-h{grid-area:h; margin:0; color:#fff; max-width:none}
.hw-hand-em{display:block; margin-top:.15em; color:var(--lav); font-style:italic; font-weight:400}
.hw-hand-own{grid-area:own; margin:0; max-width:none; padding:18px 24px; border:1.5px solid rgb(201 200 244 / .35); border-radius:16px; font-size:1.0625rem; text-align:center}
/* review F3 (2026-11-03): heading full width in two lines; the three ways sit side by side, read left to right */
.hw-hand-list{grid-area:list; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
.hw-hand-list li{display:flex; flex-direction:column; gap:18px; padding:0 clamp(24px, 3vw, 44px)}
.hw-hand-list li:first-child{padding-left:0}
.hw-hand-list li:last-child{padding-right:0}
.hw-hand-list li + li{border-left:1px solid rgb(255 255 255 / .12)}
.hw-hand-list p{margin:0; font-size:1.1875rem; color:var(--on-dark)}
.hw-venn-wrap{display:block; line-height:0}
.hw-venn{width:64px; height:40px; overflow:visible}
.hw-venn .you{fill:var(--lav)}
.hw-venn .us{fill:var(--peri); fill-opacity:.85}
.hw-venn .us-ring{fill:none; stroke:var(--peri); stroke-width:1.5; stroke-dasharray:3 3}

/* how it ends: three endings on one sheet */
.hw-ends-wrap > div{margin-bottom:clamp(24px, 3vw, 36px)}
.hw-ends-wrap > div > h2{margin-bottom:.5em}
.hw-ends-wrap > div > p{max-width:var(--m-lede); margin:0}
.hw-ends{max-width:1040px; list-style:none; margin:0; padding:clamp(8px, 1.5vw, 12px) clamp(24px, 3vw, 36px); background:var(--bg-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card)}
.hw-ends li{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"mark label" "mark text"; column-gap:16px; padding:22px 0; border-top:1px solid var(--line)}
.hw-ends .hw-mark{grid-area:mark}
.hw-ends .hw-end-label{grid-area:label}
.hw-ends p{grid-area:text; max-width:48ch}
.hw-ends li:first-child{border-top:0}
.hw-ends p{margin:0}
.hw-ends strong{display:block; align-self:end; font:700 1.25rem/1.3 var(--sans); margin:0 0 .25em}
.hw-mark{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--bg-mist)}
.hw-mark svg{fill:var(--indigo)}

/* the fit comparison */
/* R8 blueprint 90 (design-plan 16.16.8): the fit section's qualifier, one .hw-lead line across both cards; the two cards stretch to one height */
.hw-fit-lead{max-width:60ch; margin:0 0 clamp(24px, 3vw, 36px)}
#fit .hw-fit{align-items:stretch}
/* R8 gate F-2 (design-plan 16.17.2): her "decorative element or another illustration right there" (l.171). Spark, whole, fills the
   foot of the "not the right fit" card; the card is a column so she sits at its bottom right at any card height. */
#fit .hw-fit-no{display:flex; flex-direction:column}
#fit .hw-fit-no > img.pose{width:144px; margin:auto 0 0; padding-top:16px; align-self:flex-end}
@media (min-width:1100px) and (max-width:1279px){ #fit .hw-fit-no > img.pose{width:120px} }
@media (max-width:899px){ #fit .hw-fit-no > img.pose{width:112px} }
.hw-fit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 2.5vw, 32px); align-items:start; margin-top:clamp(8px, 1vw, 16px)}
.hw-fit-card{border-radius:16px; padding:clamp(24px, 3vw, 36px)}
.hw-fit-yes{background:var(--bg-card); border:1px solid var(--line); box-shadow:var(--shadow-card)}
.hw-fit-no{background:var(--bg-mist); border:1px solid var(--line)}
.hw-fit h3{font-size:1.375rem; margin:0 0 .8em}
.hw-fit ul{list-style:none; margin:0; padding:0}
.hw-fit li{position:relative; padding:0 0 0 38px; margin:0 0 16px}
.hw-fit li:last-child{margin-bottom:0}
.hw-fit-yes li::before{content:""; position:absolute; left:6px; top:.3em; width:9px; height:16px; border-right:3px solid var(--indigo); border-bottom:3px solid var(--indigo); transform:rotate(45deg)}
.hw-fit-no li::before{content:""; position:absolute; left:2px; top:.55em; width:10px; height:10px; border-top:3px solid var(--ink-soft); border-right:3px solid var(--ink-soft); transform:rotate(45deg)}
.hw-unsure{margin:22px 0 0; padding-top:18px; border-top:1px solid #CFCEEE; max-width:none}

/* testimonials: Fraunces italic, indigo mark, name only (plan 5) */
.hw-quotes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 3vw, 40px)}
/* review M5: Book a call's feature-video treatment (.fquote, unchanged), two side by side */
.hw-vquote{max-width:none; margin:0}
/* qafix B (R17e): names line up across the pair whatever the quote lengths */
.hw-vquote{display:flex; flex-direction:column}
.hw-vquote figcaption{margin-top:auto}
/* qafix B (R17d): both video boxes 16:9 whatever the files' real size; letterbox, never crop */
.hw-vquote video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:var(--bg-deep)}
.hw-vquote blockquote p{font-size:clamp(1.1875rem, 1rem + .6vw, 1.4375rem); line-height:1.45}

/* bridge to the call: a deep card in a light band */
.hw-call{position:relative; display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(28px, 4vw, 56px); align-items:center;
  background:var(--bg-deep); border-radius:28px; padding:clamp(32px, 5vw, 64px); overflow:visible}
.hw-call::before{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(60% 90% at 85% 50%, rgb(140 138 236 / .22), transparent 70%); pointer-events:none}
.hw-call > *{position:relative}
.hw-call h2{color:#fff}
.hw-call p{margin:0; color:var(--on-dark-2)}
.hw-call-act{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center}
.hw-call-photo{width:112px; height:112px; border-radius:50%; object-fit:cover; object-position:50% 30%; box-shadow:0 0 0 3px var(--bg-deep), 0 0 0 5px var(--peri)}
.hw-call .hw-call-link{font-size:1rem}
.hw-call > .decor-spark{position:absolute}

/* FAQ + the after-the-call card: one reading column */
.hw-faqcol{max-width:960px}   /* review L2: inside a normal .wrap, so its left edge matches every section */
.hw-faqcol > h2{margin-bottom:clamp(24px, 3vw, 36px)}
.hw-faq{background:var(--bg-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); padding:4px clamp(22px, 3vw, 36px)}
.hw-faq details{border-top:1px solid var(--line); padding:20px 0}
.hw-faq details:first-child{border-top:0}
.hw-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; min-height:44px}
.hw-faq summary::-webkit-details-marker{display:none}
.hw-faq summary h3{margin:0; font-size:1.25rem}
.hw-faq summary::after{content:""; flex:0 0 auto; width:10px; height:10px; margin-top:8px; border-right:2px solid var(--indigo); border-bottom:2px solid var(--indigo); transform:rotate(45deg); transition:transform .2s}
.hw-faq details[open] summary::after{transform:rotate(-135deg); margin-top:13px}
.hw-faq details p{margin:10px 0 0; color:var(--ink)}
.hw-faq details p{text-wrap:pretty}   /* review follow-up: no one-word last line in the answers */
.hw-next{margin-top:clamp(20px, 2.5vw, 28px); background:var(--bg-paper); border:1.5px solid var(--peri); border-radius:16px; padding:clamp(22px, 3vw, 36px)}
.hw-next-title{font:700 1.375rem/1.3 var(--sans); margin:0 0 .5em}   /* R13c: a card title, H3 style */
.hw-next p:last-child{margin-bottom:0}

/* the close: deep band before the night footer */
.hw-close{background:var(--bg-deep); text-align:center; padding-block:var(--pad); overflow:hidden}
.hw-close::before{content:""; position:absolute; left:50%; top:50%; width:min(900px, 120vw); aspect-ratio:2/1; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgb(140 138 236 / .2), transparent 72%); pointer-events:none}
.hw-close h2{max-width:20ch; margin-inline:auto; color:#fff}
.hw-close p{margin:0 auto 1.6em; max-width:var(--m-lede); font-size:1.25rem}
.hw-close-spark{right:0; top:-28px}

@media (prefers-reduced-motion:no-preference){
  .hw-note,.hw-steps li,.hw-ends,.hw-fit-card,.hw-faq{transition:transform .2s, box-shadow .2s}
  .hw-note:hover,.hw-steps li:hover,.hw-ends:hover,.hw-fit-yes:hover{transform:translateY(-2px)}
}
@media (max-width:1279px){ .hw-spark-r,.hw-spark-l{display:none} }
@media (max-width:1099px){
  .hw-steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .hw-steps li:nth-child(2)::after{display:none}
}
@media (max-width:899px){
  /* phones and tablets: S3 crosses the seam, as Book a call's scene does below 900px */
  .p-how .hero,.p-svc .hero{--hero-foot:clamp(40px, 6vw, 56px)}
  .p-how .hero .wrap,.p-svc .hero .wrap{grid-template-columns:1fr}
  .p-how .scene,.p-svc .scene{--pos:50% 40%; --fl:5%; --fr:5%; --fb:18%; max-width:none; justify-self:stretch; margin-bottom:calc(-1 * var(--hero-foot) - var(--cross))}
  .p-how .scene img,.p-svc .scene img{max-height:46vh}
  .p-how .scene::before,.p-svc .scene::before{content:""; position:absolute; left:6%; right:6%; bottom:-4%; height:40%; background:radial-gradient(closest-side, rgb(18 17 48 / .5), rgb(18 17 48 / 0)); pointer-events:none; z-index:0}
  .hw-first,.p-svc #projects{padding-top:calc(var(--cross) + clamp(48px, 6vw, 88px))}
  .hw-split,.hw-call{grid-template-columns:1fr}
  .hw-belief{grid-template-columns:1fr; gap:32px}
  .hw-belief-spot{max-width:440px; width:100%; justify-self:center}   /* review F1: centred in the stack */
  .hw-hand .wrap{row-gap:28px}
  .hw-hand-list{grid-template-columns:1fr}
  .hw-hand-list li{display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; align-items:center; padding:26px 0; border-top:1px solid rgb(255 255 255 / .12)}
  .hw-hand-list li + li{border-left:0}
  .hw-hand-list li:first-child{border-top:0; padding-top:4px}
  .hw-hand-list li:last-child{padding-bottom:0}
  .hw-fit,.hw-quotes{grid-template-columns:1fr}
  .hw-call-act{align-items:flex-start; text-align:left}
  .hw-close-spark,.hw-call-spark{width:64px; height:64px; right:0; top:-52px}
  .hw-hero-spark{width:80px; height:80px; right:0; top:-44px}
}
@media (max-width:639px){
  .hw-note{grid-template-columns:1fr}
  .hw-note-photo img{width:120px; height:120px}
  .hw-steps{grid-template-columns:1fr}
  .hw-steps li::after{display:none}
  .hw-steps strong{font-size:1.375rem}
  .hw-hand-list li{grid-template-columns:52px minmax(0,1fr); gap:18px}
  .hw-venn{width:52px; height:33px}
  .hw-hand-list p{font-size:1.125rem}
  .hw-bubble::after{left:40px}
}

/* ===== Round 5 step 10a additions (2026-11-03): shared pieces the three mockups did not need ===== */
/* second button: outline on the night, same pill (used beside the primary on the 404) */
.btn--secondary{background:transparent; color:var(--cta-ink); box-shadow:none}
.dark .btn--secondary{background:transparent; border-color:var(--lav); box-shadow:none; color:#fff}
.dark .btn--secondary:hover{background:rgb(255 255 255 / .1); color:#fff}
.dark .btn--secondary:active{transform:translate(1px,1px)}
.hero-acts{display:flex; flex-wrap:wrap; gap:16px 20px; margin:0 0 1.4em}
/* the shared FableForge line (C6): one component, one wording, one link everywhere */
.ffcall{margin:1.4em 0 0; max-width:var(--m-body)}
.ffcall:first-child{margin-top:0}
/* round 6 #19 (design-plan §14.9): the door line */
.ffcall:not(.hm-doors){display:flex; align-items:center; gap:14px; margin:1.6em 0 0; padding:14px 0; background:none; border-radius:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:inherit; line-height:1.55; max-width:var(--m-body)}
.ffcall:not(.hm-doors)::before{content:""; flex:none; width:44px; height:44px; border-radius:12px; background:var(--bg-night) var(--ff-icon) center / 36px 36px no-repeat}
.ffcall:not(.hm-doors):first-child{margin-top:0}
/* compact night hero for utility pages: H1, one line, a sparkle cluster, no scene */
.hero--compact{--hero-foot:clamp(72px, 7vw, 104px); padding-top:clamp(48px, 6vw, 88px)}
.hero--compact .wrap{display:block}
.hero--compact .hero-copy{max-width:760px}
.hero--compact .wrap > .decor-spark{right:clamp(20px, 6vw, 120px); top:50%; transform:translateY(-50%)}
.hero--compact .lede{margin-bottom:0}
@media (max-width:899px){ .hero--compact .wrap > .decor-spark{width:72px; height:72px; right:20px; top:-28px; transform:none} }
@media (min-width:600px) and (max-width:899px){ .hero--compact .hero-copy{padding-right:96px} }
/* qafix B (R17b): below 600px the spark sits in the compact hero's top band, smaller, above the breadcrumb and H1; the band is made deep enough to hold it. The article hero repeats the selector in blog.css so it loads after the article rule there (Legal, Thank-you and Unsubscribe do not load blog.css). */
@media (max-width:599px){
  .hero--compact{padding-top:72px}
  .hero--compact .wrap > .decor-spark{width:44px; height:44px; right:20px; top:-56px; transform:none}
}
/* qafix B (R17b): two more sparks nudged clear of text. Contact hero spark down 20px below 900px (was over the lede; R17d); the closing-band spark up 12px (was touching the H2; still inside the band, which clips at its top edge). */
@media (max-width:899px){ .p-contact .hero .scene > .decor-spark{top:-20px !important} }   /* R17d: extended from 599 */
@media (max-width:599px){
  .hw-close-spark{top:-64px}
}
/* a reading column on paper: thank-you, unsubscribe, legal */
.read{max-width:760px}
.read h2{margin-top:0}
.read .ffcall{margin-top:1.6em}
.read .back{margin:2em 0 0; font-weight:700}
.read-sec + .read-sec{margin-top:clamp(40px, 5vw, 64px)}
/* legal */
.legal .legal-toc{background:var(--bg-mist); border-radius:16px; padding:22px 28px; margin:0 0 clamp(40px, 5vw, 64px)}
.legal .legal-toc h2{margin:0 0 .5em}
.legal .legal-toc ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:6px 24px}
.legal .legal-toc a{display:inline-block; padding:6px 0}
.legal h2{margin:clamp(40px, 5vw, 64px) 0 .6em; padding-top:clamp(24px, 3vw, 36px); border-top:1px solid var(--line); scroll-margin-top:96px}
.legal .legal-toc + h2{margin-top:0}
.legal h3{margin:1.6em 0 .4em}
.legal ul,.legal ol{padding-left:1.4em; max-width:var(--m-body)}
.legal p,.legal li,.lede,main p,main li,.hero-copy p{text-wrap:pretty}
.sheet summary h3{text-wrap:pretty}
.legal li{margin:0 0 .5em}
.legal address{font-style:normal; margin:0 0 1em; line-height:1.6}
.legal code{font-size:.95em; background:var(--bg-mist); padding:1px 6px; border-radius:6px}
/* R7 #32 (design-plan 16.3): from 900 the TOC is a sticky left column and the policy reads on the right (library legal-page template). Below 900 it stays the block above the text. */
@media (min-width:900px){
  .read.legal{max-width:none; display:grid; grid-template-columns:clamp(200px, 20vw, 248px) minmax(0,1fr); column-gap:clamp(40px, 5vw, 72px); align-items:start}
  .legal .legal-toc{position:sticky; top:108px; margin:0; max-height:calc(100vh - 132px); overflow-y:auto; padding:20px 20px 20px 18px}
  .legal .legal-toc ul{display:block}
  .legal .legal-toc li{margin:0}
  .legal .legal-toc a{display:block; padding:7px 0 7px 12px; border-left:2px solid transparent; line-height:1.35}
  .legal .legal-toc h2{font-size:1.25rem; padding-top:0; border-top:0}
  .legal-body{min-width:0; max-width:760px}
}
.legal .legal-toc a[aria-current="true"]{font-weight:700; color:var(--ink); border-left-color:var(--indigo)}
.legal-body > h2:first-child{margin-top:0}
/* R7 #33 (design-plan 16.7): booking thank-you, the scene beside the reading column from 1100, above it below 1100 */
.ty-grid{display:grid; gap:clamp(28px, 4vw, 40px)}
.ty-scene{margin:0; order:-1; max-width:420px}
.ty-scene img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:24px}
@media (min-width:1100px){ .ty-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(40px, 5vw, 72px); align-items:start} .ty-scene{order:0; max-width:none} }
/* R8 #34 (design-plan 16.16.1): unsubscribe, sad Spark and the rejoin message as one card, centred; replaces the R7 16.8 tile. Spark is whole in the 4:3 file; nothing crops her. */
.us-card{display:grid; grid-template-columns:minmax(0,1fr); max-width:560px; margin-inline:auto; background:var(--bg-card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-card); overflow:hidden}
.us-spark{margin:0; display:grid; place-items:center; background:#100F3F}
.us-spark img{display:block; width:100%; height:auto; aspect-ratio:4/3; max-width:none; object-fit:contain}
.us-body{align-self:center; padding:clamp(24px, 4vw, 48px); text-align:center}
.us-ask{margin:0; max-width:none}
.us-ask .us-q{display:block; font:600 clamp(1.625rem, 1.3rem + 1vw, 2rem)/1.2 var(--serif); letter-spacing:-.01em; color:var(--ink); margin:0 0 .75em}
.us-ask .btn{max-width:100%; border-radius:24px; text-align:center; text-wrap:balance}
/* R8 gate F-5 (design-plan 16.17.3): below 1100 the label sets as two deliberate tiers, name over descriptor; one line from 1100 */
.us-ask .us-btn{gap:0}
.us-sep{white-space:pre}
@media (max-width:1099px){
  .us-ask .us-btn{flex-direction:column; line-height:1.2; padding-block:.6em}
  .us-sep{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .us-sub{font-size:.8125rem; font-weight:400; letter-spacing:.01em; margin-top:2px}
}
.us-card .back{margin:1.5em 0 0; font-weight:700}
@media (max-width:419px){ .us-body{padding:24px 20px} .us-ask .btn{font-size:1rem; padding-inline:1.1em} }
@media (max-width:359px){ .us-body{padding:24px 14px} .us-ask .us-btn{font-size:.9375rem; padding-inline:.8em} }
@media (min-width:900px){ .us-card{max-width:none; grid-template-columns:minmax(0,5fr) minmax(0,6fr)} .us-spark{height:100%} .us-body{text-align:left} }
/* Book a call: "Is this call right for you?" sits on paper under the panel and calendar, using the fit-card pair */
.callfit{padding-top:clamp(24px, 3vw, 40px)}
.callfit .hw-fit-no ul{list-style:none; margin:0; padding:0}
.callfit .hw-fit-no li{position:relative; padding:0 0 0 38px; margin:0 0 12px}
.callfit .hw-fit-no li:last-child{margin-bottom:0}
.callfit .hw-fit-no p{max-width:none; margin:0 0 .8em}
/* qafix A (core F2): padding-block gives each line fragment of an inline link a 45px hit area (Home R12 uses 12px; 10.5px here keeps the two links hit areas overlapping by 4px or less where the list items sit 18px apart, R15b) */
.callfit .hw-fit-no a{padding-block:10.5px}
.sheet li p + p{margin-top:10px}
/* 404: split night hero, text on flat night at the left, S5 at the right; no seam, the night runs into the footer */
.p-404 .hero{--hero-foot:clamp(56px, 7vw, 96px); min-height:clamp(480px, 72vh, 760px); display:flex; align-items:center; padding-block:clamp(48px, 6vw, 88px)}
.p-404 .hero .wrap{width:100%}
.p-404 .scene{--pos:55% 40%; --fl:24%; --fr:18%; --ft:18%; --fb:22%; max-width:560px; justify-self:end; width:100%}
.p-404 .scene img{max-height:440px}
.error-code{font:700 1rem/1 var(--sans); letter-spacing:.18em; color:var(--peri); margin:0 0 1em}
@media (max-width:899px){
  .p-404 .hero{display:block; min-height:0}
  .p-404 .scene{--pos:55% 40%; justify-self:stretch; max-width:none}
}
.hw-faq summary h3{text-wrap:balance}   /* step 11: the narrower centred FAQ column on category pages (R6) otherwise leaves a one-word last line */

/* R8 (c120): at 1100px and up each plan-sheet row sets the star mark, the label and the text side by side */
@media (min-width:1100px){
  .hw-ends li{grid-template-columns:auto minmax(12rem, 16rem) minmax(0, 1fr); grid-template-areas:"mark label text"; align-items:start}
  .hw-ends strong{margin:0; align-self:start}
}
/* R9 (c121): (two columns from 1280px, not 900px: at 1100 and 1200 the columns audit LOPSIDED 2.02x and 1.80x, so they stack until there is room) Book a call "Is this call right for you?" is a heading-and-lead column beside one doors card */
.callfit .fit-grid{display:grid; gap:clamp(24px, 3vw, 36px)}
.callfit .fit-lead{font-size:clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); line-height:1.5; margin:0}
.callfit .fit-lead strong{font-weight:700}
.callfit .fit-grid h2{margin:0 0 .5em}
@media (min-width:1280px){
  .callfit .fit-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(32px, 5vw, 80px); align-items:center}
}
/* R13a (c103), narrowed by D-571: below 360 the accessibility button still floats bottom-right (42px + 20px); the footer's last bar clears it */
@media (max-width:359px){ .foot-bar{padding-bottom:72px} }
/* D-571 (design-plan 15.14): 360–959 (R7 #25: burger breakpoint now 959), the Sienna accessibility button sits in the sticky header, left of the burger,
   44px, 12px from the burger, so it never covers reading text. from 960 and below 360 it floats bottom-left (R7 #26). */
@media (min-width:360px) and (max-width:959px){
  body .asw-menu-btn{--asw-btn-size:44px; --asw-btn-size-mobile:44px; --asw-icon-size:26px; --asw-icon-size-mobile:26px;
    top:12px; bottom:auto; left:auto; right:calc(clamp(20px, 4vw, 40px) + 56px); box-shadow:none; outline:0 !important}
  body .asw-menu-btn:hover{transform:none}
  body .asw-menu-btn:focus-visible{outline:3px solid var(--focus-dark) !important; outline-offset:2px}
  body.locked .asw-menu-btn{visibility:hidden}
  body .rh-banner .wrap{padding-right:calc(clamp(20px, 4vw, 40px) + 108px)}
}
/* R7 #26 (design-plan 16.1): during a Porcupin review, the floating button (below 360, and from 960) sits 8px above Porcupin's bottom-centre toolbar.
   --porcupin-bar-space is set by Porcupin's embed (toolbar height + 32px); 78px is its one-row value. Ordinary visitors never match this rule. */
@media (max-width:359px), (min-width:960px){
  html[data-porcupin="active"] body .asw-menu-btn{bottom:calc(var(--porcupin-bar-space, 78px) + 8px)}
}
/* D-611 (design-plan 16.11): from 960 to 1365, where the button floats bottom-left and the content edge sits 38-80px in, the button is 44px at 12/12
   (x 12-56) and no .wrap content starts left of 64px, so the button never covers text. The header keeps its own gutter (the six-link fit, 16.2). */
@media (min-width:960px) and (max-width:1365px){
  body .asw-menu-btn{--asw-btn-size:44px; --asw-btn-size-mobile:44px; --asw-icon-size:26px; --asw-icon-size-mobile:26px; left:12px; bottom:12px}
  .wrap{padding-inline:max(clamp(20px, 4vw, 40px), calc(64px - max(0px, (100% - 1200px) / 2)))}
  .site-head .wrap{padding-inline:clamp(20px, 4vw, 40px)}
}
/* D-611 below 360 (design-plan 16.12): the floating button is 32px at left 4, bottom 12 (x 4-36) and .wrap content starts at 44px, so the button never
   covers text. The header keeps its 20px gutter (logo and burger). With the drawer open the button is hidden, as from 360 (D-571). */
@media (max-width:359px){
  body .asw-menu-btn{--asw-btn-size:32px; --asw-btn-size-mobile:32px; --asw-icon-size:20px; --asw-icon-size-mobile:20px; left:4px; bottom:12px}
  body.locked .asw-menu-btn{visibility:hidden}
  .wrap{padding-inline:44px}
  .site-head .wrap{padding-inline:clamp(20px, 4vw, 40px)}
}
/* D-658 (design-plan 16.13): her full mascot (616x409, never cropped) + the existing wordmark, in the header, drawer and footer. */
.logo,.foot-logo{align-items:center; gap:10px}
.logo picture,.foot-logo picture{display:flex; flex:0 0 auto}
.logo img.mascot{height:64px; width:auto; aspect-ratio:616/409; flex:0 0 auto}
.logo img.wordmark{height:25.2px; width:auto; flex:0 0 auto}
.drawer-top .logo img.mascot{height:44px} .drawer-top .logo img.wordmark{height:18.5px}
.foot-logo{gap:14px} .foot-logo img.mascot{height:84px; width:auto; aspect-ratio:616/409; flex:0 0 auto} .foot-logo img.wordmark{height:35.3px; width:auto}
/* D-658 G-1: the footer column is 372-373px at 1100-1104 (lockup needs 373.6 at gap 14); gap 12 there makes it fit with no size change. */
@media (min-width:1090px) and (max-width:1109px){ .foot-logo{gap:12px} }
@media (max-width:959px){ .logo{gap:8px} .logo img.mascot{height:46px} .logo img.wordmark{height:19.3px} }
@media (max-width:639px){ .foot-logo{gap:12px} .foot-logo img.mascot{height:70px} .foot-logo img.wordmark{height:29.4px} }
@media (max-width:359px){ .drawer-top .logo img.mascot{height:38px} .drawer-top .logo img.wordmark{height:16px}
  .foot-logo{gap:10px} .foot-logo img.mascot{height:50px} .foot-logo img.wordmark{height:21px} }
/* D-665 (design-plan 16.14): her pose-sheet poses, whole, at their own ratio; each takes the sparkle cluster's slot. Build addition: mask none (the .scene img edge-fade mask would fade the pose). */
img.pose{display:block; height:auto; max-width:none; max-height:none; aspect-ratio:auto; object-fit:contain; border-radius:0; pointer-events:none; -webkit-mask-image:none; mask-image:none}
.hero .scene > img.pose{position:absolute; z-index:5; right:-28px; top:-56px; width:clamp(140px, 13vw, 180px); height:auto; aspect-ratio:auto; max-height:none; object-fit:contain}
@media (max-width:899px){ .hero .scene.scene--pose{margin-top:68px} .hero .scene > img.pose{right:0; top:auto; bottom:calc(100% - 12px); width:112px} }
.hero--compact .wrap > img.pose{position:absolute; z-index:5; right:clamp(20px, 6vw, 120px); top:50%; transform:translateY(-50%); width:clamp(120px, 11vw, 160px)}
@media (min-width:900px){ .p-thanks .hero--compact .hero-copy{max-width:min(760px, calc(100% - clamp(20px, 6vw, 120px) - clamp(120px, 11vw, 160px) - 24px))} }
@media (max-width:899px){ .p-thanks .hero--compact{padding-top:108px} .hero--compact .wrap > img.pose{width:88px; right:20px; top:-96px; transform:none} }
.faq-head{display:flex; align-items:center; gap:clamp(16px, 2vw, 24px); margin-bottom:clamp(24px, 3vw, 36px)}
.faq-head h2{margin:0}
.faq-head img.pose{width:clamp(112px, 11vw, 140px); flex:0 0 auto}
@media (max-width:639px){ .faq-head{flex-direction:column; align-items:flex-start; gap:12px} .faq-head img.pose{width:104px} }
.sr-none:not([hidden]){display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:24px; align-items:center}
.sr-none img.pose{width:150px; grid-row:1 / span 2}
@media (max-width:639px){ .sr-none:not([hidden]){display:block} .sr-none img.pose{width:112px; margin-bottom:12px} }
/* R18b/R18d: keep the compact-hero copy clear of the wide-layout spark (right clamp(20px,6vw,120px), 110px box, 24px gap) */
@media (min-width:900px){
  section.hero--compact:not(.hero--cat) .hero-copy{max-width:min(760px, calc(100% - clamp(20px, 6vw, 120px) - 134px))}
}
/* R10 #34 (design-plan 16.19, amended 16.19.6): the sad Spark, mirrored to face the words, in the compact hero's ornament slot; her night ground is feathered to transparent in the file. From 1100 she sits beside the copy; at 900-1099 she sits beside the H1's first line and the copy keeps the R18b width, so the H1 keeps its two-line break; below 900 she sits above the H1, at its right. */
.p-unsub .hero--compact .wrap > img.us-hero-spark{position:absolute; z-index:5; right:clamp(0px, 3vw, 64px); top:50%; transform:translateY(-50%); width:clamp(260px, 22vw, 340px)}
@media (min-width:1100px){ body.p-unsub section.hero--compact .hero-copy{max-width:min(760px, calc(100% - clamp(0px, 3vw, 64px) - clamp(260px, 22vw, 340px) - 16px))} }
@media (min-width:900px) and (max-width:1099px){ .p-unsub .hero--compact .wrap > img.us-hero-spark{width:176px; right:0; top:-64px; transform:none} }
@media (max-width:899px){
  .p-unsub .hero--compact{padding-top:124px}
  .p-unsub .hero--compact .wrap > img.us-hero-spark{width:152px; right:0; top:-120px; transform:none}
  body.p-unsub section.hero--compact .hero-copy{padding-right:0}
}
.p-unsub .us-spark{background:#0F0E37}
/* R18b/R18d: lift the closing-band spark clear of its H2 between 900 and 1099 */
@media (min-width:900px) and (max-width:1099px){
  .hw-close-spark{width:56px; height:56px; right:clamp(20px, 3vw, 32px); top:-68px}
}

/* ===== review-hub banner (round 6 #3, design-plan §14.12) ===== */
.rh-banner{background:var(--lav); color:var(--bg-night); font:400 1rem/1.4 var(--sans); position:relative; z-index:60}
.rh-banner .wrap{display:flex; align-items:center; justify-content:center; gap:8px 16px; flex-wrap:wrap; min-height:44px; padding-block:6px; padding-right:56px; text-align:center}
.rh-banner p{margin:0; max-width:none}
.rh-banner a{color:var(--bg-night); font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-block; padding-block:10px}
.rh-banner button{position:absolute; right:clamp(8px, 2vw, 24px); top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--bg-night); font:700 1.375rem/1 var(--sans); cursor:pointer}
.rh-banner button:hover{background:rgb(18 17 48 / .08)}
.rh-banner button:focus-visible,.rh-banner a:focus-visible{outline:3px solid var(--indigo-dk); outline-offset:2px}
.rh-banner[hidden]{display:none}
@media (max-width:639px){ .foot-grid{grid-template-columns:1fr} }   /* after the 1099 rule so it wins */

/* ---------- §14 #6 · How it works, "how it ends" art (site.css, replaces R8's >=1100 row grid inside the split) ---------- */
.hw-ends-grid{display:grid; gap:clamp(24px, 3vw, 40px)}
.hw-ends-art{margin:0; border-radius:24px; overflow:hidden; background:var(--bg-night); box-shadow:var(--shadow-card); max-width:720px}
.hw-ends-art img{display:block; width:100%; height:100%; aspect-ratio:16/10; object-fit:cover; object-position:var(--pos, 50% 42%)}
@media (min-width:1100px){
  .hw-ends-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center}
  .hw-ends-grid .hw-ends{max-width:none; order:1}
  .hw-ends-grid .hw-ends-art{order:2; max-width:none}
  .hw-ends-grid .hw-ends-art img{aspect-ratio:1/1}
  .hw-ends-grid .hw-ends li{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"mark label" "mark text"}
  .hw-ends-grid .hw-ends strong{margin:0 0 .25em}
}

/* ---------- §14 #7 · How it works, fit section ask (site.css) ---------- */
.hw-fit-ask{grid-column:1 / -1; margin-top:clamp(20px, 2.5vw, 32px); display:flex; align-items:center; justify-content:space-between; gap:20px 40px; background:var(--bg-deep); color:var(--on-dark); border-radius:20px; padding:clamp(24px, 3vw, 32px) clamp(24px, 3.4vw, 44px)}
.hw-fit-ask p{margin:0; color:var(--on-dark); font:400 clamp(1.125rem, 1rem + .4vw, 1.25rem)/1.5 var(--sans); max-width:56ch}
.hw-fit-ask .btn{flex:0 0 auto}
@media (max-width:899px){ .hw-fit-ask{flex-direction:column; align-items:flex-start} }

/* ---------- §14 #17 · Book a call, quiet exits as two cards (site.css; replaces .quiet p styling on this page) ---------- */
.qx .wrap{display:grid; grid-template-columns:1fr; gap:clamp(16px, 2vw, 24px)}
@media (min-width:900px){ .qx .wrap{grid-template-columns:1fr 1fr} }
.qx-card{position:relative; display:grid; grid-template-columns:minmax(0,1fr); background:var(--bg-card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-card); overflow:hidden}
.qx-card img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:var(--pos, 50% 40%)}
.qx-body{padding:clamp(20px, 2.4vw, 28px)}
.qx-card h2{font:700 1.375rem/1.3 var(--sans); margin:0 0 .4em; max-width:none}
.qx-card p{margin:0; max-width:none}
.qx-card a{font-weight:700; color:var(--link); text-underline-offset:3px}
.qx-card a::after{content:""; position:absolute; inset:0}
.qx-card a:focus-visible{outline:none}
.qx-card:has(a:focus-visible){outline:3px solid var(--indigo); outline-offset:3px}
.qx-card .arr{display:inline-block; margin-left:.3em; transition:transform .2s}
@media (prefers-reduced-motion:no-preference){ .qx-card:hover{transform:translateY(-2px)} .qx-card{transition:transform .2s} .qx-card:hover .arr{transform:translateX(3px)} }
@media (min-width:600px) and (max-width:899px){ .qx-card{grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:center} .qx-card img{height:100%; aspect-ratio:auto} }