/* OpusFunnel site v2
   A drawn grid: one 1180px column with hairlines down both sides, sections as
   cells, four grounds in rotation (white, warm grey, dark, texture-in-a-cell),
   two-tone headlines, pill labels, cropped UI fragments rather than full
   screenshots. Image slots are placeholders until the capture pass. */

:root{
  --ink:#141216; --ink-2:#4F4955; --muted:#7E7784;
  --ground:#FFFFFF; --grey:#F6F4F0; --panel:#FFFFFF;
  --rule:#E7E3DC; --rule-2:#D5CFC5;
  --accent:#0F52BA; --accent-ink:#0B3D8C; --accent-soft:#E9EFFA;
  --dark:#0E0D10; --dark-2:#17151A; --dark-rule:#2A272E; --dark-ink:#F2EFEA; --dark-muted:#9A939F;
  --dot:radial-gradient(circle,var(--rule-2) 1px,transparent 1.2px);
  --lines:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 14px);
  --shadow:0 1px 2px rgba(20,18,22,.05),0 14px 34px -18px rgba(20,18,22,.24);
  --col:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F2EFEA; --ink-2:#C4BDB4; --muted:#8F887F;
    --ground:#121013; --grey:#181519; --panel:#1B181D;
    --rule:#2B262C; --rule-2:#3B353D;
    --accent:#6E9BF0; --accent-ink:#9CBCF6; --accent-soft:#16223A;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ink:#F2EFEA; --ink-2:#C4BDB4; --muted:#8F887F;
  --ground:#121013; --grey:#181519; --panel:#1B181D;
  --rule:#2B262C; --rule-2:#3B353D;
  --accent:#6E9BF0; --accent-ink:#9CBCF6; --accent-soft:#16223A;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -18px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Public Sans",ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-weight:700;
  letter-spacing:-.03em;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── the column ── */
.col{max-width:var(--col);margin:0 auto;position:relative;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.cell{padding:88px 56px;border-bottom:1px solid var(--rule)}
.cell.tight{padding:56px 56px}
.cell.flush{padding:0}
.band{border-bottom:1px solid var(--rule)}
.band.grey{background:var(--grey)}
.band.dark{background:var(--dark);color:var(--dark-ink);--rule:var(--dark-rule);--muted:var(--dark-muted);--ink:var(--dark-ink);--ink-2:#CFC8C0}
.band.dark .col{border-color:var(--dark-rule)}
.band.dark .cell{border-color:var(--dark-rule)}
@media (max-width:760px){.cell,.cell.tight{padding:56px 22px}}

/* ── type ── */
.pill{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.02em;
  padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);margin-bottom:18px}
.band.dark .pill{background:#1F2B45;color:#9CBCF6}
.h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:22ch}
.h2 span:not(.w),.h1 span:not(.w){color:var(--muted);font-weight:600}
.h1 .w,.h2 .w{color:inherit;font-weight:inherit}
.h1{font-size:clamp(2.3rem,5.4vw,4rem);max-width:18ch;letter-spacing:-.04em}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:56ch;margin-top:18px}
.centre{text-align:center}.centre .h1,.centre .h2,.centre .lead{margin-left:auto;margin-right:auto}
.small{font-size:.9rem;color:var(--muted)}
.h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.h3 + p{color:var(--ink-2);margin-top:6px;font-size:.95rem}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:9px;
  background:var(--ink);color:var(--ground);font-weight:600;font-size:.93rem;text-decoration:none;
  border:1px solid transparent;white-space:nowrap}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{background:var(--grey);opacity:1}
