/* CUE v3 — simplify the story, increase the desire.
   Four acts: what CUE is / what CUE sees / what it means / what happens next.
   Same product vocabulary as v2, fewer chapters, more scale. */

.beat .ctx,.beat .persona,.beat .sigwrap,.beat .chain,.beat .ev,.beat .gap,.beat .cue,.beat .maps,.beat .conv{pointer-events:auto}

/* ---- shared product-surface vocabulary ---- */
.lbl{font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.14em;color:var(--brass)}
.lbl.q{color:rgba(242,236,224,.52)}
.val{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:clamp(16px,1.25vw,21px);letter-spacing:.03em;line-height:1.16}
.ed{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.12em;color:rgba(242,236,224,.66)}
.ed::before{content:"";width:6px;height:6px;background:var(--brass);flex:0 0 auto}
.ed.gapstate::before{background:none;border:1px solid rgba(242,236,224,.5)}
.panel{border:1px solid rgba(176,137,74,.34);background:rgba(0,0,0,.7);text-align:left}
.hdr{display:flex;align-items:center;gap:26px;padding:18px 26px;border-bottom:1px solid rgba(176,137,74,.34);flex-wrap:wrap}
.hdr .sp{flex:1 1 auto}
/* the recurring editorial mark on an example surface — never a legal warning */
.illus{font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.16em;color:rgba(242,236,224,.44);display:inline-flex;align-items:center;gap:12px}
.illus::before{content:"";width:22px;height:1px;background:rgba(176,137,74,.7)}

.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:center}
.bar>b{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:clamp(16px,1.35vw,23px);letter-spacing:.03em}
.bar>span{font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;color:rgba(242,236,224,.62)}
.bar>i{grid-column:1/-1;height:2px;background:rgba(242,236,224,.13);display:block}
.bar>i::after{content:"";display:block;height:100%;width:0;background:var(--brass);transition:width 1.7s cubic-bezier(.16,1,.3,1)}
.rise.in .bar>i::after{width:var(--w)}
.bars{display:grid;gap:26px}

/* ---- ACT I ---- */
#c1 .cuemark{width:min(300px,26vw);margin:0 auto 40px}
#c1 .lay{text-align:center;padding-bottom:14vh;justify-self:center}
#c1 .acts{justify-content:center}
#c2 .statement{max-width:17ch}

/* disclosure — the gate into the illustrative journey */
#cd{min-height:62vh;padding:14vh 8vw}
#cd .gate{display:grid;gap:26px;justify-items:center;max-width:none}
#cd .k{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2.4vw,40px);letter-spacing:.04em;line-height:1.04}
#cd .r{width:88px;height:1px;background:var(--brass)}
#cd p{font-size:22px;line-height:1.5;color:rgba(242,236,224,.72);text-wrap:pretty;max-width:none}
/* statements that own their moment hold one line on desktop */
#c4>h2,#c5>h2{max-width:none;white-space:nowrap}
@media (max-width:1240px){#c4>h2,#c5>h2{white-space:normal;max-width:24ch}#cd p br.wide{display:none}#cd p{max-width:52ch}}

/* ---- 02 THE WORLD ---- */
#c3{min-height:100vh;padding:16vh 5vw 12vh}
#c3 h2{font-size:clamp(38px,5.4vw,104px);line-height:.98;padding-bottom:.05em;max-width:16ch;text-wrap:balance;text-align:center}
.ctx{width:100%;max-width:1400px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(176,137,74,.34);margin:5vh 0 6vh;text-align:left}
.ctx>div{background:var(--black);padding:22px 24px;display:grid;gap:9px}
#world{position:relative;width:100%;max-width:1500px;aspect-ratio:1000/540}
#world svg{position:absolute;inset:0;width:100%;height:100%}
#world .edge{stroke:rgba(242,236,224,.16);stroke-width:1;transition:stroke .5s,stroke-width .5s}
#world .edge.hot{stroke:var(--brass);stroke-width:1.6}
#world .edge.cold{stroke:rgba(242,236,224,.05)}
#world .node{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;width:19ch}
#world .node .dot{width:9px;height:9px;border-radius:50%;background:var(--bone);margin:0 auto 14px;transition:background .4s,transform .5s}
#world .node b{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:clamp(15px,1.5vw,25px);letter-spacing:.05em;line-height:1.12;transition:color .4s,opacity .4s}
#world .node small{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;color:rgba(242,236,224,.5);margin-top:8px;opacity:0;transition:opacity .4s}
#world .node:hover .dot{background:var(--brass);transform:scale(1.5)}
#world .node:hover b{color:var(--brass)}
#world .node:hover small{opacity:1}
#world.act .node:not(:hover) b{opacity:.4}
#world .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
#world .core em{font-style:normal;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(16px,1.7vw,28px);letter-spacing:.06em;color:rgba(242,236,224,.9)}
#world .core em+span{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--brass);margin-top:10px}

/* ---- 03 WHO IS IN THE ROOM ---- */
#c4{padding:14vh 4vw 12vh;background:var(--black)}
.persona{width:100%;max-width:1560px;margin-inline:auto}
.persona .hdr .val{color:rgba(242,236,224,.72)}
.persona .pro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:4vw;padding:64px 52px 58px;border-bottom:1px solid rgba(176,137,74,.34)}
.persona .pro h3{font-size:clamp(46px,7vw,132px);line-height:.9;padding-bottom:.04em}
.persona .pro .prose{font-size:26px;max-width:38ch;margin-top:28px}
.persona .facts{display:grid;gap:30px;align-content:center}
.persona .facts>div{display:grid;gap:9px}
.persona .grid2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.86fr);gap:1px;background:rgba(176,137,74,.34)}
.persona .cell{background:var(--black);padding:46px 38px 52px;display:grid;gap:24px;align-content:start}
.persona .kv{display:grid;gap:18px}
.persona .kv>div{display:grid;gap:6px}
.persona .kv .k{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:rgba(242,236,224,.5)}
.persona .kv .v{font-size:21px;line-height:1.38;color:rgba(242,236,224,.9);text-wrap:pretty}
.persona .chg{background:var(--midnight);padding:46px 38px 52px;display:grid;gap:20px;align-content:start}
.persona .chg .d{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(34px,3.6vw,62px);line-height:1;color:var(--brass)}
.persona .chg p{font-size:21px;line-height:1.44;color:rgba(242,236,224,.88);text-wrap:pretty}

