/* Layout: a dark screening room. Night is the stage, colour comes from the clips and the six-arc spectrum,
   volt is the only "act now" colour (caret, send, CTA). Single dark look on purpose. */
/* Fonts, served from here (assets/fonts/, the woff2 files Google Fonts serves): Be Vietnam Pro 400-800 and Space Mono
   400/700, each split into latin, latin-ext and vietnamese by unicode-range, so a page loads only the subsets it shows.
   No request to another server before the first paint; layout.mjs preloads the two the first screen needs most. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/BeVietnamPro-400-latin.woff2?v=d25f70ff74) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/BeVietnamPro-400-latin-ext.woff2?v=c2ae124f14) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/BeVietnamPro-400-vietnamese.woff2?v=b0d9b8aec7) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BeVietnamPro-500-latin.woff2?v=0336df67f2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BeVietnamPro-500-latin-ext.woff2?v=83b86791eb) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BeVietnamPro-500-vietnamese.woff2?v=e83829fe40) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BeVietnamPro-600-latin.woff2?v=14950d0af3) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BeVietnamPro-600-latin-ext.woff2?v=90c10a1f4f) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BeVietnamPro-600-vietnamese.woff2?v=8439082403) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BeVietnamPro-700-latin.woff2?v=cf841d2b61) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BeVietnamPro-700-latin-ext.woff2?v=f446d28e98) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BeVietnamPro-700-vietnamese.woff2?v=141f6c4501) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/BeVietnamPro-800-latin.woff2?v=8a5b584172) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/BeVietnamPro-800-latin-ext.woff2?v=c7266fff47) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/BeVietnamPro-800-vietnamese.woff2?v=58a2faf884) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SpaceMono-400-latin.woff2?v=e0c8e616bd) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SpaceMono-400-latin-ext.woff2?v=b4f90459ad) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SpaceMono-400-vietnamese.woff2?v=1ab5cb4b90) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceMono-700-latin.woff2?v=af7cf6d2b8) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceMono-700-latin-ext.woff2?v=512458b32b) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceMono-700-vietnamese.woff2?v=e9c42e9aad) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
:root{
  --night:#0C0B10; --night-2:#17151F; --night-3:#25222F; --night-4:#36323F;
  --bone:#F3F4EC; --mute:#9A97A8; --ink:#0C0B10;
  --volt:#D4FF3A; --flare:#FF3D8B; --blue:#4D7CFF; --amber:#FFB21E; --mint:#2BE3A6; --violet:#A66BFF;
  --spectrum:linear-gradient(90deg,#D4FF3A 0 16.66%,#FF3D8B 0 33.33%,#4D7CFF 0 50%,#FFB21E 0 66.66%,#2BE3A6 0 83.33%,#A66BFF 0);
  --sys:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --font:"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut-l:max(20px,env(safe-area-inset-left,0px)); --gut-r:max(20px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--bone);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
.site{overflow-x:clip}
a{color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.wrap{max-width:1240px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.band{padding-block:clamp(72px,10vw,128px);position:relative}
.kicker{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;gap:10px}
.kicker i{width:10px;height:10px;border-radius:50%;background:var(--k,var(--volt));flex:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
.h1{font-weight:800;font-size:clamp(42px,8vw,100px);line-height:.94;letter-spacing:-.045em}
.h1.sm{font-size:clamp(40px,6.2vw,88px)}
.h2{font-weight:800;font-size:clamp(38px,5.4vw,74px);line-height:.98;letter-spacing:-.04em}
.h3{font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--mute);max-width:54ch}
.lead b{color:var(--bone);font-weight:600}
.punch{font-size:clamp(17px,1.5vw,20px);line-height:1.4;font-weight:700;color:var(--bone);max-width:54ch;margin-top:-10px;padding-left:14px;box-shadow:inset 3px 0 0 var(--volt)}
.v{color:var(--volt)}
.spec-u{background:var(--spectrum) left bottom/100% .09em no-repeat;padding-bottom:.06em}
.head{display:grid;gap:20px;max-width:760px}
.head.c{margin-inline:auto;text-align:center;justify-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:15px 24px;font-weight:700;font-size:16px;line-height:1.1;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-volt{background:var(--volt);color:var(--ink)}
.btn-volt:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(212,255,58,.6)}
.btn-ghost{background:var(--night-2);color:var(--bone);box-shadow:inset 0 0 0 1px var(--night-4)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--mute)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bone);white-space:nowrap;border:0}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--d,var(--volt));flex:none}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;font:700 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.facts b{color:var(--bone)}
.facts > span{display:inline-flex;align-items:center;gap:8px}
.facts > span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--d,var(--volt))}

/* ---------- nav ---------- */
/* No viewport-fit=cover: the browser keeps the page clear of the notch and status bar itself. With cover, Chrome on
   iPhone reported the status-bar inset below its own address bar, and the header sat ~60px down under an empty band. */
.nav{position:sticky;top:0;z-index:50;background:var(--night);border-bottom:1px solid var(--night-3)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-.025em;text-decoration:none}
.logo svg{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--mute)}
.nav-links a{text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--bone)}
.nav .btn{padding:11px 18px;font-size:15px}
@media (max-width:860px){.nav-links{display:none}.nav .btn{margin-left:auto}}
[id]{scroll-margin-top:84px}

/* ---------- hero + clip wall ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(56px,7vw,104px) clamp(64px,8vw,120px)}
.hero .wrap{position:relative}
.hero-copy{max-width:720px;display:grid;gap:26px;justify-items:start}
#top > .wrap{pointer-events:none}
#top .hero-copy{pointer-events:auto}
.stage{position:absolute;z-index:-2;top:-14%;bottom:-40%;left:40%;right:-22%;perspective:1800px}
.wall{display:flex;gap:16px;height:100%;transform:rotateX(26deg) rotateY(-12deg) rotateZ(-13deg);transform-origin:50% 35%}
/* the wall is one pre-rendered video (33 playing cards: 1.8 MB, 0.7 MB on phones) that drifts slowly, instead of 60
   video elements. Its poster is an <img> (a smaller one on phones) and the video fades in over it once it plays */
.wallvid{flex:none;align-self:flex-start;position:relative;width:calc(6 * clamp(130px,12.5vw,184px) + 80px);aspect-ratio:1088/1554;background:var(--night);animation:pan2 46s ease-in-out infinite alternate}
.wallvid img,.wallvid video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.wallvid video{opacity:0;transition:opacity .6s}
.wallvid.on video{opacity:1}
/* the still poster starts drifting with the video: the wall shows the same area until then, so the poster stays the
   page's largest paint (LCP) instead of the video's first frame seconds later */
.wallvid:not(.on){animation-play-state:paused}
@keyframes pan2{to{transform:translateY(-16%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--night) 38%,rgba(12,11,16,.84) 52%,rgba(12,11,16,0) 72%),linear-gradient(0deg,var(--night) 0,rgba(12,11,16,0) 24%),linear-gradient(180deg,var(--night) 0,rgba(12,11,16,0) 12%)}
.prompt{display:flex;align-items:center;gap:14px;width:100%;max-width:580px;background:var(--night-2);border-radius:28px;padding:10px 10px 10px 22px;box-shadow:inset 0 0 0 2px var(--volt),0 24px 60px -24px rgba(212,255,58,.45)}
/* every line sits hidden in the same cell (.tsize), so the box is as tall as the longest line at this width and the
   page never moves while the lines type */
.prompt .txt{flex:1;min-width:0;min-height:2.9em;display:grid;align-items:center;font:400 15px/1.45 var(--mono);color:var(--bone)}
.prompt .txt span{display:inline}
.prompt .txt > span,.prompt .txt .tsize > span{grid-area:1/1}
.prompt .txt .tsize{display:grid;visibility:hidden}
.caret{display:inline-block;width:9px;height:1.15em;background:var(--volt);vertical-align:-4px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.send{flex:none;width:50px;height:50px;border-radius:50%;background:var(--volt);color:var(--ink);border:0;display:grid;place-items:center;transition:transform .2s var(--ease)}
.send:hover{transform:scale(1.06)}
.send svg{width:22px;height:22px}
@media (max-width:900px){
  .stage{left:-30%;right:-60%;top:-6%;bottom:-20%;opacity:.5}
  .hero::before{background:linear-gradient(0deg,var(--night) 0,rgba(12,11,16,.72) 40%,rgba(12,11,16,.55) 100%)}
}

/* ---------- style marquee ---------- */
.marquee{border-block:1px solid var(--night-3);overflow:hidden;padding-block:16px}
.mtrack{display:flex;gap:12px;width:max-content;animation:slide 60s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.marquee .mtrack.back{animation-direction:reverse;animation-duration:75s}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- phone ---------- */
.feed-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:8px}
.feed-copy{display:grid;gap:24px;align-content:center}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);gap:2px}
.seg button{border:0;background:none;padding:9px 16px;border-radius:999px;font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.seg button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}
.ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rbtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-4);display:grid;place-items:center;transition:background .15s}
.rbtn:hover{background:var(--night-3)}
.rbtn svg{width:20px;height:20px}
.hint{font:400 12px/1.4 var(--mono);color:var(--mute)}
/* An iPhone 16 Pro (black titanium) running TikTok, Instagram Reels or YouTube Shorts. Sizes are the apps' own
   points scaled to this screen (298 px wide = 393 pt), in the system font, since that is what the apps use. */