.btn.accent{background:var(--accent);color:#fff}
.btn.lg{height:50px;padding:0 24px;font-size:1rem;border-radius:11px}
.band.dark .btn{background:var(--dark-ink);color:var(--dark)}
.band.dark .btn.ghost{background:transparent;color:var(--dark-ink);border-color:var(--dark-rule)}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.centre .ctas{justify-content:center}

/* ── nav ── */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.top .col{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;border-bottom:0}
.logo{display:inline-flex;align-items:center;gap:0;font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.03em;font-size:1.2rem;text-decoration:none;color:#172339}
.logo img{width:auto;height:34px;display:block}
footer .logo img{height:30px}
.logo span{color:#044FFD}
:root:not([data-theme="light"]) .logo{color:var(--ink)}
:root[data-theme="dark"] .logo{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo{color:var(--ink)}}
.nlinks{display:flex;gap:26px;font-size:.93rem;font-weight:500}
.nlinks a{text-decoration:none;color:var(--ink-2)}
.nlinks a:hover,.nlinks a[aria-current]{color:var(--ink)}
.nright{display:flex;gap:8px;align-items:center}
.nright .signin{font-size:.93rem;font-weight:500;text-decoration:none;color:var(--ink-2);padding:0 10px}
@media (max-width:900px){.nlinks{display:none}.nright .signin{display:none}}

/* ── image slots (placeholders until the capture pass) ── */
.frame{background:var(--panel);border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.frame .bar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--grey)}
.frame .bar i{width:8px;height:8px;border-radius:50%;background:var(--rule-2)}
.frame .bar span{margin-left:8px;flex:1;max-width:260px;height:16px;border-radius:5px;background:var(--ground);border:1px solid var(--rule)}
.ph{position:relative;display:grid;place-items:center;text-align:center;
  background:var(--grey);background-image:var(--dot);background-size:14px 14px;
  border:1px dashed var(--rule-2);color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.72rem;line-height:1.5;padding:16px}
.frame .ph{border:0;border-radius:0}
.ph b{display:block;font-weight:600;color:var(--ink-2);font-family:inherit}
.ph small{display:block;opacity:.8}
.ph.r16{aspect-ratio:16/9}.ph.r4{aspect-ratio:4/3}.ph.r1{aspect-ratio:1}.ph.r3{aspect-ratio:3/2}.ph.r21{aspect-ratio:21/9}.ph.phone{aspect-ratio:9/19}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band.dark .ph{background:var(--dark-2);background-image:radial-gradient(circle,#3A3640 1px,transparent 1.2px);background-size:14px 14px;border-color:var(--dark-rule);color:var(--dark-muted)}
.band.dark .ph b{color:var(--dark-ink)}
.band.dark .frame{background:var(--dark-2);border-color:var(--dark-rule)}
.band.dark .frame .bar{background:#141216;border-color:var(--dark-rule)}
.band.dark .frame .bar i{background:#3A3640}
.band.dark .frame .bar span{background:var(--dark-2);border-color:var(--dark-rule)}

/* ── hero ── */
.hero{padding:96px 56px 0;text-align:center}
.hero .stage{margin-top:56px;position:relative;padding:40px 0 0;
  background-image:var(--lines);background-size:14px 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.hero .duo{display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:end;padding:0 24px}
.hero .duo .phone{border-radius:28px;border:1px solid var(--rule);background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
@media (max-width:760px){.hero{padding:64px 22px 0}.hero .duo{grid-template-columns:1fr}.hero .duo .phone{display:none}}

/* ── logos ── */
.logos{display:grid;grid-template-columns:repeat(5,1fr)}
.logos div{height:78px;display:grid;place-items:center;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase}
.logos div:nth-child(5n){border-right:0}
.logos div:nth-last-child(-n+5){border-bottom:0}
@media (max-width:760px){.logos{grid-template-columns:repeat(2,1fr)}.logos div:nth-child(5n){border-right:1px solid var(--rule)}.logos div:nth-child(2n){border-right:0}}

/* ── two doors ── */
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{padding:56px;border-right:1px solid var(--rule);text-decoration:none;display:flex;flex-direction:column;gap:14px;transition:background .2s}
.door:last-child{border-right:0}
.door:hover{background:var(--grey)}
.door .h2{font-size:1.6rem}
.door .go{margin-top:auto;font-weight:600;color:var(--accent-ink);display:inline-flex;gap:6px;align-items:center}
@media (max-width:760px){.doors{grid-template-columns:1fr}.door{border-right:0;border-bottom:1px solid var(--rule);padding:36px 22px}}

/* ── platform with a sticky rail ── */
.plat{display:grid;grid-template-columns:250px 1fr}
.rail{position:sticky;top:64px;align-self:start;padding:72px 32px 72px 56px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--rule)}
.rail a{text-decoration:none;color:var(--muted);font-weight:500;padding-left:14px;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.rail a[aria-current]{color:var(--ink);border-left-color:var(--accent)}
.plat .cards{background:var(--grey)}
.card{border-bottom:1px solid var(--rule);background:var(--panel)}
.card .txt{padding:40px 48px 20px;max-width:60ch}
.card .txt .h3{font-size:1.25rem}
.card .txt .h3 span{color:var(--muted);font-weight:500}
.card .art{padding:36px 48px 48px}
.card.dots .art{background-image:var(--dot);background-size:14px 14px}
.card.grey{background:var(--grey)}
.pair{display:grid;grid-template-columns:1fr 1fr}
.pair .card{border-right:1px solid var(--rule)}
.pair .card:last-child{border-right:0}
.pair .card .txt{padding:32px 32px 16px}
.pair .card .art{padding:28px 32px 32px}
@media (max-width:900px){.plat{grid-template-columns:1fr}.rail{position:static;flex-direction:row;flex-wrap:wrap;gap:10px 18px;padding:28px 22px;border-right:0;border-bottom:1px solid var(--rule)}.rail a{padding-left:0;border-left:0;font-size:.9rem}.pair{grid-template-columns:1fr}.pair .card{border-right:0}.card .txt,.pair .card .txt{padding:28px 22px 12px}.card .art,.pair .card .art{padding:20px 22px 28px}}

/* ── statement ── */
.state{padding:120px 56px 72px;text-align:center}
.state .h2{max-width:30ch;margin:0 auto}
.state .big{margin:56px auto 0;max-width:980px;padding:0 0 60px;
  background-image:var(--lines);background-size:14px 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}

/* ── dark, the brand moment ── */
.horizon{position:relative;overflow:hidden;padding:120px 56px 96px;text-align:center}
.horizon::before{content:"";position:absolute;left:50%;bottom:-62vw;width:120vw;height:120vw;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(110,155,240,.18),rgba(110,155,240,.05) 60%,transparent 72%);
  border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -40px 120px -20px rgba(110,155,240,.35);pointer-events:none}
.horizon>*{position:relative}
.horizon .h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-left:auto;margin-right:auto}
.horizon .lead{margin-left:auto;margin-right:auto}
.twice>div:not(:has(img)){display:none}
.twice:not(:has(img)){display:none}
.twice{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;text-align:left}
.twice .lab{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:10px}
.claims{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--dark-rule)}
.claims div{padding:28px 24px;border-right:1px solid var(--dark-rule)}
.claims div:last-child{border-right:0}
.claims .h3{color:var(--dark-ink);font-size:1rem}
.claims p{color:var(--dark-muted);font-size:.9rem;margin-top:6px}
@media (max-width:900px){.twice{grid-template-columns:1fr}.claims{grid-template-columns:1fr 1fr}.claims div{border-bottom:1px solid var(--dark-rule)}}
@media (max-width:560px){.claims{grid-template-columns:1fr}}

/* ── quote ── */
.quote{padding:96px 56px;text-align:center;background-image:var(--dot);background-size:14px 14px}
.quote blockquote{margin:0 auto;max-width:28ch;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.25;letter-spacing:-.01em}
.quote cite{display:block;margin-top:24px;font-style:normal;font-size:.9rem;color:var(--muted)}

/* ── stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:72px 56px 0}
.stat{border-left:2px solid var(--accent);padding:2px 0 0 16px}
.stat b{display:block;font-family:"Archivo",sans-serif;font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--muted);font-size:.88rem;margin-top:6px}
.statline{height:200px;margin-top:-24px;background-image:var(--lines);background-size:14px 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%,#000);mask-image:linear-gradient(to bottom,transparent,#000 40%,#000);border-bottom:1px solid var(--rule)}
.statline svg{width:100%;height:100%;display:block}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:28px;padding:56px 22px 0}}

/* ── steps (a real sequence) ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr)}
.step{padding:40px 32px;border-right:1px solid var(--rule)}
.step:last-child{border-right:0}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.step .h3{margin-top:10px}
.step .ph{margin-top:20px}
@media (max-width:760px){.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--rule)}}

/* ── generic grids ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0}
.grid2>*{padding:40px 48px;border-right:1px solid var(--rule)}
.grid2>*:last-child{border-right:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid3>*{padding:36px 32px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.grid3>*:nth-child(3n){border-right:0}
.grid3>*:nth-last-child(-n+3){border-bottom:0}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}.grid2>*,.grid3>*{border-right:0;border-bottom:1px solid var(--rule);padding:28px 22px}.grid3>*:nth-child(3n){border-right:0}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}

/* ── calculator ── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0}
.calc .in{padding:40px 48px;border-right:1px solid var(--rule)}
.calc .out{padding:40px 48px;background:var(--grey)}
.calc label{display:block;font-size:.85rem;font-weight:600;margin-top:18px}
.calc label:first-child{margin-top:0}
.calc input[type=range]{width:100%;margin-top:8px;accent-color:var(--accent)}
.calc input[type=number]{width:100%;margin-top:8px;height:40px;border:1px solid var(--rule-2);border-radius:8px;padding:0 12px;font:inherit;background:var(--ground);color:var(--ink)}
.calc .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.calc .row b{font-variant-numeric:tabular-nums}
.calc .total{margin-top:16px;padding-top:16px}
.calc .total b{font-family:"Archivo",sans-serif;font-size:2rem;letter-spacing:-.03em}
@media (max-width:760px){.calc{grid-template-columns:1fr}.calc .in{border-right:0;border-bottom:1px solid var(--rule)}.calc .in,.calc .out{padding:28px 22px}}

/* ── comparison table ── */
.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font-weight:600;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.tbl td:first-child{font-weight:600}
.tbl .y{color:#1B7F4B}.tbl .n{color:var(--muted)}.tbl .s{color:#B4542A}
.tblwrap{overflow-x:auto}

/* ── pricing ── */
.plans{display:grid;grid-template-columns:repeat(4,1fr)}
.plan{padding:36px 28px;border-right:1px solid var(--rule)}
.plan:last-child{border-right:0}
.plan.hot{background:var(--grey)}
.plan .h3{font-size:1.1rem}
.plan .price{font-family:"Archivo",sans-serif;font-size:2.2rem;font-weight:700;letter-spacing:-.03em;margin-top:14px}
.plan .price small{font-size:.9rem;font-weight:500;color:var(--muted);font-family:"Public Sans",sans-serif;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:8px;font-size:.9rem;color:var(--ink-2)}
.plan ul li::before{content:"—";color:var(--rule-2);margin-right:8px}
@media (max-width:900px){.plans{grid-template-columns:1fr 1fr}.plan{border-bottom:1px solid var(--rule)}}
@media (max-width:560px){.plans{grid-template-columns:1fr}.plan{border-right:0}}

/* ── faq ── */
.faq details{border-bottom:1px solid var(--rule);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin-top:10px;max-width:70ch;font-size:.95rem}

/* ── newsletter ── */
.news{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:40px 56px}
.news form{display:flex;gap:8px}
.news input{height:42px;width:min(280px,60vw);border:1px solid var(--rule-2);border-radius:9px;padding:0 12px;font:inherit;background:var(--ground);color:var(--ink)}
@media (max-width:760px){.news{padding:28px 22px}}

/* ── closing ── */
.close{padding:110px 56px;text-align:center;background-image:repeating-linear-gradient(90deg,var(--dark-rule) 0 1px,transparent 1px 14px);background-size:14px 100%}
.close .h1{font-size:clamp(2rem,4.6vw,3.4rem);margin-left:auto;margin-right:auto}
.close .lead,.close p{margin-left:auto;margin-right:auto}

/* ── footer ── */
footer{background:var(--dark);color:var(--dark-ink);--rule:var(--dark-rule)}
footer .col{border-color:var(--dark-rule);padding:56px 56px 32px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.fgrid h4{font-size:.8rem;color:var(--dark-muted);font-weight:600;margin-bottom:12px;font-family:"Public Sans",sans-serif;letter-spacing:.02em}
.fgrid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.9rem}
.fgrid a{text-decoration:none;color:#D9D3CB}
.fgrid a:hover{color:#fff}
.fgrid .fb p{color:var(--dark-muted);font-size:.9rem;max-width:30ch;margin-top:10px}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--dark-rule);font-size:.8rem;color:var(--dark-muted)}
.fbot a{color:inherit;text-decoration:none;margin-left:16px}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}footer .col{padding:40px 22px 24px}}

/* ── motion ── */
.up{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.up.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.up{opacity:1;transform:none;transition:none}}

/* ── hero: centred, wide, and the text rises in ── */
.hero .h1{max-width:24ch;margin-left:auto;margin-right:auto}
.hero .lead{max-width:66ch;margin-left:auto;margin-right:auto;font-size:1.15rem}
.hero .ctas{justify-content:center}
.legacy .hero{text-align:center;padding:64px 0 56px}
.legacy .hero h1{max-width:24ch;margin:0 auto;font-size:clamp(2.3rem,5.4vw,4rem)}
.legacy .hero .sub{max-width:66ch;margin-left:auto;margin-right:auto;font-size:1.15rem}
.legacy .hero .ctas{justify-content:center}
.legacy .hero .micro,.legacy .hero .eyeb{text-align:center}
.legacy .phead{text-align:center;padding:64px 0 32px}
.legacy .phead h1{max-width:24ch;margin:0 auto}
.legacy .phead p,.legacy .phead .meta,.legacy .phead .byline{margin-left:auto;margin-right:auto}
.legacy .crumb{text-align:center}
.w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(4px);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
.rise{opacity:0;transform:translateY(14px);animation:riseSoft .7s ease forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
@keyframes riseSoft{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.w,.rise{opacity:1;transform:none;filter:none;animation:none}}
.legacy section.hero .stack{justify-items:center}
.legacy section.hero .stack .lede{text-align:center}
.legacy .hero > .lab,.legacy .phead > .lab,.legacy section.hero .eyebrow{display:inline-block;margin-left:auto;margin-right:auto}
.legacy .hero > .lab{display:table;margin:0 auto 14px}
/* first line runs the full column, no balanced split */
.legacy .hero h1,.legacy .phead h1,.legacy section.hero h1{max-width:none;text-wrap:normal}
.hero .h1{max-width:none;text-wrap:normal}
.legacy .hero .sub{max-width:72ch}
/* page-level styles load after this file, so the hero alignment has to win */
.legacy .hero,.legacy .hero h1,.legacy .hero .sub,.legacy .hero .micro,.legacy .phead,.legacy .phead h1,.legacy section.hero{text-align:center!important}
.legacy .hero .ctas{justify-content:center!important}

.ph:has(img){border-style:solid;background-image:none}
/* A slot still empty at launch is not shown; the card keeps its words. */
.ph:not(:has(img)){display:none}
.frame:not(:has(img)){display:none}
.art:not(:has(img)){display:none}

/* The hero film: one app window. The sidebar stays. A cursor walks down the
   menu, clicks the next item, and the middle changes -- a tour, not a slideshow. */
.film{position:relative;max-width:1060px;margin:0 auto;text-align:left}
.shell{position:relative;display:grid;grid-template-columns:172px 1fr;aspect-ratio:16/9.6;background:#F6F7F9}
.side{background:#fff;border-right:1px solid #E5E7EB;padding:14px 10px;font-size:.72rem;color:#4B5563;overflow:hidden}
.side-logo img{height:22px;width:auto;display:block;margin:2px 4px 12px}
.side-ws{border:1px solid #E5E7EB;border-radius:8px;padding:6px 8px;font-weight:600;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.side li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;white-space:nowrap;transition:background .3s,color .3s}
.side li i{width:12px;height:12px;border-radius:3px;border:1.5px solid #9CA3AF;flex:none;transition:border-color .3s,background .3s}
.side li:nth-child(6){margin-top:10px;padding-top:12px;border-top:1px solid #E5E7EB;border-radius:0}
.side li.hover{background:#F3F4F6}
.side li.on{background:#EEF2F7;color:#0F172A;font-weight:600}
.side li.on i{border-color:var(--accent);background:var(--accent-soft)}
.film .reel{position:relative;overflow:hidden;background:#F6F7F9}
.film .scene{position:absolute;inset:0;margin:0;opacity:0;transform:translateX(5%);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.film .scene.on{opacity:1;transform:none;pointer-events:auto}
.film .scene.off{opacity:0;transform:translateX(-5%)}
.film .scene img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transform-origin:50% 0}
.film .scene.on img{animation:filmMove 4.6s linear forwards}
@keyframes filmMove{from{transform:scale(1) translateY(0)}to{transform:scale(1.035) translateY(-2.5%)}}
.film .cursor{position:absolute;left:60px;top:80px;width:18px;height:18px;pointer-events:none;z-index:4;transition:left 1.1s cubic-bezier(.3,.6,.2,1),top 1.1s cubic-bezier(.3,.6,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.film .cursor::before{content:"";position:absolute;inset:0;background:#0F172A;clip-path:polygon(0 0,100% 52%,58% 60%,42% 100%,0 0)}
.film .cursor::after{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(15% 12%,78% 50%,52% 55%,40% 84%,15% 12%);transform:scale(.72);transform-origin:0 0}
.film .cursor i{position:absolute;left:-10px;top:-10px;width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);opacity:0;transform:scale(.4)}
.film .cursor.click i{animation:clickRing .55s ease-out}
@keyframes clickRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
.film .chip{position:absolute;left:20px;bottom:20px;max-width:min(80%,520px);padding:11px 16px;border-radius:14px;background:rgba(15,23,42,.92);color:#fff;font-size:.95rem;font-weight:500;line-height:1.35;box-shadow:0 12px 32px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:opacity .45s ease .35s,transform .45s ease .35s}
.film .scene.on .chip{opacity:1;transform:none}
@media (max-width:760px){.shell{grid-template-columns:1fr;aspect-ratio:4/3}.side,.film .cursor{display:none}.film .chip{left:12px;bottom:12px;font-size:.85rem;max-width:88%}}
@media (prefers-reduced-motion:reduce){.film .scene.on img{animation:none}.film .scene{transition:none}.film .cursor{display:none}}