/* ---- 04 THE SIGNAL → 05 CONNECTEDINTELLIGENCE (one continuous movement) ---- */
#c5{padding:16vh 6vw 8vh}
.sigwrap{width:100%;max-width:1280px;margin-top:5vh;display:grid;gap:1px;background:rgba(176,137,74,.34)}
.sigwrap>div{background:var(--black);padding:38px 34px;text-align:left;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.sigwrap.s1>div:nth-child(1),.sigwrap.s2>div:nth-child(-n+2),.sigwrap.s3>div{opacity:1;transform:none}
.sigwrap .arrive{display:grid;gap:18px}
.sigwrap .arrive .q{font-size:30px;line-height:1.36;max-width:56ch;text-wrap:pretty}
.sigwrap .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chip{display:inline-block;border:1px solid rgba(176,137,74,.6);padding:10px 16px;font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.12em;color:var(--bone)}
.chip.v{border-color:rgba(242,236,224,.28);color:rgba(242,236,224,.6);transition:border-color .8s,color .8s}
.chip.v.lit{border-color:var(--brass);color:var(--brass)}
/* the signal does not end — it descends into the relationship */
.seam{width:1px;height:16vh;background:linear-gradient(rgba(176,137,74,0),rgba(176,137,74,.85));margin:0 auto}
#c6{padding-top:4vh}
#c6 .statement{max-width:19ch}
#c6 .prose{max-width:none;margin-top:30px}
.chain{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 20px;margin-top:7vh;max-width:1240px}
.chain span{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:clamp(16px,1.7vw,29px);letter-spacing:.04em;opacity:.22;transition:opacity 1s ease,color 1s ease}
.chain i{width:30px;height:1px;background:rgba(176,137,74,.5);flex:0 0 auto;opacity:.28;transition:opacity 1s ease}
.chain.in span,.chain.in i{opacity:1}
.chain.in span:nth-child(1){transition-delay:0s}.chain.in i:nth-child(2){transition-delay:.18s}
.chain.in span:nth-child(3){transition-delay:.34s}.chain.in i:nth-child(4){transition-delay:.5s}
.chain.in span:nth-child(5){transition-delay:.66s}.chain.in i:nth-child(6){transition-delay:.82s}
.chain.in span:nth-child(7){transition-delay:.98s}.chain.in i:nth-child(8){transition-delay:1.14s}
.chain.in span:nth-child(9){transition-delay:1.3s}.chain.in i:nth-child(10){transition-delay:1.46s}
.chain.in span:nth-child(11){transition-delay:1.62s}.chain.in i:nth-child(12){transition-delay:1.78s}
.chain.in span:nth-child(13){transition-delay:1.94s;color:var(--brass)}

/* ---- 06 EVENTS HORIZON ---- */
#c7{padding:14vh 4vw 12vh}
.ev{width:100%;max-width:1560px;margin-inline:auto}
.ev .top{padding:52px 46px 44px;border-bottom:1px solid rgba(176,137,74,.34);display:grid;gap:20px}
.ev .top h3{font-size:clamp(36px,4.6vw,86px);line-height:.96;padding-bottom:.04em;max-width:20ch;text-wrap:balance}
.ev .top .why{font-size:25px;line-height:1.44;max-width:60ch;color:rgba(242,236,224,.88);text-wrap:pretty}
.ev .body{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:1px;background:rgba(176,137,74,.34)}
.plot{position:relative;background:#020202;min-height:600px;overflow:hidden}
.plot .g{position:absolute;inset:0;background-image:linear-gradient(rgba(242,236,224,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(242,236,224,.055) 1px,transparent 1px);background-size:86px 86px}
.plot .pt{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:10px;text-align:center;width:17ch}
.plot .pt s{text-decoration:none;width:7px;height:7px;background:rgba(242,236,224,.6);display:block}
.plot .pt em{font-style:normal;font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.1em;color:rgba(242,236,224,.66);line-height:1.34}
.plot .pt.main s{width:14px;height:14px;background:var(--brass)}
.plot .pt.main em{color:var(--bone);font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:.05em}
.plot .ring{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:380px;height:380px;border:1px solid rgba(176,137,74,.3);border-radius:50%}
.plot .ring.b{width:640px;height:640px;border-color:rgba(176,137,74,.15)}
.plot .geo{position:absolute;left:28px;bottom:24px;display:grid;gap:7px}
.ev .rail{background:var(--black)}
.ev .rail>div{padding:34px 34px;border-bottom:1px solid rgba(176,137,74,.22);display:grid;gap:16px}
.ev .rail>div:last-child{border-bottom:0}
.ev .rail ul{list-style:none;display:grid;gap:13px}
.ev .rail li{font-size:20px;line-height:1.32;color:rgba(242,236,224,.88);display:grid;gap:4px}
.ev .rail li span{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:rgba(242,236,224,.46)}

/* ---- 07 THE GAP ---- */
#c8{padding:16vh 5vw 14vh}
.gap{width:100%;max-width:1460px;margin-top:5vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1px;background:rgba(176,137,74,.34);text-align:left}
.gap>div{background:var(--black);padding:48px 42px 52px;display:grid;gap:32px;align-content:start}
.gap .bar.you>b{color:var(--brass)}
.gap .bar.you>i::after{background:var(--bone)}
.vis{display:grid;gap:22px}
.vis>div{display:grid;gap:9px;padding-bottom:20px;border-bottom:1px solid rgba(242,236,224,.1)}
.vis>div:last-child{border-bottom:0;padding-bottom:0}
#c8 .lens{margin-top:6vh;max-width:60ch;font-size:clamp(24px,2.1vw,34px);line-height:1.42;color:var(--bone);text-wrap:pretty;text-align:center}

/* ---- LIVE INTELLIGENCE — a transition, not a chapter ---- */
#c9{background:var(--midnight);min-height:auto;padding:9vh 8vw}
#c9::before{display:none}
#c9 .cuemark{width:min(132px,15vw);margin:0 auto 26px;opacity:.9}
.proc{display:grid;gap:13px;justify-items:center}
.proc div{font-family:var(--font-mono);text-transform:uppercase;font-size:14px;letter-spacing:.2em;color:rgba(242,236,224,.2);transition:color .8s ease}
.proc div.on{color:var(--brass)}
.proc div.done{color:rgba(242,236,224,.6)}

/* ---- 08 YOUR CUES (carries The Opening) ---- */
#c11{padding:14vh 5vw 12vh}
#c11 .open{max-width:26ch;margin-bottom:2vh}
#c11 .drop{width:1px;height:12vh;background:linear-gradient(rgba(176,137,74,0),rgba(176,137,74,.85));margin:0 auto 6vh}
.cue{width:100%;max-width:1400px;margin-inline:auto}
.cue .top{padding:52px 44px 48px;border-bottom:1px solid rgba(176,137,74,.34);display:grid;gap:24px}
.cue .top h3{font-size:clamp(38px,5.2vw,96px);line-height:.94;padding-bottom:.04em;max-width:19ch;text-wrap:balance}
.cue .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(176,137,74,.28)}
.cue .f{background:var(--black);padding:38px 32px 42px;display:grid;gap:13px;align-content:start}
.cue .f p{font-size:21px;line-height:1.42;color:rgba(242,236,224,.9);text-wrap:pretty}
.cue .f.wide{grid-column:span 2}
.cue .btm{display:flex;align-items:center;gap:24px;padding:24px 30px;border-top:1px solid rgba(176,137,74,.34);flex-wrap:wrap}

/* ---- 09 TWO MAPS + conversion ---- */
#c12{padding:16vh 5vw 14vh}
.maps{width:100%;max-width:1500px;margin-top:6vh;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(176,137,74,.34);text-align:left}
.maps>div{background:var(--black);padding:66px 52px 74px;display:grid;gap:28px;align-content:start;min-height:56vh}
.maps h4{font-size:clamp(30px,3.4vw,60px);line-height:1;padding-bottom:.04em;text-wrap:balance}
.maps p{font-size:24px;line-height:1.45;color:rgba(242,236,224,.86);text-wrap:pretty;max-width:34ch}
.maps>div.could{background:var(--deep-navy)}
.conv{width:100%;max-width:1500px;margin-top:9vh;display:grid;justify-items:center;gap:30px}
.conv h3{font-size:clamp(32px,4vw,76px);line-height:1;padding-bottom:.04em;max-width:22ch;text-wrap:balance;text-align:center}
.conv .prose{max-width:48ch}
.form{width:min(760px,100%);display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .9s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.form>div{overflow:hidden}
.conv.open .form{grid-template-rows:1fr;opacity:1}
.conv.open .opener{display:none}
.form .in{display:grid;gap:28px;text-align:left;padding-top:5vh}
.fl{display:grid;gap:12px}
.form input,.form textarea{width:100%;background:rgba(0,0,0,.5);border:0;border-bottom:1px solid rgba(242,236,224,.42);color:var(--bone);font-family:var(--font-body);font-size:24px;line-height:1.4;padding:14px 2px;transition:border-color .4s}
.form textarea{resize:vertical;min-height:100px}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--brass)}
.form input::placeholder,.form textarea::placeholder{color:rgba(242,236,224,.34)}
.form .acts{justify-content:flex-start;margin-top:8px}
.form .thanks{display:none;font-size:25px;line-height:1.5;color:var(--bone);text-wrap:pretty}
.form.sent .fl,.form.sent .acts{display:none}
.form.sent .thanks{display:block}

@media (max-width:1180px){
.ctx,.cue .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
.cue .f.wide{grid-column:span 2}
.persona .pro,.persona .grid2,.ev .body,.gap,.maps{grid-template-columns:1fr}
#world{aspect-ratio:1000/800}
}

/* ---- mobile: preserve hierarchy and pacing, not a scaled-down desktop ---- */
@media (max-width:820px){
#c3,#c5,#c8,#c12{padding-left:6vw;padding-right:6vw}
#c4,#c7,#c11{padding-left:4vw;padding-right:4vw}
.ctx{grid-template-columns:1fr;margin:4vh 0 5vh}
.ctx>div{padding:18px 20px}
#world{aspect-ratio:auto;height:auto;display:grid;gap:26px;max-width:34ch;margin-inline:auto}
#world svg{display:none}
#world .core{position:static;transform:none;order:-1;padding-bottom:8px}
#world .node{position:static!important;transform:none;width:auto;text-align:center;padding:16px 0;border-top:1px solid rgba(176,137,74,.28)}
#world .node .dot{margin-bottom:10px}
#world .node small{opacity:1}
#world.act .node:not(:hover) b{opacity:1}
.persona .pro{padding:38px 26px 34px}
.persona .pro h3{font-size:clamp(46px,15vw,74px)}
.persona .pro .prose{font-size:21px;margin-top:20px}
.persona .facts{gap:22px;padding-top:6px}
.persona .cell,.persona .chg{padding:32px 26px 36px}
.persona .hdr{gap:12px;padding:16px 20px}
.sigwrap>div{padding:28px 22px}
.sigwrap .arrive .q{font-size:23px}
.chain{gap:10px 14px;margin-top:5vh}
.chain i{width:18px}
.seam{height:11vh}
.ev .top{padding:34px 24px 30px}
.ev .top .why{font-size:21px}
.plot{min-height:0;aspect-ratio:1/1.06}
.plot .ring{width:56vw;height:56vw}
.plot .ring.b{width:84vw;height:84vw}
.plot .pt{width:12ch;gap:7px}
.plot .pt em{font-size:13px;letter-spacing:.06em}
.plot .pt.main em{font-size:15px}
.plot .g{background-size:54px 54px}
.plot .geo{left:18px;bottom:18px}
.ev .rail>div{padding:26px 24px}
.gap>div{padding:34px 24px 38px}
.vis>div{padding-bottom:16px}
#c8 .lens{font-size:22px;margin-top:5vh}
#c9{padding:7vh 6vw}
.proc div{font-size:13px;letter-spacing:.14em;text-align:center}
#c11 .drop{height:9vh;margin-bottom:5vh}
.cue .top{padding:34px 24px 32px}
.cue .g3{grid-template-columns:1fr}
.cue .f,.cue .f.wide{grid-column:auto;padding:28px 24px 30px}
.cue .btm{padding:20px 24px}
.maps{margin-top:5vh}
.maps>div{padding:44px 26px 50px;min-height:0}
.maps p{font-size:22px;max-width:none}
.conv{margin-top:7vh;gap:24px}
.form input,.form textarea{font-size:21px}
/* touch targets */
.cta{min-height:52px;display:inline-flex;align-items:center}
}