/* The stage (owner's brief 02/11, full/stage.js): words straight on the picture, each block over its own soft scrim, no half-screen panel.
   Scrim: a soft shape 40-65 % dark (--sa) whose edge melts over 160 px around its block, in and out with its words. Type keeps the deck's
   minimum (17 px) and its families; a thin multi-layer shadow under the words that sit on the picture. */
#pic{transform-origin:0 0}
body.gr-dim{--fa:brightness(.72) saturate(.9)}
body.stg #panel i{opacity:0!important}
.bt.stg{--scr:8,7,6;--sa:.55}
body.th-c2b .bt.stg{--scr:242,235,221;--sa:.65}
.bt.stg .sz{position:absolute;isolation:isolate}
/* a soft scrim: a 9-slice image (img/scrim-d|l.png: a full core, a 160 px smoothstep edge) stretched round the words; no filter, no
   backdrop blur of the video. 40-65 % dark (--sa), owner's brief 02/11 §1.2 */
.bt.stg .sz::before{content:"";position:absolute;inset:-150px -170px;z-index:-1;pointer-events:none;opacity:var(--sa);
  border:160px solid transparent;border-image:url(img/scrim-d.png) 160 fill / 160px stretch}
body.th-c2b .bt.stg .sz::before{border-image-source:url(img/scrim-l.png)}
.bt.stg .cz,.bt.stg .call,.bt.stg .tkp,.bt.stg .src{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.4)}
body.th-c2b .bt.stg .cz,body.th-c2b .bt.stg .call,body.th-c2b .bt.stg .src{text-shadow:0 1px 1px rgba(255,255,255,.5)}

