/* The home pages' building blocks (the buyers' home page and each reader's home): hero and scene, records strip,
   report preview, check groups, "why" figures, steps, readers, the order form and pop-ups, fine print and questions. */
/* ---------- Hero ---------- */
/* Two equal columns; the picture is level with the text (owner, 8 Oct 2026): the drawing sits at 88% width and the
   chips are compact, so the picture's height matches the headline, lede and form beside it. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:40px 0 16px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:6px 14px 6px 8px;font-size:var(--fs-sm);font-weight:620;color:var(--ink-soft);margin:0 0 22px}
.eyebrow b{background:var(--blush);color:var(--blush-ink);border-radius:999px;padding:2px 9px;font-weight:750;font-size:var(--fs-xs)}
h1{isolation:isolate;font-stretch:125%;font-weight:780;font-size:var(--fs-h1);line-height:1.22;letter-spacing:-.02em;margin:0 0 22px}
h1 mark{background:none;color:inherit;position:relative;white-space:nowrap}
h1 mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.04em;height:.28em;background:var(--flag);opacity:.28;border-radius:6px;z-index:-1;transform-origin:left center}
@media (prefers-reduced-motion:no-preference){h1 mark::after{animation:underline .9s .5s var(--ease) both}}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lede{font-size:var(--fs-lg);color:var(--ink-soft);max-width:52ch;margin:0 0 28px}
.field-label{display:block;font-weight:650;font-size:var(--fs-sm);margin-bottom:8px}
.quick-row{display:flex;gap:8px;max-width:560px;background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;padding:6px;box-shadow:var(--shadow-sm)}
.quick-row input{border:0;background:transparent;padding:12px 12px;min-width:0}
.quick-row input:focus{outline:none}
.quick-row .btn{flex:none}
.quick-row:focus-within{outline:3px solid color-mix(in srgb,var(--flag) 55%,transparent);outline-offset:2px}
.prov-row{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:10px 12px;max-width:560px;margin:0 0 12px}
@media (max-width:540px){.prov-row{grid-template-columns:1fr}}
.picker{min-width:0}
.picker .field-label{margin-bottom:6px}
.prov-row select.prov-select{width:100%}
select.prov-select{width:auto;max-width:100%;min-width:0;text-overflow:ellipsis;padding:9px 38px 9px 14px;font-weight:650;font-size:var(--fs-sm);appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315313A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.prov-note{margin:0 0 12px;max-width:560px;background:var(--butter);color:var(--butter-ink);border-radius:var(--r-sm);padding:10px 14px;font-size:var(--fs-sm);font-weight:600}
.field .prov-note{margin:10px 0 0}
.field select.prov-select{width:100%}
.trust{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--fs-sm);color:var(--ink-soft)}
.trust li{display:flex;align-items:center;gap:7px}
.trust svg{width:16px;height:16px;color:var(--mint-ink);flex:none}

input[type=text],input[type=email],textarea,select{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r-sm);padding:13px 15px;width:100%;transition:border-color .2s}
input[type=text]:focus,input[type=email]:focus,textarea:focus,select:focus{border-color:var(--ink);outline:none}
textarea{min-height:104px;resize:vertical;line-height:1.45}

/* The house scene */
.scene{margin:0;position:relative;background:linear-gradient(180deg,var(--sky) 0%,color-mix(in srgb,var(--sky) 45%,var(--paper)) 55%,var(--mint) 100%);border-radius:32px;border:1px solid var(--rule);overflow:hidden;box-shadow:var(--shadow);padding:18px 18px 20px;display:grid}
.scene-art{display:block;width:88%;height:auto;margin:0 auto;order:-1}
.scene-art .ln{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.scene-art .soft{stroke:color-mix(in srgb,var(--ink) 40%,transparent);stroke-width:2.2}
.scene-art .plan{fill:color-mix(in srgb,var(--blush) 70%,transparent);stroke:var(--blush-ink);stroke-width:2;stroke-dasharray:6 5}
.cloud{fill:#fff;opacity:.9}
.chips{list-style:none;margin:-34px 0 0;padding:0;position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip{display:grid;gap:5px;justify-items:start;align-content:start;background:var(--surface);border-radius:14px;padding:8px 10px 9px;box-shadow:var(--shadow-sm);font-size:var(--fs-xs);font-weight:620;line-height:1.25}
@media (prefers-reduced-motion:no-preference){
  .scene-art .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s .2s var(--ease) forwards}
  .scene-art .fill-in{animation:fadein .8s 1s both}
  .chip{animation:pop .6s var(--ease) both,bob 6s ease-in-out infinite}
  .c1{animation-delay:1.1s,2s}.c2{animation-delay:1.35s,2.6s}.c3{animation-delay:1.6s,3.2s}.c4{animation-delay:1.85s,2.3s}.c5{animation-delay:2.1s,2.9s}.c6{animation-delay:2.35s,3.5s}
  .crane-jib{transform-box:fill-box;transform-origin:30% 50%;animation:swing 7s ease-in-out infinite}
  .wifi path{animation:ping 2.4s ease-in-out infinite}
  .wifi path:nth-child(2){animation-delay:.3s}.wifi path:nth-child(3){animation-delay:.6s}
  .cloud{animation:drift 26s linear infinite}
  .cloud.two{animation-duration:38s;animation-delay:-12s}
}
@keyframes swing{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes ping{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(430px)}}

/* A soft colour glow behind the hero, drifting slowly (motion only) */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;top:-150px;bottom:-30px;left:calc(50% - 50vw);right:calc(50% - 50vw);left:calc(50% - 50cqw);right:calc(50% - 50cqw);pointer-events:none;
  background:radial-gradient(40% 30% at 72% 100%,rgba(236,46,118,.20),transparent 70%),
    radial-gradient(34% 28% at 38% 104%,rgba(246,180,90,.22),transparent 70%),
    radial-gradient(30% 26% at 96% 98%,rgba(90,140,240,.18),transparent 70%),
    radial-gradient(36% 44% at 82% 30%,color-mix(in srgb,var(--sky) 95%,transparent),transparent 72%),
    radial-gradient(32% 40% at 10% 16%,color-mix(in srgb,var(--mint) 95%,transparent),transparent 72%),
    radial-gradient(26% 34% at 58% 96%,color-mix(in srgb,var(--blush) 75%,transparent),transparent 72%),
    radial-gradient(24% 30% at 98% 86%,color-mix(in srgb,var(--lilac) 85%,transparent),transparent 72%);
  background-size:150% 150%;background-position:0% 0%}
@media (prefers-reduced-motion:no-preference){.hero::before{animation:drift-glow 24s ease-in-out infinite alternate}}
@keyframes drift-glow{0%{background-position:0% 0%}50%{background-position:70% 45%}100%{background-position:100% 15%}}

/* Where the records come from */
.strip{display:flex;align-items:center;gap:22px;padding:6px 0 30px}
.strip-title{margin:0;flex:none;font-size:var(--fs-xs);font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.marquee{display:flex;gap:40px;overflow:hidden;min-width:0;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{list-style:none;margin:0;padding:0;display:flex;gap:40px;flex:none;font-weight:650;font-stretch:108%;color:color-mix(in srgb,var(--ink) 62%,transparent);white-space:nowrap}
.marquee-track li{display:flex;align-items:center;gap:40px}
.marquee-track li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--flag);opacity:.5}
@media (prefers-reduced-motion:no-preference){.marquee-track{animation:marquee 46s linear infinite}.marquee:hover .marquee-track{animation-play-state:paused}}
@keyframes marquee{to{transform:translateX(calc(-100% - 40px))}}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.marquee-track{flex:1 1 auto;min-width:0;flex-wrap:wrap;white-space:normal;gap:8px 24px}.marquee-track li{gap:24px}.marquee-track[aria-hidden]{display:none}}
@media (max-width:620px){.strip{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:22px}.marquee{width:100%}}

