/* cutvey.com: the home page and the scenes (home and stage pages only).
   A scene is finished HTML. html.arm is set by the short script in <head> when
   motion is allowed, and hides a scene's pieces until js/scenes.js has armed
   them, so the finished frame never flashes. Everything is sized in em from
   the scene's own width, so a scene scales like a picture and never reflows. */

/* ---------- Hero: two columns, the 5:4 frame sized to the screen's height so every beat shows; phone order is headline, button, board, chips, sentence ---------- */
.hero{padding:24px 0 40px}
.hero .wrap{max-width:1480px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8.4fr);gap:24px 48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.h1-hero.big{font-size:clamp(36px,2.2vw + 16px,58px);line-height:1;font-stretch:104%;text-wrap:balance}
.hero .lede{font-size:18px;max-width:34em;margin:0;text-wrap:pretty}
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:2px}
.hero-cta .note{font-size:14px;color:var(--muted)}
.hero .who{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.who-label{font-size:15px;color:var(--muted);margin-right:4px}
.hero-stage{position:relative;justify-self:end;width:min(100%,max(540px,calc((100svh - var(--header-h) - 48px) * 1.25)))}
.hero-stage [data-screen]{position:relative}
.hero-stage [data-screen][hidden]{display:none}
.hero-stage figcaption{padding-right:0}
.hero-stage .scene-ctl{top:10px;right:10px;bottom:auto;min-height:30px;background:rgba(255,255,255,.94);border-color:rgba(10,10,13,.12);color:#16161A;box-shadow:0 2px 10px rgba(10,10,13,.12)}
.chip-go{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;min-height:30px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.94);color:#16161A;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 2px 10px rgba(10,10,13,.12)}
.chip-go::after{content:"";position:absolute;inset:-7px -4px}
.chip-go:hover{color:var(--violet-text)}
@media (max-width:1000px){
  .hero{padding:20px 0 28px}
  .hero .wrap{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .hero-copy{display:contents}
  .hero .h1-hero{order:1}.hero-cta{order:2}.hero-stage{order:3;align-self:center;width:min(100%,max(358px,calc((100svh - 300px) * 1.25)))}.hero .who{order:4}.hero .lede{order:5}
}
@media (max-width:700px){
  .hero{padding:16px 0 20px;text-align:left}
  .h1-hero.big{font-size:7.3vw;font-stretch:98%;line-height:1.06}
  .hero .lede{font-size:17px}
  .hero-cta{align-items:stretch}.hero-cta .note{text-align:center}
  .hero-stage{width:100%}
  .hero .chip-row{flex-wrap:wrap;overflow:visible;margin-right:0;padding:0}
  .hero .chip{padding:0 14px}
}

/* ---------- Scene frame ---------- */
.scene-fig{position:relative;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.scene-fig figcaption{font-size:14px;line-height:1.4;color:var(--muted);text-align:left;padding-right:92px}
.band-ink .scene-fig figcaption{color:#9A9AA6}
.sc{container:sc/inline-size;contain:layout paint style;position:relative;border-radius:22px;overflow:hidden;background:#fff;--ar:8/5;--w:38;--ws:22.4;--ars:4/5}
.sc-in{position:relative;width:100%;aspect-ratio:var(--ar);font-size:16px;font-size:calc(100cqw/var(--w));line-height:1.3;color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:1.6em}
@container sc (max-width:470px){.sc-in{font-size:calc(100cqw/var(--ws));aspect-ratio:var(--ars);padding:1em}}
html.arm .sc:not([data-state]) .sc-in>:not(.ghost){visibility:hidden}
.sc.tint,.sc.bone{background:#E9E7E1}.sc.ink{background:#0F0F14}.sc.film{background:#15151A}
.sc .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.28),rgba(10,10,13,0) 50%)}
.sc .shade.b{background:linear-gradient(0deg,rgba(10,10,13,.55),rgba(10,10,13,0) 60%)}
.sc-wide{--w:58;--ar:16/9;--ars:1/1}
[data-scene="packs"]{--ars:358/412}
.sc.short{--ars:5/4}
@media (max-width:900px){.sc-wide{--w:48}}
.sc-wide.film .sc-in{align-items:end;padding:2em}
.scene-ctl{position:absolute;right:0;bottom:-2px;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);font:600 13px/1 var(--font-sans);cursor:pointer}
.scene-ctl::before{content:"";position:absolute;inset:-7px -2px}
.band-ink .scene-ctl{background:#17171D;border-color:#33333D;color:#F2F2F5}

/* the rendering's parts */
.c{position:relative;background:#fff;border-radius:1em;padding:1.3em;box-shadow:0 1em 2.6em rgba(10,10,13,.14);text-align:left;min-width:0}
.c.dark{background:#111116;color:#F2F2F5}
.sc .k{display:block;font-family:var(--font-mono);font-size:.74em;letter-spacing:.04em;color:#62626C;white-space:nowrap}
.c.dark .k,.ink .k{color:#A5A5B1}
.sc strong{display:block;font-size:1.3em;font-weight:760;line-height:1.15;letter-spacing:-.01em}
.sc .d{display:block;font-size:.88em;color:#55555E}
.c.dark .d,.ink .d{color:#B7B7C2}
.sc .n{font-family:var(--font-mono);font-weight:600;font-size:1.55em;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc .tc{font-family:var(--font-mono);font-size:.82em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc .hd{display:flex;justify-content:space-between;align-items:center;gap:.8em;min-width:0}
.sc .hd.lt .k,.sc .hd.lt .d{color:#C9C9D2}
.sc .fig{display:flex;flex-direction:column;gap:.1em}
.sc .fig.big .n{font-size:2.3em}
.pill{display:inline-flex;align-items:center;padding:.28em .7em;border-radius:99em;background:#EDEDF1;color:#3D3D45;font-size:.8em;font-weight:700;white-space:nowrap}
.pill.ok{background:#DDF5E5;color:#14663A}.pill.warn{background:#FCEFD2;color:#7A5206}.pill.vio{background:#EFEDFE;color:#4D24D6}
.st{display:inline-grid;justify-items:end}
.st>*{grid-area:1/1}
.st>:not(:last-child){opacity:0}
.tk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;border-radius:50%;background:#1F9D55}
.tk svg{width:.85em;height:.85em;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.2em;height:2.2em;border-radius:50%;background:#ECEBF4;color:#3D3D45;font-size:.74em;font-weight:700}
.nm{display:flex;flex-direction:column;min-width:0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm em{font-style:normal;font-weight:400;font-size:.84em;color:#62626C}
.dr{fill:none;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.lk{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lk rect{fill:currentColor;stroke:none}
.lockb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;background:#fff;color:#0A0A0D}
.lines,.people,.todo,.files,.meters,.shotl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lines li{display:flex;align-items:center;gap:.7em;padding:.5em 0;border-top:1px solid #EEEEF2;font-size:.92em}
.lines li:first-child{border-top:0}
.lines li>span+.tc{margin-left:auto}
.lines.big li{font-size:1em;padding:.62em 0}
.lines .tot{font-weight:750}
.people li{display:flex;align-items:center;gap:.7em;padding:.42em 0;font-size:.94em}
.people .nm{flex:1}
.todo{gap:.55em;margin:.8em 0}
.todo li{display:flex;align-items:center;gap:.6em;font-size:1em}
.sgn{min-width:0}
.sgn .d{border-top:1.5px solid #D6D6DE;padding-top:.3em}
.sig{display:block;width:100%;height:3.4em;overflow:visible}
.sig path{stroke:#1B1B22;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done{display:flex;align-items:center;gap:.6em;font-weight:650;font-size:.95em;margin-top:.8em}
.stackc{width:min(27em,100%);display:flex;flex-direction:column;gap:.55em}
.tbl{width:min(32em,100%)}

/* ---------- The hero board: a header strip with Pause, three cards, then review, invoice, delivery ---------- */
.board{--w:51.5;--ar:5/4;--ws:22.4;--ars:358/466;background:#E9E7E1}
.board .sc-in{display:grid;grid-template-columns:15em minmax(0,1fr) 15em;grid-template-rows:1.9em 13.2em 6.6em minmax(0,1fr);gap:1em;padding:1.05em 1.25em 1.25em;place-items:stretch}
html.arm .sc:not([data-state]) .sc-in>.bhead{visibility:visible}
.bhead{grid-area:1/1/2/4;display:flex;align-items:center;gap:.7em;min-width:0;padding-right:7em;white-space:nowrap;overflow:hidden}
.bhead b{font-size:1.02em;font-weight:720}
.bc{position:relative;background:#fff;border-radius:1.1em;box-shadow:0 .7em 2em rgba(10,10,13,.10);min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:1.15em 1.25em}
.bc img{display:block;width:100%;object-fit:cover}
.bc .hd{align-items:flex-start}
.bc.lead{grid-area:2/1;gap:.1em;justify-content:flex-end}
.bc.lead strong{font-size:1.85em;margin-top:auto}
.bc.lead .d{font-size:1.05em}
.bc.prop{grid-area:2/2;padding:0}
.bc.prop img{flex:1;min-height:0}
.bc.prop .in{padding:.85em 1.15em 1em;display:flex;flex-direction:column;gap:.45em}
.bc.call{grid-area:2/3;gap:.3em;justify-content:flex-start}
.bc.call .hd{flex-direction:column;align-items:flex-start;gap:.1em}
.bc.call .fig{margin-top:auto}
.bc.call .crew{display:flex;gap:.3em;margin-top:.55em}
.bc.call .tk{width:1.7em;height:1.7em}
.bc.rev,.ghost{grid-area:3/1/5/3;padding:0}
.ghost{width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 56%;border-radius:1.1em;opacity:.16}
.bc.rev .frame{position:relative;flex:1;min-height:0}
.bc.rev .frame img{position:absolute;inset:0;height:100%;object-position:50% 56%}
.pinn{position:absolute;right:1em;bottom:1em;width:15.5em;background:#fff;border-radius:.8em;padding:.75em .9em;box-shadow:0 .6em 1.6em rgba(10,10,13,.28);font-size:.95em;font-weight:600;line-height:1.28}
.pinn .k{margin-bottom:.2em;color:#4D24D6}
.bar{display:flex;align-items:center;gap:.9em;padding:.8em 1.1em;background:#fff}
.track{position:relative;flex:1;height:.3em;border-radius:1em;background:#E4E4EA}
.track i{position:absolute;inset:0;width:28%;background:#6A4BF7;border-radius:1em;transform-origin:left}
.track u{position:absolute;left:28%;top:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;border-radius:50%;background:#6A4BF7;border:.2em solid #fff;box-shadow:0 .1em .4em rgba(10,10,13,.35)}
.bc.inv{grid-area:3/3;justify-content:space-between}
.bc.inv .n{font-size:1.55em}
.bc.del{grid-area:4/3;padding:0;color:#fff}
.bc.del img{position:absolute;inset:0;height:100%}
.bc.del .scrim{position:absolute;inset:0;background:rgba(10,10,13,.62);opacity:0}
.bc.del .in{position:absolute;left:1.25em;right:1.25em;bottom:1.15em;display:flex;flex-direction:column;gap:.15em}
.bc.del .lockb{margin-bottom:.5em}
.bc.del .k{color:#fff}
.bc.del strong{font-size:1.85em}
@container sc (max-width:470px){
  .board .sc-in{font-size:calc(100cqw/var(--ws));aspect-ratio:var(--ars);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:4.3em 7.3em minmax(0,1fr) 5.9em;gap:.5em;padding:.5em}
  .bhead{display:none}
  .bc{padding:.7em .8em;border-radius:.9em}
  .bc.lead{grid-area:1/1/2/3}.bc.lead strong{font-size:1.3em;margin-top:.1em}.bc.lead .d{position:absolute;right:.85em;bottom:.75em}
  .bc .st{justify-items:start}.bc.prop{grid-area:2/1}.bc.prop img{display:none}.bc.prop .in{padding:.7em .8em;height:100%;justify-content:space-between;gap:.2em}.bc.prop .hd{flex-direction:column;gap:.2em}
  .bc.prop .n,.bc.inv .n,.bc.call .n{font-size:1.2em}
  .bc.call{grid-area:2/2}.bc.call .hd .d{display:none}.bc.call .crew{gap:.15em;margin-top:.25em}.bc.call .tk{width:1.1em;height:1.1em}
  .bc.rev,.ghost{grid-area:3/1/4/3}.ghost{border-radius:.9em}.bar{padding:.45em .7em}.pinn{width:13.5em;right:.5em;bottom:.5em;font-size:.82em}
  .bc.inv{grid-area:4/1}.bc.inv .hd{flex-direction:column;gap:.2em}
  .bc.del{grid-area:4/2}.bc.del .in{left:.85em;bottom:.7em;right:.85em}.bc.del .lockb{position:absolute;right:0;bottom:0;margin:0;width:2em;height:2em}.bc.del strong{font-size:1.3em}
}

/* ---------- Scenes ---------- */
/* chip scenes share the hero's frame size, so a press never moves the page */
.board-alt{--w:44;--ar:5/4;--ws:22.4;--ars:358/466}
.board-alt .sc-in{justify-items:start;align-items:end;padding:3.6em 2em 2em}
.board-alt .shade.l{background:linear-gradient(0deg,rgba(10,10,13,.55),rgba(10,10,13,0) 60%)}
.board-alt .bg{object-position:50% 32%}
.board-alt .cols3{height:100%;align-self:stretch}
.board-alt .col .lc{flex:1}
.sc.board-alt:has(.cols3){--ars:358/466}
.board-alt .gl{inset:3.4em 1.1em 1.1em}
.c.port{width:23em}.c.port strong{font-size:1.65em;margin-top:.2em}
.c.port.wide{width:min(30em,100%)}
.c.port .hd{margin-top:.2em}
.crewc{width:21em;display:flex;flex-direction:column;gap:.3em}
.crewc>strong{margin-bottom:.3em}
.trans{width:24em}.lines .tc{color:#62626C}
.trans .lines li{align-items:flex-start;font-size:.98em}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em;width:100%;align-self:start}
.col{display:flex;flex-direction:column;gap:.7em;min-width:0}
.lc{padding:.9em 1em;box-shadow:0 .4em 1.2em rgba(10,10,13,.08)}
.lc strong{font-size:1.08em;padding-right:1.5em}
.sc:has(.cols3){--ars:5/4}
.lc .score{position:absolute;right:.8em;top:.8em;font-family:var(--font-mono);font-size:.78em;font-weight:600;color:#4D24D6}
.lc.hot{outline:2px solid #6A4BF7}
.book{width:min(28em,100%);display:flex;flex-direction:column;gap:.7em}
.days,.slots{display:flex;gap:.45em}
.days span,.slots span{flex:1;text-align:center;padding:.55em 0;border:1px solid #DEDEE5;border-radius:.6em;font-size:.86em;white-space:nowrap}
.slots span{font-family:var(--font-mono)}
.days .on,.slots .on{background:#0A0A0D;border-color:#0A0A0D;color:#fff}
.eng{width:min(29em,100%);display:flex;flex-direction:column;gap:.6em}
.meters{gap:.6em;margin-top:.3em}
.meters li{display:grid;grid-template-columns:7.2em minmax(0,1fr) 3em;gap:.6em;align-items:center;font-size:.95em}
.meters .bar{padding:0;background:#EEEEF2;height:.55em;border-radius:1em;display:block;overflow:hidden}
.meters i{display:block;height:100%;background:#6A4BF7;border-radius:1em;transform-origin:left}
.sheet{width:min(40em,100%);display:flex;flex-direction:column;gap:1em}
.sc-wide .sheet{width:min(46em,100%)}
.pks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em}
.pk{position:relative;display:flex;flex-direction:column;gap:.2em;border:1px solid #E2E2E8;border-radius:.8em;padding:.85em .9em}
.pk .nm{font-size:1.02em}
.pk .n{font-size:1.2em}
.pk .d{font-size:.8em}
.pk.pick{border:2px solid #6A4BF7;padding:calc(.85em - 1px) calc(.9em - 1px)}
.pk .pill{position:absolute;right:.6em;top:-.8em}
.signrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6em;align-items:end}
.signrow .right{display:flex;flex-direction:column;align-items:flex-end;gap:.35em;text-align:right}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8em;width:min(32em,100%)}
.stp{background:#fff;border-radius:.9em;padding:1em 1.1em;box-shadow:0 .4em 1.2em rgba(10,10,13,.08)}
.stp strong{font-size:1.1em;margin-top:.2em}
.proj{align-self:end;width:100%;display:flex;flex-direction:column;gap:.4em}
.phases{display:flex;gap:.3em;margin:.3em 0}
.phases span{flex:1 1 0;min-width:0;padding-top:.5em;border-top:.25em solid #E4E4EA;font-size:.74em;color:#62626C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phases .was{flex-grow:2.6}.phases .now{flex-grow:4.6}
.phases .was{border-color:#BDB2F7}
.phases .now{border-color:#6A4BF7;color:#0A0A0D;font-weight:700}
.shotl li{display:grid;grid-template-columns:5.2em 2.2em minmax(0,1fr) auto;gap:.7em;align-items:center;padding:.4em 0}
.shotl img{width:5.2em;height:3.2em;object-fit:cover;border-radius:.4em}
.mb{position:absolute;inset:1.1em;display:grid;grid-template-columns:7fr 4fr;grid-template-rows:repeat(5,minmax(0,1fr));gap:.7em}
.mi{min-height:0;min-width:0;border-radius:.7em;overflow:hidden;background:#fff}
.mi img{width:100%;height:100%;object-fit:cover}
.mi.a{grid-area:1/1/5/2}.mi.b{grid-area:1/2/3/3}.mi.c1{grid-area:3/2/6/3}
.mi.ntxt{grid-area:5/1;padding:.6em .9em;font-weight:600;font-size:.92em;line-height:1.2;overflow:visible}
.mi.sw{position:absolute;left:.8em;top:.8em;display:flex;background:none;gap:.3em;overflow:visible}
.mi.sw i{width:1.7em;height:1.7em;border-radius:.4em;box-shadow:0 0 0 2px #fff}
.mi.react{position:absolute;right:1em;bottom:1em;padding:.5em .8em;font-size:.86em;font-weight:650;box-shadow:0 .5em 1.4em rgba(10,10,13,.25)}
.cs2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1em;width:100%}
.sc-wide .cs2{width:min(46em,100%)}
.cs,.cs2 .crewc{width:auto}
.cs{display:flex;flex-direction:column;gap:.5em}
.callb{display:flex;justify-content:space-between;align-items:center;gap:.6em;background:#6A4BF7;color:#fff;border-radius:.7em;padding:.6em .9em;font-size:.92em}
.callb b{font-size:1.45em;font-weight:760;white-space:nowrap}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:.92em;font-weight:600}
.facts li{padding:.28em 0;border-top:1px solid #EEEEF2}
.facts li:first-child{border-top:0}
.facts span{display:block;font-size:.78em;font-weight:400;color:#62626C}
.memo{background:#F4F3FE;border-radius:.7em;padding:.7em .9em;font-size:.94em}
.rv{width:100%;display:flex;flex-direction:column;gap:.7em;color:#F2F2F5;align-self:stretch}
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:1em}
.rv .nm em{color:#A5A5B1}
.rv .frame{position:relative;flex:1;min-height:0;border-radius:.7em;overflow:hidden}
.rv .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mark{position:absolute;inset:0;width:100%;height:100%}
.mark path{stroke:#FFD24A;stroke-width:6;stroke-linecap:round}
.rv .pinn{color:var(--ink);width:17em}
.rv .bar{background:none;padding:0}
.rv .track{background:#33333D}
.rv .track u{border-color:#0F0F14}
.rv .dim{color:#A5A5B1}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em;width:100%;height:100%;min-height:0}
.vf{position:relative;border-radius:.6em;overflow:hidden;min-height:0}
.vf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf .pill{position:absolute;left:.6em;top:.6em}
.vf.cur{outline:2px solid #6A4BF7}
.sc-in:has(.vs){grid-template-rows:minmax(0,1fr) auto;gap:.7em;place-items:stretch;padding:1.1em}
.sc-in:has(.vs) .hd{width:100%}
.typed{font-family:"Snell Roundhand","Segoe Script",cursive;font-size:1.7em;line-height:1.3;border-bottom:1.5px solid #D6D6DE}
.fcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em}
.fc{padding:.7em .8em;border:1px solid #E2E2E8;border-radius:.7em;font-weight:650;font-size:.92em}
.dys{display:flex;gap:.5em;margin-top:.3em}
.dy{flex:1;background:#F4F4F7;border-radius:.6em;padding:.45em .6em;font-weight:650;font-size:.86em}
.dy em{display:block;font-style:normal;font-weight:400;color:#62626C}
.payc{width:min(24em,100%)}
.payc .st{justify-items:start}
.meth{display:flex;gap:.4em}
.meth span{flex:1;text-align:center;padding:.5em;border:1px solid #DEDEE5;border-radius:.6em;font-size:.9em}
.meth .on{border-color:#0A0A0D;font-weight:700}
.dl{width:min(36em,100%);display:flex;flex-direction:column;gap:.9em}
.sc-wide .dl{width:min(38em,100%)}
.dlh{display:flex;align-items:center;gap:.8em;min-width:0}
.dlh>div{flex:1;min-width:0}
.dlh .lockb{background:#26262E;color:#fff}
.files{gap:.45em}
.files li{display:flex;align-items:center;gap:.8em;padding:.4em;background:#1B1B22;border-radius:.6em}
.files img{width:4.2em;height:2.6em;object-fit:cover;border-radius:.35em}
.files .nm em{color:#A5A5B1}
.gl{position:absolute;inset:1.1em;display:flex;flex-direction:column;gap:.6em}
.gg{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:.35em}
.gt{position:relative;min-height:0;overflow:hidden;border-radius:.3em}
.gt img{width:100%;height:100%;object-fit:cover}
.fav{position:absolute;right:.5em;top:.5em;width:1.6em;height:1.6em;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff}
.fav svg{width:1em;height:1em;fill:#D12C20}
.brandm{display:inline-flex;align-items:center;gap:.5em;font-weight:760}
.brandm i{width:1.5em;height:1.5em;border-radius:.4em;background:#0A0A0D}
.sws{display:flex;gap:.3em}
.sws i{width:1.1em;height:1.1em;border-radius:50%}
.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8em;width:100%}
.tile{display:flex;flex-direction:column;gap:.15em;padding:1em 1.1em;box-shadow:0 .4em 1.2em rgba(10,10,13,.08)}
.tile.wide{grid-column:1/-1}
.tile .n{font-size:1.4em}
.msgs{width:min(30em,100%);display:flex;flex-direction:column;gap:.6em}
.ms{display:flex;align-items:flex-end;gap:.5em}
.ms p{margin:0;background:#F1F1F5;padding:.55em .8em;border-radius:.9em;font-size:.96em}
.ms.me{justify-content:flex-end}
.ms.me p{background:#6A4BF7;color:#fff}
@container sc (max-width:470px){
  .board-alt .sc-in{padding:3.2em 1em 1em;align-items:end;justify-items:stretch}
  .board-alt .gl{inset:3.2em .8em .8em}
  .c.port,.crewc,.trans{width:100%}
  .cols3{grid-template-columns:repeat(2,minmax(0,1fr))}.hide-s{display:none}
  .pks{grid-template-columns:minmax(0,1fr)}
  .pk{display:grid;grid-template-columns:1fr auto;padding:.6em .8em}.pk .d{grid-column:1/-1}.pk .pill{display:none}
  .signrow{gap:.8em}
  .sheet,.sc-wide .sheet,.sc-wide .cs2,.sc-wide .dl{width:100%}
  .cs2{grid-template-columns:minmax(0,1fr)}.cs{display:none}
  .callb{font-size:.86em}
  .shotl li{grid-template-columns:4.4em minmax(0,1fr) auto}.shotl li>.tc:nth-of-type(1){display:none}.shotl img{width:4.4em}
    .steps{grid-template-columns:minmax(0,1fr)}
  .rv .pinn{width:13.5em}.rv-top .nm em,.hs{display:none}
  .sc-in:has(.rv){padding:.8em}
  .rv .frame{min-height:0}
  .fcs{grid-template-columns:minmax(0,1fr)}
  .gg{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  .files .nm{font-size:.86em}
  .dlh{flex-wrap:wrap}.dlh .st{justify-items:start;width:100%}
}

/* ---------- Home sections ---------- */
.retype .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;padding-top:88px;padding-bottom:88px}
.retype p{font-size:18px;line-height:1.6;color:#C9C9D2;margin:0}
.retype p.strong{color:#FFFFFF}
.retype .stack{gap:18px}
.flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.flow li{display:flex;align-items:center;gap:16px;background:var(--ink-card);border:1px solid #26262F;border-radius:10px;padding:16px 18px}
.flow .n{font-family:var(--font-mono);font-size:12px;color:#9A9AA6;width:28px;flex:none}
.flow .t{flex:1;font-size:16px;color:#F2F2F5;min-width:0}
.flow .s{font-family:var(--font-mono);font-size:12px;color:#B9A9FF}
.flow .s.paid{color:#4ADE80}
.acts{padding:112px 0 0}
.acts+.band-ink{margin-top:112px}
.acts .wrap{display:flex;flex-direction:column;gap:112px}
.act-head{display:flex;flex-direction:column;gap:14px}
.act{display:flex;flex-direction:column;gap:36px}
.act-text{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.act h3{font-size:clamp(28px,1.9vw + 18px,44px);font-weight:760;line-height:1.08;letter-spacing:-.015em}
.act .step{display:block;margin-bottom:12px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
.act p{font-size:18px;line-height:1.55;color:var(--body);margin:0}
.act .tools{margin-top:14px;font-size:16px;color:var(--muted)}
.tools a{display:inline-block;font-weight:700}
.act-ink{padding:104px 0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.client-sees .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.client-sees .h2-xl,.retype .h2-xl{font-size:clamp(26px,1.7vw + 14px,38px)}
.stack-h{grid-column:1/-1}
.stack-band .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center;padding-left:var(--gutter);padding-right:var(--gutter)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;font-size:15px;list-style:none;margin:0;padding:0}
.tiles li{background:var(--paper);border-radius:10px;padding:14px 16px}
.cta-film{position:relative;overflow:hidden;text-align:center}
.cta-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.cta-film .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:128px;padding-bottom:128px}
.cta-film h2{font-size:clamp(36px,3.8vw + 12px,64px);line-height:.98;font-weight:820;font-stretch:112%;text-transform:uppercase;color:#fff}
.cta-film p{margin:0;font-size:19px;color:#fff;max-width:560px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
@media (max-width:900px){.retype .wrap{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:56px;padding-bottom:56px}.client-sees .wrap,.stack-band .wrap{grid-template-columns:minmax(0,1fr);gap:32px}.act-text{grid-template-columns:minmax(0,1fr);gap:14px}}
@media (max-width:700px){.acts{padding-top:64px}.acts+.band-ink{margin-top:64px}.acts .wrap{gap:64px}.act{gap:22px}.act-ink{padding:56px 0}.act p{font-size:17px}.two{grid-template-columns:minmax(0,1fr)}.tn{display:none}.act .tools{margin-top:8px}.plan-card ul,.plan-card .for{display:none}.plans{gap:12px}.plan-card.pick{order:-1}.tiles{display:none}.section{padding:44px 0}.stack-band .section{padding-top:44px;padding-bottom:44px}.retype .wrap{padding-top:44px;padding-bottom:44px;gap:24px}.cta-film .wrap{padding-top:64px;padding-bottom:64px;align-items:stretch;text-align:left}.acts .wrap{gap:52px}.act-ink{padding:44px 0}.flow{gap:8px}.flow li{padding:11px 14px;gap:12px}.flow .t{font-size:15px}.act-head .eyebrow{display:none}}