@font-face{font-family:Archivo;src:url('assets/archivo-latin.woff') format('woff'),url('assets/archivo-variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}

/* Tokens from Limitless HQ (HQ/src/page.html), same names where HQ has them. */
:root{--ink:#1F1D1C;--cream:#F5F2ED;--paper:#FFFFFF;--sage:#5B6854;--sagedk:#3E4839;--accent:#8BA585;--line:#E2DED6;--onink-muted:#E8E4DC;--eyebrow-dark:#B5C9AC;--error:#9f3026;--body:17px;--sans:Archivo,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
a{color:inherit;text-underline-offset:3px}
button{cursor:pointer}
img,video{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{line-height:1.08;letter-spacing:-.03em;font-weight:800}
h1{font-size:clamp(36px,4.3vw,62px);letter-spacing:-.035em;line-height:1.03}
h2{font-size:clamp(28px,3vw,42px)}
h3{font-size:19px;letter-spacing:-.02em}
p{line-height:1.6}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
input:focus-visible{outline-offset:2px}
summary{cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
[hidden]{display:none!important}
.wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:fixed;left:12px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:12px}
.skip-link:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type helpers, HQ's eyebrow and h2 rule. Flowing prose is one size everywhere: var(--body). */
.eyebrow{font-size:13.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--sage);margin-bottom:12px;line-height:1.4}
.eyebrow-dark{color:var(--eyebrow-dark)}
.h2{border-top:3px solid var(--ink);padding-top:18px;margin-bottom:30px;display:grid;grid-template-columns:1.1fr 1fr;align-items:start;gap:14px 60px}
.h2-sub{font-size:var(--body);max-width:520px}
.h2-plain{margin-bottom:14px}
.prose>p:not([class]){font-size:var(--body);max-width:600px}
.prose>p:not([class])+p:not([class]){margin-top:14px}
.tag{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:3px 8px;border-radius:5px;background:#ECE8E0;color:var(--ink);white-space:nowrap;line-height:1.5}
.tag-light{background:var(--accent);color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:1px}

/* Buttons, HQ's .btn family. Disabled keeps the approved fill and fades, as HQ does. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;border-radius:8px;padding:12px 18px;cursor:pointer;text-decoration:none;border:1.5px solid var(--sage);background:var(--sage);color:#fff;line-height:1;transition:background .15s,border-color .15s,color .15s,transform .15s,opacity .15s}
.btn:hover,.btn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-1px)}
.btn-light{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-light:hover,.btn-light:focus-visible{background:var(--sage);border-color:var(--sage);color:#fff}
/* The beta claim on light grounds: black with white type, dark sage on hover (2026-10-14). */
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover,.btn-dark:focus-visible{background:var(--sage);border-color:var(--sage);color:#fff}
.btn-lg{padding:16px 24px;font-size:15px}
.btn:disabled{cursor:not-allowed;opacity:.45;background:var(--sage);border-color:var(--sage);color:#fff;transform:none}
.text-link{text-decoration:none;font-size:14px;font-weight:700;border-bottom:1.5px solid currentColor;padding-block:6px;transition:color .15s,border-color .15s,box-shadow .15s}
.text-link:hover,.text-link:focus-visible{color:var(--sagedk);box-shadow:0 1.5px 0 currentColor}
.text-link span{margin-left:8px}
.text-link-dark{color:#fff}

/* Header, HQ's rail turned horizontal */
.top{background:var(--ink);color:#fff;border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:50}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{text-decoration:none;line-height:1;display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{display:block;flex:none;width:40px;height:40px}
.brand-word{display:block}
.foot-brand{display:flex;align-items:center;gap:12px;line-height:1}
.brand-family{display:block;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow-dark)}
.brand-name{display:block;margin-top:5px;font-size:19px;font-weight:800;letter-spacing:-.03em;color:#fff}
.nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.nav a{text-decoration:none;font-size:13.5px;font-weight:700;color:#fff;opacity:.92}
.nav a:hover{opacity:1;text-decoration:underline}
.top-cta{flex:none}

/* Hero: HQ's ink band with the stat row under it */
/* 2026-09-27: the hero is no longer black. It takes the cream of the "Everything in every plan" section. */
.hero{background:var(--cream);color:var(--ink);padding:56px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{color:var(--ink);max-width:640px}
.hero .eyebrow-dark{color:var(--sage)}
.hero .lead,.hero .hero-trust{color:var(--ink)}
.hero .text-link-dark{color:var(--ink)}
.hero .phone figcaption,.hero .hero-handles{color:var(--sagedk)}
.hero .phone .frame{box-shadow:0 30px 60px -32px rgba(31,29,28,.55),0 0 0 1px rgba(0,0,0,.04)}
.hero .price-row li{box-shadow:0 18px 40px -26px rgba(31,29,28,.45),0 0 0 1px var(--line)}
.hero .price-row li:hover{box-shadow:0 26px 48px -24px rgba(31,29,28,.5),0 0 0 1px var(--line)}
.lead{font-size:var(--body);line-height:1.6;color:var(--onink-muted);max-width:560px;margin-top:22px}
.hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px}
.hero-trust{margin-top:26px;font-size:13.5px;font-weight:700;color:var(--onink-muted)}
.hero-handles{display:none;margin-top:14px;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--eyebrow-dark);line-height:1.5}

/* Phone frames. Every screen is 9:16, the shape a reel is delivered in, so nothing is ever cropped. */
.hero-visual{display:flex;align-items:flex-end;justify-content:center;gap:18px}
.phone{margin:0;flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.phone-main{width:224px}
.phone-side{width:176px;transform:translateY(-14px)}
.phone .frame{width:100%;background:#0d0d0d;border:1.5px solid #3a3a3a;border-radius:34px;padding:9px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05)}
.phone figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--eyebrow-dark);text-align:center;line-height:1.4}
.screen{container-type:inline-size;position:relative;border-radius:26px;overflow:hidden;background:#000;aspect-ratio:9/16}
.screen>video{width:100%;height:100%;object-fit:contain;background:#000}


/* Price row, HQ's hero stat boxes */
/* Hero price cards: white gradient cards lifted off the dark hero, sage band for the shared terms. */
.price-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:46px}
.price-row li{position:relative;overflow:hidden;border:0;border-radius:16px;padding:28px 24px 24px;display:grid;gap:9px;align-content:space-between;min-height:168px;background:linear-gradient(162deg,#FFFFFF 0%,#F7F4EF 56%,#EDE9E1 100%);box-shadow:0 22px 44px -26px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.6) inset;transition:transform .18s ease,box-shadow .18s ease}
.price-row li:before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--sage) 0%,var(--accent) 100%)}
.price-row li:hover{transform:translateY(-3px);box-shadow:0 30px 52px -24px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.6) inset}
.price-name{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--sage)}
.price-value{font-size:50px;font-weight:800;letter-spacing:-.04em;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
.price-value-sm{font-size:40px}
.price-value .cur{font-size:.56em;vertical-align:.44em;margin-right:2px;letter-spacing:0}
.price-meta{font-size:15.5px;color:#4A453F;font-weight:600;line-height:1.45}
.price-row li.price-note{background:linear-gradient(162deg,#5B6854 0%,#4E5A48 52%,#3A4334 100%)}
.price-row li.price-note:before{background:linear-gradient(90deg,var(--accent) 0%,#D5E4CF 100%)}
.price-note .price-name{color:#DCE9D6}
.price-note .price-value{color:#fff}
.price-note .price-meta{color:#EDF3EA}

/* Sections */
.section{padding-block:72px}
.section-tight{padding-top:0}
.panel{border-radius:14px;padding:44px 48px}
.dark{background:var(--ink);color:#fff}
.dark h2{color:#fff;max-width:760px}

/* Value tiles, HQ's .tile */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{background:var(--paper);border-radius:12px;padding:18px 20px 20px;border-top:4px solid var(--accent);display:flex;flex-direction:column;gap:8px;min-height:190px}
.tile-num{font-size:12.5px;letter-spacing:.14em;font-weight:800;color:var(--sage)}
.tile p{font-size:14.5px}
.tiles-flow{list-style:none;margin:0;padding:0;counter-reset:none}
.tiles-flow .tile{position:relative;overflow:visible;border-top:0;padding:0 20px 22px;background:var(--paper);box-shadow:0 14px 30px -26px rgba(31,29,28,.5)}
.tiles-flow .tile:before{content:'';display:block;height:5px;margin:0 -20px 18px;border-radius:12px 12px 0 0;background:linear-gradient(90deg,var(--sage) 0%,var(--accent) 100%)}
.tiles-flow .tile:after{content:'';position:absolute;top:44px;right:-15px;width:16px;height:16px;z-index:2;background:var(--sage);clip-path:polygon(0 0,100% 50%,0 100%);opacity:.9}
.tiles-flow .tile:nth-child(3n):after,.tiles-flow .tile:last-child:after{display:none}
.tile-head{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.tile-ico{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(158deg,rgba(139,165,133,.38) 0%,rgba(91,104,84,.14) 100%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.tile-ico svg{width:28px;height:28px;fill:none;stroke:var(--sagedk);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile-step{display:flex;flex-direction:column;line-height:1.15}
.tile-verb{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.tiles-flow .tile:nth-child(6) .tile-ico,.tiles-flow .tile:nth-child(5) .tile-ico{background:linear-gradient(158deg,#5B6854 0%,#3E4839 100%)}
.tiles-flow .tile:nth-child(6) .tile-ico svg,.tiles-flow .tile:nth-child(5) .tile-ico svg{stroke:#fff}

/* Plans, HQ's .stat cards */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{background:var(--paper);border-radius:12px;padding:22px 24px 24px;border-top:5px solid var(--accent);display:flex;flex-direction:column}
.plan-featured{border-top-color:var(--sage);box-shadow:0 18px 40px -30px rgba(31,29,28,.45)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;margin-bottom:8px}
.plan-rank{font-size:12.5px;letter-spacing:.14em;font-weight:800;color:var(--sage)}
.plan h3{font-size:26px}
.plan-price{margin-top:14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.plan-price strong{font-size:44px;font-weight:800;letter-spacing:-.045em;line-height:1}
.plan-price span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.plan-posts{font-size:14px;font-weight:700;margin-top:8px}
.plan-term{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-top:6px;color:var(--sagedk)}
.checks{margin-top:16px;display:grid;gap:9px}
.checks li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5}
.checks li:before{content:'✓';position:absolute;left:0;top:0;font-weight:800;color:var(--sage)}
.checks-dark li:before{color:var(--accent)}
.plan .checks{flex:1}
.plan-mix{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.55}
.plan-mix span{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;color:var(--sage)}
.plan-cta{margin-top:20px;width:100%}
.plan-shared{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.plan-shared article{background:var(--paper);border-radius:12px;padding:22px 22px 20px;border-left:4px solid var(--accent)}
.ps-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:13px;background:linear-gradient(158deg,rgba(139,165,133,.34) 0%,rgba(91,104,84,.13) 100%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.ps-ico svg{width:25px;height:25px;fill:none;stroke:var(--sagedk);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plan-shared h3{font-size:16px}
.plan-shared p{font-size:14px;margin-top:7px}

/* Beta: 10 practices, Presence at $1,495 (2026-10-05; 95 ending 2026-10-06) */
.beta{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;margin-bottom:16px;padding:30px 32px;border-radius:12px;border-top:5px solid var(--accent);background:var(--ink);color:#fff;box-shadow:0 18px 40px -30px rgba(31,29,28,.6)}
.beta-eyebrow{font-size:13.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--eyebrow-dark)}
.beta h3{font-size:32px;margin-top:10px;color:#fff}
.beta-price{margin-top:16px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.beta-price strong{font-size:48px;font-weight:800;letter-spacing:-.045em;line-height:1}
.beta-price span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--onink-muted)}
.beta-was{margin-top:10px;font-size:15px;color:var(--onink-muted);max-width:42ch}
.beta-cta{margin-top:20px}
.beta-list{margin-top:0;align-content:start}
.beta-list li{color:#fff;font-size:15px}
.beta-price-was{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--onink-muted);text-decoration-thickness:2px}
/* Beta band (2026-10-05): the beta price is the first thing on the page, and reads as a deal. */
.beta-bar{background:linear-gradient(90deg,#DCE9D6 0%,#E9EFE4 100%);border-bottom:1px solid #C9D6C2;color:var(--ink)}
.beta-bar-inner{display:grid;grid-template-columns:auto auto minmax(0,64ch);grid-template-areas:"tag deal text";justify-content:center;align-items:center;column-gap:30px;row-gap:8px;padding-block:14px}
.beta-bar-tag{grid-area:tag;justify-self:start;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#fff;background:var(--ink);border-radius:999px;padding:5px 11px;line-height:1.3}
.beta-bar-deal{grid-area:deal;display:flex;align-items:baseline;gap:9px;line-height:1;white-space:nowrap}
.beta-bar-now{font-size:36px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.beta-bar-per{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--sagedk)}
.beta-bar-was{font-size:21px;font-weight:700;letter-spacing:-.02em;color:#5F5B55;text-decoration-thickness:2px}
.beta-bar-text{grid-area:text;font-size:15.5px;line-height:1.5;max-width:64ch}
@media(max-width:1100px){.beta-bar-inner{grid-template-columns:auto minmax(0,64ch);grid-template-areas:"tag text" "deal text";column-gap:30px}}
@media(max-width:900px){.beta-bar-inner{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag deal" "text text";justify-content:start;column-gap:20px}}
@media(max-width:600px){.beta-bar-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "deal" "text";row-gap:9px;padding-block:12px}.beta-bar-now{font-size:32px}.beta-bar-text{font-size:14.5px}}

/* How it works: Dr. Nick's Organic Content Machine diagram (his workflow.html engine, 2026-09-22),
   drawn at 936px and scaled to the column. Muted labels are darkened from his grays to clear 4.5:1. Below 760px the same seven steps stack as a list. */
.how-head{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:14px 60px;border-top:3px solid var(--ink);padding-top:18px}
.how-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.replay{background:var(--accent);border:1.5px solid var(--accent);color:var(--ink);border-radius:8px;padding:9px 14px;font-size:13px;font-weight:700;line-height:1;transition:background .15s,border-color .15s,color .15s}
.replay:hover,.replay:focus-visible{background:var(--sage);border-color:var(--sage);color:#fff}
.ocm-stage{position:relative;margin:30px auto 0;overflow:hidden;max-width:100%}
.ocm{--green:#5B6854;--sagedark:#3E4839;--pale:#E4E8DE;--mute:#5F5B55;--q-bg:#F3F0EA;--q-line:#E6E2DA;--q-text:#B7B3AA;position:relative;width:936px;height:1134px;transform-origin:0 0;font-family:var(--sans);color:var(--ink)}
.ocm *{box-sizing:border-box}
.ocm-panel{position:absolute;left:0;top:0;width:936px;height:1018px;background:#fff;border:2px solid #D1CDC4;border-radius:30px}
.ocm .phead{position:absolute;left:28px;right:28px;top:26px;display:flex;justify-content:space-between;align-items:center}
.ocm .phead .lbl{font-size:16px;font-weight:800;letter-spacing:.08em;color:var(--mute)}
.ocm .legend{display:flex;gap:22px;font-size:17px;font-weight:650}
.ocm .legend span{display:flex;align-items:center;gap:8px}
.ocm .legend i{width:13px;height:13px;border-radius:50%;display:inline-block}
.ocm .legend i.sq{border-radius:4px}
.ocm svg.wires{position:absolute;left:0;top:0;width:936px;height:1018px;overflow:visible;pointer-events:none}
.ocm svg.wires path{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ocm .mod{position:absolute;border-radius:20px;border:2px solid var(--q-line);background:var(--q-bg)}
.ocm .mod .in{position:absolute;inset:0;padding:22px 24px 0 26px}
.ocm .mod.queued .in{opacity:.42}
.ocm .mod.active,.ocm .mod.done{border-width:3px}
.ocm .mod .mt{font-size:27px;font-weight:860;letter-spacing:-.01em;line-height:1.02;text-transform:uppercase}
.ocm .mod .ms{margin-top:7px;font-size:14px;font-weight:720;letter-spacing:.1em;color:#5F5B55;text-transform:uppercase}
.ocm .mod .body{margin-top:10px;font-size:18px;line-height:1.35;font-weight:520;color:#4A4744}
.ocm .icons{display:flex;gap:12px;margin-top:10px}
.ocm .tile{width:56px;height:56px;min-height:0;padding:0;gap:0;border:1.5px solid #E6E2DA;border-radius:15px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(31,29,28,.06)}
.ocm .tile svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ocm .tile .txt{font-weight:880;font-size:25px;letter-spacing:-.03em;color:var(--ink)}
.ocm .badge{position:absolute;left:-19px;top:-19px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:850;font-size:18px;background:#E6E2DA;color:var(--mute);border:3px solid #fff;z-index:3}
.ocm .badge svg{width:20px;height:20px;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;display:none}
.ocm .badge .ring{position:absolute;inset:-9px;border-radius:50%;border:3px solid currentColor;opacity:0}
.ocm .chip{position:absolute;right:18px;top:-16px;height:32px;padding:0 14px;border-radius:16px;display:flex;align-items:center;font-size:14px;font-weight:820;letter-spacing:.09em;background:#EDEAE4;color:var(--q-text);border:2px solid #fff;z-index:3;white-space:nowrap}
.ocm .chip.done{background:var(--pale);color:var(--sagedark);border-color:#fff}
.ocm .pbar{position:absolute;left:26px;right:26px;bottom:14px;height:4px;border-radius:3px;background:rgba(31,29,28,.08);overflow:hidden;opacity:0}
.ocm .pbar i{display:block;height:100%;width:0;border-radius:3px}
.ocm .mod.dark{background:var(--ink)!important;border-color:var(--ink)!important}
.ocm .mod.dark .mt{color:#fff}
.ocm .mod.dark .ms{color:#D6D2CA}
.ocm .mod.dark .tile{border-color:#fff}
.ocm .mod.dark .pbar{background:rgba(255,255,255,.2)}
.ocm .chip.dark{background:var(--ink);color:#fff;border-color:#fff}
.ocm .promise{margin-top:5px;font-size:19px;line-height:1.2;font-weight:720;color:var(--ink)}
.ocm .mod.dark .promise{color:#fff}
.ocm .subt{display:flex;gap:14px;margin-top:8px}
.ocm .st{flex:1;height:56px;border-radius:14px;background:#fff;border:1.5px solid #E6E2DA;display:flex;align-items:center;gap:12px;padding:0 14px}
.ocm .st svg.ic{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ocm .st b{font-size:15.5px;font-weight:820;letter-spacing:.03em;flex:1;white-space:nowrap}
.ocm .st .ok{width:26px;height:26px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4)}
.ocm .st .ok svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ocm .pill{position:absolute;height:34px;padding:0 16px;border-radius:17px;background:#fff;border:2.5px solid var(--green);font-size:16px;font-weight:760;color:var(--ink);display:flex;align-items:center;white-space:nowrap;transform:translate(-50%,-50%) scale(.5);opacity:0;z-index:4}
.ocm .bar .in{display:flex;align-items:center;gap:20px;padding:0 30px 0 28px}
.ocm .bar .loop{width:58px;height:58px;border-radius:50%;background:#EDEAE4;display:flex;align-items:center;justify-content:center;flex:none}
.ocm .bar .loop svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ocm .bar .mt{font-size:28px}
.ocm .bar .body{margin-top:4px;font-size:18px}
.ocm .bar .next{margin-left:auto;text-align:right;font-size:15px;font-weight:800;letter-spacing:.1em;color:var(--mute);line-height:1.25}
.ocm .bar .next b{display:block;font-size:24px;letter-spacing:-.01em;color:inherit}
.ocm .counters{position:absolute;left:0;top:1042px;width:936px;height:92px;display:flex;gap:18px}
.ocm .ct{flex:1;border-radius:18px;background:#ECE9E3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ocm .ct small{font-size:14px;font-weight:780;letter-spacing:.12em;color:#5F5B55}
.ocm .ct b{font-size:30px;font-weight:880;letter-spacing:-.01em;text-transform:uppercase}
.ocm-mobile{display:none;margin-top:26px}
.ocm-list{display:grid;gap:10px}
.ocm-list li{position:relative;background:var(--paper);border:2px solid var(--sage);border-radius:14px;padding:16px 16px 16px 58px;display:grid;gap:4px}
.ocm-list li:before{content:attr(data-n);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--sage);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.ocm-list li.yours{background:var(--ink);border-color:var(--ink);color:#fff}
.ocm-list li.yours:before{background:#fff;color:var(--ink)}
.ocm-list h3{font-size:17px;text-transform:uppercase;letter-spacing:-.01em}
.ocm-list .ms{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5F5B55}
.ocm-list li.yours .ms{color:#D6D2CA}
.ocm-list .when{font-size:12.5px;font-weight:800;color:var(--sagedk)}
.ocm-list li.yours .when{color:var(--eyebrow-dark)}
.ocm-list p{font-size:14.5px;margin-top:2px}
.ocm-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13px;font-weight:700}
.ocm-legend span{display:inline-flex;align-items:center;gap:7px}
.ocm-legend i{width:12px;height:12px;border-radius:50%;border:3px solid var(--sage);background:#fff}
.ocm-legend i.sq{border-radius:3px;background:var(--ink);border-color:var(--ink)}

/* What a week looks like: a screen recording of the review page in a window frame, with the seven posts listed under it. */
.week{margin:0}
.rec{background:var(--ink);border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 70px -34px rgba(31,29,28,.5)}
.rec-bar{display:flex;align-items:center;gap:7px;padding:8px 10px 8px 16px;background:#2A2826;color:var(--onink-muted);font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.rec-dots{display:flex;gap:7px;flex:none}
.rec-dots i{width:11px;height:11px;border-radius:50%;background:#6B665F;display:block}
.rec-title{margin-left:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-screen{position:relative;aspect-ratio:16/10;background:var(--cream)}
.rec-screen video{display:block;width:100%;height:100%;object-fit:contain}
.rec-ctl{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer}
.rec-ctl:hover{background:rgba(255,255,255,.2)}
.rec-ctl svg{width:50%;height:50%;fill:currentColor}
.rec-ctl .play{display:none;margin-left:10%}
.week.paused .rec-ctl .play{display:block}
.week.paused .rec-ctl .pause{display:none}
.week-days{margin:22px 0 0}
.week-days ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.week-days li{background:var(--paper);border-top:4px solid var(--accent);border-radius:12px;padding:12px 12px 14px;display:grid;gap:6px;align-content:start}
.week-days .wd{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sage)}
.week-days .wt{font-size:13.5px;font-weight:700;line-height:1.35}
.week-days .tag{justify-self:start}

/* Dr. Nick: the story, then the library he reviewed */
.nick-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.nick-photo img{width:100%;height:auto;border-radius:14px;border-top:5px solid var(--accent)}
.nick-photo figcaption{font-size:12.5px;font-weight:700;margin-top:10px}
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.creds div{background:var(--paper);border-radius:10px;padding:12px 14px;border-left:4px solid var(--accent)}
.creds dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--sage)}
.creds dd{font-size:14px;font-weight:700;margin-top:3px}
.creds .creds-wide{grid-column:1/-1}
/* Where you're starting from: agency-experienced vs first-timer, and the camera-shy block */
.fit-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fit-card{background:var(--paper);border-radius:14px;padding:26px 28px;border-top:3px solid var(--sage)}
.fit-card h3{font-size:21px;line-height:1.25;margin-bottom:10px}
.fit-card p{font-size:15.5px;line-height:1.6}
.fit-card p+p{margin-top:12px}
.camera{margin-top:16px;background:linear-gradient(150deg,#5B6854 0%,#4A5644 55%,#3E4839 100%);color:#fff;border-radius:14px;padding:34px 36px;display:grid;grid-template-columns:1.25fr .75fr;gap:32px;box-shadow:0 22px 44px -30px rgba(31,29,28,.7)}
.camera .eyebrow{color:#EEF4EB}
.camera h3{color:#fff}
.camera-copy p{color:#F1F4EE}
.camera h3{font-size:24px;line-height:1.25;margin-bottom:6px}
.camera-copy p{font-size:15.5px;line-height:1.6;margin-top:12px}
.camera-ways{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.camera-ways li{background:#F5F2ED;color:var(--ink);border-radius:10px;padding:14px 16px}
.camera-ways b{display:block;font-size:14px;font-weight:800}
.camera-ways span{display:block;font-size:13.5px;line-height:1.5;margin-top:3px}
.library{margin-top:56px;display:grid;grid-template-columns:1.15fr .85fr;gap:0;overflow:hidden;border-radius:14px}
.library-copy{padding:44px 48px}
.library-copy h3{font-size:clamp(24px,2.4vw,32px);color:#fff;max-width:520px}
.library-copy>p:not([class]){font-size:var(--body);color:var(--onink-muted);margin-top:16px;max-width:560px}
.library-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.library-stats li{border:1.5px solid rgba(139,165,133,.75);border-radius:10px;padding:16px 18px;display:grid;gap:6px}
.library-stats b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--accent)}
.library-stats span{font-size:13px;color:var(--onink-muted);font-weight:600;line-height:1.4}
.library-photo{margin:0;position:relative;display:flex;flex-direction:column;justify-content:center;padding-bottom:16px}
.library-photo img{width:100%;height:auto;object-fit:contain;background:var(--ink)}
.library-photo figcaption{padding:12px 16px 0;font-size:13px;font-weight:700;color:#fff}

/* Application */
.apply{background:var(--ink);color:#fff}
.apply-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.apply-copy>p:not([class]){font-size:var(--body);color:var(--onink-muted);max-width:520px}
.apply-copy .checks{margin-top:22px}
.apply-copy .checks li{color:#fff}
.apply-note{margin-top:22px;font-size:13.5px;color:var(--onink-muted)}
.apply-free{margin-top:22px;max-width:520px;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:#F5F2ED;color:var(--ink)}
.apply-free p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.apply-free strong{display:block;font-size:18px;line-height:1.35;margin-bottom:3px}
.af-ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--sage)}
.af-ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.form-panel{background:var(--paper);color:var(--ink);border-radius:14px;padding:28px 30px 26px;border-top:5px solid var(--accent)}
.form-heading h3{font-size:24px}
.form-heading p{font-size:14px;margin-top:4px}
.form-message{margin-top:16px;font-size:13.5px;line-height:1.5;padding:12px 14px;border-radius:8px;background:#ECE8E0;border-left:4px solid var(--accent)}
.form-message.error{background:#F6E4E1;border-left-color:var(--error)}
form{margin-top:18px;display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label,.choice legend{font-size:13px;font-weight:700}
.field label span{font-weight:500}
.field input{border:1.5px solid #8E887F;border-radius:8px;padding:12px 13px;min-height:46px;background:var(--cream);color:var(--ink);width:100%}
.field input::placeholder{color:#69635b;opacity:1}
.choice{border:0;padding:0;margin:0;display:grid;gap:8px}
.choice legend{padding:0;margin-bottom:2px}
.choice div{display:flex;flex-wrap:wrap;gap:8px 18px}
.choice label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.choice input{width:17px;height:17px;accent-color:var(--sage);margin:0}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
.consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--sage)}
.submit-button{width:100%;margin-top:4px}
.form-footnote{font-size:13px;margin-top:14px}
.result-view{padding:10px 0}
.result-mark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:800;font-size:20px;margin-bottom:14px}
.result-view h3{font-size:24px}
.result-view>p:not([class]){margin-top:12px;font-size:15px}
.result-note{font-size:13px;margin-top:12px}
.result-view .btn{margin-top:18px}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.faq-side{position:sticky;top:96px}
.faq-nav ul{list-style:none;margin:26px 0 0;padding:0;border-top:3px solid var(--ink)}
.faq-nav li{border-bottom:1px solid var(--line)}
.faq-nav a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.faq-nav a:hover{color:var(--sage)}
.faq-nav a span{min-width:26px;height:22px;padding:0 7px;border-radius:11px;background:#E4E8DE;color:var(--sagedk);font-size:12px;font-weight:800;display:grid;place-items:center}
.faq-cta{margin-top:22px}
.apply-priority{margin-top:18px;padding:14px 16px;border-radius:10px;border-left:4px solid var(--accent);background:rgba(139,165,133,.16);color:#fff;max-width:520px}
.apply-priority strong{display:block;margin-bottom:3px}
.apply-priority a{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.faq{display:grid;gap:34px}
.faq-group{scroll-margin-top:96px}
.faq-cat{font-size:13.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--sage);padding-bottom:10px;margin-bottom:12px;border-bottom:3px solid var(--ink)}
.faq details{background:var(--paper);border-radius:12px;margin-top:10px;box-shadow:0 10px 24px -22px rgba(31,29,28,.5);border-left:4px solid transparent;transition:border-color .15s}
.faq details[open]{border-left-color:var(--accent)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:17px 20px;font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#E4E8DE;color:var(--sagedk);font-size:19px;font-weight:700;line-height:1}
.faq details[open] summary:after{content:'\2212';background:var(--sage);color:#fff}
.faq-a{padding:0 20px 18px}
.faq details p{font-size:var(--body);max-width:640px;margin:0}
.faq details p strong{display:block;margin-bottom:6px;color:var(--ink)}

/* Privacy and footer */
.privacy{padding:0 0 60px}
.privacy h2{font-size:22px}
.privacy p{font-size:var(--body);max-width:820px}
.foot{background:var(--ink);color:#fff;border-top:3px solid var(--accent);padding-block:34px}
.foot-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;font-size:13.5px}
.foot-inner p{margin-top:8px;color:var(--onink-muted)}
.brand-name-light{color:#fff}
.foot a{color:#fff;font-weight:700}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}
@media(max-width:1100px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles-flow .tile:nth-child(3n):after{display:block}
  .tiles-flow .tile:nth-child(2n):after,.tiles-flow .tile:last-child:after{display:none}
  .week-days ol{grid-template-columns:repeat(4,minmax(0,1fr))}
  .phone-main{width:196px}.phone-side{width:150px}
  .hero-grid{gap:32px}
  .nav{gap:16px}
  .library{grid-template-columns:1fr}
  .library-photo{min-height:0}
  .library-photo img{height:auto;aspect-ratio:16/9}
}
@media(max-width:900px){
  .fit-pair{grid-template-columns:1fr}
  .camera{grid-template-columns:1fr;gap:22px;padding:24px 22px}
  .wrap{width:calc(100% - 40px)}
  .top-inner{min-height:64px;gap:14px}
  .nav{display:none}
  .hero{padding:44px 0 36px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-visual{max-width:100%;justify-content:center}
  .phone-main{width:210px}.phone-side{width:160px}
  .price-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .price-value{font-size:44px}
  .price-value-sm{font-size:36px}
  .h2,.how-head{grid-template-columns:1fr;gap:10px}
  .how-tools{justify-content:flex-start}
  .plans{grid-template-columns:1fr}
  .plan-shared{grid-template-columns:1fr}
  .beta{grid-template-columns:1fr;gap:24px;padding:26px 22px}
  .panel{padding:30px 24px}
  .library-copy{padding:30px 24px}
  .nick-grid,.apply-grid,.faq-grid{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static}
  .creds{grid-template-columns:1fr}
  /* One column: the photo, then his story, then the fact cards, so the cards never sit above the heading. */
  .nick-side{display:contents}
  .nick-copy{order:1}
  .nick-side .creds{order:2;margin-top:0}
  .library-stats{grid-template-columns:1fr}
  .section{padding-block:56px}
}
@media(max-width:760px){
  .ocm-stage{display:none}
  .ocm-mobile{display:block}
  .replay{display:none}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .hero-visual{gap:8px}
  .phone-main{width:38vw;max-width:190px}.phone-side{width:23vw;max-width:120px;transform:translateY(-8px)}
  .phone .frame{border-radius:22px;padding:6px}
  .screen{border-radius:17px}
  .phone figcaption{display:none}
  .hero-handles{display:block}
  .price-row{grid-template-columns:1fr 1fr;gap:10px}
  .price-row li{padding:20px 15px 17px;min-height:0;border-radius:13px;align-content:start;gap:7px}
  .price-value{font-size:34px}
  .price-value-sm{font-size:28px}
  .price-name{font-size:12px;letter-spacing:.12em}
  .price-meta{font-size:13.5px}
  .tiles{grid-template-columns:1fr}
  .tiles-flow .tile:after,.tiles-flow .tile:nth-child(3n):after{display:block;top:auto;bottom:-15px;right:auto;left:44px;clip-path:polygon(0 0,100% 0,50% 100%)}
  .tiles-flow .tile:last-child:after{display:none}
  .week-days ol{grid-template-columns:1fr;gap:8px}
  .week-days li{grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:10px 12px}
  .rec-bar{padding:7px 8px 7px 12px}
  .form-panel{padding:22px 18px}
  .choice div{gap:8px 14px}
}

/* Content-production scope, matching the existing compact layout. */
.hero-scope{font-size:14px;line-height:1.5;margin:12px 0;max-width:60ch;color:inherit}.plan-ad-scope{font-size:15px;line-height:1.55;margin:20px 0;color:var(--ink,#1f1d1c)}

/* Everything in every plan: the dark stage. 2026-09-27: the neon iris grows while it spins, then each
   blade opens into one of the six steps, which settle into the grid. Scroll drives it (media.js). */
.stage{background:var(--ink);color:#fff;position:relative}
.stage .h2{border-top-color:var(--accent)}
.stage h2{color:#fff}
.stage .h2-sub{color:var(--onink-muted)}
.stage + .section-tight{padding-top:72px}
.stage-pin{position:relative}
.stage-iris,.stage-glow,.stage-mark,.stage-slot{display:none}
.stage-run{height:0}
.iris-on .stage-iris{display:block;position:absolute;left:0;top:0;z-index:3;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
.stage-iris svg{display:block;width:100%;height:100%;overflow:visible}
.iris-on .stage-glow{display:block;position:absolute;left:0;top:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(139,165,133,.34),rgba(139,165,133,.1) 55%,rgba(139,165,133,0));will-change:transform,opacity}
.iris-desk .stage-mark{display:inline-block;width:1.05em;height:1.05em;margin-right:.3em;vertical-align:-.16em}
.iris-mobile .stage-slot{display:block;margin:4px auto 34px}
.iris-on .tiles-flow .tile{transform-origin:50% 50%;will-change:transform,opacity}
.iris-on .tiles-flow .tile>*{opacity:var(--c,1)}
.iris-on .tiles-flow .tile:after{opacity:calc(var(--c,1)*.9)}
.stage{overflow-x:clip}
/* The sage band is the card's own top background, so the card's rounded corners trim it exactly, settled or mid-bubble. */
.stage .tiles-flow .tile{background:linear-gradient(90deg,rgb(91 104 84/var(--c,1)) 0%,rgb(139 165 133/var(--c,1)) 100%) top/100% 5px no-repeat,var(--paper)}
.stage .tiles-flow .tile:before{background:none}
.stage .tiles-flow .tile{color:var(--ink)}

/* Every screen, 2026-09-27: phones, tablets, laptops, and desktops, in both orientations ("optimized for use on
   all different computer tablet and phone types"). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* How it works turns into the six-step list wherever the diagram would drop below half size (media.js fit()). */
.ocm-as-list .ocm-stage{display:none}
.ocm-as-list .ocm-mobile{display:block}
.ocm-as-list .replay{display:none}
/* The pinned stage, tightened so it still fits a shorter laptop or tablet screen (media.js layout()). */
.stage.stage-tight .h2{margin-bottom:18px}
.stage.stage-tight .tiles{gap:12px}
.stage.stage-tight .tiles-flow .tile{padding-bottom:16px;gap:6px}
.stage.stage-tight .tiles-flow .tile:before{margin-bottom:14px}
.stage.stage-tight .tiles-flow .tile:after{top:33px}
.stage.stage-tight .tile-ico{width:44px;height:44px;border-radius:13px}
.stage.stage-tight .tile-ico svg{width:24px;height:24px}
.stage.stage-tight .tiles-flow .tile p{line-height:1.5}
/* Touch screens have no hover, so a tap never leaves a card or button lifted. */
@media (hover:none){.btn:hover,.price-row li:hover{transform:none}}
/* A mouse needs at least 24px (WCAG 2.2). */
.nav a{padding-block:10px}
.choice label{min-height:28px}
.foot a{display:inline-block;padding-block:6px}
/* A finger needs a 44px target. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .text-link{padding-block:12px}
  .nav a{padding-block:12px;min-width:44px;text-align:center}
  .replay{min-height:44px}
  .brand{min-height:44px}
  .choice label,.consent{min-height:44px}
  .choice label{min-width:44px}
  .faq-nav a{min-height:44px}
  .foot a{display:inline-block;padding-block:12px}
  .rec-ctl{position:relative}
  .rec-ctl:before{content:'';position:absolute;inset:-7px;border-radius:50%}
}
/* Tablets and small laptops: the handles fit under their phones, and the fact cards have room for their labels. */
@media(max-width:1100px){.phone figcaption{letter-spacing:.05em}}
@media(min-width:901px) and (max-width:1100px){.creds{grid-template-columns:repeat(2,minmax(0,1fr))}.creds div:nth-child(3){grid-column:1/-1}}
/* Phones: the recording's window title wraps instead of being cut off. */
@media(max-width:600px){.rec-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}}
/* The smallest phones (320 to 360 wide): the logo and Apply fit inside the margins. */
.cta-short{display:none}
@media(max-width:420px){.top-cta{padding-inline:13px;font-size:13.5px}.top-inner{gap:12px}.brand{gap:10px}.brand-name{font-size:18px}}
@media(max-width:380px){.cta-full{display:none}.cta-short{display:inline}.top-inner{gap:10px}.brand{gap:9px}.brand-mark{width:34px;height:34px}.brand-name{font-size:17px}.top-cta{padding-inline:14px}}
/* Short laptop screens: the hero tightens so the prices come up toward the first screen. */
@media(min-width:901px) and (max-height:920px){
  .hero{padding:30px 0 34px}
  .hero h1{font-size:clamp(36px,min(4.3vw,7.4vh),62px)}
  .lead{margin-top:16px}
  .hero-scope{margin:10px 0}
  .hero-actions{margin-top:18px}
  .hero-trust{margin-top:14px}
  .price-row{margin-top:26px}
}
/* Short screens: the FAQ topic menu scrolls with the page rather than sticking taller than the window. */
@media(max-height:620px){.faq-side{position:static}}
/* Phones turned sideways: a slimmer header, and phone frames that fit the height of the screen. */
@media(max-height:500px) and (orientation:landscape){
  html{scroll-padding-top:66px}
  .top-inner{min-height:54px}
  .top .brand-mark{width:34px;height:34px}
  .hero{padding:28px 0 32px}
  .phone-main{width:150px}.phone-side{width:118px}
}
/* Phones, portrait or sideways (2026-09-27): the four price cards come right after the intro, so they land in the
   first screen, then Apply, the ad paragraph, and the phone frames. Tablets and computers keep the two-part hero. */
@media(max-width:600px),(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .hero{display:flex;flex-direction:column}
  .hero>.wrap,.hero-grid,.hero-copy{display:contents}
  .hero-copy>*,.hero-visual,.hero-handles,.price-row{width:calc(100% - 32px);margin-inline:auto}
  .hero-copy>.eyebrow{order:1}
  .hero-copy>h1{order:2}
  .hero-copy>.lead{order:3}
  .hero .price-row{order:4;margin-top:24px}
  .hero-copy>.hero-actions{order:5;margin-top:24px}
  .hero-copy>.hero-scope{order:6;margin:22px auto 0}
  .hero-copy>.hero-trust{order:7;margin-top:18px}
  .hero-visual{order:8;margin-top:36px}
  .hero-handles{order:9;display:block}
  .phone figcaption{display:none}
}
@media(min-width:601px) and (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .hero-copy>*,.hero-visual,.hero-handles,.price-row{width:calc(100% - 40px)}
}
/* Short laptop screens (2026-09-28): the ad-ready video paragraph moves from above Apply to under the four price
   cards, so the prices show in the first screen. The hero becomes one grid: copy on the left, phones on the right,
   prices across, then the paragraph. Tall screens keep the layout above. */
@media(min-width:901px) and (max-height:920px){
  .hero{--hg:48px;display:grid;grid-template-columns:max(32px,(100% - 1240px)/2) minmax(0,1.05fr) var(--hg) minmax(auto,.95fr) max(32px,(100% - 1240px)/2);grid-template-rows:auto auto auto auto auto 1fr auto auto;align-content:start}
  .hero>.wrap,.hero-grid,.hero-copy{display:contents}
  .hero-copy>*{grid-column:2}
  .hero-copy>.eyebrow{grid-row:1}
  .hero-copy>h1{grid-row:2}
  .hero-copy>.lead{grid-row:3}
  .hero-copy>.hero-actions{grid-row:4}
  .hero-copy>.hero-trust{grid-row:5}
  .hero-visual{grid-column:4;grid-row:1/7;align-self:center}
  .hero .price-row{grid-column:2/5;grid-row:7}
  .hero-copy>.hero-scope{grid-column:2/5;grid-row:8;margin:18px 0 0}
}
@media(min-width:901px) and (max-width:1100px) and (max-height:920px){.hero{--hg:32px}}
/* Wide phones turned sideways get the laptop hero with small phone frames, so the three handles go on one line under
   the frames instead of under each one. */
@media(min-width:901px) and (max-height:500px) and (orientation:landscape){
  .phone figcaption{display:none}
  .hero-visual{grid-row:1/6}
  .hero-handles{display:block;grid-column:4;grid-row:6;align-self:start;margin-top:10px}
}
/* Scroll reveal (2026-09-28): blocks from the plans down drop a few pixels into place and fade in as they come on
   screen. media.js adds .reveal-on only when motion is allowed, so without it nothing is hidden. */
.reveal-on .reveal{opacity:0;transform:translateY(-14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.reveal-on .reveal.is-in{opacity:1;transform:none}
/* The recording frame fades without moving, so its pause button never shifts under a pointer. */
#proof .rec.reveal{transform:none}
@media (prefers-reduced-motion:reduce){.reveal-on .reveal{opacity:1;transform:none;transition:none}}

/* Signup audit, 2026-10-12. Contact, the email route when online sign-up is unavailable, and the account links.
   Where the handles line replaces the phone captions, the captions are display:none rather than clipped: they hold
   links now, and a clipped link would stay in the tab order unseen. The videos keep their own aria-labels. */
a[href^="mailto:"]{overflow-wrap:anywhere}
.phone figcaption a,.hero-handles a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.hero-handles a{display:inline-block;padding-block:6px}
.form-contact{font-size:14px;margin-top:6px}
.form-contact a,.faq-contact a,.email-note a,.email-copy a{font-weight:700}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.email-fallback{display:grid;gap:10px}
.email-note{font-size:14px;line-height:1.5;color:var(--ink)}
.email-copy{display:grid;gap:10px;padding:14px 16px;border-radius:10px;background:#ECE8E0;border-left:4px solid var(--accent);color:var(--ink)}
.email-copy p{font-size:14px;line-height:1.5}
.email-copy strong{display:block;margin-bottom:2px}
.email-copy textarea{width:100%;font:13px/1.5 var(--sans);border:1.5px solid #8E887F;border-radius:8px;padding:10px 12px;background:var(--paper);color:var(--ink);resize:vertical}
.email-copy textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.email-copy .btn{justify-self:start}
.faq-contact{margin-top:16px;font-size:15px;color:var(--ink)}
.library-stats li:only-child{grid-column:1/-1}
@media(max-width:480px){.field-pair{grid-template-columns:1fr}}

/* Design pass, 2026-10-14: sections alternate cream and white so each reads as its own chapter, every
   card flips to cream on a white section so it keeps its edge, one link style, and type that never strands a word. */
#pricing,#how-it-works,#proof,#dr-nick,#fit{padding-block:72px}
.stage + .section-tight{padding-top:72px}
#how-it-works,#dr-nick{background:var(--paper)}
#how-it-works .ocm-panel{background:var(--cream)}
#how-it-works .ocm{--q-bg:#FFFFFF}
#how-it-works .ocm-list li:not(.yours){background:var(--cream)}
#dr-nick .creds div{background:var(--cream)}
@media(max-width:900px){#pricing,#how-it-works,#proof,#dr-nick,#fit{padding-block:56px}.stage + .section-tight{padding-top:56px}}

/* Links: underlined in the text's own color, a thicker sage underline and sage type on hover. Dark grounds hover to
   light sage (9.5:1 on ink); the white form panel inside the dark apply band goes back to dark sage. */
:root{--link-hover:var(--sagedk)}
.top,.stage,.dark,.apply,.beta,.foot{--link-hover:var(--eyebrow-dark)}
.apply .form-panel{--link-hover:var(--sagedk)}
a{text-decoration-thickness:1.5px;transition:color .15s,text-decoration-color .15s}
a:not(.btn):not(.brand):not(.skip-link):hover,a:not(.btn):not(.brand):not(.skip-link):focus-visible{color:var(--link-hover);text-decoration-thickness:2.5px}
.nav a:hover,.nav a:focus-visible{opacity:1}
.faq summary{transition:color .15s}
.faq summary:hover,.faq summary:focus-visible{color:var(--sagedk)}
.faq summary:hover:after,.faq summary:focus-visible:after{background:var(--sage);color:#fff}

/* Type: headings balance their lines and paragraphs avoid a lone last word; "month to month" stays together. */
h1,h2,h3,.faq summary,.fit-card h3,.camera h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.plan-term{text-wrap:balance}
/* A sentence that should break as a unit: it moves to its own line when it fits, and wraps normally on a phone. */
.phrase{display:inline-block}
.privacy p{max-width:720px}
/* One library stat reads as a single line, not a box built for two. */
.library-stats li:only-child{grid-column:1/-1;display:flex;align-items:center;gap:16px;width:fit-content;max-width:100%;padding:14px 20px}
.library-stats li:only-child span{font-size:15px}


/* Design pass 2, 2026-10-14: one beta button at a time, How it works beside its diagram, the ad note as a card. */
/* One "Claim a beta spot" on screen at a time. The beta band is an announcement with no button of its own, and the
   header button steps back while the hero's button, the beta card's button, or the form is on screen (media.js).
   Its space is kept, so the nav never shifts. */
.top-cta{transition:background .15s,border-color .15s,color .15s,transform .15s,opacity .2s ease,visibility .2s}
.top.cta-quiet .top-cta{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.top-cta{transition:none}}
/* Phone captions: the handle, then the format on its own line, so all three read the same and none breaks mid-caption.
   Handles are written the way Instagram writes them, in lower case, which also lets @limitlessondemand fit its frame;
   each is a 24px tap target. */
.phone figcaption a,.hero-handles a{font-size:13px;text-transform:none;letter-spacing:.01em}
.phone figcaption a{display:inline-block;padding-block:5px}
.phone figcaption .fmt{display:block;margin-top:-3px}
/* The ad videos note under the plans is a card in the same family as the three below it: the lead on the left,
   the detail on the right, one column on a phone. */
.plan-ad-scope{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:10px 48px;align-items:start;margin:16px 0 0;padding:26px 30px 26px 28px;background:var(--paper);border-radius:12px;border-left:4px solid var(--accent);font-size:15px}
.plan-ad-scope p{margin:0}
.plan-ad-lead{font-size:19px;line-height:1.35;letter-spacing:-.01em}
.plan-ad-body{line-height:1.6}
@media(max-width:900px){.plan-ad-scope{grid-template-columns:minmax(0,1fr);padding:22px 22px 22px 20px}.plan-ad-lead{font-size:17.5px}}
/* How it works on wide screens: the heading, the round, and the replay button sit beside the diagram, so the whole
   round is on one screen under its heading. media.js adds .how-split where the diagram keeps at least 90% of its
   stacked size; the section rule then runs across both columns like every other section. */
#how-it-works.how-split .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:start;border-top:3px solid var(--ink);padding-top:22px}
#how-it-works.how-split .how-head{grid-template-columns:minmax(0,1fr);align-items:start;border-top:0;padding-top:0}
#how-it-works.how-split .how-tools{justify-content:flex-start;margin-top:12px}
#how-it-works.how-split .ocm-stage{margin:0}
/* On touch screens the handles under the phone frames are full 44px tap targets; the spacing on screen stays the same. */
@media (pointer:coarse){.phone figcaption{margin-top:-8px}.phone figcaption a{padding-block:13px}.phone figcaption .fmt{margin-top:-14px}}
/* Narrow three-column plans (about 900px wide): the Authority tag moves under its number instead of running past the card. */
.plan-top{flex-wrap:wrap;row-gap:6px}