/* The public site. Phone first, calm, quick: paper by day, the porch at night (dark mode follows the phone).
   base.css (the engine's) supplies the components; this file sets the site's own pieces. */

:root{--night:#14100d;--night-2:#1c1611;--night-card:#221b15;--gold:#d8a85a;--gold-deep:#e9c07c;--cream:#efe7da;--cream-soft:#cdc0ad;--cream-dim:#a69885}

/* Dark mode: the same tokens turned around, for a man reading this at 11 at night. */
@media (prefers-color-scheme:dark){
  body.site{--paper:#15110e;--paper-2:#1d1813;--card:#211b16;--field:#1a1511;--ink:#eee5d8;--soft:#cbbfae;--dim:#a39784;
    --line:rgba(238,229,216,.22);--line-soft:rgba(238,229,216,.11);--accent:#e3986f;--accent-deep:#efb08c;--accent-soft:rgba(227,152,111,.13);--on-accent:#1a110b;
    --steel:#9fb6c4;--steel-soft:rgba(159,182,196,.16);--ok:#25301c;--ok-ink:#cfe0b8;--warn:#3a1f17;--warn-ink:#f3c4b3;--night:#0e0b09;--night-2:#15110e;--night-card:#1d1813}
  body.site .btn.ghost:hover{color:var(--paper)}
}

[hidden]{display:none!important}
body.site{font-size:18px}
.but-card{margin:0}
.site .brand{white-space:nowrap;min-height:44px}
@media (min-width:700px){body.site{font-size:19px}}
.site h1{font-size:clamp(34px,6.2vw,62px);letter-spacing:-.015em;line-height:1.06}
.site h2{font-size:clamp(27px,4vw,42px);letter-spacing:-.01em;line-height:1.1}
.site section{padding:56px 0}
@media (min-width:900px){.site section{padding:84px 0}}
.site .lede{color:var(--soft)}
.site .kicker{letter-spacing:.16em}
.site a{text-underline-offset:.16em;text-decoration-thickness:1px}
.center{text-align:center}.center .lede,.center h2{margin-left:auto;margin-right:auto}
.measure{max-width:38em}
.stack-sm>*+*{margin-top:10px}

/* header: the one button stays in reach on a phone */
.site .top{background:color-mix(in srgb,var(--paper) 90%,transparent)}
.top-cta{display:none;margin-left:auto;font:600 15px/1 var(--sans);background:var(--accent);color:var(--on-accent);text-decoration:none;border-radius:999px;padding:14px 16px;white-space:nowrap}
.top-cta:hover{background:var(--accent-deep);color:var(--on-accent)}
@media (max-width:900px){.top-cta{display:inline-block}.site .menu{margin-left:8px;min-height:42px}.site .top nav a{padding:12px 10px}}
@media (max-width:480px){.site .wrap,.site .read{padding-left:16px;padding-right:16px}.site .brand{font-size:17px;gap:7px}.site .brand .mark{width:18px;height:12px;border-width:2.5px;border-top-width:5px}.site .top .wrap{gap:8px}.top-cta{padding:14px 12px;font-size:14px}.site .menu{padding:8px 10px;font-size:14px;margin-left:0}}
@media (max-width:370px){.site .brand{font-size:15px}.top-cta{padding:11px 12px;font-size:14px}}
.site .top nav a.signin{color:var(--soft)}

/* buttons: big enough for a thumb */
.site .btn{min-height:48px}
.site .btn.big{font-size:18px;padding:16px 26px}
@media (max-width:520px){.site .btns .btn{width:100%}.site .btns{gap:10px}}
.textlink{font:600 17px var(--sans);display:inline-flex;align-items:center;min-height:44px}
.dark .textlink{color:var(--gold-deep)}

/* night bands */
.dark{background:var(--night);color:var(--cream);
  --ink:var(--cream);--soft:var(--cream-soft);--dim:var(--cream-dim);--card:var(--night-card);--paper-2:var(--night-2);
  --line:rgba(239,231,218,.22);--line-soft:rgba(239,231,218,.10);--accent:var(--gold);--accent-deep:var(--gold-deep);--on-accent:#1a130c;--accent-soft:rgba(216,168,90,.12)}
.dark .btn.ghost{color:var(--cream);border-color:rgba(239,231,218,.55)}
.dark .btn.ghost:hover{background:var(--cream);color:var(--night)}
.dark a:not(.btn){color:var(--gold-deep)}

/* 1 · the hero */
.hero-a{padding:44px 0 48px}
@media (min-width:900px){.hero-a{padding:96px 0 88px}}
.hero-a .wrap{display:grid;gap:40px;align-items:center}
@media (min-width:980px){.hero-a .wrap{grid-template-columns:1.25fr 1fr}}
.hero-a h1{max-width:13em;margin-bottom:.35em}
.hero-a .sub{font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--soft);max-width:30em;margin-bottom:18px}
.what{font:16px/1.5 var(--sans);color:var(--soft);border-left:3px solid var(--accent);padding:2px 0 2px 14px;max-width:34em;margin:0}
.what b{color:var(--ink);font-weight:600}
.hero-a .fine{margin-top:14px}
.hpicks{display:grid;gap:8px;margin:22px 0 0;max-width:34em}
.hpicks-q{font:600 17px/1.4 var(--sans);color:var(--cream);margin:0 0 4px}
.dark a.hpick,.hpick{display:block;text-decoration:none;font:17px/1.4 var(--serif);color:var(--cream);background:rgba(239,231,218,.06);border:1.5px solid rgba(239,231,218,.32);border-radius:12px;padding:12px 16px}
.dark a.hpick:hover,.dark a.hpick:focus-visible{border-color:var(--gold-deep);background:rgba(239,231,218,.12)}
.hero-a .start-now{margin:6px 0 0;font:16px/1.5 var(--sans)}
.hero-a .start-now a{color:var(--gold-deep);text-underline-offset:3px;display:inline-block;padding:6px 0}
.after-day{max-width:620px;margin:26px auto 0;text-align:center}
.after-day form{margin:12px 0 0}
.hero-a figure{margin:0;display:none}
@media (min-width:980px){.hero-a figure{display:block}}
.hero-a figure img{border-radius:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.cred{font:15px/1.5 var(--sans);color:var(--soft);margin:22px 0 0;max-width:36em}
.cred a{color:inherit}

/* 2 · the scenes */
.scenes{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
@media (min-width:760px){.scenes{grid-template-columns:1fr 1fr;gap:16px}}
.scenes li{background:var(--card);border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:4px var(--r) var(--r) 4px;padding:18px 20px;font:italic 400 clamp(19px,2.1vw,22px)/1.4 var(--serif);color:var(--ink)}
.scenes li small{display:block;font:500 13px/1.4 var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.after-scenes{margin-top:22px;color:var(--soft);max-width:38em}

/* 3 · the log demo */
.logdemo{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;max-width:640px;margin-top:24px;position:relative}
.logdemo .demo-tag{position:absolute;top:-12px;right:18px;background:var(--steel);color:var(--card);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.logdemo .q{font:600 15px/1.4 var(--sans);color:var(--soft);margin:0 0 4px}
.logdemo .p{font:500 clamp(20px,2.4vw,24px)/1.3 var(--display);margin:0 0 16px}
.logdemo fieldset{display:grid;gap:10px}
.logdemo legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logdemo input{position:absolute;opacity:0;width:1px;height:1px}
.logdemo label{display:flex;align-items:center;gap:12px;min-height:54px;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;font:600 17px/1.3 var(--sans);cursor:pointer;background:var(--field)}
.logdemo label::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--dim)}
.logdemo input:checked+label{border-color:var(--accent);background:var(--accent-soft)}
.logdemo input:checked+label::before{border:6px solid var(--accent)}
.logdemo input:focus-visible+label{outline:3px solid var(--steel);outline-offset:2px}
.logdemo .means{display:none;margin:16px 0 0;font:16px/1.55 var(--sans);color:var(--soft);background:var(--paper-2);border-radius:12px;padding:14px 16px}
.logdemo .means b{color:var(--ink)}
#ld-in:checked~.means.m-in,#ld-late:checked~.means.m-late,#ld-miss:checked~.means.m-miss{display:block}
.logdemo .hint{font:14px/1.5 var(--sans);color:var(--dim);margin:14px 0 0}
.logdemo:has(input:checked) .hint{display:none}

/* 4 · why the usual fixes don't stick */
.fixes{display:grid;gap:14px;margin-top:26px;list-style:none;padding:0}
@media (min-width:860px){.fixes{grid-template-columns:repeat(3,1fr);gap:18px}}
.fixes li{border-top:2px solid var(--line);padding-top:14px}
.fixes b{display:block;font:600 21px/1.25 var(--display);margin-bottom:6px}
.fixes p{margin:0;color:var(--soft);font-size:17px}
.instead{margin-top:30px;background:var(--accent-soft);border-radius:var(--r);padding:20px 22px;max-width:44em}
.instead p:last-child{margin:0}

/* 5 · how it works */
.day-strip{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:0;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:var(--card)}
@media (min-width:860px){.day-strip{grid-template-columns:repeat(3,1fr)}}
.day-strip li{padding:22px 22px 24px;border-top:1px solid var(--line-soft)}
.day-strip li:first-child{border-top:0}
@media (min-width:860px){.day-strip li{border-top:0;border-left:1px solid var(--line-soft)}.day-strip li:first-child{border-left:0}}
.day-strip .when{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.day-strip .when svg{width:22px;height:22px;flex:none}
.day-strip b{display:block;font:600 21px/1.25 var(--display);margin-bottom:6px}
.day-strip p{margin:0;color:var(--soft);font-size:17px}
.stage-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:0;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:var(--card)}
@media (min-width:860px){.stage-list{grid-template-columns:repeat(2,1fr)}}
.stage-list li{padding:18px 22px;border-top:1px solid var(--line-soft);min-width:0}
.stage-list li:first-child{border-top:0}
@media (min-width:860px){.stage-list li:nth-child(2){border-top:0}.stage-list li:nth-child(even){border-left:1px solid var(--line-soft)}}
.stage-list b{display:block;font:600 19px/1.25 var(--display);margin-bottom:4px}
.stage-list span{display:block;color:var(--soft);font-size:17px}
.time-note{margin:18px 0 0;font:16px/1.55 var(--sans);color:var(--soft);max-width:44em}

.excerpts{display:grid;gap:14px;margin-top:22px}
@media (min-width:900px){.excerpts{grid-template-columns:repeat(3,1fr);gap:18px}}
.excerpt{margin:0;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.excerpt figcaption{display:grid;gap:2px}
.ex-when{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ex-title{font:600 20px/1.25 var(--display)}
.ex-label{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ex-body{font-size:17px;line-height:1.55}
.ex-body p:last-child{margin:0}
.ex-why{font:15px/1.5 var(--sans);color:var(--soft);margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line-soft)}

.weeks-line{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;counter-reset:w}
.weeks-line li{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft);font-size:17px}
.weeks-line li span{font:600 12px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.weeks-line li p{margin:0;color:var(--soft)}
@media (min-width:860px){.weeks-line{grid-template-columns:1fr 1fr;column-gap:40px}}

/* day five, in full */
details.fullday{margin-top:22px;max-width:760px}
details.fullday>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1.5px solid var(--accent);border-radius:14px;padding:16px 20px;font:600 18px/1.3 var(--sans);color:var(--ink);min-height:56px}
details.fullday>summary::-webkit-details-marker{display:none}
details.fullday>summary::after{content:"Open";font:600 14px var(--sans);color:var(--accent)}
details.fullday[open]>summary::after{content:"Close"}
details.fullday[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
details.fullday .sample{border-top-left-radius:0;border-top-right-radius:0;border-top:0;max-width:none}
.sample{padding:24px}
@media (min-width:700px){.sample{padding:32px}}
.sample h3{font-size:clamp(24px,3vw,30px)}

/* 6 · the sentence after "but" */
.but-card{background:var(--night);color:var(--cream);border-radius:22px;padding:26px 22px 24px;max-width:720px;
  --ink:var(--cream);--soft:var(--cream-soft);--dim:var(--cream-dim);--accent:var(--gold);--accent-deep:var(--gold-deep);--on-accent:#1a130c;--line:rgba(239,231,218,.25)}
@media (min-width:700px){.but-card{padding:38px 40px 34px}}
.but-card .kicker{color:var(--gold)}
.but-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:18px;counter-reset:b}
.but-steps li{font:500 clamp(23px,3.4vw,34px)/1.3 var(--display);color:var(--cream)}
.but-steps li .lab{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:6px}
.but-steps .excuse{color:var(--cream-dim);text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:3px}
.but-steps li.final{color:#fff}
.but-card .why{font:16px/1.6 var(--sans);color:var(--cream-soft);margin:20px 0 0}
.but-card .why a{color:var(--gold-deep)}
.but-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.but-actions .btn{min-height:48px}
/* with JavaScript: one sentence at a time */
.but-card.live .but-steps li{display:none}
.but-card.live[data-step="0"] .s0,.but-card.live[data-step="1"] .s1,.but-card.live[data-step="2"] .s2{display:block}
.but-card.live .but-steps .lab{display:none}
.but-card.live .but-steps{min-height:5.4em;align-content:center}
.but-card .clause{transition:opacity .4s ease .5s}
.but-card .clause.gone{opacity:0}
.but-card.live .clause .excuse{color:inherit;text-decoration-color:transparent;transition:text-decoration-color .35s,color .35s}
.but-card.live .clause.gone .excuse{color:var(--cream-dim);text-decoration-color:var(--gold)}
.but-card .s2.in{animation:butin .5s ease both}
@keyframes butin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.but-card .clause,.but-card .s2.in{transition:none;animation:none}}
.but-card .shared{font:14px var(--sans);color:var(--gold-deep);margin:10px 0 0;min-height:1.4em}

/* 7 · who's behind it */
.who{display:grid;gap:22px;align-items:start}
@media (min-width:860px){.who{grid-template-columns:auto 1fr;gap:36px}}
.portrait{width:112px;height:112px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;font:600 34px var(--display);color:var(--accent);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.creds{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.creds li{font:600 14px/1.3 var(--sans);background:var(--paper-2);border-radius:999px;padding:8px 12px;color:var(--soft)}

/* 8 · what changes, for / not for */
.forfit{display:grid;gap:16px;margin-top:24px}
@media (min-width:860px){.forfit{grid-template-columns:1fr 1fr;gap:22px}}
.forfit .card h3{font-size:22px}
.forfit ul{margin:0;padding-left:1.1em;font-size:17px}
.forfit li{margin:8px 0}
.forfit .not{background:transparent}

/* 9 · logistics and price */
.logistics{display:grid;gap:0;margin:24px 0 0;border-top:1px solid var(--line-soft)}
@media (min-width:860px){.logistics{grid-template-columns:1fr 1fr;column-gap:40px}}
.logistics div{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.logistics dt{font:600 17px/1.35 var(--sans);margin-bottom:4px}
.logistics dd{margin:0;color:var(--soft);font-size:17px}
.price-block{background:var(--card);border:2px solid var(--accent);border-radius:22px;padding:26px 22px;max-width:620px;margin:26px auto 0;box-shadow:0 30px 60px -36px rgba(156,59,38,.5)}
@media (min-width:700px){.price-block{padding:36px 40px}}
.price-block .name{font:600 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.price-block .amount{font:600 clamp(58px,9vw,76px)/1 var(--display);letter-spacing:-.02em;margin:8px 0 2px}
.price-block .amount span{font:500 20px var(--sans);letter-spacing:0;color:var(--soft)}
.price-block .perday{font:16px/1.5 var(--sans);color:var(--soft);margin:0 0 16px}
.price-block form{margin:18px 0 0}
.price-block .btn{width:100%}
.price-block .or{display:flex;align-items:center;gap:12px;font:14px var(--sans);color:var(--dim);margin:14px 0}
.price-block .or::before,.price-block .or::after{content:"";flex:1;border-top:1px solid var(--line)}
.policy{font:15px/1.5 var(--sans);color:var(--soft);margin:14px 0 0;text-align:center}
.gift{font:16px/1.5 var(--sans);margin:18px 0 0;text-align:center;color:var(--soft)}
.buy-inline{display:inline}

/* 10 · FAQ */
.site details.faq summary{font-size:19px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.site details.faq summary::after{float:none}
.site details.faq p,.site details.faq ul{font-size:17px}

/* guides and other reading pages */
.crumbs{font:14px/1.4 var(--sans);margin:0 0 14px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 4px;color:var(--dim)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 6px;color:var(--dim)}
.crumbs a{color:var(--soft);display:inline-block;padding:10px 0}
.crumbs li[aria-current]{padding:10px 0}
.page-head{padding:34px 0 8px}
@media (min-width:900px){.page-head{padding:64px 0 16px}}
.page-head h1{max-width:16em}
.byline{font:15px/1.5 var(--sans);color:var(--dim);margin:10px 0 0}
.byline a{color:var(--soft)}
.article{padding-top:12px!important}
.article .prose{font-size:19px}
.article .prose h2{font-size:clamp(25px,3.3vw,32px);margin-top:1.7em}
.article .prose h3{font-size:22px}
.article .prose li{margin-bottom:.55em}
.answer{background:var(--card);border:1px solid var(--line-soft);border-left:4px solid var(--accent);border-radius:4px var(--r) var(--r) 4px;padding:18px 20px;margin:4px 0 28px;font-size:19px}
.answer p:last-child{margin:0}
.answer .kicker{margin-bottom:6px}
.say{background:var(--accent-soft);border-radius:var(--r);padding:16px 18px;margin:0 0 1.1em;font:500 clamp(20px,2.3vw,23px)/1.4 var(--display)}
.say small{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.from-program{margin:28px 0;border:1.5px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--card)}
.from-program .kicker{margin-bottom:10px}
.from-program .excerpt{border:0;padding:0;background:none}
.from-program p.note{font:15px/1.5 var(--sans);color:var(--soft);margin:12px 0 0}
.more-help{margin:30px 0;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;font:16px/1.55 var(--sans);color:var(--soft)}
.more-help b{color:var(--ink)}
.author-box{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin:34px 0;padding:20px;border-radius:var(--r);background:var(--paper-2)}
.author-box .portrait{width:64px;height:64px;font-size:22px}
.author-box p{margin:0 0 6px;font:16px/1.55 var(--sans);color:var(--soft)}
.author-box p b{color:var(--ink)}
.cta-box{margin:34px 0;background:var(--night);color:var(--cream);border-radius:20px;padding:24px 22px;
  --ink:var(--cream);--soft:var(--cream-soft);--dim:var(--cream-dim);--accent:var(--gold);--accent-deep:var(--gold-deep);--on-accent:#1a130c}
.cta-box h2{font-size:clamp(24px,3vw,30px);margin-top:0!important}
.cta-box p{color:var(--cream-soft);font-size:17px}
.cta-box .btn.ghost{color:var(--cream);border-color:rgba(239,231,218,.55)}
.cta-box a:not(.btn){color:var(--gold-deep)}
.guide-cards{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
@media (min-width:760px){.guide-cards{grid-template-columns:1fr 1fr;gap:16px}}
.guide-card{display:grid;gap:6px;height:100%;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:18px 20px;text-decoration:none;color:var(--ink);transition:border-color .15s}
@media (hover:hover){.guide-card:hover{border-color:var(--accent);color:var(--ink)}}
.gc-title{font:600 20px/1.25 var(--display)}
.gc-blurb{font:16px/1.5 var(--sans);color:var(--soft)}
.sources{font:15px/1.55 var(--sans);color:var(--soft)}
.sources li{margin-bottom:6px}
.compare-courses{overflow-x:auto;margin:20px 0}
.compare-courses table{min-width:560px}
.compare-courses td,.compare-courses th{font-size:15px}
.figure-wide{margin:26px 0}
.figure-wide img{border-radius:14px}
.figure-wide figcaption{font:14px/1.5 var(--sans);color:var(--dim);margin-top:8px}

/* the Father Check and its result */
.check-head{padding:34px 0 10px}
@media (min-width:900px){.check-head{padding:64px 0 16px}}
.check-points{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.check-points li{font:600 14px/1.3 var(--sans);background:var(--paper-2);border-radius:999px;padding:8px 12px;color:var(--soft)}
.site .quiz .qopt{min-height:56px;font-size:18px}
.site .quiz .back{min-height:44px}
.pattern-result{margin-top:8px}
.pattern-result h2{font-size:clamp(27px,4vw,38px)}
.picks{font-size:19px}
.picks q{font-style:italic}
.tonight{background:var(--accent-soft);border-radius:var(--r);padding:20px 22px;margin:22px 0}
.tonight .kicker{margin-bottom:6px}
.tonight p{margin:0;font:500 clamp(19px,2.2vw,22px)/1.45 var(--display)}
.bridge{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.bridge h3{font-size:clamp(23px,3vw,29px)}
.ray-line{font:15px/1.55 var(--sans);color:var(--soft);margin:16px 0 0}
.email-card{margin:22px 0 8px}
.email-card h3{margin-top:0}
.email-what{margin-top:10px}
.email-what summary{cursor:pointer;font:600 16px/1.4 var(--sans);color:var(--dim);min-height:44px;display:flex;align-items:center}
.email-what summary::after{content:"+";margin-left:8px}
.email-plan{font:16px/1.55 var(--sans);padding-left:20px;margin:6px 0 12px}
.email-plan li{margin-bottom:4px}
.quick-buy{margin:18px 0 6px;scroll-margin-top:96px}
#price{scroll-margin-top:84px}
.quick-buy form{margin:0}
.quick-buy .policy{text-align:left;margin-top:10px}
.quiz-faq-h{margin-top:48px}
[data-before-result][hidden]+.quiz-faq-h{margin-top:0}
.retake{font:600 16px var(--sans);background:none;border:0;color:var(--accent);cursor:pointer;padding:12px 0;min-height:44px}

/* patterns on the check page */
.pattern-links{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
@media (min-width:760px){.pattern-links{grid-template-columns:1fr 1fr}}
.pattern-links a{display:block;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--ink);height:100%}
@media (hover:hover){.pattern-links a:hover{border-color:var(--accent)}}
.pattern-links b{display:block;font:600 19px/1.3 var(--display);margin-bottom:4px}
.pattern-links span{font:15px/1.5 var(--sans);color:var(--soft)}

/* photos */
.photo{margin:0}
.photo img{border-radius:16px;width:100%}
.photo figcaption{font:14px/1.5 var(--sans);color:var(--dim);margin-top:10px}
.split{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}.split.flip>figure{order:2}}

/* footer: links with room for a thumb */
.foot .foot-h{font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--foot-dim);margin:0 0 6px}
.foot li{margin:0}
.foot li a{display:inline-block;padding:11px 0}
.foot .cols{grid-template-columns:1.6fr 1fr 1fr 1fr}
@media (max-width:860px){.foot .cols{grid-template-columns:1fr 1fr}.foot .cols>div:first-child{grid-column:1/-1}}
.site .foot{margin-top:0}

/* motion: things settle in, only where motion is welcome */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}
@media print{.top,.foot,.top-cta,.but-actions,.cta-box{display:none}}

/* the free quiz for dads: pick-several questions, his answers echoed back, the result */
.site .quiz .opts.multi .qopt{position:relative;padding-left:52px}
.site .quiz .opts.multi .qopt::before{content:"";position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;border:2px solid var(--line);border-radius:5px;background:var(--paper)}
.site .quiz .opts.multi .qopt.pick::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.site .quiz .next{margin-top:18px;width:100%;min-height:52px}
.site .quiz .next:disabled{opacity:.45;cursor:default}
.echo{margin:18px 0 0;padding:4px 18px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r)}
.echo div{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.echo div:last-child{border-bottom:0}
.echo dt{font:600 13px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.echo dd{margin:2px 0 0;font:18px/1.45 var(--serif)}
.tonight-from{font:15px/1.55 var(--sans);color:var(--soft);margin:-8px 0 16px}
.obstacle,.ages-note{border-left:3px solid var(--accent);padding-left:14px;margin:16px 0}
.logistics.compact{grid-template-columns:1fr !important;margin-top:14px}
.logistics.compact dt{font-size:16px}
.logistics.compact dd{font-size:16px}
.or-free{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pattern-result .bridge h3{margin-top:34px}
.pattern-result .bridge h3:first-child{margin-top:0}
/* the quiz's own section takes no room until the quiz starts (the Start button is in the page head) */
.site .quiz-sec{padding-top:0;padding-bottom:0}
.site .quiz-sec:has(.quiz,.pattern-result,.error){padding-top:8px;padding-bottom:56px}
/* The quiz, offered in a guide's head where a phone shows it without scrolling: one button, one quiet line. */
.guide-quiz{margin:18px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.guide-quiz .btn{white-space:normal;text-align:center;max-width:100%}
.guide-quiz span{font:15px/1.45 var(--sans);color:var(--dim)}
/* /quiz/: the first question sits right under the heading, so a phone shows it without scrolling. */
.site .check-head.tight{padding:28px 0 0}
.site .check-head.tight .lede{margin-bottom:0}
/* /guides/: the hub. Quiz pages to start from, guides by age (titles), then by problem (with a line each). */
.hardest-list,.guide-links{list-style:none;padding:0;margin:14px 0 8px;display:grid;gap:8px}
@media (min-width:760px){.hardest-list{grid-template-columns:1fr 1fr;gap:10px 24px}}
.hardest-list a,.guide-links a{font:17px/1.4 var(--sans)}
.hub-ages{display:grid;gap:4px 28px;margin-bottom:12px}
@media (min-width:760px){.hub-ages{grid-template-columns:1fr 1fr}}
.hub-ages h3,.wrap > h3{margin:22px 0 4px}