/* AYO free 14-day program landing page: PREVIEW B ("stark product page").
   Refero primary: Quo / OpenPhone (style 07447756-36b4-4ed8-95c8-49f32e217a82): pure white
   canvas, ink-black type and black filled buttons, flat surface-gray cards with no shadows,
   hairline dividers, left-aligned split hero, alternating text/image rows, and ONE lime accent
   used only for small marks (dots, checks, timeline cells), never as the button color.
   Fonts match /14-day/dashboard/: Manrope body, Archivo Black headings.
   Self-contained: does not load /brand.css (dark theme). Booking-modal base rules copied
   from /brand.css below so /book.js works unchanged (book.js adds its own .bk-light skin). */
:root{
  --white:#fff; --ink:#0a0a0c; --text:#1a1a1a; --muted:#4d4d4d; --line:#d9d9d9; --line-soft:#ececec;
  --surface:#f7f6f5; --surface2:#efede9;
  --lime:hsl(72 100% 55%); --lime-ink:#3f5300;
  --r:10px; --rb:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:var(--ink);text-underline-offset:3px}
h1,h2,h3,h4{color:var(--ink);margin:0}
.h-display{font-family:"Archivo Black",Manrope,sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.02}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid #1570ef;outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:.6rem .9rem;z-index:60;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.logo-mark{width:28px;height:28px;border:3px solid var(--ink);position:relative;flex:none}
.logo-mark::after{content:"";position:absolute;right:2px;top:2px;width:8px;height:8px;background:var(--lime);border:1.5px solid var(--ink)}
.logo-text{font-family:"Archivo Black",sans-serif;font-size:.78rem;line-height:1.05;text-transform:uppercase}
.logo-text span{color:var(--lime-ink)}
.nav{display:none;gap:1.8rem;font-weight:500;font-size:1rem}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}
@media(min-width:960px){.nav{display:flex}}

/* buttons: black filled primary, ghost secondary (Quo) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:700 1rem/1.2 Manrope,sans-serif;border-radius:var(--rb);padding:1rem 1.35rem;cursor:pointer;text-decoration:none;border:1px solid var(--ink);transition:background .12s,color .12s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2a2a2e}
.btn-primary .dot{width:9px;height:9px;border-radius:50%;background:var(--lime);flex:none}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{padding:.6rem 1rem;font-size:.92rem}
.btn svg{width:18px;height:18px;flex:none}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.cta-sub{font-size:.9rem;color:var(--muted);margin:.7rem 0 0}

.label{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--ink)}
.label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink)}

/* free note (Legal: shown next to every prominent "free") */
.free-note{font-size:.9rem;line-height:1.55;color:var(--muted);max-width:640px;margin:1.1rem 0 0;padding:.75rem .9rem;background:var(--surface);border-radius:var(--r)}
.free-note::before{content:"";display:inline-block;width:8px;height:8px;background:var(--lime);border:1.5px solid var(--ink);border-radius:2px;margin-right:.5rem;vertical-align:1px}

section{padding:5.5rem 0}
section.band{background:var(--surface)}
.sec-head{max-width:760px;margin-bottom:2.6rem}
.sec-head h2{font-size:clamp(2rem,5vw,3.4rem)}
.sec-head p{color:var(--muted);margin:.9rem 0 0;font-size:1.1rem}

/* hero: left-aligned split */
.hero{padding:4.5rem 0 4rem}
.hero-grid{display:grid;gap:2.6rem;align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.05fr 1fr;gap:3.5rem}}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);margin:1.1rem 0 1.2rem;max-width:12ch}
.hero .sub{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--text);margin:0 0 1rem;max-width:36rem}
.hero .lede{font-size:1rem;color:var(--muted);margin:0 0 1.6rem;max-width:38rem}
.media{background:var(--surface);border-radius:var(--r);padding:12px}
.media video{width:100%;aspect-ratio:16/9;border-radius:6px;background:#e9e7e3}
.media figcaption{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--muted);padding:.7rem .3rem .1rem}
.media figcaption b{color:var(--ink)}

