/* Landing video hero (2026-09-29 v2, acquisition.com/workshop layout): dark band with pill, headline and subline,
   the video overlapping the band's bottom edge, an unmute card while muted, a control bar, and a big CTA below.
   Only pages with section.vhero load this file. */
main:has(> .vhero:first-child){padding-top:0}
body:has(.vhero) .masthead{height:104px}
.vhero{background:#1c1915;color:#fbf6ea;text-align:center;padding:1.7rem 0 0}
.vhero-in{display:flex;flex-direction:column;align-items:center}
.vh-pill{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding:.55rem .95rem;border-radius:3px;background:#fbf6ea;color:#181816;
  font:700 .8rem/1 "Atkinson Hyperlegible",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.vh-pill .dot{width:.6rem;height:.6rem;border-radius:50%;background:#c8342b}
.vh-title{margin:0 0 .9rem;max-width:21ch;color:#fbf6ea;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:.005em}
.vhero .money{color:#f0c24f}
.vh-sub{margin:0 0 1.5rem;max-width:44rem;color:#e4dccd;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.5}
.hv-wrap{position:relative;z-index:2;width:100%;max-width:60rem;margin-bottom:calc(-1 * min(12rem, 22vw));box-shadow:0 22px 50px rgba(0,0,0,.35);border-radius:6px}
.hero-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:6px 6px 0 0;overflow:hidden}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.hv-unmute{position:absolute;inset:0;margin:auto;width:min(25rem,60%);height:min(14rem,56%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  padding:1rem;border:3px solid #fbf6ea;border-radius:8px;background:rgba(140,29,29,.84);color:#fff;cursor:pointer;
  font:700 clamp(1.05rem,2.3vw,1.6rem)/1.25 "Atkinson Hyperlegible",system-ui,sans-serif}
.hv-unmute svg{width:clamp(2.2rem,5vw,3.4rem);height:auto}
.hv-replay{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;padding:.9rem 1.4rem;border:0;border-radius:6px;background:rgba(140,29,29,.9);
  color:#fff;cursor:pointer;font:700 1.15rem/1 "Atkinson Hyperlegible",system-ui,sans-serif}
.hv-unmute[hidden],.hv-replay[hidden]{display:none}
.hv-bar{display:flex;align-items:center;gap:.35rem;padding:.4rem .6rem;border-radius:0 0 6px 6px;background:#8C1D1D}
.hv-bar button{display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;border:0;border-radius:4px;background:transparent;color:#fff;cursor:pointer}
.hv-bar button:hover,.hv-bar button:focus-visible{background:rgba(255,255,255,.14);outline:none}
.hv-bar svg{width:1.35rem;height:1.35rem}
.hv-prog{flex:1;height:.4rem;margin:0 .5rem;border-radius:3px;background:rgba(255,255,255,.28);cursor:pointer;position:relative}
.hv-prog i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:#fff}
.vh-after{padding:calc(min(12rem, 22vw) + 1.7rem) 0 2.2rem;text-align:center}
.vh-after .btn{min-width:min(34rem,100%);min-height:80px;font-size:1.35rem}
.vh-after .hero-delivery{margin:.8rem auto 0}
@media (max-width:820px){
  body:has(.vhero) .masthead{height:80px}
  .vhero{padding-top:1.2rem}
  .vh-pill{margin-bottom:1rem;font-size:.7rem}
  .vh-sub{margin-bottom:1.3rem}
  .hv-unmute{width:74%;height:56%;gap:.3rem;font-size:.9rem;border-width:2px}
  .hv-unmute svg{width:1.8rem}
  .hv-bar button{width:2.2rem;height:2.2rem}
}
.vh-hear{margin:.9rem auto 0;max-width:none;text-align:center;font-size:1.05rem}
.vh-hear a{color:#8C1D1D;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Shorter page on video pages (2026-09-29): the video already shows the pages and says what the description says.
   Hidden, not deleted: the sample pages, the second benefits list, the product description paragraphs,
   and all but the three priority reviews. */
section[data-analytics-section="book-preview"] .sample-pages,
section[data-analytics-section="book-preview"] .cando,
.offer-detail > h3 + p,
.offer-top .offer-lede,
.reviews > .review:not([class*="review-priority"]){display:none!important}
/* Keep the first screen clear: the optional-analytics question waits until the visitor scrolls past the video. */
body.hv-consent-wait .analytics-consent{display:none!important}
/* Video pages open straight on the headline (the pill names the host), and the sticky phone buy bar
   only slides in once the big button under the video has scrolled away. */
body:has(.vhero) .masthead{display:none}
@media (max-width:820px){
  body:has(.vhero) .mobile-purchase{transition:transform .25s ease, visibility .25s}
  body:has(.vhero):not(.hv-bar-on) .mobile-purchase{transform:translateY(110%);visibility:hidden}
}
/* Desktop: headline, video and the big button fit one screen. Fixed parts (pill, headline, subline, control bar,
   button, gaps) take about 430px; the video gets the rest of the window height, keeps 16:9 and stays at least 360px wide.
   On very short windows the subline is dropped so the video does not shrink too far. */
@media (min-width:821px){
  .vhero{padding-top:20px}
  .vh-pill{margin-bottom:12px}
  .vh-title{font-size:clamp(2rem, min(4.2vw, 6.2vh), 3.6rem);margin-bottom:10px}
  .vh-sub{font-size:clamp(1rem, 2.2vh, 1.25rem);margin-bottom:18px}
  .hv-wrap{max-width:min(60rem, calc((100vh - 470px) * 1.7778));min-width:min(100%, 360px);margin-bottom:-70px}
  .hv-bar{padding:4px 8px}
  .hv-bar button{width:34px;height:34px}
  .hv-bar svg{width:20px;height:20px}
  .hv-unmute{width:min(25rem,54%);height:min(14rem,52%);font-size:clamp(.95rem, 1.8vw, 1.5rem)}
  .vh-after{padding-top:90px}
  .vh-after .btn{min-width:min(26rem,100%);min-height:60px;padding-top:10px;padding-bottom:10px;font-size:1.2rem}
}
@media (min-width:821px) and (max-height:660px){
  .vh-sub{display:none}
  .hv-wrap{max-width:min(60rem, calc((100vh - 350px) * 1.7778))}
}
/* Unmute card motion, modelled on the acquisition.com (Vidalytics) player: the card pops in, a ring pulses out
   every 2 s, and the speaker's two sound waves fade in one after the other like wifi bars. */
.hv-unmute{animation:hv-pop .45s cubic-bezier(.2,1.4,.4,1) backwards;transition:transform .25s cubic-bezier(.4,0,.2,1),background-color .25s}
.hv-unmute:hover,.hv-unmute:focus-visible{transform:scale(1.04);background-color:rgba(140,29,29,.93)}
.hv-unmute::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;animation:hv-ring 2s ease 1s infinite}
.hv-w1,.hv-w2{opacity:0}
.hv-w1{animation:hv-w1 2s cubic-bezier(.4,0,.2,1) infinite}
.hv-w2{animation:hv-w2 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hv-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes hv-ring{0%{box-shadow:0 0 0 0 rgba(251,246,234,.6);opacity:1}70%{box-shadow:0 0 0 30px rgba(251,246,234,0);opacity:0}100%{box-shadow:0 0 0 0 rgba(251,246,234,0);opacity:0}}
@keyframes hv-w1{0%,22%,78%,100%{opacity:0}28%,72%{opacity:1}}
@keyframes hv-w2{0%,48%,98%,100%{opacity:0}54%,94%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hv-unmute,.hv-unmute::after{animation:none}.hv-w1,.hv-w2{animation:none;opacity:1}}
/* No skipping: no back button, and the progress line only shows progress. */
.hv-bar .hv-back{display:none}
.hv-prog{cursor:default;pointer-events:none}
/* Phone buy bar (shown after the big button scrolls away): the button is only as wide as its label. */
@media (max-width:820px){
  .mobile-purchase .btn{width:auto;flex:none;padding:.5rem 1.1rem}
  .mobile-purchase>span{max-width:none;flex:1;min-width:0}
}
/* Shorter page, round 2 (2026-09-29, owner): no free-lesson form on video pages, and "What happens after you pay"
   is a closed tap-to-open. */
section[data-analytics-section="free-lesson"]{display:none!important}
details.afterpay > summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.6rem}
details.afterpay > summary::-webkit-details-marker{display:none}
details.afterpay > summary::after{content:"+";font-size:1.3em;line-height:1;color:#8C1D1D}
details.afterpay[open] > summary::after{content:"\2212"}
details.afterpay[open] > summary{margin-bottom:.5rem}
/* Compact arithmetic card (2026-09-29, owner): same numbers and small print, less space. */
.math .math-h{font-size:clamp(1.6rem,4vw,2.4rem);margin:.2rem 0 .5rem}
.math .math-lede{font-size:1rem;margin:0 0 .8rem}
.math-card{padding:.5rem 1.2rem}
.math-row{padding:.6rem 0;font-size:.98rem;gap:1rem}
.math-row b{font-size:1.2rem}
.math-note{font-size:.86rem;line-height:1.45;margin:.7rem 0 .3rem}
.math .btn-row{margin-top:1rem}
@media (max-width:640px){
  .math-card{padding:.35rem .85rem}
  .math-row{flex-direction:row;align-items:center;gap:.8rem}
  .math-row span{font-size:.9rem;line-height:1.35}
  .math-row b{font-size:1.1rem}
}