/* Every section has its own motion (only when the visitor's device allows it) */
@media (prefers-reduced-motion:no-preference){
  /* the 55 checks: each card's list runs in line by line */
  .js .group.in .names li{animation:reveal-up .55s var(--ease) backwards;animation-delay:calc(var(--i,0) * 110ms + 250ms + var(--n,0) * 45ms)}
  /* the three steps: each number sends out a soft pink ring */
  .js .steps li.in::before{animation:ring 2.8s ease-out infinite;animation-delay:calc(var(--i,0) * .45s + .8s)}
}
.names li:nth-child(2){--n:1}.names li:nth-child(3){--n:2}.names li:nth-child(4){--n:3}.names li:nth-child(5){--n:4}
.names li:nth-child(6){--n:5}.names li:nth-child(7){--n:6}.names li:nth-child(8){--n:7}.names li:nth-child(9){--n:8}.names li:nth-child(10){--n:9}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(236,46,118,.42)}75%,100%{box-shadow:0 0 0 14px rgba(236,46,118,0)}}

/* "Why check first" on the dark textured panel */
.tone-ink h2{color:#fff}
.tone-ink .intro{color:#B7C6C4}
.tone-ink .kicker{color:#FFB3CF;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.tone-ink .kicker::before{background:#FF7BAA}
.tone-ink .whys li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tone-ink .whys li:hover{border-color:rgba(255,255,255,.32)}
.tone-ink .whys h3,.tone-ink .whys .num{color:#fff}
.tone-ink .whys li:first-child .num{color:#FF7BAA}
.tone-ink .whys p,.tone-ink .whys .num small,.tone-ink .whys .note{color:#B7C6C4}
.tone-ink a{color:#fff}

/* ---------- Sections ---------- */
.section{padding:56px 0}
.section.tone{padding:72px 0}
@media (max-width:540px){.section.tone{padding:52px 10px}}
/* The smallest phones (320 px): panels and the sample card give their content a little more room */
@media (max-width:360px){.section.tone{padding-inline:2px}.report{padding:14px!important}.preview-copy .btn{white-space:normal;text-align:center}}
.section-tight{padding:48px 0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--flag-deep);margin:0 0 14px;padding:5px 12px 5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--flag) 20%,var(--rule));background:color-mix(in srgb,var(--surface) 75%,transparent)}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flag);flex:none}
h2{font-stretch:114%;font-weight:720;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.022em;margin:0 0 12px;max-width:24ch}
h3{font-stretch:112%;font-weight:720;font-size:var(--fs-h3);line-height:1.25;margin:0}
.intro{color:var(--ink-soft);max-width:58ch;font-size:var(--fs-base);margin:0 0 30px}

/* Report preview */
/* Equal columns and a compact card, level with the copy beside it (owner, 8 Oct 2026). */
.preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.preview-copy .trust{flex-direction:column;gap:8px;margin:0 0 20px}
.preview-copy p{color:var(--ink-soft);max-width:46ch;margin:0 0 16px}
.preview-copy .btn{margin-top:8px}
.report{margin:0;position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.report-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.report-cap{font-size:var(--fs-xs);color:var(--ink-soft);margin:0}
.report-addr{font-stretch:118%;font-weight:760;font-size:var(--fs-h2);line-height:1.2;margin:2px 0 0}
.report-mark{width:40px;height:40px;flex:none}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:12px}
.tile{border-radius:14px;padding:8px 10px;display:grid;gap:2px}
.tile .n{font-stretch:125%;font-weight:800;font-size:var(--fs-h2);line-height:1;font-variant-numeric:tabular-nums}
.tile .l{font-size:var(--fs-xs);font-weight:650}
@property --num{syntax:"<integer>";inherits:false;initial-value:0}
/* Summary numbers count up from 0 (CSS only). Without animation they show the final number. */
.tile .n[data-n]{counter-reset:num var(--num)}
.tile .n[data-n]::after{content:counter(num)}
.n[data-n="2"]{--to:2;--num:2}.n[data-n="8"]{--to:8;--num:8}.n[data-n="14"]{--to:14;--num:14}.n[data-n="29"]{--to:29;--num:29}
@media (prefers-reduced-motion:no-preference){.report.in .tile .n[data-n]{animation:count 1.4s .6s var(--ease) both}}
@keyframes count{from{--num:0}to{--num:var(--to)}}
.rows{display:grid;gap:8px}
.r{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;border:1px solid var(--rule);border-radius:14px;padding:9px 12px;background:var(--surface);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.r:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.r dt{font-weight:680}
.r dd{margin:0}
.r .d{grid-column:1/-1;color:var(--ink-soft);font-size:var(--fs-sm)}
.r.hot{border-color:color-mix(in srgb,var(--flag) 40%,var(--rule));background:color-mix(in srgb,var(--blush) 40%,var(--surface))}
.tape{position:absolute;top:50%;left:-122px;width:114px;height:28px;background:var(--flag);color:#fff;font-weight:800;font-stretch:125%;font-size:.78rem;line-height:28px;padding-left:22px;transform:translateY(-50%) rotate(-5deg);transform-origin:right center;clip-path:polygon(9% 50%,0 0,100% 0,100% 100%,0 100%);pointer-events:none;border-radius:0 4px 4px 0}
@media (prefers-reduced-motion:no-preference){
  .report.in .tape{animation:tie .7s 1.2s var(--ease) both}
  .report.in .r{animation:rise .6s .35s var(--ease) both}
  .report .r:nth-child(2){animation-delay:.1s}.report .r:nth-child(3){animation-delay:.2s}.report .r:nth-child(4){animation-delay:.3s}.report .r:nth-child(5){animation-delay:.4s}
}
@keyframes tie{from{transform:translateY(-50%) rotate(-5deg) scaleX(0)}to{transform:translateY(-50%) rotate(-5deg) scaleX(1)}}
.report-foot{font-size:var(--fs-xs);color:var(--ink-soft);margin:12px 0 0}

/* Checks */
.groups{column-count:2;column-gap:20px}
.groups > *{break-inside:avoid;display:inline-block;width:100%;margin:0 0 20px}
.group{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px 24px 10px;box-shadow:var(--shadow-card);transition:border-color .2s}
.group-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.group-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.group-ic svg{width:22px;height:22px}
.group-head .count{color:var(--ink-soft);font-size:var(--fs-sm);margin-left:auto;white-space:nowrap}
.group > summary{list-style:none;cursor:default}
.group > summary::-webkit-details-marker{display:none}
@media (min-width:621px){.group > summary{pointer-events:none}}
.checks{margin:0}
.names{list-style:none;margin:6px 0 0;padding:0}
.names li{padding:9px 0;border-top:1px dashed var(--rule);font-weight:620;font-size:var(--fs-sm)}
.names li:first-child{border-top:0}
.group .src{font-size:var(--fs-xs);color:var(--ink-soft);margin:8px 0 14px}
.check{padding:14px 0;border-top:1px dashed var(--rule)}
.check:first-child{border-top:0}
.check dt{font-weight:700;font-stretch:108%}
.check dd{margin:3px 0 0;color:var(--ink-soft);font-size:var(--fs-sm)}
.check .src{display:block;font-size:var(--fs-xs);margin-top:4px;color:color-mix(in srgb,var(--ink-soft) 80%,var(--paper))}
.new{display:inline-block;margin-left:6px;vertical-align:2px;background:var(--flag);color:#fff;border-radius:999px;padding:1px 7px;font-size:.75rem;font-weight:780;letter-spacing:.04em}
.coverage{margin:28px 0 0;max-width:70ch;color:var(--ink-soft)}
.coverage strong{color:var(--ink)}

/* Sold prices band */
.band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow-card);border-radius:var(--r-lg);padding:28px}
.band-ic{width:52px;height:52px;border-radius:16px;background:var(--butter);display:grid;place-items:center;color:var(--butter-ink)}
.band-ic svg{width:26px;height:26px}
.band p{margin:6px 0 0;max-width:70ch}

/* Steps: a real sequence, so they're numbered */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.steps li{counter-increment:step;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card);transition:border-color .2s;display:grid;gap:8px;align-content:start}
.steps li::before{content:counter(step);width:44px;height:44px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-stretch:120%;font-size:var(--fs-h3)}
.steps p{margin:0;color:var(--ink-soft)}
.who{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.who a{display:grid;gap:4px;height:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 20px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:border-color .2s,transform .2s var(--ease)}
.who a:hover{border-color:var(--ink);transform:translateY(-2px)}
.who strong{font-stretch:112%;font-weight:750;font-size:var(--fs-base)}
.who span{color:var(--ink-soft);font-size:var(--fs-sm)}
.who-foot{margin:22px 0 0;max-width:70ch}

/* Order */
.order{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;align-items:start}
.order-copy{position:sticky;top:100px}
.order-copy p{color:var(--ink-soft);max-width:44ch}
/* Offers popup */
.offers{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:var(--r-lg);padding:32px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.offers::backdrop{background:rgba(21,49,58,.5)}
.offers h2{margin:0 0 8px}
.offers-sub{margin:0 0 20px;color:var(--ink-soft);max-width:60ch}
.offers-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:12px;background:var(--paper);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.offers-x:hover{background:var(--paper-deep)}
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.offer{position:relative;font:inherit;text-align:left;display:grid;gap:4px;align-content:start;padding:20px 18px;border:1.5px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,transform .2s var(--ease),box-shadow .2s}
.offer:hover,.offer:focus-visible{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.o-best{border-color:var(--flag);background:color-mix(in srgb,var(--blush) 35%,var(--surface))}
.o-tag{justify-self:start;margin-bottom:4px;border-radius:999px;padding:3px 10px;font-size:var(--fs-xs);font-weight:720;background:var(--flag-deep);color:#fff}
.o-n{font-weight:720}
.o-p{font-stretch:125%;font-weight:800;font-size:var(--fs-h1);line-height:1.05}
.o-e{color:var(--ink-soft);font-size:var(--fs-sm)}
.offers-note{margin:16px 0 0;font-size:var(--fs-sm);color:var(--ink-soft)}
.plan[hidden]{display:none}
.qc-pop{padding:0;width:min(820px,calc(100vw - 32px));height:calc(100dvh - 32px)}
.qc-pop iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--r-lg);background:var(--paper)}
.qc-pop .offers-x{z-index:1}
.cf-turnstile{margin:4px 0 14px;min-height:65px}
.offers-free{margin-top:16px;font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:620px){
  .offers{padding:24px 18px}
  .offer-grid{grid-template-columns:1fr;gap:8px}
  .offer{grid-template-columns:auto 1fr auto;align-items:baseline;gap:2px 12px;padding:14px 16px}
  .offer .o-tag{grid-column:1/-1}
  .o-p{font-size:var(--fs-h2);grid-column:3;grid-row:auto}
  .o-e{grid-column:1/-1}
}
@media (prefers-reduced-motion:no-preference){.offers[open]{animation:rise .35s var(--ease) both}}
/* Why check first: three facts, each one checkable */
.whys{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whys li{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card);transition:border-color .2s;display:grid;gap:8px;align-content:start}
.whys .num{font-stretch:125%;font-weight:800;font-size:var(--fs-h1);line-height:1;color:var(--ink)}
.whys .num small{font-size:var(--fs-base);font-weight:650;font-stretch:100%;color:var(--ink-soft)}
.whys li:first-child .num{color:var(--flag-deep)}
.whys p{margin:0;color:var(--ink-soft)}
.whys .note{font-size:var(--fs-xs)}
.anchor-line{margin:0;font-weight:720;font-stretch:108%;font-size:var(--fs-lg)}
.price-card{margin-top:24px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-card);display:grid;gap:10px}
.price-card .prices{display:flex;flex-wrap:wrap;gap:8px 24px}
.price-note{margin:0;font-size:var(--fs-sm);color:var(--ink-soft)}
/* A slowly turning colour edge round the price card (still, where a browser can't turn it) */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
.price-card{border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--spin),var(--flag),#7FB3F0,#8FD8B0,#F6C860,var(--flag)) border-box;box-shadow:0 18px 40px -26px rgba(236,46,118,.45)}
@media (prefers-reduced-motion:no-preference){.price-card{animation:spin 7s linear infinite}}
@keyframes spin{to{--spin:360deg}}
.price-tax{margin:0;font-size:var(--fs-sm);font-weight:650;color:var(--ink)}
/* "Secure checkout by Stripe" and the ways to pay Stripe accepts for us */
.secure{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:var(--fs-sm);color:var(--ink-soft)}
.secure-by{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.secure .lock{color:var(--mint-ink);flex:none}
.secure img{display:block;height:22px;width:auto}
.paymarks{display:inline-flex;flex-wrap:wrap;gap:6px}
.offers .secure{margin-top:14px}
#pay-step .secure{margin-top:12px}
#pay-link .lock{color:#fff}
.price-card .big{font-stretch:125%;font-weight:800;font-size:var(--fs-h1);line-height:1}
.price-card .big small{font-size:var(--fs-base);font-weight:600;color:var(--ink-soft);font-stretch:100%}
.price-card .pill{white-space:normal}
.order-form{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow)}
fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
legend{font-weight:700;font-size:var(--fs-base);margin-bottom:10px;padding:0}
.field{margin-bottom:24px}
.hint{font-weight:400;color:var(--ink-soft);font-size:var(--fs-sm)}
.boxgroup{margin-bottom:16px}
.presets{margin:0 0 14px;font-size:var(--fs-sm);font-weight:600}
.preset{font:inherit;font-weight:700;color:var(--ink);background:var(--mint);border:0;border-radius:999px;padding:5px 12px;cursor:pointer}
.preset:hover{background:var(--paper-deep)}
.boxgroup h3{margin:0 0 8px;font-size:var(--fs-xs);font-weight:700;font-stretch:100%;line-height:1.55;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.box{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.35;cursor:pointer;border:1px solid var(--rule);border-radius:12px;padding:10px 12px;transition:background .15s,border-color .15s}
.box:hover{border-color:var(--ink-soft)}
.box:has(input:checked){background:var(--mint);border-color:color-mix(in srgb,var(--mint-ink) 40%,var(--rule))}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.plans{display:grid;gap:8px}
.plan{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s}
.plan:has(input:checked){border-color:var(--ink);background:color-mix(in srgb,var(--sky) 45%,var(--surface))}
.plan-name{font-weight:720}
.plan-price{font-weight:780;font-stretch:115%}
.plan-desc{grid-column:2/-1;color:var(--ink-soft);font-size:var(--fs-sm)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.4;margin-bottom:22px;cursor:pointer}
.fine{font-size:var(--fs-sm);color:var(--ink-soft);margin:12px 0 0}
.form-msg{margin:14px 0 0;font-weight:600;min-height:1.2em}
.form-msg.error{color:var(--flag-deep)}
.success{display:none}
.order-form.is-done .form-body{display:none}
.order-form.is-done .success{display:block}
.success h3{font-size:var(--fs-h2);margin:0 0 10px}
.success h3:focus{outline:none}
.success p{color:var(--ink-soft)}
.pay-note{font-size:var(--fs-sm);color:var(--ink-soft);margin:8px 0 0}
.refund{font-size:var(--fs-sm);background:var(--mint);color:var(--mint-ink);border-radius:12px;padding:10px 12px;margin-top:12px}

/* Fine print + FAQ */
.fineprint{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.fineprint p{max-width:60ch;color:var(--ink-soft)}
.tone-stone h2{font-family:var(--serif);font-weight:400;font-stretch:100%;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.01em;max-width:14ch;margin-bottom:18px}
.tone-stone .faq details{background:color-mix(in srgb,var(--surface) 88%,transparent)}
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow-card);transition:border-color .2s}
@media (hover:hover){.group:hover,.steps li:hover,.whys li:hover,.faq details:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--rule))}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.steps li,.whys li{transition:border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}.steps li:hover,.whys li:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}}
.faq summary{font-weight:700;font-stretch:108%;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;font-size:1.3rem;line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:-4px 0 0;padding:0 20px 16px;color:var(--ink-soft)}