/* 14-day timeline diagram */
.timeline{background:#fff;border-radius:var(--r);padding:1.6rem 1.4rem 1.3rem;border:1px solid var(--line-soft)}
.tl-days{display:grid;grid-template-columns:repeat(14,1fr);gap:6px}
.tl-days span{aspect-ratio:1/1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;border:1.5px solid var(--ink);background:#fff;color:var(--ink)}
.tl-days .p1{background:var(--lime)}
.tl-days .p2{background:#fff}
.tl-days .p3{background:var(--ink);color:#fff}
.tl-phases{display:grid;grid-template-columns:3fr 7fr 4fr;gap:6px;margin-top:.8rem}
.tl-phases div{border-top:2px solid var(--ink);padding-top:.55rem}
.tl-phases small{display:block;font-size:.8rem;font-weight:800;color:var(--muted)}
.tl-phases small::before{content:"";display:inline-block;width:10px;height:10px;border:1.5px solid var(--ink);border-radius:3px;margin-right:.4rem;vertical-align:-1px;background:#fff}
.tl-phases div:nth-child(1) small::before{background:var(--lime)}
.tl-phases div:nth-child(3) small::before{background:var(--ink)}
.tl-phases b{display:block;font-size:1rem;color:var(--ink);line-height:1.25}
@media(max-width:640px){
  .tl-days{grid-template-columns:repeat(7,1fr)}
  .tl-phases{grid-template-columns:1fr;gap:.7rem}
}

/* phase rows: alternating text / illustration */
.rows{display:grid;gap:1rem;margin-top:1rem}
.row{display:grid;gap:1.4rem;align-items:center;background:#fff;border-radius:var(--r);padding:1.4rem;border:1px solid var(--line-soft)}
@media(min-width:860px){.row{grid-template-columns:1fr 1fr;padding:2rem 2.2rem;gap:2.6rem}.row.flip .row-art{order:-1}}
.row .k{font-size:.85rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.row h3{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.015em;margin:.35rem 0 .7rem;line-height:1.1}
.row p{margin:0 0 .8rem}
.row .you{font-size:.95rem;color:var(--muted);margin:0;padding-top:.8rem;border-top:1px solid var(--line-soft)}
.row .you b{color:var(--ink)}
.row-art img{width:100%;max-width:440px;margin:0 auto;height:auto;border-radius:8px;background:var(--surface)}
.noguar{margin:1.4rem 0 0;font-weight:700;color:var(--ink)}

/* included list: hairline rows, lime checks */
.incl{display:grid;gap:0 3rem}
@media(min-width:860px){.incl{grid-template-columns:1fr 1fr}}
.incl li{list-style:none;display:grid;grid-template-columns:28px 1fr;gap:.9rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.incl{margin:0;padding:0}
.incl .ck{width:24px;height:24px;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;margin-top:2px}
.incl .ck svg{width:13px;height:13px;stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.incl h3{font-size:1.08rem;font-weight:800;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.incl p{margin:.2rem 0 0;color:var(--muted);font-size:.96rem}
.incl .big h3{font-size:1.2rem}

/* business type */
.types{display:grid;gap:1rem}
@media(min-width:860px){.types{grid-template-columns:repeat(3,1fr)}}
.type{font:inherit;text-align:left;color:inherit;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:1.4rem;cursor:pointer;width:100%;position:relative}
.type:hover{border-color:var(--ink)}
.type.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.type .pick{position:absolute;right:1.1rem;top:1.2rem;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);background:#fff}
.type.selected .pick{background:var(--lime)}
.type.selected .pick::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ink)}
.type small{display:block;font-size:.82rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.type h3{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.45rem;margin:.3rem 0 .55rem;letter-spacing:-.01em}
.type p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}
.vstatus{font-size:.95rem;color:var(--muted);margin:1rem 0 0}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.2rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-family:"Archivo Black",sans-serif;font-size:2.6rem;line-height:1;color:var(--ink);letter-spacing:-.03em}
.steps .n i{display:block;width:26px;height:6px;background:var(--lime);border:1.5px solid var(--ink);margin-top:.5rem;border-radius:2px}
.steps h3{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:.3rem}
.steps p{margin:.35rem 0 0;max-width:60ch}
@media(min-width:860px){.steps li{grid-template-columns:8rem 18rem 1fr;align-items:start}.steps p{margin:0}}
.daily{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:760px){.daily{grid-template-columns:1fr 1fr}}
.daily div{background:var(--surface);border-radius:var(--r);padding:1.3rem 1.4rem}
.daily .t{font-size:.85rem;font-weight:800;color:var(--muted)}
.daily h3{font-size:1.1rem;font-weight:800;margin:.2rem 0 .3rem;display:flex;align-items:center;gap:.3rem}
.daily p{margin:0;color:var(--muted);font-size:.96rem}

/* FAQ */
.faq-grid{display:grid;gap:2rem}
@media(min-width:960px){.faq-grid{grid-template-columns:1fr 1.6fr;gap:4rem}}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-weight:800;font-size:1.08rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.faq details[open] summary::after{background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.faq details p{margin:0 0 1.2rem;color:var(--muted);max-width:62ch}

/* final cta */
.final .box{background:var(--surface);border-radius:var(--r);padding:3rem 1.6rem;display:grid;gap:2rem;align-items:center}
@media(min-width:960px){.final .box{grid-template-columns:1.3fr 1fr;padding:3.6rem 3.4rem}}
.final h2{font-size:clamp(2rem,4.8vw,3.2rem)}
.final .lede{color:var(--muted);margin:1rem 0 0;max-width:34rem}
.final .free-note,.band .free-note{background:#fff}
.phone{margin:1rem 0 0;color:var(--muted)}
.phone a{font-weight:800}

/* legal (wording unchanged; restyled only) */
.legal{border-top:1px solid var(--line);padding:3rem 0 2.4rem}
.legal-cols{display:grid;gap:1.6rem}
@media(min-width:880px){.legal-cols{grid-template-columns:repeat(3,1fr);gap:2.4rem}}
.legal h4{font-size:.95rem;margin:0 0 .45rem}
.legal p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.legal-fine{border-top:1px solid var(--line-soft);margin-top:2rem;padding-top:1.3rem;display:grid;gap:.6rem}
.legal-fine p{font-size:.86rem}
.groundwork{margin:1.6rem 0 0;color:var(--muted);font-size:.95rem}
.groundwork b{color:var(--ink)}
.aside-link{font-size:.92rem;color:var(--muted);margin:.6rem 0 0}

/* (i) tooltips */
.tip{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;width:18px;height:18px;margin:0 .1rem 0 .15rem;padding:0;border-radius:50%;border:1.5px solid #6b6b6b;background:#fff;color:#4d4d4d;cursor:help;position:relative;top:-1px;flex:none}
.tip::before{content:"i";font:800 11px/1 Manrope,sans-serif}
.tip:hover,.tip[aria-expanded=true]{border-color:var(--ink);color:var(--ink);background:var(--lime)}
#tipbox{position:fixed;z-index:1000;max-width:min(300px,calc(100vw - 24px));background:var(--ink);color:#fff;font-size:.88rem;line-height:1.5;padding:.65rem .8rem;border-radius:8px;pointer-events:none}
#tipbox[hidden]{display:none}
#tipbox b{color:var(--lime)}

/* booking modal base (copied from /brand.css; book.js layers .bk-light on top) */
.bk-overlay{position:fixed;inset:0;background:rgba(10,10,12,.55);backdrop-filter:blur(3px);z-index:999;display:none;align-items:center;justify-content:center;padding:1rem}
.bk-overlay.open{display:flex}
.bk-modal{background:#fff;width:100%;max-width:1000px;max-height:92vh;display:flex;flex-direction:column;position:relative}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;flex:none}
.bk-close{font-size:1rem;line-height:1;cursor:pointer;padding:.4rem .6rem;flex:none}
.bk-body{flex:1;min-height:0;overflow:hidden}
.bk-body iframe{width:100%;height:min(74vh,720px);border:0;display:block}

@media(max-width:560px){
  body{font-size:16px}
  section{padding:3.6rem 0}
  .hero{padding:2.6rem 0 2.6rem}
  .btn{width:100%}
  .top .btn{width:auto}
  .row{padding:1.15rem}
  .steps li{grid-template-columns:3.6rem 1fr;gap:.9rem}
  .steps .n{font-size:2rem}
  .timeline{padding:1.1rem .9rem 1rem}
  .final .box{padding:2rem 1.15rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   Motion polish layer (2026-10-08 PT). Added ON TOP of the Quo-style house style above;
   nothing above this line was changed. Pure CSS + /14-day/landing-motion.js (tiny, vanilla).
   - Colors come from the same palette: --lime, --lime-ink, plus two pale lime tints and the
     existing warm grays (--surface, --surface2).
   - Every decorative layer is aria-hidden, absolutely positioned (no layout shift) and animates
     only transform/opacity (GPU, no repaint of the page).
   - Content is never hidden unless landing-motion.js has put .motion on <html>, and even then only
     for blocks that start below the fold. prefers-reduced-motion turns every animation off.
   ========================================================================== */
:root{
  --lime-soft:#f6fcde;           /* hsl(72 85% 93%)  pale lime band */
  --lime-wash:#eefabd;           /* hsl(72 85% 86%)  hero top wash */
  --lime-glow:hsl(72 100% 62%);  /* blob color, used at low alpha only */
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

/* ---- shared decorative layer ---- */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.fx-blob{position:absolute;border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,hsl(72 100% 62% / .55),hsl(72 100% 62% / 0));}
.fx-blob.w{background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0))}
@keyframes drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,8%,0) scale(1.12)}100%{transform:translate3d(-4%,3%,0) scale(.96)}}
@keyframes drift-b{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-8%,-5%,0) scale(.92)}100%{transform:translate3d(5%,-9%,0) scale(1.1)}}
@keyframes drift-c{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-10%,6%,0)}}
@keyframes grid-pan{from{transform:translate3d(0,0,0)}to{transform:translate3d(44px,44px,0)}}

/* ---- 1. HERO: lime wash + drifting blobs + slow-panning grid + 14 day-squares lighting up ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  background:linear-gradient(180deg,var(--lime-wash) 0%,var(--lime-soft) 46%,#fff 100%)}
.fx-hero .b1{width:min(760px,95vw);height:min(760px,95vw);right:-12%;top:-30%;animation:drift-a 26s ease-in-out infinite alternate}
.fx-hero .b2{width:min(560px,80vw);height:min(560px,80vw);left:-14%;bottom:-34%;animation:drift-b 32s ease-in-out infinite alternate;opacity:.8}
.fx-hero .b3{width:min(520px,70vw);height:min(520px,70vw);left:28%;top:-22%;animation:drift-c 22s ease-in-out infinite alternate}
.fx-grid{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 20%,#000 0%,rgba(0,0,0,.55) 40%,transparent 75%);
          mask-image:radial-gradient(120% 90% at 78% 20%,#000 0%,rgba(0,0,0,.55) 40%,transparent 75%)}
.fx-grid i{position:absolute;inset:-44px;will-change:transform;animation:grid-pan 18s linear infinite;
  background-image:linear-gradient(rgba(10,10,12,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,12,.07) 1px,transparent 1px);
  background-size:44px 44px}
/* 14 squares, one per day, lighting up lime one after another along the bottom of the hero */
.fx-days{position:absolute;left:max(1.25rem,calc((100% - 1200px) / 2 + 1.25rem));bottom:1.35rem;display:flex;gap:6px}
.fx-days i{position:relative;width:15px;height:15px;border-radius:4px;border:1.5px solid rgba(10,10,12,.28);background:rgba(255,255,255,.55);overflow:hidden}
.fx-days i::after{content:"";position:absolute;inset:0;background:var(--lime);opacity:0;animation:day-on 9.8s ease-in-out infinite}
.fx-days i:nth-child(n+11)::after{background:var(--ink)}
@keyframes day-on{0%,4%{opacity:0}9%,58%{opacity:1}68%,100%{opacity:0}}
.fx-days i:nth-child(1)::after{animation-delay:0s}   .fx-days i:nth-child(2)::after{animation-delay:.35s}
.fx-days i:nth-child(3)::after{animation-delay:.7s}  .fx-days i:nth-child(4)::after{animation-delay:1.05s}
.fx-days i:nth-child(5)::after{animation-delay:1.4s} .fx-days i:nth-child(6)::after{animation-delay:1.75s}
.fx-days i:nth-child(7)::after{animation-delay:2.1s} .fx-days i:nth-child(8)::after{animation-delay:2.45s}
.fx-days i:nth-child(9)::after{animation-delay:2.8s} .fx-days i:nth-child(10)::after{animation-delay:3.15s}
.fx-days i:nth-child(11)::after{animation-delay:3.5s}.fx-days i:nth-child(12)::after{animation-delay:3.85s}
.fx-days i:nth-child(13)::after{animation-delay:4.2s}.fx-days i:nth-child(14)::after{animation-delay:4.55s}
/* hero cards sit on white so the tinted wash never lowers text contrast */
.hero .free-note{background:rgba(255,255,255,.82)}
.hero .media{background:rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(10,10,12,.06)}
.hero .label::before{animation:dot-pulse 2.8s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 hsl(72 100% 45% / .55)}60%{box-shadow:0 0 0 7px hsl(72 100% 45% / 0)}}
@media(max-width:560px){.fx-days{bottom:.95rem;gap:5px}.fx-days i{width:12px;height:12px;border-radius:3px}}

/* ---- 2. alternating section colors: lime hero / warm gray / white / pale lime / white / deeper warm gray / white ---- */
section.band,#included,#how-it-starts,.final{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
#at-a-glance{background:var(--surface)}
#your-business{background:var(--lime-soft)}
#questions{background:var(--surface2)}

/* ---- 3. subtle background movement in every section (low opacity, slow) ---- */
section.band::before,#included::before,#how-it-starts::before{content:"";position:absolute;z-index:-1;pointer-events:none;will-change:transform;border-radius:50%}
#at-a-glance::before{width:620px;height:620px;right:-180px;top:-160px;background:radial-gradient(closest-side,hsl(72 100% 62% / .28),hsl(72 100% 62% / 0));animation:drift-a 30s ease-in-out infinite alternate}
#your-business::before{width:700px;height:700px;left:-220px;bottom:-260px;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));animation:drift-b 34s ease-in-out infinite alternate}
#questions::before{width:560px;height:560px;left:-160px;top:-120px;background:radial-gradient(closest-side,hsl(72 100% 62% / .2),hsl(72 100% 62% / 0));animation:drift-c 28s ease-in-out infinite alternate}
/* white sections: a faint dot field that slowly drifts in one corner */
#included::before,#how-it-starts::before{width:520px;height:420px;border-radius:0;opacity:.55;
  background-image:radial-gradient(rgba(10,10,12,.16) 1.2px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);
  animation:drift-c 26s ease-in-out infinite alternate}
#included::before{right:-120px;top:-60px}
#how-it-starts::before{left:-140px;bottom:-80px}
/* final call-to-action box: pale lime bookend that echoes the hero */
.final .box{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:linear-gradient(135deg,var(--lime-soft) 0%,var(--surface) 70%)}
.final .box::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,hsl(72 100% 62% / .45),hsl(72 100% 62% / 0));animation:drift-a 24s ease-in-out infinite alternate}
/* sections that are off screen pause their background loops (landing-motion.js toggles .is-off) */
.is-off::before,.is-off .fx *,.is-off .fx-days i::after,.is-off .box::before{animation-play-state:paused}

