@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;650&display=swap');

:root { --cream:#eee9dd; --green:#1c2d24; --sage:#748f74; --soft:#d9d5c8; --ink:#17231c; --page:#eee9dd; --surface:#f6f1e7; --copy:#17231c; --muted:#657068; --hairline:rgba(30,45,36,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page); color:var(--copy); font-family:Geist,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif; transition:background .35s ease,color .35s ease; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.site-header { height:64px; padding:0 16px; background:rgba(242,237,225,.68); display:flex; align-items:center; justify-content:space-between; position:fixed; top:14px; left:50%; width:min(1120px,calc(100% - 28px)); transform:translateX(-50%); z-index:100; border:1px solid rgba(255,255,255,.55); border-radius:16px; box-shadow:0 8px 28px rgba(28,42,34,.08); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); transition:background .35s,border-color .35s,box-shadow .25s,transform .25s; }
.site-header.scrolled { box-shadow:0 10px 35px rgba(13,25,18,.16); }
.theme-control { display:flex; align-items:center; gap:11px; padding:6px; border:0; color:inherit; background:transparent; cursor:pointer; }
.theme-control strong { font-size:18px; letter-spacing:-.5px; }
.brand-toggle { display:block; width:48px; height:26px; border-radius:30px; background:#728d74; padding:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); transition:background .3s; }
.brand-toggle span { display:block; width:20px; height:20px; margin-left:22px; border-radius:50%; background:#f9faf5; box-shadow:0 1px 3px #4f5b50; transition:margin .3s,background .3s; }
nav { display:flex; align-items:center; gap:30px; font-size:13px; }
nav a:not(.nav-button) { padding:12px 0; position:relative; }
nav a:not(.nav-button)::after { content:""; height:1px; width:0; background:var(--green); position:absolute; left:0; bottom:7px; transition:width .2s; }
nav a:hover::after { width:100%; }
.nav-button,.button { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#6e8971,#3d5144); color:#fff; padding:12px 20px; border-radius:10px; box-shadow:0 8px 25px rgba(20,40,29,.12); }
.menu-button { display:none; border:0; background:transparent; }
.hero { height:min(900px,100svh); min-height:760px; position:relative; overflow:hidden; background-image:url("assets/mountain-valley.png"); background-position:center; background-size:cover; background-repeat:no-repeat; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(245,239,225,.82) 0%,rgba(245,239,225,.42) 42%,rgba(255,255,255,.04) 70%),linear-gradient(180deg,rgba(244,237,224,.72) 0%,transparent 55%,rgba(12,29,20,.2) 100%); }
.hero-shade { position:absolute; inset:0; background:radial-gradient(circle at 52% 37%,rgba(255,250,237,.42),transparent 30%); }
.hero-copy { position:absolute; z-index:2; top:50%; left:max(9vw,60px); transform:translateY(-50%); }
h1,h2 { font-family:Geist,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-weight:500; }
h1 { margin:0; max-width:470px; font-size:61px; line-height:.98; letter-spacing:-3.6px; }
h1 em,h2 em { color:var(--sage); font-style:normal; }
.hero-copy > p { font-size:15px; line-height:1.9; margin:30px 0 28px; }
.hero-actions { display:flex; align-items:center; gap:25px; }
.button { min-width:122px; font-size:14px; }
.watch-link { display:flex; align-items:center; gap:9px; font-size:14px; }
.watch-link span,.outline-button span { width:23px; height:23px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:10px; }
.phone { width:276px; height:555px; padding:26px 13px 14px; position:absolute; z-index:3; left:64%; top:50%; transform:translate(-50%,-48%); color:#f3f4ef; background:linear-gradient(160deg,#111712,#1a241d); border:7px solid #080b09; border-radius:47px; box-shadow:inset 0 0 0 2px #394039,0 30px 70px rgba(7,16,10,.38); }
.phone::before { content:""; position:absolute; inset:-8px; border:2px solid #313530; border-radius:49px; pointer-events:none; }
.phone-island { width:91px; height:23px; position:absolute; top:8px; left:50%; transform:translateX(-50%); border-radius:20px; background:#050706; }
.status { display:flex; justify-content:space-between; font-size:9px; font-weight:600; padding:0 10px 17px; }
.phone-head { display:grid; grid-template-columns:26px 1fr 20px; align-items:center; padding:13px 8px 18px; border-bottom:1px solid rgba(255,255,255,.05); }
.phone-head strong { font-size:14px; font-weight:500; }
.instagram-icon { color:#c275c5; font-size:21px; }
.toggle-list label { min-height:67px; margin:6px 0; padding:10px 12px 10px 8px; border-radius:10px; display:grid; grid-template-columns:15px 1fr 39px; align-items:start; background:rgba(255,255,255,.025); cursor:pointer; }
.rule-icon { color:#82a885; font-size:8px; padding-top:3px; }
.toggle-list label > span:nth-child(2) { display:flex; flex-direction:column; }
.toggle-list b { font-size:11px; font-weight:500; }
.toggle-list small { margin-top:4px; color:#b9c0bb; font-size:8px; line-height:1.3; }
.toggle-list input { position:absolute; opacity:0; }
.toggle-list i { width:36px; height:20px; padding:2px; background:#424843; border:1px solid #656a66; border-radius:20px; align-self:center; }
.toggle-list i::after { content:""; display:block; width:14px; height:14px; background:#a5a9a5; border-radius:50%; transition:transform .2s; }
.toggle-list input:checked + i { background:#7da77f; border-color:#7da77f; }
.toggle-list input:checked + i::after { transform:translateX(16px); background:white; }
.phone-nav { display:flex; justify-content:space-around; color:#606862; padding-top:8px; font-size:17px; }
.phone-nav .active { color:#81bd81; }
.home-bar { width:90px; height:3px; border-radius:3px; background:#777; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); }
.promise { min-height:330px; padding:74px 25px; text-align:center; color:#f6f4ed; background:radial-gradient(circle at 52% 52%,#35493a 0,#203128 37%,#16271e 100%); position:relative; overflow:hidden; }
.promise-glow { position:absolute; width:380px; height:250px; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(145,176,141,.12); filter:blur(35px); }
.promise > *:not(.promise-glow) { position:relative; z-index:1; }
.promise h2 { font-size:43px; line-height:1.17; margin:0; }
.promise p { font-size:14px; line-height:1.7; margin:25px 0 27px; }
.outline-button { display:inline-flex; align-items:center; gap:10px; padding:13px 23px; border:1px solid rgba(255,255,255,.27); border-radius:30px; font-size:13px; }
.platforms { min-height:200px; padding:45px 25px; text-align:center; background:var(--page); transition:background .35s; }
.platforms > p { margin:0 0 32px; font-size:15px; }
.platform-list { display:flex; justify-content:center; gap:22px; }
.platform-list span { width:50px; height:50px; display:grid; place-items:center; border-radius:12px; color:var(--copy); background:rgba(30,45,36,.07); border:1px solid var(--hairline); font-weight:600; font-size:21px; transition:background .3s,color .3s; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } }
.get-toggler { padding:100px 25px; text-align:center; color:#f7f4eb; background:#213329; }
.get-toggler > p { text-transform:uppercase; letter-spacing:2px; font-size:10px; }
.get-toggler h2 { margin:20px 0 35px; font-size:52px; }
.light-button { background:#e9e4d8; color:#213329; }
footer { min-height:300px; padding:58px max(6vw,45px); background:radial-gradient(circle at 48% 40%,#34473a,#1d3026 67%); color:#e4e7e0; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:50px; font-size:12px; }
.footer-toggle { margin-bottom:25px; }
.footer-intro p { line-height:1.8; }
.socials { display:flex; gap:20px; margin:20px 0 38px; font-size:16px; }
.footer-intro small { color:#aab1ab; }
.footer-links { display:flex; flex-direction:column; gap:20px; padding-top:15px; }

html[data-theme="dark"] { --page:#0b151b; --surface:#111f24; --copy:#eef2eb; --muted:#aebbb4; --hairline:rgba(224,236,229,.15); color-scheme:dark; }
html[data-theme="dark"] .site-header { background:rgba(12,25,31,.57); border-color:rgba(207,230,220,.15); box-shadow:0 14px 40px rgba(0,0,0,.24); }
html[data-theme="dark"] .brand-toggle { background:#cbd8ce; }
html[data-theme="dark"] .brand-toggle span { margin-left:0; background:#253b31; box-shadow:none; }
html[data-theme="dark"] .hero { background-image:url("assets/mountain-night.png"); background-position:center 45%; }
html[data-theme="dark"] .hero::before { background:linear-gradient(90deg,rgba(5,15,20,.67) 0%,rgba(5,15,20,.24) 47%,rgba(5,15,20,.04) 72%),linear-gradient(180deg,rgba(4,13,19,.25),transparent 50%,rgba(4,12,16,.38)); }
html[data-theme="dark"] .hero-shade { background:radial-gradient(circle at 44% 36%,rgba(77,107,102,.13),transparent 32%); }
html[data-theme="dark"] .hero-copy { color:#f2f4ee; text-shadow:0 2px 25px rgba(0,0,0,.22); }
html[data-theme="dark"] h1 em { color:#9db69e; }
html[data-theme="dark"] .platform-list span { background:rgba(232,241,235,.06); }
html[data-theme="dark"] .promise { background:radial-gradient(circle at 52% 52%,#243a36 0,#13272a 45%,#0a171c 100%); }
html[data-theme="dark"] .get-toggler { background:#09161b; }
html[data-theme="dark"] footer { background:radial-gradient(circle at 48% 40%,#1a302d,#08151a 70%); }
@media (max-width:800px) {
  .site-header { height:64px; left:50%; top:12px; width:calc(100% - 24px); padding:0 14px; }
  .menu-button { display:block; }
  nav { display:none; position:absolute; top:70px; right:0; padding:25px; width:240px; flex-direction:column; align-items:stretch; gap:12px; color:var(--copy); background:var(--surface); border:1px solid var(--hairline); border-radius:15px; box-shadow:0 15px 35px #07100d33; }
  nav.open { display:flex; }
  .hero { height:980px; }
  .hero::before { background:linear-gradient(180deg,rgba(245,239,225,.9) 0%,rgba(245,239,225,.5) 50%,rgba(12,29,20,.15) 100%); }
  .hero-copy { top:125px; left:25px; right:25px; transform:none; text-align:center; }
  h1 { margin:auto; font-size:49px; }
  .hero-actions { justify-content:center; }
  .phone { top:430px; left:50%; transform:translateX(-50%) scale(.88); transform-origin:top center; }
  .platform-list { flex-wrap:wrap; }
  footer { grid-template-columns:1fr 1fr; }
  .footer-intro { grid-column:1 / 3; }
}
@media (max-width:480px) {
  .hero-actions { flex-direction:column; }
  .hero { height:1040px; }
  .phone { top:490px; }
  .promise h2 { font-size:36px; }
  .promise p br { display:none; }
  footer { padding:48px 30px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }

/* Launch */
.launch { position:fixed; inset:0; z-index:999; display:grid; place-items:center; color:white; background:#020403; cursor:pointer; opacity:1; transition:opacity .55s ease,background .55s ease; }
.launch.reveal { opacity:0; background:rgba(2,4,3,0); pointer-events:none; }
.launch-brand { display:flex; flex-direction:column; align-items:center; gap:26px; }
.launch-name { display:block; font-size:clamp(45px,7vw,82px); font-weight:500; letter-spacing:-4.5px; opacity:0; transform:translateY(10px); will-change:transform,opacity; }
.launch-switch { display:block; width:74px; height:40px; padding:5px; border:1px solid #526057; border-radius:40px; background:#171d19; opacity:0; will-change:transform,opacity; }
.launch-switch i { display:block; width:28px; height:28px; margin-left:0; border-radius:50%; background:#777e79; transition:transform .32s cubic-bezier(.22,.8,.25,1),margin-left .32s cubic-bezier(.22,.8,.25,1),width .72s cubic-bezier(.22,.8,.24,1),height .72s cubic-bezier(.22,.8,.24,1),background .25s,box-shadow .3s; }
.launch.ready .launch-name,.launch.ready .launch-switch { opacity:1; transform:none; transition:opacity .45s ease,transform .45s ease,filter .45s ease; }
.launch.word-out .launch-name { opacity:0; transform:translateY(-30px) scale(.97); filter:blur(12px); }
.launch.on .launch-switch { background:#78957c; box-shadow:0 0 90px 35px rgba(220,244,215,.2); }
.launch.on .launch-switch i { transform:translateX(34px); background:white; }
.launch.dark-sequence .launch-switch { background:#78957c; }
.launch.dark-sequence .launch-switch i { transform:translateX(34px); background:white; }
.launch.dark-sequence.on .launch-switch { background:#cbd8ce; box-shadow:0 0 100px 40px rgba(91,151,205,.22); }
.launch.dark-sequence.on .launch-switch i { transform:translateX(0); background:#253b31; }
.launch.flying .launch-switch { transition:left .72s cubic-bezier(.22,.8,.24,1),top .72s cubic-bezier(.22,.8,.24,1),width .72s cubic-bezier(.22,.8,.24,1),height .72s cubic-bezier(.22,.8,.24,1),padding .72s cubic-bezier(.22,.8,.24,1),border-width .72s,border-radius .72s,background .45s,box-shadow .55s,opacity .65s ease; }
body.launching { overflow:hidden; }
body.launching .site-header { opacity:0; }
.site-header { opacity:1; transition:background .35s,border-color .35s,box-shadow .25s,transform .25s,opacity .3s; }
.brand-cluster { display:flex; align-items:center; gap:10px; }
.theme-control { padding:4px; }
.wordmark,.footer-wordmark { font-size:21px; font-weight:600; letter-spacing:-.8px; }
.wordmark:hover { opacity:.65; }

/* Interactive product */
.phone-tabs { margin:0 7px 5px; padding:3px; display:grid; grid-template-columns:1fr 1fr; background:#0d120f; border-radius:9px; }
.phone-tabs button { padding:6px; border:0; border-radius:7px; color:#7d8780; background:transparent; font-size:9px; cursor:pointer; }
.phone-tabs button.active { color:#eaf1ea; background:#263129; }
.phone-view { animation:phoneFade .25s ease; }
@keyframes phoneFade { from{opacity:0;transform:translateY(4px)} }
.hidden-count { margin:8px 8px 3px; color:#92a097; font-size:8px; }
.hidden-count b { color:#a8d1a8; font-size:10px; }
.phone .toggle-list label { min-height:56px; margin:4px 0; padding:8px 10px 8px 7px; }
.preview-prompt { display:block; margin:7px auto 0; padding:7px 12px; border:0; color:#a8d1a8; background:transparent; font-size:8px; cursor:pointer; }
.preview-view { padding:2px 7px 20px; height:360px; overflow:hidden; position:relative; }
.mini-app-bar,.post-head { display:flex; align-items:center; justify-content:space-between; }
.mini-app-bar { padding:8px 2px; font-size:13px; }
.stories-strip { height:48px; padding:5px 0; display:flex; gap:7px; overflow:hidden; transition:.35s; }
.stories-strip i { width:35px;height:35px;flex:0 0 auto;border:2px solid #9e6d84;border-radius:50%;background:linear-gradient(145deg,#718875,#d6c2a6); }
.feed-post { margin:5px 0; border-radius:8px; background:#202921; overflow:hidden; transition:.35s; }
.post-head { padding:7px; font-size:7px; }
.post-head i { width:16px;height:16px;border-radius:50%;background:#7c907d; }
.post-head b { margin-right:auto;margin-left:6px; }
.post-image { height:115px;display:grid;place-items:end start;padding:9px;background:linear-gradient(145deg,#779178,#c6b490); }
.post-image span { padding:4px 6px;border-radius:5px;background:#17231ccc;font-size:7px; }
.feed-post p { padding:0 8px 8px;margin:6px 0;font-size:7px; }
.noisy-image { height:70px;background:linear-gradient(145deg,#8c6875,#5a4565); }
.reels-pill { padding:9px;border-radius:7px;background:#30242b;font-size:8px;transition:.35s; }
.feed-hidden { max-height:0!important; margin:0!important; padding-top:0!important; padding-bottom:0!important; opacity:0; transform:scale(.96); overflow:hidden; border-width:0!important; }
.feed-toast { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); width:max-content; padding:7px 10px; border-radius:20px; color:#18301f; background:#b9dfb9; font-size:7px; box-shadow:0 7px 20px #0006; }

/* Scroll story */
.story { max-width:1120px; margin:auto; padding:110px 40px; display:grid; grid-template-columns:1fr 1fr; gap:90px; background:var(--page); }
.story-copy { padding-bottom:15vh; }
.story-step { min-height:64vh; display:flex; flex-direction:column; justify-content:center; opacity:.27; transition:opacity .4s; }
.story-step.active { opacity:1; }
.story-step > span { color:var(--sage); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.story-step h2 { margin:18px 0; font-size:58px; line-height:1; }
.story-step p { max-width:470px; color:var(--muted); line-height:1.8; }
.story-visual { position:relative; }
.story-device { position:sticky; top:18vh; width:390px; min-height:500px; margin:auto; padding:30px; color:#eef1eb; background:linear-gradient(155deg,#12201a,#203329); border:1px solid #53645a; border-radius:30px; box-shadow:0 35px 80px #07130d40; }
.story-top { display:grid; grid-template-columns:43px 1fr auto; align-items:center; padding-bottom:25px; border-bottom:1px solid #ffffff12; }
.story-top > span { width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#98577b; }
.story-top small { color:#8fbe94; }
.story-row { margin-top:14px;padding:16px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;border-radius:14px;background:#ffffff08;transition:.45s; }
.story-row i { width:17px;height:17px;border:1px solid #829085;border-radius:5px; }
.story-row span { display:flex;flex-direction:column; }
.story-row small { margin-top:3px;color:#98a39c;font-size:10px; }
.story-row em { color:#afbab2;font-size:11px;font-style:normal; }
.story-device[data-story-state="1"] .noise { opacity:.35;transform:translateX(12px);text-decoration:line-through; }
.story-device[data-story-state="1"] .noise em,.story-device[data-story-state="2"] .noise em { color:#8fc395; }
.story-destination { margin-top:20px;padding:35px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid #ffffff12;border-radius:18px;opacity:.15;transform:translateY(15px);transition:.45s; }
.story-destination > span { font-size:28px; }
.story-destination small { color:#aeb8b1; }
.story-device[data-story-state="2"] .noise { max-height:0;margin:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden; }
.story-device[data-story-state="2"] .story-destination { opacity:1;transform:none;background:#8daa8e18; }

@media(max-width:800px){.launch-brand{gap:13px}.launch-name{font-size:48px}.wordmark{font-size:20px}.story{display:block;padding:80px 24px}.story-copy{padding:0}.story-step{min-height:auto;padding:65px 0}.story-step h2{font-size:45px}.story-visual{display:none}}

/* Showcase concept 3: one phone, many identities. Kept isolated so concepts 4/5 can be swapped in. */
.app-showcase { padding:110px 28px 140px; overflow:hidden; background:var(--page); }
.app-showcase__heading { max-width:1050px; margin:0 auto 65px; text-align:center; }
.app-showcase__heading > p { margin:0 0 16px; color:var(--sage); font-size:11px; text-transform:uppercase; letter-spacing:2px; }
.app-showcase__heading h2 { margin:0; font-size:clamp(46px,5vw,68px); line-height:1; letter-spacing:-3px; }
.app-showcase__heading > span { display:block; margin-top:22px; color:var(--muted); font-size:14px; }
.app-orbit { --radius:335px; width:min(980px,100%); height:720px; margin:auto; position:relative; display:grid; place-items:center; transition:--app-accent .3s; }
.app-orbit__rings,.app-orbit__rings i { position:absolute; inset:50% auto auto 50%; border:1px solid color-mix(in srgb,var(--app-accent) 28%,var(--hairline)); border-radius:50%; transform:translate(-50%,-50%); transition:border-color .4s; }
.app-orbit__rings { width:670px; height:670px; border-style:dashed; }
.app-orbit__rings i:nth-child(1) { width:540px; height:540px; }
.app-orbit__rings i:nth-child(2) { width:410px; height:410px; opacity:.65; }
.app-orbit__rings i:nth-child(3) { width:280px; height:280px; opacity:.4; }
.app-node { --x:calc(cos(var(--angle))*var(--radius)); --y:calc(sin(var(--angle))*var(--radius)); position:absolute; left:50%; top:50%; width:82px; padding:0; border:0; color:var(--copy); background:transparent; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))); cursor:pointer; z-index:3; }
.app-node span { width:60px; height:60px; margin:auto; display:grid; place-items:center; border:1px solid var(--hairline); border-radius:18px; background:color-mix(in srgb,var(--page) 84%,transparent); box-shadow:0 12px 30px rgba(15,30,21,.08); font-size:22px; font-weight:650; backdrop-filter:blur(12px); transition:.3s; }
.app-node b { display:block; margin-top:8px; font-size:10px; font-weight:500; opacity:.65; transition:.3s; }
.app-node:hover span,.app-node.active span { color:white; border-color:var(--app-accent); background:var(--app-accent); transform:translateY(-4px) scale(1.06); box-shadow:0 15px 40px color-mix(in srgb,var(--app-accent) 35%,transparent); }
.app-node.active b { opacity:1; color:var(--app-accent); }
.identity-phone { width:276px; height:565px; padding:25px 14px; position:relative; z-index:2; color:#edf2ec; background:linear-gradient(150deg,#101713,#1d2821); border:6px solid #080b09; border-radius:45px; box-shadow:0 38px 75px rgba(8,20,12,.35); overflow:hidden; }
.identity-phone::before { content:""; position:absolute; inset:-25% -50%; opacity:.12; background:radial-gradient(circle,var(--app-accent),transparent 58%); transition:background .4s; pointer-events:none; }
.identity-phone__island { width:82px; height:21px; position:absolute; top:7px; left:50%; transform:translateX(-50%); background:#050706; border-radius:20px; }
.identity-phone__status { display:flex; justify-content:space-between; padding:0 7px 17px; font-size:8px; font-weight:600; }
.identity-phone header { display:grid; grid-template-columns:35px 1fr 10px; gap:9px; align-items:center; padding:13px 4px 18px; border-bottom:1px solid #ffffff10; }
.identity-phone__icon { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:white;background:var(--app-accent);font-size:15px;font-weight:650;transition:background .35s; }
.identity-phone header div { display:flex;flex-direction:column; }
.identity-phone header small,.identity-phone__result small { color:#89958d;font-size:6px;letter-spacing:1px; }
.identity-phone header strong { margin-top:3px;font-size:12px; }
.identity-phone header i { width:6px;height:6px;border-radius:50%;background:#78b780; }
.identity-phone__summary { padding:13px 4px 8px;display:flex;justify-content:space-between;align-items:center;color:#a3aea7;font-size:8px; }
.identity-phone__summary b { color:var(--app-accent);font-size:12px;transition:color .35s; }
.identity-phone__summary em { padding:4px 7px;border-radius:10px;color:#9dc5a1;background:#305038;font-size:6px;font-style:normal; }
.identity-phone__rules > div { min-height:65px;margin:7px 0;padding:11px;display:flex;align-items:center;justify-content:space-between;border:1px solid #ffffff08;border-radius:12px;background:#ffffff05; }
.identity-phone__rules span { display:flex;flex-direction:column; }
.identity-phone__rules b { font-size:9px;font-weight:500; }
.identity-phone__rules small { margin-top:4px;color:#8d9891;font-size:7px; }
.identity-phone__rules i { width:32px;height:18px;padding:2px;border-radius:20px;background:var(--app-accent);transition:background .35s; }
.identity-phone__rules i::after { content:"";display:block;width:14px;height:14px;margin-left:14px;border-radius:50%;background:white; }
.identity-phone__result { margin-top:12px;padding:13px;display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;border:1px solid color-mix(in srgb,var(--app-accent) 35%,transparent);border-radius:12px;background:color-mix(in srgb,var(--app-accent) 10%,transparent); }
.identity-phone__result > span { width:25px;height:25px;display:grid;place-items:center;border-radius:50%;color:#102016;background:var(--app-accent);font-size:11px; }
.identity-phone__result div { display:flex;flex-direction:column; }
.identity-phone__result b { margin-top:3px;font-size:8px;font-weight:500; }
.identity-phone__home { width:85px;height:3px;position:absolute;bottom:8px;left:50%;transform:translateX(-50%);border-radius:3px;background:#788078; }
.identity-phone--changing header,.identity-phone--changing .identity-phone__summary,.identity-phone--changing .identity-phone__rules,.identity-phone--changing .identity-phone__result { animation:identityChange .4s ease; }
@keyframes identityChange { 0%{opacity:.15;transform:translateY(5px)} 100%{opacity:1;transform:none} }
.app-orbit__caption { width:255px; position:absolute; right:-10px; bottom:30px; text-align:left; }
.app-orbit__caption > span { color:var(--app-accent);font-size:10px;text-transform:uppercase;letter-spacing:1.5px; }
.app-orbit__caption strong { display:block;margin:10px 0;font-size:19px;line-height:1.25;letter-spacing:-.5px; }
.app-orbit__caption p { margin:0;color:var(--muted);font-size:11px;line-height:1.65; }
@media(max-width:850px){.app-showcase{padding:90px 20px 110px}.app-orbit{--radius:260px;height:650px;transform:scale(.9)}.app-orbit__rings{width:520px;height:520px}.app-orbit__rings i:nth-child(1){width:420px;height:420px}.app-orbit__rings i:nth-child(2){width:330px;height:330px}.app-orbit__caption{right:0;bottom:-5px}}
@media(max-width:600px){.app-orbit{--radius:150px;height:600px;transform:none}.app-orbit__rings{width:300px;height:300px}.app-orbit__rings i:nth-child(1){width:250px;height:250px}.app-orbit__rings i:nth-child(2){width:200px;height:200px}.app-node{width:60px}.app-node span{width:46px;height:46px;border-radius:13px;font-size:17px}.app-node b{font-size:8px}.identity-phone{width:230px;height:480px;padding:22px 11px;border-radius:38px;transform:scale(.82)}.identity-phone__rules>div{min-height:56px}.app-orbit__caption{width:100%;right:auto;bottom:-40px;text-align:center;padding:0 20px}}

/* Showcase concept 4: calm conveyor. Concept 3 remains above, preserved and hidden. */
.calm-conveyor { padding:110px 28px 120px; background:var(--page); overflow:hidden; }
.calm-conveyor__heading { max-width:850px; margin:0 auto 70px; text-align:center; }
.calm-conveyor__heading > p { margin:0 0 16px; color:var(--sage); font-size:11px; text-transform:uppercase; letter-spacing:2px; }
.calm-conveyor__heading h2 { margin:0; font-size:clamp(44px,5vw,68px); line-height:1; letter-spacing:-3.2px; }
.calm-conveyor__heading > span { display:block; margin-top:22px; color:var(--muted); font-size:14px; }
.conveyor-stage { width:min(1180px,100%); height:570px; margin:auto; position:relative; border:1px solid var(--hairline); border-radius:28px; background:var(--surface); overflow:hidden; }
.conveyor-stage::before { content:""; position:absolute; inset:0; opacity:.35; background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(90deg,#000,transparent 46%,transparent 54%,#000); }
.conveyor-label { position:absolute; top:30px; display:flex; flex-direction:column; z-index:2; }
.conveyor-label span { color:var(--sage); font-size:9px; text-transform:uppercase; letter-spacing:1.5px; }
.conveyor-label b { margin-top:5px; font-size:13px; font-weight:500; }
.conveyor-label--input { left:35px; }.conveyor-label--output { right:35px; text-align:right; }
.conveyor-track { height:2px; position:absolute; left:28px; right:28px; top:49%; background:var(--hairline); }
.conveyor-track i { display:block; width:28%; height:2px; background:linear-gradient(90deg,transparent,var(--sage),transparent); animation:trackFlow 2.2s linear infinite; }
@keyframes trackFlow { from{transform:translateX(-100%)}to{transform:translateX(460%)} }
.conveyor-stream { position:absolute; top:100px; bottom:60px; width:39%; }
.conveyor-stream--input { left:25px; }.conveyor-stream--output { right:25px; }
.conveyor-card,.result-card { min-height:64px; padding:10px 12px; display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; border:1px solid var(--hairline); border-radius:13px; background:color-mix(in srgb,var(--page) 88%,transparent); box-shadow:0 8px 24px rgba(15,28,20,.06); }
.conveyor-card { width:72%; position:absolute; top:calc(var(--slot)*62px); left:0; transition:transform .58s cubic-bezier(.22,.8,.25,1),opacity .4s,filter .4s; }
.conveyor-card:nth-child(even) { left:25%; }
.conveyor-card.processed { transform:translateX(64%); }
.conveyor-card.discarded { transform:translate(70%,125px) scale(.65) rotate(8deg); opacity:0; filter:blur(5px); }
.card-platform { width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:white;font-size:13px;font-weight:650; }
.instagram-card{background:#b85c91}.youtube-card{background:#e35b50}.x-card{background:#26322d}
.conveyor-card div,.result-card div { display:flex; flex-direction:column; }
.conveyor-card small,.result-card small { color:var(--muted); font-size:7px; }
.conveyor-card b,.result-card b { margin-top:2px; font-size:10px; font-weight:550; }
.conveyor-card em,.result-card em { padding:4px 6px; border-radius:8px; color:var(--muted); background:var(--surface); font-size:6px; font-style:normal; }
.noise-card { border-color:color-mix(in srgb,#b46a66 28%,var(--hairline)); }.noise-card em{color:#a05b58}.useful-card em{color:#5f8a67}
.conveyor-filter { width:190px; height:190px; position:absolute; left:50%; top:50%; z-index:4; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--sage) 45%,var(--hairline)); border-radius:50%; color:#edf3ed; background:radial-gradient(circle,#314b3b,#17291f 70%); box-shadow:0 25px 65px rgba(10,26,15,.28); }
.filter-halo { position:absolute; inset:-25px; border:1px dashed color-mix(in srgb,var(--sage) 45%,transparent); border-radius:50%; animation:filterSpin 16s linear infinite; }
@keyframes filterSpin { to{transform:rotate(360deg)} }
.filter-switch { width:53px;height:29px;padding:3px;border-radius:25px;background:#739076; }
.filter-switch i { display:block;width:23px;height:23px;margin-left:24px;border-radius:50%;background:white; }
.conveyor-filter strong { margin-top:10px;font-size:17px;letter-spacing:-.5px; }.conveyor-filter>small{margin-top:3px;color:#9fb0a4;font-size:7px}.filter-count{margin-top:12px;padding:5px 8px;border-radius:10px;color:#b5d3b8;background:#ffffff0d;font-size:7px;font-weight:500}.filter-count i{font-style:normal}
.conveyor-bin { position:absolute; left:50%; bottom:25px; transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;color:var(--muted);font-size:7px; }
.conveyor-bin span { width:29px;height:29px;margin-bottom:4px;display:grid;place-items:center;border:1px solid var(--hairline);border-radius:50%;font-size:13px; }
.result-card { width:82%; margin:19px 0 0 auto; position:relative; opacity:.12; transform:translateX(-45px) scale(.96); transition:.55s cubic-bezier(.22,.8,.25,1); }
.result-card.delivered { opacity:1; transform:none; border-color:color-mix(in srgb,var(--sage) 40%,var(--hairline)); box-shadow:0 12px 32px rgba(55,100,67,.11); }
.result-card.delivered::after { content:"✓"; position:absolute; right:-6px; width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:#17301f;background:#a9d5ad;font-size:8px; }
.conveyor-controls { max-width:1180px;margin:22px auto 0;display:flex;align-items:center;justify-content:space-between; }
.conveyor-replay { padding:10px 15px;border:1px solid var(--hairline);border-radius:20px;color:var(--copy);background:transparent;cursor:pointer; }.conveyor-replay span{margin-right:6px}.conveyor-controls p{color:var(--muted);font-size:11px}.conveyor-controls p b{color:var(--copy)}
@media(max-width:780px){.calm-conveyor{padding:90px 18px}.conveyor-stage{height:780px}.conveyor-label--input{left:20px}.conveyor-label--output{right:20px;top:445px}.conveyor-track{left:50%;top:75px;bottom:75px;width:2px;height:auto}.conveyor-stream{left:18px;right:18px;width:auto;height:270px;bottom:auto}.conveyor-stream--input{top:100px}.conveyor-stream--output{top:500px}.conveyor-card{width:62%;top:calc(var(--slot)*43px);left:0;min-height:49px;padding:7px}.conveyor-card:nth-child(even){left:34%}.conveyor-card.processed{transform:translateY(95px)}.conveyor-card.discarded{transform:translate(0,150px) scale(.65);opacity:0}.conveyor-filter{width:145px;height:145px;top:52%}.conveyor-bin{left:78%;bottom:355px}.result-card{width:80%;margin:12px auto}.conveyor-controls{display:block;text-align:center}.conveyor-controls p{margin-top:14px}.conveyor-stage::before{mask-image:none;opacity:.16}}

/* Showcase concept 5: question-led distraction wall. Concepts 3/4 stay preserved above. */
.distraction-wall { padding:110px max(4vw,24px) 125px; background:var(--page); }
.distraction-wall__heading { max-width:800px;margin:0 auto 65px;text-align:center; }
.distraction-wall__heading>p { margin:0 0 16px;color:var(--sage);font-size:11px;text-transform:uppercase;letter-spacing:2px; }
.distraction-wall__heading h2 { margin:0;font-size:clamp(46px,5vw,68px);line-height:1;letter-spacing:-3.2px; }
.distraction-wall__heading>span { display:block;margin-top:22px;color:var(--muted);font-size:14px; }
.distraction-grid { max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.distraction-tile { min-height:360px;padding:25px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--hairline);border-radius:18px;color:var(--copy);background:var(--surface);cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s; }
.distraction-tile::before { content:"";width:260px;height:260px;position:absolute;right:-160px;top:-170px;border-radius:50%;background:var(--tile-accent);filter:blur(8px);opacity:0;transition:.45s; }
.distraction-tile:hover,.distraction-tile:focus-visible,.distraction-tile.active { transform:translateY(-4px);border-color:color-mix(in srgb,var(--tile-accent) 55%,var(--hairline));box-shadow:0 20px 50px color-mix(in srgb,var(--tile-accent) 13%,transparent); }
.distraction-tile:hover::before,.distraction-tile:focus-visible::before,.distraction-tile.active::before { opacity:.17;transform:scale(1.25); }
.tile-number { position:absolute;right:22px;top:20px;color:var(--muted);font-size:9px; }
.tile-icon { width:43px;height:43px;display:grid;place-items:center;border-radius:12px;color:white;background:var(--tile-accent);font-size:16px;font-weight:650;box-shadow:0 9px 22px color-mix(in srgb,var(--tile-accent) 30%,transparent); }
.distraction-tile>small { margin-top:25px;color:var(--tile-accent);font-size:9px;text-transform:uppercase;letter-spacing:1.5px; }
.distraction-tile h3 { margin:13px 0 12px;font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-1.3px; }
.distraction-tile>p { max-width:290px;margin:0;color:var(--muted);font-size:12px;line-height:1.65; }
.tile-transformation { width:100%;margin-top:auto;padding-top:19px;display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center;border-top:1px solid var(--hairline);opacity:.35;transform:translateY(8px);transition:.35s; }
.distraction-tile:hover .tile-transformation,.distraction-tile:focus-visible .tile-transformation,.distraction-tile.active .tile-transformation { opacity:1;transform:none; }
.tile-transformation span { display:flex;flex-direction:column;min-width:0; }
.tile-transformation i { color:var(--muted);font-size:7px;font-style:normal;text-transform:uppercase;letter-spacing:1px; }
.tile-transformation b { margin-top:4px;overflow:hidden;color:var(--copy);font-size:8px;font-weight:500;white-space:nowrap;text-overflow:ellipsis; }
.tile-transformation em { color:var(--tile-accent);font-size:15px;font-style:normal; }
.wall-detail { max-width:1180px;min-height:260px;margin:18px auto 0;padding:28px 32px;display:grid;grid-template-columns:.65fr 1.5fr .8fr;gap:35px;align-items:center;border:1px solid color-mix(in srgb,var(--detail-accent) 35%,var(--hairline));border-radius:20px;background:color-mix(in srgb,var(--detail-accent) 5%,var(--surface));overflow:hidden;transition:border-color .35s,background .35s; }
.wall-detail__platform { display:flex;align-items:center;gap:13px; }
.wall-detail__platform>span { width:48px;height:48px;display:grid;place-items:center;border-radius:13px;color:white;background:var(--detail-accent);font-size:18px;font-weight:650;transition:background .35s; }
.wall-detail__platform>div { display:flex;flex-direction:column; }.wall-detail__platform small{color:var(--muted);font-size:7px;letter-spacing:1px}.wall-detail__platform b{margin-top:5px;font-size:13px;font-weight:550}
.wall-detail__route { display:grid;grid-template-columns:1fr auto .85fr;gap:15px;align-items:center; }
.wall-detail__route>div { min-height:145px;padding:15px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--hairline);border-radius:13px;background:var(--page); }
.wall-detail__route small { margin-bottom:11px;color:var(--muted);font-size:7px;letter-spacing:1px; }
.wall-detail__route span { font-size:9px;font-weight:500; }.wall-detail__route i{width:1px;height:9px;margin:3px 0 3px 7px;background:var(--hairline)}.wall-detail__route .route-noise{color:#a66c68;text-decoration:line-through}.wall-detail__route>em{color:var(--muted);font-size:8px;font-style:normal}.wall-detail__route .clean-route{border-color:color-mix(in srgb,var(--detail-accent) 45%,var(--hairline));}.clean-route b{margin-top:12px;color:var(--detail-accent);font-size:7px;font-weight:550}
.wall-detail__copy { margin:0;color:var(--muted);font-size:12px;line-height:1.7; }
.wall-detail--changing>* { animation:wallChange .38s ease; }@keyframes wallChange{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:900px){.distraction-grid{grid-template-columns:1fr 1fr}.wall-detail{grid-template-columns:1fr 1.5fr}.wall-detail__copy{grid-column:1/3}}
@media(max-width:600px){.distraction-wall{padding:90px 18px}.distraction-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 5px 15px;gap:10px}.distraction-tile{min-width:82vw;min-height:345px;scroll-snap-align:center}.wall-detail{padding:22px;display:block}.wall-detail__route{margin:24px 0;grid-template-columns:1fr}.wall-detail__route>em{text-align:center}.wall-detail__copy{font-size:11px}}

/* Active showcase: slow 3D app carousel with Cluely-style floating glass. */
.app-carousel { padding:110px 24px 125px; overflow:hidden; color:#f3f1e9; background:radial-gradient(circle at 50% 55%,#294b3d 0,#173229 42%,#10251e 100%); }
.app-carousel__heading { max-width:820px;margin:0 auto 45px;text-align:center; }.app-carousel__heading>p{margin:0 0 15px;color:#9eb6a2;font-size:11px;text-transform:uppercase;letter-spacing:2px}.app-carousel__heading h2{margin:0;color:#f3f1e9;font-size:clamp(46px,5vw,68px);line-height:1;letter-spacing:-3.2px}.app-carousel__heading h2 em{color:#a9c2aa}.app-carousel__heading>span{display:block;margin-top:20px;color:#b8c5bc;font-size:14px}
.carousel-scene { width:min(1120px,100%);height:610px;margin:auto;position:relative;perspective:1100px;touch-action:pan-y;user-select:none; }
.carousel-rail { height:270px;position:absolute;left:0;right:0;top:130px;transform-style:preserve-3d; }
.carousel-app { --offset:0;--depth:0;width:158px;position:absolute;left:50%;top:50%;padding:0;border:0;color:#f3f1e9;background:transparent;transform:translate(-50%,-50%) translateX(calc(var(--offset)*190px)) translateZ(calc(var(--depth)*-110px)) rotateY(calc(var(--offset)*-11deg)) scale(calc(1 - var(--depth)*.09));opacity:calc(1 - var(--depth)*.18);transition:transform .75s cubic-bezier(.22,.8,.24,1),opacity .6s;cursor:pointer;z-index:calc(10 - var(--depth)); }
.carousel-app img,.facebook-logo { width:138px;height:138px;display:block;margin:auto;object-fit:cover;border-radius:31px;box-shadow:0 24px 55px rgba(13,27,18,.18);transition:.5s; }
.facebook-logo { display:grid;place-items:center;color:white;background:#1877f2;font-size:100px;font-weight:650;line-height:1; }
.carousel-app>span:last-child { display:block;margin-top:13px;font-size:12px;font-weight:550;opacity:.55;transition:.3s; }
.carousel-app.active img,.carousel-app.active .facebook-logo { transform:translateY(-9px);box-shadow:0 32px 80px rgba(13,27,18,.27); }.carousel-app.active>span:last-child{opacity:1;font-size:14px}
.carousel-app:not(.active):hover img,.carousel-app:not(.active):hover .facebook-logo{transform:translateY(-5px)}
.carousel-glass { position:absolute;inset:0;pointer-events:none; }
.glass-feature { position:absolute;padding:20px;border:1px solid rgba(255,255,255,.52);border-radius:18px;background:color-mix(in srgb,var(--surface) 63%,transparent);box-shadow:0 18px 55px rgba(18,33,24,.13);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%); }
.glass-feature--primary { width:280px;left:6%;top:24px;transform:rotate(-2deg); }.glass-feature--secondary{width:285px;right:5%;top:300px;transform:rotate(2deg)}.glass-feature--stat{left:12%;bottom:35px;display:flex;align-items:center;gap:11px;padding:15px 19px}
.glass-kicker { color:var(--sage);font-size:7px;letter-spacing:1.2px; }.glass-feature h3{margin:8px 0 7px;font-size:19px;font-weight:550;letter-spacing:-.5px}.glass-feature p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}.glass-toggle,.glass-route{margin-top:15px;padding-top:12px;display:flex;align-items:center;border-top:1px solid var(--hairline);font-size:8px}.glass-toggle span{flex:1}.glass-toggle i{width:29px;height:17px;padding:2px;border-radius:20px;background:#79947c}.glass-toggle i::after{content:"";display:block;width:13px;height:13px;margin-left:12px;border-radius:50%;background:white}.glass-toggle b{margin-left:7px;color:var(--sage)}.glass-route{gap:8px}.glass-route b{color:var(--sage)}.glass-feature--stat strong{font-size:28px;letter-spacing:-1px}.glass-feature--stat span{color:var(--muted);font-size:8px;line-height:1.3}
.glass-feature--changing { animation:glassChange .45s ease; }@keyframes glassChange{from{opacity:.2;filter:blur(7px);transform:translateY(7px)}to{opacity:1;filter:none}}
.carousel-arrow { width:40px;height:40px;position:absolute;top:48%;z-index:20;border:1px solid var(--hairline);border-radius:50%;color:var(--copy);background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(12px);cursor:pointer}.carousel-arrow--prev{left:0}.carousel-arrow--next{right:0}
.carousel-hint { margin:8px 0 0;text-align:center;color:#9dac9f;font-size:9px;letter-spacing:.4px; }
html[data-theme="dark"] .app-carousel { background:radial-gradient(circle at 50% 55%,#12303b 0,#07151d 48%,#040d12 100%); }
html[data-theme="dark"] .glass-feature { border-color:rgba(225,239,231,.15);background:rgba(14,29,34,.65); }
@media(max-width:760px){.app-carousel{padding:90px 16px}.carousel-scene{height:650px}.carousel-rail{top:150px}.carousel-app{width:112px;transform:translate(-50%,-50%) translateX(calc(var(--offset)*115px)) translateZ(calc(var(--depth)*-90px)) rotateY(calc(var(--offset)*-11deg)) scale(calc(1 - var(--depth)*.1))}.carousel-app img,.facebook-logo{width:100px;height:100px;border-radius:23px}.facebook-logo{font-size:70px}.glass-feature--primary{width:235px;left:2%;top:20px}.glass-feature--secondary{width:240px;right:1%;top:400px}.glass-feature--stat{left:5%;bottom:25px}.carousel-arrow{top:49%}}

/* Active showcase: the controls directly edit one phone preview. */
.phone-showcase{padding:110px 24px 105px;overflow:hidden;color:#f3f1e9;background:radial-gradient(circle at 50% 58%,#294b3d 0,#173229 43%,#10251e 100%)}
.phone-showcase__heading{text-align:center}.phone-showcase__heading>p{margin:0 0 14px;color:#9eb6a2;font-size:10px;text-transform:uppercase;letter-spacing:2px}.phone-showcase__heading h2{margin:0;color:#f3f1e9;font-size:clamp(45px,5vw,68px);line-height:1;letter-spacing:-3.2px}.phone-showcase__heading h2 em{color:#a9c2aa}.phone-showcase__heading>span{display:block;margin-top:18px;color:#b8c5bc;font-size:13px}
.phone-showcase__stage{width:min(960px,100%);height:650px;margin:35px auto 0;position:relative;display:grid;place-items:center}.phone-showcase__stage::before{content:"";width:390px;height:390px;position:absolute;border-radius:50%;background:rgba(165,197,170,.11);filter:blur(45px)}
.showcase-iphone{width:300px;height:595px;position:relative;z-index:2;overflow:hidden;padding:47px 14px 18px;border:7px solid #070a08;border-radius:49px;color:#17231c;background:#f7f4ed;box-shadow:inset 0 0 0 2px #3c423d,0 40px 90px rgba(0,0,0,.38)}.showcase-iphone__island{width:92px;height:23px;position:absolute;top:9px;left:50%;transform:translateX(-50%);border-radius:20px;background:#070908}.showcase-iphone__status{position:absolute;top:17px;left:18px;right:18px;display:flex;justify-content:space-between;color:#f4f5f1;font-size:8px}.showcase-iphone header{height:48px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #d9ddd8}.showcase-iphone header img{width:30px;height:30px;object-fit:cover;border-radius:8px}.showcase-iphone header strong{flex:1;font-size:12px}.showcase-iphone header span{font-size:11px}.showcase-feed-tabs{height:36px;display:flex;align-items:center;gap:19px;border-bottom:1px solid #e0e2df;font-size:9px}.showcase-feed-tabs b{border-bottom:2px solid #50735c;padding:13px 2px 10px}.showcase-feed-tabs span{color:#8e9690}.showcase-stories{height:58px;padding:9px 1px;display:flex;gap:9px;overflow:hidden;transition:.35s}.showcase-stories i{width:39px;height:39px;flex:none;border:2px solid #b75a8e;border-radius:50%;background:linear-gradient(135deg,#ced8cd,#71867a)}
.showcase-post{margin-top:7px;border:1px solid #e2e5e1;border-radius:10px;overflow:hidden;background:white;transition:.38s}.showcase-post>div{height:31px;padding:7px;display:flex;align-items:center;gap:7px;font-size:8px}.showcase-post>div i{width:18px;height:18px;border-radius:50%;background:#9daf9f}.showcase-post>div b{flex:1}.showcase-post figure{height:176px;margin:0;display:grid;place-items:end start;padding:12px;background:linear-gradient(150deg,#c9d4c6,#587162);color:white}.showcase-post figure span{font-size:8px}.showcase-post>p{margin:0;padding:8px;font-size:8px}.showcase-post>p small{color:#939b95}.showcase-post--suggested figure{height:105px;background:linear-gradient(140deg,#c9a47f,#80654e)}.showcase-short-feed{margin-top:7px;padding:14px 10px;display:flex;justify-content:space-between;border-radius:9px;color:white;background:#1c2520;font-size:8px;transition:.38s}.showcase-clean-state{position:absolute;left:23px;right:23px;bottom:20px;padding:10px;text-align:center;border-radius:18px;color:#52765c;background:#e7efe7;font-size:8px;transition:.3s}.showcase-iphone__home{width:90px;height:3px;position:absolute;left:50%;bottom:7px;transform:translateX(-50%);border-radius:4px;background:#8e928f}
.showcase-iphone.is-stories-hidden .showcase-stories{height:0;padding-top:0;padding-bottom:0;opacity:0}.showcase-iphone.is-suggestions-hidden .showcase-post--suggested,.showcase-iphone.is-short-hidden .showcase-short-feed{max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;transform:scale(.97)}
.showcase-control{width:245px;position:absolute;z-index:3;padding:17px 18px;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.34);border-radius:16px;color:#f3f1e9;background:rgba(235,240,234,.12);box-shadow:0 18px 55px rgba(0,0,0,.18);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);cursor:pointer}.showcase-control--one{left:4%;top:90px;transform:rotate(-2deg)}.showcase-control--two{right:3%;top:245px;transform:rotate(2deg)}.showcase-control--three{left:7%;bottom:80px;transform:rotate(1deg)}.showcase-control>span{display:flex;flex:1;flex-direction:column;gap:4px}.showcase-control b{font-size:12px}.showcase-control small{color:#b8c5bc;font-size:8px}.showcase-control input{position:absolute;opacity:0}.showcase-control>i{width:38px;height:22px;padding:3px;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:#52645a}.showcase-control>i::after{content:"";display:block;width:14px;height:14px;border-radius:50%;background:#b8c1ba;transition:.25s}.showcase-control input:checked+i{background:#86a88b}.showcase-control input:checked+i::after{transform:translateX(16px);background:white}
.showcase-apps{display:flex;justify-content:center;gap:13px}.showcase-apps button{width:65px;padding:6px;border:1px solid transparent;border-radius:14px;color:#d8e0da;background:transparent;cursor:pointer;opacity:.48;transition:.25s}.showcase-apps button.active{opacity:1;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}.showcase-apps img{width:42px;height:42px;display:block;margin:auto;object-fit:cover;border-radius:11px}.showcase-apps span{display:block;margin-top:6px;font-size:7px}
html[data-theme="dark"] .phone-showcase{background:radial-gradient(circle at 50% 58%,#12303b 0,#07151d 48%,#040d12 100%)}
@media(max-width:760px){.phone-showcase{padding:90px 15px}.phone-showcase__heading h2{font-size:32px;letter-spacing:-1.8px}.phone-showcase__stage{width:calc(100vw - 30px);height:680px;margin-top:20px}.showcase-iphone{transform:scale(.72)}.showcase-control{width:155px;padding:11px}.showcase-control b{font-size:9px}.showcase-control small{font-size:6px}.showcase-control--one{left:0;top:45px}.showcase-control--two{right:0;top:350px}.showcase-control--three{left:0;bottom:35px}.showcase-apps{gap:3px}.showcase-apps button{width:58px}}
@media(max-width:430px){.phone-showcase__stage{height:630px}.showcase-apps span{display:none}}
@media(prefers-reduced-motion:reduce){.showcase-iphone *,.showcase-control *{transition:none!important}}

/* Active showcase: a scroll-led story with one persistent product view. */
.platform-chapters{padding:120px 24px 80px;background:radial-gradient(circle at 73% 31%,color-mix(in srgb,var(--sage) 12%,var(--page)),var(--page) 38%)}
.platform-chapters__heading{max-width:1120px;margin:0 auto 75px}.platform-chapters__heading>p{margin:0 0 16px;color:var(--sage);font-size:11px;text-transform:uppercase;letter-spacing:2px}.platform-chapters__heading h2{margin:0;font-size:clamp(48px,6vw,76px);line-height:.96;letter-spacing:-4px}.platform-chapters__heading h2 em{color:var(--sage);font-style:normal}.platform-chapters__heading>span{display:block;margin-top:22px;color:var(--muted);font-size:14px}
.platform-chapters__layout{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(520px,1.18fr);gap:80px;align-items:start}
.platform-chapter{min-height:67vh;display:flex;align-items:center;opacity:.26;transition:opacity .35s,transform .35s;transform:translateX(-8px)}
.platform-chapter.active{opacity:1;transform:none}.platform-chapter button{width:100%;padding:30px 0 30px 25px;text-align:left;border:0;border-left:1px solid var(--hairline);color:var(--copy);background:transparent;cursor:pointer}.platform-chapter.active button{border-left:2px solid var(--chapter-accent,var(--sage))}.platform-chapter button>span{color:var(--sage);font-size:9px;text-transform:uppercase;letter-spacing:1.4px}.platform-chapter h3{margin:16px 0;font-size:clamp(34px,3.5vw,51px);line-height:1.02;letter-spacing:-2.4px;font-weight:520}.platform-chapter p{max-width:430px;margin:0;color:var(--muted);font-size:13px;line-height:1.75}.platform-chapter small{display:block;margin-top:20px;color:var(--copy);font-size:9px;letter-spacing:.4px}
.chapter-stage{--chapter-accent:#b85c91;height:650px;position:sticky;top:calc(50vh - 290px);display:grid;place-items:center;isolation:isolate}
.chapter-stage::before{content:"";width:430px;height:430px;position:absolute;border-radius:50%;background:color-mix(in srgb,var(--chapter-accent) 21%,transparent);filter:blur(65px);opacity:.65;transition:background .5s}
.chapter-device{width:292px;height:566px;position:relative;z-index:2;overflow:hidden;padding:54px 18px 18px;border:6px solid #171a18;border-radius:47px;color:#e9efea;background:linear-gradient(155deg,#26342c,#111713 64%);box-shadow:0 42px 90px rgba(14,25,18,.3),inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .5s}
.chapter-device__island{width:88px;height:22px;position:absolute;top:13px;left:50%;transform:translateX(-50%);border-radius:20px;background:#060706}.chapter-device header{display:flex;align-items:center;gap:10px}.chapter-device header img{width:39px;height:39px;object-fit:cover;border-radius:10px}.chapter-device header span{display:flex;flex:1;flex-direction:column;gap:2px}.chapter-device header small{color:#8b9a90;font-size:6px;letter-spacing:1px}.chapter-device header strong{font-size:14px}.chapter-device header>i{color:#718078;font-style:normal;font-size:9px}
.chapter-device__status{margin:25px 0 14px;padding:19px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--chapter-accent) 25%,rgba(255,255,255,.05)),rgba(255,255,255,.03))}.chapter-device__status strong{font-size:38px;line-height:1}.chapter-device__status span{color:#aeb9b2;font-size:8px;line-height:1.35}
.chapter-device__rules{display:grid;gap:8px}.chapter-device__rules>div{padding:14px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:rgba(255,255,255,.035)}.chapter-device__rules span{display:flex;flex:1;flex-direction:column;gap:3px}.chapter-device__rules b{font-size:10px;font-weight:550}.chapter-device__rules small{color:#7f8e85;font-size:7px}.chapter-device__rules i,.chapter-glass__toggle i{width:30px;height:18px;padding:2px;border-radius:20px;background:var(--chapter-accent);transition:background .45s}.chapter-device__rules i::after,.chapter-glass__toggle i::after{content:"";display:block;width:14px;height:14px;margin-left:12px;border-radius:50%;background:white;box-shadow:0 1px 4px rgba(0,0,0,.25)}.chapter-device footer{position:absolute;left:18px;right:18px;bottom:20px;padding:14px 4px 3px;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);font-size:8px}.chapter-device footer span{color:#7f8e85}.chapter-device footer strong{color:#dce7df}
.chapter-glass{width:245px;position:absolute;z-index:3;padding:19px;border:1px solid rgba(255,255,255,.55);border-radius:18px;background:color-mix(in srgb,var(--surface) 68%,transparent);box-shadow:0 20px 60px rgba(15,29,19,.16);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}.chapter-glass--control{left:0;top:55px;transform:rotate(-2deg)}.chapter-glass--route{right:0;bottom:60px;transform:rotate(2deg)}.chapter-glass>span{color:var(--chapter-accent);font-size:7px;letter-spacing:1.15px}.chapter-glass h3{margin:8px 0 6px;font-size:18px;letter-spacing:-.6px}.chapter-glass p{margin:0;color:var(--muted);font-size:9px;line-height:1.55}.chapter-glass__toggle,.chapter-glass--route>div{margin-top:14px;padding-top:11px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--hairline);font-size:8px}.chapter-glass__toggle>span,.chapter-glass--route small{flex:1;color:var(--copy)}.chapter-glass__toggle b,.chapter-glass--route b{color:var(--chapter-accent)}.chapter-glass--route i{font-style:normal}
.chapter-stage--changing .chapter-device header,.chapter-stage--changing .chapter-device__status,.chapter-stage--changing .chapter-device__rules,.chapter-stage--changing .chapter-device footer,.chapter-stage--changing .chapter-glass>*{animation:chapterChange .4s ease}@keyframes chapterChange{from{opacity:.1;transform:translateY(7px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
html[data-theme="dark"] .chapter-glass{border-color:rgba(225,239,231,.14);background:rgba(10,26,31,.7)}
@media(max-width:940px){.platform-chapters__layout{grid-template-columns:minmax(260px,.8fr) minmax(440px,1.2fr);gap:25px}.chapter-stage{transform:scale(.88);transform-origin:top center}.chapter-glass{width:220px}.chapter-glass--control{left:-5px}.chapter-glass--route{right:-5px}}
@media(max-width:720px){.platform-chapters{padding:90px 18px 70px}.platform-chapters__heading{margin-bottom:45px}.platform-chapters__heading h2{letter-spacing:-3px}.platform-chapters__layout{display:flex;flex-direction:column}.chapter-stage{width:100%;height:585px;position:relative;top:auto;order:0;transform:scale(.9);margin-bottom:-35px}.platform-chapters__copy{order:1}.platform-chapter{min-height:auto;opacity:.45;transform:none}.platform-chapter button{padding:32px 12px 32px 22px}.platform-chapter h3{font-size:35px}.chapter-glass{width:205px;padding:16px}.chapter-glass--control{top:20px}.chapter-glass--route{right:0;bottom:15px}}
@media(max-width:480px){.chapter-stage{height:545px;transform:scale(.79);width:100%;margin-left:0;margin-bottom:-85px}.platform-chapter p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.platform-chapter,.chapter-stage *{animation:none!important;transition:none!important}}