/* Homepage motion (2 Nov 2026, option B "the report builds itself" + scroll motion on every section).
   Built from the previews _preview-v9.css + _preview-opt.css (B only) + _preview-v10.css. */
/* v7 homepage layer (preview only, 31 Oct). The live design kept: colours, rounded cards, centred hero.
   Motion timing taken from ai.stanbrinkman.com: ease cubic-bezier(.22,1,.36,1), 30px / 1.2s rises, .18s stagger,
   scroll-scrubbed scenes with long holds. Nothing pops in. Native scrolling. Reduced motion: everything static. */
:root{--v7e:cubic-bezier(.22,1,.36,1);--v7-navy:#14243f;--v7-gold:#4f7360;--v7-sub:#5b6475}

/* ---------- 1. hero ---------- */
@media (min-width:768px){
  div[style*="rgba(255,255,255,0.60) 0%"]{background:linear-gradient(to bottom,rgba(255,255,255,.14) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.30) 100%)!important}
  div[style*="rgba(255,255,255,0.45) 0%"]{background:radial-gradient(ellipse 50% 56% at 50% 48%,rgba(255,255,255,.80) 0%,rgba(255,255,255,.70) 62%,rgba(255,255,255,.30) 86%,transparent 100%)!important}
  .hero-copy-center h1,.hero-copy-center h1 span{text-shadow:0 0 2px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.9),0 0 34px rgba(255,255,255,.75),0 0 60px rgba(255,255,255,.55)}
  .hero-copy-center > p,.hero-copy-center > div p{text-shadow:0 0 2px #fff,0 0 10px rgba(255,255,255,.95),0 0 22px rgba(255,255,255,.85),0 0 40px rgba(255,255,255,.6)}
}
.v7-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 auto 22px!important}
.v7-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 28px;border-radius:16px;font-weight:700;font-size:16px;
  transition:transform .4s var(--v7e),box-shadow .4s var(--v7e),background-color .3s,border-color .3s;text-decoration:none}
.v7-btn-primary{background:var(--v7-gold);color:#fff;box-shadow:0 14px 30px -16px rgba(79,115,96,.75)}
.v7-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -18px rgba(79,115,96,.85)}
.v7-btn-ghost{background:rgba(255,255,255,.92);color:var(--v7-navy);border:1px solid rgba(20,36,63,.18)}
.v7-btn-ghost:hover{transform:translateY(-2px);border-color:rgba(20,36,63,.4)}
.v7-btn-sm{min-height:44px;padding:0 20px;font-size:14px}
@media (max-width:767px){.v7-ctas{flex-direction:column;align-items:stretch;max-width:340px}.v7-btn{min-height:56px}}

/* hero copy rises in on load (pure CSS, so it never waits on a script) */
@media (min-width:1024px){.hero-copy-center h1.display-h1{font-size:min(4.5rem,7.4svh)!important;line-height:1.04!important}}
@keyframes v7rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
html.v7-js [data-v7-hero] > *{animation:v7rise 1.2s var(--v7e) both}
html.v7-js [data-v7-hero] > *:nth-child(1){animation-delay:.10s}
html.v7-js [data-v7-hero] > *:nth-child(2){animation-delay:.28s}
html.v7-js [data-v7-hero] > *:nth-child(3){animation-delay:.46s}
html.v7-js [data-v7-hero] > *:nth-child(4){animation-delay:.64s}
html.v7-js [data-v7-hero] > *:nth-child(5){animation-delay:.82s}

/* ---------- generic: every block eases in as it enters ---------- */
html.v7-js .v7-rv{opacity:0;transform:translateY(24px)}
html.v7-js .v7-rv.in{opacity:1;transform:none;transition:opacity 1s var(--v7e) var(--d,0s),transform 1s var(--v7e) var(--d,0s)}
@media (max-width:767px){html.v7-js .v7-rv{transform:translateY(12px)}html.v7-js .v7-rv.in{transition-duration:.6s,.6s}}

/* ---------- scenes (pinned while the scroll scrubs them) ---------- */
.v7-scene{position:relative}
.v7-scene.live > .pin{position:sticky;top:0;height:100svh;overflow:hidden}