/* the main block, anywhere in the frame; a cinematic title (80-110 px) masked line by line */
.bt.stg .cz{position:absolute}
.bt.stg .cz.a-c{align-items:center;text-align:center}
.bt.stg .cz.a-r{align-items:flex-end;text-align:right}
.bt.stg .cz.cine .ttl{font-size:var(--ts);line-height:1.02;letter-spacing:-.03em}
.bt.stg .src{left:96px;right:auto;bottom:56px;width:auto;max-width:1300px}
.bt.stg .src{--sa:.65;padding:7px 14px;border-radius:12px;background:rgba(10,10,12,.55)}
body.th-c2b .bt.stg .src{background:rgba(242,235,221,.7)}
.mx td:first-child .codeh{color:#1a1206}
body.th-c2b .gts .gc{color:#7d2414}
.bt.stg .src::before{inset:-70px -80px;border-width:64px;border-image-width:64px}
.bt.stg .steps .nt{color:var(--hk)}
body.th-c2b .bt.stg .take .tl{color:var(--soft)}
.bt.stg .pin .pt{background:rgba(6,7,9,.7)}
/* the split comparison (beat 28) keeps its layout; its two half labels get the same soft scrim */
.L-split .half{isolation:isolate}
.L-split .half::before{content:"";position:absolute;inset:-56px -76px;z-index:-1;pointer-events:none;opacity:.62;border:72px solid transparent;border-image:url(img/scrim-d.png) 160 fill / 72px stretch}

/* the words' order (brief 02/11 §1.4): eyebrow and its red rule at once, the title's lines from 120 ms, then the blocks by kind
   (stage.js PLAN), the source at 800 ms, the take-away at 1000 ms */
.bt.stg .eb{opacity:0;transition:opacity .35s var(--e)}
.bt.stg.on .eb,.bt.stg.pre .eb{opacity:1}
.bt.stg .l>span{transition-delay:120ms}.bt.stg .l:nth-child(2)>span{transition-delay:200ms}.bt.stg .l:nth-child(3)>span{transition-delay:280ms}
.bt.stg .src{opacity:0;transition:opacity .45s var(--e) .8s}
.bt.stg.on .src{opacity:1}
.bt.stg .take{transition-delay:1s,1s}
.bt.stg .sz.cz::before{opacity:0;transition:opacity .45s var(--e)}
.bt.stg.on .sz.cz::before{opacity:var(--sa)}
/* the camera still flying: the section shows its title (a light scrim), the pins it passes and the screens in the world, nothing else */
.bt.stg.pre{opacity:1;visibility:visible;transition:opacity .3s var(--e),visibility 0s}
.bt.stg.pre .l>span{transform:none}
.bt.stg.pre .eb i{width:48px}
.bt.stg.pre .sz.cz::before{opacity:calc(var(--sa) * .7)}
.bt.stg.pre .cz>:not(.eb):not(.ttl),.bt.stg.pre .call,.bt.stg.pre .card,.bt.stg.pre .tkp,.bt.stg.pre .lk,.bt.stg.pre .src,.bt.stg.pre .pin:not(.fly),.bt.stg.pre .page{opacity:0!important}
.bt.stg.pre .pin.fly .pt{opacity:1;transform:translateX(-50%) scale(1)}
.bt.stg.pre .pin.fly.lt .pt{transform:scale(1)}
.bt.stg.pre .pin.fly::after{opacity:1}
.bt.stg.pre .pin.fly::before{transform:none}

/* a: a callout tied to its object (the leader and the dot are drawn by stage.js in .lk) */
.call{opacity:0;transform:translateY(12px);transition:opacity .45s var(--e) var(--d,0ms),transform .55s var(--e) var(--d,0ms);color:var(--ink)}
.bt.on .call{opacity:1;transform:none}
.call .cl{display:flex;align-items:center;gap:12px;margin:0 0 6px;font:600 24px/1.2 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.call .cl .ic{width:34px;height:34px}
.call .cv{display:flex;align-items:baseline;margin:0;font:800 136px/1 "Inter",sans-serif;letter-spacing:-.03em;color:var(--ink)}
.call.big .cv{font-size:160px}
.call .cv .n{font-size:1em;margin:0}
.call .cv u{margin-left:14px;font:600 54px/1 "Inter",sans-serif;letter-spacing:-.01em;color:var(--soft);text-decoration:none}
.call .ck{display:flex;align-items:center;gap:12px;margin:0;font:700 32px/1.2 "Inter",sans-serif;color:var(--ink)}
.call .ck .ic{width:34px;height:34px}
.call .cs{margin:8px 0 0;font:500 24px/1.35 "Inter",sans-serif;color:var(--soft)}
.call.h .cv,.call.h .ck{color:var(--amber)}
.call.kn .cv,.call.kn .ck{color:var(--teal2)}
.lk{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none;overflow:visible}
.lk path{fill:none;stroke:rgba(243,235,221,.88);stroke-width:2;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--e) var(--d,0ms)}
.lk path.sh{stroke:rgba(0,0,0,.42);stroke-width:5}
.bt.on .lk path{stroke-dashoffset:0}
.lk circle{fill:var(--cream);stroke:rgba(0,0,0,.55);stroke-width:3;paint-order:stroke;opacity:0;transition:opacity .3s var(--e) calc(var(--d,0ms) + .45s)}
.bt.on .lk circle{opacity:1}

/* d: a small floating card (<= 32 % of the frame), an icon and two or three lines; a plate, not a scrim */
.card{width:560px;box-sizing:border-box;padding:16px 22px 18px;border-radius:16px;background:rgba(14,12,11,.66);box-shadow:inset 0 0 0 1px rgba(243,235,221,.14),0 18px 44px rgba(0,0,0,.38);
  opacity:0;transform:translateX(-14px);transition:opacity .45s var(--e) var(--d,0ms),transform .55s var(--e) var(--d,0ms)}
.bt.stg .card.sz::before{display:none}
.bt.on .card{opacity:1;transform:none}
.card .ck{display:flex;align-items:center;gap:14px;margin:0;font:700 34px/1.2 "Inter",sans-serif;color:var(--ink)}
.card .ck .ic{width:38px;height:38px;color:var(--acc)}
.card .cs{margin:6px 0 0 52px;font:500 26px/1.3 "Inter",sans-serif;color:var(--soft)}
.card .cm{margin:4px 0 0 52px;font:500 24px/1.3 "Inter",sans-serif;color:var(--mute)}
.card .cics{display:flex;gap:18px;margin:12px 0 0}
.card .cics span{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px}
.card .cics .ic{width:34px;height:34px;color:var(--cream)}
.card .cics em{font:600 22px/1 "Inter",sans-serif;font-style:normal;letter-spacing:.04em;color:var(--soft)}
.card.has-ics .ck .ic{display:none}
.tkp{opacity:1}
.tkp.big .take .tt{font-size:64px;line-height:1.06;letter-spacing:-.025em}
.sbd{position:absolute;inset:0;background:var(--pzbg)}
.bt.stg .pz{z-index:0}
.tkp .take{margin:0}

/* b: words in the world, pasted on a 3D surface by its four corners (stage.js homography); a faint glass sheen over them */
.wd{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;box-sizing:border-box;backface-visibility:hidden}
.wd .glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 100%);mix-blend-mode:screen;opacity:.8}
.w-price{border-radius:30px;background:#f6f3ee;color:#17140f;font-family:"Inter",sans-serif;padding:0 24px}
.w-price .ws-bar{display:flex;justify-content:space-between;align-items:center;height:48px;font:600 17px/1 "Inter",sans-serif;color:#17140f}
.w-price .ws-sig{display:flex;align-items:flex-end;gap:3px}
.w-price .ws-sig i{display:block;width:4px;background:#17140f;border-radius:1px}
.w-price .ws-sig i:nth-child(1){height:6px}.w-price .ws-sig i:nth-child(2){height:9px}.w-price .ws-sig i:nth-child(3){height:12px}
.w-price .ws-sig b{display:block;width:24px;height:12px;margin-left:6px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #17140f;background:linear-gradient(90deg,#17140f 70%,transparent 70%) 2px 2px/18px 8px no-repeat}
.w-price .ws-eb{margin:8px 0 8px;font:700 17px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6d655b}
.w-price .ws-shot{height:296px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:#fff}
.w-price .ws-shot img{height:272px;width:auto}
.w-price .ws-name{margin:20px 0 0;font:700 26px/1.2 "Inter",sans-serif;color:#17140f}
.w-price .ws-name .nb{color:#c8281b}
.w-price .ws-price{display:flex;align-items:baseline;margin:10px 0 0;font:800 64px/1 "Inter",sans-serif;letter-spacing:-.03em;color:#c8281b}
.w-price .ws-price .n{margin:0;font:800 64px/1 "Inter",sans-serif;letter-spacing:-.03em;color:#c8281b}
.w-price .ws-price u{margin-left:6px;font:700 34px/1 "Inter",sans-serif;text-decoration:underline}
.w-price .ws-src{margin:14px 0 0;font:500 17px/1.3 "Inter",sans-serif;color:#4c463e}
.w-price .ws-tag{position:absolute;left:24px;bottom:22px;margin:0;padding:4px 10px;border-radius:999px;font:600 17px/1.2 "Inter",sans-serif;letter-spacing:.04em;color:#6d655b;box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.25)}
.w-carton{display:flex;flex-direction:column;justify-content:center;padding:0 18px;background:#f3ead8;color:#1d1812;border-radius:4px;box-shadow:inset 0 0 0 3px rgba(29,24,18,.75)}
.w-carton .wc-k{margin:0;font:800 30px/1.1 "Inter",sans-serif}
.w-carton .wc-k .nb{color:#c8281b}
.w-carton .wc-v{margin:6px 0 0;font:700 40px/1 "Inter",sans-serif;letter-spacing:-.01em}

/* e: points lighting up over the scene */
.lite{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.lite circle{fill:#FFD9A0;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .35s var(--e) var(--d,0ms),transform .5s var(--e) var(--d,0ms)}
.lite circle.hot{fill:var(--chili)}
.bt.on .lite circle,.bt.pre .lite circle{opacity:.95;transform:none}
.bt.stg.pre .lite{opacity:1!important}
.lite{transition:opacity .4s var(--e)}
.bt.on .page~.lite{opacity:0}

/* f: a data page: the clip's end frame blurred and darkened (a still: no backdrop blur over video), a thin light edge */
.page{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .6s var(--e)}
.bt.on .page{opacity:1}
.pg-bg{position:absolute;inset:0;width:1920px;height:1080px;object-fit:cover}   /* blurred and darkened at build time (assemble.py: <id>_pg.jpg) */
.pg-edge{position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(243,235,221,.08),inset 0 0 180px rgba(0,0,0,.55);background:radial-gradient(ellipse 70% 55% at 12% 0,rgba(255,226,179,.1),rgba(255,226,179,0) 70%)}
.bt.stg.on .page~.cz.sz::before{opacity:0}   /* a data page darkens the frame itself: the title keeps its scrim only while the camera flies (beat 20 over the bright warehouse) */
/* the before / after rows of a data page (Retail Supreme) */
.bx{display:grid;grid-template-columns:560px 300px 64px 1fr;align-items:center;row-gap:26px;width:1728px}
.bx .bl{display:flex;align-items:center;gap:16px;font:600 32px/1.2 "Inter",sans-serif;color:var(--soft)}
.bx .bl .ic{width:38px;height:38px;color:var(--cream)}
.bx .bb{font:700 56px/1 "Inter",sans-serif;color:var(--mute);text-align:right}
.bx .ar{display:flex;justify-content:center}
.bx .ar .ic{width:36px;height:36px;color:var(--soft)}
.bx .bv{display:flex;align-items:center;gap:28px}
.bx .bv .n{font:800 92px/1 "Inter",sans-serif;letter-spacing:-.03em;margin:0;color:var(--ink)}
.bx .bv .fb{flex:1;height:14px;border-radius:7px;background:rgba(243,235,221,.12);overflow:hidden}
.bx .bv .fb i{display:block;height:100%;width:0;border-radius:7px;background:var(--chili);transition:width .9s var(--e) var(--d,0ms)}
.bt.on .bx .bv .fb i{width:var(--w)}
.bx .ap{--d:inherit}
.bx-m{margin:34px 0 0;font:500 24px/1.3 "Inter",sans-serif;color:var(--soft)}
@media (prefers-reduced-motion:reduce){.call,.card,.lk path,.lk circle,.lite circle,.page,.bx .bv .fb i{transition:none!important}}
/* QA only (tools/full/stage_qa.mjs): the words hidden, their scrims and plates kept, to sample the picture behind them */
body.qa-notext #beats .bt *,body.qa-notext #beats .bt *::after{color:transparent!important}   /* the words' shadows stay: they are part of the ground the words sit on */
body.qa-notext #beats .lk,body.qa-notext #beats svg.ic,body.qa-notext #beats .rl,body.qa-notext #beats .eb i{visibility:hidden!important}
/* the owner's minimum type (brief V12 §1), deck-wide: chart labels and values >= 26 px, second lines >= 22-24 px, sources >= 18 px */
.bt .chip{font-size:18px}
.bt .src{font-size:20px}
.steps .nt{font-size:26px}
.flows .hd{font-size:26px}
.news .nd{font-size:22px}
.phases .pw{font-size:26px}
.gantt .gh{font-size:26px}
.gantt .gq span{font-size:24px}
.donut .du{font-size:24px}
.fbar em{font-size:24px}
.mx th em{font-size:22px}
.bud-k span,.bud-m,.kc-l,.lv-m{font-size:24px}
.pin.hp .pk b{font-size:24px}
/* bright day scenes (owner's brief V12 §2: no grey blur over light pictures): the top of the frame darkens 60 % -> 0 over --bh and holds
   the title; figures and labels lower down sit on edged glass cards (charcoal 82 %, 16 px radius, a 1 px 12 % white edge, a soft shadow) */
.band{position:absolute;left:0;top:0;width:1920px;height:var(--bh,36%);pointer-events:none;opacity:0;transition:opacity .45s var(--e);
  background:linear-gradient(180deg,rgba(8,7,6,.6) 0,rgba(8,7,6,.6) 62%,rgba(8,7,6,.3) 84%,rgba(8,7,6,0) 100%)}
.bt.on .band,.bt.pre .band{opacity:1}
.bt.stg.bright .sz::before{display:none}
.bt.stg.bright .call,.bt.stg.bright .tkp{padding:18px 26px 20px;border-radius:16px;background:rgba(20,18,16,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 44px rgba(0,0,0,.35)}
.bt.stg.bright .card{background:rgba(20,18,16,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 44px rgba(0,0,0,.35)}
.bt.stg.bright .src{background:rgba(20,18,16,.82)}
.bt.stg.bright .cz,.bt.stg.bright .call,.bt.stg.bright .src{text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 6px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.45),0 0 36px rgba(0,0,0,.35)}
.bt.stg.bright .call.ib{padding:0;background:none;box-shadow:none}
.bt.stg.bright .steps .st{background:rgba(20,18,16,.82)}
.bt.stg.bright .cz.tc{padding:20px 30px 26px;border-radius:16px;background:rgba(20,18,16,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 44px rgba(0,0,0,.35)}
.bt.stg.bright .steps .nt{padding:8px 14px;border-radius:10px;background:rgba(20,18,16,.82)}
.bt.stg.bright .call .cs,.bt.stg.bright .call .cl{color:var(--ink)}
/* data pages as infographics (brief V12 §4): the chart fills the frame (--zm scales its blocks), the point in the accent colour */
.bt.stg .cz .blk{zoom:var(--zm,1)}
.bt.stg .page~.cz .bars{grid-template-columns:260px 1fr 520px;gap:30px 26px}
.bt.stg .page~.cz .bars .bl{display:flex;align-items:center;gap:14px;font-size:36px}
.bt.stg .page~.cz .bars .bl .ic{width:36px;height:36px;color:var(--cream)}
.bt.stg .page~.cz .bars .tr{height:64px;border-radius:8px}
.bt.stg .page~.cz .bars .bv{display:flex;align-items:baseline;gap:20px;font-size:52px}
.bt.stg .page~.cz .bars .bv em{font:600 26px/1.2 "Inter",sans-serif;font-style:normal;color:var(--chili)}
.bars .tr.hot .fi{background:var(--chili)}
.bars .bl.hot,.bars .bl.hot .ic,.bars .bv.hot{color:var(--chili)}
.bt.stg .page~.cz .bm{font-size:26px}
.flows .fk{display:flex;align-items:center;gap:12px}
.flows .fk .ic{width:34px;height:34px;color:var(--cream);flex:none}
.bt.stg .flows>svg{height:30px}
.bt.stg .flows path{stroke:var(--chili);stroke-width:4}
.bt.stg .flows .n path{stroke:var(--teal2)}.bt.stg .flows .b2 path{stroke:var(--cream)}
.flows path.run{stroke-dasharray:.03 .09;stroke-dashoffset:0;opacity:0;stroke:#fff!important;stroke-width:4;transition:opacity .3s 1.6s;animation:flowrun 1.8s linear infinite}
.flows .n path.run{animation-direction:reverse}
.bt.on .flows path.run{opacity:.7}
@keyframes flowrun{to{stroke-dashoffset:-.12}}
.bt.stg .fdoc{font-size:22px}
.bt.stg .mx .dot{width:30px;height:30px}
.bt.stg .gantt .gr{height:64px}.bt.stg .gantt .gt,.bt.stg .gantt .sg{height:52px}
.bt.stg .gantt .sg{font-size:26px}
.bt.stg .donut svg{width:240px;height:240px}
/* the survey still to come: a small strip, not an empty page; each cell shows the question it will answer */
.strip{position:absolute;display:flex;align-items:center;gap:12px;margin:0;padding:10px 18px;border-radius:12px;font:600 22px/1.2 "Inter",sans-serif;color:var(--ink);
  background:rgba(var(--scr),.8);box-shadow:inset 0 0 0 1.5px rgba(var(--cr),.3);opacity:0;transition:opacity .45s var(--e) var(--d,0ms)}
.strip .ic{width:26px;height:26px;color:var(--acc)}
.bt.on .strip{opacity:1}
.pend.q{font-style:italic;letter-spacing:0;text-transform:none;font-weight:500;font-size:22px;outline-style:dotted}
.bt.stg .page~.cz .bars{gap:46px 26px}
.bt.stg .page~.cz .bars .tr{height:84px}
.bt.stg .page~.cz .bars .bl{font-size:40px}
/* a data page of cards (beat 11): tall cards, a large icon on top */
.card.tall{min-height:380px;padding:34px 34px 30px}
.card.tall .ck{flex-direction:column;align-items:flex-start;gap:22px;font-size:46px}
.card.tall .ck .ic{width:64px;height:64px}
.card.tall .cs{margin:22px 0 0;font-size:32px;line-height:1.3}
.bars .bl.hot,.bars .bl.hot .ic,.bars .bv.hot,.bt.stg .page~.cz .bars .bv em{color:#FF9A8A}
.ill-tag,.bt .tmp,.w-price .ws-tag{font-size:18px}
.grid3 i{font-size:20px;font-style:italic}.phn .bar,.phn .bar span,.ws-bar span,.scr .bar span{font-size:18px}
.ph-sb{font-size:18px}.w-price .ws-bar{font-size:18px}
/* a rendered still as the picture (the survey storefronts, beats 23-25): the cream chapter's words turn light over it */
.sbg{position:absolute;inset:0;width:1920px;height:1080px;object-fit:cover}
body.th-c2b .bt.stg.dk,.bt.stg.dk{--cr:243,235,221;--ink:#fff;--soft:rgba(243,235,221,.86);--mute:rgba(243,235,221,.72);--rule:rgba(243,235,221,.2);--scr:8,7,6;--sa:.62;--acc:#E8402F}
body.th-c2b .bt.stg.dk .sz::before{border-image-source:url(img/scrim-d.png)}
body.th-c2b .bt.stg.dk .cz,body.th-c2b .bt.stg.dk .src{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.45)}
body.th-c2b .bt.stg.dk .src{background:rgba(10,10,12,.6)}
.bt.stg.dk .pz .ill-c{align-items:flex-start;padding-top:330px}
/* the paper form keeps its own dark ink over the storefront still */
.bt.stg.dk .ppr{--cr:30,26,21;--ink:#1C1915;--soft:rgba(30,26,21,.86);--mute:rgba(30,26,21,.72);--rule:rgba(30,26,21,.2);color:#1C1915;text-shadow:none;zoom:.92}
.bt.stg.dk .pz .ill-c{padding-top:344px}
/* the ordering app on G3's phone (beats 35-36): the price screen's frame, the deck's teal for the proposals */
.w-connect,.w-suggest{border-radius:30px;background:#f6f3ee;color:#17140f;font-family:"Inter",sans-serif;padding:0 22px;--kt:#1f8f83}
.w-connect .ws-bar,.w-suggest .ws-bar{display:flex;justify-content:space-between;align-items:center;height:48px;font:600 18px/1 "Inter",sans-serif;color:#17140f}
.w-connect .ws-sig,.w-suggest .ws-sig{display:flex;align-items:flex-end;gap:3px}
.w-connect .ws-sig i,.w-suggest .ws-sig i{display:block;width:4px;height:9px;background:#17140f;border-radius:1px}
.w-connect .ws-sig b,.w-suggest .ws-sig b{display:block;width:24px;height:12px;margin-left:6px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #17140f}
.wa-hd{display:flex;align-items:center;gap:10px;margin:6px 0 14px;font:800 28px/1 "Inter",sans-serif;letter-spacing:-.01em}
.wa-hd .ic{width:32px;height:32px;color:var(--kt)}
.wa-hd em{margin-left:auto;padding:5px 10px;border-radius:999px;background:rgba(31,143,131,.12);color:var(--kt);font:700 18px/1 "Inter",sans-serif;font-style:normal;white-space:nowrap}
.wa-hero{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;padding:20px 18px;border-radius:20px;background:var(--kt);color:#fff;margin-bottom:12px}
.wa-hero .ic{width:40px;height:40px;grid-row:1/3}
.wa-hero b{font:800 36px/1.05 "Inter",sans-serif;letter-spacing:-.02em}
.wa-hero span{font:500 20px/1.25 "Inter",sans-serif;opacity:.92}
.wa-alert{display:flex;gap:12px;align-items:flex-start;padding:18px 16px;border-radius:20px;background:#fff1e0;box-shadow:inset 0 0 0 2px #e8902f;margin-bottom:14px}
.wa-alert .ic{flex:none;width:38px;height:38px;color:#c8571b}
.wa-alert b{display:block;font:800 32px/1.05 "Inter",sans-serif;color:#9a3a10}
.wa-alert span{display:block;margin-top:6px;font:600 20px/1.25 "Inter",sans-serif;color:#5b3a22}
.wa-h{margin:0 0 6px;font:700 20px/1.25 "Inter",sans-serif;color:#4c463e}
.wa-row{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid rgba(23,20,15,.12)}
.wa-row img{flex:none;width:auto;height:64px}
.wa-row .wa-ic{flex:none;display:grid;place-items:center;width:48px;height:64px}
.wa-row .wa-ic .ic{width:36px;height:36px;color:var(--kt)}
.wa-row p{margin:0}.wa-row b{display:block;font:700 22px/1.2 "Inter",sans-serif}
.wa-row span{display:block;margin-top:4px;font:500 18px/1.2 "Inter",sans-serif;color:#6d655b}
.wa-btn{margin:16px 0 0;padding:18px 0;border-radius:16px;background:var(--kt);color:#fff;text-align:center;font:800 26px/1 "Inter",sans-serif}
.w-connect .ws-tag,.w-suggest .ws-tag{position:absolute;left:22px;bottom:20px;margin:0;padding:4px 10px;border-radius:999px;font:600 18px/1.2 "Inter",sans-serif;letter-spacing:.04em;color:#6d655b;box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.25)}
/* the chat on G2's phone (beat 32): a plain messenger in the deck's own colours (no app's look) */
.w-chat{border-radius:30px;background:#eef1f3;color:#17140f;font-family:"Inter",sans-serif;padding:0 18px}
.w-chat .ws-bar{display:flex;justify-content:space-between;align-items:center;height:48px;font:600 18px/1 "Inter",sans-serif}
.w-chat .ws-sig{display:flex;align-items:flex-end;gap:3px}.w-chat .ws-sig i{display:block;width:4px;height:9px;background:#17140f;border-radius:1px}
.w-chat .ws-sig b{display:block;width:24px;height:12px;margin-left:6px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #17140f}
.wh-hd{display:flex;align-items:center;gap:12px;margin:0 -18px 10px;padding:8px 18px 14px;background:#fff;box-shadow:0 1px 0 rgba(23,20,15,.1)}
.wh-hd i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#1f8f83;color:#fff;font:800 24px/1 "Inter",sans-serif;font-style:normal}
.wh-hd b{display:block;font:800 26px/1.1 "Inter",sans-serif}.wh-hd span{display:block;margin-top:4px;font:500 18px/1.2 "Inter",sans-serif;color:#6d655b}
.wh-day{margin:6px auto 12px;width:max-content;padding:4px 12px;border-radius:999px;background:rgba(23,20,15,.08);font:600 18px/1.2 "Inter",sans-serif;color:#4c463e}
.wh-m{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 12px}.wh-m.me{align-items:flex-end}
.wh-m p{margin:0;max-width:250px;padding:12px 16px;border-radius:20px 20px 20px 6px;background:#fff;font:600 24px/1.25 "Inter",sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wh-m.me p{border-radius:20px 20px 6px 20px;background:#d7efe9}
.wh-m span{margin-top:4px;font:500 18px/1 "Inter",sans-serif;color:#7a736a}
.w-chat .ws-tag{position:absolute;left:18px;bottom:20px;margin:0;padding:4px 10px;border-radius:999px;font:600 18px/1.2 "Inter",sans-serif;letter-spacing:.04em;color:#6d655b;box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.25)}
/* G3's stand lip hides the screen's last ~20 px: the app's bottom edge is cut the same way, its tag sits above it */
.w-connect,.w-suggest{clip-path:inset(0 0 3.6% 0 round 30px 30px 0 0)}
.w-connect .ws-tag,.w-suggest .ws-tag{bottom:46px}