/* min-height: the height site.js's screen gives it, so the empty phone already holds its place before the script runs */
.phone{--w:min(318px,76vw);--ios:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;--tt:#FE2C55;width:var(--w);min-height:calc((var(--w) - 20px) * 852 / 393 + 20px);border-radius:60px;padding:4px;position:relative;flex:none;justify-self:center;
  background:linear-gradient(150deg,#5a5a5e 0%,#232325 14%,#3a3a3d 48%,#1d1d1f 80%,#545458 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 2.5px rgba(0,0,0,.55),0 70px 120px -40px rgba(0,0,0,.95),0 0 140px -40px var(--glow,rgba(212,255,58,.35));transition:box-shadow .6s}
.hw{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#1b1b1d,#4e4e52 60%,#2a2a2c);z-index:-1}
.hw.l{left:-3px;border-radius:2px 0 0 2px}.hw.r{right:-3px;border-radius:0 2px 2px 0}
.hw.act{top:17%;height:5%}.hw.vu{top:25%;height:8.5%}.hw.vd{top:35%;height:8.5%}.hw.pw{top:28%;height:13%}
.hw.cc{top:58%;height:7%;background:linear-gradient(90deg,#0d0d0f,#2c2c30)}
.screen{position:relative;box-sizing:content-box;width:calc(var(--w) - 20px);aspect-ratio:393/852;border:6px solid #000;border-radius:56px;overflow:hidden;background:#000;
  font-family:var(--ios);color:#fff;text-align:left;-webkit-font-smoothing:antialiased;isolation:isolate}
.sbar{position:absolute;top:0;left:0;right:0;height:41px;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:4px 22px 0 36px;font:600 13.5px/1 var(--ios);letter-spacing:-.02em;pointer-events:none}
.sbar .ic{display:flex;gap:5px;align-items:center}
.sbar svg{height:10px;width:auto;display:block;fill:#fff}
.island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:32%;height:28px;border-radius:20px;background:#000;z-index:7;box-shadow:inset -18px 0 0 -12px #0b0b12}
.island::after{content:"";position:absolute;right:11px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3550,#05060a 60%)}
.homebar{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:34%;height:4px;border-radius:3px;background:#fff;z-index:8;pointer-events:none}
.vp{position:absolute;inset:0 0 63px 0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;background:#000}
.vp.drag{cursor:grabbing}
.slide{position:absolute;inset:0;transform:translateY(calc((var(--i) - var(--cur,0)) * 100% + var(--dy,0px)));transition:transform .6s var(--ease)}
.vp.drag .slide{transition:none}
.slide video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 17%,transparent 58%,rgba(0,0,0,.6));pointer-events:none}
.ui{position:absolute;inset:0;z-index:2;pointer-events:none}
/* top bar */
.tnav{position:absolute;top:41px;left:0;right:0;height:34px;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 12px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tnav svg{width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.tnav .tabs{display:flex;gap:13px;font:600 13px/1 var(--ios);color:rgba(255,255,255,.62)}
.tnav .tabs b{color:#fff;font-weight:700;position:relative}
.tnav .tabs b::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;width:20px;height:2.5px;border-radius:2px;background:#fff}
.tnav .ttl{font:700 19px/1 var(--ios);letter-spacing:-.02em;display:flex;align-items:center;gap:2px}
.tnav .ttl svg{width:15px;height:15px}
.tnav .rt{display:flex;gap:16px}
/* right rail */
.rail{position:absolute;right:5px;bottom:40px;display:grid;gap:12px;justify-items:center;font:600 10px/1 var(--ios);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.rail > div{display:grid;gap:4px;justify-items:center}
.rail svg{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.rail .av{position:relative;width:38px;height:38px;margin-bottom:8px}
.rail .av img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid #fff}
.rail .av i{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:17px;height:17px;border-radius:50%;background:var(--tt);font:700 14px/16px var(--ios);font-style:normal;text-align:center;text-shadow:none}
.disc{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,#1a1a1a 0 34%,#2b2b2b 35% 42%,#121212 43% 100%);display:grid;place-items:center;animation:spin 6s linear infinite;margin-top:6px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.disc img{width:21px;height:21px;border-radius:50%;object-fit:cover}
.aud{width:30px;height:30px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1.6px #fff;margin-top:6px}
.aud img{width:100%;height:100%;object-fit:cover}
.rail.ig{gap:16px;bottom:22px}.rail.ig svg{width:27px;height:27px}
.rail.yt{gap:14px;bottom:20px}.rail.yt svg{width:28px;height:28px}
@keyframes spin{to{transform:rotate(360deg)}}
/* caption */
.cap{position:absolute;left:10px;right:56px;bottom:38px;display:grid;gap:5px;font:400 11.5px/1.35 var(--ios);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.cap .who{display:flex;gap:5px;align-items:center;font-size:11px;color:rgba(255,255,255,.75)}
.cap .who b{font:700 13px/1.2 var(--ios);color:#fff}
.cap .who img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.cap p{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cap p b{font-weight:700}
.cap .more{color:rgba(255,255,255,.7)}
.cap .fol,.cap .sub{font:600 11px/1 var(--ios);padding:5px 9px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);color:#fff;margin-left:2px;text-shadow:none}
.cap .sub{background:#fff;color:#0f0f0f;box-shadow:none;border-radius:999px;padding:6px 11px}
.snd{display:flex;gap:6px;align-items:center;font-size:11px;min-width:0}
.snd svg{width:11px;height:11px;flex:none}
.snd.chip{justify-self:start;background:rgba(255,255,255,.18);border-radius:999px;padding:4px 9px 4px 7px;text-shadow:none}
.mq{overflow:hidden;white-space:nowrap;flex:1;-webkit-mask-image:linear-gradient(90deg,#000 75%,transparent);mask-image:linear-gradient(90deg,#000 75%,transparent)}
.mq span{display:inline-block;padding-right:6px;animation:mq 7s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.cap.ig,.cap.yt{bottom:16px;right:52px}
.sugg{position:absolute;left:0;right:0;bottom:0;height:28px;display:flex;align-items:center;gap:6px;padding:0 10px;background:rgba(36,36,40,.82);font:400 11px/1 var(--ios);color:rgba(255,255,255,.88)}
.sugg svg{width:12px;height:12px;flex:none}
.sugg span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg b{font-weight:600;color:#fff}
.prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.2);z-index:4}
.prog i{display:block;height:100%;width:0;background:rgba(255,255,255,.92)}
.phone[data-p="shorts"] .prog i{background:#FF0033}
.paused-ic{position:absolute;inset:0;display:grid;place-items:center;z-index:4;pointer-events:none;opacity:0;transition:opacity .2s}
.vp.paused .paused-ic{opacity:1}
.paused-ic svg{width:56px;height:56px;color:rgba(255,255,255,.6);filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
/* tab bar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:63px;z-index:5;background:#000;display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding-top:7px;font:500 8.5px/1 var(--ios);color:rgba(255,255,255,.62);box-shadow:inset 0 .5px 0 rgba(255,255,255,.12)}
.tabbar span{display:grid;justify-items:center;gap:3px;position:relative}
.tabbar svg{width:21px;height:21px}
.tabbar .on{color:#fff}
.tabbar em{position:absolute;top:-4px;left:calc(50% + 4px);min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--tt);color:#fff;font:700 9.5px/15px var(--ios);font-style:normal;text-align:center}
.tabbar .me{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,#FFB21E,#FF3D8B,#A66BFF,#FFB21E);box-shadow:0 0 0 1.5px #000,0 0 0 2.5px rgba(255,255,255,.85)}
.tt-plus{width:35px;height:23px;margin-top:1px;position:relative}
.tt-plus::before,.tt-plus::after{content:"";position:absolute;inset:0;border-radius:7px}
.tt-plus::before{background:#25F4EE;transform:translateX(-3px)}
.tt-plus::after{background:var(--tt);transform:translateX(3px)}
.tt-plus b{position:absolute;inset:0;z-index:1;background:#fff;border-radius:7px;color:#000;display:grid;place-items:center;font:600 19px/1 var(--ios)}
.phone[data-p="reels"] .tabbar{align-items:center;padding:0 0 18px}
/* ambient light: the playing clip, blurred, lights the room behind the phone */
.amb{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(52% 58% at 54% 50%,#000 25%,transparent 75%);mask-image:radial-gradient(52% 58% at 54% 50%,#000 25%,transparent 75%)}
.amb img{position:absolute;left:24%;top:8%;width:60%;height:84%;max-width:none;object-fit:cover;filter:blur(64px) saturate(1.7);opacity:0;transition:opacity 1.2s ease;will-change:opacity}
.amb img.on{opacity:.5}
#feed > .wrap{position:relative;z-index:1}
/* up next: a reel of covers that turns in step with the phone. Moved by transforms only, so no scrollbar */
.upnext{display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;height:666px;min-width:0;align-self:center}
.un-head{display:flex;justify-content:space-between;align-items:baseline;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.un-n{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.un-n b{color:var(--c,var(--volt))}
.reel{position:relative;perspective:1100px;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.un{--R:340px;--t:24deg;position:absolute;left:0;right:0;top:50%;display:grid;grid-template-columns:78px minmax(0,1fr);gap:18px;align-items:center;padding:0;border:0;background:none;text-align:left;backface-visibility:hidden;
  transform:translateY(-50%) translateZ(calc(var(--R) * -1)) rotateX(calc(var(--d,0) * var(--t) * -1)) translateZ(var(--R));
  opacity:calc(1 - var(--ad,0) * .32);transition:transform .7s var(--ease),opacity .7s var(--ease)}
.reel.drag .un{transition:none}
.un[data-far]{pointer-events:none}
.po{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 40px -18px #000;transition:box-shadow .5s}
.po img{width:100%;aspect-ratio:9/16;object-fit:cover;-webkit-user-drag:none}
.po i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .3s linear}
.un[aria-current="true"] .po{box-shadow:0 0 0 2px var(--c),0 18px 50px -10px var(--c)}
.un[aria-current="true"] .po i{transform:scaleX(var(--p,0))}
.lb{display:grid;gap:6px;transition:opacity .5s}
.lb b{font:700 16px/1.2 var(--font);letter-spacing:-.01em;color:var(--bone)}
.lb small{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.un:not([aria-current="true"]) .lb{opacity:.45}
.un:hover .lb{opacity:1}
.un-cap{display:none}
@media (max-width:1000px){
  .feed-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .feed-copy{justify-items:center}
  .feed-copy .lead{margin-inline:auto}
  .amb{-webkit-mask-image:radial-gradient(70% 50% at 50% 55%,#000 25%,transparent 75%);mask-image:radial-gradient(70% 50% at 50% 55%,#000 25%,transparent 75%)}
  .amb img{left:10%;width:80%;top:20%;height:70%}
  /* the reel lies on its side: a cover flow you swipe left and right */
  .upnext{height:auto;width:100%;max-width:680px;grid-template-rows:auto;gap:14px}
  .un-head{justify-content:center;gap:14px}
  .reel{height:186px;perspective:900px;touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
  .reel.drag{cursor:grabbing}
  .un{--R:clamp(240px,34vw,340px);--t:26deg;left:50%;right:auto;width:92px;grid-template-columns:1fr;
    transform:translate(-50%,-50%) translateZ(calc(var(--R) * -1)) rotateY(calc(var(--d,0) * var(--t))) translateZ(var(--R))}
  .lb{display:none}
  .un-cap{display:grid;gap:6px;min-height:46px}
  .un-cap b{font:700 18px/1.2 var(--font);letter-spacing:-.01em}
  .un-cap small{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
}

/* ---------- style flip ---------- */
.flipgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.flipcopy{display:grid;gap:24px;justify-items:start}
.brief{font:400 15px/1.4 var(--mono);background:var(--night-2);border-radius:18px;padding:16px 20px;box-shadow:inset 0 0 0 1px var(--night-3);width:100%;max-width:460px}
.brief small{display:block;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.stylepick button[aria-pressed="true"]{background:var(--night-3);box-shadow:inset 0 0 0 2px var(--d)}
.minis{display:flex;gap:14px;align-items:center;margin-top:6px}
.mini{width:96px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--night-3);flex:none;background:#000}
.mini video{width:100%;height:100%;object-fit:cover}
.minis p{font-size:14px;color:var(--mute);max-width:24ch}
.deck{position:relative;width:min(350px,74vw);aspect-ratio:9/16;margin-inline:auto;perspective:1800px}
.deck .ghost{position:absolute;inset:0;border-radius:26px;background:var(--night-2);box-shadow:inset 0 0 0 2px var(--gc)}
.deck .ghost:nth-child(1){transform:rotate(-7deg) translate(-26px,14px);--gc:var(--blue)}
.deck .ghost:nth-child(2){transform:rotate(5deg) translate(22px,8px);--gc:var(--flare)}
.flipin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.3,.6,.15,1)}
.face{position:absolute;inset:0;border-radius:26px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
.face.b{transform:rotateY(180deg)}
.face video{width:100%;height:100%;object-fit:cover}
.face .chip{position:absolute;left:14px;top:14px;background:rgba(23,21,31,.9)}
@media (max-width:860px){.flipgrid{grid-template-columns:1fr}}

/* ---------- template library ---------- */
.libhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:0;padding:10px 16px;border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);font:600 14px/1 var(--font);color:var(--mute);transition:color .15s}
.tab:hover{color:var(--bone)}
.tab[aria-selected="true"]{background:var(--bone);color:var(--ink);box-shadow:none}
.tgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:44px;padding-bottom:48px}
.tcard{--off:0px;--rx:0deg;--ry:0deg;aspect-ratio:9/16;position:relative;perspective:1200px;transform:translateY(var(--off)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s var(--ease);cursor:pointer}
.tgrid .tcard:nth-child(5n+2),.tgrid .tcard:nth-child(5n+4){--off:44px}
.tin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.tcard.flipped .tin{transform:rotateY(180deg)}
.tf,.tb{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tf{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -24px rgba(0,0,0,.9)}
.tf video{width:100%;height:100%;object-fit:cover}
.tf .meta{position:absolute;inset:auto 0 0 0;padding:52px 12px 12px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.88));display:grid;gap:6px}
.tf .meta b{font-weight:700;font-size:14px;line-height:1.2}
.tf .meta .chip{justify-self:start;padding:5px 9px;font-size:10px;background:rgba(23,21,31,.88);max-width:100%;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf .meta .chip i{display:inline-block;vertical-align:middle;margin:-2px 6px 0 0}
.tf .turn{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(12,11,16,.7);display:grid;place-items:center;opacity:0;transition:opacity .2s}
.tcard:hover .tf .turn,.tcard:focus-visible .tf .turn{opacity:1}
.tf .turn svg{width:16px;height:16px}
.tb{transform:rotateY(180deg);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-4);padding:16px;display:flex;flex-direction:column;gap:12px}
.tb small{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tb .q{font:400 12px/1.5 var(--mono);color:var(--bone);background:var(--night);border-radius:12px;padding:12px;box-shadow:inset 0 0 0 1px var(--night-3);overflow:hidden}
.tb .specs{font:400 11px/1.7 var(--mono);color:var(--mute)}
.tb .btn{margin-top:auto;padding:11px 12px;font-size:14px}
.tcard.soon{cursor:default}
.tcard.soon .tf{background:var(--night);box-shadow:inset 0 0 0 1.5px var(--night-4);display:grid;place-items:center;text-align:center;padding:18px;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px)}
.tcard.soon .tf b{font-size:16px;line-height:1.25}
.tcard.soon .tf span{display:block;margin-top:10px;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.libfoot{display:flex;justify-content:center;margin-top:12px}
@media (max-width:1100px){
  .tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tgrid .tcard:nth-child(n){--off:0px}
  .tgrid .tcard:nth-child(4n+2),.tgrid .tcard:nth-child(4n+4){--off:44px}
}
@media (max-width:700px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px;padding-bottom:28px}
  .tgrid .tcard:nth-child(n){--off:0px}
  .tgrid .tcard:nth-child(2n){--off:28px}
  .tb{padding:12px;gap:8px}.tb .q{font-size:11px;padding:9px}.tb .specs{display:none}
}
.tcard.new{animation:cardin .7s var(--ease) both;animation-delay:calc(var(--k,0) * 45ms)}
@keyframes cardin{from{opacity:0;transform:translateY(calc(var(--off) + 40px)) scale(.94)}}
/* the sound button: the same on every clip with a sound track (site.js addSound), on the phones and nowhere else */
.sndb{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:rgba(12,11,16,.72);color:#fff;cursor:pointer;transition:background .2s,transform .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sndb::before{content:"";position:absolute;inset:-6px}
.sndb svg{width:18px;height:18px}
.sndb:hover{transform:scale(1.08)}
.sndb[aria-pressed="true"]{background:var(--volt);color:#0C0B10}
.sndb[hidden]{display:none}
.mini .sndb,.trio .sndb,.after .three .sndb,.itile .sndb,.exp .player .sndb,.fvclips .sndb{top:6px;right:6px;width:28px;height:28px}
.mini .sndb svg,.trio .sndb svg,.after .three .sndb svg,.itile .sndb svg,.exp .player .sndb svg,.fvclips .sndb svg{width:15px;height:15px}
.tf:has(> .sndb:not([hidden])) .turn{right:52px}
.phone .sndb{top:86px;right:12px;z-index:6}
/* a card whose whole face is a link: the link is a layer over the card, so the sound button can sit above it */
.cover{position:absolute;inset:0;z-index:2;border-radius:inherit}
.cover:focus-visible{outline:2px solid var(--volt);outline-offset:-3px}
.tile .trio{z-index:3;pointer-events:none}.tile .trio .sndb{pointer-events:auto}
.tile .tag{pointer-events:none}
.tgrid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.tgrid.six .tcard:nth-child(n){--off:0px}
.tgrid.six .tcard:nth-child(2n){--off:44px}
@media (max-width:1100px){.tgrid.six{grid-template-columns:repeat(3,minmax(0,1fr))}.tgrid.six .tcard:nth-child(n){--off:0px}.tgrid.six .tcard:nth-child(3n+2){--off:44px}}
@media (max-width:700px){.tgrid.six{grid-template-columns:repeat(2,minmax(0,1fr))}.tgrid.six .tcard:nth-child(n){--off:0px}.tgrid.six .tcard:nth-child(2n){--off:28px}}
/* templateGrid fit (the industry pages): the card back shows only the sentence, in the phone's sizes, at every width;
   where cards are narrowest (small phones, small tablets) it drops its label too */
.tgrid.fit .tb{padding:12px;gap:8px}.tgrid.fit .tb .q{font-size:11px;padding:9px}.tgrid.fit .tb .specs{display:none}
@media (max-width:380px),(min-width:701px) and (max-width:767px){.tgrid.fit .tb small{display:none}.tgrid.fit .tb .q{line-height:1.45}.tgrid.fit .tb .btn{padding:8px 10px;font-size:13px}}
.tf .ai{position:absolute;top:10px;left:10px;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:6px;background:rgba(12,11,16,.78);color:var(--bone)}
.tab span{font:400 11px/1 var(--mono);opacity:.6;margin-left:6px}
.libfoot{flex-direction:column;align-items:center;gap:12px}
.libfoot .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.libcount{font:400 12px/1 var(--mono);color:var(--mute);letter-spacing:.04em}

/* ---------- how it works (studio mock) ---------- */
.how{display:grid;grid-template-columns:320px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:52px}
.steps{display:grid;gap:10px}
.step{border:0;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:18px 20px;border-radius:18px;background:none;box-shadow:inset 0 0 0 1px var(--night-3);position:relative;overflow:hidden;transition:background .2s}
.step .n{font:700 13px/1.6 var(--mono);color:var(--mute);grid-row:span 2}
.step b{font-weight:700;font-size:18px;letter-spacing:-.01em}
.step p{color:var(--mute);font-size:14px;line-height:1.45;grid-column:2}
.step .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--volt)}
.step[aria-selected="true"]{background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-4)}
.step[aria-selected="true"] .n{color:var(--volt)}
.how.run .step[aria-selected="true"] .bar{animation:fill var(--dur,7s) linear forwards}
@keyframes fill{to{width:100%}}
.hownote{font:400 12px/1.6 var(--mono);color:var(--mute);margin-top:8px;padding-inline:4px}
.app{border-radius:18px;background:#0F0E14;box-shadow:0 0 0 1px var(--night-3),0 60px 120px -40px rgba(0,0,0,.95);overflow:hidden;min-width:0}
.appbar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--night-2);border-bottom:1px solid var(--night-3)}
.appbar > i{width:11px;height:11px;border-radius:50%;background:var(--night-4)}
.url{margin-left:12px;font:400 12px/1 var(--mono);color:var(--mute);background:var(--night);padding:7px 12px;border-radius:8px;flex:1;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the panes share one cell under the bar, so the studio is as tall as its tallest pane and keeps that height from step
   to step (a shorter pane would move the page below it) */
.app{display:grid;grid-template-columns:minmax(0,1fr)}
.pane{grid-area:2/1;visibility:hidden;padding:22px;min-height:470px}
.pane.on{visibility:visible;animation:fadein .45s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
.shead{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:18px;flex-wrap:wrap}
.shead svg{width:22px;height:22px}
.shead .q{margin-left:auto;font:400 11px/1 var(--mono);color:var(--mute);display:flex;align-items:center;gap:6px}
.shead .q::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint)}
.sbox{background:var(--night-2);border-radius:16px;padding:18px;box-shadow:inset 0 0 0 1px var(--night-3)}
.sbox .ta{font:400 15px/1.55 var(--mono);min-height:4.8em;color:var(--bone)}
.schips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.schips .chip{font-size:11px;padding:7px 11px}
.schips .chip em{font-style:normal;color:var(--volt)}
.make{margin-left:auto}
.make.pulse{animation:pulse 1.2s var(--ease) 2}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(212,255,58,.18)}}
.photos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
.photos div{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(160deg,#4b4656,#26232e);position:relative;overflow:hidden}
.photos div::after{content:attr(data-n);position:absolute;left:5px;bottom:4px;font:400 9px/1 var(--mono);color:rgba(255,255,255,.6)}
.photos div:nth-child(2){background:linear-gradient(160deg,#5b5345,#2d2a24)}
.photos div:nth-child(3){background:linear-gradient(160deg,#3e4b57,#1f262e)}
.photos div:nth-child(5){background:linear-gradient(160deg,#55604b,#262b22)}
.slabel{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:20px 0 12px}
.pick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pick div{border-radius:12px;overflow:hidden;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:grid}
.pick img{aspect-ratio:9/16;object-fit:cover;width:100%}
.pick span{font-size:11.5px;font-weight:600;padding:8px 8px 2px;line-height:1.25}
.pick em{font:normal 400 10px/1.3 var(--mono);color:var(--mute);padding:0 8px 8px}
.pick .sel{box-shadow:0 0 0 2px var(--volt)}
.pick .sel span::before{content:"✓ ";color:var(--volt)}
.rev{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px}
.rside{background:var(--night-2);border-radius:14px;padding:16px;box-shadow:inset 0 0 0 1px var(--night-3);display:grid;gap:12px;align-content:start}
.rside b{font-size:15px;line-height:1.25}
.rside .m{font:400 10.5px/1.5 var(--mono);color:var(--mute)}
.pbar{height:5px;border-radius:5px;background:var(--night-4);overflow:hidden}
.pbar i{display:block;height:100%;width:57%;background:var(--mint)}
.rsteps{display:grid;gap:7px;font-size:13px;color:var(--mute)}
.rsteps span{display:flex;gap:8px;align-items:center}
.rsteps .ok{color:var(--bone)}
.rsteps .ok::before{content:"✓";color:var(--mint);font-weight:800}
.rsteps .me{color:var(--volt);font-weight:600}
.rsteps .me::before{content:"⚑"}
.rsteps .todo::before{content:"○"}
.frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.frames img{aspect-ratio:9/16;object-fit:cover;border-radius:8px;width:100%}
.lines{display:grid;margin-top:12px;font-size:13px}
.lines div{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-top:1px solid var(--night-3);align-items:baseline}
.lines .n{font:400 11px/1 var(--mono);color:var(--mute)}
.lines mark{background:none;color:var(--amber);font-weight:700}
.lines .cue{font:400 10.5px/1.3 var(--mono);color:var(--mute);text-align:right}
.fixbox{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.fixbox .in{flex:1;min-width:160px;font:400 12.5px/1 var(--mono);background:var(--night-2);border-radius:999px;padding:11px 14px;box-shadow:inset 0 0 0 1px var(--night-3);color:var(--bone)}
.fixbox .btn{padding:10px 16px;font-size:13px}
.exp{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.exp .player{border-radius:16px;overflow:hidden;background:#000;aspect-ratio:9/16;box-shadow:0 0 0 1px var(--night-3)}
.exp .player video{width:100%;height:100%;object-fit:cover}
.files{display:grid;gap:8px}
.files div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);font-size:14px}
.files div::before{content:"✓";color:var(--mint);font-weight:800}
.files em{margin-left:auto;font:normal 400 11px/1 var(--mono);color:var(--mute)}
.posts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.stepnote{display:none}
@media (max-width:980px){
  /* the four steps sit side by side like story tabs; the active step's line shows under them */
  .how{grid-template-columns:minmax(0,1fr)}.how > *{min-width:0}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .step{grid-template-columns:1fr;gap:6px;padding:12px 10px 14px;border-radius:14px;align-content:start}
  .step .n{grid-row:auto}
  .step b{font-size:12px;line-height:1.25}
  .step{padding:11px 8px 13px}
  .step p{display:none}
  /* the active step's line over all four, hidden: as tall as the longest, so it never moves the page */
  .stepnote{display:grid;color:var(--mute);font-size:15px;line-height:1.5;margin-top:14px;min-height:3em}
  .stepnote > span{grid-area:1/1}.stepnote > span[aria-hidden]{visibility:hidden}
}
@media (max-width:640px){
  .pane{padding:16px;min-height:0}
  .photos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pick{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rev,.exp{grid-template-columns:1fr}
  .exp .player{max-width:200px}
}

/* ---------- industries ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:250px;gap:16px;margin-top:52px}
.tile{position:relative;border-radius:22px;overflow:hidden;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);text-decoration:none;display:block;isolation:isolate}
.tile > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform .9s var(--ease);z-index:-1}
.tile:hover > video{transform:scale(1.06)}
.tile .lab{position:absolute;left:0;right:0;bottom:0;padding:70px 20px 18px;background:linear-gradient(rgba(12,11,16,0),rgba(12,11,16,.94) 62%);display:grid;gap:4px}
.tile .lab b{font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.1;display:flex;align-items:center;gap:10px}
.tile .lab b::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--d);flex:none}
.tile .lab span{font-size:14px;color:var(--mute)}
.tile .tag{position:absolute;top:14px;left:14px;z-index:2}
.tile.big{grid-column:span 2;grid-row:span 2;background:radial-gradient(120% 90% at 70% 10%,#2a2333,var(--night-2) 60%)}
.tile.wide{grid-column:span 2}
.trio{position:absolute;inset:26px 22px 150px;display:flex;justify-content:center;gap:14px;perspective:1200px}
.trio div{height:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);transition:transform .6s var(--ease)}
.trio div:nth-child(1){transform:rotate(-6deg) translateY(16px)}
.trio div:nth-child(3){transform:rotate(6deg) translateY(16px)}
.tile.big:hover .trio div:nth-child(1){transform:rotate(-9deg) translate(-10px,10px)}
.tile.big:hover .trio div:nth-child(3){transform:rotate(9deg) translate(10px,10px)}
.trio video{width:100%;height:100%;object-fit:cover}
.tile.big .lab b{font-size:30px}
.cities{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cities .chip{font-size:10px;padding:6px 10px}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px}
  .tile.big{grid-row:span 2}
}
@media (max-width:520px){.trio{inset:20px 12px 170px}.tile.big .lab b{font-size:24px}}

/* ---------- proof strip ---------- */
.proof{padding-block:clamp(64px,9vw,112px);border-block:1px solid var(--night-3);overflow:hidden}
.strip{display:flex;gap:10px;width:max-content;animation:slide 80s linear infinite;margin-top:52px}
.strip.rev{animation-direction:reverse;margin-top:10px}
.strip img{width:120px;aspect-ratio:9/16;object-fit:cover;border-radius:10px;opacity:.9}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 56px;margin-top:36px}
.stats div{display:grid;justify-items:center;gap:4px}
.stats b{font-weight:800;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.04em}
.stats span{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}


/* ---------- style subjects ---------- */
.subj{display:flex;gap:6px;flex-wrap:wrap}
.subj .tab{padding:8px 13px;font-size:13px}
.stylepick{display:flex;flex-wrap:wrap;gap:6px}
.stylepick .chip{font-size:10.5px;padding:7px 11px}

/* ---------- long-form: a YouTube watch page ---------- */
.ytwin{margin-top:48px;border-radius:20px;overflow:hidden;background:#0f0f0f;font-family:var(--sys);color:#f1f1f1;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -50px rgba(0,0,0,.95),0 0 180px -70px rgba(255,0,51,.45);position:relative}
.ytbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#202020}
.ytbar i{width:11px;height:11px;border-radius:50%;background:#ff5f57;flex:none}.ytbar i:nth-child(2){background:#febc2e}.ytbar i:nth-child(3){background:#28c840}
.ytbar .url{margin-left:12px;flex:1;max-width:520px;background:#2c2c2c;border-radius:8px;padding:6px 12px;font:400 12px/1 var(--sys);color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ythead{display:flex;align-items:center;gap:18px;padding:12px 20px 4px}
.ytlogo{display:flex;align-items:center;gap:5px;font:700 17px/1 var(--sys);letter-spacing:-.04em}
.ytlogo i{width:26px;height:18px;border-radius:5px;background:#FF0033;display:grid;place-items:center}
.ytlogo i::after{content:"";border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.ytsearch{flex:1;max-width:460px;margin-inline:auto;border-radius:999px;box-shadow:inset 0 0 0 1px #303030;padding:9px 16px;font:400 13px/1 var(--sys);color:#888;display:flex;justify-content:space-between}
.ytsearch svg{width:16px;height:16px;color:#ddd}
.ytme{width:28px;height:28px;border-radius:50%;background:conic-gradient(from 200deg,#FFB21E,#FF3D8B,#A66BFF,#FFB21E);flex:none}
.ytbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;padding:14px 20px 22px}
.ytplayer{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.ytplayer video{width:100%;height:100%;object-fit:cover}
.ytprev{position:absolute;top:12px;left:12px;font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:6px;background:rgba(0,0,0,.7)}
.ytctl{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78));display:grid;gap:8px}
.ytprog{position:relative;height:18px;margin:-7px 0;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.ytprog b{position:relative;display:block;width:100%;height:4px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden;transition:height .15s}
.ytprog b i{position:absolute;inset:0;background:#FF0033;transform-origin:left;transform:scaleX(var(--f,0))}
.ytprog b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 22%,#000 22% 22.6%,transparent 22.6% 47%,#000 47% 47.6%,transparent 47.6% 73%,#000 73% 73.6%,transparent 73.6%)}
.ytprog s{position:absolute;top:50%;left:calc(var(--f,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FF0033;transform:scale(0);transition:transform .15s;pointer-events:none}
.ytprog:hover b,.ytprog:focus-visible b,.ytwin.seeking .ytprog b{height:6px}
.ytprog:hover s,.ytprog:focus-visible s,.ytwin.seeking .ytprog s{transform:scale(1)}
@media (hover:none){.ytprog s{transform:scale(.8)}}
.ytrow{display:flex;align-items:center;gap:16px;font:500 12.5px/1 var(--sys)}
.ytrow svg{width:19px;height:19px}
.ytrow button{border:0;background:none;padding:0;color:#fff;display:flex}
.ytrow .sp{flex:1}
.ytrow .chap{color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ytrow > span{white-space:nowrap}
.ytinfo h3{font:700 19px/1.3 var(--sys);margin-top:14px}
.ytch{display:flex;align-items:center;gap:10px;margin-top:12px;font:600 14px/1.25 var(--sys);flex-wrap:wrap}
.ytch .ytme{width:38px;height:38px}
.ytch small{display:block;color:#aaa;font:400 12px/1.3 var(--sys)}
.ytsub{margin-left:6px;background:#f1f1f1;color:#0f0f0f;border-radius:999px;padding:9px 15px;font:600 13px/1 var(--sys)}
.ytpills{display:flex;gap:8px;margin-left:auto}
.ytpills span{background:#272727;border-radius:999px;padding:9px 14px;font:600 12.5px/1 var(--sys);display:flex;gap:6px;align-items:center}
.ytpills svg{width:16px;height:16px}
.ytside{display:grid;gap:10px;align-content:start}
.ytside > small{font:600 14px/1 var(--sys);color:#f1f1f1;margin-bottom:2px}
/* desktop: the list is only as tall as the player and its title (no empty space under the player with many films) and
   scrolls inside, "Up next" pinned; a fade at the bottom while more films are below (.more, site.js) */
@media (min-width:981px){
  .ytside{contain:size;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3d3d3d transparent;padding-right:6px}
  .ytside > small{position:sticky;top:0;z-index:1;background:#0f0f0f;padding-bottom:8px;margin-bottom:-6px}
  .ytside.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
}
.ytitem{display:grid;grid-template-columns:148px minmax(0,1fr);gap:10px;border:0;background:none;text-align:left;padding:0;color:#f1f1f1;border-radius:10px}
.ytitem .th{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.ytitem img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ytitem:hover img{transform:scale(1.05)}
.ytitem .du{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.82);font:600 10.5px/1 var(--sys);padding:3px 4px;border-radius:4px}
.ytitem b{font:600 13.5px/1.3 var(--sys);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ytitem small{display:block;color:#aaa;font:400 12px/1.4 var(--sys);margin-top:4px}
.ytitem[aria-current="true"] .th{box-shadow:0 0 0 2px #FF0033}
.ytitem[aria-current="true"] .du{background:#FF0033}
.formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.formats .chip{font-size:11px;padding:7px 12px}
.subh{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-top:72px}
.subh h3{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.subh p{color:var(--mute);max-width:46ch}
.wgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px;margin-top:28px}
.hcard{display:grid;gap:10px;align-content:start}
.hcard .th{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.hcard video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.hcard:hover video{transform:scale(1.05)}
.hcard .du{position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.8);font:600 10.5px/1 var(--sys);padding:3px 5px;border-radius:4px}
.hcard b{font-size:15px;font-weight:700;line-height:1.3}
.hcard small{display:block;font:400 11px/1.5 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
/* ---------- the 16:9 wall behind the /youtube/ opener (wideWall): one pre-rendered video of 32 wide cards that drifts
   sideways, poster first, like the home page's hero wall ---------- */
.stage.wide{left:32%;right:-40%;top:-12%;bottom:-30%}
.wallvid.wide{width:clamp(1300px,125vw,1900px);aspect-ratio:1596/768;animation-name:panx;animation-duration:60s}
@keyframes panx{to{transform:translateX(-12%)}}
/* ---------- OmniReel's own channels: round links (footer) and a card each (followBand) ---------- */
.fsocial{display:flex;gap:10px}
.fsocial a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--bone);box-shadow:inset 0 0 0 1px var(--night-3);transition:background .2s,color .2s,box-shadow .2s}
.fsocial a:hover{background:var(--bone);color:var(--ink);box-shadow:none}
.fsocial a[href*="youtube"]:hover{background:#FF0033;color:#fff}
.fsocial a[href*="facebook"]:hover{background:#1877F2;color:#fff}
.fsocial svg{width:18px;height:18px}
.follow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.fcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:24px 26px;border-radius:22px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);color:var(--bone);text-decoration:none;transition:box-shadow .25s,transform .25s var(--ease)}
.fcard:hover{box-shadow:inset 0 0 0 1px var(--d);transform:translateY(-2px)}
.fic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--d);color:#fff}
.fic svg{width:30px;height:30px}
.ftx{display:grid;gap:4px;min-width:0}
.ftx b{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ftx small{font:400 11.5px/1.4 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.ftx em{font-style:normal;color:var(--mute);font-size:15px;line-height:1.45}
@media (max-width:900px){.stage.wide{left:-40%;right:-40%;top:-4%;bottom:-10%;opacity:.45}.wallvid.wide{width:900px}.follow{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.fcard{grid-template-columns:auto minmax(0,1fr);padding:20px}.fcard .btn{grid-column:1/-1;justify-content:center}}
@media (max-width:980px){.ytbody{grid-template-columns:minmax(0,1fr)}.ytside{grid-template-columns:repeat(2,minmax(0,1fr))}.ytside > small{grid-column:1/-1}.ytitem{grid-template-columns:1fr}.ytpills{display:none}.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ytrow .chap{display:none}.ythead .ytsearch{display:none}.ythead{justify-content:space-between}.ytbody{padding:12px}.ytinfo h3{font-size:16px}.ytsub{padding:8px 12px}}

/* ---------- one day of real-looking footage: moves by itself, drag to look around, no scrollbar ---------- */
.day{position:relative;margin-top:40px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.day.drag{cursor:grabbing}
.dtrack{position:relative;display:flex;gap:18px;width:max-content;padding:44px 0 6px;will-change:transform}
.dtrack::before{content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:linear-gradient(90deg,var(--night-4),var(--night-3))}
.dcard{width:200px;flex:none;display:grid;gap:10px;align-content:start;position:relative}
.dcard time{position:absolute;top:-44px;left:0;height:26px;display:flex;align-items:center;gap:9px;font:700 13px/1 var(--mono);color:var(--bone)}
.dcard time::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px var(--night),0 0 18px var(--c)}
.dcard .v{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -24px #000}
.dcard .v video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.dcard .v .ai{position:absolute;top:10px;left:10px;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:6px;background:rgba(12,11,16,.78)}
.dcard b{font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;gap:8px;align-items:center}
.dcard b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.dcard small{font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.dcard q{font:400 12px/1.5 var(--mono);color:var(--mute)}
.fine{font:400 12px/1.5 var(--mono);color:var(--mute);margin-top:18px}

/* ---------- industries mosaic ---------- */
.imosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:48px;position:relative}
.itile{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#000;text-decoration:none;isolation:isolate;box-shadow:inset 0 0 0 1px var(--night-3)}
.itile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .9s var(--ease)}
.itile:hover video{transform:scale(1.07)}
.itile .lab{position:absolute;inset:auto 0 0 0;padding:44px 12px 11px;background:linear-gradient(rgba(12,11,16,0),rgba(12,11,16,.93) 64%);display:grid;gap:3px}
.itile .lab b{font-size:14px;font-weight:700;line-height:1.2;display:flex;gap:7px;align-items:center}
.itile .lab b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--d);flex:none}
.itile .lab span{font-size:11.5px;color:var(--mute);line-height:1.3}
.imosaic .tile.big{grid-column:span 2;grid-row:span 2;min-height:0}
.names{display:grid;gap:10px;margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.names .mtrack{animation-duration:90s}
.names .mtrack.back{animation-direction:reverse;animation-duration:110s}
.names .chip{font-size:12px;padding:8px 13px;white-space:nowrap}
.names:hover .mtrack{animation-play-state:paused}
.imore{display:none;justify-content:center;margin-top:18px}
@media (max-width:1100px){.imosaic{grid-template-columns:repeat(4,minmax(0,1fr))}.imosaic .itile:nth-last-child(-n+2){display:none}}
@media (max-width:640px){
  .imosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .imosaic .tile.big{grid-row:span 1;aspect-ratio:4/5}
  .imosaic.clip .itile:nth-of-type(n+12){display:none}
  .imosaic:not(.clip) .itile:nth-last-child(-n+2){display:block}
  .imore{display:flex}
}

/* ---------- everything you get: the full contact sheet behind the numbers ---------- */
.tally{position:relative;overflow:hidden;padding-block:clamp(90px,12vw,160px);border-block:1px solid var(--night-3);isolation:isolate}
.sheet{position:absolute;left:50%;top:-18%;width:max(124%,1150px);max-width:none;height:auto;z-index:-2;transform:translateX(-50%) rotate(-9deg);animation:pan 70s linear infinite alternate}
.tally::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(62% 58% at 50% 50%,rgba(12,11,16,.93),rgba(12,11,16,.6) 72%,rgba(12,11,16,.82))}
@keyframes pan{to{transform:translateX(-50%) rotate(-9deg) translateY(-14%)}}
.counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:46px}
.counts div{display:grid;justify-items:center;align-content:center;gap:8px;text-align:center;padding:24px 12px;border-radius:22px;background:rgba(23,21,31,.86);box-shadow:inset 0 0 0 1px var(--night-3)}
.counts b{font-weight:800;font-size:clamp(40px,5vw,66px);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.counts b i{font-style:normal;color:var(--d,var(--volt))}
.counts span{font:700 11px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.counts b span{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.math{text-align:center;margin:34px auto 0;font-size:clamp(18px,2.1vw,26px);line-height:1.4;color:var(--mute);max-width:40ch}
.math b{color:var(--bone)}
.math em{font-style:normal;color:var(--volt);font-weight:700}
.tally .stats{margin-top:30px}
.tally .cta{display:flex;justify-content:center;margin-top:30px}
@media (max-width:900px){.counts{grid-template-columns:repeat(2,minmax(0,1fr))}.counts div:last-child{grid-column:span 2}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:52px;align-items:stretch}
.plan{border-radius:26px;padding:30px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:flex;flex-direction:column;gap:20px;position:relative}
.plan.hot{background:linear-gradient(var(--night-2),var(--night-2)) padding-box,conic-gradient(from 210deg,#D4FF3A,#FF3D8B,#4D7CFF,#FFB21E,#2BE3A6,#A66BFF,#D4FF3A) border-box;border:2px solid transparent;box-shadow:0 40px 100px -50px rgba(255,61,139,.55)}
.plan .badge{position:absolute;top:-13px;left:30px}
.plan .badge.chip{background:var(--volt);color:var(--ink);box-shadow:none}
.plan h3{font-size:22px}
.plan .for{color:var(--mute);font-size:15px;margin-top:-10px}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price b{font-size:56px;font-weight:800;letter-spacing:-.045em;line-height:1}
.price s{color:var(--mute);font-size:20px}
.price span{font:400 12px/1 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.plan li::before{content:"✓";color:var(--volt);font-weight:800}
.plan .btn{margin-top:auto}
.stripe{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font:400 12px/1.4 var(--mono);color:var(--mute)}
.stripe span{display:inline-flex;align-items:center;gap:8px}
.stripe svg{width:14px;height:14px}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.qa{display:grid;border-top:1px solid var(--night-3)}
.qa details{border-bottom:1px solid var(--night-3)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:700;font-size:18px;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:400 26px/1 var(--mono);color:var(--volt);transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--mute);padding:0 0 22px;max-width:62ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* ---------- final CTA + footer ---------- */
.final{text-align:center;padding-block:clamp(80px,11vw,150px);position:relative;overflow:hidden}
.bigring{width:clamp(120px,16vw,190px);margin:0 auto 34px;animation:spin 40s linear infinite}
.bigring .seg{transform-box:view-box;transform-origin:50% 50%;animation:burst 4.8s var(--ease) infinite;animation-delay:calc(var(--k) * .14s)}
@keyframes burst{0%,55%,100%{transform:none}25%{transform:scale(1.1) rotate(5deg)}}
.final .h2{max-width:15ch;margin-inline:auto}
.final .row{justify-content:center;margin-top:36px}
footer{border-top:1px solid var(--night-3);padding-block:44px 120px}
footer .wrap{display:flex;flex-wrap:wrap;gap:28px 56px;justify-content:space-between;align-items:start}
.fcol{display:grid;gap:10px;font-size:14px;color:var(--mute)}
.fcol a{text-decoration:none}
.fcol a:hover{color:var(--bone)}
.fcol b{color:var(--bone);font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.made{font-size:14px;color:var(--mute)}
.made i{color:var(--flare);font-style:normal}

/* ---------- Sydney page ---------- */
.sy-hero{display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:clamp(32px,6vw,90px);align-items:center}
.sy-hero .hero-copy{max-width:640px}
.float{position:relative}
.float .chip{position:absolute;z-index:5;box-shadow:0 18px 40px -16px rgba(0,0,0,.9),inset 0 0 0 1px var(--night-4);animation:bob 5s ease-in-out infinite}
.float .chip:nth-of-type(1){left:-104px;top:20%}
.float .chip:nth-of-type(2){left:-132px;top:47%;animation-delay:-1.6s}
.float .chip:nth-of-type(3){left:-92px;bottom:15%;animation-delay:-3.1s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:900px){.sy-hero{grid-template-columns:1fr;justify-items:center}.float .chip:nth-of-type(1){left:-8px}.float .chip:nth-of-type(2){left:auto;right:-8px}.float .chip:nth-of-type(3){left:-4px}}
.story{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;margin-top:52px}
.before{display:grid;gap:12px}
.bcard{border-radius:18px;padding:18px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.bcard time{font:700 11px/1.3 var(--mono);color:var(--mute);letter-spacing:.06em;grid-column:span 2}
.bcard p{font-weight:600;font-size:16px;line-height:1.35}
.snaps{display:flex;width:104px;height:64px;position:relative}
.snaps i{position:absolute;width:44px;height:56px;border-radius:4px;border:3px solid #ddd8cc;background:linear-gradient(160deg,#3a3630,#15130f);box-shadow:0 6px 12px rgba(0,0,0,.5)}
.snaps i:nth-child(1){left:0;transform:rotate(-12deg)}
.snaps i:nth-child(2){left:20px;transform:rotate(6deg);background:linear-gradient(160deg,#565046,#1d1b17)}
.snaps i:nth-child(3){left:40px;transform:rotate(-4deg);background:radial-gradient(circle at 70% 30%,#f3ead0,#5b5546 55%)}
.snaps i:nth-child(4){left:58px;transform:rotate(14deg);background:linear-gradient(160deg,#2f2c27,#0c0b09)}
.chat{display:grid;gap:5px;width:104px}
.chat span{font-size:10px;line-height:1.3;padding:6px 8px;border-radius:10px 10px 10px 3px;background:var(--night-4);color:var(--bone)}
.chat span:nth-child(2){border-radius:10px 10px 3px 10px;background:#3b3550;justify-self:end}
.stamp{width:104px;height:64px;border-radius:10px;background:var(--night-3);display:grid;place-items:center;position:relative;overflow:hidden}
.stamp::before{content:"";position:absolute;inset:10px 10px auto;height:8px;border-radius:4px;background:var(--night-4)}
.stamp b{font:800 15px/1 var(--font);color:#FF4B3E;border:2.5px solid #FF4B3E;padding:5px 8px;border-radius:6px;transform:rotate(-10deg);letter-spacing:.04em;background:rgba(12,11,16,.6)}
.arrow{display:grid;justify-items:center;gap:10px;font:700 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--volt);text-align:center}
.arrow svg{width:44px;height:44px}
.after{display:grid;gap:16px}
.after .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.after .three div{border-radius:16px;overflow:hidden;aspect-ratio:9/16;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -24px rgba(0,0,0,.9);position:relative}
.after .three video{width:100%;height:100%;object-fit:cover}
.after .three span{position:absolute;left:8px;bottom:8px;right:8px;font:700 10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.after p{font-weight:700;font-size:20px;letter-spacing:-.015em;line-height:1.25}
@media (max-width:900px){.story{grid-template-columns:1fr}.arrow svg{transform:rotate(90deg)}}
.kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.kitcard{border-radius:26px;background:#F4EFE3;color:#1B2A4A;padding:28px;display:grid;gap:22px;box-shadow:0 50px 100px -40px rgba(0,0,0,.95);max-width:480px;justify-self:center;width:100%}
.kitcard .top{display:flex;align-items:center;gap:14px}
.kitcard .mark{width:52px;height:52px;border-radius:14px;background:#1B2A4A;color:#D9B76E;display:grid;place-items:center;font:800 22px/1 var(--font)}
.kitcard .name{font:800 20px/1.1 var(--font);letter-spacing:.06em}
.kitcard .name small{display:block;font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:#6b6250;margin-top:4px}
.sw{display:flex;gap:8px}
.sw i{width:44px;height:44px;border-radius:12px;display:block}
.kitrow{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;font-size:14px;border-top:1px solid #ded5c1;padding-top:14px}
.kitrow b{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6b6250}
.wave{display:flex;gap:3px;align-items:center;height:28px}
.wave i{width:4px;border-radius:2px;background:#1B2A4A;height:30%;animation:wv 1.1s ease-in-out infinite;animation-delay:calc(var(--k) * -.09s)}
@keyframes wv{50%{height:100%}}
.agent{display:flex;align-items:center;gap:12px}
.agent i{width:40px;height:40px;border-radius:50%;background:linear-gradient(160deg,#D9B76E,#9c7c3d);display:grid;place-items:center;font:800 14px/1 var(--font);color:#1B2A4A;font-style:normal}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:17px;line-height:1.4}
.ticks li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--d,var(--volt));margin-top:6px}
@media (max-width:860px){.kit{grid-template-columns:1fr}}
.three-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.three-steps div{border-radius:20px;padding:24px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:grid;gap:10px}
.three-steps .n{font:700 13px/1 var(--mono);color:var(--d)}
.three-steps b{font-size:19px;letter-spacing:-.01em;line-height:1.25}
.three-steps p{color:var(--mute);font-size:15px}
@media (max-width:800px){.three-steps{grid-template-columns:1fr}}
.citybar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.citybar .chip.on{background:var(--bone);color:var(--ink);box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .wallvid,.mtrack,.strip,.sheet,.bigring,.bigring .seg,.disc,.float .chip,.wave i{animation:none!important}
  .caret{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- add-ons: the turn from the main story to what else is in the box, jump links to each ---------- */
.addlinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.addlinks a{position:relative;display:grid;align-content:start;gap:6px;padding:20px 20px 52px;border-radius:20px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);color:inherit;text-decoration:none;transition:box-shadow .2s,transform .2s}
.addlinks a:hover,.addlinks a:focus-visible{box-shadow:inset 0 0 0 1px var(--d);transform:translateY(-2px)}
.addlinks b{font-size:18px;letter-spacing:-.01em;line-height:1.25;color:var(--d)}
.addlinks span{color:var(--mute);font-size:14.5px}
.addlinks svg{position:absolute;left:20px;bottom:18px;width:20px;height:20px;color:var(--d)}
@media (max-width:900px){.addlinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.addlinks a{padding:16px 16px 46px}.addlinks svg{left:16px;bottom:14px}}

/* The multi-page layer on top of site.css (the concept's components): menu and drawer, inner-page heroes, the
   AI-agent, privacy and requirements components, prose pages, forms. Phone first: every block works at 360px
   without sideways scrolling, tap targets are at least 44px. */

[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--volt);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
html.lock{overflow:hidden}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;background:var(--bone);color:var(--ink);padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;max-width:calc(100vw - 32px);transition:.25s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- top menu ---------- */
.nav{transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.9)}
.nav .wrap{gap:20px}
.menu{margin-left:auto}
.mlist{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.mtop{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--mute);font:500 15px/1 var(--font);text-decoration:none;transition:color .15s,background .15s}
.mtop svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.mtop:hover,.mi.open .mtop,.mi[data-on] .mtop{color:var(--bone)}
.mi.open .mtop{background:var(--night-2)}
.mi.open .mtop svg{transform:rotate(180deg)}
.mpanel{position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:1px solid var(--night-3);box-shadow:0 40px 80px -40px rgba(0,0,0,.95);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s var(--ease),visibility 0s .18s}
.mi.open .mpanel{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s var(--ease)}
.mpin{max-width:1240px;margin-inline:auto;padding:22px var(--gut-r) 28px var(--gut-l);display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}
.mgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mgrid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px}
.mgrid.three .mlink{padding:10px 14px}
@media (max-width:1180px){.mgrid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mlink{display:grid;grid-template-columns:12px 1fr;gap:2px 12px;padding:14px 16px;border-radius:16px;text-decoration:none;transition:background .15s}
.mlink:hover,.mlink[aria-current]{background:var(--night-2)}
.mlink i{width:9px;height:9px;border-radius:50%;background:var(--d);margin-top:6px;grid-row:span 2}
.mlink b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.mlink span{color:var(--mute);font-size:14px}
.mfeat{position:relative;display:grid;align-content:end;gap:6px;min-height:200px;padding:18px;border-radius:20px;overflow:hidden;text-decoration:none;isolation:isolate}
.mfeat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.mfeat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,11,16,.1) 20%,rgba(12,11,16,.92))}
.mfeat:hover img{transform:scale(1.05)}
.mfeat b{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.mfeat > span:last-child{color:#d6d4de;font-size:14px}
.burger{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-4);position:relative;flex:none}
.burger i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--bone);transition:transform .25s var(--ease),opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;left:0;right:0;top:68px;bottom:0;z-index:49;background:var(--night);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:8px var(--gut-r) calc(24px + env(safe-area-inset-bottom,0px)) var(--gut-l);animation:dIn .22s var(--ease)}
.drawer[hidden]{display:none}
@keyframes dIn{from{opacity:0;transform:translateY(-8px)}}
.dnav{display:grid}
.dgroup{border-bottom:1px solid var(--night-3)}
.dgroup summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:60px;font-size:22px;font-weight:700;letter-spacing:-.02em;cursor:pointer}
.dgroup summary::-webkit-details-marker{display:none}
.dgroup summary svg{width:20px;height:20px;color:var(--mute);transition:transform .2s var(--ease)}
.dgroup[open] summary svg{transform:rotate(180deg)}
.dlinks{display:grid;gap:2px;padding-bottom:14px}
.dlinks a{display:grid;grid-template-columns:12px 1fr;gap:0 12px;padding:11px 12px;border-radius:14px;text-decoration:none}
.dlinks a[aria-current]{background:var(--night-2)}
.dlinks i{width:8px;height:8px;border-radius:50%;background:var(--d);margin-top:8px;grid-row:span 2}
.dlinks b{font-size:17px;font-weight:600}
.dlinks span{font-size:14px;color:var(--mute)}
.dtop{display:flex;align-items:center;min-height:60px;font-size:22px;font-weight:700;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--night-3)}
.dtop[aria-current]{color:var(--volt)}
.dfoot{margin-top:auto;padding-top:28px;display:grid;gap:12px;text-align:center}
.dfoot .btn{width:100%;padding:18px}
.dfoot p{font:400 12px/1.5 var(--mono);color:var(--mute)}
@media (max-width:1000px){.menu{display:none}.burger{display:block}.nav-cta{margin-left:auto}}
@media (max-width:400px){.nav .nav-cta{padding:10px 14px;font-size:14px}.logo{font-size:19px}.logo svg{width:26px;height:26px}.nav .wrap{gap:10px}}
@media (max-width:340px){.nav .nav-cta{display:none}.burger{margin-left:auto}}
body.checkout-page .menu,body.checkout-page .burger,body.checkout-page .nav-cta{display:none}

/* ---------- phone CTA bar ---------- */
.sticky-cta{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:20px;background:rgba(23,21,31,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--night-4),0 20px 40px -10px rgba(0,0,0,.8);animation:dIn .25s var(--ease)}
.sticky-cta[hidden]{display:none}
.sticky-cta b{display:block;font-size:15px}
.sticky-cta small{display:block;font:400 11px/1.3 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.sticky-cta .btn{padding:12px 20px}
@media (min-width:761px){.sticky-cta{display:none!important}}

/* ---------- footer ---------- */
footer{padding-block:56px 40px}
footer .wrap{gap:32px 48px}
.fbrand{max-width:300px}
.fbrand span{line-height:1.55}
.fbase{margin-top:44px;padding-top:24px;border-top:1px solid var(--night-3);align-items:center!important}
.pays{display:flex;flex-wrap:wrap;gap:6px}
.pays span{font:700 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:7px 9px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--night-3)}
.flegal{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--mute)}
.flegal a{text-decoration:none}.flegal a:hover{color:var(--bone)}
.flegal button{background:none;border:0;padding:0;min-height:24px;font:inherit;color:inherit;cursor:pointer}.flegal button:hover{color:var(--bone)} /* "Cookie settings" (consent.js shows it) */
.lfoot{padding-block:32px}.lfoot .fbase{margin-top:0;padding-top:0;border-top:0}
@media (max-width:760px){footer{padding-bottom:110px}footer .wrap{display:grid;grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}.fbase{grid-template-columns:1fr!important}}

/* ---------- inner-page hero ---------- */
.phero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(48px,7vw,104px) clamp(48px,6vw,88px)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.phero.solo .wrap{grid-template-columns:minmax(0,1fr)}
.phero .copy{display:grid;gap:24px;justify-items:start;max-width:720px}
.phero.c .copy{margin-inline:auto;text-align:center;justify-items:center}
.phero .glow{position:absolute;inset:-30% -10% auto auto;width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,var(--g,rgba(77,124,255,.22)),transparent 62%);pointer-events:none}
.pmedia{position:relative;border-radius:26px;overflow:hidden;background:var(--night-2);box-shadow:0 0 0 1px var(--night-3),0 50px 100px -50px rgba(0,0,0,.95)}
.pmedia video,.pmedia img{width:100%;height:100%;object-fit:cover}
.pmedia.tall{aspect-ratio:4/5;max-width:440px;justify-self:center;width:100%}
.pmedia.wide{aspect-ratio:16/10}
@media (max-width:900px){.phero .wrap{grid-template-columns:minmax(0,1fr)}.pmedia.tall{max-width:360px}}

/* ---------- generic blocks ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:980px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}}
.mt{margin-top:clamp(36px,5vw,56px)}
.card{border-radius:22px;padding:26px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:grid;gap:12px;align-content:start;position:relative}
.card .n{font:700 12px/1 var(--mono);color:var(--d,var(--volt));letter-spacing:.1em}
.card h3{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.card p{color:var(--mute);font-size:15.5px}
.card p b{color:var(--bone);font-weight:600}
.card .dot{width:12px;height:12px;border-radius:50%;background:var(--d,var(--volt))}
.card a.more{color:var(--volt);font-weight:700;text-decoration:none;font-size:15px;margin-top:4px}
.card.lift{transition:transform .25s var(--ease),box-shadow .25s}
a.card{text-decoration:none}
a.card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--night-4),0 30px 60px -30px rgba(0,0,0,.9)}
.callout{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 20px;border-radius:18px;background:color-mix(in srgb,var(--d,var(--amber)) 10%,var(--night-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--d,var(--amber)) 35%,transparent);font-size:15.5px}
.callout i{width:10px;height:10px;border-radius:50%;background:var(--d,var(--amber));margin-top:7px}
.callout b{color:var(--bone)}
.callout p{color:#cfcdd8}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split.flip > :first-child{order:0}}
.numlist{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:n}
.numlist li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:18px;border-radius:18px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.numlist li::before{content:counter(n,decimal-leading-zero);font:700 14px/44px var(--mono);text-align:center;border-radius:12px;background:var(--night-3);color:var(--volt)}
.numlist b{display:block;font-size:17px;margin-bottom:4px}
.numlist p{color:var(--mute);font-size:15px}
.say{display:block;margin-top:8px;font:400 14px/1.5 var(--mono);color:var(--bone);background:var(--night);padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--volt)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags .chip{font-size:11px;padding:7px 12px}

/* ---------- AI agent: the console, the agents, the crew, the stack ---------- */
.console{border-radius:22px;overflow:hidden;background:#0A0910;box-shadow:0 0 0 1px var(--night-3),0 60px 120px -50px rgba(0,0,0,.95),0 0 160px -60px rgba(212,255,58,.35);font:400 13.5px/1.6 var(--mono)}
.console .cbar2{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--night-2);border-bottom:1px solid var(--night-3);font-size:12px;color:var(--mute)}
.console .cbar2 i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.console .cbar2 i:nth-child(2){background:#febc2e}.console .cbar2 i:nth-child(3){background:#28c840}
.console .cbar2 span{margin-left:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.console .cbody{padding:18px 18px 22px;display:grid;align-content:start;gap:10px}
/* the whole prompt sits hidden under the typed one (.asize), so the box keeps its height while it types */
.aprompt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;color:var(--bone)}
.aprompt::before{content:">";color:var(--volt);font-weight:700}
.aprompt > span{grid-area:1/2}
.aprompt .asize{visibility:hidden}
.alines{display:grid;gap:7px}
.al{display:grid;grid-template-columns:16px 1fr;gap:10px;color:#cfcdd8;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.al.pending{opacity:0;transform:translateY(4px)}
.al i{width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--mint)}
.al.ask i{background:var(--amber)}.al.ask{color:var(--amber)}
.al.run i{background:var(--blue);animation:pulse 1s ease-in-out infinite}
.al.done{color:var(--volt);font-weight:700}.al.done i{background:var(--volt)}
.al.dim{color:var(--mute)}.al.dim i{background:var(--night-4)}
@keyframes alIn{from{opacity:0;transform:translateY(4px)}}
@keyframes pulse{50%{opacity:.35}}
@media (max-width:520px){.console{font-size:12px}.console .cbody{padding:14px}}
.agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.agent-card{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:24px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:grid;gap:10px;align-content:start}
.agent-card::before{content:"";position:absolute;z-index:-1;top:-110px;left:-70px;width:320px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--d) 30%,transparent),transparent);pointer-events:none}
.agent-card .marks{display:flex;gap:10px;margin-bottom:8px}
.agent-card .mark{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;color:var(--bone);background:var(--night);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--d) 45%,transparent),0 14px 34px -16px var(--d)}
.agent-card .mark svg{width:38px;height:38px}
.agent-card h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
.agent-card .via{font:700 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--d)}
.agent-card p{color:var(--mute);font-size:15px}
@media (max-width:860px){.agents{grid-template-columns:minmax(0,1fr)}}
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.crew div{border-radius:18px;padding:18px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:grid;gap:6px}
.crew b{font-size:16px}
.crew span{color:var(--mute);font-size:14px}
.crew em{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--d,var(--volt))}
@media (max-width:860px){.crew{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.crew{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stack div{border-radius:18px;padding:18px;box-shadow:inset 0 0 0 1px var(--night-3);display:grid;gap:6px;align-content:start}
.stack b{font-size:15px}
.stack span{color:var(--mute);font-size:13.5px}
.stack small{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media (max-width:980px){.stack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stack{grid-template-columns:minmax(0,1fr)}}

/* ---------- AI band on the home page ---------- */
.aiband{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.aiband .head{gap:22px}
@media (max-width:960px){.aiband{grid-template-columns:minmax(0,1fr)}}
.pills3{display:grid;gap:10px}
.pill3{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);text-decoration:none;transition:box-shadow .2s}
.pill3:hover{box-shadow:inset 0 0 0 1px var(--night-4)}
.pill3 i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--d) 18%,transparent);color:var(--d)}
.pill3 i svg{width:20px;height:20px}
.pill3 b{display:block;font-size:16px}
.pill3 span{color:var(--mute);font-size:14px}

/* ---------- where your data goes ---------- */
.flow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:stretch}
.zone{border-radius:24px;padding:22px;display:grid;gap:14px;align-content:start;position:relative}
.zone.you{background:linear-gradient(160deg,rgba(43,227,166,.13),rgba(43,227,166,.03));box-shadow:inset 0 0 0 1.5px rgba(43,227,166,.55)}
.zone.them{background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.zone.us{grid-column:1/-1;background:var(--night-2);box-shadow:inset 0 0 0 1px dashed var(--night-4);border:1.5px dashed var(--night-4)}
.zone h3{display:flex;align-items:center;gap:10px;font-size:18px}
.zone h3 svg{width:20px;height:20px}
.zone .lab{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.zone ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.zone li{position:relative;padding-left:20px;font-size:15px;color:#d6d4de}
.zone li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--d,var(--mint))}
.zone.them li::before{background:var(--blue)}
.zone.us li::before{background:var(--mute)}
.zone .files{display:flex;flex-wrap:wrap;gap:6px}
.zone .files span{font:400 12px/1 var(--mono);padding:8px 10px;border-radius:10px;background:rgba(12,11,16,.55);box-shadow:inset 0 0 0 1px rgba(43,227,166,.3)}
@media (max-width:860px){.flow{grid-template-columns:minmax(0,1fr)}}

/* ---------- requirements: table, checker ---------- */
.spec{border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--night-3)}
.spec .r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--night-3)}
.spec .r:first-child{border-top:0;background:var(--night-2)}
.spec .r > *{padding:16px 18px;font-size:15px}
.spec .r b{font-weight:700}
.spec .r:first-child > *{font:700 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.spec .r:first-child > :last-child{color:var(--volt)}
.spec .r span{color:#d6d4de}
@media (max-width:640px){
  .spec .r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .spec .r > b{grid-column:1/-1;padding-bottom:0}
  .spec .r:first-child > :first-child{display:none}
  .spec .r span{padding-top:6px}
}
.checker{display:grid;gap:22px;padding:clamp(20px,3vw,32px);border-radius:26px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.checker fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.checker legend{font-weight:700;font-size:17px;margin-bottom:10px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opts span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;background:var(--night);box-shadow:inset 0 0 0 1px var(--night-4);font-size:15px;cursor:pointer;transition:background .15s,box-shadow .15s}
.opts input:checked + span{background:var(--bone);color:var(--ink);box-shadow:none;font-weight:600}
.opts input:focus-visible + span{outline:2px solid var(--volt);outline-offset:2px}
.verdict{display:grid;gap:10px;padding:20px;border-radius:20px;background:var(--night);box-shadow:inset 0 0 0 1.5px var(--k,var(--mint))}
.verdict[data-k="go"]{--k:var(--mint)}.verdict[data-k="warn"]{--k:var(--amber)}.verdict[data-k="no"]{--k:var(--flare)}
.verdict b{font-size:20px;color:var(--k)}
.verdict p{color:#d6d4de}
.verdict .row{margin-top:4px}

/* ---------- pricing extras ---------- */
@media (min-width:901px){.plans{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.included{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.included div{padding:18px;border-radius:18px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);display:grid;gap:6px}
.included b{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--d,var(--bone))}
.included span{color:var(--mute);font-size:14px}
@media (max-width:860px){.included{grid-template-columns:repeat(2,minmax(0,1fr))}}
.compare{border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--night-3)}
.compare .r{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,.7fr));border-top:1px solid var(--night-3);align-items:center}
.compare .r:first-child{border-top:0;background:var(--night-2)}
.compare .r > *{padding:14px 16px;font-size:15px}
.compare .r > :not(:first-child){text-align:center}
.compare .r:first-child > *{font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.compare .y{color:var(--volt);font-weight:800}
.compare .n{color:var(--night-4)}
.compare small{display:block;color:var(--mute);font-size:13px}
@media (max-width:560px){.compare .r{grid-template-columns:minmax(0,1fr) 64px 64px}.compare .r > *{padding:12px 10px;font-size:14px}}
.costs{display:grid;gap:10px}
.costs div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:16px 18px;border-radius:16px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.costs b{font-size:16px}
.costs span{color:var(--mute);font-size:14px;display:block}
.costs em{font:700 12px/1.3 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--d,var(--mute));text-align:right}
/* the free first video: a strip under every price table, a band (home), a form section (/free-video/, landing pages) */
.fvstrip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:18px;padding:18px 22px;border-radius:22px;text-decoration:none;color:var(--bone);background:linear-gradient(100deg,rgba(255,61,139,.16),rgba(212,255,58,.08));box-shadow:inset 0 0 0 1px rgba(255,61,139,.35);transition:box-shadow .2s}
.fvstrip:hover{box-shadow:inset 0 0 0 1.5px var(--flare)}
.fvstrip b{font-size:18px}
.fvstrip > span:nth-child(2){color:#d6d4de;font-size:15px;line-height:1.45}
.fvgift{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--flare);color:#fff}
.fvgift svg{width:18px;height:18px}
.fvgo{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--volt);white-space:nowrap}
.fvgo svg{width:16px;height:16px}
@media (max-width:700px){.fvstrip{grid-template-columns:auto minmax(0,1fr)}.fvgo{grid-column:1/-1}}
.fvcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,48px);border-radius:32px;background:radial-gradient(120% 120% at 0% 0%,rgba(255,61,139,.18),transparent 55%),var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.fvcard .fine{margin-top:14px}
.fvclips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fvclips div{aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -24px rgba(0,0,0,.9)}
.fvclips div:nth-child(2){transform:translateY(-18px)}
.fvclips video{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.fvcard{grid-template-columns:minmax(0,1fr)}}
.fvsteps{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none;counter-reset:fv}
.fvsteps li{counter-increment:fv;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:baseline;color:var(--mute)}
.fvsteps li::before{content:counter(fv);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--night-3);color:var(--volt);font:700 13px/1 var(--mono)}
.fvsteps b{color:var(--bone)}
.fvform .fine{margin:0}
.field label small{font-weight:400;color:var(--mute)}
.field .lbl{font-weight:600;font-size:15px}
.fvrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fvform textarea{min-height:110px}
.fvform textarea.fvsocial{min-height:96px}
.fvchoice{display:flex;flex-wrap:wrap;gap:8px}
.fvchoice label{position:relative;font-weight:600;font-size:15px;cursor:pointer}
.field .fvchoice input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.fvchoice span{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;background:var(--night);box-shadow:inset 0 0 0 1px var(--night-4);color:#d6d4de}
.fvchoice input:checked+span{background:var(--bone);color:var(--ink);box-shadow:none}
.fvchoice input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--volt)}
.fvbook{font-size:18px;padding:19px 34px}
@media (max-width:560px){.fvrow{grid-template-columns:minmax(0,1fr)}}

/* ---------- prose pages (legal, setup, about) ---------- */
.prose{max-width:72ch;font-size:17px;line-height:1.7;color:#d6d4de}
.prose h2{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--bone);margin:48px 0 14px;scroll-margin-top:90px}
.prose h3{font-size:19px;font-weight:700;color:var(--bone);margin:28px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--volt)}
.prose strong{color:var(--bone)}
.prose code{font:400 .9em var(--mono);background:var(--night-2);padding:2px 6px;border-radius:6px}
.docgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.toc{position:sticky;top:96px;display:grid;gap:4px;font-size:14px}
.toc b{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.toc a{color:var(--mute);text-decoration:none;padding:6px 0}
.toc a:hover{color:var(--bone)}
.inshort{padding:22px 24px;border-radius:20px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);margin-bottom:12px}
.inshort b{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--volt)}
.inshort ul{margin:12px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--bone)}
.updated{font:400 12px/1 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:860px){.docgrid{grid-template-columns:minmax(0,1fr)}.toc{position:static;padding:16px 18px;border-radius:18px;background:var(--night-2)}}

/* ---------- changelog ---------- */
.releases{display:grid;gap:0;border-left:2px solid var(--night-3);margin-left:6px}
.release{position:relative;padding:0 0 40px 28px}
.release::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--d,var(--volt));box-shadow:0 0 0 4px var(--night)}
.release h3{font-size:22px;font-weight:800;letter-spacing:-.02em}
.release time{font:400 12px/1 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.release ul{margin:12px 0 0;padding-left:20px;color:#d6d4de;display:grid;gap:6px}

/* ---------- forms ---------- */
.form{display:grid;gap:16px;padding:clamp(20px,3vw,32px);border-radius:26px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:15px}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:14px;border:0;background:var(--night);color:var(--bone);font:400 16px/1.4 var(--font);box-shadow:inset 0 0 0 1px var(--night-4)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--volt)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent b{font-size:22px;display:block;margin-bottom:6px}
.sent p{color:var(--mute)}

/* ---------- styles page, real estate tree ---------- */
.lettered{columns:4 200px;column-gap:24px;font-size:15px;color:#d6d4de}
.lettered span{display:block;padding:5px 0;break-inside:avoid}
.citygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.citycard{position:relative;display:grid;align-content:end;gap:6px;min-height:240px;padding:20px;border-radius:24px;overflow:hidden;isolation:isolate;text-decoration:none;box-shadow:0 0 0 1px var(--night-3)}
.citycard video,.citycard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.citycard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,11,16,0) 30%,rgba(12,11,16,.92))}
.citycard b{font-size:24px;font-weight:800;letter-spacing:-.02em}
.citycard span{color:#d6d4de;font-size:14px}
.citycard .chip{position:absolute;top:16px;left:16px}
.citycard.soon{opacity:.75}
@media (max-width:860px){.citygrid{grid-template-columns:minmax(0,1fr)}.citycard{min-height:200px}}
.e404{min-height:60vh;display:grid;place-items:center;text-align:center}

/* list items that mix bold and plain text: the dot is positioned, so the text flows as one paragraph */
.ticks li{display:block;position:relative;padding-left:28px}
.ticks li::before{position:absolute;left:0;top:0}

/* OmniReel Tutorials (product.mjs tutorialsPlayer): a big player and the episode list; the player is our thumbnail
   until a press makes the youtube-nocookie iframe (site.js) */
.tuts{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px}
.tut-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.tut-stage iframe,.tut-poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.tut-poster{padding:0;background:none;display:block}
.tut-poster img{width:100%;height:100%;object-fit:cover}
.tut-pl{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;border-radius:15px;background:#FF0033;display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.tut-pl svg{width:26px;height:26px;color:#fff;fill:#fff}
.tut-poster:hover .tut-pl,.tut-poster:focus-visible .tut-pl{transform:scale(1.08)}
.tut-side{position:relative;min-height:0}
.tut-list{position:absolute;inset:0;margin:0;padding:0 4px 0 0;list-style:none;overflow-y:auto;display:grid;gap:8px;align-content:start;scrollbar-width:thin}
.tut-list button{width:100%;display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:8px;border:0;border-radius:14px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);transition:background .2s}
.tut-list button:hover{background:var(--night-3)}
.tut-list button[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--volt)}
.tut-list img{width:120px;height:auto;aspect-ratio:16/9;border-radius:8px;object-fit:cover}
.tut-list span{display:grid;gap:3px;min-width:0}
.tut-list em{font:700 11px/1.2 var(--mono);font-style:normal;letter-spacing:.08em;color:var(--mute)}
.tut-list b{font-weight:700;font-size:15px;line-height:1.25}
.tut-list small{color:var(--mute);font-size:13px;line-height:1.35}
.tut-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:18px}
.tut-sub{display:inline-flex;align-items:center;gap:8px;color:var(--mute);text-decoration:none;font-size:14px}
.tut-sub svg{width:20px;height:20px}
.tut-sub:hover{color:var(--bone)}
@media (max-width:860px){
  .tuts{grid-template-columns:1fr}
  .tut-list{position:static;overflow:visible;padding:0}
  .tut-list button{grid-template-columns:104px minmax(0,1fr)}
  .tut-list img{width:104px}
  .tut-list small{display:none}
}

/* Sitewide commerce pieces, loaded on every page: the campaign banner, countdowns, plan cards while a campaign runs,
   the consent bar, and the preview pill (preview builds and localhost only). --cc is the running campaign's colour, set by commerce-ui.js. */

/* ---------- banner above the menu ---------- */
.promo{background:var(--cc,var(--flare));color:var(--ink);position:relative;z-index:55}
.promo[hidden]{display:none}
.promo-in{display:flex;align-items:center;justify-content:center;gap:6px 14px;min-height:46px;padding-block:6px;font-size:14px;line-height:1.3;font-weight:600}
.promo-badge{flex:none;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--bone);padding:6px 9px;border-radius:999px}
.promo-text{min-width:0;text-wrap:balance}
.promo-left{font-weight:700}
.promo-time{flex:none}
.promo-cta{flex:none;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.promo-x{flex:none;width:44px;height:44px;margin-right:-12px;border:0;background:none;color:var(--ink);font-size:24px;line-height:1;display:grid;place-items:center;border-radius:50%}
.promo-x:hover{background:rgba(12,11,16,.12)}
.promo .cd{background:var(--ink);color:var(--bone);padding:6px 10px;border-radius:999px}
@media (max-width:640px){
  .promo-in{justify-content:flex-start;padding-right:0;gap:4px 10px;font-size:13px}
  .promo-text{flex:1 1 140px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .promo-badge{display:none}
  .promo-cta{display:none}
}

/* ---------- countdown (d h m s; colons only on phones) ---------- */
.cd{display:inline-flex;align-items:baseline;gap:8px;font:700 13px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-u{display:inline-flex;align-items:baseline;gap:2px}
.cd-u[hidden]{display:none}
.cd-u b{font-weight:700}
.cd-u i{font-style:normal;font-weight:400;opacity:.65;font-size:11px;text-transform:lowercase}
@media (max-width:480px){
  .cd{gap:0}
  .cd-u i{display:none}
  .cd-u[data-u="d"] i{display:inline;margin-right:7px}
  .cd-u:not([data-u="d"]):not(:first-child)::before,.cd-u[data-u="d"][hidden]+.cd-u::before{content:none}
  .cd-u:not([data-u="d"])+.cd-u::before{content:":";opacity:.6;margin-inline:2px}
}
.cd-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:0 auto 28px;padding:14px 18px;max-width:640px;border-radius:20px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--cc,var(--night-4))}
.cd-card[hidden]{display:none}
.cd-card .chip i{background:var(--cc,var(--volt))}
.cd-card .cd{font-size:20px}
.cd-card .cd-u i{font-size:12px}
.cd-lab{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cd-left{font:700 12px/1 var(--mono);color:var(--cc,var(--volt))}

/* ---------- plan cards while a campaign changes their price ---------- */
.plan[data-campaigned]{box-shadow:inset 0 0 0 2px var(--cc,var(--flare)),0 40px 100px -60px var(--cc,var(--flare))}
.plan[data-campaigned] .badge.chip{background:var(--cc,var(--flare));color:var(--ink)}
.plan[data-campaigned] .price b{color:var(--cc,var(--bone))}
.plan[data-campaigned].hot{border-color:transparent}
.plan[hidden]{display:none}

/* ---------- preview pill ---------- */
.rv{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:85;width:max-content;max-width:min(420px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:20px;background:rgba(23,21,31,.96);box-shadow:0 0 0 1px var(--night-4),0 20px 40px -12px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rv-t{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 6px 0 12px;border:0;border-radius:999px;background:none;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);cursor:pointer}
.rv-t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}
.rv-t span{margin-right:auto}
.rv-i{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--night-3);color:var(--bone);flex:none;transition:transform .2s}
.rv-t:hover .rv-i{background:var(--night-4)}
.rv.min .rv-i{transform:rotate(180deg)}
.rv-opts{display:flex;flex-wrap:wrap;gap:4px}
.rv-opts button{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--night-3);color:var(--bone);font:600 13px/1 var(--font);cursor:pointer}
.rv-opts button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}
@media (pointer:coarse){.rv-t,.rv-opts button{min-height:44px}}
.rv.min .rv-opts,.rv.min .rv-links{display:none}
.rv-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:2px 0 0;padding:4px 6px 0;border-top:1px solid var(--night-3);font-size:13px}
.rv-links small{font:700 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rv-links a{color:var(--bone);min-height:32px;display:inline-flex;align-items:center}.rv-links a[aria-current]{color:var(--volt)}
@media (max-width:760px){.rv{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
body.checkout-page .rv{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.promo *,.cd-card *{transition:none!important}}

/* ---------- consent bar (consent.js): bottom-left on a desktop, full width on a phone ---------- */
.cb{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:80;width:min(440px,calc(100vw - 24px));padding:16px 18px 14px;border-radius:20px;background:rgba(23,21,31,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--night-4),0 20px 40px -12px rgba(0,0,0,.9);animation:dIn .25s var(--ease)}
.cb-t{font-weight:700;font-size:15px;line-height:1.3;margin-bottom:6px}
.cb-p{font-size:14px;line-height:1.5;color:var(--mute)}
.cb-p a{color:var(--volt);text-underline-offset:3px}
.cb-state{margin-top:6px;color:var(--bone)}
.cb-err{margin-top:8px;font-size:13px;line-height:1.4;color:var(--flare)}
.cb-row{display:flex;gap:10px;margin-top:14px}
.cb-row .btn{flex:1 1 0;min-height:44px;padding:12px 16px;font-size:15px;background:var(--night-3);box-shadow:inset 0 0 0 1px var(--night-4)}
.cb-row .btn:hover{box-shadow:inset 0 0 0 1px var(--mute)}
html.cb-on .sticky-cta{display:none!important} /* the phone "Get it" bar steps aside while the bar is open */
@media (max-width:480px){.cb{left:10px;right:10px;width:auto}}
@media (prefers-reduced-motion:reduce){.cb{animation:none}}