body{font-family:Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.top{background:#fff!important;border:0!important;box-shadow:none!important}
.nav{max-width:1320px;margin:0 auto}
.nav .cta{border-radius:999px!important;background:#0b1f17!important;color:#fff!important;padding:12px 22px!important;font-weight:800}
.v2{display:grid;grid-template-columns:60% 40%;max-width:1320px;margin:0 auto;padding:0 32px}
.v2L>section{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0}
.v2 h1{font-weight:800;font-size:clamp(46px,8.6vw,136px);line-height:.98;letter-spacing:-.04em;color:#0b1f17;margin:0 0 28px;text-wrap:balance}
.v2 .lede{font-size:clamp(18px,1.5vw,22px);color:#3b4a44;max-width:30ch;font-weight:500;line-height:1.45}
.v2 .tag{align-self:flex-start;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:#0b5d43;background:#eaf4ef;padding:6px 12px;border-radius:999px;margin-bottom:22px}
.v2 .hcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.v2 .btn{border-radius:999px!important;padding:16px 28px!important;font-weight:800;background:#0b1f17!important;color:#fff!important;border:0!important;text-decoration:none}
.v2 .btn.ghost{background:#fff!important;color:#0b1f17!important;box-shadow:inset 0 0 0 2px #0b1f17}
.v2 .num{font-weight:800;font-size:clamp(90px,12vw,190px);line-height:.85;color:#e3efe9;letter-spacing:-.05em}
.v2 h2{font-weight:800;font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em;margin:8px 0 16px}
.v2 h2 a{color:#0b1f17;text-decoration:none}.v2 h2 a:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px;text-decoration-color:#d4a73c}
.v2 .sd{font-size:19px;color:#4c5b55;max-width:34ch;font-weight:500}
.v2R{position:relative}
#v2stage{position:sticky;top:72px;height:calc(100vh - 72px);width:100%}
#v2stage img,#v2stage canvas{position:absolute;left:0;right:0;top:var(--tip,46px);bottom:0;width:100%;height:calc(100% - var(--tip,46px));object-fit:contain}
#v2stage canvas{opacity:0;transition:opacity .5s}#v2stage.live canvas{opacity:1}#v2stage.live img{opacity:0;transition:opacity .5s .1s}

@media(max-width:860px){.v2{display:flex;flex-direction:column-reverse;padding:0 20px}
 .v2R{position:relative;height:calc(46vh + 46px);margin:8px 0 4px}#v2stage{position:relative;height:calc(46vh + 46px);top:0}
 .v2L>section{min-height:auto;padding:28px 0 60px}.v2L>section:first-child{padding-top:8px}.v2 h1{font-size:clamp(40px,12vw,64px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.v2 .num:before{content:attr(data-n)}.logo em{color:#8a6a1f!important}
/* handoff: still stays until the first 3D frame, then a 200ms crossfade */
#v2stage canvas{opacity:0;transition:opacity .2s linear}#v2stage.live canvas{opacity:1}#v2stage.live img{opacity:0;transition:opacity .2s linear .2s}
@media(min-width:1200px){.v2{grid-template-columns:56% 44%}}
/* r2 fix 2: owl ~27% larger on desktop (wider column, tip overlaid on stage corner) */
@media(min-width:1200px){.v2{grid-template-columns:50% 50%}.v2 h1{font-size:clamp(46px,7.4vw,112px)}#v2stage{--tip:0px}.v2help{top:0;height:100%}.v2tip{top:10px;left:auto;right:8px;transform:none;animation:none!important}.v2tip:after{left:auto;right:30px}}
/* r3: phone/tablet hero like SetAside/AgentToolbox: text first, small mascot top-right */
@media(max-width:860px){.v2{position:relative}.v2R{position:absolute;top:0;right:8px;width:218px;height:200px;margin:0;z-index:2}#v2stage{height:200px}
 .v2L>section:first-child{padding-top:8px}.v2L>section:first-child .tag{max-width:calc(100% - 232px);margin:12px 0 0;line-height:1.5}.v2L>section:first-child h1{margin-top:150px}}
@media(max-width:480px){.v2L>section:first-child .tag{font-size:10.5px;letter-spacing:.02em;padding:6px 10px;border-radius:12px}.v2L>section:first-child h1{margin-top:128px}}
/* ===== r4: live DPD green + playful accents, tight spacing ===== */
html,body{background:var(--bg)!important}main{background:transparent}
.top{background:color-mix(in srgb,var(--bg) 88%,transparent)!important}
.v2{background:radial-gradient(520px 380px at 82% 38%,rgba(201,162,74,.28),transparent 70%),radial-gradient(900px 420px at 0% 0%,rgba(14,122,87,.14),transparent 70%),linear-gradient(160deg,#e9f6ef,#f6f7f5 75%);border-radius:28px;margin:12px auto 8px;max-width:1320px;box-shadow:inset 0 0 0 1px #d6eadf}
.v2L>section{min-height:0;padding:28px 0}
.v2L>section:first-child{padding-top:44px}
.v2 .tag{background:#0b5d43;color:#fff;box-shadow:0 3px 0 #c9a24a}
.v2 h1{color:#06291e}
.v2 h1{background:none}
.v2 .lede{color:#2c4a3e}
.v2 .btn{background:#0b5d43!important;box-shadow:0 4px 0 #06291e;transition:transform .12s}.v2 .btn:hover{transform:translateY(-2px)}
.v2 .btn.ghost{background:#fff!important;color:#0b5d43!important;box-shadow:inset 0 0 0 2px #0b5d43,0 4px 0 #c9a24a}
.v2 .num{color:#c9a24a;opacity:.45;font-size:clamp(56px,6vw,96px);line-height:.9}
.v2 h2{font-size:clamp(28px,3.2vw,46px);margin:4px 0 8px}.v2 h2 a{color:#0b5d43}
.v2L>section[data-pose]:not(:first-child){border-top:2px dashed rgba(11,93,67,.18)}
.v2 .sd{color:#3b5a4d;margin:0}
.v2tip{background:#0b5d43}.v2tip:after{border-top-color:#0b5d43}
@media(min-width:1200px){.v2L>section:first-child{min-height:calc(100vh - 96px);justify-content:center;padding:24px 0}}
@media(max-width:860px){.v2{border-radius:22px;margin:8px 10px;padding:0 16px}.v2R{right:4px}
 .v2L>section:first-child{padding-top:6px}.v2L>section{padding:18px 0 22px}
 .v2tipt{padding-right:10px}.v2tipx{margin-left:4px}}
/* r4 phone/tablet: SetAside-style row = tag + bubble on the left, small owl on the right */
@media(max-width:860px){.v2R{left:16px;right:16px;top:10px;width:auto;height:150px}#v2stage{height:150px;--tip:0px}
 #v2stage img,#v2stage canvas{left:auto;right:0;top:0;width:112px;height:150px}
 .v2help{left:auto;right:0;top:0;transform:none;width:112px;height:150px;aspect-ratio:auto}
 .v2tip{top:auto;bottom:18px;left:0;right:auto;transform:none!important;animation:none!important;max-width:calc(100% - 124px)}
 .v2tip:after{left:auto;right:-12px;top:50%;bottom:auto;margin:-7px 0 0;border:7px solid transparent;border-left-color:#0b5d43;border-right:0}
 .v2L>section:first-child{padding-top:12px}.v2L>section:first-child .tag{max-width:calc(100% - 124px);margin:4px 0 0;font-size:11px;white-space:nowrap}
 .v2L>section:first-child h1{margin-top:96px}}
@media(max-width:860px) and (min-width:481px){#v2stage img,#v2stage canvas,.v2help{width:150px;height:150px}.v2tip,.v2L>section:first-child .tag{max-width:calc(100% - 164px)}}
@media(max-width:480px){.v2L>section:first-child .tag{font-size:10px;padding:6px 10px}.v2L>section:first-child h1{margin-top:96px}}
@media(max-width:860px){.v2L>section:first-child h1{margin-top:118px}}
@media(max-width:860px){.v2tipt{font-size:12px;padding:0 8px 0 12px}.v2tipx{width:26px;height:26px;margin:0 4px 0 2px;border-left:1px solid rgba(255,255,255,.22);border-radius:0 50% 50% 0}
 .v2L>section:first-child .tag,.v2tip{max-width:calc(100% - 118px)}.v2 h1{margin-bottom:14px}.v2 .hcta{margin-top:18px}}
@media(max-width:380px){.v2tipt{font-size:11px}}
@media(max-width:860px){.v2tip{height:auto;min-height:34px;padding:5px 0}.v2tipt{white-space:normal;line-height:1.2;text-align:left;font-size:12.5px;overflow:visible}}
@media(max-width:860px){.v2L>section:first-child h1{margin-top:132px}}
@media(max-width:380px){.v2L>section:first-child .tag{white-space:normal;line-height:1.35}}
/* ===== r5: exact live downpaymentdesk.com scheme (style.css vars), more green; owl untouched ===== */
.v2{background:radial-gradient(1200px 400px at 90% -10%,rgba(201,162,74,.35),transparent),linear-gradient(135deg,#06291e,#0b5d43 70%)!important;box-shadow:var(--sh)!important;color:#fff}
.v2 h1,.v2 h2 a{color:#fff}.v2 h1{font-weight:800;letter-spacing:-.035em}
.v2 .lede,.v2 .sd{color:rgba(255,255,255,.82)}
.v2 .tag{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.v2 .btn{background:var(--gold)!important;color:#1b1404!important;box-shadow:none;font-weight:650;border-radius:999px!important}
.v2 .btn.ghost{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.v2 .num{color:var(--gold);opacity:.6}
.v2 h2 a:hover{text-decoration-color:var(--gold)}
.v2L>section[data-pose]:not(:first-child){border-top:1px solid rgba(255,255,255,.14)}
.v2tip{background:#fff;color:#0b5d43}.v2tip *{color:#0b5d43}.v2tip:after{border-top-color:#fff}
@media(max-width:860px){.v2tip:after{border-top-color:transparent;border-left-color:#fff}.v2tipx{border-left-color:rgba(11,93,67,.25)}}
.nav .cta{background:var(--brand)!important;font-weight:600;padding:9px 14px!important}
/* ===== r5b: full-bleed green hero, header blends in, tinted page below (homepages only) ===== */
.top{background:#06291e!important;border:0!important;backdrop-filter:none}
.top .logo,.top .nav .l,.top .lsel summary,.top #mt{color:#fff!important}
.top .logo em{color:var(--gold)!important}
.top .lsel summary{background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)!important;border-color:transparent!important}
.top .nav .cta{background:var(--gold)!important;color:#1b1404!important}
.top .ticker{background:#06291e!important;border:0!important;color:rgba(255,255,255,.88)}
.top .ticker *{border-color:rgba(255,255,255,.14)!important}
@media(max-width:860px){.top .nav.open{background:#06291e}}
.v2{max-width:none!important;width:auto;border-radius:0!important;box-shadow:none!important;margin:-28px calc(50% - 50vw) 0!important;padding-left:max(32px,calc(50vw - 628px))!important;padding-right:max(32px,calc(50vw - 628px))!important;background:radial-gradient(1200px 400px at 90% -10%,rgba(201,162,74,.30),transparent),linear-gradient(180deg,#06291e 0,#0b5d43 100%)!important}
@media(max-width:860px){.v2{margin:-20px calc(50% - 50vw) 0!important;padding-left:20px!important;padding-right:20px!important}}
html,body{overflow-x:clip}
.top .ticker .up{color:#2fd08f!important;background:transparent!important}.top .ticker .dn{color:#ff8a8d!important;background:transparent!important}
/* ===== r5c: tighter layout, loosely after agenttoolbox.net specs (homepages only) ===== */
main{max-width:1120px;padding:0 24px 40px}
.v2 .lede{max-width:680px}
.v2 .tag{margin-bottom:28px}
@media(min-width:861px){
 .v2L>section:first-child{min-height:0!important;padding:140px 0 100px!important;justify-content:center}
 .v2R{align-self:stretch;display:flex;align-items:center}
 #v2stage{position:relative!important;top:0!important;height:min(640px,calc(100% - 40px))!important;min-height:440px}
 .v2 h1{font-size:clamp(46px,5.6vw,88px)}
}
@media(max-width:599px){.v2 h1{font-size:clamp(40px,11.5vw,56px)!important}.v2L>section:first-child{padding-bottom:56px!important}.v2 .tag{margin-bottom:20px}}
/* sections */
main>.sec{margin:0;padding:96px 0 20px}
main>.sec:first-of-type{padding-top:96px}
main>#popular{padding-top:120px}
@media(max-width:759px){main>.sec{padding-top:64px!important}}
main>.grid{grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:899px){main>.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:599px){main>.grid{grid-template-columns:1fr}}
main .card{border-radius:20px;padding:28px}
/* chapter grid: heading left, content right */
.hguide{display:grid;grid-template-columns:1fr 1.15fr;column-gap:72px;row-gap:0;padding:120px 0 40px;align-items:start}
.hguide>.sec{margin:0;padding:56px 0 0;display:block}
.hguide>.sec:first-child{padding-top:0}.hguide>.sec:first-child+*{margin-top:0}
.hguide>.grid,.hguide>p{grid-column:2;margin:56px 0 0;max-width:720px}
.hguide>.sec:first-child+.grid{margin-top:0}
.hguide>.grid{grid-template-columns:1fr 1fr;gap:16px}
.hguide>.grid .card{padding:22px}
.hguide h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0;position:sticky;top:120px}
@media(max-width:859px){.hguide{display:block;padding:80px 0 20px}.hguide>.sec{padding:36px 0 14px}.hguide>.grid,.hguide>p{margin:0}.hguide h2{position:static}}
@media(max-width:599px){.hguide>.grid{grid-template-columns:1fr}main .card{padding:22px}}
/* signup (bottom only) */
main>.nl{padding:80px 32px;margin-top:80px}
@media(max-width:599px){main>.nl{padding:56px 20px}.nl form,.kitf{display:flex;flex-direction:column}}
/* mini owl helper after scrolling past the hero */
.v2mini{position:fixed;right:16px;bottom:16px;width:88px;height:104px;z-index:30;border:0;padding:0;background:none;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;filter:drop-shadow(0 6px 14px rgba(6,41,30,.3))}
.v2mini img{width:100%;height:100%;object-fit:contain}
.v2mini:focus-visible{outline:3px solid #d4a73c;outline-offset:2px;border-radius:12px}
html.v2m-on .v2mini{opacity:1;visibility:visible;transform:none}
@media(max-width:600px){.v2mini{width:76px;height:90px;right:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.v2mini{transition:none}}
html.chat-open .v2mini{display:none}
@media(max-width:860px){.v2{padding-top:16px!important}}

/* ===== r5d: live-site page colors, one menu, tighter spacing, no layout shift ===== */
html,body{background:radial-gradient(1200px 600px at 50% -200px,color-mix(in srgb,var(--brand) 7%,transparent),transparent 70%),var(--bg)!important;color:var(--ink)}
main{background:transparent!important;color:var(--ink)}
main h2,main h3:not(.card h3){color:var(--ink)!important;opacity:1!important}
.hguide>p,main>p{color:var(--ink)!important}
/* one menu, same breakpoints as live */
@media(max-width:1180px){.top .nav a.l,.top .nav .cta{display:none!important}.top #mt{display:block!important}.top .nav.open{flex-wrap:wrap;background:#06291e}.top .nav.open a.l{display:block!important;width:100%;padding:8px 10px;font-size:14px}}
@media(min-width:1181px){.top .nav a.l{display:inline-block!important;padding:8px 8px;font-size:13.5px}.top #mt{display:none!important}}
/* tighter rhythm */
main>.sec,main>.sec:first-of-type,main>#popular{padding:64px 0 16px!important}
.hguide{padding:64px 0 24px!important}
.hguide>.sec{padding-top:40px}.hguide>.grid,.hguide>p{margin-top:40px}
main>.nl{margin-top:56px}
@media(max-width:1023px){.hguide{display:block!important}.hguide>.sec{padding:32px 0 12px!important}.hguide>.sec:first-child{padding-top:0!important}.hguide>.grid,.hguide>p{margin:0!important;max-width:none}.hguide h2{position:static!important;font-size:clamp(24px,4.6vw,32px)}}
@media(max-width:767px){main>.sec,main>.sec:first-of-type,main>#popular{padding:44px 0 12px!important}.hguide{padding:44px 0 16px!important}.hguide>.grid{grid-template-columns:1fr!important}}
/* mini owl floats; only where the side gutter fits it, so it never covers text */
@media(max-width:1359px){.v2mini{display:none!important}}
html.owl-pulse .v2mini:before{content:"";position:absolute;inset:-4px;border-radius:999px;pointer-events:none}
@media(prefers-reduced-motion:no-preference){html.owl-pulse.v2m-on .v2mini:before{animation:owlp 1.6s ease-out 2}}
/* homepage: no mini owl at all (header button, chip, floating owl, bubble) */
/* ===== r6: 431-860px hero: large owl in a right column beside the text, bubble directly above the owl ===== */
@media(max-width:860px){
 .v2R{left:auto!important;right:16px!important;top:14px!important;width:42%!important;height:calc(42vw * 1.46 + 54px)!important}
 #v2stage{height:100%!important;--tip:54px}
 #v2stage img,#v2stage canvas{left:0!important;right:0!important;top:54px!important;width:100%!important;height:calc(100% - 54px)!important}
 .v2help{left:0!important;right:0!important;top:54px!important;width:100%!important;height:calc(100% - 54px)!important}
 .v2tip{top:0!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:100%!important;width:max-content}
 .v2tip:after{left:50%!important;right:auto!important;top:auto!important;bottom:-7px!important;margin:0 0 0 -7px!important;border:7px solid transparent!important;border-top-color:#fff!important;border-bottom:0!important}
 .v2L>section:first-child{max-width:calc(58% - 24px);min-height:calc(42vw * 1.46 + 80px)!important;padding-top:14px!important;justify-content:flex-start}
 .v2L>section:first-child .tag{max-width:100%!important;white-space:normal!important;margin:0 0 18px!important}
 .v2L>section:first-child h1{margin-top:0!important;font-size:clamp(34px,7.4vw,60px)!important}
 .v2L>section:first-child .hcta{flex-direction:column}
}
@media(min-width:861px) and (max-width:1100px){#v2stage{height:auto!important;min-height:0!important;aspect-ratio:684/1046;--tip:46px}}
@media(min-width:861px) and (max-width:1100px){.v2{grid-template-columns:54% 46%!important}}
@media(min-width:861px) and (max-width:1100px){#v2stage{margin-top:28px!important}}

/* ===== r7: mini helper only once the hero owl is out of view ===== */
.v2mini{display:none!important}
.top .owlb,.owlf{transition:opacity .25s,visibility .25s}
html:not(.owl-away) .top .owlb,html:not(.owl-away) .owlf,html:not(.owl-away) .owlt{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html:not(.owl-away) .top .owlb *,html:not(.owl-away) .top .owlb:before,html:not(.owl-away) .top .owlb:after{animation:none!important;visibility:hidden!important}
@media(prefers-reduced-motion:reduce){.top .owlb,.owlf{transition:none}}
/* r7b: bigger hero owl on mobile (<=860) */
@media(max-width:860px){
 .v2R{right:8px!important;width:48%!important;height:calc(48vw * 1.46 + 54px)!important}
 .v2L>section:first-child{max-width:calc(52% - 30px)!important;min-height:calc(48vw * 1.46 + 76px)!important}
 .v2L>section:first-child h1{font-size:clamp(30px,7.6vw,60px)!important}
}

/* ===== r8 (2026-10-26, John): bubble never clipped under the header, owl ~12% smaller, hero hugs content ===== */
@media(max-width:860px){
 .v2R{top:34px!important;right:12px!important;width:42%!important;height:calc(42vw * 1.46 + 54px)!important}
 .v2L>section:first-child{max-width:calc(58% - 30px)!important;min-height:calc(42vw * 1.46 + 96px)!important;padding-top:34px!important;padding-bottom:28px!important}
}
@media(max-width:599px){.v2L>section:first-child{padding-bottom:28px!important}}
@media(min-width:861px){
 .v2L>section:first-child{padding:120px 0 64px!important}
 .v2R{align-items:flex-start!important;padding:48px 0 32px}
 #v2stage{height:min(560px,calc(100% - 16px))!important;min-height:400px}
}
@media(min-width:861px) and (max-width:1100px){#v2stage{margin-top:0!important;width:88%!important;margin-left:auto;margin-right:auto}}

/* ===== r9 (2026-10-26, John): blink overlay + phone/fold secondary CTA under the owl ===== */
.v2blk{position:absolute;pointer-events:none;z-index:1;display:none}
.v2blk i{position:absolute;border-radius:50% 50% 48% 48%/62% 62% 38% 38%;transform:scaleY(0);transform-origin:50% 0;transition:transform 90ms cubic-bezier(.2,.7,.3,1);
 background:radial-gradient(120% 34% at 50% 100%,rgba(28,18,10,.92) 0 46%,rgba(60,40,24,.55) 60%,transparent 74%),
 radial-gradient(30% 22% at 30% 40%,rgba(88,62,38,.28),transparent),radial-gradient(26% 20% at 68% 34%,rgba(88,62,38,.24),transparent),radial-gradient(40% 26% at 50% 62%,rgba(240,226,200,.25),transparent),
 radial-gradient(95% 85% at 50% 15%,#cdb898,#a68a68 60%,#6f553d 100%);
 box-shadow:inset 0 -1px 2px rgba(20,12,6,.6),0 0 3px 1px rgba(90,66,44,.45)}
.v2blk.b i{transform:scaleY(1);transition:transform 70ms cubic-bezier(.5,0,.9,.4)}
.v2blk i:nth-child(1){left:37%;top:15.9%;width:6.6%;height:4.1%}
.v2blk i:nth-child(2){left:50.8%;top:15.5%;width:7.6%;height:4.4%}
#v2stage.live .v2blk{display:none!important}
@media(prefers-reduced-motion:reduce){.v2blk{display:none!important}}

/* ===== r10 (2026-10-26, John): phone/fold 'What can I afford?' in the owl column, same row as the gold CTA ===== */
@media(max-width:860px){
 .v2L>section:first-child{min-height:calc(42vw * 1.46 + 168px)!important}
 .v2L>section:first-child .hcta{position:relative;margin-top:auto!important;padding-top:18px}
 .v2L>section:first-child .hcta .btn{min-height:56px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.2;padding:8px 12px;margin:0}
 .v2L>section:first-child .hcta .ghost{position:absolute;top:18px;left:calc(58vw - 32px);width:42vw;height:calc(100% - 18px);z-index:3}
}

/* ===== r11 (2026-10-26, John): lids close BEHIND the glasses; phone/fold owl fills its column and sits on the button ===== */
.v2blk{-webkit-mask:radial-gradient(3.95% 2.7% at 38.74% 19.4%,#000 96%,transparent 100%),radial-gradient(4.39% 3% at 53.95% 18.8%,#000 96%,transparent 100%);mask:radial-gradient(3.95% 2.7% at 38.74% 19.4%,#000 96%,transparent 100%),radial-gradient(4.39% 3% at 53.95% 18.8%,#000 96%,transparent 100%)}
.v2blk i:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,250,235,.14),rgba(255,250,235,0) 45%)}
.v2gls{position:absolute;background:url(/v2/owl-glasses-c1.webp) 0 0/100% 100% no-repeat;pointer-events:none;z-index:1;display:none}
.v2blk~.v2gls{display:block}
#v2stage.live .v2gls{display:none!important}
@media(prefers-reduced-motion:reduce){.v2gls{display:none!important}}
@media(max-width:860px){.v2{overflow-x:clip}#v2stage{overflow:visible}}

/* ===== r12 (2026-10-26, John): phone/fold owl laid out in CSS (no post-load shift); bubble anchored ~6px above the head ===== */
/* art: visible box x 31..646, head top y≈50, feet y≈965 of the 684x1000 poster */
@media(max-width:860px){
 .v2L>section:first-child{min-height:calc((100vw - 52px) * .42 * 1.488 + 210px)!important}
 .v2L>section:first-child .hcta .btn{height:56px;min-height:56px}
 .v2R{top:auto!important;bottom:87px!important;height:auto!important}
 #v2stage{position:relative!important;height:auto!important;aspect-ratio:615/915;--tip:0px}
 #v2stage img,#v2stage canvas,#v2stage .v2help{position:absolute!important;left:-5.0407%!important;right:auto!important;top:-5.4645%!important;bottom:auto!important;width:111.2195%!important;height:109.2896%!important;max-width:none!important;transform:none!important;aspect-ratio:auto!important;object-fit:contain}
 #v2stage .v2tip{top:auto!important;bottom:calc(100% + 8px)!important;left:49%!important;transform:translateX(-50%)!important;max-width:min(100% + 8px,180px)!important}
}
@media(max-width:480px){.v2L>section:first-child .hcta .btn{height:64px!important;min-height:64px!important;font-size:14px;line-height:1.15;padding:6px 10px}.v2R{bottom:95px!important}}
@media(max-width:860px){.v2L>section:first-child .hcta .btn{height:56px!important}}
@media(max-width:480px){.v2L>section:first-child .hcta .btn{height:64px!important}}
/* desktop/tablet: art is height-limited in its box, head top = 5% of the art height below the image top */
@media(min-width:861px){
 #v2stage .v2tip{top:auto!important;bottom:calc(95% - .95 * var(--tip,46px) + 8px)!important;left:calc(50% - 5px)!important;right:auto!important;transform:translateX(-50%)!important;animation:none!important}
 #v2stage .v2tip:after{left:50%!important;right:auto!important;top:auto!important;bottom:-7px!important;margin:0 0 0 -7px!important;border:7px solid transparent!important;border-top-color:#fff!important;border-bottom:0!important}
}
@media(max-width:860px){.v2L>section:first-child .hcta .btn{flex:none!important;padding:6px 12px!important;overflow:hidden}}
/* hero bubble: one line at 360+ (en), still anchored 8px above the head */
@media(min-width:360px) and (max-width:860px){html[lang^=en] #v2stage .v2tip{max-width:none!important;width:max-content!important}html[lang^=en] #v2stage .v2tipt{white-space:nowrap!important;font-size:11.5px!important;padding:0 6px 0 10px!important}html[lang^=en] #v2stage .v2tipx{width:24px;height:24px;margin:0 3px 0 1px}}

/* crisp owl c1 (Oct 26): owl is a separate layer on the CSS green; soft contact shadow so he sits on top */
#v2stage img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.30)) drop-shadow(0 10px 14px rgba(0,0,0,.30))}
/* r13 (2026-10-26, John): no divider before the bubble ×; hero pill on one line on phones (360+) */
@media(max-width:860px){#v2stage .v2tipx,.v2tipx{border-left:0!important}}
@media(max-width:480px){.v2L>section:first-child .tag{white-space:nowrap!important;max-width:calc(100vw - 48px)!important;width:max-content!important;line-height:1.5!important;font-size:10px!important;letter-spacing:.01em!important;padding:6px 9px!important}}
/* r14 (2026-10-26, John): Fold inner (600-860) hero hugs content: buttons right under the subtitle, owl sized to text+buttons */
@media(min-width:600px) and (max-width:860px){
 .v2R{top:96px!important;bottom:auto!important;right:16px!important;width:31vw!important}
 .v2L>section:first-child{max-width:calc(100vw - 31vw - 72px)!important;min-height:calc(31vw * 1.488 + 132px)!important;padding-bottom:28px!important}
 .v2L>section:first-child h1{font-size:clamp(34px,7vw,60px)!important}
 .v2L>section:first-child .hcta{margin-top:22px!important;padding-top:0;flex-direction:row!important;flex-wrap:wrap;gap:12px}
 .v2L>section:first-child .hcta .ghost{position:static!important;width:auto!important;height:56px!important}
 .v2L>section:first-child .hcta .btn{padding:6px 22px!important}
}
@media(min-width:861px) and (max-width:1100px){
 .v2L>section:first-child{padding:72px 0 48px!important}
 .v2R{padding:40px 0 24px}
 #v2stage{width:64%!important}
}
/* r15 (2026-10-26, John): restore the rotating market ticker on homepages (was display:none since r4) */
.top .ticker{display:block!important}
/* r16 (2026-10-26, John): ticker matches the header green, slimmer; trust line under the hero buttons */
.top .ticker{background:#06291e!important;min-height:36px!important;border:0!important}.top .ticker .tr{padding:6px 0!important}
.v2 .trust2{margin:14px 0 0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.72);font-weight:500}
@media(max-width:860px){
 .v2L>section:first-child .trust2{width:calc(100vw - 40px);max-width:none;height:36px;margin:10px 0 0;font-size:12px;line-height:18px;overflow:hidden}
 .v2L>section:first-child{min-height:calc((100vw - 52px) * .42 * 1.488 + 256px)!important}
 .v2R{bottom:133px!important}
}
@media(max-width:480px){.v2R{bottom:141px!important}}
@media(min-width:600px) and (max-width:860px){.v2R{bottom:auto!important}.v2L>section:first-child .trust2{width:auto;height:auto}.v2L>section:first-child{min-height:calc(31vw * 1.488 + 132px)!important}}
/* r17 (2026-10-26, John): phone bubble stays inside the owl column (>=12px from text), wraps if needed */
@media(max-width:599px){
 #v2stage .v2tip,html[lang] #v2stage .v2tip{left:0!important;right:0!important;transform:none!important;width:auto!important;max-width:100%!important;box-sizing:border-box}
 #v2stage .v2tipt,html[lang] #v2stage .v2tipt{white-space:normal!important;font-size:10.5px!important;letter-spacing:-.01em;line-height:1.25!important;padding:0 0 0 8px!important;text-align:left;flex:1 1 auto;min-width:0}
 #v2stage .v2tipx,html[lang] #v2stage .v2tipx{width:22px!important;height:22px!important;margin:0 2px 0 0!important;flex:none}
}
/* r18 (2026-10-27, John): hero 'Free · No sign-up' pill centered on phone/Fold; left with text column on desktop */
.v2L>section:first-child .tag{align-self:flex-start!important;width:max-content!important;max-width:calc(100vw - 48px)!important;white-space:nowrap!important}
@media(max-width:860px){.v2L>section:first-child .tag{margin-left:calc(50vw - 20px)!important;transform:translateX(-50%)}}
/* ===== r19 (2026-10-27): hero CTA/contrast polish only; owl art + layout rules untouched ===== */
.v2 .btn{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 12px 28px -12px rgba(201,162,74,.55)!important}
.v2 .btn:hover{filter:brightness(1.05)}
.v2 .btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)!important}
.v2 .btn.ghost:hover{background:rgba(255,255,255,.08)!important}
.v2 .trust2{color:rgba(255,255,255,.78)}
.v2 .lede{color:rgba(255,255,255,.88)}
.v2 .tag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 6px 16px -10px rgba(0,0,0,.35)}

/* r20 (2026-10-27, John): ticker feed always visible on first paint (SSR + contrast); keep #06291e / 36px */
.top .ticker{display:block!important;background:#06291e!important;min-height:36px!important;border:0!important;color:#e8f5ef!important;overflow:hidden}
.top .ticker .tr{display:inline-flex!important;align-items:center;gap:28px;padding:6px 0!important;color:#e8f5ef!important}
.top .ticker .tr > span,.top .ticker .tr > span b{color:#e8f5ef!important}
.top .ticker .up{color:#2fd08f!important;background:transparent!important}
.top .ticker .dn{color:#ff8a8d!important;background:transparent!important}

/* r21 (2026-10-30, John via Charles): shrink phone owl (<=599) so newsletter + CTAs sit in the first screen; desktop (>=861) and fold (600-860) unchanged; art untouched */
@media(max-width:599px){
 .v2R{width:28%!important;right:10px!important}
 .v2L>section:first-child{max-width:calc(72% - 28px)!important;min-height:calc((100vw - 52px) * .28 * 1.488 + 256px)!important}
 .v2L>section:first-child .hcta .ghost{left:calc(72vw - 32px)!important;width:28vw!important}
}