@media (max-width:980px){
  .hero,.preview,.order,.fineprint{grid-template-columns:1fr;gap:40px}
  .order-copy{position:static}
  .hero{padding:28px 0 8px}
  .scene{max-width:600px;width:100%;justify-self:center}
}
/* The "flagged" ribbon needs the gap beside the sample card; hide it where there isn't one. */
@media (max-width:1180px){.tape{display:none}.preview{align-items:start}.quick-row .btn{padding-inline:18px}}
@media (max-width:700px){.groups{column-count:1}}
@media (max-width:960px){.who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .steps,.whys{grid-template-columns:1fr}
  .who{grid-template-columns:1fr;gap:10px}
  .section{padding:44px 0}
}
@media (max-width:620px){
  .scene{padding:12px 12px 14px;border-radius:26px}
  .chips{gap:8px;margin-top:-20px}
  .quick-row{flex-direction:column;padding:8px}
  .quick-row .btn{width:100%}
  .boxes{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .order-form{padding:22px}
  .report{padding:20px}
  .band{grid-template-columns:1fr}
  /* sample rows: status first, then the full-width title */
  .r{grid-template-columns:1fr;gap:4px}
  .r dd:not(.d){order:-1;justify-self:start}
  /* the 55 checks fold by group: tap a group to see its list */
  .group{padding:16px 18px}
  .group[open]{padding-bottom:8px}
  .group > summary{cursor:pointer;margin:0;min-height:44px}
  .group[open] > summary{margin-bottom:8px}
  .group > summary .count::after{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);margin-left:12px;transition:transform .25s var(--ease)}
  .group[open] > summary .count::after{transform:translateY(1px) rotate(-135deg)}
}
/* Under 420px two cards side by side are narrower than the "Nothing on record" label: one column, four examples
   (one of each status). */