/* ---- 4. light motion: hover lifts ---- */
.btn{transition:background .12s,color .12s,transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(10,10,12,.45)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary:hover .dot{animation:dot-pulse 1.4s ease-in-out infinite}
.row,.type,.daily div,.timeline{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .15s}
.row:hover,.type:hover,.daily div:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(10,10,12,.35)}
.type.selected:hover{box-shadow:inset 0 0 0 1.5px var(--ink),0 18px 34px -24px rgba(10,10,12,.35)}
.incl .ck{transition:transform .25s var(--ease-out)}
.incl li:hover .ck{transform:scale(1.12) rotate(-8deg)}
.row-art img{transition:transform .5s var(--ease-out)}
.row:hover .row-art img{transform:scale(1.025)}

/* ---- 4. light motion: fade / slide-up reveal (only with html.motion, only below-the-fold blocks) ---- */
.motion .rv{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.motion .rv:not(.in){opacity:0;transform:translate3d(0,22px,0)}
/* once revealed, hand timing back to the quick hover transitions */
.motion .rv.done{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .15s}
/* the diagram: day-squares pop in one after another, then the phase labels slide up */
.motion .timeline.rv:not(.in){opacity:1;transform:none}
.motion .timeline.rv .tl-days span{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.motion .timeline.rv:not(.in) .tl-days span{opacity:0;transform:translate3d(0,10px,0) scale(.7)}
.motion .timeline.rv .tl-phases{transition:opacity .6s var(--ease-out) .85s,transform .6s var(--ease-out) .85s}
.motion .timeline.rv:not(.in) .tl-phases{opacity:0;transform:translate3d(0,12px,0)}
.motion .timeline.in .tl-days span{animation:day-ring .9s ease-out both}
@keyframes day-ring{0%,30%{box-shadow:0 0 0 0 hsl(72 100% 50% / 0)}55%{box-shadow:0 0 0 5px hsl(72 100% 50% / .45)}100%{box-shadow:0 0 0 0 hsl(72 100% 50% / 0)}}
.tl-days span:nth-child(1){--i:0}.tl-days span:nth-child(2){--i:1}.tl-days span:nth-child(3){--i:2}.tl-days span:nth-child(4){--i:3}
.tl-days span:nth-child(5){--i:4}.tl-days span:nth-child(6){--i:5}.tl-days span:nth-child(7){--i:6}.tl-days span:nth-child(8){--i:7}
.tl-days span:nth-child(9){--i:8}.tl-days span:nth-child(10){--i:9}.tl-days span:nth-child(11){--i:10}.tl-days span:nth-child(12){--i:11}
.tl-days span:nth-child(13){--i:12}.tl-days span:nth-child(14){--i:13}
.motion .timeline.rv .tl-days span{transition-delay:calc(var(--i) * 55ms);animation-delay:calc(var(--i) * 55ms + .2s)}
/* step numbers: the little lime bar draws in */
.motion .steps li.rv .n i{transition:transform .6s var(--ease-out) .3s;transform-origin:left center}
.motion .steps li.rv:not(.in) .n i{transform:scaleX(0)}

/* ---- reduced motion: everything still, everything visible ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .motion .rv,.motion .rv .tl-days span,.motion .rv .tl-phases,.motion .rv .n i{opacity:1!important;transform:none!important}
  .btn:hover,.row:hover,.type:hover,.daily div:hover,.incl li:hover .ck,.row:hover .row-art img{transform:none}
}
@media print{.fx,section::before,.final .box::before{display:none}.motion .rv{opacity:1!important;transform:none!important}}

/* ---- 5. first screen on phones (2026-10-08 review): in the Facebook app (390x664) the signup button sat just below
   the first screen. On narrow screens the button row moves up under the subhead, with its "free" note right under it
   (Legal: the note stays next to every prominent "free"); the longer explainer follows. ---- */
@media(max-width:640px){
  .hero{padding-top:2.4rem}
  .hero-grid > div:first-child{display:flex;flex-direction:column}
  .hero h1{margin:.8rem 0 .9rem}
  .hero .sub{order:1}
  .hero .cta-row{order:2}
  .hero .cta-sub{order:3}
  .hero .free-note{order:4}
  .hero .lede{order:5;margin:1.3rem 0 0}
}