/* ---------- 2. 12,097 -> the five ---------- */
#sc-funnel{--bga:0}
html.v7-js #sc-funnel{height:300vh}
#sc-funnel > .pin{display:flex;flex-direction:column}
#sc-funnel > .pin::before{content:"";position:absolute;inset:0;background:#14243f;z-index:0;clip-path:inset(calc((1 - var(--bga)) * 100%) 0 0 0);pointer-events:none}
/* the navy runs out into the next section on a soft gradient, never a hard edge */
#sc-funnel::after{content:"";position:absolute;left:0;right:0;top:100%;height:220px;background:linear-gradient(rgba(20,36,63,var(--bga)),rgba(20,36,63,0));pointer-events:none}
#sc-funnel:not(.live) > .pin{padding:72px 0 56px}
.v7-f-copy{position:relative;z-index:2;padding-top:max(92px,12svh)}
.v7-f-num{position:relative;height:1em;font-size:clamp(60px,min(10vw,15svh),160px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--fink,#14243f);font-variant-numeric:tabular-nums;margin:6px 0 0}
.v7-f-num span{position:absolute;left:0;right:0;top:0;will-change:opacity,transform}
.v7-f-b{color:var(--v7-gold);opacity:0}
.v7-f-unit{margin:12px auto 0;font-size:clamp(15px,2svh,17px);line-height:1.5;color:var(--fsub,#5b6475);max-width:30rem}
.v7-f-steps{list-style:none;padding:0;margin:clamp(16px,3svh,28px) auto 0;position:relative;height:58px;max-width:640px}
.v7-f-steps li{position:absolute;left:0;right:0;top:0;margin:0 auto;width:max-content;max-width:100%;display:flex;gap:12px;align-items:center;
  padding:14px 26px;border-radius:999px;background:#fff;color:#14243f;font-weight:600;font-size:clamp(16px,2.3svh,19px);box-shadow:0 16px 34px -22px rgba(20,36,63,.45);opacity:0;will-change:opacity,transform}
.v7-f-steps li b{color:var(--v7-gold);font-weight:800;font-variant-numeric:tabular-nums}
.v7-f-end{position:absolute;left:0;right:0;margin-top:-50px!important;font-size:clamp(1.6rem,min(3.2vw,4.8svh),2.6rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:#fff;margin:0;opacity:0;will-change:opacity,transform}
.v7-f-end span{color:#a3c2ab}
.v7-f-field{position:absolute;left:0;right:0;bottom:0;height:min(30svh,280px);padding:0 max(48px,calc((100vw - 1120px)/2)) clamp(16px,3svh,28px);z-index:1}
.v7-f-field canvas{display:block;width:100%;height:calc(100% - 26px)}
.v7-f-legend{margin:8px 0 0;font-size:13px;color:var(--fsub,#5b6475);text-align:center}
/* static (no JS / reduced motion): a plain section, steps as a list, the end line shown */
#sc-funnel:not(.live) .v7-f-steps{height:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
#sc-funnel:not(.live) .v7-f-steps li{position:static;opacity:1;width:auto;max-width:100%;text-align:left}
#sc-funnel:not(.live) .v7-f-end{position:static;opacity:1;color:#14243f;margin-top:22px!important}
#sc-funnel:not(.live) .v7-f-field{position:relative;height:200px;margin-top:20px}
html:not(.v7-on) .v7-f-field{display:none}
@media (max-width:767px){
  html.v7-js #sc-funnel{height:290vh}
  #sc-funnel.live > .pin{justify-content:center;padding-bottom:70px}
  .v7-f-copy{padding-top:0}
  .v7-f-num{font-size:clamp(64px,20vw,96px)}
  .v7-f-unit{font-size:15px;margin-top:10px;padding:0 8px}
  .v7-f-steps{margin-top:16px;height:48px}
  .v7-f-steps li{font-size:15px;padding:11px 16px}
  .v7-f-field{position:relative;left:auto;right:auto;bottom:auto;height:min(32svh,250px);padding:0 16px;margin-top:22px}
  .v7-f-steps li{font-size:16px}
  .v7-f-legend{font-size:12px}
}

/* ---------- 3. real pages, one per screen ---------- */
.v7-pages-sec{padding-bottom:40px}
html.v7-js #sc-pages{height:300vh}
#sc-pages > .pin{display:flex;flex-direction:column;justify-content:center;padding:84px 0 24px}
#sc-pages:not(.live) > .pin{padding:72px 0 24px}
.v7-p-head .text-center{margin-bottom:14px!important}
#sc-pages.live .v7-p-stage{position:relative;height:min(calc(100svh - 290px),640px);margin:0 auto;width:100%}
#sc-pages.live .v7-p-stage{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22px,#000 100%)}
#sc-pages.live .v7-p-stage > .grid{display:block!important;position:absolute;inset:0;margin:0!important}
#sc-pages.live .v7-p-stage figure{position:absolute;left:0;right:0;top:0;bottom:0;margin:0;display:flex;flex-direction:column;align-items:center;opacity:0;will-change:opacity,transform}
#sc-pages.live .v7-p-stage figure > a{display:block;height:calc(100% - 34px)}
#sc-pages.live .v7-p-stage figure img{height:100%!important;width:auto!important;max-width:none;border-radius:18px;box-shadow:0 36px 70px -36px rgba(20,36,63,.55)}
#sc-pages.live .v7-p-stage figcaption{margin-top:12px!important;font-size:15px!important;font-weight:600;color:#14243f!important}
#sc-pages:not(.live) .v7-p-stage{max-width:64rem;margin:0 auto;padding:0 16px}
.v7-p-pager{display:none}
#sc-pages.live .v7-p-pager{display:block;text-align:center;margin-top:14px;font-size:13px;font-weight:600;color:#5b6475;font-variant-numeric:tabular-nums}
#sc-pages.live .v7-p-pager .v7-p-cur{color:#14243f}
.v7-ex{text-align:center;margin-top:8px}
.v7-ex-links{margin:0 0 16px;font-size:15px;color:#5b6475}
.v7-ex-links a{color:#14243f;font-weight:600;text-decoration:underline;text-decoration-color:rgba(79,115,96,.7);text-underline-offset:4px}
@media (max-width:767px){
  html.v7-js #sc-pages{height:300vh}
  #sc-pages > .pin{padding:76px 0 140px}
  .v7-ex{margin-top:-60px}
  #sc-pages.live .v7-p-stage{height:min(calc(100svh - 360px),126vw)}
  #sc-pages.live .v7-p-stage figcaption{font-size:13.5px!important;text-align:center;padding:0 16px}
}

/* ---------- 4. Stan, large, then the video ---------- */
.v7-who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.v7-portrait{position:relative;height:min(460px,56svh);border-radius:32px;overflow:hidden;background:linear-gradient(180deg,#eef2f7 0%,#e4eaf2 100%);
  box-shadow:0 40px 80px -46px rgba(79,115,96,.55),0 24px 50px -36px rgba(20,36,63,.35)}
.v7-portrait img{position:absolute;left:50%;bottom:0;height:104%;width:auto;max-width:none;transform:translateX(-50%)}
.v7-vsl{max-width:720px;margin:56px auto 0}
.v7-vsl > div > .relative{border-radius:28px!important;border:1px solid rgba(20,36,63,.08)!important;box-shadow:0 36px 70px -40px rgba(20,36,63,.5)!important}
#vsl-sound{background:rgba(255,255,255,.94)!important;border-color:rgba(20,36,63,.12)!important;backdrop-filter:none!important;box-shadow:0 8px 20px -10px rgba(20,36,63,.4)}
#vsl-sound svg,#vsl-sound span{color:#14243f!important}
@media (max-width:767px){.v7-who{grid-template-columns:1fr;gap:28px}.v7-portrait{height:380px;max-width:360px;width:100%;margin:0 auto}.v7-vsl{margin-top:36px}}

/* ---------- 5. what it costs ---------- */
.v7-rows{display:grid;gap:14px}
.v7-row{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:26px 30px;border-radius:24px;background:rgba(255,255,255,.78);
  border:1px solid rgba(20,36,63,.08);box-shadow:0 18px 40px -32px rgba(20,36,63,.4);transition:transform .45s var(--v7e),box-shadow .45s var(--v7e)}
@media (hover:hover){.v7-row:hover{transform:translateY(-3px);box-shadow:0 26px 50px -32px rgba(20,36,63,.45)}}
.v7-row h3{margin:0 0 6px;font-size:1.3rem;font-weight:800;letter-spacing:-.015em;color:#14243f;line-height:1.25}
.v7-row-d{margin:0 0 6px;font-size:15px;line-height:1.55;color:#5b6475;max-width:36rem}
.v7-row-m{margin:0;font-size:13.5px;color:#5b6475;font-weight:500}
.v7-row-r{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.v7-price{margin:0;font-size:36px;font-weight:800;letter-spacing:-.03em;color:#14243f;font-variant-numeric:tabular-nums;line-height:1}
.v7-row-a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:14px;border:1px solid rgba(20,36,63,.2);color:#14243f;font-weight:700;font-size:14px;white-space:nowrap;background:#fff;transition:border-color .3s,transform .4s var(--v7e)}
.v7-row-a:hover{border-color:rgba(20,36,63,.45);transform:translateY(-1px)}
.v7-after{margin-top:36px}
.v7-after > div{max-width:none!important}
.v7-call{text-align:center;margin-top:28px}
@media (max-width:767px){
  .v7-row{flex-direction:column;align-items:stretch;gap:14px;padding:22px 20px}
  .v7-row-r{flex-direction:column;align-items:flex-start;gap:12px}
  .v7-row-a{width:calc(100% - 64px)}
  .v7-price{font-size:30px}
}

/* ---------- 6. FAQ + close ---------- */
.v7-close{margin-top:48px}

/* ---------- phone sticky call bar ---------- */
.v7-sticky{display:none}
@media (max-width:767px){
  .v7-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);border-top:1px solid rgba(20,36,63,.08);box-shadow:0 -10px 30px -20px rgba(20,36,63,.4);
    transform:translateY(110%);transition:transform .6s var(--v7e)}
  .v7-sticky a{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:14px;background:var(--v7-gold);color:#fff;font-weight:700;font-size:16px}
  .v7-sticky.on{transform:none}
  #bd-chat-button{transition:bottom .6s var(--v7e)}
}
/* the auto chat pop-up competes with the call on this page; the chat button stays */
#bd-chat-teaser{display:none!important}

@media (prefers-reduced-motion:reduce){
  html.v7-js [data-v7-hero] > *{animation:none}
  .v7-btn,.v7-row,.v7-sticky{transition:none}
}


/* ================= v9: continuous, scroll-linked motion ================= */
/* checks: all three always on screen as large lines; the active one lights, a gold bar fills under it as its scan runs */
.v7-f-steps{height:auto!important;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:680px!important}
.v7-f-steps li{position:relative!important;opacity:1!important;width:auto;max-width:100%;background:transparent!important;box-shadow:none!important;
  padding:4px 0 10px!important;border-radius:0!important;font-size:clamp(17px,min(2.2vw,3.1svh),26px)!important;font-weight:700!important;letter-spacing:-.01em;
  color:rgba(20,36,63,var(--la,.22))!important;transform:none!important;transition:none!important}
.v7-f-steps li b{color:rgba(79,115,96,var(--lb,.35))!important;margin-right:12px}
.v7-f-steps li i{position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:3px;background:#4f7360;transform-origin:left center;transform:scaleX(var(--lf,0));opacity:var(--lo,0)}
.v7-f-copy{padding-top:max(84px,11svh)!important}
.v7-f-num{font-size:clamp(56px,min(9vw,13svh),150px)!important}
.v7-f-field{height:min(26svh,240px)!important}
@media (max-width:767px){.v7-f-steps{gap:2px}.v7-f-steps li{font-size:15.5px!important;padding:3px 0 8px!important}.v7-f-field{height:min(26svh,210px)!important}}
/* hero copy drifts up and fades as the scene arrives (set by JS from scroll) */
[data-v7-hero]{will-change:transform,opacity}
/* scroll-linked entries replace the timed reveals */
html.v7-js .v7-sl{opacity:0}
/* page progress bar */
.v7-p-bar{display:none}
#sc-pages.live .v7-p-bar{display:block;width:min(240px,50vw);height:3px;border-radius:3px;margin:10px auto 0;background:rgba(20,36,63,.12);overflow:hidden}
#sc-pages.live .v7-p-bar i{display:block;height:100%;background:#14243f;transform-origin:left center;transform:scaleX(var(--pp,0))}
/* real figures */
.v7-tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:48px auto 0;max-width:820px;text-align:center}
.v7-tally > div{padding:22px 12px;border-radius:24px;background:rgba(255,255,255,.7);border:1px solid rgba(20,36,63,.08);box-shadow:0 18px 40px -32px rgba(20,36,63,.4)}
.v7-t-n{margin:0;font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;color:#14243f;font-variant-numeric:tabular-nums;line-height:1}
.v7-t-l{margin:8px 0 0;font-size:14px;color:#5b6475;font-weight:500}
@media (max-width:767px){.v7-tally{grid-template-columns:1fr;gap:10px;margin-top:32px}.v7-tally > div{padding:16px 12px}}
.v7-portrait img{will-change:transform}
@media (prefers-reduced-motion:reduce){html.v7-js .v7-sl{opacity:1}.v7-f-steps li{color:#14243f!important}}

/* gold reading band moving down a held report page (height of the band = 14% of the page) */
#sc-pages.live .v7-p-stage figure > a{position:relative;overflow:hidden;border-radius:18px}
.v7-p-scan{display:none}
#sc-pages.live .v7-p-scan{display:block;position:absolute;left:0;right:0;top:0;height:14%;opacity:0;pointer-events:none;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(140,200,162,0) 0%,rgba(140,200,162,.20) 45%,rgba(140,200,162,.20) 55%,rgba(140,200,162,0) 100%);
  border-top:2px solid rgba(79,115,96,.75);border-bottom:2px solid rgba(79,115,96,.35)}

/* v9b: larger report pages, stronger reading band */
@media (min-width:1024px){#sc-pages.live .v7-p-stage{height:min(calc(100svh - 230px),700px)!important}}
#sc-pages.live .v7-p-scan{background:linear-gradient(180deg,rgba(140,200,162,0) 0%,rgba(140,200,162,.34) 40%,rgba(140,200,162,.34) 60%,rgba(140,200,162,0) 100%)!important;border-top:3px solid #4f7360!important}

/* Homepage OPTIONS A/B/C (preview only, 2 Nov). Live design kept (light ground, navy type, one gold, rounded).
   Motion timing from ai.stanbrinkman.com: ease cubic-bezier(.22,1,.36,1); hero copy rises 30px over 1.2s. */
:root{--ope:cubic-bezier(.22,1,.36,1);--navy:#14243f;--gold:#4f7360;--sub:#5b6475}
@keyframes oprise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
html.op-js [data-op-hero] > *{animation:oprise 1.2s var(--ope) both}
html.op-js [data-op-hero] > *:nth-child(2){animation-delay:.18s}
html.op-js [data-op-hero] > *:nth-child(3){animation-delay:.36s}
html.op-js [data-op-hero] > *:nth-child(4){animation-delay:.54s}
html.op-js [data-op-hero] > *:nth-child(5){animation-delay:.72s}
html.op-js [data-op-hero] > *:nth-child(6){animation-delay:.90s}
[data-op-hero]{will-change:transform,opacity}

.op-scene{position:relative;z-index:10}
.op-scene.live > .op-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.op-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.op-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:16px;font-weight:700;font-size:16px;text-decoration:none;
  transition:transform .4s var(--ope),box-shadow .4s var(--ope)}
.op-btn-p{background:var(--gold);color:#fff;box-shadow:0 14px 30px -16px rgba(79,115,96,.75)}
.op-btn-g{background:#fff;color:var(--navy);border:1px solid rgba(20,36,63,.18)}
.op-btn:hover{transform:translateY(-2px)}
.op-kick{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--sub);margin:0}
.op-static{display:none}
.op-scene:not(.live) .op-static{display:block;text-align:center;padding:72px 16px}
.op-scene:not(.live) .op-pin{display:none}
.op-static h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.025em;color:var(--navy);margin:8px 0 18px}

/* ================= B. the report builds itself ================= */
html.op-js #op-b{height:420vh}
#op-b .op-pin{background:#fff}
.ob-head{position:absolute;left:0;right:0;top:max(84px,10.5svh);text-align:center;opacity:0;z-index:3}
.ob-checks{display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;margin:12px auto 0;padding:0 16px;max-width:980px}
.ob-check{position:relative;padding:2px 0 9px;font-size:clamp(14px,1.35vw,17px);font-weight:700;color:rgba(20,36,63,var(--la,.3))}
.ob-check b{color:var(--gold);margin-right:8px}
.ob-check i{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--gold);transform-origin:left;transform:scaleX(var(--lf,0))}
.ob-card{position:absolute;left:50%;top:calc(max(84px,10.5svh) + 92px);width:min(1020px,92vw);margin-left:calc(min(1020px,92vw) / -2);height:min(calc(100svh - max(84px,10.5svh) - 130px),560px);
  background:#fff;border:1px solid rgba(20,36,63,.09);border-radius:26px;box-shadow:0 40px 90px -50px rgba(20,36,63,.55);overflow:hidden;opacity:0;will-change:transform,opacity;z-index:2}
.ob-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid rgba(20,36,63,.07);font-size:13px;color:var(--sub);font-weight:600}
.ob-bar i{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--gold);margin-right:8px}
.ob-count b{color:var(--navy);font-variant-numeric:tabular-nums;font-size:15px}
.ob-row,.ob-th{display:grid;grid-template-columns:44px minmax(0,1.7fr) minmax(0,1.3fr) 50px 64px 112px 128px 112px;align-items:center;gap:0 10px;padding:0 22px;height:40px;font-size:13.5px;color:#2b3a52;font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-th{height:36px;font-size:11.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;background:#f7f8fa;border-bottom:1px solid rgba(20,36,63,.07)}
.ob-row{border-bottom:1px solid rgba(20,36,63,.05)}
.ob-row > *,.ob-th > *{overflow:hidden;text-overflow:ellipsis}
.ob-row .r{color:#8a93a3}.ob-row .n{font-weight:600;color:var(--navy)}
.c-pc,.c-rent{position:relative}
.ob-row .c-pc::before,.ob-row .c-rent::before{content:"";position:absolute;inset:-12px -6px;background:rgba(163,194,171,var(--hi,0));opacity:.35;border-radius:6px;z-index:-1}
.ob-row .c-pc,.ob-row .c-rent{z-index:0}
.ob-th .c-pc,.ob-th .c-rent{color:rgba(62,94,77,calc(.45 + var(--hi,0) * .6))}
.ob-body{position:relative;height:calc(100% - 87px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 28px,#000 calc(100% - 50px),transparent 100%);mask-image:linear-gradient(transparent 0,#000 28px,#000 calc(100% - 50px),transparent 100%)}
.ob-rows{will-change:transform,opacity}
.ob-scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);box-shadow:0 0 18px 4px rgba(163,194,171,.45);opacity:0;pointer-events:none}
.ob-five{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 14px}
.ob-five > div{opacity:0;margin:6px 0;border-radius:14px;background:#fff;border:1.5px solid rgba(79,115,96,.75);box-shadow:0 18px 36px -24px rgba(79,115,96,.8);will-change:transform,opacity}
.ob-five .ob-row{border:0;height:46px}
.ob-five .r{color:var(--gold);font-weight:800}
.ob-page{position:absolute;left:50%;top:calc(50% + 24px);height:min(calc(100svh - 150px),780px);aspect-ratio:1280/1852;transform-origin:50% 50%;opacity:0;will-change:transform,opacity;z-index:1;
  translate:-50% -50%;perspective:1800px}
.ob-page > img,.ob-book img{display:block;width:100%;height:100%;border-radius:16px;box-shadow:0 50px 90px -40px rgba(20,36,63,.6)}
.ob-pclip{position:absolute;inset:0;border-radius:16px;overflow:hidden;pointer-events:none}
.ob-band{position:absolute;left:3%;right:3%;top:0;height:14%;border-radius:10px;opacity:0;
  background:linear-gradient(180deg,rgba(140,200,162,0) 0%,rgba(140,200,162,.30) 40%,rgba(140,200,162,.30) 60%,rgba(140,200,162,0) 100%);border-top:3px solid var(--gold)}
.ob-book{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;opacity:0}
.ob-book > *{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px}
.ob-book .bk{background:linear-gradient(135deg,#f3f5f8,#e3e8ef);border:1px solid rgba(20,36,63,.1);transform:rotateY(180deg)}
.ob-end{position:absolute;left:0;right:0;bottom:max(26px,4svh);text-align:center;opacity:0;visibility:hidden;z-index:4}
.ob-end p{margin:0 0 16px;font-size:clamp(1.5rem,3vw,2.3rem);font-weight:800;letter-spacing:-.025em;color:var(--navy)}
.ob-end p span{color:var(--gold)}
@media (max-width:767px){
  html.op-js #op-b{height:400vh}
  .ob-head{top:72px}.ob-checks{gap:2px 14px}.ob-check{font-size:12.5px;padding-bottom:7px}
  .ob-card{top:166px;height:calc(100svh - 230px);border-radius:20px}
  .ob-row,.ob-th{grid-template-columns:minmax(0,1.6fr) 74px 50px 70px;padding:0 12px;font-size:12px}
  .ob-row > :nth-child(1),.ob-row > :nth-child(3),.ob-row > :nth-child(4),.ob-row > :nth-child(5),
  .ob-th > :nth-child(1),.ob-th > :nth-child(3),.ob-th > :nth-child(4),.ob-th > :nth-child(5){display:none}
  .ob-th{font-size:10px}
  .ob-bar{padding:12px 14px;font-size:11.5px}
  .ob-page{height:min(calc(100svh - 260px),118vw);top:calc(50% - 40px)}
  .ob-end p{font-size:1.4rem;margin-bottom:12px;padding:0 16px}
  .ob-end .op-btns{flex-direction:column;align-items:stretch;max-width:320px;margin:0 auto}.ob-end .op-btn{min-height:50px}
}

@media (prefers-reduced-motion:reduce){html.op-js [data-op-hero] > *{animation:none}}

/* v10 homepage layer (preview only, 2 Nov): option B merged with "Real pages", every section below tied to scroll,
   the ai.stanbrinkman.com signal grid behind everything. Live design kept: light ground, navy type, one gold, rounded. */

/* the signal grid replaces the static dot grid */
#v10-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html.v10-js .bg-grid{display:none}
html.v10-js #op-b .op-pin{background:transparent}
html.v10-js #op-b{height:600vh}
@media (max-width:767px){html.v10-js #op-b{height:560vh}}

/* the second half of the scene: the heading, the two other real pages, the captions */
.ob-head2{position:absolute;left:0;right:0;top:max(86px,10.5svh);text-align:center;padding:0 16px;opacity:0;visibility:hidden;z-index:3}
.ob-head2 .ob-sub{margin:10px auto 0;font-size:15px;color:#5b6475;max-width:34rem}
.ob-slot{position:absolute;opacity:0;z-index:2;will-change:transform,opacity}
.ob-slot a{position:relative;display:block;width:100%;height:100%;border-radius:14px;overflow:hidden;box-shadow:0 36px 70px -36px rgba(20,36,63,.55);transition:box-shadow .4s}
.ob-slot a:hover{box-shadow:0 40px 80px -34px rgba(79,115,96,.6)}
.ob-slot img{display:block;width:100%;height:100%;object-fit:cover}
.ob-cap{position:absolute;margin:0;text-align:center;font-size:14.5px;font-weight:600;color:#14243f;line-height:1.35;opacity:0;z-index:2}
.ob-book .ob-pclip,.ob-slot .ob-pclip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.ob-band0{opacity:0}
.ob-slot .ob-band,.ob-band0{position:absolute;left:3%;right:3%;top:0;height:14%;border-radius:8px;opacity:0;
  background:linear-gradient(180deg,rgba(140,200,162,0) 0%,rgba(140,200,162,.32) 40%,rgba(140,200,162,.32) 60%,rgba(140,200,162,0) 100%);border-top:3px solid #4f7360}
@media (max-width:767px){.ob-cap{font-size:11px}.ob-head2 .ob-sub{font-size:13px}.ob-head2 h2{font-size:1.45rem}}

/* every block below starts hidden and is moved by scroll */
html.v10-js .v10-in,html.v10-js .v7-price{opacity:0}
.v10-ex-sec{padding:28px 0 8px}
.v10-ex-sec .v7-ex{margin-top:0}

/* section headings draw a short gold rule under themselves */
.v10-rule{position:relative}
.v10-rule::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:#4f7360;margin:14px auto 0;transform:scaleX(var(--rule,0));transform-origin:center}
.v7-who .v10-rule::after{margin-left:0;transform-origin:left;margin-top:10px}

/* Stan: the portrait opens from the bottom, the glow comes up with it */
.v7-portrait{box-shadow:0 40px 80px -46px rgba(79,115,96,calc(.25 + var(--glow,0) * .45)),0 24px 50px -36px rgba(20,36,63,.35)}
html.v10-js .v7-portrait{clip-path:inset(100% 0 0 0 round 32px)}
.v7-portrait img{will-change:transform}

/* words light up as they are read */
html.v10-js .w{color:rgba(20,36,63,.28);transition:color .35s ease}
html.v10-js .w.lit{color:inherit}
html.v10-js .v7-who p .w.lit{color:#2b3a52}
html.v10-js .v7-close h2 .w{color:color-mix(in srgb,rgba(255,255,255,.3) calc(var(--nv,0) * 100%),rgba(20,36,63,.25))}
html.v10-js .v7-close h2 .w.lit{color:color-mix(in srgb,#ffffff calc(var(--nv,0) * 100%),#14243f)}

/* price rows: the one being read is lit by a gold edge */
.v7-row{position:relative;overflow:hidden}
.v7-row::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:#4f7360;transform:scaleY(var(--act,0));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.v7-row.v10-act{box-shadow:0 26px 50px -30px rgba(79,115,96,.55);border-color:rgba(79,115,96,.45)}
.v7-row{transition:box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .5s}

/* after you pay: a gold line travels the steps; each number fills when it arrives */
ol.v10-steps{list-style:none;padding-left:0!important;position:relative}
ol.v10-steps > li{position:relative;padding-left:58px;min-height:40px;opacity:calc(.35 + var(--a,0) * .65);transform:translate3d(calc((1 - var(--a,0)) * 10px),0,0)}
.v10-num{position:absolute;left:0;top:-4px;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;
  color:rgba(79,115,96,calc(.55 + var(--a,0) * .45));background:rgba(79,115,96,calc(var(--a,0) * .14));border:1.5px solid rgba(79,115,96,calc(.3 + var(--a,0) * .7))}
.v10-track{position:absolute;left:18px;top:34px;bottom:24px;width:2px;background:rgba(20,36,63,.1);border-radius:2px;z-index:-1}
.v10-track i{position:absolute;left:0;right:0;top:0;height:100%;background:#4f7360;transform-origin:top;transform:scaleY(var(--fill,0))}
.v10-track b{position:absolute;left:50%;top:calc(var(--fill,0) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#4f7360;box-shadow:0 0 14px 4px rgba(163,194,171,.5);opacity:calc(var(--fill,0) * 5)}

/* FAQ: a gold edge draws in as each question arrives */
section details{position:relative;overflow:hidden}
section details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#4f7360;transform:scaleY(var(--gl,0));transform-origin:top}

/* the close: a navy panel rises through the card, the button lands and pulses */
.v10-close{position:relative;overflow:hidden;isolation:isolate}
.v10-close::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#1e3458,#14243f);z-index:-1;clip-path:inset(calc((1 - var(--nv,0)) * 100%) 0 0 0)}
html.v10-js .v10-close p{color:color-mix(in srgb,rgba(255,255,255,.8) calc(var(--nv,0) * 100%),#5b6475)!important}
html.v10-js .v10-close a{background:#a3c2ab!important;color:#14243f!important;opacity:0}
html.v10-js .v10-close a *{color:#14243f!important}
.v10-close.live a{animation:v10glow 2.4s ease-in-out infinite}
@keyframes v10glow{0%,100%{box-shadow:0 0 0 0 rgba(163,194,171,.0),0 14px 30px -16px rgba(79,115,96,.75)}50%{box-shadow:0 0 0 10px rgba(163,194,171,.12),0 14px 30px -16px rgba(79,115,96,.75)}}

@media (prefers-reduced-motion:reduce){
  html.v10-js .v10-in,html.v10-js .v10-close a{opacity:1}
  html.v10-js .v7-portrait{clip-path:none}
  html.v10-js .w{color:inherit}
  .v10-close.live a{animation:none}
}

/* ================= v11 (2 Nov): the reviewers' fixes, "yes all" ================= */
/* text never starts faded: only cards move */
html.v10-js .v10-in,html.v10-js .v7-price{opacity:1}
ol.v10-steps > li{opacity:1;transform:translate3d(calc((1 - var(--a,0)) * 8px),0,0)}
/* solid cards so the grid never shows through */
.v7-row,.v7-tally > div{background:#fff!important}
section details{background:#fff!important}
.v7-after > div{background:#fff!important}

/* the scene: the header sits below the nav pill, the card below the header */
.ob-head{top:88px}
.ob-card{top:176px;height:min(calc(100svh - 216px),560px)}
.ob-head2{top:88px}
.ob-page{z-index:3}.ob-card{z-index:4}.ob-slot{z-index:1}.ob-cap{z-index:5}
.ob-cap{font-size:15px}
@media (max-width:767px){
  html.op-js #op-b,html.v10-js #op-b{height:340vh}
  .ob-head{top:76px}
  .ob-checks{position:relative;height:26px;margin-top:8px}
  .ob-check{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 32px);font-size:14px}
  .ob-card{top:136px;height:calc(100svh - 136px - 96px)}
  .ob-head2{top:76px}
  .ob-row,.ob-th{grid-template-columns:minmax(0,1.5fr) 70px 46px 66px;align-items:center}
  .ob-row{height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}
  .ob-row .n{white-space:normal;line-height:1.25}
  .ob-row .pc-x{display:none}
  .ob-cap{font-size:13px}
}

/* worked examples: three city cards right under the pages */
.v10-ex-sec{padding:0 0 24px;position:relative;z-index:12}
.v11-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:900px;margin:0 auto}
.v11-case{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:20px;background:#fff;border:1px solid rgba(20,36,63,.09);
  box-shadow:0 18px 38px -30px rgba(20,36,63,.45);text-decoration:none;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}
.v11-case:hover{transform:translateY(-3px);border-color:rgba(79,115,96,.5);box-shadow:0 24px 44px -28px rgba(79,115,96,.55)}
.v11-case .k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#3e5e4d}
.v11-case b{font-size:19px;font-weight:800;letter-spacing:-.015em;color:#14243f}
.v11-case .d{font-size:13.5px;color:#5b6475}
.v11-case .l{margin-top:6px;font-size:14px;font-weight:600;color:#3e5e4d}
.v11-ex-all{margin:14px 0 0;font-size:14px}
.v11-ex-all a{color:#14243f;font-weight:600;text-decoration:underline;text-decoration-color:rgba(79,115,96,.7);text-underline-offset:4px}
@media (max-width:767px){.v11-cases{grid-template-columns:1fr;gap:10px}.v11-case{padding:14px 16px}}

/* Stan + the video beside him (desktop), the text under the video; one trust line */
.v7-who{grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;align-items:center}
.v7-who-r{display:flex;flex-direction:column;gap:22px}
.v7-who-r .v7-vsl{margin:0!important;max-width:none}
.v7-portrait{height:min(560px,64svh)!important}
.v11-trust{margin:14px 0 0;font-size:13px;line-height:1.5;color:#5b6475;font-weight:500}
.v7-call .v11-trust{text-align:center;max-width:36rem;margin:14px auto 0}
@media (max-width:767px){.v7-portrait{height:380px!important}.v7-who-r{gap:18px}}
/* the play button on the title card */
.v11-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.v11-play span{width:84px;height:84px;border-radius:50%;background:#4f7360;box-shadow:0 0 0 10px rgba(163,194,171,.22),0 18px 40px -12px rgba(20,36,63,.6);position:relative;animation:v11pulse 2.4s ease-in-out infinite}
.v11-play span::after{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
@keyframes v11pulse{0%,100%{box-shadow:0 0 0 10px rgba(163,194,171,.22),0 18px 40px -12px rgba(20,36,63,.6)}50%{box-shadow:0 0 0 16px rgba(163,194,171,.10),0 18px 40px -12px rgba(20,36,63,.6)}}
@media (max-width:767px){.v11-play span{width:68px;height:68px}.v11-play span::after{left:27px;top:21px;border-width:13px 0 13px 21px}}

/* figures: one strip of three on phones */
@media (max-width:767px){
  .v7-tally{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .v7-tally > div{padding:12px 6px!important;border-radius:16px}
  .v7-t-n{font-size:22px!important}.v7-t-l{font-size:11px!important;line-height:1.3}
}

/* the Custom Report at its launch price */
.v11-price-note{margin:-4px 0 0;font-size:12.5px;color:#5b6475;font-weight:500;text-align:right}
.v7-row-a.v11-gold{background:#4f7360;border-color:#4f7360;color:#fff}
.v7-row-a.v11-gold:hover{background:#3e5e4d;border-color:#3e5e4d}
@media (max-width:767px){.v11-price-note{text-align:left}}

/* the close: a solid navy card from the start (readable at every frame); it rises, its ring glows, the button pulses */
.v10-close::before{display:none}
.v10-close{background:linear-gradient(160deg,#1e3458,#14243f)!important;border-color:rgba(79,115,96,.4)!important;
  box-shadow:0 0 0 calc(var(--ring,0) * 8px) rgba(163,194,171,.12),0 40px 80px -40px rgba(20,36,63,.6)}
html.v10-js .v10-close h2{color:#fff!important}
html.v10-js .v10-close p{color:rgba(255,255,255,.8)!important}
html.v10-js .v10-close a{opacity:1}
@media (max-width:767px){.ob-head .op-kick{font-size:10.5px;white-space:nowrap;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;padding:0 10px}}
@media (max-width:767px){.v7-who{grid-template-columns:1fr!important;gap:22px!important}.v7-portrait{max-width:320px;width:100%;margin:0 auto}}

/* ================= v12 (2 Nov): the report part, rebuilt as real, sharp pages with callouts ================= */
html.op-js #op-b,html.v10-js #op-b{height:700vh}
@media (max-width:767px){html.op-js #op-b,html.v10-js #op-b{height:440vh}}
/* the workbook: 7 columns (size dropped) */
.ob-row,.ob-th{grid-template-columns:44px minmax(0,1.7fr) minmax(0,1.3fr) 56px 112px 140px 112px!important}
@media (max-width:767px){
  .ob-row,.ob-th{grid-template-columns:minmax(0,1.5fr) 74px 50px 64px!important}
  .ob-row > :nth-child(5),.ob-th > :nth-child(5){display:block!important}
  .ob-row > :nth-child(1),.ob-row > :nth-child(3),.ob-row > :nth-child(4),.ob-th > :nth-child(1),.ob-th > :nth-child(3),.ob-th > :nth-child(4){display:none!important}
}
.ob-five .r{font-weight:800;color:#3e5e4d}

/* stage + callouts */
.an{position:absolute;inset:0;z-index:3;pointer-events:none;--pw:min(540px,calc((100svh - 236px) * .72),44vw)}
.an-stage{position:absolute;top:184px;left:calc(50% - (var(--pw) + 420px) / 2);width:var(--pw);height:calc(var(--pw) / .72);perspective:2400px;visibility:hidden;font-size:calc(var(--pw) / 34)}
.an-book{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform-origin:22% 44%}
.an-book::before,.an-book::after{content:"";position:absolute;inset:0;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(20,36,63,.06)}
.an-book::before{transform:translate(9px,9px)}.an-book::after{transform:translate(4.5px,4.5px)}
.pp{position:absolute;inset:0;background:#fff;border-radius:1em;overflow:hidden;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;z-index:1;
  box-shadow:0 50px 90px -46px rgba(20,36,63,.6),0 0 0 1px rgba(20,36,63,.07);color:#14243f}
.pp::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,36,63,0) 30%,rgba(20,36,63,.28));opacity:var(--shade,0)}
.pp-ban{background:#14243f;color:#fff;text-align:center;font-size:.62em;font-weight:600;padding:.6em 1em;border-bottom:2px solid #4f7360}
.pp-in{padding:1.3em 1.5em 1.2em;height:calc(100% - 2.2em);display:flex;flex-direction:column;position:relative}
.pp-k{margin:0;font-size:.6em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3e5e4d}
.pp-h{margin:.45em 0 .3em;font-size:1.55em;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#14243f}
.pp-h span{color:#3e5e4d}
.pp-p{margin:0 0 .7em;font-size:.74em;line-height:1.45;color:#5b6475}
/* the Golden 5 */
.g5{display:flex;flex-direction:column;gap:.5em}
.g5 > div{position:relative;display:grid;grid-template-columns:2.3em minmax(0,1fr) 4.9em 4.9em;grid-template-rows:auto auto;gap:.15em .7em;align-items:center;
  padding:.65em .8em;border-radius:.75em;background:#f6f7f9;border:1px solid rgba(20,36,63,.07);transition:box-shadow .45s,background-color .45s}
.g5 > .g5-top{background:#f9fbf9;border-color:rgba(79,115,96,.55)}
.g5 > div.on{box-shadow:0 0 0 2px #4f7360,0 14px 30px -18px rgba(79,115,96,.8)}
.g5-k{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:2.1em;height:2.1em;border-radius:.55em;background:#14243f;color:#fff;font-weight:800;font-size:.82em}
.g5-m b{display:block;font-size:.9em;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.g5-m span{display:block;font-size:.55em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#3e5e4d;margin-top:.2em}
.g5-s{text-align:right;line-height:1.15}.g5-s b{display:block;font-size:.95em;font-weight:800;font-variant-numeric:tabular-nums}.g5-s span{display:block;font-size:.5em;color:#5b6475}
.g5-l{grid-column:2/5;justify-self:start;position:relative;font-size:.55em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#324d3f;background:#e5ede7;border-radius:999px;padding:.35em .9em}
/* the unit page */
.u-hd{display:flex;justify-content:space-between;align-items:center;margin-top:.8em}
.u-rk{font-size:.62em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5b6475}
.u-tag{font-size:.55em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:#4f7360;color:#fff;border-radius:999px;padding:.35em .9em}
.u-n{color:#3e5e4d!important;margin-top:.2em!important}
.u-sub{margin:0 0 .8em;font-size:.6em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3e5e4d;border-bottom:2px solid #4f7360;padding-bottom:.7em}
.u-cols{display:grid;grid-template-columns:1fr 1fr;gap:.8em}
.u-box{border:1px solid rgba(20,36,63,.08);border-radius:.75em;padding:.75em .8em;background:#fbfbfc}
.u-bt{margin:0 0 .5em;font-size:.58em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#324d3f}
.u-l{position:relative;display:grid;grid-template-columns:1fr auto;gap:.1em .5em;padding:.45em .4em;border-top:1px solid rgba(20,36,63,.06);border-radius:.45em;transition:background-color .45s,box-shadow .45s}
.u-l span{font-size:.66em;color:#5b6475}.u-l b{font-size:.74em;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.u-l em{grid-column:1/3;font-style:normal;font-size:.52em;color:#5b6475;text-align:right}
.u-l.on{background:rgba(163,194,171,.18);box-shadow:0 0 0 2px #4f7360}
.u-link{margin-top:auto;padding-top:.8em;font-size:.6em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#324d3f}
.u-link span{text-transform:none;font-weight:500;color:#5b6475;margin-left:.6em}
/* the spreadsheet */
.pp-sh .pp-in{padding-bottom:.8em}
.sh{flex:1;display:flex;flex-direction:column;min-height:0;border:1px solid rgba(20,36,63,.09);border-radius:.6em;overflow:hidden;margin-top:.6em}
.sh-h,.sh-rows > div{display:grid;grid-template-columns:1.7em minmax(0,1.5fr) minmax(0,1.1fr) 2.7em 4.2em 3.4em 3.8em 6.6em;gap:.5em;align-items:center;padding:.45em .7em;font-size:.56em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-h{background:#f5f7f5;font-weight:800;color:#5b6475;text-transform:uppercase;letter-spacing:.05em}
.sh-h > *,.sh-rows > div > *{overflow:hidden;text-overflow:ellipsis}
.sh-body{flex:1;overflow:hidden;position:relative}
.sh-rows > div:nth-child(even){background:#fafafa}
.sh-rows > div{border-top:1px solid rgba(20,36,63,.05)}
.sh-rows b{font-weight:700}
.sh-l{color:#324d3f;text-decoration:underline}
.sh-rows > .sh-g{background:#f2f6f3!important;box-shadow:inset 3px 0 0 #4f7360}
/* numbered markers on the page */
.an-mk{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:#4f7360;color:#fff;font-style:normal;font-weight:800;font-size:.7em;
  box-shadow:0 0 0 .25em rgba(163,194,171,.25);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.g5-top > .an-mk{left:-.55em;top:-.55em}
.g5-l > .an-mk{right:-1.9em;top:-.25em;font-size:1.25em}
.u-l > .an-mk{left:-1.1em;top:.35em}
.pp-sh .pp-in > .an-mk{right:1.4em;top:1.3em}
.an-mk.on{transform:scale(1.25);box-shadow:0 0 0 .45em rgba(163,194,171,.35)}
/* callouts (desktop: a list beside the page; the active one is lifted) */
.an-calls{position:absolute;list-style:none;margin:0;padding:0;width:372px;left:calc(50% - (var(--pw) + 420px) / 2 + var(--pw) + 48px);top:calc(184px + var(--pw) / .72 / 2);transform:translateY(-50%);opacity:0;pointer-events:none;display:flex;flex-direction:column;gap:6px}
.an-calls li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:16px;border:1px solid transparent;transition:background-color .45s,box-shadow .45s,border-color .45s,transform .45s cubic-bezier(.22,1,.36,1)}
.an-calls li i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid #4f7360;color:#3e5e4d;font-style:normal;font-weight:800;font-size:14px;transition:background-color .45s,color .45s}
.an-calls li b{display:block;font-size:16px;font-weight:800;color:#14243f;letter-spacing:-.01em;line-height:1.3}
.an-calls li span{display:block;font-size:14px;line-height:1.45;color:#5b6475;margin-top:2px}
.an-calls li.done i{background:rgba(79,115,96,.18)}
.an-calls li.on{background:#fff;border-color:rgba(79,115,96,.45);box-shadow:0 22px 44px -30px rgba(20,36,63,.5);transform:translateX(-6px)}
.an-calls li.on i{background:#4f7360;color:#fff}
@media (max-width:1100px) and (min-width:768px){.an{--pw:min(460px,calc((100svh - 236px) * .72),42vw)}.an-calls{width:300px}.an-calls li span{font-size:13px}}
@media (max-width:767px){
  .ob-head2{top:76px}.ob-head2 .ob-sub{display:none}.ob-head2 .kicker{margin-bottom:6px!important}
  .an{--pw:min(calc(100vw - 32px),calc((100svh - 330px) * .72))}
  .an-stage{top:146px;left:calc(50% - var(--pw) / 2)}
  .an-calls{left:16px;right:16px;width:auto;top:calc(146px + var(--pw) / .72 + 12px);transform:none;height:86px;display:block}
  .an-calls li{position:absolute;inset:0;opacity:0;transform:translateY(8px);padding:10px 12px;background:#fff;border-color:rgba(79,115,96,.45)}
  .an-calls li.on{opacity:1;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1)}
  .an-calls li b{font-size:15px}.an-calls li span{font-size:13px}
  .sh-h,.sh-rows > div{grid-template-columns:1.6em minmax(0,1.6fr) 4.6em 3.6em 4.2em;font-size:.68em}
  .sh-h > :nth-child(3),.sh-h > :nth-child(4),.sh-h > :nth-child(8),.sh-rows > div > :nth-child(3),.sh-rows > div > :nth-child(4),.sh-rows > div > :nth-child(8){display:none}
}

/* v12b: fuller pages, a gentler zoom that stays clear of the heading, callouts always above the page */
.an-stage{z-index:2}.an-calls{z-index:4}
.an-book{transform-origin:12% 18%}
.g5{flex:1;justify-content:space-evenly;gap:.4em}
.g5 > div{padding:.8em .85em}
.g5-m b{font-size:.98em}
.pp-ft{margin-top:auto;padding-top:.7em;display:flex;justify-content:space-between;font-size:.52em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5b6475}
.u-ph{position:relative;margin:.7em 0 .2em;border-radius:.8em;overflow:hidden;aspect-ratio:1134/560;background:#d9dde3}
.u-ph img{display:block;width:100%;height:100%;object-fit:cover}
.u-ph b{position:absolute;left:.6em;top:.6em;background:#14243f;color:#fff;font-size:.8em;font-weight:800;border-radius:.45em;padding:.25em .5em}
.u-ph span{position:absolute;right:.6em;bottom:.6em;background:rgba(20,36,63,.85);color:#fff;font-size:.48em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:.4em;padding:.35em .6em}
.u-link{margin-top:.6em!important}
@media (max-width:767px){.u-ph{aspect-ratio:1134/420}}
@media (max-width:767px){
  .an{--pw:min(calc(100vw - 32px),calc((100svh - 250px) * .72))}
  .an-stage{font-size:calc(var(--pw) / 28)}
  .an-calls{top:min(calc(146px + var(--pw) / .72 + 12px),calc(100svh - 184px));z-index:4}
  .an-calls li{box-shadow:0 18px 36px -24px rgba(20,36,63,.55)}
}
@media (max-width:767px){
  .g5 > div{grid-template-columns:2.3em minmax(0,1fr) 5.2em;padding:.6em .7em}
  .g5 > div > .g5-s + .g5-s{display:none}
  .g5 > div:not(.g5-top) .g5-l{display:none}
  .g5{gap:.35em}
}
.an-stage{visibility:visible;opacity:.01;will-change:transform,opacity}

/* ================= v13 (2 Nov): one continuous hand-off, a checklist that stays lit, a livelier lower half ================= */
/* the five rows in flight (copies that live outside the workbook card, so nothing clips them) */
.ob-fly{position:absolute;z-index:6;visibility:hidden;transform-origin:0 0;margin:0;border-radius:14px;background:#fff;border:1.5px solid rgba(79,115,96,.75);
  box-shadow:0 18px 36px -24px rgba(79,115,96,.8);overflow:hidden;will-change:transform,opacity;pointer-events:none}
.ob-fly .ob-row{border:0;height:100%}
.ob-fly .r{color:#3e5e4d;font-weight:800}
/* workbook checks: lit and filled once their sweep has run */
.ob-check.done{color:#14243f}
.ob-check.done b::after{content:" \2713";color:#4f7360}
@media (max-width:767px){
  .ob-checks{display:flex!important;justify-content:center;gap:14px;height:auto!important;margin-top:8px!important;position:static!important}
  .ob-check{position:relative!important;inset:auto!important;width:auto!important;opacity:1!important;transform:none!important;font-size:0!important;padding-bottom:7px!important}
  .ob-check b{font-size:12px;margin-right:4px}
  .ob-check::after{content:attr(data-s);font-size:12px;font-weight:700}
}
/* the report checklist: unlit = quiet but readable; lit = gold check, full contrast; current = lifted */
.an-calls li{transform:none}
.an-calls li b{color:#5b6475}
.an-calls li i{border-color:rgba(79,115,96,.45);color:#5f7a6b}
.an-calls li.lit b{color:#14243f}
.an-calls li.lit i{background:#4f7360;border-color:#4f7360;color:#fff;font-size:0}
.an-calls li.lit i::after{content:"\2713";font-size:15px;font-weight:800}
.an-calls li.cur{background:#fff;border-color:rgba(79,115,96,.45);box-shadow:0 22px 44px -30px rgba(20,36,63,.5);transform:translateX(-6px)}
.an-calls li.on{background:transparent;box-shadow:none;transform:none}
.an-mk{background:#fff;color:#4f7360;border:2px solid #4f7360;box-shadow:none}
.an-mk.on{background:#4f7360;color:#fff;transform:none;box-shadow:0 0 0 .22em rgba(163,194,171,.22)}
.an-mk.cur{transform:scale(1.25);box-shadow:0 0 0 .45em rgba(163,194,171,.35)}
.an-dots{display:none}
@media (max-width:767px){
  .an-calls li{opacity:0!important}
  .an-calls li.cur{opacity:1!important;transform:none!important}
  .an-calls{height:96px!important}
  .an-dots{display:flex;gap:6px;position:absolute;left:0;right:0;bottom:-16px;justify-content:center}
  .an-dots i{width:22px;height:4px;border-radius:4px;background:rgba(20,36,63,.14);transition:background-color .35s}
  .an-dots i.lit{background:#4f7360}
}
/* prices: the gold edge runs down each row as it crosses the screen */
.v7-row::before{transform-origin:top center;transition:none;top:14px;bottom:14px;width:5px}
.v7-row.v10-act{box-shadow:0 18px 40px -32px rgba(20,36,63,.4);border-color:rgba(20,36,63,.08)}
/* after you pay: a thicker, glowing line; numbers grow as it reaches them */
.v10-track{width:3px;left:17.5px}
.v10-track b{width:14px;height:14px;margin:-7px 0 0 -7px;box-shadow:0 0 18px 6px rgba(163,194,171,.55)}
.v10-num{transform:scale(calc(.82 + var(--a,0) * .18));transform-origin:center}
/* FAQ gold edge, wider */
section details::before{width:4px}
/* the close: the navy wipe carries the text; no ring needed */
.v10-close{box-shadow:0 40px 80px -40px rgba(20,36,63,.6)!important}
html.v10-js .v10-close a{opacity:0}

/* ================= v14 (2 Nov, Stan on his phone): no cut text, Stan free-standing with a glow, smoother phones ================= */
/* Stan: the cutout on its own, no card, full head with headroom, a soft animated glow behind him (ai.stanbrinkman.com .core glow) */
.v7-portrait{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;clip-path:none!important;
  height:auto!important;display:flex;justify-content:center;align-items:flex-end;padding-top:28px;position:relative;isolation:isolate}
.v7-portrait img{position:relative!important;left:auto!important;bottom:auto!important;height:auto!important;width:min(100%,400px)!important;max-width:100%!important;
  -webkit-mask-image:linear-gradient(#000 80%,transparent 99%);mask-image:linear-gradient(#000 80%,transparent 99%)}
.v7-portrait::before,.v7-portrait::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.v7-portrait::before{left:4%;right:4%;top:4%;bottom:14%;background:radial-gradient(closest-side,rgba(140,200,162,.55),rgba(140,200,162,.20) 55%,rgba(140,200,162,0) 78%);
  filter:blur(6px);opacity:calc(.35 + var(--glow,0) * .65);animation:v14breathe 7s ease-in-out infinite}
.v7-portrait::after{left:10%;right:10%;top:10%;bottom:22%;background:conic-gradient(from 0deg,rgba(110,178,138,0),rgba(110,178,138,.35),rgba(30,52,88,.18),rgba(110,178,138,0) 70%);
  filter:blur(26px);opacity:calc(var(--glow,0) * .8);animation:v14spin 18s linear infinite}
@keyframes v14breathe{0%,100%{transform:scale(.94)}50%{transform:scale(1.04)}}
@keyframes v14spin{to{transform:rotate(360deg)}}
@media (max-width:767px){.v7-portrait{padding-top:20px;max-width:none!important;width:100%!important}.v7-portrait img{width:min(78%,300px)!important}}
@media (prefers-reduced-motion:reduce){.v7-portrait::before,.v7-portrait::after{animation:none}}

/* the workbook on phones: wider number columns, smaller type, nothing ellipsised, headers may wrap */
@media (max-width:767px){
  .ob-row,.ob-th{grid-template-columns:minmax(0,1fr) 62px 40px 54px!important;gap:0 8px!important;padding:0 12px!important;font-size:11.5px!important}
  .ob-th{font-size:9.5px!important;white-space:normal!important;line-height:1.15;height:auto!important;min-height:34px;padding-top:6px!important;padding-bottom:6px!important}
  .ob-row > *,.ob-th > *{text-overflow:clip!important}
  .ob-five .ob-row{height:auto!important;min-height:40px}
  .ob-fly .ob-row{height:100%!important}
}
@media (max-width:767px) and (max-height:700px){
  .ob-five > div{margin:3px 0!important}.ob-five .ob-row{min-height:32px!important;padding-top:2px!important;padding-bottom:2px!important}
  .ob-row{min-height:34px!important}
}
/* the spreadsheet page: headers wrap instead of being cut */
.sh-h{white-space:normal!important;line-height:1.15;align-items:end}
.sh-h > *{text-overflow:clip!important}
.ob-row .c-pc,.ob-row .c-rent,.ob-th .c-pc,.ob-th .c-rent{overflow:visible!important}
@media (max-width:767px){.sh-h,.sh-rows > div{grid-template-columns:1.6em minmax(0,1.3fr) 4.6em 4.8em 4.4em!important}}
@media (max-width:767px){.sh-h > *{overflow-wrap:anywhere}.sh-h{font-size:.6em!important;letter-spacing:.02em!important}}
.v7-portrait::before{background:radial-gradient(closest-side,rgba(140,200,162,.75),rgba(140,200,162,.28) 55%,rgba(140,200,162,0) 80%)!important;top:2%!important;bottom:10%!important;left:0!important;right:0!important}
.v7-portrait::after{opacity:calc(var(--glow,0) * 1)!important;filter:blur(22px)!important}

/* ================= v15 (2 Nov, Stan: "everything is almost touching ... my image is too big ... the bottom half still doesnt ANIMATE") ================= */
html.v10-js .v15-in{opacity:0}
.v15-in{will-change:transform,opacity}
.v7-close > div{transform-origin:center}

/* spacing system: section padding 64 phone / 96 desktop; card gaps 20 / 28; text >= 12px from a card edge */
section.py-12{padding-top:96px!important;padding-bottom:96px!important}
#services{padding-top:96px!important;padding-bottom:96px!important}
.v10-ex-sec{padding-bottom:64px!important}
.v11-cases{gap:28px!important}
.v7-rows{gap:28px!important}
.v7-tally{gap:28px!important;margin-top:64px!important}
section .space-y-2\.5 > * + *{margin-top:20px!important}
.v7-after{margin-top:56px!important}
.v7-call{margin-top:40px!important}
.v7-close{margin-top:64px!important}
.v7-who-r{gap:32px!important}
.v7-who{gap:64px!important}
#services .text-center,section .text-center.mb-6{margin-bottom:48px!important}
.v11-trust{margin-top:20px!important}
@media (max-width:767px){
  section.py-12,#services{padding-top:64px!important;padding-bottom:64px!important}
  .v10-ex-sec{padding-bottom:48px!important}
  .v11-cases,.v7-rows{gap:20px!important}
  .v7-tally{gap:12px!important;margin-top:48px!important}
  .v7-tally > div{padding:16px 12px!important}
  .v7-who{gap:40px!important}
  .v7-after{margin-top:40px!important}
  .v7-row{padding:24px 20px!important}
  #services .text-center,section .text-center.mb-6{margin-bottom:36px!important}
}

/* Stan smaller: ~60% of before. Desktop <= 54% of the screen height, phone <= 42%, always the full head with headroom */
.v7-portrait{padding-top:48px!important;padding-bottom:8px}
.v7-portrait img{width:auto!important;height:min(54svh,420px)!important;max-width:100%!important}
@media (max-width:767px){.v7-portrait{padding-top:40px!important}.v7-portrait img{height:min(42svh,300px)!important;width:auto!important}}
/* the old soft ring (an ellipse, blurred) is replaced by a true circle */
.v7-portrait::after{display:none!important}
.v7-portrait::before{left:50%!important;right:auto!important;top:46%!important;bottom:auto!important;width:min(118%,520px);aspect-ratio:1;transform:translate(-50%,-50%);
  animation:v15breathe 7s ease-in-out infinite!important}
@keyframes v15breathe{0%,100%{transform:translate(-50%,-50%) scale(.92)}50%{transform:translate(-50%,-50%) scale(1.04)}}
.v15-ring{position:absolute;z-index:-1;left:50%;top:44%;width:min(108%,460px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.v15-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v15-ring circle{fill:none}
.v15-ring .rg-base{stroke:rgba(79,115,96,.22);stroke-width:1;stroke-dasharray:2 5}
.v15-ring .rg-arc{stroke:#4f7360;stroke-width:2;stroke-linecap:round;stroke-dasharray:28 72;stroke-dashoffset:100;filter:drop-shadow(0 0 4px rgba(163,194,171,.6))}
.v15-ring i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#4f7360;box-shadow:0 0 0 4px rgba(163,194,171,.22),0 0 14px 2px rgba(163,194,171,.55);opacity:var(--glow,0)}
.v15-ring .d1{left:50%;top:2%}
.v15-ring .d2{left:93.5%;top:73%}
.v15-ring .d3{left:6.5%;top:73%}
@media (max-width:767px){.v15-ring{width:min(96vw,360px)}}

/* prices pop; steps pop as the line reaches them */
.v7-price{display:inline-block;transform-origin:right center}
@media (max-width:767px){.v7-price{transform-origin:left center}}
.v10-num{transform:scale(calc(.55 + var(--pop,0) * .45))!important}
ol.v10-steps > li{opacity:calc(.2 + var(--a,0) * .8)!important;transform:translate3d(calc((1 - var(--a,0)) * 40px),0,0)!important}
.v10-track{top:30px!important}

/* the close: the navy card is shown only through the wipe */
.v10-close{will-change:clip-path}

/* occlusion: nothing rests under the nav pill or the phone call bar inside the pinned scene */
@media (max-width:767px){.an-calls{top:min(calc(146px + var(--pw) / .72 + 16px),calc(100svh - 196px))!important}}
@media (prefers-reduced-motion:reduce){html.v10-js .v15-in{opacity:1}.v7-portrait::before{animation:none!important}}
/* entries that come in from the side never widen the page (clip, unlike hidden, keeps the sticky scenes working) */
html,body{overflow-x:clip}
.v10-num{background:#fff!important;box-shadow:inset 0 0 0 40px rgba(79,115,96,calc(var(--a,0) * .16))}

/* ================= v16 (2 Nov): two independent reviews (motion designer + phone user) applied ================= */
/* Stan: centred (a leftover translateX(-50%) shifted him 127px left), smaller, no dead space above */
.v7-portrait img{transform:none!important;margin:0 auto}
.v7-portrait{padding-top:24px!important;justify-content:center!important}
.v7-portrait img{height:min(48svh,380px)!important}
@media (max-width:767px){.v7-portrait img{height:min(34svh,250px)!important}.v7-portrait{padding-top:28px!important}}
/* the ring: a true circle round his head and shoulders, fully drawn, slow idle spin + scroll turn */
.v15-ring{top:40%!important;width:min(100%,420px)!important;transform:translate(-50%,-50%)!important}
@media (max-width:767px){.v15-ring{width:min(78vw,300px)!important;top:42%!important}}
.rg-spin{position:absolute;inset:0;transform:rotate(var(--rot,0deg))}
.rg-spin svg{animation:v16spin 40s linear infinite}
@keyframes v16spin{to{transform:rotate(360deg)}}
.v15-ring .rg-base{stroke:rgba(79,115,96,.42)!important;stroke-width:1.2!important;stroke-dasharray:none!important}
.v15-ring .rg-arc{stroke-dashoffset:0!important;stroke-dasharray:0 100;stroke-width:2.6!important}
.v15-ring i{opacity:calc(.3 + var(--glow,0) * .7)}
.v7-portrait::before{top:40%!important;width:min(92%,400px)!important}
@media (prefers-reduced-motion:reduce){.rg-spin svg{animation:none}}

/* spacing: no stacked double paddings (they made dead bands) */
.v10-ex-sec{padding-top:96px!important;padding-bottom:0!important}
section:has(details){padding-top:24px!important}
@media (max-width:767px){.v10-ex-sec{padding-top:72px!important}section:has(details){padding-top:16px!important}}
.v10-ex-sec .kicker{color:#3e5e4d!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase}
/* the "Watch · 60 seconds" label belongs to the video, no grey slab */
.v7-vsl,.v7-vsl > div{background:none!important}
/* stats: equal tiles, aligned */
.v7-tally{align-items:stretch!important}
.v7-tally > div{display:flex;flex-direction:column;justify-content:center}
/* price buttons: the label may wrap; never cut */
.v7-row-a{white-space:normal!important;text-align:center;line-height:1.25;padding-top:10px!important;padding-bottom:10px!important}
@media (max-width:767px){.v7-row-a{width:100%!important;justify-content:center}}
/* gold edges stay inside their rounded cards */
.v7-row,section details{overflow:hidden;isolation:isolate}
/* the close button glow follows the rounded button */
.v10-close a{border-radius:16px!important}
/* workbook checks on phones: one row, all three visible */
@media (max-width:767px){.ob-checks{flex-wrap:nowrap!important;gap:10px!important}.ob-check::after{font-size:11px!important}.ob-check b{font-size:11px!important}.ob-card{top:146px!important}}
/* short phones: the report callout is a slim strip (title only) so it covers less of the page */
@media (max-width:767px) and (max-height:700px){.an-calls{height:54px!important}.an-calls li span{display:none}.an-calls li{padding:8px 10px!important}.an-calls li b{font-size:14px!important}}
/* the chat bubble steps aside over the hero's first screen and the pinned report scene */
#bd-chat-button{transition:opacity .4s,transform .4s}
html.v16-chatq #bd-chat-button{opacity:0!important;transform:scale(.8)!important;pointer-events:none!important}
html.v10-js .v7-close > div a{opacity:0}

/* ================= v17 (2 Nov): three pinned, scroll-scrubbed scenes in the lower half ================= */
.v17-scene{position:relative}
.v17-scene.live > .v17-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:84px 0 24px;box-sizing:border-box}
html.v10-js .v17-s1.live{height:200vh}
html.v10-js .v17-s2.live{height:240vh}
html.v10-js .v17-s3.live{height:160vh}
@media (max-width:767px){
  html.v10-js .v17-s1.live{height:220vh}
  html.v10-js .v17-s2.live{height:270vh}
  html.v10-js .v17-s3.live{height:180vh}
  .v17-scene.live > .v17-pin{padding:78px 0 84px}
}
/* the section that holds a scene gives its padding to the scene */
section:has(> .v17-scene),section:has(> div > .v17-scene){padding-top:0!important;padding-bottom:0!important}
#services:has(.v17-scene){padding-top:24px!important;padding-bottom:24px!important}

/* 1. Stan: portrait left, the right column is one grid cell where the bio + figures and the video take turns */
.v17-s1.live .v7-who{align-items:center}
.v17-s1.live .v7-who-r{display:grid!important;grid-template-rows:auto auto;gap:28px!important;align-content:center}
.v17-s1.live .v17-l1{grid-area:1/1}
.v17-s1.live .v17-l2{grid-area:2/1;margin:0!important}
.v17-s1.live .v17-l3{grid-area:1/1/3/2;align-self:center;margin:0!important;max-width:none!important}
.v17-s1.live .v17-layer{will-change:transform,opacity}
@media (max-width:767px){
  .v17-s1.live .v7-who{display:grid!important;grid-template-columns:1fr!important;gap:0!important}
  .v17-s1.live .v7-portrait{grid-area:1/1;align-self:center}
  .v17-s1.live .v7-who-r{grid-area:1/1;display:grid!important;grid-template-rows:auto!important;align-self:center}
  .v17-s1.live .v17-l1,.v17-s1.live .v17-l2,.v17-s1.live .v17-l3{grid-area:1/1!important;align-self:center}
  .v17-s1.live .v7-who-txt p{font-size:15.5px!important}
}

/* 2. the offers: one grid cell; the active offer centre stage, the earlier ones stacked behind it */
.v17-s2.live .v7-rows{display:grid!important;gap:0!important;margin-top:8px}
.v17-s2.live .v7-row{grid-area:1/1;transform-origin:center top;will-change:transform,opacity}
.v17-s2.live .text-center{margin-bottom:28px!important}
.v17-s2.live .v7-row:nth-child(2){box-shadow:0 0 0 calc(var(--hero,0) * 3px) rgba(79,115,96,.9),0 30px 70px -30px rgba(79,115,96,calc(var(--hero,0) * .75))!important}
.v17-s2.live .v7-row:nth-child(2) .v7-price{color:#3e5e4d}
.v17-s2.live .v7-row-a.v11-gold{box-shadow:0 0 0 calc(var(--hero,0) * 6px) rgba(163,194,171,.25)}
@media (max-width:767px){.v17-s2.live .text-center{margin-bottom:18px!important}.v17-s2.live .text-center h2{font-size:1.45rem!important}}

/* 3. after you pay: the card and the call, centred */
.v17-s3.live .v7-after{margin-top:0!important}
.v17-s3.live .v7-call{margin-top:32px!important}
.v17-s2.live .v7-row{align-self:start}
/* compact callouts on short screens: only the current one shows its detail line */
.an-calls.an-compact li span{display:none}
.an-calls.an-compact li.cur span{display:block}
.an-calls.an-compact{gap:2px!important}
.an-calls.an-compact li{padding:8px 12px}
/* the closing card can hold on screen before the page ends */
section:has(.v7-close){padding-bottom:180px!important}
@media (max-width:767px){section:has(.v7-close){padding-bottom:210px!important}}
/* trim, phones: the figures sit under the video (rows 1 and 2), the bio spans both */
@media (max-width:767px){html[data-motion="trim"] .v17-s1.live .v7-who-r{grid-template-rows:auto auto!important;row-gap:16px}html[data-motion="trim"] .v17-s1.live .v17-l3{grid-area:1/1!important}html[data-motion="trim"] .v17-s1.live .v17-l2{grid-area:2/1!important}html[data-motion="trim"] .v17-s1.live .v17-l1{grid-area:1/1/3/2!important}}
/* trim, phones: the current group of callouts as a short list of titles */
@media (max-width:767px){html[data-motion="trim"] .an-calls{height:auto!important;display:flex!important;flex-direction:column;gap:4px}html[data-motion="trim"] .an-calls li{position:relative!important;inset:auto!important;display:none!important;opacity:1!important;transform:none!important;padding:6px 10px!important}html[data-motion="trim"] .an-calls li.grp{display:grid!important}html[data-motion="trim"] .an-calls li span{display:none!important}html[data-motion="trim"] .an-calls li b{font-size:14px!important}}
/* trim, short phones: slimmer callout rows so the report page keeps its size */
@media (max-width:767px) and (max-height:700px){html[data-motion="trim"] .an-calls li{grid-template-columns:24px 1fr!important;gap:8px!important;padding:5px 10px!important}html[data-motion="trim"] .an-calls li i{width:22px;height:22px}html[data-motion="trim"] .an-calls li.lit i::after{font-size:12px}html[data-motion="trim"] .an-calls li b{font-size:13.5px!important}}
/* spreadsheet page header: labels wrap onto two lines instead of being cut off */
.sh-h{white-space:normal!important;align-items:end!important;line-height:1.2}
.sh-h > *{text-overflow:clip!important;overflow-wrap:normal}
/* sage on navy (5 Nov): the closing card turns navy, so its button takes the light sage with navy text */
.v7-close a.bg-blue-600{background:#a3c2ab!important;color:#14243f!important;box-shadow:0 16px 36px -18px rgba(140,200,162,.65)}
.v7-close a.bg-blue-600 *{color:#14243f!important}
.v7-close a.bg-blue-600:hover{background:#b9d4c1!important}

/* ===== report story v2 (5 Nov, Stan: "static and unnatural"): native scroll. The text steps scroll; a sticky frame shows
   the part each step talks about (workbook -> three checks -> the five -> their pages -> the spreadsheet). Nothing freezes. */
#op-b.sb2{position:relative;z-index:10;padding:72px 0 8px}
.sb2-top{text-align:center;max-width:40rem;margin:0 auto;padding:0 16px}
.sb2-top .ob-sub{margin:10px auto 0;font-size:15px;color:#5b6475;max-width:34rem}
.sb2-grid{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:stretch}
.sb2-vis{grid-column:2;grid-row:1}
.sb2-steps{grid-column:1;grid-row:1;padding:14vh 0 16vh}
.sb2-frame{--fh:min(600px,calc(100vh - 170px));position:sticky;top:calc(50vh - var(--fh) / 2 + 34px);height:var(--fh)}
.sb2-step{min-height:66vh;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 24px;border-left:2px solid rgba(20,36,63,.08);transition:border-color .4s}
.sb2-step.on{border-left-color:#4f7360}
.sb2-k{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3e5e4d}
.sb2-k b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#f2f6f3;border:1.5px solid rgba(79,115,96,.45);color:#3e5e4d;font-size:11px;letter-spacing:0;transition:background .35s,color .35s}
.sb2-step.on .sb2-k b{background:#4f7360;border-color:#4f7360;color:#fff}
.sb2-step h3{margin:0 0 12px;font-size:clamp(25px,2.5vw,34px);line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#14243f;text-wrap:balance}
.sb2-step p,.sb2-step li{margin:0;font-size:16.5px;line-height:1.55;color:#4b5568}
.sb2-step ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sb2-step li{position:relative;padding-left:28px}
.sb2-step li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;background:#4f7360 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.sb2-step li b{color:#14243f}
.sb2-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sb2-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:16px;font-weight:700;text-decoration:none}
.sb2-cta .sb2-ghost{background:#fff;color:#14243f;border:1px solid rgba(20,36,63,.16)}
.sb2-cta .sb2-ghost:hover{border-color:rgba(20,36,63,.35)}
/* the frame: workbook card and the report pages share it */
#op-b.sb2 .ob-card{position:absolute!important;left:0!important;right:0!important;top:0!important;width:auto!important;margin:0!important;height:100%!important;opacity:1!important;visibility:visible!important;transform:none;transition:opacity .55s ease,transform .55s ease;z-index:2}
#op-b.sb2 .ob-rows{transition:opacity .45s ease;animation:sb2-roll 80s linear infinite alternate}
@keyframes sb2-roll{to{transform:translateY(-62%)}}
#op-b.sb2[data-s="2"] .ob-card{--hi:1}
#op-b.sb2 .ob-five > div{opacity:0!important;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
#op-b.sb2[data-s="3"] .ob-rows{opacity:.1;animation-play-state:paused}
#op-b.sb2[data-s="3"] .ob-five > div{opacity:1!important;transform:none}
#op-b.sb2[data-s="3"] .ob-five > div:nth-child(2){transition-delay:.06s}#op-b.sb2[data-s="3"] .ob-five > div:nth-child(3){transition-delay:.12s}
#op-b.sb2[data-s="3"] .ob-five > div:nth-child(4){transition-delay:.18s}#op-b.sb2[data-s="3"] .ob-five > div:nth-child(5){transition-delay:.24s}
#op-b.sb2:is([data-s="4"],[data-s="5"],[data-s="6"]) .ob-card{opacity:0!important;transform:translateY(-14px) scale(.985);pointer-events:none}
#op-b.sb2 .sb2-an{position:absolute!important;inset:0!important;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .55s ease;pointer-events:none;z-index:3;--pw:calc(var(--fh) * .72)}
#op-b.sb2:is([data-s="4"],[data-s="5"],[data-s="6"]) .sb2-an{opacity:1}
#op-b.sb2 .an-stage{position:relative!important;top:auto!important;left:auto!important;visibility:visible!important;opacity:1!important;transform:none!important;width:var(--pw)!important;height:calc(var(--pw) / .72)!important;font-size:calc(var(--pw) / 34)!important}
#op-b.sb2 .an-book{transform:none!important}
#op-b.sb2 .pp{visibility:visible!important;opacity:0!important;transform:translateY(12px)!important;transition:opacity .45s ease,transform .45s ease}
#op-b.sb2[data-s="4"] .pp-g5,#op-b.sb2[data-s="5"] .pp-u,#op-b.sb2[data-s="6"] .pp-sh{opacity:1!important;transform:none!important;z-index:2}
#op-b.sb2[data-s="6"] .sh-rows{animation:sb2-roll 60s linear infinite alternate}
@media (max-width:767px){
  #op-b.sb2{padding-top:56px}
  .sb2-grid{grid-template-columns:minmax(0,1fr);gap:0;padding:0 16px}
  .sb2-vis{grid-area:1/1;align-self:start;position:sticky;top:64px;z-index:3;padding:10px 0 14px;background:linear-gradient(#fff 88%,rgba(255,255,255,0))}
  .sb2-frame{--fh:min(40svh,360px);position:relative;top:auto}
  .sb2-steps{grid-area:1/1;position:relative;z-index:2;padding:calc(min(40svh,360px) + 48px) 0 18svh}
  .sb2-step{min-height:40svh;justify-content:flex-start;padding:10px 0 18px 16px}
  .sb2-step h3{font-size:23px}
  .sb2-step p,.sb2-step li{font-size:15px}
  .sb2-cta a{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){#op-b.sb2 .ob-rows,#op-b.sb2 .sh-rows{animation:none}}
#op-b.sb2,html.op-js #op-b.sb2,html.v10-js #op-b.sb2{height:auto!important}
/* story v2: hand-offs are sequential (out first, then in) so two layers of numbers are never visible at once */
#op-b.sb2 .ob-card,#op-b.sb2 .sb2-an,#op-b.sb2 .pp,#op-b.sb2 .ob-rows,#op-b.sb2 .ob-five > div{transition-duration:.22s!important;transition-delay:0s!important}
#op-b.sb2:not([data-s="4"]):not([data-s="5"]):not([data-s="6"]) .ob-card{transition-delay:.24s!important;transition-duration:.38s!important}
#op-b.sb2:is([data-s="4"],[data-s="5"],[data-s="6"]) .sb2-an{transition-delay:.24s!important;transition-duration:.38s!important}
#op-b.sb2[data-s="4"] .pp-g5,#op-b.sb2[data-s="5"] .pp-u,#op-b.sb2[data-s="6"] .pp-sh{transition-delay:.24s!important;transition-duration:.38s!important}
#op-b.sb2[data-s="3"] .ob-five > div{transition-delay:.24s!important;transition-duration:.38s!important}
#op-b.sb2:not([data-s="3"]) .ob-rows{transition-delay:.24s!important;transition-duration:.38s!important}
@media (max-width:767px){.sb2-vis{background:#fff!important}.sb2-vis::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;background:linear-gradient(#fff,rgba(255,255,255,0));pointer-events:none}}

/* ===== pass 4 (5 Nov, MAIN on the pass 3 strip: "frame 3 is a whole phone screen of just Stan's photo in a circle; frame 4
   is just the video; the gaps between sections are mostly empty; the hero copy still fights the busy city photo").
   Legible hero: a soft paper veil sits right behind the copy. Phone: Stan is a small portrait next to his name, the bio
   comes first and the video follows it, so no screen holds a single element; section gaps are tightened. */
.v4-hero [data-v7-hero]{position:relative;isolation:isolate}
.v4-hero [data-v7-hero]::before{content:"";position:absolute;z-index:-1;inset:-36px -48px -28px;pointer-events:none;border-radius:48px;
  background:radial-gradient(ellipse 62% 58% at 50% 48%,rgba(248,250,248,.9) 0%,rgba(248,250,248,.74) 52%,rgba(248,250,248,0) 100%)}
.v7-who-av{display:none}
@media (max-width:767px){
  .v4-hero{padding-bottom:28px!important}
  .v4-hero [data-v7-hero]::before{inset:-24px -16px -16px;background:radial-gradient(ellipse 75% 62% at 50% 48%,rgba(248,250,248,.92) 0%,rgba(248,250,248,.78) 55%,rgba(248,250,248,0) 100%)}
  #op-b.sb2{padding-top:32px}
  #services{padding-top:40px!important;padding-bottom:40px!important}
  .v10-ex-sec{padding-top:36px!important}
  .v4-who,.v4-faq{padding-top:40px!important;padding-bottom:40px!important}
  .v4-faq{padding-bottom:120px!important}
  .v4-who .v7-portrait{display:none!important}
  .v4-who .v7-who{gap:0!important}
  .v4-who .v7-who-r{gap:22px!important}
  .v4-who .v7-who-txt{order:-1}
  .v4-who .v7-who-txt > .flex{margin-bottom:14px}
  .v7-who-av{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
    box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(79,115,96,.45),0 12px 26px -12px rgba(20,36,63,.4)}
  .v4-who .v7-tally{margin-top:26px!important}
}