@media (max-width:420px){.chips{grid-template-columns:1fr}.chip.c4,.chip.c5{display:none}}
@media (max-width:360px){
  h1 mark{white-space:normal}
  .report,.group{padding:16px 14px}
  .r{padding:10px 12px}
  .group-head{flex-wrap:wrap}
}
/* The opening (27 Oct 2026, owner's design): a first-time visitor sees the logo, which moves left as a divider
   grows, and picks who they are on the right before the site opens. Shown only while <html> has .choosing (set by
   the script in <head>); without motion everything is already in place. */
.opening{display:none}
.redirecting body{visibility:hidden}
/* The focused views: only the order form (and the fine print), or only the free check. */
.focus-order main > section:not(#order):not([aria-labelledby="fine-title"]){display:none}
.focus-order #order{padding-top:40px}
.focus-check main > section:not(.hero){display:none}
.focus-check .hero{min-height:0}
.focus-check .hero > :not(:first-child){display:none}
.order-more-link{display:none}
.focus-order .order-more-link{display:block}
.focus-order .order-copy .anchor-line{display:none}
.choosing{overflow:hidden}
.choosing .opening{display:flex;position:fixed;inset:0;z-index:100;padding:24px;overflow-y:auto;background:var(--grain),var(--paper)}
.opening:focus{outline:none}
.op-split{display:flex;align-items:center;justify-content:center;margin:auto}
.op-lockup{display:flex;align-items:center;gap:14px;flex:none}
.op-mark{width:64px;height:64px;border-radius:18px;box-shadow:0 14px 30px -14px rgba(21,49,58,.65)}
.op-flag{transform-box:fill-box;transform-origin:left center}
/* The opening's wordmark is the logo itself, shown larger while it stands alone; nothing else on it is bigger. */
.op-word{font-stretch:125%;font-weight:800;font-size:calc(var(--fs-logo) * 1.4);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.op-divider{flex:none;width:1.5px;height:440px;margin:0 34px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.op-panel{flex:none;max-width:600px}
.op-inner{width:min(560px,calc(100vw - 420px));padding:6px 4px 6px 0}
.op-q{font-stretch:112%;font-weight:760;font-size:var(--fs-h1);margin:0 0 4px;max-width:none}
.op-sub{color:var(--ink-soft);margin:0 0 16px;font-size:.95rem}
.op-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op-choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);text-decoration:none;
  background:var(--surface);border:1.5px solid var(--rule);border-radius:18px;padding:13px 14px;cursor:pointer}
.op-choice:hover,.op-choice:focus-visible{border-color:var(--ink);box-shadow:0 14px 26px -18px rgba(21,49,58,.55);outline:none}
.op-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.op-choice b{display:block;font-stretch:108%;font-size:.98rem;line-height:1.25}
.op-choice small{display:block;color:var(--ink-soft);font-size:.8rem;line-height:1.3;margin-top:2px}
.op-go{margin-left:auto;opacity:0;font-weight:800}
.op-choice:hover .op-go,.op-choice:focus-visible .op-go{opacity:1}
.op-wide{grid-column:1 / -1}
.op-choice.picked{background:var(--ink);color:#fff;border-color:var(--ink)}
.op-choice.picked small{color:rgba(255,255,255,.75)}
.op-choice.picked .op-go{opacity:1}
.op-choices.chosen .op-choice:not(.picked){opacity:.25}
.t-mint{background:var(--mint)}.t-sky{background:var(--sky)}.t-butter{background:var(--butter)}.t-lilac{background:var(--lilac)}.t-blush{background:var(--blush)}.t-stone{background:var(--paper-deep)}
@media (max-width:820px){
  .choosing .opening{padding:28px 20px 40px}
  .op-split{flex-direction:column;margin:0 auto auto}
  .op-word{font-size:calc(var(--fs-logo) * 1.25)}
  .op-mark{width:52px;height:52px;border-radius:15px}
  .op-divider{width:min(320px,80vw);height:1.5px;margin:22px 0}
  .op-inner{width:min(520px,calc(100vw - 40px));padding:0}
  .op-panel{max-width:100%}
  .op-choices{grid-template-columns:1fr}
  .op-q,.op-sub{text-align:center}
}
@media (prefers-reduced-motion:no-preference){
  .opening::after{content:"";position:fixed;left:50%;top:50%;width:780px;height:780px;margin:-390px 0 0 -390px;border-radius:50%;z-index:-1;pointer-events:none;
    background:radial-gradient(circle,rgba(221,242,230,.95),rgba(221,235,247,.5) 45%,transparent 70%);filter:blur(10px);animation:op-drift 14s ease-in-out infinite alternate}
  .opening{transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .opening.leaving{opacity:0;transform:scale(.98)}
  .op-mark{animation:op-pop .7s var(--ease) .1s backwards}
  .op-flag{animation:op-wave 1.6s ease-in-out .8s 2}
  .op-word{animation:op-in .6s var(--ease) .45s backwards}
  .op-divider{transition:height .7s var(--ease) .15s,width .7s var(--ease) .15s,margin .7s var(--ease)}
  .op-panel{transition:max-width .9s var(--ease),opacity .5s ease .35s}
  .opening:not(.split) .op-divider{height:0;margin:0}
  .opening:not(.split) .op-panel{max-width:0;opacity:0;overflow:hidden}
  .op-choice{transition:transform .35s var(--ease),border-color .25s,background .25s,box-shadow .35s var(--ease),opacity .4s var(--ease)}
  .opening:not(.split) .op-choice{opacity:0;transform:translateY(10px) scale(.98)}
  .opening.split:not(.ready) .op-choice{transition-delay:calc(.55s + var(--n) * 70ms),0s,0s,0s,calc(.55s + var(--n) * 70ms)}
  .op-choice:hover,.op-choice:focus-visible{transform:translateY(-3px)}
  .op-ico{transition:transform .35s var(--ease)}
  .op-choice:hover .op-ico{transform:rotate(-6deg) scale(1.06)}
  .op-go{transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .op-choice:hover .op-go,.op-choice:focus-visible .op-go,.op-choice.picked .op-go{transform:none}
  .op-choice.picked{transform:scale(1.03)}
  .op-choices.chosen .op-choice:not(.picked){transform:scale(.97)}
  @keyframes op-pop{from{transform:scale(.6);opacity:0}}
  @keyframes op-in{from{opacity:0;transform:translateX(-10px)}}
  @keyframes op-wave{0%,100%{transform:skewY(0) scaleX(1)}30%{transform:skewY(-8deg) scaleX(.9)}60%{transform:skewY(6deg) scaleX(1.05)}}
  @keyframes op-drift{from{transform:translate(-60px,-30px)}to{transform:translate(60px,30px)}}
}
@media (prefers-reduced-motion:no-preference) and (max-width:820px){
  .opening:not(.split) .op-divider{width:0;height:1.5px}
}
/* Lighter sections (5 Nov 2026, owner: "too much text"): a one-line lede, the records as tags, short ticked points, a small note. */
.preview-copy .lede-1{font-size:var(--fs-lg);color:var(--ink);max-width:40ch;margin:0 0 16px;line-height:1.45}
.chips{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:7px;max-width:52ch}
.chips li{font-size:var(--fs-sm);line-height:1.2;padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);color:var(--ink)}
.pts{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;max-width:46ch}
.pts li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.pt-ic{width:26px;height:26px;border-radius:50%;background:var(--mint);color:var(--mint-ink);display:grid;place-items:center;margin-top:1px}
.pt-ic svg{width:15px;height:15px}
.pts b{display:block;color:var(--ink);font-weight:650}
.pts li span>span{display:block;color:var(--ink-soft);font-size:var(--fs-sm);line-height:1.45;margin-top:2px}
.preview-copy .note-1{font-size:var(--fs-xs);color:var(--ink-soft);max-width:46ch;margin:14px 0 0;line-height:1.5}
.preview-copy .note-1 a{color:var(--ink)}
/* A stone panel of link cards (the reader homes' "More for…") keeps the section heading, not the fine print's serif. */
.section.tone-stone:has(.r-cards) h2{font-family:var(--font);font-stretch:114%;font-weight:720;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.022em;max-width:24ch;margin:0 0 14px}