/* Homepage (index_q.html) styles, moved out of 2026-10-23 so the page content
starts near the top of the HTML. Linked at the same position it was inlined. */
/* ── Variant M ────────────────────────────────────────────────────────────
Scoped under .m-root so nothing here can reach another template. Tokens
are redefined for dark mode per the site convention. */
.m-root{
--m-ink:#0d1117; --m-ink-2:#3d4756; --m-paper:#ffffff; --m-wash:#f6f8fb;
--m-line:#dde3ec; --m-accent:#1a56db; --m-accent-2:#0b3ea8; --m-live:#0a7d34;
color:var(--m-ink); background:var(--m-paper);
}
/* 🔴 NO DARK MODE HERE, DELIBERATELY (Chuck 2026-09-20: "is black background
kind of 'every-saas' cliche'?"). Yes — and worse, it was WRONG for this site
twice over:
· index_k2.html and consultant_landing_f.html contain ZERO
prefers-color-scheme rules. They are light-only, always. Adding dark mode
made M the ONLY landing page that flips, on a signal the visitor's OS
chooses — so a visitor could meet a near-black homepage and a cream
/consultant in the same session, and the white site nav sat on top of it
looking like two sites stitched together.
· #0d1117 + electric blue + a glowing pill + a pulsing dot is the default
Vercel/Linear/Supabase costume, and it is OFF-MESSAGE. The product is a
briefing that lands on a small-business owner's desk before their coffee;
dressing it as a developer tool sells the wrong thing to a dentist.
⭐ The artifact-design convention says define dark-mode tokens — but a
convention for a standalone page does not override how the SITE already
looks. Matching the site beats matching the convention. */
.m-root *{box-sizing:border-box}
.m-wrap{max-width:1080px;margin:0 auto;padding:0 16px} /* 16px gutter rule */
/* ── HERO: the demo, first. Nothing above it but one line of context. ── */
/* Chuck 2026-09-23: 'Filed this morning' pill moved up to sit right under the header (was 44px/30px top). */
.m-hero{padding:14px 0 34px;background:
radial-gradient(1100px 380px at 50% -140px, rgba(26,86,219,.10), transparent 70%)}
.m-kicker{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 system-ui,Arial,sans-serif;
letter-spacing:.08em;text-transform:uppercase;color:var(--m-live);
background:rgba(10,125,52,.09);border:1px solid rgba(10,125,52,.22);
padding:6px 11px;border-radius:999px;margin-bottom:16px}
.m-dot{width:7px;height:7px;border-radius:50%;background:var(--m-live);
animation:m-pulse 2.4s ease-in-out infinite}
@keyframes m-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.m-dot{animation:none}}
.m-h1{font:800 clamp(25px,3.3vw,40px)/1.12 system-ui,-apple-system,Arial,sans-serif;
letter-spacing:-.018em;margin:0 0 14px;max-width:32ch}
/* 🔴 2026-09-23 (Chuck: "build 1-3"): was clamp(30px,5.2vw,52px) at 19ch — the
7-line H1 filled the whole first screen on laptop AND phone, pushing the demo
form 200px+ below the fold. Size/width only; the H1 TEXT is untouched (no
re-rank cost). Target: 3-4 lines desktop, ~6 phone. */
/* 19ch, not 16ch: the restored H1 is a full sentence, not a 6-word
phrase, and 16ch broke it into a narrow column. */
.m-h1 em{font-style:normal;color:var(--m-accent)}
/* 🔎 Sample finding (Chuck 2026-09-23). Real visitors left in <10s having seen
a permission ask + a giant headline and nothing interesting. This shows one
concrete finding before asking for anything. */
.m-find{margin:4px 0 16px;padding:12px 14px;border-left:4px solid var(--m-accent);
background:var(--m-wash);border-radius:0 10px 10px 0;max-width:640px}
.m-find-lbl{font:600 11.5px/1.3 system-ui,Arial,sans-serif;letter-spacing:.06em;
text-transform:uppercase;color:var(--m-ink-2);margin:0 0 5px}
.m-find-what{font:700 16px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0}
.m-find-do{font:400 14.5px/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:5px 0 0}
.m-find-do b{color:var(--m-live)}
.m-find a{display:inline-block;margin-top:7px;font:700 14.5px/1 system-ui,Arial,sans-serif;
color:var(--m-accent);text-decoration:none;padding:8px 0}
.m-find a:hover{text-decoration:underline}
.m-sub{font:400 clamp(16px,2.1vw,19px)/1.55 system-ui,Arial,sans-serif;
color:var(--m-ink-2);margin:0 0 24px;max-width:52ch}
/* The single action. Deliberately the largest interactive thing on screen. */
.m-try{max-width:600px}
/* 2026-09-30 hunt 5: the suggestions list sits INSIDE this , so it
inherited base.html's label{text-transform:uppercase} — every row in caps. */
.m-try .fld{text-transform:none;letter-spacing:normal}
.m-try .fld{display:flex;align-items:center;background:var(--m-paper);
border:2px solid var(--m-accent);border-radius:12px;padding:0 0 0 15px;
cursor:text;position:relative;min-height:60px;
box-shadow:0 10px 28px -14px rgba(26,86,219,.55)}
.m-try input[type=text]{flex:1;border:0;background:transparent;min-width:0;padding:0;
font:500 16px/1 system-ui,Arial,sans-serif;color:var(--m-ink);outline:none}
/* 16px minimum: iOS zooms the page on focus for anything smaller. */
.m-try input::placeholder{color:var(--m-ink-2);opacity:1}
.m-try button[type=submit]{border:0;cursor:pointer;background:var(--m-accent);color:#fff;
font:700 15px/1 system-ui,Arial,sans-serif;padding:0 24px;border-radius:0 9px 9px 0;
align-self:stretch;margin:-2px -2px -2px 0;white-space:nowrap;
transition:background .16s ease}
.m-try button[type=submit]:hover{background:var(--m-accent-2)}
/* 2026-10-09: 1px sideways scroll at 320px (button nowrap + negative margin). */
@media(max-width:340px){.m-try button[type=submit]{white-space:normal;margin-right:0}}
/* 2026-10-07 (skeptic panel): on desktop the suggestions list was a STATIC flex item
inside this one-row .fld, so opening it squeezed the input to 0px and the typed text
vanished. Float it under the box instead. Phones (<=720px) wrap the row and are
pinned by the shared partial's .lba-suggest-pinned — left untouched. */
@media(min-width:721px){
.m-try .fld > [id$="-suggestions"]{position:absolute;left:-2px;right:-2px;top:100%;
margin-top:6px;z-index:60;background:var(--lba-bg,#fff);border:1px solid var(--lba-line,#E4DCC8);
border-radius:10px;overflow:hidden auto;max-height:360px;
box-shadow:0 14px 34px rgba(40,32,20,.18)}
}
/* 🎧 Media strip — secondary by design (see the markup comment). Sits on the
page's own token vocabulary; stacks to one link per line on a phone so the
three labels never squeeze into unreadable columns. */
.m-media{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
font-size:13.5px;line-height:1.6}
.m-media a{color:var(--m-accent,#0d7a55);font-weight:600;text-decoration:none;
border-bottom:1px solid transparent}
.m-media a:hover{border-bottom-color:currentColor}
@media (max-width:720px){
.m-media{flex-direction:column;gap:8px}
}
/* 🎧 Media intro (Chuck 2026-09-23). A short hook ABOVE the three links so a
visitor knows what they would get and how long it takes. The links become
outlined pills with running times: clearly tappable (44px), still visually
quieter than the solid demo button above. */
.m-listen{margin:18px 0 0;padding:14px 16px;border:1px solid var(--m-line);
border-radius:12px;background:var(--m-wash)}
.n-root .n-watch{padding-top:10px}
.n-watch .m-listen{margin:0;max-width:820px;border-left:4px solid var(--m-accent)}
.n-watch .m-listen-hook{font-size:18px}
.m-listen-hook{font:700 16px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0}
.m-listen-sub{font:400 14px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:6px 0 0}
.m-listen .m-media{margin-top:12px;gap:8px 10px}
.m-listen .m-media a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
border:1.5px solid var(--m-accent);border-radius:999px;background:var(--m-paper)}
.m-listen .m-media a:hover{background:var(--m-accent);color:#fff;border-bottom-color:var(--m-accent)}
.m-listen .m-media small{font-weight:400;opacity:.75;margin-left:6px}
@media (max-width:720px){ .m-listen .m-media a{justify-content:center} }
.m-note{font:400 13px/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:11px 0 0}
.m-note b{color:var(--m-ink);font-weight:600}
/* ── Proof strip: real numbers, directly under the action ── */
.m-proof{display:flex;flex-wrap:wrap;gap:10px 30px;margin:26px 0 0;padding:18px 0 0;
border-top:1px solid var(--m-line)}
.m-stat b{display:block;font:800 21px/1.15 system-ui,Arial,sans-serif;color:var(--m-ink)}
.m-stat span{font:400 12.5px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink-2)}
/* ── O/CO rows: each objection answered where it is felt ── */
/* ── LIFECYCLE (Chuck 2026-09-20): "place it prominently on the main landing
page below the cta". A vertical spine with numbered markers, colour-coded by
WHO ACTS — accent for the three the visitor does once, green for the three
that run without them. That split IS the pitch, so the design encodes it
rather than just numbering steps. Native to index_m's tokens, not an iframe:
an embedded artifact would not inherit the theme, would not be crawlable,
and adds a third-party request to the critical path. */
.m-life{padding:44px 0 4px}
.m-life h2{font:700 clamp(21px,3vw,27px)/1.25 system-ui,Arial,sans-serif;margin:0 0 6px}
.m-life .m-lede{color:var(--m-ink-2);margin:0 0 26px;max-width:58ch}
.m-steps{display:grid;gap:0;position:relative;margin:0;padding:0;list-style:none}
.m-step{display:grid;grid-template-columns:52px 1fr;gap:0 18px;position:relative;
padding:0 0 22px}
/* the spine: a rule behind the markers, stopping at the last one */
.m-step::before{content:"";position:absolute;left:25px;top:30px;bottom:0;width:1px;
background:var(--m-line)}
.m-step:last-child::before{display:none}
.m-num{width:52px;display:flex;justify-content:center}
.m-num b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font:700 13px/1 system-ui,Arial,sans-serif;color:#fff;position:relative;z-index:1}
.m-step.is-you .m-num b{background:var(--m-accent)}
.m-step.is-auto .m-num b{background:var(--m-live)}
.m-sbody{padding-top:3px}
.m-role{font:600 10.5px/1 system-ui,Arial,sans-serif;text-transform:uppercase;
letter-spacing:.1em;margin:0 0 5px}
.m-step.is-you .m-role{color:var(--m-accent)}
.m-step.is-auto .m-role{color:var(--m-live)}
.m-step h3{font:700 16.5px/1.3 system-ui,Arial,sans-serif;margin:0 0 5px}
.m-step p{font:400 14.5px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);
margin:0;max-width:56ch}
.m-loop{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0 70px;
font:600 11.5px/1 system-ui,Arial,sans-serif;text-transform:uppercase;
letter-spacing:.09em;color:var(--m-live);background:rgba(10,125,52,.08);
border:1px solid rgba(10,125,52,.22);border-radius:999px;padding:9px 15px}
@media (max-width:560px){
.m-life{padding-top:34px}
.m-step{grid-template-columns:40px 1fr;gap:0 14px}
.m-step::before{left:19px}
.m-num{width:40px}
.m-loop{margin-left:0}
}
/* ── FAQ ("Before you decide") ────────────────────────────────────────────
🔴 BUG, found 2026-09-20 when Chuck asked for "a left margin for it": this
block uses .sl-pad / .sl-faq / .sl-q, and NONE of those are defined in
index_m.html OR base.html — they live in index_f.html, and the section was
carried over without its stylesheet. It has been rendering completely
unstyled (no gutter, no type scale, no disclosure affordance) since the
homepage was promoted. The margin was not missing; the CSS was.
⭐ The lesson for the next carry-over: copying MARKUP between templates
silently drops the styles it depends on, and an unstyled block still renders
200 OK. Grep the class names, do not eyeball the page.
Restyled here in index_m's own --m-* vocabulary rather than importing
index_f's --sl-* world, so there is one token system on this page. */
.sl-faq{padding:44px 0 4px}
.sl-faq .m-wrap{}
.sl-faq-h{font:700 clamp(21px,3vw,27px)/1.25 system-ui,Arial,sans-serif;margin:0 0 6px}
.sl-faq > p{color:var(--m-ink-2);margin:0 0 22px;max-width:58ch}
.sl-q{border-bottom:1px solid var(--m-line);padding:0}
.sl-q:first-of-type{border-top:1px solid var(--m-line)}
.sl-q > summary{
cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
font:600 16px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink);
}
.sl-q > summary::-webkit-details-marker{display:none}
/* the disclosure affordance: a chevron that rotates open */
.sl-q > summary::after{
content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
border-right:2px solid var(--m-ink-2);border-bottom:2px solid var(--m-ink-2);
transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.sl-q[open] > summary::after{transform:translateY(-20%) rotate(225deg)}
.sl-q > summary:hover{color:var(--m-accent)}
.sl-q > summary:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px;border-radius:3px}
/* ⬅ THE LEFT MARGIN Chuck asked for: answers indent from their question, so an
open answer is visibly subordinate to the summary it belongs to. */
.sl-q > p, .sl-q > ul, .sl-q > ol{
margin:0 0 13px;padding-left:18px;border-left:2px solid var(--m-line);
font:400 14.5px/1.65 system-ui,Arial,sans-serif;color:var(--m-ink-2);max-width:60ch;
}
.sl-q > p:first-of-type{margin-top:2px}
.sl-q > p:last-child{margin-bottom:17px}
.sl-q em{font-style:italic;color:var(--m-ink)}
@media (prefers-reduced-motion:reduce){.sl-q > summary::after{transition:none}}
@media (max-width:560px){
.sl-faq{padding-top:34px}
.sl-q > summary{font-size:15.5px;padding-right:30px}
.sl-q > p{padding-left:14px}
}
.m-oco{background:var(--m-wash);border-top:1px solid var(--m-line);
border-bottom:1px solid var(--m-line);padding:40px 0;margin:44px 0 0}
.m-oco h2{font:700 clamp(21px,3vw,27px)/1.25 system-ui,Arial,sans-serif;margin:0 0 22px}
.m-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.m-card{background:var(--m-paper);border:1px solid var(--m-line);border-radius:11px;padding:19px}
.m-card h3{font:700 15px/1.3 system-ui,Arial,sans-serif;margin:0 0 8px;color:var(--m-ink)}
.m-card p{font:400 14.5px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0}
.m-card a{color:var(--m-accent)}
/* Chuck 2026-09-23: sky-blue cards in 'The four things people ask'. #BFE6F7, not
true sky blue #87CEEB — on #87CEEB the accent links fall to 3.5:1 (fails AA);
here ink 14.3:1, body 7.1:1, links 4.7:1. */
.m-oco .m-card{background:#bfe6f7;border-color:#9fd3ee}
.m-close{padding:44px 0 52px;text-align:center}
.m-close h2{font:800 clamp(22px,3.4vw,31px)/1.2 system-ui,Arial,sans-serif;margin:0 0 10px}
.m-close p{font:400 16px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);
margin:0 auto 22px;max-width:46ch}
.m-secondary{font:400 14px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:18px 0 0}
/* "Still deciding?" email capture (2026-10-06). Sits AFTER the last demo box, so it
only reaches visitors who scrolled past every demo button without using one. */
/* Sample carousel (2026-10-12) — hidden slides only once the JS has marked the box .n-car */
.n-car .n-slide{display:none}
.n-car .n-slide.is-active{display:block}
.n-car-bar{display:flex;align-items:center;gap:8px;padding:10px 10px 6px;border-bottom:1px solid var(--m-line)}
.n-car-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:2px solid #c2410c;background:#fff;
color:#c2410c;font-size:30px;line-height:36px;font-weight:700;cursor:pointer;padding:0}
.n-car-btn:hover{background:#c2410c;color:#fff}
.n-car-btn:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
.n-car-lab{flex:1 1 auto;margin:0;text-align:center;font-size:.9rem;line-height:1.3;color:var(--m-ink)}
.n-car-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c2410c}
.n-car-n{display:block;font-size:12px;color:var(--m-ink-2)}
.n-car-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 10px;border-bottom:1px solid var(--m-line)}
.n-chip{flex:0 0 auto;min-height:32px;padding:5px 11px;border-radius:999px;border:1px solid #c2410c;background:#fff;color:#9a3412;
font:600 13px/1.2 system-ui,Arial,sans-serif;cursor:pointer}
.n-chip:hover{background:#fff7ed}
.n-chip.is-on{background:#c2410c;color:#fff}
.n-chip:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
.n-next{margin:12px 0 0;padding:9px 12px 10px;background:#e8f4ee;border:1px solid #bfe0cf;
border-left:4px solid #0d7a55;border-radius:10px;text-align:left}
.n-next-h{margin:0 0 3px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#0b6949}
.n-next-p{margin:0;font-size:.9rem;line-height:1.4;color:#1a2230}
.n-next-p b,.n-next-ol b{color:#0b6949}
.n-next-ol{margin:0;padding:0 0 0 18px;font-size:.9rem;line-height:1.4;color:#1a2230}
.n-next-ol li{margin:0 0 2px}
.o-decide{padding:0 0 44px}
.o-decide-card{max-width:520px;margin:0 auto;background:var(--m-wash);border:1px solid var(--m-line);
border-radius:12px;padding:22px 22px 18px;font:400 16px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink)}
.o-decide-card h2{font:800 22px/1.25 system-ui,Arial,sans-serif;margin:0 0 6px}
.o-decide-card .o-decide-lede{margin:0 0 14px;color:var(--m-ink-2)}
.o-decide-card label{display:block;font-weight:600;font-size:14px;margin:0 0 4px}
.o-decide-card select,.o-decide-card input[type=email]{width:100%;box-sizing:border-box;min-height:44px;
font:400 16px system-ui,Arial,sans-serif;padding:8px 10px;border:1px solid #b8c2d0;border-radius:8px;
background:#fff;color:var(--m-ink);margin:0 0 12px}
.o-decide-card button{width:100%;min-height:46px;border:0;border-radius:8px;background:var(--m-accent);
color:#fff;font:700 16px system-ui,Arial,sans-serif;cursor:pointer}
.o-decide-card button:disabled{opacity:.6;cursor:default}
.o-decide-fine{font-size:13px;color:var(--m-ink-2);margin:10px 0 0}
.o-decide-msg{display:none;margin:10px 0 0;font-weight:600}
.o-decide-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.m-secondary a{color:var(--m-accent)}
/* ── AUTOCOMPLETE DROPDOWN TOKENS ────────────────────────────────────────
🔴 BLACK-ON-BLACK, EVERY OTHER ROW (Chuck 2026-09-20: "the dropdown has
black on black every other pick"). Same defect blog_post.html hit on
2026-09-04, same cause, and M shipped with it because I included the shared
partial without defining ANY of its --lba-* tokens.
Mechanism: _landing_box_autocomplete.html writes every row as
color:var(--lba-fg,#2B2622) — near-black — and bands only the EVEN rows via
nth-child(2n) with var(--lba-band,#DCE8D5), a light green. On a light
surface both read fine. On a dark surface the odd rows are near-black text
on near-black background = invisible, while the even rows survive ONLY
because the light band is painted over them. Hence "every other pick".
⭐ The fix belongs HERE, not in the partial: the partial is shared by /,
/consultant, /one-time-brief and the blog, and every other caller either
renders on paper or sets its own tokens. Changing the partial would fix M
and break the rest — the [[learnings_guards_fail_silently_not_cores]] shape.
Both themes are set explicitly rather than relying on the light defaults,
so the dropdown follows the page instead of inheriting a surface it does
not control. Values match consultant_landing_f.html's dark set, which is
already in production and measured for contrast. */
.m-root [id$="-suggestions"]{
--lba-bg:#FFFFFF;--lba-fg:#2B2622;--lba-muted:#5C6472;--lba-line:#CFD4DA;
--lba-hover:#F0EADC;--lba-band:#DCE8D5;--lba-hdr-bg:#FBF3D6;--lba-hdr-fg:#7A5B00;
background:#FFFFFF;color:#2B2622;
border:1px solid #CFD4DA;border-radius:0 0 11px 11px;
box-shadow:0 10px 26px rgba(13,17,23,.20);text-align:left}
/* ⚠️ NO dark variant for the dropdown either, now that the page itself is
light-only: a dark picker on a white page is the same mismatch in reverse.
The LIGHT tokens above are set EXPLICITLY rather than left to the partial's
defaults — that omission is what produced the black-on-black rows, and
relying on a default is how it would come back. */
@media (max-width:560px){
.m-hero{padding:12px 0 26px}
.m-h1{max-width:100%}
.m-try .fld{min-height:56px}
.m-try button[type=submit]{padding:0 16px;font-size:14px}
.m-proof{gap:14px 22px}
}
.m-step h4{font:700 16.5px/1.3 system-ui,Arial,sans-serif;margin:0 0 5px}
/* ══ VARIANT N additions ══════════════════════════════════════════════════
Same --m-* tokens, same light-only decision as M (see the note above). */
.n-root :focus-visible{outline:3px solid var(--m-accent);outline-offset:2px;border-radius:4px}
.n-root .m-try .fld:focus-within{box-shadow:0 0 0 3px rgba(26,86,219,.28),0 10px 28px -14px rgba(26,86,219,.55)}
.n-root .m-try button[type=submit]:focus-visible{outline:3px solid #0b3ea8;outline-offset:2px}
/* HERO: copy + form on the left, the real brief preview on the right (desktop);
single column on phones, preview directly after the form. */
.n-hero{padding:18px 0 34px;background:
radial-gradient(1100px 380px at 50% -140px, rgba(26,86,219,.10), transparent 70%)}
.n-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;
/* Phones: GPS/ARC card right under the form, preview after it (Chuck 2026-09-25:
"move the GPS card up on phones"). Desktop keeps its own areas below. */
grid-template-areas:"copy" "arc" "prev"}
.n-hero-copy{grid-area:copy} .n-prev{grid-area:prev} .n-hero-arc{grid-area:arc}
.n-hero-arc:empty{display:none}
.n-hero-arc{margin-top:4px}
/* The empty autocomplete container drew a stray 1px-bordered dot beside the CTA
(also visible on M). Hidden only while it has no children; the partial fills it
before showing it, so an open dropdown is never :empty. */
.n-root [id$="-suggestions"]:empty{display:none}
@media (min-width:960px){
.n-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0 40px;
grid-template-areas:"copy prev" "arc prev";grid-template-rows:auto 1fr}
.n-hero{padding:30px 0 44px}
.n-hero-arc{margin-top:18px}
}
.n-h1{font:700 13px/1.35 system-ui,-apple-system,Arial,sans-serif;letter-spacing:.07em;
text-transform:uppercase;color:var(--m-accent-2);margin:0 0 10px}
/* M's H1 sentence is ~3x longer than the old headline — M's own size keeps the form
above the fold on phones. */
.n-headline.n-h1-long{font-size:clamp(22px,3.1vw,38px);line-height:1.15}
/* M used 32ch for this sentence; the generic .n-headline 20ch cap wrapped it to 8
lines (350px tall) at 1280 and 8 lines at 22px on a 390px phone (hunt 2026-09-25). */
.n-root .n-headline.n-h1-long{max-width:32ch}
.n-headline{font:800 clamp(27px,4.1vw,44px)/1.1 system-ui,-apple-system,Arial,sans-serif;
letter-spacing:-.02em;color:var(--m-ink);margin:0 0 12px;max-width:20ch}
.n-sub{font:400 clamp(15.5px,1.9vw,18px)/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2);
margin:0 0 14px;max-width:54ch}
.n-promise{font:600 15.5px/1.45 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0 0 10px;max-width:54ch}
.n-trust{font:400 13.5px/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:10px 0 0}
.n-trust b{color:var(--m-live);font-weight:700}
.n-cred{font:400 13px/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:6px 0 0;max-width:60ch}
.n-cred b{color:var(--m-ink);font-weight:600}
/* CRO 2026-09-25 (Chuck: "build 1 3 4"). PostHog 30d: 98 focused the box, 33 typed
(the hesitation point), and sample briefs were the most-chosen next page (~28 vs
/demo 23) but sat below the phone fold. .n-safe answers the objection at the box;
.n-look is a no-typing next step, in the first screen on a phone. */
.n-safe{font:400 13px/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:4px 0 0;max-width:60ch}
.n-look{font:600 14.5px/1.45 system-ui,Arial,sans-serif;color:var(--m-ink);margin:8px 0 0}
.n-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 4px;padding:0}
.n-scale>div{min-width:0;border-top:2px solid var(--accent,#1d4ed8);padding-top:8px}
.n-scale dt{font:800 22px/1.1 system-ui,Arial,sans-serif;color:var(--m-ink);font-variant-numeric:tabular-nums}
.n-scale dd{margin:2px 0 0;font:600 13px/1.3 system-ui,Arial,sans-serif;color:var(--m-ink)}
.n-scale dd.n-scale-cap{font-weight:400;font-size:12px;opacity:.75}
.n-scale-week{margin:6px 0 0;font:400 12.5px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink-2);font-variant-numeric:tabular-nums}
.n-scale-week b{color:var(--m-ink)}
.n-scale-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#16a34a;margin-right:6px;vertical-align:1px}
@media (max-width:520px){.n-scale{grid-template-columns:1fr;gap:8px}.n-scale>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline}.n-scale dd{grid-column:2}.n-scale dt{grid-row:span 2}}
.n-look a{color:var(--accent,#1d4ed8);text-decoration:underline}
/* Phones: the submit button drops under the input as a full-width bar, so a longer,
honest label never squeezes the field. It stays INSIDE label.fld (the ARC and the
autocomplete both expect that structure). */
@media (max-width:560px){
.n-root .m-try .fld{flex-wrap:wrap;padding:0;min-height:0}
.n-root .m-try input[type=text]{flex:1 1 100%;padding:0 14px;min-height:52px}
.n-root .m-try button[type=submit]{flex:1 1 100%;min-height:50px;margin:0 -2px -2px;
border-radius:0 0 9px 9px;font-size:15.5px}
}
/* The real-brief preview card */
.n-prev{background:var(--m-paper);border:1px solid var(--m-line);border-radius:14px;
box-shadow:0 18px 40px -26px rgba(13,17,23,.45);overflow:hidden}
.n-prev-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
background:#0d1b33;color:#fff;padding:10px 16px;
font:700 11.5px/1.3 system-ui,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.n-prev-top span:last-child{color:#b9c8e6;font-weight:600}
.n-prev-body{padding:14px 16px 6px}
.n-prev-meta{font:400 12.5px/1.45 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0 0 10px}
.n-flag{display:inline-block;font:700 11px/1 system-ui,Arial,sans-serif;letter-spacing:.08em;
text-transform:uppercase;color:#9b1c1c;background:#fdecec;border:1px solid #f5c2c2;
border-radius:999px;padding:6px 10px;margin:0 0 9px}
.n-prev-what{font:800 19px/1.3 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0 0 4px}
.n-prev-who{font:400 13px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0 0 10px}
.n-lbl{display:block;font:700 11px/1.3 system-ui,Arial,sans-serif;letter-spacing:.08em;
text-transform:uppercase;color:var(--m-ink-2);margin:10px 0 3px}
.n-lbl.is-move{color:var(--m-live)}
.n-prev-txt{font:400 14px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0}
.n-prev-src{font:400 12px/1.45 system-ui,Arial,sans-serif;color:var(--m-ink-2);
border-top:1px dashed var(--m-line);margin:12px 0 0;padding:9px 0 8px}
.n-rows{list-style:none;margin:0;padding:0 16px;border-top:1px solid var(--m-line);background:var(--m-wash)}
.n-rows li{padding:10px 0;border-bottom:1px solid var(--m-line)}
.n-rows li:last-child{border-bottom:0}
.n-rows .n-row-k{display:block;font:600 11px/1.3 system-ui,Arial,sans-serif;letter-spacing:.06em;
text-transform:uppercase;color:var(--m-ink-2)}
.n-rows .n-row-f{display:block;font:600 14px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink)}
/* One "Show full brief" link per business (Chuck 2026-09-25) — replaces the single
link that sat at the end of the card. */
.n-brief-link,a.n-brief-link{display:inline-block;margin:6px 0 2px;padding:4px 0;
font:600 13.5px/1.4 system-ui,Arial,sans-serif;color:var(--m-accent)}
.n-brief-link a{color:var(--m-accent)}
.n-rows{padding-bottom:4px}
.n-prev-foot{padding:10px 16px 14px;font:600 14px/1.4 system-ui,Arial,sans-serif;background:var(--m-wash)}
.n-prev-foot a{color:var(--m-accent);display:inline-block;padding:4px 0}
/* Generic section rhythm */
.n-sec{padding:44px 0 6px}
.n-sec h2{font:700 clamp(21px,3vw,27px)/1.25 system-ui,Arial,sans-serif;margin:0 0 8px;color:var(--m-ink)}
.n-lede{font:400 15.5px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0 0 22px;max-width:62ch}
.n-get{list-style:none;margin:0;padding:0;display:grid;gap:12px;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.n-get li{background:var(--m-wash);border:1px solid var(--m-line);border-radius:11px;padding:16px}
.n-get b{display:block;font:700 15.5px/1.35 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0 0 5px}
.n-get span{font:400 14.5px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2)}
.n-honest{font:400 13.5px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:14px 0 0;max-width:70ch}
.n-cover{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.n-cover .m-card h3{font-size:16px}
.n-how{counter-reset:nhow;list-style:none;margin:0;padding:0;display:grid;gap:14px;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.n-how li{counter-increment:nhow;border:1px solid var(--m-line);border-radius:11px;padding:16px 16px 16px 58px;position:relative}
.n-how li::before{content:counter(nhow);position:absolute;left:16px;top:15px;width:30px;height:30px;
border-radius:50%;background:var(--m-live);color:#fff;display:grid;place-items:center;
font:700 14px/1 system-ui,Arial,sans-serif}
.n-how h3{font:700 16px/1.3 system-ui,Arial,sans-serif;margin:0 0 5px}
.n-how p{font:400 14.5px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0}
.n-more{font:600 14.5px/1.5 system-ui,Arial,sans-serif;margin:16px 0 0}
.n-more a{color:var(--m-accent)}
.n-who{list-style:none;margin:0;padding:0;display:grid;gap:10px;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.n-who a{display:block;border:1px solid var(--m-line);border-radius:10px;padding:13px 15px;
color:var(--m-ink);text-decoration:none;font:600 15px/1.35 system-ui,Arial,sans-serif}
.n-who-note{font:400 14.5px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:14px 0 0;max-width:66ch}
.n-who a small{display:block;font:400 13.5px/1.45 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin-top:3px}
.n-who a:hover{border-color:var(--m-accent)}
.n-ex{list-style:none;margin:0;padding:0;display:grid;gap:12px;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.n-ex li{border:1px solid var(--m-line);border-radius:11px;padding:15px;background:var(--m-paper)}
.n-ex .n-row-k{display:block;font:600 11px/1.3 system-ui,Arial,sans-serif;letter-spacing:.06em;
text-transform:uppercase;color:var(--m-ink-2);margin:0 0 5px}
.n-ex b{display:block;font:700 15px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink)}
.n-ex p{font:400 14px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:6px 0 8px}
.n-ex p strong{color:var(--m-live)}
.n-ex a{color:var(--m-accent);font:600 14px/1.4 system-ui,Arial,sans-serif}
.n-vs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* 🖼 IMAGES 2026-09-25 (Chuck: "add a few images to prevent it from looking like reading a
post graduate thesis"). Real product only where a picture claims something (the town
map, a real brief render); the one illustration is labelled as one. All lazy + sized. */
.n-fig{margin:0}
.n-fig figcaption{font:400 13px/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:9px 2px 0}
.n-map{max-width:760px;margin:6px 0 0}
.n-map-frame{position:relative;border:1px solid var(--m-line);border-radius:12px;overflow:hidden;
line-height:0;box-shadow:0 8px 26px rgba(13,17,23,.08)}
.n-map-frame img{display:block;width:100%;height:auto}
.n-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;
line-height:1;white-space:nowrap}
.n-pin i{width:9px;height:9px;border-radius:50%;background:#3d4756;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.n-pin b{font:600 11px/1 system-ui,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;
color:#3d4756;background:rgba(255,255,255,.92);padding:3px 6px;border-radius:4px;border:1px solid var(--m-line)}
.n-pin.is-you i{width:13px;height:13px;background:var(--m-accent);box-shadow:0 0 0 4px rgba(255,255,255,.9)}
.n-pin.is-you b{color:#fff;background:var(--m-accent);border-color:var(--m-accent);font-size:12px}
.n-split{display:grid;gap:22px;align-items:start}
@media (min-width:860px){ .n-split{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:36px} }
.n-shot a{display:block;position:relative;max-height:470px;overflow:hidden;border:1px solid var(--m-line);
border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(13,17,23,.10);text-decoration:none}
.n-shot a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
background:linear-gradient(rgba(255,255,255,0),#fff 78%)}
.n-shot img{display:block;width:100%;height:auto}
.n-shot-go{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:1;
font:600 13.5px/1 system-ui,Arial,sans-serif;color:#fff;background:var(--m-accent);
padding:9px 15px;border-radius:999px;white-space:nowrap}
@media (max-width:859px){ .n-shot a{max-height:380px} }
/* Chuck 2026-09-26: "all it really shows is the Confidential message". In O the figure
sits in a full-width column, so the 712px image was stretched to ~1,048px wide
(~1,490px tall, blurry) and clipped at 470px -- header + banner only. Cap it near its
natural width and open the window so the findings and the Actions panel show. */
.o-pair{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.o-pair a{display:inline-block;padding:10px 16px;border:1.5px solid currentColor;
border-radius:999px;text-decoration:none;font-weight:600;line-height:1.2}
.o-pair a:hover,.o-pair a:focus-visible{background:rgba(37,99,235,.08)}
@media (max-width:520px){ .o-pair a{display:block;text-align:center} }
#what-you-get .n-shot{max-width:620px;margin:22px auto 0}
#what-you-get .n-shot a{max-height:800px}
@media (max-width:859px){ #what-you-get .n-shot a{max-height:470px} }
.n-toon{margin:4px 0 18px;max-width:560px}
.n-toon img{display:block;width:100%;max-height:290px;object-fit:cover;object-position:50% 18%;border-radius:12px}
.n-split .n-how{grid-template-columns:1fr}
@media (max-width:720px){ .n-pin b{font-size:9.5px;padding:2px 4px} .n-pin.is-you b{font-size:10.5px}
.n-pin i{width:7px;height:7px} .n-pin.is-you i{width:10px;height:10px} .n-toon img{max-height:190px} }
.n-vs .m-card p + p{margin-top:9px}
.n-price{background:var(--m-wash);border:1px solid var(--m-line);border-radius:12px;padding:20px}
.n-price p{font:400 15px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0 0 10px;max-width:66ch}
.n-price p:last-child{margin-bottom:0}
.n-price a{color:var(--m-accent);font-weight:600}
.n-true{margin:22px 0 6px;padding:18px 20px;border:1px solid var(--m-line);border-left:4px solid var(--m-accent);
border-radius:10px;background:var(--m-wash);max-width:720px}
.n-true h3{font:800 19px/1.25 system-ui,-apple-system,Arial,sans-serif;margin:0 0 6px;color:var(--m-ink)}
.n-true p{font:400 15.5px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0 0 12px}
.n-true-cta{display:inline-block;background:var(--m-accent);color:#fff!important;font:700 15px/1 system-ui,Arial,sans-serif;
padding:12px 18px;border-radius:8px;text-decoration:none}
.n-true-cta:hover{background:var(--m-accent-2)}
.n-detail{border-top:1px solid var(--m-line);margin-top:44px}
.n-detail > .m-wrap > h2{margin-top:0}
.n-detail h3.n-dh{font:700 18px/1.3 system-ui,Arial,sans-serif;margin:30px 0 8px}
.n-detail p.n-dp{font:400 15px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0 0 12px;max-width:66ch}
.n-detail .m-life{padding-top:6px}
.n-root a{text-underline-offset:2px}
/* Phones: the GPS/ARC card directly under the FORM (Chuck: "move the GPS card up on
phones"). The grid put it under the whole copy cell, so the trust line and the
~98px .n-cred paragraph still sat between — at 390x844 only 90px of the card was
on screen, at 360x740 none. display:contents lets the copy's children join one
flex column with the card, and .n-cred drops below it. Measured in Chromium:
card at y=625-822 (390) and 668-865 (360), fully visible; no overflow. */
@media (max-width:720px){
.n-root .n-headline.n-h1-long{max-width:none}
.n-root .n-hero-grid{display:flex;flex-direction:column;gap:0}
.n-root .n-hero-copy{display:contents}
.n-root .n-hero-copy>*{order:1}
.n-root .n-hero-copy>.n-cred{order:3;margin-top:14px}
.n-root .n-hero-arc{order:2;margin-top:14px}
.n-root .n-prev{order:4;margin-top:16px}
}
/* When the ARC's "nothing found" fallback moves #mTryForm into the card, the lines
that describe the form must not stay behind in the hero pushing the card (and the
form now inside it) below the fold. They return when the form comes home. */
.n-root .n-hero-copy:not(:has(#mTryForm)) .n-trust,
.n-root .n-hero-copy:not(:has(#mTryForm)) .n-cred,
.n-root .n-hero-copy:not(:has(#mTryForm)) .n-safe,
.n-root .n-hero-copy:not(:has(#mTryForm)) .n-look{display:none}
@media (max-width:560px){
.n-sec{padding-top:34px}
.n-prev-what{font-size:17.5px}
.n-h1{font-size:11.5px;letter-spacing:.045em}
.n-sub{font-size:15px}
.n-hero-grid{gap:16px}
/* Phones: the three extra rows are hidden in the hero — all three are repeated
in #examples below — so the ARC / GPS ask that follows the preview sits
~200px higher. Desktop shows them beside the form. */
.n-rows{display:none}
}
/* ══ First-screen readability (paid reviewer 2026-10-05) ══════════════════
H1 WORDS UNCHANGED — presentation only. The tag stays (tests assert
'we do that market research for you'); only its italics go: they
slowed the reader mid-sentence. text-wrap:balance evens the line lengths. */
.n-root .n-headline.n-h1-long em{font-style:normal;color:inherit}
.n-root .n-headline.n-h1-long{text-wrap:balance;font-size:clamp(20px,2.5vw,32px);line-height:1.18}
/* The "Example" corner badge in a dark bar read as an ad label. Light document
header, sentence case, the honesty label inline after the brand — not a badge. */
.n-prev-top{justify-content:flex-start;gap:0 6px;background:var(--m-wash);color:var(--m-ink);
border-bottom:1px solid var(--m-line);border-top:3px solid var(--m-accent);
font:600 13px/1.4 system-ui,Arial,sans-serif;letter-spacing:0;text-transform:none}
.n-prev-top span:last-child{color:var(--m-ink-2);font-weight:400}
.n-prev-top span:last-child::before{content:"\00b7\00a0";color:var(--m-ink-2)}
@media (min-width:960px){
.n-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.n-root .n-headline.n-h1-long{max-width:36ch}
}
@media (max-width:560px){
.n-root .n-headline.n-h1-long{font-size:20px;line-height:1.2;letter-spacing:-.012em}
}
@media (max-width:720px){
/* Compact proof card directly under the form + "Free · no signup" line.
Order (display:contents flex column from the 720px block):
h1 sub promise form trust (1) → preview (2) → safe look (3) → ARC (4) → cred (5) */
.n-root .n-prev{order:2;margin-top:14px;box-shadow:none}
.n-root .n-hero-copy>.n-safe,.n-root .n-hero-copy>.n-look{order:3}
.n-root .n-hero-arc{order:4}
.n-root .n-hero-copy>.n-cred{order:5}
.n-root .n-prev-top{padding:7px 12px;font-size:12.5px}
.n-root .n-prev-body{padding:9px 12px 4px}
.n-root .n-prev-meta{font-size:11.5px;margin:0 0 6px}
.n-root .n-flag{font-size:10px;padding:4px 8px;margin:0 0 6px}
.n-root .n-prev-what{font-size:16px;line-height:1.3;margin:0 0 2px}
.n-root .n-prev-who{font-size:12.5px;margin:0 0 4px}
.n-root .n-prev .n-lbl:not(.is-move):not(.is-gg),
.n-root .n-prev .n-lbl:not(.is-move):not(.is-gg)+.n-prev-txt,
.n-root .n-prev-src{display:none}
.n-root .n-prev .n-lbl{margin:6px 0 2px}
.n-root .n-prev .n-lbl.is-move+.n-prev-txt{font-size:13.5px;line-height:1.45;
display:block} /* hunt 10/06 (Chuck): the move is a complete thought — never clamp it */
.n-root .n-prev .n-brief-link{margin:2px 0 0}
.n-root .n-prev .n-brief-link a{display:inline-block;padding:11px 0;min-height:44px}
}
/* Problem line under the H1 (reviewer: "feels like I'm supposed to already know why I need this") */
.n-pain{font:600 clamp(16px,2vw,19px)/1.45 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0 0 8px;max-width:54ch}
@media (max-width:720px){
/* 2026-10-16 round 3: the phone personas had NO no-typing route on screen one (the
proof card sits further down), so the "Rather look first?" line shows on phones. */
}
/* ══ VARIANT O — compact rows ═══════════════════════════════════════════ */
.o-mr{max-width:66ch}
.o-mr p{font:400 15.5px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0 0 12px}
.o-mr p strong{color:var(--m-ink)}
.o-h3{font:700 16.5px/1.3 system-ui,Arial,sans-serif;color:var(--m-ink);margin:22px 0 10px}
.o-cover{font:400 14.5px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:14px 0 0;max-width:70ch}
.n-scale-band{padding:18px 0 22px;background:var(--m-wash);border-top:1px solid var(--m-line);border-bottom:1px solid var(--m-line)}
.n-scale-band .n-scale{margin:0}
.o-watch{margin:18px 0 6px;padding:14px 16px;border:1px solid var(--m-line);border-radius:12px;background:var(--m-wash);max-width:70ch}
.o-watch-h{margin:0 0 8px;font:700 14px/1.3 system-ui,Arial,sans-serif;color:var(--m-ink)}
.o-watch-l{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.o-watch-l li{padding:5px 11px;border:1px solid var(--m-line);border-radius:999px;background:var(--m-paper);font:500 13.5px/1.3 system-ui,Arial,sans-serif;color:var(--m-ink)}
.o-cover b{color:var(--m-ink);font-weight:600}
.o-links{font:600 14.5px/1.5 system-ui,Arial,sans-serif;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px}
.o-links a{color:var(--m-accent)}
.o-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.o-chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border:1px solid var(--m-line);
border-radius:999px;font:600 14px/1.2 system-ui,Arial,sans-serif;color:var(--m-ink);text-decoration:none;background:var(--m-paper)}
.o-chips a:hover{border-color:var(--m-accent);color:var(--m-accent)}
.o-resell{margin:12px 0 0;font:700 15px/1.45 system-ui,Arial,sans-serif}
.o-resell a{color:var(--m-accent);text-decoration:underline}
.o-jsonl{margin:12px 0 0;font:400 14px/1.5 system-ui,Arial,sans-serif;color:var(--m-ink-2)}
.o-jsonl b{color:var(--m-ink)}
.o-qa{margin:20px 0 0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.o-qa div{border:1px solid var(--m-line);border-radius:11px;padding:14px 16px;background:var(--m-wash)}
.o-qa h3{font:700 15px/1.35 system-ui,Arial,sans-serif;color:var(--m-ink);margin:0 0 5px}
.o-qa p{font:400 14.5px/1.55 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0}
.n-root .n-close-trust{margin:12px auto 0}
/* Directory badges (from index_k2, 2026-09-28), on this page's --m-* tokens. */
.o-badges-box{border-top:1px solid var(--m-line);padding:14px 0 26px;text-align:center}
.o-badges-box>summary{display:inline-block;cursor:pointer;list-style:none;margin:0;padding:12px 10px}
/* 375px pass (2026-10-10): on a phone the example line pushed the run button a
further 60px below the fold; the H1 is Chuck's and stays, so this line goes. */
@media (max-width:420px){.n-promise-ex{display:none}}
.o-badges-box>summary::-webkit-details-marker{display:none}
.o-badges-box>summary::after{content:" \25B8";letter-spacing:0}
.o-badges-box[open]>summary::after{content:" \25BE"}
.o-badges-box>summary:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px;border-radius:4px}
.o-badges{margin:0;padding:10px 0 0;display:flex;
align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.o-badges-lead{font:700 11px/1.4 system-ui,Arial,sans-serif;letter-spacing:.16em;
text-transform:uppercase;color:var(--m-ink-2);text-align:center}
.o-badge{font:700 11px/1.4 system-ui,Arial,sans-serif;color:var(--m-ink);text-decoration:none;
background:var(--m-wash);border:1px solid var(--m-line);border-radius:6px;padding:3px 9px;
transition:border-color .15s,color .15s}
.o-badge:hover{border-color:var(--m-accent);color:var(--m-accent)}
.o-badge-img{display:inline-flex;align-items:center;line-height:0;text-decoration:none;
opacity:.9;transition:opacity .15s}
.o-badge-img:hover{opacity:1}
.o-badge-img img{display:block;max-width:100%;height:auto;max-height:28px!important;width:auto!important}
/* CLS: reserve each badge's width before its SVG lands (ratios from index_k2). */
.o-badge-img img[data-ar]{aspect-ratio:var(--ar)}
@media (max-width:720px){
.o-badge-img{flex-basis:100%;justify-content:center;margin-top:4px;min-height:28px}
.o-badge-img img{height:28px!important;width:auto!important}
/* the Tiny Startups badge IS its bordered box (no img), so full-width would stretch
the border across the screen — keep it its own size, centred on its line */
.o-badge-tiny{flex-basis:auto;margin:4px calc(50% - 70px) 0}
}
.o-learn{padding:22px 0 34px;border-top:1px solid var(--m-line)}
.o-learn p{font:600 14px/1.6 system-ui,Arial,sans-serif;color:var(--m-ink-2);margin:0;
display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.o-learn a{color:var(--m-accent)}
.o-learn span{color:var(--m-ink)}
/* O on phones: same copy, tighter boxes — the page's job is to get back to the form. */
@media (max-width:560px){
.n-root #watch.n-watch{padding-top:6px}
.n-watch .m-listen{padding:12px 14px}
.n-watch .m-listen-hook{font-size:16px}
.n-root #watch .m-media{flex-direction:row;flex-wrap:wrap;gap:8px}
.n-root #watch .m-media a{min-height:40px;padding:0 12px;font-size:14px}
.n-root #what-you-get .n-get{gap:8px}
.n-root #what-you-get .n-get li{padding:11px 13px}
.n-root #what-you-get .n-get b{font-size:15px;margin:0 0 3px}
.n-root #what-you-get .n-get span{font-size:14px;line-height:1.5}
.n-root #examples .n-ex{gap:8px}
.n-root #examples .n-ex li{padding:12px 13px}
.n-root #examples .n-ex p{margin:4px 0 4px}
.o-chips{gap:6px}
.o-chips a{min-height:36px;padding:0 11px;font-size:13.5px}
.o-qa{gap:8px;margin-top:14px}
.o-qa div{padding:11px 13px}
.n-root .m-close{padding:34px 0 36px}
}
/* Sample card in a SERIF "document" face (Chuck 2026-10-05: "it's using the same font
as the narrative on the left so it all blends together"). The brief's own words go
serif; its UI chrome (header strip, flag, section labels, link) stays sans. */
.n-root .n-prev .n-prev-meta,.n-root .n-prev .n-prev-what,.n-root .n-prev .n-prev-who,
.n-root .n-prev .n-prev-txt,.n-root .n-prev .n-prev-src{
font-family:Charter,'Bitstream Charter','Sitka Text',Cambria,Georgia,'DejaVu Serif',serif}
.n-root .n-prev .n-prev-what{font-weight:700;letter-spacing:-.005em}
.n-root .n-prev .n-prev-txt{line-height:1.6}
/* Pastel memo-yellow card (Chuck 2026-10-05) — a separate "document" on the page. */
.n-root .n-prev{background:#FFF8DB;border-color:#EBDDA6}
.n-root .n-prev .n-prev-top{background:#FCEFC0;border-bottom-color:#EBDDA6}
.n-root .n-prev .n-prev-src{border-top-color:#E6D69A}
.n-root .n-prev .n-prev-foot{background:#FCEFC0}
.n-root .n-prev .n-prev-meta strong{color:var(--m-ink);font-weight:700}
.n-root .n-prev .n-prev-who b{font-family:system-ui,Arial,sans-serif;font-weight:600;color:var(--m-ink)}
.n-root .n-prev .n-prev-for{font:400 15px/1.4 Charter,'Bitstream Charter','Sitka Text',Cambria,Georgia,'DejaVu Serif',serif;
color:var(--m-ink);margin:0 0 2px}
.n-root .n-prev .n-prev-for strong{font-weight:700}
/* ══ Featured watch/listen band (Chuck 2026-10-05: not missed by a fast scroller) ══ */
.n-root #watch{scroll-margin-top:76px}
.n-root .n-watch{background:#EEF4FF;border-top:1px solid #D6E2FA;border-bottom:1px solid #D6E2FA;
padding:28px 0 26px}
.n-root .n-watch .w-h{font:800 clamp(20px,2.2vw,26px)/1.25 system-ui,Arial,sans-serif;color:var(--m-ink);
margin:0 0 16px;text-wrap:balance}
.n-root .w-grid{display:grid;grid-template-columns:repeat(2,minmax(0,400px));gap:18px}
.n-root .w-card{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid #D6E2FA;
border-radius:14px;padding:10px 10px 14px;text-decoration:none;color:var(--m-ink);
box-shadow:0 6px 18px rgba(30,64,175,.10);transition:transform .15s ease,box-shadow .15s ease}
.n-root .w-card:hover,.n-root .w-card:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,64,175,.18)}
.n-root .w-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;
background:#dfe7f7;margin:0 0 8px}
.n-root .w-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.n-root .w-play{position:absolute;left:50%;top:85%;width:46px;height:46px;margin:-23px 0 0 -23px;
border-radius:50%;background:#1d4ed8;color:#fff;font-size:19px;line-height:46px;text-align:center;
padding-left:4px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.n-root .w-thumb-pod{display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#1d4ed8,#7c3aed)}
.n-root .w-ico{font-size:58px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.n-root .w-t{font:800 17px/1.3 system-ui,Arial,sans-serif;padding:0 4px;color:#1d4ed8}
.n-root .w-m{font:400 14.5px/1.45 system-ui,Arial,sans-serif;padding:0 4px;color:var(--m-ink-2)}
.n-root .w-guide{margin:14px 0 0;font:600 15px/1.4 system-ui,Arial,sans-serif}
.n-root .w-guide a{color:var(--m-accent,#0d7a55);text-decoration:none;border-bottom:1px solid transparent}
.n-root .w-guide a:hover{border-bottom-color:currentColor}
/* hero pointer to the band, visible in the first screen on every width */
.n-root .n-tour{margin:8px 0 0;font:600 14.5px/1.4 system-ui,Arial,sans-serif}
.n-root .n-tour a{color:#1d4ed8;text-decoration:none;border-bottom:1px solid rgba(29,78,216,.35)}
@media (max-width:640px){
.n-root .w-grid{grid-template-columns:1fr;gap:12px}
.n-root .w-thumb-pod{aspect-ratio:auto;height:72px}
.n-root .w-ico{font-size:40px}
.n-root .n-watch{padding:20px 0}
}
/* 2026-10-14 (Chuck): below-hero sections were left-justified with a wide empty right
side on desktop — center them. Headings + one-line rows center; long prose stays
left-aligned inside a centered column. Hero untouched. */
.n-root .n-sec h2,.n-root .n-sec .o-h3{text-align:center}
.n-root .n-sec .o-mr,.n-root .n-sec .n-true,.n-root .n-sec .n-price{margin-left:auto;margin-right:auto}
.n-root .n-sec .n-true{max-width:640px}
.n-root .n-sec .n-price{max-width:720px}
.n-root .n-sec .n-honest,.n-root .n-sec .o-cover,.n-root .n-sec .n-who-note,.n-root .n-sec .n-ex-line,
.n-root .n-sec .n-more,.n-root .n-sec .o-resell{margin-left:auto;margin-right:auto;text-align:center}
.n-root .n-sec .o-links,.n-root .n-sec .o-chips,.n-root .n-sec .o-pair{justify-content:center}
.n-root #what-you-get .n-get{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.n-root .n-sec .o-qa{max-width:900px;margin-left:auto;margin-right:auto}
.n-root .w-grid{justify-content:center}
.o-learn p{justify-content:center;text-align:center}
/* Q: carousel shows the spine only */
.n-prev .n-lbl,.n-prev .n-prev-txt{display:none!important}
.n-prev .n-prev-what{font-size:22px;line-height:1.25;font-weight:800}