:root{--bg:#070707;--surface:#101010;--line:rgba(255,255,255,.1);--text:#f6f6f3;--muted:#9c9c98;--red:#ff5338;--green:#94d515;--blue:#18aeea;--yellow:#ffc12c;--radius:26px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 0%,rgba(255,83,56,.09),transparent 28rem),radial-gradient(circle at 80% 18%,rgba(24,174,234,.08),transparent 25rem),var(--bg);color:var(--text);font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}img{display:block;max-width:100%}.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}.ambient{position:fixed;pointer-events:none;filter:blur(90px);opacity:.14;border-radius:50%;z-index:-1}.ambient-one{width:360px;height:360px;background:var(--red);top:-160px;left:-140px}.ambient-two{width:420px;height:420px;background:var(--blue);right:-240px;top:380px}.nav{height:84px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:20px}.brand img{width:36px;height:36px;border-radius:9px}.nav-links{display:flex;gap:32px;color:var(--muted);font-size:14px}.nav-links a:hover{color:var(--text)}.button{display:inline-flex;justify-content:center;align-items:center;border:1px solid transparent;border-radius:14px;height:52px;padding:0 22px;font-weight:700;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-small{height:42px;padding-inline:18px;border-radius:12px;font-size:14px}.button-ghost{border-color:var(--line);background:rgba(255,255,255,.03)}.button-primary{background:var(--text);color:#080808;box-shadow:0 14px 40px rgba(255,255,255,.09)}.button-primary svg{width:18px;margin-right:10px;fill:currentColor}.button-secondary{background:transparent;color:var(--text);border-color:var(--line)}.button-large{height:60px;padding-inline:30px;border-radius:16px}.hero{min-height:700px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:72px 0 88px}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:#c8c8c3;font-size:14px;font-weight:600;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025)}.status-dot{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 16px rgba(148,213,21,.7)}h1,h2,h3{font-family:"Space Grotesk",sans-serif;margin:0}h1{font-size:clamp(54px,6.4vw,86px);line-height:.98;letter-spacing:-4.6px;max-width:680px;margin-top:26px}.hero-text{color:var(--muted);font-size:20px;line-height:1.65;max-width:590px;margin:30px 0 0}.hero-actions{display:flex;gap:12px;margin-top:36px}.download-meta{display:flex;flex-wrap:wrap;gap:8px;color:#757571;font-size:12px;margin-top:17px}.hero-visual{position:relative}.mac-window{border-radius:22px;border:1px solid rgba(255,255,255,.14);background:#111;box-shadow:0 40px 90px rgba(0,0,0,.5);overflow:hidden;transform:perspective(900px) rotateY(-3deg) rotateX(2deg)}.window-top{height:46px;background:#191919;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;position:relative;padding:0 16px}.traffic{display:flex;gap:7px}.traffic span{width:11px;height:11px;border-radius:50%;background:#3b3b3b}.window-title{position:absolute;inset-inline:0;text-align:center;color:#747470;font-size:12px}.desktop-preview{min-height:490px;position:relative;background:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),radial-gradient(circle at 50% 50%,#171717,#0d0d0d);background-size:32px 32px,32px 32px,auto}.desktop-file{position:absolute;width:80px;text-align:center;color:#8f8f8a;font-size:10px}.file-one{top:55px;left:45px}.file-two{top:180px;right:48px}.file-three{bottom:48px;left:80px}.file-icon{width:40px;height:50px;border:1px solid rgba(255,255,255,.2);border-radius:6px;margin:0 auto 8px;background:linear-gradient(135deg,#1a1a1a,#252525)}.file-icon.image{background:linear-gradient(145deg,#16232a,#153e54)}.sidekick-bubble{position:absolute;right:22px;top:48%;width:68px;height:68px;border-radius:22px;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.13);animation:float 4s ease-in-out infinite}.sidekick-bubble img{width:100%;height:100%;object-fit:cover}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}.command-card{position:absolute;width:min(78%,390px);left:50%;top:50%;transform:translate(-50%,-48%);background:rgba(20,20,20,.94);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:20px;box-shadow:0 28px 70px rgba(0,0,0,.48)}.command-label{color:#6e6e6a;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.typing-line{height:64px;display:flex;align-items:center;font-size:19px;font-weight:600}.typing-line i{width:2px;height:23px;background:var(--text);margin-left:4px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.command-result{display:flex;gap:10px;align-items:center;color:#c0c0bb;border-top:1px solid var(--line);padding-top:15px;font-size:13px}.check{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:rgba(148,213,21,.14);color:var(--green)}.floating-pill{position:absolute;padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:#101010;color:#b8b8b3;font-size:11px;box-shadow:0 12px 30px rgba(0,0,0,.32)}.pill-one{top:8%;right:-4%}.pill-two{bottom:17%;left:-5%}.pill-three{top:27%;left:-9%}.trust-strip{display:flex;justify-content:center;gap:28px;padding:22px;border-block:1px solid var(--line);color:#7d7d78;font-size:14px}.section{padding:130px 0}.section-heading{max-width:710px;margin-bottom:54px}.kicker{color:#8d8d88;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;margin:0 0 16px}.section-heading h2,.privacy-copy h2,.download-card h2{font-size:clamp(42px,5vw,68px);letter-spacing:-3px;line-height:1.02}.section-heading>p:last-child{color:var(--muted);font-size:18px;line-height:1.6;margin:20px 0 0}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.feature-card{min-height:0;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.016));border:1px solid var(--line);border-radius:var(--radius);padding:26px;overflow:hidden;position:relative}.feature-large{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:40px}.feature-wide{grid-column:1/-1;min-height:330px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:50px}.tag{display:inline-block;color:#83837f;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:18px 0 10px}.feature-card h3{font-size:30px;letter-spacing:-1.2px}.feature-card p{color:var(--muted);line-height:1.65;max-width:500px}.gradient-bars{width:72px}.gradient-bars span{display:block;height:7px;border-radius:5px;margin-bottom:7px}.gradient-bars span:nth-child(1){width:64px;background:var(--red)}.gradient-bars span:nth-child(2){width:52px;background:var(--green)}.gradient-bars span:nth-child(3){width:72px;background:var(--blue)}.gradient-bars span:nth-child(4){width:40px;background:var(--yellow)}.line-icon{width:52px;height:52px;border:1px solid rgba(255,255,255,.16);border-radius:16px;position:relative}.folder-icon:before{content:"";position:absolute;width:26px;height:18px;border:2px solid var(--yellow);border-radius:4px;left:12px;top:17px}.folder-icon:after{content:"";position:absolute;width:12px;height:5px;border:2px solid var(--yellow);border-bottom:0;border-radius:3px 3px 0 0;left:14px;top:12px}.launch-icon:before{content:"↗";color:var(--red);font-size:29px;position:absolute;inset:0;display:grid;place-items:center}.screen-icon:before{content:"";position:absolute;width:28px;height:20px;border:2px solid var(--blue);border-radius:4px;left:10px;top:11px}.screen-icon:after{content:"";position:absolute;width:15px;height:2px;background:var(--blue);left:18px;bottom:11px;box-shadow:0 -5px 0 -1px var(--blue)}.utility-icon:before{content:"⌘";color:var(--green);font-size:26px;position:absolute;inset:0;display:grid;place-items:center}.mini-demo{background:#0c0c0c;border:1px solid var(--line);border-radius:20px;padding:28px;min-height:250px;display:flex;flex-direction:column;justify-content:center}.chat{width:fit-content;max-width:83%;padding:11px 14px;border-radius:15px;color:#d9d9d4;font-size:13px;margin-bottom:13px}.chat-left{background:#1d1d1d}.chat-right{background:#242f1a;margin-left:auto}.prompt-chip{align-self:center;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#8e8e89;font-size:11px;margin:12px 0 24px}.prompt-list{display:grid;gap:12px}.prompt-list div{padding:18px 20px;border-radius:16px;background:#0c0c0c;border:1px solid var(--line);color:#b7b7b2}.prompt-list span{color:#555550}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{border-top:1px solid var(--line);padding:28px 5px 0}.step-number{color:#5d5d58;font-size:12px;font-weight:700}.step-visual{height:190px;margin:28px 0;border-radius:22px;border:1px solid var(--line);background:#0d0d0d;display:grid;place-items:center}.bubble-step img{width:64px;border-radius:18px;box-shadow:0 14px 30px rgba(0,0,0,.5)}.prompt-step span{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#151515;font-size:13px}.prompt-step i{width:2px;height:20px;background:white;margin-left:-64px}.done-check{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--green);background:rgba(148,213,21,.12);font-size:26px}.step h3{font-size:24px}.step p{color:var(--muted);line-height:1.6}.privacy-card{padding:70px;border:1px solid var(--line);border-radius:34px;background:radial-gradient(circle at 80% 30%,rgba(24,174,234,.1),transparent 24rem),linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px}.privacy-copy>p:not(.kicker){color:var(--muted);font-size:17px;line-height:1.7;max-width:610px}.privacy-points{display:flex;flex-wrap:wrap;gap:18px;color:#bdbdb8;font-size:13px;margin-top:28px}.shield{display:grid;place-items:center;min-height:270px}.shield-inner{width:170px;height:190px;clip-path:polygon(50% 0%,92% 16%,86% 70%,50% 100%,14% 70%,8% 16%);background:linear-gradient(145deg,#262626,#101010);display:grid;place-items:center;box-shadow:0 30px 70px rgba(0,0,0,.45)}.shield-inner img{width:76px;border-radius:18px}.download-section{padding-top:40px}.download-card{min-height:520px;border-radius:36px;border:1px solid var(--line);background:radial-gradient(circle at 50% 0%,rgba(255,83,56,.12),transparent 25rem),#0d0d0d;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:60px 24px}.download-logo{width:74px;border-radius:20px;margin-bottom:24px}.download-card h2{max-width:800px}.download-card>p:not(.kicker){color:var(--muted);font-size:18px;margin:20px auto 30px}.download-card small{color:#686864;margin-top:14px}.footer{min-height:120px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#676762;font-size:12px}.footer .brand{color:var(--text);font-size:16px}.footer .brand img{width:30px;height:30px}.footer-links{display:flex;gap:20px}.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center}.modal.open{display:grid}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px)}.modal-panel{position:relative;z-index:1;width:min(680px,calc(100% - 32px));min-height:390px;border-radius:24px;border:1px solid var(--line);background:#111;padding:28px}.modal-close{position:absolute;right:14px;top:10px;background:transparent;border:0;color:#aaa;font-size:30px;cursor:pointer}.demo-stage{min-height:330px;display:grid;place-items:center;align-content:center;text-align:center}.demo-stage img{width:72px;border-radius:18px;margin-bottom:20px}.demo-stage h3{font-size:28px}.demo-stage p{color:var(--muted)}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}.delay-one{transition-delay:.12s}.delay-two{transition-delay:.22s}@media(max-width:920px){.nav-links{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:55px}h1{letter-spacing:-3px}.hero-copy{text-align:center}.hero-text{margin-inline:auto}.hero-actions,.download-meta{justify-content:center}.hero-visual{max-width:680px;margin:0 auto;width:100%}.feature-large,.feature-wide,.privacy-card{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step{padding-bottom:30px}.privacy-card{padding:48px}}@media(max-width:680px){.shell{width:min(100% - 24px,1180px)}.nav{height:70px}.nav .button{display:none}.hero{padding:42px 0 70px;gap:50px}h1{font-size:50px;letter-spacing:-2.8px}.hero-text{font-size:17px}.hero-actions{flex-direction:column}.button{width:100%}.download-meta{font-size:11px}.desktop-preview{min-height:390px}.command-card{width:85%}.floating-pill{display:none}.trust-strip{flex-direction:column;gap:9px;align-items:center}.section{padding:90px 0}.section-heading h2,.privacy-copy h2,.download-card h2{font-size:43px;letter-spacing:-2px}.feature-grid{grid-template-columns:1fr}.feature-large,.feature-wide{grid-column:auto;min-height:auto}.feature-card{padding:24px}.mini-demo{min-height:220px}.privacy-card{padding:34px 24px}.privacy-points{flex-direction:column;gap:10px}.footer{padding:35px 0;flex-direction:column;gap:20px;text-align:center}}

/* Interactive desktop hero */
.hero { grid-template-columns: .8fr 1.2fr; gap: 52px; min-height: 760px; padding-top: 58px; }
.hero-copy { position: relative; z-index: 2; }
/* Sized so the longest rotating word ("breakthrough") still fits the column. */
.hero-copy h1 { font-size: clamp(54px, 5.2vw, 72px); max-width: 560px; }
.desktop-stage { min-width: 0; }
.simulated-mac {
  overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,.16);
  background: #07111b; box-shadow: 0 45px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.025) inset;
  transform: perspective(1200px) rotateY(-1.5deg); transform-origin: center;
}
.sim-menu-bar { height: 31px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; background: rgba(5,8,13,.92); color: rgba(255,255,255,.92); font-size: 9px; }
.menu-left,.menu-right { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.apple-mark { color:#fff; font-size:8px; }
.sim-wallpaper { height: 500px; position:relative; overflow:hidden; background: radial-gradient(circle at 71% 58%, #814733 0 8%, transparent 25%), radial-gradient(circle at 58% 67%, #d9793e 0 9%, #573b34 19%, transparent 37%), linear-gradient(145deg,#020c17 3%,#0a2334 45%,#1f1718 72%,#02050a); }
.sim-wallpaper:before { content:""; position:absolute; inset:0; opacity:.6; background-image: radial-gradient(#fff 0.7px, transparent .8px); background-size: 29px 29px; mask-image:linear-gradient(to bottom,#000,transparent 68%); }
.wallpaper-glow { position:absolute; border-radius:45% 55% 42% 58%; filter:blur(2px); transform:rotate(-8deg); }
.glow-a { width:68%; height:42%; right:-4%; bottom:12%; background:linear-gradient(160deg,#d1c5ad,#6d665f 42%,#b95028 44% 54%,#32231f 55%); clip-path:polygon(10% 90%,20% 40%,38% 48%,48% 10%,62% 33%,72% 4%,100% 26%,100% 100%,0 100%); }
.glow-b { width:53%; height:32%; left:3%; bottom:0; background:linear-gradient(170deg,#988c79,#332d2a 45%,#b4562c 48%,#3c231e 63%); clip-path:polygon(0 70%,17% 31%,30% 49%,47% 18%,61% 43%,80% 11%,100% 59%,100% 100%,0 100%); }
.desktop-icons { position:absolute; inset:0; }
.desktop-item { width:72px; position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px; color:#fff; font-size:8px; line-height:1.15; text-align:center; text-shadow:0 1px 4px #000; transition:opacity .5s ease, transform .85s cubic-bezier(.22,.8,.2,1); }
.desktop-item span { max-width:70px; overflow:hidden; text-overflow:ellipsis; }
.thumb { width:36px; height:38px; border-radius:5px; border:1px solid rgba(255,255,255,.38); box-shadow:0 5px 10px rgba(0,0,0,.32); }
.thumb-a { background:linear-gradient(135deg,#f85b43 0 34%,#121212 35%); }
.thumb-b { background:linear-gradient(145deg,#95d61d 0 42%,#152226 43%); }
.thumb-c { background:linear-gradient(160deg,#20aee8 0 45%,#10202c 46%); }
.thumb-d { background:linear-gradient(135deg,#ffc027 0 38%,#241d10 39%); }
.paper-icon { width:31px; height:39px; background:#fff; color:#d8503c; border-radius:3px; display:grid; place-items:end center; padding-bottom:5px; font-size:7px; font-weight:800; }
.p1 { top:48px; right:26px; }.p2 { top:128px; right:100px; }.p3 { top:205px; right:23px; }.p4 { top:300px; right:104px; }.d1 { top:392px; right:25px; }
.folder-result { top:120px; right:34px; opacity:0; transform:scale(.72); }
.folder-shape { width:42px; height:31px; border-radius:5px; background:linear-gradient(#79cdf7 0 25%,#42aee8 26%); position:relative; box-shadow:0 5px 12px rgba(0,0,0,.35); }
.folder-shape:before { content:""; position:absolute; width:19px; height:7px; top:-5px; left:3px; border-radius:4px 4px 0 0; background:#6bc5f2; }
.folder-count { display:none; font-size:7px; color:#badff2; font-weight:500; }
.desktop-icons.organised .png-item { opacity:0; transform:translate(0,-20px) scale(.2); }
.desktop-icons.organised .folder-result { opacity:1; transform:scale(1); }
.desktop-icons.organised .folder-count { display:block; }
.sim-bubble { width:58px; height:58px; border-radius:18px; padding:0; border:1px solid rgba(255,255,255,.17); position:absolute; right:21px; top:166px; overflow:hidden; background:#141414; box-shadow:0 18px 38px rgba(0,0,0,.52); animation:float 4s ease-in-out infinite; z-index:4; }
.sim-bubble img { width:100%; height:100%; object-fit:cover; }
.sidekick-panel { position:absolute; width:410px; right:82px; top:196px; background:rgba(251,251,249,.97); color:#191919; border-radius:17px; box-shadow:0 28px 70px rgba(0,0,0,.48); overflow:hidden; z-index:5; transition:opacity .35s ease, transform .35s ease; }
.panel-head { height:62px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #e6e6e2; }
.panel-head img { width:35px; height:35px; border-radius:9px; }
.panel-head div { flex:1; display:flex; flex-direction:column; }
.panel-head strong { font-size:14px; }.panel-head span { font-size:10px; color:#777; margin-top:1px; }
.panel-head button { border:0; background:transparent; color:#888; font-size:14px; padding:4px; }
.panel-prompt { min-height:65px; display:flex; align-items:center; padding:0 17px; gap:10px; font-size:13px; color:#666; border-bottom:1px solid #e7e7e3; }
.spark { color:#f26b4d; font-size:18px; }.cursor { width:1.5px; height:17px; background:#555; animation:blink 1s steps(1) infinite; }
.panel-foot { height:51px; padding:0 14px; display:flex; align-items:center; gap:10px; color:#888; font-size:10px; }
.panel-foot > span { min-width:62px; }.progress-track { height:3px; background:#e3e3e0; border-radius:99px; flex:1; overflow:hidden; opacity:0; }.progress-track i { display:block; width:0; height:100%; background:#1a9cff; transition:width 1.35s ease; }
.panel-foot button { width:64px; height:29px; border:0; border-radius:15px; background:#ececea; color:#aaa; font-weight:700; }
.sidekick-panel.working .progress-track { opacity:1; }.sidekick-panel.working .progress-track i { width:100%; }.sidekick-panel.working .panel-foot button { color:#999; }
.result-card { display:none; align-items:center; gap:10px; margin:0 14px 14px; border-radius:11px; background:#f0f7eb; border:1px solid #d9e8cf; padding:10px 12px; }
.result-card.show { display:flex; animation:resultIn .35s ease both; }
@keyframes resultIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }
.result-icon { width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#77b93d;color:#fff;font-weight:800; }
.result-card div { display:flex;flex-direction:column; }.result-card strong{font-size:11px}.result-card span:last-child{font-size:9px;color:#65705e;margin-top:2px}
.sim-dock { position:absolute; height:48px; left:50%; transform:translateX(-50%); bottom:9px; display:flex; align-items:center; gap:6px; padding:5px 8px; background:rgba(235,235,235,.62); border:1px solid rgba(255,255,255,.48); border-radius:13px; backdrop-filter:blur(17px); box-shadow:0 10px 25px rgba(0,0,0,.25); }
.dock-app { width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:white;font-size:13px;font-weight:800;box-shadow:0 3px 7px rgba(0,0,0,.25); }.blue{background:#1ca2e8}.cyan{background:#45c3f0}.green{background:#52c961}.orange{background:#f09a31}.purple{background:#885bd9}.dark{background:#222}.bin{background:#dadada;color:#555}.dock-sep{height:30px;width:1px;background:rgba(0,0,0,.2);margin:0 2px}.logo-dock{overflow:hidden}.logo-dock img{width:100%;height:100%}
.demo-caption { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:16px; color:#83837e; font-size:12px; }.demo-dot{width:6px;height:6px;border-radius:50%;background:#383834}.demo-dot.active{background:#f5f5f2}.demo-caption span:last-child{margin-left:8px}
@media(max-width:1050px){.hero{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy h1{margin-inline:auto}.desktop-stage{max-width:860px;margin-inline:auto;width:100%}}
/* Demo sizing/positioning for small screens lives in the block at the end of
   this file — it has to come after the v3 rules to win the cascade. */
@media(max-width:680px){.sim-menu-bar{font-size:7px}.menu-left span:nth-of-type(n+4){display:none}.sim-dock{transform:translateX(-50%) scale(.75);transform-origin:center bottom}.hero-copy h1{font-size:46px}}


/* Revised hero interaction sequence */
.sim-bubble {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sim-bubble.pointer-hover {
  transform: scale(1.08);
  filter: brightness(1.08);
  box-shadow: 0 20px 44px rgba(0,0,0,.58), 0 0 0 5px rgba(255,255,255,.09);
}
.sim-bubble.pointer-click {
  transform: scale(.93);
}
.sim-pointer {
  position: absolute;
  width: 26px;
  height: 34px;
  right: 118px;
  top: 108px;
  z-index: 12;
  opacity: 0;
  transform: translate(0,0) rotate(-13deg);
  transition: right .9s cubic-bezier(.22,.8,.2,1), top .9s cubic-bezier(.22,.8,.2,1), opacity .2s ease, transform .18s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.sim-pointer:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(0 0, 0 83%, 22% 65%, 35% 98%, 49% 92%, 36% 61%, 66% 61%);
}
.sim-pointer:after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #111;
  clip-path: polygon(0 0, 0 76%, 21% 59%, 36% 91%, 42% 88%, 29% 55%, 58% 55%);
  z-index: -1;
}
.sim-pointer.visible { opacity: 1; }
.sim-pointer.over-bubble { right: 48px; top: 187px; }
.sim-pointer.clicking { transform: translate(1px,2px) rotate(-13deg) scale(.9); }
.sidekick-panel {
  opacity: 0;
  transform: translate(18px,-8px) scale(.94);
  transform-origin: 100% 0;
  pointer-events: none;
}
.sidekick-panel.open {
  opacity: 1;
  transform: translate(0,0) scale(1);
}
.panel-prompt {
  position: relative;
  transition: background .28s ease, box-shadow .28s ease, color .28s ease;
}
.panel-prompt.focused {
  color: #222;
  background: linear-gradient(90deg, rgba(255,199,44,.19), rgba(255,255,255,.98) 78%);
  box-shadow: inset 4px 0 0 #ffc12c, 0 0 0 3px rgba(255,193,44,.10);
}
.panel-prompt.focused:after {
  content: "Prompt";
  position: absolute;
  right: 12px;
  top: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,193,44,.18);
  color: #9a6a00;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media(max-width:680px){
  .sim-pointer { right: 86px; top: 55px; transform: scale(.8) rotate(-13deg); }
  .sim-pointer.over-bubble { right: 29px; top: 114px; }
}

/* v3 — higher-fidelity macOS demo */
.simulated-mac{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 55px 120px rgba(0,0,0,.72),0 2px 0 rgba(255,255,255,.12) inset;
  transform:perspective(1400px) rotateY(-.55deg) rotateX(.25deg);
}
.simulated-mac:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 19%,transparent 72%,rgba(255,255,255,.025));
  mix-blend-mode:screen;
}
.sim-menu-bar{
  height:30px;background:rgba(8,12,18,.76);backdrop-filter:blur(25px) saturate(145%);
  -webkit-backdrop-filter:blur(25px) saturate(145%);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  font-size:8.5px;border-bottom:1px solid rgba(255,255,255,.045);text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.apple-mark{font-size:0;width:10px;height:12px;position:relative;display:inline-block}
.apple-mark:before{content:"●";font-size:11px;position:absolute;left:0;top:-2px;color:#fff;transform:scaleX(.87)}
.apple-mark:after{content:"";position:absolute;width:4px;height:2px;border-radius:4px 0 4px 0;background:#fff;left:5px;top:-1px;transform:rotate(-35deg)}
.sim-wallpaper{
  height:500px;background:
  radial-gradient(ellipse at 76% 48%,rgba(239,185,139,.72) 0 3%,transparent 16%),
  radial-gradient(ellipse at 65% 69%,rgba(190,75,36,.88) 0 7%,transparent 25%),
  radial-gradient(ellipse at 42% 75%,rgba(208,132,79,.35) 0 10%,transparent 30%),
  linear-gradient(155deg,#020812 0%,#071827 38%,#132633 52%,#241413 76%,#090708 100%);
  filter:saturate(1.07) contrast(1.04)
}
.sim-wallpaper:before{
  opacity:.72;background-image:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.95) 0 .55px,transparent .8px),
    radial-gradient(circle at 72% 20%,rgba(255,255,255,.72) 0 .45px,transparent .75px),
    radial-gradient(circle at 36% 37%,rgba(255,255,255,.6) 0 .4px,transparent .7px);
  background-size:37px 37px,53px 53px,71px 71px;mask-image:linear-gradient(to bottom,#000 0 58%,transparent 86%)
}
.sim-wallpaper:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.05),transparent 32%,rgba(0,0,0,.08)),radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.28) 100%);
}
.wallpaper-glow{filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));opacity:.94}
.glow-a{background:linear-gradient(166deg,#d8d0c0 0 18%,#90877c 25%,#615650 39%,#c25c31 42% 49%,#6e3324 51% 61%,#241d1c 70%);clip-path:polygon(5% 100%,12% 69%,21% 57%,29% 35%,40% 46%,48% 13%,60% 33%,70% 4%,82% 27%,91% 16%,100% 36%,100% 100%)}
.glow-b{background:linear-gradient(172deg,#9e9485 0 21%,#554b44 31%,#b05731 44% 51%,#6d3022 54% 65%,#241918 72%);opacity:.82}
.desktop-item{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:8.2px;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.65);transition:opacity .42s ease,transform .9s cubic-bezier(.22,.86,.25,1),filter .42s ease}
.desktop-item:after{content:"";position:absolute;width:48px;height:11px;top:31px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(6px);z-index:-1}
.thumb{width:38px;height:40px;border-radius:5px;border:1px solid rgba(255,255,255,.5);box-shadow:0 7px 15px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.28) inset;position:relative;overflow:hidden;background-color:#eee}
/* Photo thumbnails. Each icon is a miniature scene built from stacked
   gradients (first layer = nearest the viewer) so the page stays
   self-contained — no image files to ship or load. */
.thumb:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 22%,transparent 46%)}
/* Dune sunset */
.thumb-a{background:
  radial-gradient(ellipse 135% 60% at 8% 118%,#3b1d10 0 47%,transparent 48%),
  radial-gradient(ellipse 105% 52% at 96% 120%,#7a4123 0 47%,transparent 48%),
  radial-gradient(circle at 58% 46%,#fff3cb 0 6%,rgba(255,209,128,.65) 12%,transparent 32%),
  linear-gradient(#2b1839,#6d3352 22%,#c25f47 42%,#ef9f5f 58%,#d97b3e 68%,#8c4a26 82%,#5d2f19)}
/* Misty green hills — three overlapping ridges reading back to front */
.thumb-b{background:
  radial-gradient(ellipse 160% 44% at 55% 128%,#10281a 0 50%,transparent 51%),
  radial-gradient(ellipse 130% 30% at 18% 108%,#356b3a 0 50%,transparent 51%),
  radial-gradient(ellipse 120% 26% at 78% 100%,#5f9257 0 50%,transparent 51%),
  linear-gradient(transparent 58%,rgba(232,244,235,.55) 66%,transparent 76%),
  linear-gradient(#b9dbec,#d9edf0 22%,#eef3e4 40%,#cfe0b4 52%,#8fb877 62%,#4f8b4a 74%,#2c5f34 88%,#1a3822)}
/* Coastline */
.thumb-c{background:
  radial-gradient(circle at 74% 20%,rgba(255,255,238,.95) 0 5%,rgba(255,250,215,.4) 11%,transparent 28%),
  linear-gradient(transparent 57%,rgba(255,255,255,.55) 58.5% 60.5%,transparent 62%),
  linear-gradient(transparent 66%,rgba(255,255,255,.45) 67.5% 69%,transparent 70.5%),
  linear-gradient(#7ec6e9,#b9e2f2 24%,#d3ebf3 32%,#2c7cb3 34%,#1a5c8f 50%,#3d8fbe 63%,#d6c69e 71%,#f0e3c2)}
/* City at dusk — towers of uneven height, lit windows kept low and faint */
.thumb-d{background:
  repeating-linear-gradient(90deg,rgba(255,208,132,.42) 0 .9px,transparent .9px 3.4px) 0 100%/100% 15% no-repeat,
  linear-gradient(#0c1220,#0c1220) 4% 100%/15% 30% no-repeat,
  linear-gradient(#0f1728,#0f1728) 26% 100%/13% 21% no-repeat,
  linear-gradient(#0a101c,#0a101c) 45% 100%/17% 34% no-repeat,
  linear-gradient(#111b2c,#111b2c) 68% 100%/12% 24% no-repeat,
  linear-gradient(#0d1422,#0d1422) 88% 100%/15% 28% no-repeat,
  linear-gradient(#14203c,#35406b 20%,#7d5570 40%,#cd7f52 56%,#f2bc80 66%,#f7d19a 74%,#c98f5e 82%,#6b4733 90%,#33241f)}
.paper-icon{width:32px;height:41px;border-radius:3px;background:linear-gradient(135deg,#fff 0 80%,#d9d9d9 81%);box-shadow:0 6px 13px rgba(0,0,0,.38);position:relative}
.paper-icon:before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 0 9px 9px;border-color:transparent transparent #d6d6d6 transparent}
.folder-shape{width:45px;height:32px;border-radius:5px 5px 6px 6px;background:linear-gradient(#7dd4fa 0 25%,#4ab7ee 26% 55%,#2e9bd7 100%);box-shadow:0 7px 15px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset}
.folder-shape:before{background:#75cdf4;width:20px;height:7px}
.sim-bubble{border-radius:16px;border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 40px rgba(0,0,0,.52),0 2px 0 rgba(255,255,255,.17) inset;animation:none;background:rgba(20,20,20,.96);backdrop-filter:blur(14px)}
.sim-bubble:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.11),transparent 42%);pointer-events:none}
.sidekick-panel{
  width:420px;background:rgba(248,248,247,.91);backdrop-filter:blur(32px) saturate(150%);-webkit-backdrop-filter:blur(32px) saturate(150%);
  border:1px solid rgba(255,255,255,.72);border-radius:16px;
  box-shadow:0 35px 80px rgba(0,0,0,.48),0 3px 12px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.9) inset;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif
}
.panel-head{height:66px;border-bottom:1px solid rgba(0,0,0,.09);padding:11px 14px}
.panel-head img{width:36px;height:36px;border-radius:9px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.panel-head strong{font-size:14px;letter-spacing:-.1px}.panel-head span{font-size:10.5px;color:#6f6f72}.panel-head button{font-family:-apple-system;font-size:14px;color:#777;cursor:default}
.panel-prompt{min-height:70px;padding:0 17px;font-size:13.2px;color:#555;border-bottom:1px solid rgba(0,0,0,.085);background:rgba(255,255,255,.34)}
.panel-prompt.focused{background:linear-gradient(90deg,rgba(255,198,45,.22),rgba(255,255,255,.75) 65%);box-shadow:inset 3px 0 0 #ffbd1e,0 0 0 1px rgba(255,190,20,.15)}
.panel-foot{height:52px;color:#777}.panel-foot button{background:linear-gradient(#f5f5f4,#e8e8e6);border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 1px rgba(0,0,0,.05)}
.progress-track{height:4px;background:rgba(0,0,0,.09)}.progress-track i{background:linear-gradient(90deg,#1593f0,#50b6ff);box-shadow:0 0 7px rgba(21,147,240,.35)}
.result-card{background:rgba(236,247,230,.88);border-color:rgba(112,161,82,.22);box-shadow:0 4px 10px rgba(39,85,19,.06)}
.sim-dock{height:51px;padding:5px 8px;gap:5px;background:rgba(231,234,237,.52);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(24px) saturate(145%);box-shadow:0 12px 30px rgba(0,0,0,.31),0 1px 0 rgba(255,255,255,.8) inset}
.dock-app{width:34px;height:34px;border-radius:8px;box-shadow:0 4px 9px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.25) inset;font-family:-apple-system;font-size:12px}
.sim-pointer{filter:drop-shadow(0 2px 2px rgba(0,0,0,.65));transition:right 1.18s cubic-bezier(.16,.82,.24,1),top 1.18s cubic-bezier(.16,.82,.24,1),opacity .25s ease,transform .14s ease}
.sim-pointer:before{background:#f8f8f8}.sim-pointer:after{background:#111}
.sim-pointer.clicking{transform:translate(1px,2px) rotate(-13deg) scale(.86)}
.sidekick-panel.open{animation:macPopoverIn .34s cubic-bezier(.22,.85,.26,1) both}
@keyframes macPopoverIn{0%{opacity:0;transform:translate(14px,-5px) scale(.965);filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}
.desktop-icons.organised .p1{transform:translate(10px,73px) scale(.16) rotate(-8deg)}
.desktop-icons.organised .p2{transform:translate(75px,-5px) scale(.16) rotate(5deg)}
.desktop-icons.organised .p3{transform:translate(7px,-11px) scale(.16) rotate(-4deg)}
.desktop-icons.organised .p4{transform:translate(76px,-91px) scale(.16) rotate(7deg)}
.desktop-icons.organised .png-item{opacity:0;filter:blur(1px)}
.desktop-icons.organised .folder-result{animation:folderLand .54s cubic-bezier(.2,.9,.24,1) .55s both}
@keyframes folderLand{0%{opacity:0;transform:scale(.66) translateY(8px)}70%{opacity:1;transform:scale(1.08) translateY(-2px)}100%{opacity:1;transform:scale(1)}}

/* Theme-aware tokens. Anything that differs between light and dark should
   read from one of these rather than a hard-coded hex. */
:root{
  --card-bg:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.016));
  --chip-bg:rgba(255,255,255,.03);
  --faint:#83837f;
  --btn-fg:#080808;
  --btn-bg:var(--text);
}

/* ---- Theme toggle ---- */
.nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--chip-bg);color:var(--text);display:grid;place-items:center;padding:0;cursor:pointer;transition:border-color .2s,background .2s}
.theme-toggle:hover{border-color:var(--text)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-moon{display:none}
[data-theme="light"] .icon-moon{display:block}
[data-theme="light"] .icon-sun{display:none}

/* ---- Enterprise ---- */
.ent-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.ent-stats div{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);display:flex;flex-direction:column;gap:9px}
.ent-stats strong{font-family:"Space Grotesk",sans-serif;font-size:34px;letter-spacing:-1.4px;line-height:1}
.ent-stats span{color:var(--muted);font-size:14px;line-height:1.5}
.ent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ent-card{display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg)}
.ent-num{color:var(--faint);font-size:12px;font-weight:700;letter-spacing:.14em}
.ent-card h3{font-size:26px;letter-spacing:-1px;margin:14px 0 0}
.ent-quote{font-size:17px;font-weight:500;margin:16px 0 0}
.ent-lead{color:var(--muted);font-size:14px;margin:8px 0 18px}
.ent-foot{margin:auto 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--faint);font-size:13px;line-height:1.5}
.ent-cta{margin-top:18px;padding:28px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ent-cta p{margin:0;font-size:18px;font-weight:500}
.ent-cta .button{flex-shrink:0}
@media(max-width:920px){
  .ent-stats,.ent-grid{grid-template-columns:1fr}
  .ent-cta{flex-direction:column;align-items:stretch;text-align:center}
}

/* Rotating headline word. Each part is its own line so a short word like
   "idea" and a long one like "breakthrough" never reflow the rest of the
   sentence when they swap. */
.headline-static,.headline-flip{display:block}
/* fit-content so the gradient spans the word itself — on a full-width block
   a short word like "idea" would only ever show the first stop. */
.headline-flip{width:fit-content;transition:opacity .4s ease,transform .4s ease}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .headline-flip{
    background:var(--flip-gradient);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
:root{--flip-gradient:linear-gradient(95deg,#ff5338,#ffc12c 42%,#94d515 72%,#18aeea)}
[data-theme="light"]{--flip-gradient:linear-gradient(95deg,#d9381f,#b8730d 42%,#4f7d0b 72%,#0b7ba8)}
/* the hero centres below 1050px, so the fit-content block has to centre too */
@media(max-width:1050px){.headline-flip{margin-inline:auto}}
.headline-flip.is-out{opacity:0;transform:translateY(-.3em)}
.headline-flip.is-in{opacity:0;transform:translateY(.3em)}
.headline-flip.is-instant{transition:none}
@media(prefers-reduced-motion:reduce){
  .headline-flip{transition:none}
  .headline-flip.is-out,.headline-flip.is-in{opacity:1;transform:none}
}

/* Mobile demo layout.
   Must stay last: the v3 rules above set .sidekick-panel{width:420px} and
   .sim-wallpaper{height:500px} at the same specificity, so anything earlier
   loses the cascade and the panel overflows the window. */
@media(max-width:680px){
  .sim-wallpaper{height:420px}

  /* Panel spans the window width instead of hanging off its left edge */
  .sidekick-panel{left:10px;right:10px;width:auto;top:96px}
  .panel-head{height:58px}
  .panel-prompt{min-height:62px;padding:12px 15px;font-size:12.5px;line-height:1.35}
  .panel-foot{height:46px}
  .panel-foot > span{min-width:52px}
  .result-card{margin:0 10px 10px}

  /* Bubble sits top-right, clear of both the icons and the panel */
  .sim-bubble{right:14px;top:26px;width:46px;height:46px;border-radius:14px}
  .sim-pointer{right:120px;top:150px}
  .sim-pointer.over-bubble{right:30px;top:46px}

  /* Icons run along the top-left so the folder never lands under the bubble */
  .desktop-item{transform:scale(.82)}
  .p2,.p4{display:none}
  .p1,.folder-result{top:24px;left:6px;right:auto}
  .p3{top:24px;left:72px;right:auto}
  .d1{top:24px;left:138px;right:auto}
  .desktop-icons.organised .p1{transform:scale(.16)}
  .desktop-icons.organised .p3{transform:translateX(-66px) scale(.16)}
}

/* ---- Light theme ----
   Kept last so it overrides the dark defaults above. The simulated Mac in the
   hero stays dark in both themes on purpose — it's a macOS desktop. */
[data-theme="light"]{
  --bg:#f4f4f1;--surface:#fff;--line:rgba(0,0,0,.13);
  --text:#101010;--muted:#54544d;--faint:#77776f;
  --card-bg:linear-gradient(145deg,#fff,#fbfbf8);--chip-bg:rgba(0,0,0,.03);
  --btn-fg:#fbfbf8;--btn-bg:#111;
  --red:#e8412a;--green:#5f8f0d;--blue:#0f8fc4;--yellow:#c08300;
}
[data-theme="light"] body{background:
  radial-gradient(circle at 20% 0%,rgba(255,83,56,.10),transparent 28rem),
  radial-gradient(circle at 80% 18%,rgba(24,174,234,.10),transparent 25rem),var(--bg)}
[data-theme="light"] .ambient{opacity:.10}
[data-theme="light"] .button-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 14px 34px rgba(0,0,0,.16)}
[data-theme="light"] .button-ghost{background:var(--chip-bg)}
[data-theme="light"] .eyebrow{color:#3d3d38;background:rgba(0,0,0,.03)}
[data-theme="light"] .status-dot{box-shadow:0 0 14px rgba(95,143,13,.45)}
[data-theme="light"] .download-meta{color:#7a7a72}
[data-theme="light"] .trust-strip{color:#5d5d56}
[data-theme="light"] .kicker{color:#6b6b64}
[data-theme="light"] .feature-card{background:var(--card-bg)}
[data-theme="light"] .tag{color:#6f6f68}
[data-theme="light"] .line-icon{border-color:rgba(0,0,0,.16)}
[data-theme="light"] .mini-demo{background:#fbfbf9}
[data-theme="light"] .chat{color:#2b2b27}
[data-theme="light"] .chat-left{background:#ececE6}
[data-theme="light"] .chat-right{background:#e4f0d5}
[data-theme="light"] .prompt-chip{color:#6f6f68}
[data-theme="light"] .prompt-list div{background:#fbfbf9;color:#4a4a44}
[data-theme="light"] .prompt-list span{color:#a5a59d}
[data-theme="light"] .step-number{color:#87877f}
[data-theme="light"] .step-visual{background:#fbfbf9}
[data-theme="light"] .prompt-step span{background:#f2f2ee}
[data-theme="light"] .prompt-step i{background:#111}
[data-theme="light"] .privacy-card{background:
  radial-gradient(circle at 80% 30%,rgba(24,174,234,.13),transparent 24rem),
  linear-gradient(145deg,#fff,#fbfbf8)}
[data-theme="light"] .privacy-points{color:#42423c}
[data-theme="light"] .download-card{background:
  radial-gradient(circle at 50% 0%,rgba(255,83,56,.12),transparent 25rem),#fff}
[data-theme="light"] .download-card small{color:#7a7a72}
[data-theme="light"] .footer{color:#6a6a63}
[data-theme="light"] .modal-panel{background:#fff}
[data-theme="light"] .modal-close{color:#666}
[data-theme="light"] .modal-backdrop{background:rgba(20,20,18,.55)}
[data-theme="light"] .demo-caption{color:#6b6b64}
[data-theme="light"] .demo-dot{background:#cdcdc5}
[data-theme="light"] .demo-dot.active{background:#1a1a17}

/* Text-contrast tuning so secondary copy clears WCAG AA in both themes. */
.download-meta{color:#8b8b85}
.step-number{color:#8b8b84}
.download-card small{color:#8b8b85}
.footer{color:#8a8a84}
.prompt-list span{color:#7c7c76}
[data-theme="light"]{--faint:#6a6a62}
[data-theme="light"] .download-meta{color:#6c6c64}
[data-theme="light"] .step-number{color:#6c6c65}
[data-theme="light"] .download-card small{color:#6c6c64}
[data-theme="light"] .footer{color:#63635c}
[data-theme="light"] .prompt-list span{color:#6f6f66}

/* ---- Single-line trust strip ---- */
.trust-line{font-family:"Space Grotesk",sans-serif;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.8px;color:var(--text)}

/* ---- Enterprise: tinted full-bleed band to separate it from the B2C story ---- */
.enterprise-band{position:relative}
.enterprise-band:before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-1;border-block:1px solid var(--line);
  background:
    radial-gradient(ellipse at 15% 0%,rgba(24,174,234,.10),transparent 34rem),
    radial-gradient(ellipse at 90% 100%,rgba(148,213,21,.07),transparent 30rem),
    #0b0f14;
}
.ent-compare{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--chip-bg);border:1px solid var(--line);color:var(--faint);font-size:13px;line-height:1.5}
.ent-compare b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px;opacity:.8}
.ent-quote{margin:18px 0 14px}

/* ---- Step mockups ---- */
.step-visual{height:250px;padding:0;overflow:hidden;position:relative;display:block;background:var(--card-bg)}
.mock{position:absolute;inset:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}

/* 01 — desktop with the bubble */
.mock-desktop{display:flex;flex-direction:column;background:linear-gradient(160deg,#0a1a2b,#123049 46%,#2a1a18 100%)}
.mock-bar{height:17px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 8px;background:rgba(6,10,16,.72);color:rgba(255,255,255,.9);font-size:7px}
.mock-bar b{font-weight:700}.mock-bar em{margin-left:auto;font-style:normal}
.mock-apple{width:5px;height:6px;border-radius:50%;background:#fff;display:inline-block}
.mock-canvas{position:relative;flex:1}
.mock-window{position:absolute;left:16px;top:20px;width:132px;height:104px;border-radius:8px;background:#f7f7f5;box-shadow:0 14px 30px rgba(0,0,0,.45);overflow:hidden}
.mock-window-bar{height:16px;background:#e8e8e4;display:flex;align-items:center;gap:4px;padding:0 6px}
.mock-window-bar i{width:5px;height:5px;border-radius:50%;background:#c9c9c4}
.mock-lines{padding:10px 10px 0;display:grid;gap:7px}
.mock-lines span{height:5px;border-radius:3px;background:#dcdcd7}
.mock-lines span:nth-child(2){width:82%}.mock-lines span:nth-child(3){width:64%}.mock-lines span:nth-child(4){width:74%}
.mock-bubble{position:absolute;right:18px;top:52px;width:38px;height:38px;border-radius:12px;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.2);animation:float 4s ease-in-out infinite}
.mock-bubble img{width:100%;height:100%;object-fit:cover}
.mock-pointer{position:absolute;right:14px;top:74px;width:13px;height:17px;background:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));clip-path:polygon(0 0,0 83%,22% 65%,35% 98%,49% 92%,36% 61%,66% 61%)}
.mock-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:7px;display:flex;gap:4px;padding:3px 5px;border-radius:8px;background:rgba(235,235,235,.5);border:1px solid rgba(255,255,255,.45)}
.mock-dock i{width:14px;height:14px;border-radius:4px;background:#8fb4d8}
.mock-dock i:nth-child(2){background:#7fc98a}.mock-dock i:nth-child(3){background:#e8b45c}
.mock-dock i.on{background:linear-gradient(140deg,#ff5338,#ffc12c 45%,#18aeea)}

/* 02 + 03 — the panel itself */
.mock-ask,.mock-done{display:grid;place-items:center;background:linear-gradient(160deg,#0d1c2b,#16283a 60%,#241a19)}
.mock-panel{width:calc(100% - 28px);border-radius:12px;background:rgba(249,249,247,.97);color:#1a1a1a;box-shadow:0 16px 34px rgba(0,0,0,.42);overflow:hidden;text-align:left}
.mock-panel-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.08)}
.mock-panel-head img{width:24px;height:24px;border-radius:6px}
.mock-panel-head div{display:flex;flex-direction:column}
.mock-panel-head b{font-size:11px}
.mock-panel-head span{font-size:8.5px;color:#6f6f72;margin-top:1px}
.mock-panel-prompt{display:flex;gap:7px;padding:10px;font-size:10.5px;line-height:1.4;color:#333;background:linear-gradient(90deg,rgba(255,198,45,.24),rgba(255,255,255,.7) 70%);box-shadow:inset 3px 0 0 #ffbd1e}
.mock-spark{color:#f26b4d;font-style:normal;font-size:11px}
.mock-caret{display:inline-block;width:1.5px;height:10px;background:#555;margin-left:2px;vertical-align:-1px;animation:blink 1s steps(1) infinite}
.mock-panel-foot{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:9px;color:#7b7b7e;border-top:1px solid rgba(0,0,0,.06)}
.mock-panel-foot b{font-size:9px;font-weight:700;color:#8a8a8d;background:linear-gradient(#f4f4f3,#e7e7e5);border:1px solid rgba(0,0,0,.07);border-radius:9px;padding:3px 8px}
.mock-result{display:flex;align-items:center;gap:8px;margin:9px 10px;padding:8px 9px;border-radius:9px;background:#eff7e9;border:1px solid #d7e7cd}
.mock-check{width:17px;height:17px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#77b93d;color:#fff;font-size:9px;font-weight:800}
.mock-result div{display:flex;flex-direction:column}
.mock-result b{font-size:9.5px}
.mock-result span{font-size:8px;color:#65705e;margin-top:1px}
.mock-summary{display:grid;gap:5px;padding:0 10px 10px}
.mock-summary span{height:4px;border-radius:3px;background:#e2e2dd}
.mock-summary span:nth-child(2){width:88%}.mock-summary span:nth-child(3){width:70%}

/* Light theme for the new pieces */
[data-theme="light"] .enterprise-band:before{
  background:
    radial-gradient(ellipse at 15% 0%,rgba(24,174,234,.13),transparent 34rem),
    radial-gradient(ellipse at 90% 100%,rgba(148,213,21,.10),transparent 30rem),
    #eaeef2;
}
[data-theme="light"] .ent-compare{background:rgba(0,0,0,.035)}
[data-theme="light"] .step-visual{background:var(--card-bg)}

/* ================= Enterprise, restyled =================
   Quieter than the consumer sections: no card numbers, thinner rules, more
   air. The prompt field is the focal point of each card. */
.enterprise-band{padding:150px 0}
.ent-intro{max-width:780px;margin-bottom:76px}
.ent-intro .kicker{font-size:15px;letter-spacing:.14em;margin-bottom:22px}
.ent-intro h2{font-size:clamp(38px,4.3vw,58px);letter-spacing:-2.2px;line-height:1.05;max-width:20ch}
.ent-sub{margin:18px 0 0;color:var(--muted);font-size:18px;line-height:1.55;max-width:46ch}

.ent-cta{margin-top:44px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.ent-cta p{margin:0;font-size:17px;font-weight:400;color:var(--muted)}

@media(max-width:920px){
  .enterprise-band{padding:110px 0}
  .ent-intro{margin-bottom:52px}
  .ent-cta{flex-direction:column;gap:16px}
}

/* ================= Enterprise: five platform capabilities =================
   Full-width alternating rows rather than a card grid — each capability gets
   a real dashboard beside it. The dashboards share one set of primitives
   (.dash-*) so five different screens still read as one product. */
.ent-features{display:grid;gap:0}
.ent-feature{display:grid;grid-template-columns:.86fr 1.14fr;gap:60px;align-items:center;padding:70px 0;border-top:1px solid var(--line)}
.ent-feature:first-child{border-top:0;padding-top:0}
/* Even rows put the dashboard first, so the wide column has to move with it. */
.ent-feature:nth-child(even){grid-template-columns:1.14fr .86fr}
.ent-feature:nth-child(even) .entf-copy{order:2}
.entf-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.entf-eyebrow span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--chip-bg);font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:0;color:var(--faint)}
.entf-copy h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,2.9vw,38px);letter-spacing:-1.5px;line-height:1.08;margin:0}
.entf-sub{margin:16px 0 0;font-size:17.5px;line-height:1.5;letter-spacing:-.2px;color:var(--text);max-width:46ch}
.entf-points{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.entf-points li{position:relative;padding-left:16px;color:var(--faint);font-size:13.5px;line-height:1.45}
.entf-points li:before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
.entf-note{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--faint);font-size:13.5px;line-height:1.6;max-width:46ch}

/* ---- Dashboard primitives ---- */
:root{--dash-bg:#0d0f12;--dash-line:rgba(255,255,255,.1);--dash-ink:#f2f2ef;--dash-dim:#93938e;--dash-sunken:rgba(255,255,255,.04);--dash-blue:#4aa3e0;--dash-green:#6fb43a;--dash-amber:#e0a32c;--dash-red:#d9603f;--dash-violet:#8a72d8}
[data-theme="light"]{--dash-bg:#fff;--dash-line:rgba(0,0,0,.1);--dash-ink:#141412;--dash-dim:#6c6c64;--dash-sunken:rgba(0,0,0,.032);--dash-green:#5f9c2c}
.entf-visual{min-width:0}
.dash{border:1px solid var(--dash-line);border-radius:18px;background:var(--dash-bg);box-shadow:0 30px 60px rgba(0,0,0,.34);padding:20px;display:flex;flex-direction:column;gap:16px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:var(--dash-ink)}
[data-theme="light"] .dash{box-shadow:0 24px 48px rgba(0,0,0,.10)}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dash-top b{font-size:14px;font-weight:600;letter-spacing:-.2px}
.dash-pill{padding:5px 10px;border-radius:999px;border:1px solid var(--dash-line);background:var(--dash-sunken);font-size:11px;color:var(--dash-dim)}
.dash-pill.live{position:relative;padding-left:20px;color:var(--dash-ink)}
.dash-pill.live:before{content:"";position:absolute;left:9px;top:50%;margin-top:-3px;width:6px;height:6px;border-radius:50%;background:var(--dash-green);box-shadow:0 0 0 0 rgba(111,180,58,.5);animation:dashPulse 2.4s ease-out infinite}
@keyframes dashPulse{70%{box-shadow:0 0 0 7px rgba(111,180,58,0)}100%{box-shadow:0 0 0 0 rgba(111,180,58,0)}}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--dash-line);border:1px solid var(--dash-line);border-radius:12px;overflow:hidden}
.dash-kpis div{background:var(--dash-bg);padding:13px 14px}
.dash-kpis strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:23px;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.dash-kpis strong.pos{color:var(--dash-green)}
.dash-kpis strong.warn{color:var(--dash-amber)}
.dash-kpis span{display:block;margin-top:7px;font-size:11px;line-height:1.35;color:var(--dash-dim)}
.dash-label{margin:0 0 -4px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dash-dim)}
.dash-split{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.dash-split>div{display:flex;flex-direction:column;gap:9px;min-width:0}

/* Line chart */
.dash-chart svg{display:block;width:100%;height:92px}
.ch-line{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.5s ease .2s}
.ent-feature.visible .ch-line{stroke-dashoffset:0}
.ch-area{opacity:0;transition:opacity .9s ease .6s}
.ent-feature.visible .ch-area{opacity:1}
.dash-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--dash-dim)}

/* Horizontal bars */
.bar-row{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--dash-dim)}
.bar-row span{width:74px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row i{flex:1;height:7px;border-radius:99px;background:var(--dash-sunken);overflow:hidden}
.bar-row u{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#2f8fd0,#5cb3ec);text-decoration:none;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ent-feature.visible .bar-row u{transform:scaleX(1)}
.bar-row:nth-child(3) u{transition-delay:.08s}
.bar-row:nth-child(4) u{transition-delay:.16s}
.bar-row:nth-child(5) u{transition-delay:.24s}
.bar-row b{width:46px;flex-shrink:0;text-align:right;font-weight:600;color:var(--dash-ink);font-variant-numeric:tabular-nums}

/* Column chart */
.dash-cols{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:96px}
.dash-cols div{display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.dash-cols i{width:100%;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#5cb3ec,#2f7fbb);transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ent-feature.visible .dash-cols i{transform:scaleY(1)}
.dash-cols div:nth-child(2) i{transition-delay:.06s}
.dash-cols div:nth-child(3) i{transition-delay:.12s}
.dash-cols div:nth-child(4) i{transition-delay:.18s}
.dash-cols div:nth-child(5) i{transition-delay:.24s}
.dash-cols div:nth-child(6) i{transition-delay:.3s}
.dash-cols div:nth-child(7) i{transition-delay:.36s}
.dash-cols em{font-style:normal;font-size:9.5px;color:var(--dash-dim)}

/* Tool / subscription rows */
.tk{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;border-radius:6px;font-style:normal;font-size:10px;font-weight:700;color:#fff}
.tk.t1{background:#c96442}.tk.t2{background:#10a37f}.tk.t3{background:#2f6fd0}.tk.t4{background:#8a72d8}.tk.t5{background:#4a4a46}
.tk.dev{background:linear-gradient(150deg,#5b6470,#343a43)}
.tool-row{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--dash-dim)}
.tool-row span{flex:1;min-width:0;color:var(--dash-ink)}
.tool-row b{font-weight:600;font-variant-numeric:tabular-nums}
.dash-rows{list-style:none;margin:0;padding:0;display:grid;gap:1px;border-radius:11px;overflow:hidden;background:var(--dash-line);border:1px solid var(--dash-line)}
.dash-rows li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--dash-bg);font-size:11.5px}
.dash-rows b{font-weight:600;color:var(--dash-ink)}
.dash-rows em{font-style:normal;flex:1;color:var(--dash-dim)}
.dash-rows u{text-decoration:none;font-variant-numeric:tabular-nums;color:var(--dash-ink)}
.dash-flag{padding:3px 8px;border-radius:999px;font-size:10px;background:var(--dash-sunken);border:1px solid var(--dash-line);color:var(--dash-dim)}
.dash-flag.warn{color:var(--dash-amber);border-color:rgba(224,163,44,.35);background:rgba(224,163,44,.12)}
.dash-flag.ok{color:var(--dash-green);border-color:rgba(111,180,58,.35);background:rgba(111,180,58,.12)}

/* Alerts and recommendations */
.dash-alert{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;font-size:11.5px;color:var(--dash-ink);background:rgba(217,96,63,.10);border:1px solid rgba(217,96,63,.28)}
.dash-alert i{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--dash-red)}
.dash-alert span{flex:1;min-width:0}
.dash-alert b{font-size:11px;font-weight:600;color:var(--dash-dim)}
.dash-alert.warn{background:rgba(224,163,44,.10);border-color:rgba(224,163,44,.28)}
.dash-alert.warn i{background:var(--dash-amber)}
.dash-rec{padding:13px;border-radius:11px;background:rgba(111,180,58,.09);border:1px solid rgba(111,180,58,.26);display:flex;flex-direction:column;gap:5px}
.dash-rec b{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dash-green)}
.dash-rec span{font-size:12.5px;color:var(--dash-ink)}
.dash-rec u{text-decoration:none;font-size:11.5px;color:var(--dash-dim)}

/* 03 — repeated runs collapsing into one automation */
.wf-runs{display:grid;gap:7px}
.wf-run{display:flex;align-items:center;gap:6px;padding:9px 11px;border-radius:10px;background:var(--dash-sunken);border:1px solid var(--dash-line);font-size:10.5px;color:var(--dash-dim);opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.ent-feature.visible .wf-run{opacity:1;transform:none}
.ent-feature.visible .wf-run:nth-child(2){transition-delay:.12s}
.ent-feature.visible .wf-run:nth-child(3){transition-delay:.24s}
.ent-feature.visible .wf-run:nth-child(4){transition-delay:.36s}
.wf-run em{font-style:normal;width:62px;flex-shrink:0;color:var(--dash-ink)}
.wf-run span{padding:4px 8px;border-radius:6px;background:var(--dash-bg);border:1px solid var(--dash-line);white-space:nowrap}
.wf-run b{margin-left:auto;font-weight:600;color:var(--dash-ink);font-variant-numeric:tabular-nums}
.wf-funnel{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.5}
.wf-funnel i{height:1px;background:var(--dash-line)}
.wf-funnel i:nth-child(1){width:60%}.wf-funnel i:nth-child(2){width:34%}.wf-funnel i:nth-child(3){width:14%}
.wf-card{padding:15px;border-radius:12px;background:rgba(74,163,224,.10);border:1px solid rgba(74,163,224,.3)}
.wf-card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--dash-ink)}
.wf-card b{font-weight:700}
.wf-foot{display:flex;align-items:center;gap:12px;margin-top:13px}
.wf-go{padding:8px 14px;border-radius:9px;background:var(--dash-blue);color:#04121c;font-size:12px;font-weight:700}
.wf-foot em{font-style:normal;font-size:11.5px;color:var(--dash-dim)}

/* 04 — day timeline */
.tl{display:flex;gap:2px;height:26px}
.tl i{width:var(--w);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ent-feature.visible .tl i{transform:scaleX(1)}
.tl i:nth-child(2){transition-delay:.06s}.tl i:nth-child(3){transition-delay:.12s}
.tl i:nth-child(4){transition-delay:.18s}.tl i:nth-child(5){transition-delay:.24s}
.tl i:nth-child(6){transition-delay:.3s}.tl i:nth-child(7){transition-delay:.36s}.tl i:nth-child(8){transition-delay:.42s}
.c1{background:#4aa3e0}.c2{background:#6fb43a}.c3{background:#e0a32c}.c4{background:#8a72d8}.c5{background:#d9603f}
.tl-key{display:flex;flex-wrap:wrap;gap:12px;font-size:10.5px;color:var(--dash-dim)}
.tl-key span{display:flex;align-items:center;gap:6px}
.tl-key i{width:8px;height:8px;border-radius:3px}

/* 05 — natural-language command and its run log */
.op-cmd{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:11px;background:var(--dash-sunken);border:1px solid var(--dash-line);font-size:13px;color:var(--dash-ink)}
.op-cmd i{font-style:normal;font-size:12px;color:#f26b4d}
.op-cmd span{flex:1;min-width:0}
.op-cmd b{font-size:11px;font-weight:600;padding:5px 11px;border-radius:8px;background:var(--dash-ink);color:var(--dash-bg)}
.op-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.op-steps li{position:relative;padding-left:25px;font-size:12px;line-height:1.4;color:var(--dash-dim)}
.op-steps li:before{content:"";position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--dash-line)}
.op-steps li.ok{color:var(--dash-ink)}
.op-steps li.ok:before{background:var(--dash-green);border-color:var(--dash-green)}
.op-steps li.ok:after{content:"";position:absolute;left:4px;top:5.5px;width:7px;height:3.5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.op-steps li.live{color:var(--dash-ink)}
.op-steps li.live:before{border-top-color:var(--dash-blue);animation:fxSpin .9s linear infinite}
.op-bar{display:block;height:4px;margin-top:8px;border-radius:99px;background:var(--dash-sunken);overflow:hidden}
.op-bar u{display:block;height:100%;width:20%;border-radius:99px;background:var(--dash-blue);animation:opFill 2.6s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes opFill{0%{width:12%}70%{width:78%}100%{width:78%}}

@media(prefers-reduced-motion:reduce){
  .ch-line{stroke-dashoffset:0;transition:none}
  .ch-area{opacity:1;transition:none}
  .bar-row u,.dash-cols i,.tl i{transform:none;transition:none}
  .wf-run{opacity:1;transform:none;transition:none}
  .op-bar u,.dash-pill.live:before,.op-steps li.live:before{animation:none}
}

@media(max-width:920px){
  /* Single column below 920px — the even-row rule needs matching specificity. */
  .ent-feature,.ent-feature:nth-child(even){grid-template-columns:1fr;gap:32px;padding:48px 0}
  .ent-feature:nth-child(even) .entf-copy{order:0}
  .entf-sub{max-width:none}
  .dash{padding:16px;gap:14px}
  .dash-split{grid-template-columns:1fr;gap:16px}
}
@media(max-width:680px){
  .ent-feature{padding:38px 0;gap:26px}
  .entf-sub{font-size:16px}
  .entf-points{gap:8px 14px}
  .dash-kpis{grid-template-columns:1fr}
  .dash-kpis strong{font-size:20px}
  .wf-run span:nth-child(n+4){display:none}
  .dash-cols{height:76px}
}

:root{--prompt-bg:rgba(255,255,255,.055);--prompt-line:rgba(255,255,255,.12);--prompt-shadow:none}
[data-theme="light"]{--prompt-bg:#fff;--prompt-line:rgba(0,0,0,.10);--prompt-shadow:0 2px 10px rgba(0,0,0,.05)}

/* ================= Feature card mockups =================
   Small scenes that show the outcome rather than an abstract icon.
   Desktop scenes stay dark in both themes (that's what macOS looks like);
   app surfaces follow the theme. */
:root{--fx-surface:#141414;--fx-line:rgba(255,255,255,.11);--fx-ink:#f2f2ef;--fx-dim:#9a9a95;--fx-sunken:rgba(255,255,255,.05)}
[data-theme="light"]{--fx-surface:#fff;--fx-line:rgba(0,0,0,.10);--fx-ink:#141414;--fx-dim:#6e6e68;--fx-sunken:rgba(0,0,0,.04)}
.fx{position:relative;height:158px;border-radius:15px;overflow:hidden;border:1px solid var(--fx-line);margin-bottom:26px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.fx+.tag{margin-top:0}
.feature-card h3{margin-top:0}

/* Organise — strays above, tidy folders below */
.fx-organise{background:linear-gradient(160deg,#0a1b2c,#123049 52%,#2b1a17)}
.fx-strays{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:16px;opacity:.42}
.fx-strays i{display:block;transform:scale(.62);transform-origin:top center}
.fx-strays .fx-doc{width:32px;height:41px;border-radius:3px;background:linear-gradient(135deg,#fff 0 80%,#dcdcdc 81%)}
.fx-folders{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:14px}
.fx-folders div{display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff;font-size:8.5px;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.fx-folders b{font-weight:500}
.fx-folders em{font-style:normal;font-size:7.5px;color:#bcdcf0}
.fx-folder{width:42px;height:30px;border-radius:5px 5px 6px 6px;background:linear-gradient(#7dd4fa 0 25%,#4ab7ee 26% 55%,#2e9bd7);box-shadow:0 6px 14px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.5) inset;position:relative}
.fx-folder:before{content:"";position:absolute;top:-4px;left:3px;width:18px;height:6px;border-radius:4px 4px 0 0;background:#75cdf4}

/* Find — Spotlight */
.fx-find{background:linear-gradient(160deg,#0c2033,#173950 60%,#241a19);display:grid;place-items:center;padding:0 14px}
.fx-spotlight{width:100%;border-radius:11px;overflow:hidden;background:rgba(248,248,247,.96);box-shadow:0 14px 30px rgba(0,0,0,.44)}
.fx-search{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid rgba(0,0,0,.09);font-size:11px;color:#2c2c2c}
.fx-glass{width:11px;height:11px;flex-shrink:0;border:1.6px solid #7a7a7e;border-radius:50%;position:relative}
.fx-glass:after{content:"";position:absolute;right:-4px;bottom:-3px;width:5px;height:1.6px;background:#7a7a7e;transform:rotate(45deg)}
.fx-hit{display:flex;align-items:center;gap:9px;padding:9px 12px;background:rgba(20,120,240,.10)}
.fx-key{width:22px;height:26px;flex-shrink:0;border-radius:3px;background:linear-gradient(150deg,#2a7bd4,#1a5ea8);box-shadow:0 3px 7px rgba(0,0,0,.25)}
.fx-hit div{display:flex;flex-direction:column;min-width:0}
.fx-hit b{font-size:10.5px;color:#1b1b1b}
.fx-hit em{font-style:normal;font-size:8.5px;color:#6f6f72;margin-top:2px}

/* Understand — page with a summary card over it */
.fx-understand{background:var(--fx-sunken);padding:14px}
.fx-page{position:absolute;left:14px;top:14px;width:104px;bottom:14px;border-radius:6px;background:#fff;box-shadow:0 5px 14px rgba(0,0,0,.18);padding:10px 9px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.fx-page b{font-size:7px;color:#1c1c1c;margin-bottom:2px}
.fx-page span{height:3.4px;border-radius:2px;background:#e2e2dd}
.fx-page span:nth-child(3){width:88%}.fx-page span:nth-child(5){width:72%}.fx-page span:nth-child(8){width:64%}
.fx-summary{position:absolute;right:14px;top:22px;width:calc(100% - 132px);min-width:132px;border-radius:10px;background:var(--fx-surface);border:1px solid var(--fx-line);box-shadow:0 10px 24px rgba(0,0,0,.22);padding:11px;display:flex;flex-direction:column;gap:7px}
.fx-summary b{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-dim)}
.fx-summary u{text-decoration:none;position:relative;padding-left:13px;font-size:9.5px;line-height:1.35;color:var(--fx-ink)}
.fx-summary u:before{content:"";position:absolute;left:1px;top:.42em;width:7px;height:3.5px;border-left:1.4px solid #6aa832;border-bottom:1.4px solid #6aa832;transform:rotate(-45deg)}
.fx-flag{margin-top:1px;padding:5px 7px;border-radius:6px;background:rgba(255,180,20,.14);border:1px solid rgba(255,180,20,.3);color:#a97400;font-size:8.5px}
[data-theme="light"] .fx-flag{color:#8a6000}

/* Connect — one app writing into another */
.fx-connect{background:var(--fx-sunken);display:flex;align-items:center;gap:8px;padding:14px}
.fx-app{flex:1;min-width:0;height:100%;border-radius:9px;overflow:hidden;background:var(--fx-surface);border:1px solid var(--fx-line);box-shadow:0 6px 16px rgba(0,0,0,.16);display:flex;flex-direction:column}
.fx-app-bar{height:17px;flex-shrink:0;display:flex;align-items:center;gap:3px;padding:0 6px;background:var(--fx-sunken);border-bottom:1px solid var(--fx-line)}
.fx-app-bar i{width:4.5px;height:4.5px;border-radius:50%;background:#c2c2bd}
.fx-app-bar em{font-style:normal;margin-left:5px;font-size:7px;color:var(--fx-dim);overflow:hidden;white-space:nowrap}
.fx-sheet{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:7px}
.fx-sheet span{border-radius:2px;background:var(--fx-sunken);border:1px solid var(--fx-line)}
.fx-sheet span:nth-child(3n){background:rgba(90,160,60,.22)}
.fx-slide{flex:1;padding:8px;display:flex;flex-direction:column;gap:6px}
.fx-slide u{display:block;height:4px;width:56%;border-radius:2px;background:var(--fx-dim);opacity:.5;text-decoration:none}
.fx-bars{flex:1;display:flex;align-items:flex-end;gap:4px}
.fx-bars i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(#5aa03c,#3f7d28)}
.fx-flow{flex-shrink:0;display:flex;flex-direction:column;align-items:center;color:var(--fx-dim)}
.fx-flow span{width:14px;height:1px;background:currentColor;opacity:.45}
.fx-flow i{font-style:normal;font-size:13px;line-height:1;margin-top:-8px}

/* Automate — a run list */
.fx-tasks{height:auto;border:0;border-radius:0;margin:0;background:none;display:grid;gap:10px}
.fx-task{display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:14px;background:var(--fx-surface);border:1px solid var(--fx-line);font-size:13.5px;line-height:1.4;color:var(--fx-ink)}
.fx-task span{flex:1;min-width:0}
.fx-task i{width:17px;height:17px;flex-shrink:0;border-radius:50%;position:relative}
.fx-task.is-done i{background:#5f9c2c}
.fx-task.is-done i:after{content:"";position:absolute;left:5px;top:5px;width:7px;height:3.5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.fx-task.is-live i{border:2px solid var(--fx-line);border-top-color:#18aeea;animation:fxSpin .9s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fx-task b{flex-shrink:0;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fx-dim)}
@media(prefers-reduced-motion:reduce){.fx-task.is-live i{animation:none}}
@media(max-width:680px){
  .fx{height:150px}
  .fx-task{font-size:12.5px;padding:13px 14px;gap:9px}
  .fx-task b{display:none}
}

/* ---- Organise as the hero card: same scene, scaled up ---- */
.fx-hero{height:100%;min-height:330px;border-radius:18px;margin:0}
.fx-hero .fx-strays{top:24px;left:7%;right:7%;opacity:1;display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;justify-items:center}
.fx-hero .fx-strays i{transform:none}
.fx-hero .fx-strays .fx-doc{width:38px;height:48px;border-radius:4px}
.fx-hero .fx-folders{bottom:42px;gap:38px}
.fx-hero .fx-folders div{font-size:13px;gap:9px}
.fx-hero .fx-folders em{font-size:11px}
.fx-hero .fx-folder{width:78px;height:56px;border-radius:8px 8px 10px 10px}
.fx-hero .fx-folder:before{top:-7px;left:6px;width:33px;height:11px;border-radius:6px 6px 0 0}

/* ---- Write, compacted into a small card ---- */
.fx-write{background:var(--fx-sunken);display:grid;place-items:center;padding:14px}
.fx-chat{width:100%;display:flex;flex-direction:column;gap:9px}
.fx-chat span{max-width:86%;padding:9px 11px;border-radius:13px;font-size:11px;line-height:1.4}
.fx-in{align-self:flex-start;background:var(--fx-surface);border:1px solid var(--fx-line);color:var(--fx-ink)}
.fx-cmd{align-self:center;max-width:100%;padding:6px 10px;border-radius:999px;border:1px dashed var(--fx-line);color:var(--fx-dim);font-size:10px;text-align:center}
.fx-out{align-self:flex-end;background:rgba(120,180,60,.16);border:1px solid rgba(120,180,60,.3);color:var(--fx-ink)}

/* ---- Rename: before / after filenames ---- */
.fx-rename{background:var(--fx-sunken);padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.fx-ren-head{display:grid;grid-template-columns:1fr 20px 1fr;gap:6px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-dim)}
.fx-ren-head span:last-child{grid-column:3}
.fx-ren{flex:1;display:flex;flex-direction:column;gap:7px}
.fx-ren>div{flex:1;display:grid;grid-template-columns:1fr 20px 1fr;align-items:center;gap:6px;padding:0 11px;border-radius:9px;background:var(--fx-surface);border:1px solid var(--fx-line)}
.fx-ren em,.fx-ren b{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fx-ren em{color:var(--fx-dim)}
.fx-ren b{font-weight:600;color:var(--fx-ink)}
.fx-ren i{width:100%;height:6px;position:relative;opacity:.5}
.fx-ren i:before{content:"";position:absolute;left:0;right:4px;top:2.5px;height:1px;background:currentColor;color:var(--fx-dim)}
.fx-ren i:after{content:"";position:absolute;right:0;top:0;width:5px;height:5px;border-top:1px solid var(--fx-dim);border-right:1px solid var(--fx-dim);transform:rotate(45deg)}
@media(max-width:680px){
  .fx-hero{min-height:270px}
  .fx-ren em,.fx-ren b{font-size:8.5px}
}

/* ---- Clean up: the run list now reports reclaimed space ---- */
.fx-task b{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--fx-ink);font-variant-numeric:tabular-nums}
.fx-task.is-live b{color:var(--fx-dim);font-weight:600}
.fx-total{display:flex;align-items:center;justify-content:space-between;gap:11px;margin-top:2px;padding:15px 16px;border-radius:14px;background:rgba(95,156,44,.10);border:1px solid rgba(95,156,44,.28);font-size:13.5px;color:var(--fx-ink)}
.fx-total b{font-family:"Space Grotesk",sans-serif;font-size:19px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
@media(max-width:680px){
  /* the reclaimed amounts are the point here, so keep them on small screens */
  .fx-task b{display:block;font-size:11.5px}
  .fx-total{font-size:12.5px;padding:13px 14px}
  .fx-total b{font-size:17px}
}

/* ================= Hero desktop cleanup =================
   Drops the angular "mountain" wallpaper shapes for a plain night gradient,
   and moves the desktop icons into a single right-hand column so the
   Sidekick panel can sit clear of every file. */
.wallpaper-glow{display:none}
.sim-wallpaper{
  background:
    radial-gradient(ellipse 120% 62% at 50% 116%,rgba(96,124,196,.30),transparent 60%),
    radial-gradient(ellipse 80% 52% at 82% 6%,rgba(52,98,150,.24),transparent 58%),
    linear-gradient(168deg,#04070d 0%,#091120 32%,#101b2f 60%,#0a1120 100%);
  filter:none;
}
@media(min-width:681px){
  .p1,.folder-result{top:42px;right:24px}
  .p2{top:120px;right:24px}
  .p3{top:198px;right:24px}
  .p4{top:276px;right:24px}
  .d1{top:354px;right:24px}
  .sim-bubble{right:112px;top:196px}
  .sidekick-panel{right:186px;top:150px}
  .sim-pointer{right:250px;top:110px}
  .sim-pointer.over-bubble{right:133px;top:214px}
  /* PNGs now travel straight up the column into the new folder */
  .desktop-icons.organised .p1{transform:scale(.16)}
  .desktop-icons.organised .p2{transform:translateY(-78px) scale(.16)}
  .desktop-icons.organised .p3{transform:translateY(-156px) scale(.16)}
  .desktop-icons.organised .p4{transform:translateY(-234px) scale(.16)}
}

/* ---- Write: the prompt lives in the Sidekick popover over the chat ---- */
.fx-write{background:var(--fx-sunken);display:block;padding:0}
.fx-msg{position:absolute;inset:10px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:var(--fx-surface);border:1px solid var(--fx-line)}
.fx-msg-bar{height:18px;flex-shrink:0;display:flex;align-items:center;gap:3px;padding:0 7px;background:var(--fx-sunken);border-bottom:1px solid var(--fx-line)}
.fx-msg-bar i{width:4.5px;height:4.5px;border-radius:50%;background:#c2c2bd}
.fx-msg-bar em{font-style:normal;margin-left:6px;font-size:7px;color:var(--fx-dim)}
.fx-msg-body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;padding:9px}
.fx-in,.fx-out{max-width:84%;padding:7px 9px;border-radius:11px;font-size:10px;line-height:1.35}
.fx-in{align-self:flex-start;background:var(--fx-sunken);color:var(--fx-ink)}
.fx-out{align-self:flex-end;background:rgba(120,180,60,.18);border:1px solid rgba(120,180,60,.32);color:var(--fx-ink)}
.fx-sk{position:absolute;left:17px;right:17px;bottom:15px;display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:11px;background:rgba(250,250,248,.98);border:1px solid rgba(255,255,255,.75);box-shadow:0 12px 24px rgba(0,0,0,.32);color:#1e1e1e;font-size:9.5px;line-height:1.3}
.fx-sk img{width:20px;height:20px;border-radius:5px;flex-shrink:0}
.fx-sk span{flex:1;min-width:0}
.fx-sk b{flex-shrink:0;font-size:8px;font-weight:700;color:#8a8a8d;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:3px 6px;background:linear-gradient(#f5f5f4,#e9e9e7)}

/* ---- Rename: photo thumbnails matching the names they get ---- */
.fx-ren-head,.fx-ren>div{grid-template-columns:30px minmax(0,1fr) 18px minmax(0,1.15fr)}
.fx-ren-head{display:grid;align-items:center;gap:8px;padding:0 10px}
.fx-ren>div{gap:8px;padding:0 10px}
.fx-th{width:28px;height:30px;border-radius:4px;flex-shrink:0}
@media(max-width:680px){
  .fx-ren-head,.fx-ren>div{grid-template-columns:24px minmax(0,1fr) 14px minmax(0,1.15fr);gap:6px;padding:0 8px}
  .fx-th{width:22px;height:24px}
}

/* ================= Hero desktop: messy again, and busier =================
   Scattered PNGs the way a real Desktop looks, kept out of the band where
   the Sidekick panel opens. Sorting produces project folders, not one
   generic "Images". */
@media(min-width:681px){
  .desktop-item{width:72px}
  /* top band, above the panel */
  .p1{top:12px;left:44px;right:auto}
  .p2{top:66px;left:126px;right:auto}
  .p3{top:8px;left:208px;right:auto}
  .p4{top:72px;left:286px;right:auto}
  .p5{top:14px;left:366px;right:auto}
  .p6{top:68px;left:446px;right:auto}
  .p7{top:10px;left:528px;right:auto}
  /* right edge, beside the panel */
  .p8{top:150px;right:10px;left:auto}
  .p9{top:232px;right:10px;left:auto}
  .p10{top:314px;right:10px;left:auto}
  /* below the panel */
  .d1{top:392px;left:52px;right:auto}

  /* everything collapses into the folders */
  .desktop-icons.organised .png-item{opacity:0;transform:scale(.18);filter:blur(1px)}
  .f1,.f2,.f3{top:26px;right:auto;opacity:0}
  .f1{left:76px}
  .f2{left:186px}
  .f3{left:296px}
  .desktop-icons.organised .f1{animation:folderLand .54s cubic-bezier(.2,.9,.24,1) .5s both}
  .desktop-icons.organised .f2{animation:folderLand .54s cubic-bezier(.2,.9,.24,1) .62s both}
  .desktop-icons.organised .f3{animation:folderLand .54s cubic-bezier(.2,.9,.24,1) .74s both}
}
.folder-result span{max-width:88px}
@media(max-width:680px){
  /* too little room for the full mess — keep a representative few */
  .p4,.p5,.p6,.p7,.p8,.p9,.p10,.f3{display:none}
  .f1,.f2{top:24px;right:auto;opacity:0}
  .f1{left:6px}
  .f2{left:78px}
  .desktop-icons.organised .f1{animation:folderLand .54s cubic-bezier(.2,.9,.24,1) .5s both}
  .desktop-icons.organised .f2{animation:folderLand .54s cubic-bezier(.2,.9,.24,1) .64s both}
  .desktop-icons.organised .png-item{opacity:0;transform:scale(.18);filter:blur(1px)}
}

/* Hero feature card: shrink the folder row so it fits a 320px screen */
@media(max-width:680px){
  .fx-hero .fx-folders{gap:14px;bottom:30px}
  .fx-hero .fx-folder{width:56px;height:40px}
  .fx-hero .fx-folder:before{width:24px;height:8px;top:-5px;left:5px}
  .fx-hero .fx-folders div{font-size:10.5px;gap:7px}
  .fx-hero .fx-folders em{font-size:9px}
  .fx-hero .fx-strays{gap:14px;top:26px}
  .fx-hero .fx-strays .fx-doc{width:30px;height:38px}
}

/* ================= Clean up: storage dashboard =================
   Segment widths are proportional to the sizes listed, and the five
   categories sum to the 20.5 GB headline. */
.feature-note{margin-top:14px;color:var(--faint);font-size:14px;font-weight:500}
.fx-clean{height:auto;margin:0;border:1px solid var(--fx-line);border-radius:18px;background:var(--fx-surface);padding:24px;display:flex;flex-direction:column;gap:18px;overflow:visible}
.fx-clean-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.fx-clean-top div{display:flex;flex-direction:column;gap:5px}
.fx-clean-top span{font-size:13px;color:var(--fx-dim)}
.fx-clean-top strong{font-family:"Space Grotesk",sans-serif;font-size:38px;line-height:1;letter-spacing:-1.6px;color:#5f9c2c;font-variant-numeric:tabular-nums}
[data-theme="light"] .fx-clean-top strong{color:#4d8020}
.fx-clean-go{flex-shrink:0;font-size:12.5px;font-weight:700;color:var(--fx-ink);padding:9px 14px;border-radius:10px;border:1px solid var(--fx-line);background:var(--fx-sunken)}
.fx-bar{display:flex;gap:3px;height:10px;border-radius:99px;overflow:hidden}
.fx-bar i{border-radius:2px}
.fx-bar .s1{width:39.5%}.fx-bar .s2{width:30.2%}.fx-bar .s3{width:16.6%}.fx-bar .s4{width:9.3%}.fx-bar .s5{width:4.4%}
.s1{background:#4aa3e0}.s2{background:#5f9c2c}.s3{background:#e0a32c}.s4{background:#d9603f}.s5{background:#8a72d8}
.fx-cat{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fx-cat li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--fx-ink)}
.fx-cat i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.fx-cat span{flex:1;min-width:0}
.fx-cat b{flex-shrink:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fx-dim)}
@media(max-width:680px){
  .fx-clean{padding:20px;gap:15px}
  .fx-clean-top strong{font-size:32px}
  .fx-cat li{font-size:13.5px}
}

/* ================= Mobile hero: show the full mess =================
   Taller wallpaper with three rows of icons, so small screens get the same
   "this Desktop is out of control" read as desktop. Columns are spaced to
   still fit a 320px viewport. */
@media(max-width:680px){
  .sim-wallpaper{height:470px}
  .p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9,.p10,.d1{display:block;right:auto}
  .p1{top:8px;left:4px}
  .p2{top:8px;left:76px}
  .p3{top:8px;left:148px}
  .p4{top:66px;left:4px}
  .p5{top:66px;left:76px}
  .p6{top:66px;left:148px}
  .p7{top:66px;left:220px}
  .p8{top:124px;left:4px}
  .p9{top:124px;left:76px}
  .p10{top:124px;left:148px}
  .d1{top:124px;left:220px}
  .sim-bubble{right:12px;top:12px;left:auto}
  .sim-pointer{right:150px;top:180px}
  .sim-pointer.over-bubble{right:27px;top:26px}
  .sidekick-panel{top:186px}
  .f1,.f2,.f3{display:block;top:8px;right:auto;opacity:0}
  .f1{left:4px}.f2{left:76px}.f3{left:148px}
  .desktop-icons.organised .f3{animation:folderLand .54s cubic-bezier(.2,.9,.24,1) .78s both}
}

/* ================= Tighter vertical rhythm =================
   The page reads faster with the sections closer together; headings sit
   nearer the content they introduce. */
/* Card headlines are now the prompt itself — slightly smaller so a full
   sentence still fits two lines. */
.feature-card h3{font-size:27px;line-height:1.12;letter-spacing:-1px}
.feature-large h3,.feature-wide h3{font-size:31px}
@media(max-width:680px){.feature-card h3{font-size:24px}.feature-large h3,.feature-wide h3{font-size:25px}}
.section{padding:80px 0}
/* The hero was reserving 760px whether or not the content filled it, which
   read as dead space above the first section. */
.hero{min-height:0;padding:52px 0 60px}
.section-heading{margin-bottom:40px}
.privacy-card{padding:56px}
.enterprise-band{padding:96px 0}
.ent-intro{margin-bottom:56px}
.ent-cta{margin-top:36px}
.download-section{padding-top:16px}
.download-card{min-height:420px;padding:52px 24px}
.download-card>p:not(.kicker){margin:16px auto 26px}
@media(max-width:920px){.privacy-card{padding:40px}}
@media(max-width:680px){
  .section{padding:56px 0}
  .hero{padding:36px 0 46px}
  .enterprise-band{padding:70px 0}
  .ent-intro{margin-bottom:40px}
  .section-heading{margin-bottom:30px}
  .privacy-card{padding:30px 22px}
  .download-card{min-height:auto;padding:44px 22px}
}

/* ================= Alternating bands =================
   Full-bleed tint on every other section so the boundaries are read by
   colour instead of by empty space. Matches the treatment the enterprise
   section already uses. */
:root{--band-bg:#101216}
[data-theme="light"]{--band-bg:#eaeae4}
.band{position:relative}
.band:before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-1;border-block:1px solid var(--line);background:var(--band-bg);
}

/* ================= Convert, PDFs, System, Repair =================
   Four more scenes in the same vocabulary as the cards above: real file
   names, real numbers, no abstract icons. */
.fx-arrow{flex-shrink:0;width:22px;height:8px;position:relative;color:var(--fx-dim);opacity:.65}
.fx-arrow:before{content:"";position:absolute;left:0;right:5px;top:3.5px;height:1.2px;background:currentColor}
.fx-arrow:after{content:"";position:absolute;right:0;top:1px;width:6px;height:6px;border-top:1.2px solid currentColor;border-right:1.2px solid currentColor;transform:rotate(45deg)}

/* Convert — one file changing format and shedding most of its weight */
.fx-convert{background:var(--fx-sunken);padding:15px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.fx-conv{display:flex;align-items:center;gap:10px;padding:12px;border-radius:11px;background:var(--fx-surface);border:1px solid var(--fx-line)}
.fx-file{flex-shrink:0;display:grid;place-items:center;width:34px;height:40px;border-radius:5px;font-size:8.5px;font-weight:700;letter-spacing:.02em;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.28)}
.fx-file.mov{background:linear-gradient(150deg,#6b7280,#414651)}
.fx-file.mp4{background:linear-gradient(150deg,#2f8fd0,#1b5f96)}
.fx-conv-meta{display:flex;flex-direction:column;gap:3px;min-width:0;margin-left:2px}
.fx-conv-meta b{font-size:10.5px;color:var(--fx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-conv-meta em{font-style:normal;font-size:9px;color:#5f9c2c;font-variant-numeric:tabular-nums}
[data-theme="light"] .fx-conv-meta em{color:#4d8020}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-chips span{padding:5px 9px;border-radius:999px;font-size:9px;color:var(--fx-dim);background:var(--fx-surface);border:1px solid var(--fx-line)}

/* PDFs — a stack of files landing as one document. Same frame as Convert so
   the pair reads as one idea. */
.fx-pdf{background:var(--fx-sunken);padding:15px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.fx-file.pdf{background:linear-gradient(150deg,#d9563f,#a83322)}
.fx-pdf-stack{display:flex;flex-shrink:0;padding-left:3px}
.fx-pdf-stack i{width:29px;height:38px;margin-right:-13px;border-radius:3px;background:#fff;border:1px solid rgba(0,0,0,.14);box-shadow:0 4px 10px rgba(0,0,0,.3);display:grid;place-items:center;font-style:normal;font-size:8.5px;font-weight:600;color:#a2a29c}
.fx-pdf-stack i:nth-child(1){transform:rotate(-8deg)}
.fx-pdf-stack i:nth-child(2){transform:rotate(1deg)}
.fx-pdf-stack i:nth-child(3){transform:rotate(8deg);margin-right:0}

/* System — the spec sheet, answered in place */
.fx-spec{background:var(--fx-sunken);padding:13px 15px;display:grid;align-content:center}
.fx-spec ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;border-radius:10px;overflow:hidden;background:var(--fx-line)}
.fx-spec li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;background:var(--fx-surface);font-size:10px}
.fx-spec span{color:var(--fx-dim)}
.fx-spec b{font-weight:600;color:var(--fx-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-spec li:last-child b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px}

/* Repair — Spotlight reindexing itself */
.fx-fix{background:linear-gradient(160deg,#0c2033,#173950 60%,#241a19);display:grid;place-items:center;padding:0 14px}
.fx-fix .fx-spotlight{background:rgba(248,248,247,.96)}
.fx-fix-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px}
.fx-fix-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:10px;color:#1b1b1b}
.fx-fix-row b{font-variant-numeric:tabular-nums;color:#2a7bd4}
.fx-fix-bar{height:5px;border-radius:99px;background:rgba(0,0,0,.09);overflow:hidden}
.fx-fix-bar i{display:block;height:100%;width:87%;border-radius:99px;background:linear-gradient(90deg,#2a7bd4,#4aa3e0)}
.fx-fix-body em{font-style:normal;font-size:8.5px;color:#6f6f72}

/* ================= Showcase slider =================
   Five jobs that each need a real screen rather than a card-sized sketch, so
   they share one frame and advance on a timer. */
.showcase{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);overflow:hidden}
.showcase-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px 0}
.sc-tabs{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tab{flex-shrink:0;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.sc-tab:hover{color:var(--text)}
.sc-tab.is-active{background:var(--text);color:var(--bg);border-color:transparent}
.sc-arrows{display:flex;gap:8px;flex-shrink:0}
.sc-arrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.sc-arrow:hover{background:var(--chip-bg)}
.showcase-viewport{overflow:hidden}
.showcase-track{display:flex;align-items:stretch;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
@media(prefers-reduced-motion:reduce){.showcase-track{transition:none}}
.slide{min-width:100%;display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center;padding:28px 26px 34px}
.slide-copy .tag{margin-top:0}
.slide-copy h3{font-family:"Space Grotesk",sans-serif;font-size:31px;letter-spacing:-1.1px;line-height:1.12;margin:0}
.slide-copy p{color:var(--muted);line-height:1.65;margin:14px 0 0;max-width:46ch}
.slide-copy .feature-note{margin-top:16px}

/* Shared window frame for every slide */
.screen{border-radius:14px;overflow:hidden;border:1px solid var(--fx-line);background:var(--fx-surface);box-shadow:0 24px 50px rgba(0,0,0,.32);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.screen-bar{height:32px;display:flex;align-items:center;gap:7px;padding:0 13px;background:var(--fx-sunken);border-bottom:1px solid var(--fx-line)}
.screen-bar i{width:10px;height:10px;border-radius:50%}
.tl-r{background:#ff5f57}.tl-y{background:#febc2e}.tl-g{background:#28c840}
.screen-bar em{font-style:normal;margin-left:8px;font-size:11.5px;color:var(--fx-dim)}
.screen-body{padding:16px;min-height:286px;display:flex;flex-direction:column;gap:10px}
.screen-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--fx-line);display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;color:var(--fx-dim)}
.screen-foot b{color:var(--fx-ink);font-variant-numeric:tabular-nums}
.mini-bar{display:block;height:5px;border-radius:99px;background:var(--fx-line);overflow:hidden;max-width:230px}
.mini-bar.wide{max-width:none}
.mini-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2f8fd0,#4aa3e0)}

/* Convert — a batch running down the list */
.conv-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;border:1px solid var(--fx-line);background:var(--fx-sunken)}
.conv-row.is-wait{opacity:.55}
.ftype{flex-shrink:0;display:grid;place-items:center;width:38px;height:44px;border-radius:6px;font-size:9.5px;font-weight:700;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.26)}
.ftype.mov{background:linear-gradient(150deg,#6b7280,#414651)}
.conv-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.conv-info b{font-size:13px;font-weight:600;color:var(--fx-ink)}
.conv-info em{font-style:normal;font-size:11.5px;color:var(--fx-dim);font-variant-numeric:tabular-nums}
.conv-info em.done{color:#5f9c2c}
[data-theme="light"] .conv-info em.done{color:#4d8020}
.conv-state{flex-shrink:0;font-size:11.5px;color:var(--fx-dim);font-variant-numeric:tabular-nums}
.conv-state.ok{width:20px;height:20px;border-radius:50%;background:#5f9c2c;position:relative}
.conv-state.ok:after{content:"";position:absolute;left:6px;top:6px;width:8px;height:4px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg)}

/* PDFs — sources on the left, merged pages on the right */
.pdf-body{display:grid;grid-template-columns:156px 1fr;gap:14px;align-content:start}
.pdf-side{display:flex;flex-direction:column;gap:7px}
.pdf-src{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;border-radius:9px;background:var(--fx-sunken);border:1px solid var(--fx-line);font-size:11px;color:var(--fx-ink)}
.pdf-src em{font-style:normal;color:var(--fx-dim);font-variant-numeric:tabular-nums}
.pdf-hint{margin-top:2px;font-size:10.5px;color:var(--fx-dim)}
.pdf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;align-content:start}
.pg{background:#fff;border:1px solid rgba(0,0,0,.13);border-radius:4px;aspect-ratio:3/4;padding:7px 6px;display:flex;flex-direction:column;gap:4px;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.pg u{display:block;height:2.5px;border-radius:2px;background:#e2e2dd;text-decoration:none}
.pg u:last-child{width:64%}
.pg.is-new{outline:2px solid #2f8fd0;outline-offset:1px}
.pdf-body .screen-foot{grid-column:1/-1}

/* System info — the spec sheet, read off the machine */
.spec-body{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.spec-side{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.mac-art{width:120px}
.mac-art span{display:block;height:76px;border-radius:8px;border:3px solid var(--fx-line);background:linear-gradient(150deg,#1d2b3a,#0b1420)}
.mac-art:after{content:"";display:block;height:6px;margin:3px -13px 0;border-radius:0 0 6px 6px;background:var(--fx-line)}
.spec-side b{font-size:12.5px;color:var(--fx-ink)}
.spec-side em{font-style:normal;font-size:11px;color:var(--fx-dim)}
.spec-rows{list-style:none;margin:0;padding:0;display:grid;gap:1px;border-radius:10px;overflow:hidden;background:var(--fx-line)}
.spec-rows li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 13px;background:var(--fx-surface);font-size:12.5px}
.spec-rows span{color:var(--fx-dim)}
.spec-rows b{font-weight:600;color:var(--fx-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.spec-rows li:last-child b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}

/* Repair — the diagnosis, then the fix */
.fix-find{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;background:var(--fx-sunken);border:1px solid var(--fx-line);font-size:12.5px;color:var(--fx-ink)}
.fix-find span{flex:1;min-width:0}
.fix-find b{flex-shrink:0;font-size:11px;font-weight:600;color:#d9603f}
.fix-steps{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:11px}
.fix-steps li{position:relative;padding-left:26px;font-size:12.5px;line-height:1.4;color:var(--fx-dim)}
.fix-steps li:before{content:"";position:absolute;left:0;top:1px;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--fx-line)}
.fix-steps li.ok:before{background:#5f9c2c;border-color:#5f9c2c}
.fix-steps li.ok:after{content:"";position:absolute;left:4px;top:5.5px;width:7px;height:3.5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.fix-steps li.live{color:var(--fx-ink)}
.fix-steps li.live:before{border-color:var(--fx-line);border-top-color:#2f8fd0;animation:fxSpin .9s linear infinite}
@media(prefers-reduced-motion:reduce){.fix-steps li.live:before{animation:none}}

/* Clean up — the storage dashboard, at full size */
.clean-body{gap:16px;justify-content:center}

@media(max-width:920px){
  .slide{grid-template-columns:1fr;gap:24px;padding:22px 20px 28px}
  .slide-copy h3{font-size:26px}
  .screen-body{min-height:0}
}
@media(max-width:680px){
  .showcase-head{padding:18px 18px 0;gap:12px}
  .sc-arrows{display:none}
  .sc-tab{font-size:12.5px;padding:8px 13px}
  .pdf-body{grid-template-columns:1fr}
  .pdf-grid{grid-template-columns:repeat(4,1fr)}
  .spec-body{grid-template-columns:1fr;gap:14px}
  .mac-art{width:96px}
  .mac-art span{height:60px}
}
@media(max-width:680px){.desktop-line-break{display:none}}

/* ---- Schedule: a Teams invite being filled in.
   Same tile geometry as the other small cards, so the type below lines up. ---- */
.fx-meet{background:var(--fx-sunken);display:block;padding:0}
.fx-teams{position:absolute;inset:10px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:var(--fx-surface);border:1px solid var(--fx-line)}
.fx-meet-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:9px 10px 38px}
.fx-people{display:flex;flex-wrap:wrap;gap:5px}
.fx-people span{display:inline-flex;align-items:center;gap:5px;padding:2.5px 7px 2.5px 2.5px;border-radius:999px;background:var(--fx-sunken);border:1px solid var(--fx-line);font-size:9px;color:var(--fx-ink)}
.fx-av{width:14px;height:14px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:6px;font-weight:700;color:#fff;letter-spacing:.02em}
.fx-av.a1{background:#5b5fc7}.fx-av.a2{background:#c9426c}.fx-av.a3{background:#2e7d5b}
.fx-when{display:flex;align-items:center;gap:8px;margin-top:auto;padding:5px 6px;border-radius:8px;background:rgba(91,95,199,.12);border:1px solid rgba(91,95,199,.32)}
.fx-cal{width:23px;flex-shrink:0;border-radius:4px;overflow:hidden;background:var(--fx-surface);border:1px solid var(--fx-line);text-align:center}
.fx-cal b{display:block;padding:0 0 1px;font-size:5.5px;letter-spacing:.1em;background:#5b5fc7;color:#fff}
.fx-cal u{display:block;padding:0 0 2px;text-decoration:none;font-size:10px;font-weight:700;color:var(--fx-ink);font-variant-numeric:tabular-nums}
.fx-slot{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fx-slot b{font-size:9px;font-weight:600;color:var(--fx-ink)}
.fx-slot em{font-style:normal;font-size:8.5px;color:var(--fx-dim);font-variant-numeric:tabular-nums}
.fx-send{flex-shrink:0;padding:4px 9px;border-radius:6px;background:#5b5fc7;color:#fff;font-size:8.5px;font-weight:700}
.fx-meet .fx-sk{bottom:11px;padding:6px 8px;gap:7px}
.fx-meet .fx-sk img{width:17px;height:17px}
/* The tile is 150px on phones — keep the invite on one line so nothing collides. */
@media(max-width:680px){
  .fx-meet-body{gap:6px;padding:8px 9px 36px}
  .fx-people span{font-size:8.5px;padding:2px 6px 2px 2px}
  .fx-meet .fx-sk{font-size:9px}
}


/* ================= Prompt library =================
   Every feature headline is a literal prompt, so each card carries a button
   that puts it on the clipboard. The copied state is the whole affordance —
   it has to be unmistakable without moving the layout, hence the fixed
   min-width and the icon swapping to a tick in place. */
/* Tinted blue rather than another grey chip — on a near-grey card the old
   version read as disabled text, not a button. */
.copy-prompt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;height:36px;padding:0 14px;min-width:138px;
  border:1px solid rgba(24,174,234,.4);border-radius:11px;
  background:rgba(24,174,234,.13);color:#4fc3f2;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.copy-prompt svg{
  width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.copy-prompt:hover{
  color:#7ad3f7;border-color:rgba(24,174,234,.62);
  background:rgba(24,174,234,.2);transform:translateY(-1px);
}
.copy-prompt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[data-theme="light"] .copy-prompt{
  border-color:rgba(15,143,196,.42);background:rgba(15,143,196,.1);color:#0b74a1;
}
[data-theme="light"] .copy-prompt:hover{
  border-color:rgba(15,143,196,.65);background:rgba(15,143,196,.16);color:#095e83;
}
.copy-prompt.is-copied{
  color:var(--green);border-color:rgba(148,213,21,.45);
  background:rgba(148,213,21,.11);transform:none;
}
.copy-prompt.is-copied svg{display:none}
.copy-prompt.is-copied:before{content:"✓";font-size:14px;font-weight:800}
[data-theme="light"] .copy-prompt.is-copied{background:rgba(95,143,13,.1);border-color:rgba(95,143,13,.4);color:#4d8020}

/* The large Organise card lays its copy out in a nested div. */
.feature-large .copy-prompt{margin-top:20px}
.slide-copy .copy-prompt{margin-top:22px}


/* ================= Hero pricing pill =================
   The whole pill is the link — the hero column is only ~450px wide, so a
   separate "See pricing" phrase inside pushed it onto a second line, and a
   999px radius on two lines reads as a blob rather than a pill. */
.hero-price{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  margin:16px 0 0;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(24,174,234,.34);
  background:rgba(24,174,234,.11);
  color:var(--text);font-size:13.5px;font-weight:500;line-height:1.5;
  transition:background .2s,border-color .2s,transform .2s;
}
.hero-price:hover{
  background:rgba(24,174,234,.17);border-color:rgba(24,174,234,.5);
  transform:translateY(-1px);
}
.hp-dot{
  width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--blue);
  box-shadow:0 0 12px rgba(24,174,234,.8);
}
.hp-arrow{color:var(--blue);font-weight:700;transition:transform .2s}
.hero-price:hover .hp-arrow{transform:translateX(3px)}
[data-theme="light"] .hero-price{
  border-color:rgba(15,143,196,.36);background:rgba(15,143,196,.1);
}
[data-theme="light"] .hero-price:hover{background:rgba(15,143,196,.16)}
[data-theme="light"] .hp-arrow{color:#0b74a1}


/* ================= Pricing =================
   Stays dark in both themes, like the simulated Mac in the hero. On the light
   page it reads as a spotlight rather than another card, which is what earns
   the dollar figures their attention. Glass cards on a glowing dark panel. */
.pricing-panel{
  position:relative;isolation:isolate;overflow:hidden;
  padding:76px 56px 66px;border-radius:34px;text-align:center;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(ellipse 62% 52% at 50% -10%,rgba(148,213,21,.20),transparent 72%),
    radial-gradient(ellipse 54% 46% at 90% 108%,rgba(24,174,234,.15),transparent 72%),
    linear-gradient(168deg,#0f1411 0%,#0a0c0a 52%,#070807 100%);
  box-shadow:
    0 44px 110px rgba(0,0,0,.5),
    0 0 90px -34px rgba(148,213,21,.4),
    0 1px 0 rgba(255,255,255,.1) inset;
  color:#f6f6f3;
}
/* Soft bloom behind the headline. */
.pricing-panel:before{
  content:"";position:absolute;z-index:-1;left:50%;top:-150px;
  transform:translateX(-50%);width:min(660px,92%);height:300px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(148,213,21,.34),transparent);
  filter:blur(52px);pointer-events:none;
}
/* Lit top edge — the detail that sells the glass. */
.pricing-panel:after{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(163,225,48,.7),transparent);
}
.pricing-panel .kicker{margin-bottom:18px;color:#8f9a83}
.pricing-panel h2{
  font-size:clamp(36px,4.4vw,58px);letter-spacing:-2.4px;line-height:1.04;
  max-width:17ch;margin-inline:auto;color:#f8f8f5;
}

.price-points{
  list-style:none;margin:48px auto 0;padding:0;max-width:840px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.price-points li{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:28px 20px 26px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.13) inset,0 20px 44px rgba(0,0,0,.34);
  transition:transform .25s,border-color .25s;
}
.price-points li:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
.price-points b{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#9aa392;
}
.pp-amount{
  font-family:"Space Grotesk",sans-serif;font-size:46px;font-weight:700;
  letter-spacing:-2.6px;line-height:1;color:#fbfbf8;
  font-variant-numeric:tabular-nums;
}
.pp-amount i{
  font-style:normal;font-size:24px;letter-spacing:-1px;
  vertical-align:.34em;margin-right:1px;opacity:.62;
}
.price-points em{font-style:normal;font-size:13px;color:#8c9485}

/* The free credit is the one figure that should stop the eye. */
.price-points .is-featured{
  border-color:rgba(148,213,21,.42);
  background:linear-gradient(160deg,rgba(148,213,21,.16),rgba(148,213,21,.05));
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 20px 50px rgba(0,0,0,.36),
    0 0 46px -14px rgba(148,213,21,.5);
}
.price-points .is-featured .pp-amount{color:#b5e836}
.price-points .is-featured .pp-amount i{opacity:.8}
.price-points .is-featured b{color:#a8c77a}
.pp-flag{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  padding:3px 11px;border-radius:999px;white-space:nowrap;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#0c1305;background:linear-gradient(#c2f04a,#9ed225);
  box-shadow:0 4px 14px rgba(148,213,21,.42);
}

.price-beta{
  margin-top:40px;display:flex;align-items:center;justify-content:center;
  gap:22px;flex-wrap:wrap;
}
.price-beta p{margin:0;color:#93998d;font-size:14.5px}
/* The panel is dark in light mode too, so the button can't follow the theme. */
.pricing-panel .button-primary{
  background:#f7f7f4;color:#0a0a0a;box-shadow:0 14px 40px rgba(0,0,0,.42);
}


/* ================= Enterprise: colour per capability =================
   The band was uniformly grey, which flattened five distinct products into
   one list. Each card now owns an accent, carried by the number, the rule and
   the tinted panel the bullets sit in. Accents are RGB triples so the same
   value can drive both solid text and low-alpha fills. */
.ent-feature{--accent:24,174,234}
.ent-feature:nth-child(2){--accent:148,213,21}
.ent-feature:nth-child(3){--accent:255,193,44}
.ent-feature:nth-child(4){--accent:255,83,56}
.ent-feature:nth-child(5){--accent:139,91,217}

[data-theme="light"] .ent-feature{--accent:15,143,196}
[data-theme="light"] .ent-feature:nth-child(2){--accent:95,143,13}
[data-theme="light"] .ent-feature:nth-child(3){--accent:176,120,0}
[data-theme="light"] .ent-feature:nth-child(4){--accent:214,58,36}
[data-theme="light"] .ent-feature:nth-child(5){--accent:109,66,186}

.entf-eyebrow span{
  color:rgb(var(--accent));
  background:rgba(var(--accent),.14);
  border:1px solid rgba(var(--accent),.3);
}

/* The bullets become a panel rather than a bare list — the "different
   coloured section" that separates capability from prose. */
.entf-points{
  margin:26px 0 0;padding:18px 20px;
  border:1px solid rgba(var(--accent),.26);border-radius:16px;
  background:linear-gradient(145deg,rgba(var(--accent),.12),rgba(var(--accent),.035));
  gap:11px 22px;
}
.entf-points li{color:var(--text);font-weight:500;opacity:.9}
.entf-points li:before{background:rgb(var(--accent));opacity:1;width:6px;height:6px}

/* Tint the divider between cards with the incoming card's accent. */
.ent-feature+.ent-feature{border-top-color:rgba(var(--accent),.22)}


/* ================= Early access ================= */
.early-access{margin-top:40px;max-width:560px}
.ea-label{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  color:var(--faint);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
}
.ea-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px rgba(148,213,21,.75);
}
.ea-row{display:flex;gap:10px}
.ea-input{
  flex:1;min-width:0;height:54px;padding:0 18px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--chip-bg);color:var(--text);
  font:inherit;font-size:15px;outline:none;
  transition:border-color .18s,background .18s;
}
.ea-input::placeholder{color:var(--faint)}
.ea-input:focus{border-color:rgba(24,174,234,.6);background:rgba(24,174,234,.07)}
.ea-input.is-bad{border-color:rgba(255,83,56,.6);background:rgba(255,83,56,.07)}
.ea-submit{flex-shrink:0;height:54px}
.ea-submit:disabled{opacity:.55;cursor:default;transform:none}
/* Off-screen rather than hidden: bots fill it, people never see it. */
.ea-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ea-note{margin:14px 0 0;color:var(--faint);font-size:13.5px;line-height:1.6}
.ea-note.is-ok{color:var(--green)}
.ea-note.is-bad{color:var(--red)}


/* ================= Organise card: files filing themselves =================
   Ten strays in a 5x2 grid fly down into the three folders on a 5s loop,
   staggered so it reads as sorting rather than one sweep. Only runs once the
   card is on screen, and not at all under prefers-reduced-motion. */
@keyframes strayFile{
  0%      {transform:translate(0,0) scale(1) rotate(0);opacity:1}
  6%      {transform:translate(0,-6px) scale(1.06) rotate(0);opacity:1}
  36%     {transform:translate(var(--tx),var(--ty)) scale(.14) rotate(var(--rot));opacity:0}
  84%     {transform:translate(var(--tx),var(--ty)) scale(.14) rotate(var(--rot));opacity:0}
  94%,100%{transform:translate(0,0) scale(1) rotate(0);opacity:1}
}
@keyframes folderCatch{
  0%,28%   {transform:none}
  35%      {transform:translateY(-6px) scale(1.07)}
  44%      {transform:translateY(0) scale(.985)}
  52%,100% {transform:none}
}
@keyframes countIn{
  0%,30%  {opacity:0;transform:translateY(4px)}
  44%,86% {opacity:1;transform:none}
  95%,100%{opacity:0;transform:translateY(4px)}
}

.feature-large.visible .fx-hero .fx-strays i{
  animation:strayFile 5s cubic-bezier(.5,.05,.25,1) infinite;
}
/* Columns 1-5 aim at the three folders below; the second row starts lower so
   it travels less far. Values are eyeballed against the 594px tile. */
.feature-large.visible .fx-hero .fx-strays i:nth-child(1){--tx:84px;--ty:172px;--rot:-14deg;animation-delay:0s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(2){--tx:-14px;--ty:172px;--rot:8deg;animation-delay:.07s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(3){--tx:2px;--ty:172px;--rot:-5deg;animation-delay:.14s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(4){--tx:18px;--ty:172px;--rot:11deg;animation-delay:.21s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(5){--tx:-82px;--ty:172px;--rot:-9deg;animation-delay:.28s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(6){--tx:84px;--ty:118px;--rot:12deg;animation-delay:.35s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(7){--tx:-14px;--ty:118px;--rot:-7deg;animation-delay:.42s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(8){--tx:2px;--ty:118px;--rot:6deg;animation-delay:.49s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(9){--tx:18px;--ty:118px;--rot:-11deg;animation-delay:.56s}
.feature-large.visible .fx-hero .fx-strays i:nth-child(10){--tx:-82px;--ty:118px;--rot:9deg;animation-delay:.63s}

.feature-large.visible .fx-hero .fx-folders div{
  animation:folderCatch 5s cubic-bezier(.3,.9,.3,1) infinite;
}
.feature-large.visible .fx-hero .fx-folders div:nth-child(1){animation-delay:0s}
.feature-large.visible .fx-hero .fx-folders div:nth-child(2){animation-delay:.12s}
.feature-large.visible .fx-hero .fx-folders div:nth-child(3){animation-delay:.24s}

.feature-large.visible .fx-hero .fx-folders em{animation:countIn 5s ease infinite}
.feature-large.visible .fx-hero .fx-folders div:nth-child(2) em{animation-delay:.12s}
.feature-large.visible .fx-hero .fx-folders div:nth-child(3) em{animation-delay:.24s}

@media(prefers-reduced-motion:reduce){
  .feature-large.visible .fx-hero .fx-strays i,
  .feature-large.visible .fx-hero .fx-folders div,
  .feature-large.visible .fx-hero .fx-folders em{animation:none}
}
/* Phones shrink the tile, so the flight paths shrink with it. */
@media(max-width:680px){
  .fx-hero .fx-strays{gap:8px 5px;top:18px}
  .feature-large.visible .fx-hero .fx-strays i:nth-child(-n+5){--ty:128px}
  .feature-large.visible .fx-hero .fx-strays i:nth-child(n+6){--ty:88px}
  .feature-large.visible .fx-hero .fx-strays i:nth-child(1),
  .feature-large.visible .fx-hero .fx-strays i:nth-child(6){--tx:46px}
  .feature-large.visible .fx-hero .fx-strays i:nth-child(5),
  .feature-large.visible .fx-hero .fx-strays i:nth-child(10){--tx:-46px}
}


/* The nav download button carries the same Apple mark as the hero one. */
.button-small svg{width:15px;margin-right:8px;fill:currentColor;flex-shrink:0}


/* ================= Keycaps ================= */
.kc{
  display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;
  border-radius:7px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  font-size:12.5px;font-weight:600;line-height:1;color:var(--text);
  background:linear-gradient(#fbfbf9,#e9e9e5);
  border:1px solid rgba(0,0,0,.16);
  box-shadow:0 2px 0 rgba(0,0,0,.18),0 1px 0 #fff inset;
  vertical-align:-3px;
}
[data-theme="dark"] .kc,:root:not([data-theme="light"]) .kc{
  color:#1a1a1a;
}
.kc-wide{min-width:52px}
.kc-sm{min-width:20px;height:20px;font-size:10.5px;padding:0 5px;border-radius:5px;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.section-heading .kc{margin:0 1px}


/* ================= Two ways in =================
   One mock at a time behind a segmented toggle. Showing both side by side
   cost a lot of vertical space for two things nobody compares directly. */
.ways-section{padding-top:0}
.ways-section .section-heading{margin-bottom:26px;text-align:center;max-width:none}
.ways-switcher{max-width:760px;margin-inline:auto}

/* ---- toggle ---- */
.wsw-tabs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:272px;margin:0 auto 22px;padding:4px;gap:0;
  border:1px solid var(--line);border-radius:13px;background:var(--chip-bg);
}
.wsw-tab{
  position:relative;z-index:1;height:34px;padding:0 10px;border:0;border-radius:9px;
  background:transparent;color:var(--faint);font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:color .22s;
}
.wsw-tab.is-active{color:var(--text)}
/* Thumb width is exactly one column, so a 100% translate lands it perfectly. */
.wsw-thumb{
  position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);
  border-radius:9px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 3px 10px rgba(0,0,0,.2);
  transition:transform .32s cubic-bezier(.3,.9,.3,1);
}
.ways-switcher[data-on="1"] .wsw-thumb{transform:translateX(100%)}

/* ---- slides ---- */
.wsw-viewport{overflow:hidden}
.wsw-track{display:flex;transition:transform .45s cubic-bezier(.3,.9,.3,1)}
.wsw-slide{
  min-width:100%;margin:0;display:flex;flex-direction:column;gap:14px;
  padding:4px;
}
.wsw-slide figcaption{
  color:var(--muted);font-size:13.5px;line-height:1.6;text-align:center;
  min-height:44px;
}
.wsw-slide figcaption .kc{margin:0 1px}
@media(prefers-reduced-motion:reduce){
  .wsw-track,.wsw-thumb{transition:none}
}

/* ---- the little desktop both sit on ---- */
.mini-mac{
  border-radius:15px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 62px rgba(0,0,0,.42);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}
.mm-bar{
  height:22px;display:flex;align-items:center;gap:9px;padding:0 10px;
  background:rgba(5,8,13,.9);color:rgba(255,255,255,.9);font-size:8px;
}
.mm-bar b{font-weight:700}
.mm-bar em{margin-left:auto;font-style:normal}
.mm-apple{width:5px;height:5px;border-radius:50%;background:#fff;display:inline-block}
.mini-desk{
  position:relative;height:186px;
  background:
    radial-gradient(circle at 74% 62%,#8a4b34 0 7%,transparent 24%),
    radial-gradient(circle at 56% 70%,#d9793e 0 8%,#573b34 18%,transparent 36%),
    linear-gradient(145deg,#020c17 3%,#0a2334 45%,#1f1718 72%,#02050a);
}
.mini-desk:before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(#fff .6px,transparent .7px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}

/* ---- the command bar ---- */
.spot{
  position:absolute;left:6%;right:6%;top:22px;z-index:2;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.19),rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 20px 44px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.32) inset;
  color:#f6f6f4;
}
.spot-bar{display:flex;align-items:center;gap:9px;padding:0 13px;height:40px}
.spot-spark{color:#ff8a5f;font-size:15px;flex-shrink:0}
.spot-input{flex:1;min-width:0;display:flex;align-items:center;font-size:13.5px}
.spot-input em{font-style:normal;white-space:nowrap;overflow:hidden}
.spot-caret{width:1.5px;height:15px;background:currentColor;margin-left:2px;flex-shrink:0;
  animation:blink 1s steps(1) infinite}
.spot-hint{display:flex;gap:3px;flex-shrink:0;opacity:.85}
.spot-chips{display:flex;gap:6px;align-items:center;padding:0 13px 10px;flex-wrap:wrap}
.qa{
  padding:4px 9px;border-radius:7px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);
  color:#f0f0ed;font:inherit;font-size:10px;font-weight:600;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s;
}
.qa.is-on{background:rgba(255,122,77,.3);border-color:rgba(255,138,95,.7);color:#ffc9b3}

/* ---- the bubble opening its panel ---- */
.mini-bubble{
  position:absolute;right:16px;bottom:14px;width:36px;height:36px;z-index:2;
  border-radius:12px;overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18);
  animation:miniPress 7s ease infinite;
}
.mini-bubble img{width:100%;height:100%;object-fit:cover}
.mini-pop{
  position:absolute;right:16px;bottom:58px;width:min(232px,52%);z-index:3;
  border-radius:11px;overflow:hidden;transform-origin:bottom right;
  background:rgba(250,250,248,.97);color:#1c1c1e;
  box-shadow:0 20px 46px rgba(0,0,0,.5);
  opacity:0;animation:miniPop 7s cubic-bezier(.22,.85,.26,1) infinite;
}
.mp-head{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.09)}
.mp-head img{width:21px;height:21px;border-radius:6px}
.mp-head div{display:flex;flex-direction:column}
.mp-head b{font-size:10px}
.mp-head span{font-size:8px;color:#78787c;margin-top:1px}
.mp-prompt{
  display:flex;align-items:center;gap:6px;padding:9px 10px;font-size:9.5px;color:#3d3d40;
  background:linear-gradient(90deg,rgba(255,198,45,.24),rgba(255,255,255,.6) 70%);
  box-shadow:inset 2px 0 0 #ffbd1e;
}
.mp-prompt i{color:#f26b4d;font-style:normal;font-size:10px}
.mp-prompt u{width:1.2px;height:10px;background:#555;text-decoration:none;animation:blink 1s steps(1) infinite}
.mp-foot{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:8px;color:#84848a}
.mp-foot b{font-size:8px;background:#eeeeec;border-radius:7px;padding:3px 7px;color:#8a8a8d}
.mini-pointer{
  position:absolute;right:21px;bottom:19px;width:11px;height:14px;z-index:4;
  background:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));
  clip-path:polygon(0 0,0 83%,22% 65%,35% 98%,49% 92%,36% 61%,66% 61%);
  opacity:0;animation:miniPointer 7s ease infinite;
}

@keyframes miniPointer{
  0%      {opacity:0;transform:translate(24px,22px)}
  7%      {opacity:1;transform:translate(12px,11px)}
  17%     {opacity:1;transform:translate(0,0)}
  20%     {transform:translate(1px,2px) scale(.88)}
  24%     {transform:translate(0,0) scale(1)}
  38%     {opacity:0;transform:translate(9px,14px)}
  100%    {opacity:0;transform:translate(24px,22px)}
}
@keyframes miniPress{
  0%,17%  {transform:scale(1)}
  21%     {transform:scale(.88)}
  27%,100%{transform:scale(1)}
}
@keyframes miniPop{
  0%,22%  {opacity:0;transform:translateY(8px) scale(.9)}
  32%,86% {opacity:1;transform:none}
  94%,100%{opacity:0;transform:translateY(5px) scale(.96)}
}
@media(prefers-reduced-motion:reduce){
  .mini-bubble,.mini-pointer{animation:none}
  .mini-pointer{opacity:0}
  .mini-pop{animation:none;opacity:1}
}

@media(max-width:640px){
  .mini-desk{height:150px}
  .mini-pop{width:min(200px,62%);bottom:50px}
  .mini-bubble{width:31px;height:31px;right:12px;bottom:11px}
  .mini-pointer{right:17px;bottom:16px}
  .spot{top:16px;left:5%;right:5%}
  .spot-bar{height:36px;padding:0 11px}
  .spot-input{font-size:12px}
  .spot-hint{display:none}
  .qa{font-size:9px;padding:3px 7px}
  .wsw-slide figcaption{font-size:12.5px;min-height:58px}
}


/* ================= Enterprise header =================
   Was a left-aligned block of text with 400px of dead space beside it. Now a
   two-column lede with the sign-up as a card, a module strip that previews
   the five capabilities below, and a faint grid over the band. */
.enterprise-band{--ent-grid:rgba(255,255,255,.05)}
[data-theme="light"] .enterprise-band{--ent-grid:rgba(0,0,0,.05)}
/* Blueprint grid, faded out before it reaches the cards. */
.enterprise-band:after{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--ent-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--ent-grid) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 78% 42% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 78% 42% at 50% 0%,#000,transparent 72%);
}

.ent-intro{
  max-width:none;
  display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:start;
}
.ent-lede{min-width:0}
.ent-intro h2{max-width:none;margin-top:0}

.ent-badge{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
  padding:7px 14px;border-radius:999px;
  border:1px solid rgba(24,174,234,.36);background:rgba(24,174,234,.1);
  color:var(--text);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.ent-badge-dot{
  width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 12px rgba(24,174,234,.85);
}
[data-theme="light"] .ent-badge{border-color:rgba(15,143,196,.4);background:rgba(15,143,196,.09)}

/* Contents strip: names the five capabilities before you scroll them. */
.ent-modules{
  list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.ent-modules li{
  padding:7px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--chip-bg);
  color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap;
}

/* ---- sign-up, now a card in the right column ---- */
.early-access{
  margin:6px 0 0;max-width:none;
  padding:24px 22px;border-radius:20px;
  border:1px solid var(--line);
  background:var(--card-bg);
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.ea-label{margin-bottom:10px}
.ea-lede{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.55}
.ea-row{flex-direction:column;gap:10px}
.ea-input{height:50px}
.ea-submit{width:100%;height:50px}
.ea-note{font-size:12.5px}

@media(max-width:1050px){
  .ent-intro{grid-template-columns:1fr;gap:36px}
  .early-access{margin-inline:0;max-width:520px}
}
@media(max-width:680px){
  .ent-modules{gap:6px}
  .ent-modules li{font-size:11.5px;padding:6px 10px}
  .early-access{padding:20px 18px}
}


/* ================= Contact modal =================
   Selectors are .modal-scoped so they outrank the [data-theme="light"]
   .modal-panel rule further up, which hard-codes a white panel. */
.modal .contact-panel{
  min-height:0;width:min(560px,calc(100% - 28px));
  padding:34px 34px 30px;border-radius:24px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 50px 120px rgba(0,0,0,.55);
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.contact-panel .kicker{margin-bottom:12px}
.contact-panel h3{font-size:30px;letter-spacing:-1.2px;margin:0}
.cf-lede{margin:12px 0 24px;color:var(--muted);font-size:14.5px;line-height:1.6}

.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.cf-field > span{
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}
.cf-field input,
.cf-field textarea{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--chip-bg);color:var(--text);
  font:inherit;font-size:14.5px;outline:none;
  transition:border-color .18s,background .18s;
}
.cf-field textarea{resize:vertical;min-height:112px;line-height:1.55}
.cf-field input::placeholder,
.cf-field textarea::placeholder{color:var(--faint)}
.cf-field input:focus,
.cf-field textarea:focus{border-color:rgba(24,174,234,.6);background:rgba(24,174,234,.06)}
.cf-field .is-bad{border-color:rgba(255,83,56,.6);background:rgba(255,83,56,.07)}

.cf-foot{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.cf-note{margin:0;flex:1;min-width:180px;font-size:13.5px;line-height:1.5;color:var(--faint)}
.cf-note.is-ok{color:var(--green)}
.cf-note.is-bad{color:var(--red)}
.cf-foot .button{flex-shrink:0}
.cf-foot .button:disabled{opacity:.55;cursor:default;transform:none}
/* Success replaces the form body, so the panel doesn't jump in height. */
.contact-panel.is-sent .cf-grid,
.contact-panel.is-sent .cf-field,
.contact-panel.is-sent .cf-lede{display:none}
.contact-panel.is-sent .cf-foot{border-top:0;margin-top:22px;padding-top:0}

@media(max-width:560px){
  .modal .contact-panel{padding:26px 22px 24px}
  .contact-panel h3{font-size:25px}
  .cf-grid{grid-template-columns:1fr;gap:0}
  .cf-foot{flex-direction:column;align-items:stretch}
  .cf-foot .button{width:100%}
}


/* ================= Responsive ================= */
@media(max-width:920px){
  .pricing-panel{padding:56px 34px 52px}
}
@media(max-width:1050px){
  .early-access{margin-inline:auto}
}
/* ================= Hero: Teams scheduling scenario =================
   The Sidekick panel occupies y142–321 of the 501px wallpaper at every
   breakpoint (measured, not assumed), so the invite window lives in the clear
   band above it and never collides. */
.sim-teams{
  position:absolute;left:18px;top:14px;width:min(340px,54%);z-index:3;
  border-radius:11px;overflow:hidden;
  /* Fully opaque: at 97% the desktop icons ghost through, and unlike the
     Sidekick panel this is an ordinary app window, not a vibrancy surface. */
  background:#fafaf9;color:#1d1d1f;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 52px rgba(0,0,0,.46),0 1px 0 rgba(255,255,255,.85) inset;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  opacity:0;transform:translateY(-10px) scale(.96);transform-origin:top left;
  pointer-events:none;
  transition:opacity .34s ease,transform .42s cubic-bezier(.22,.85,.26,1);
}
.sim-teams.show{opacity:1;transform:none}
.st-bar{
  height:24px;display:flex;align-items:center;gap:5px;padding:0 9px;
  background:rgba(0,0,0,.045);border-bottom:1px solid rgba(0,0,0,.08);
}
.st-bar i{width:7px;height:7px;border-radius:50%}
.st-bar em{font-style:normal;margin-left:6px;font-size:8px;color:#71717a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-body{padding:9px 10px;display:flex;flex-direction:column;gap:8px}
.st-invite{display:flex;align-items:center;gap:7px}
.st-av{
  width:19px;height:19px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:#5b5fc7;color:#fff;font-size:7.5px;font-weight:700;letter-spacing:.02em;
}
.st-name{font-size:10.5px;font-weight:600;color:#1d1d1f}
.st-added{
  margin-left:auto;flex-shrink:0;font-size:7.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#3f7d28;background:rgba(95,156,44,.14);
  padding:2px 6px;border-radius:99px;
}
.st-when{display:flex;align-items:center;gap:8px}
.st-cal{
  width:26px;flex-shrink:0;border-radius:5px;overflow:hidden;text-align:center;
  border:1px solid rgba(0,0,0,.1);background:#fff;
}
.st-cal b{display:block;background:#d9463a;color:#fff;font-size:6px;font-weight:800;letter-spacing:.06em;padding:1.5px 0}
.st-cal u{display:block;text-decoration:none;font-size:11px;font-weight:700;color:#1d1d1f;line-height:1.3}
.st-slot{display:flex;flex-direction:column;min-width:0;flex:1}
.st-slot b{font-size:9.5px;font-weight:600;color:#1d1d1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-slot em{font-style:normal;font-size:8.5px;color:#71717a;font-variant-numeric:tabular-nums;margin-top:1px}
.st-send{
  flex-shrink:0;padding:4px 10px;border-radius:6px;background:#5b5fc7;
  color:#fff;font-size:8.5px;font-weight:700;
}
/* The window is 54% of a wallpaper that shrinks with the column; below this
   the invite text starts to crush, so drop to the essentials. */
@media(max-width:680px){
  .sim-teams{left:10px;top:10px;width:calc(100% - 20px)}
  .st-bar em{font-size:7.5px}
  .st-added{display:none}
}


/* ================= Clean up, as a grid card ================= */
.fx-cleanup{
  background:var(--fx-sunken);padding:14px 15px;
  display:flex;flex-direction:column;justify-content:center;gap:11px;
}
.fxc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.fxc-head div{display:flex;flex-direction:column;gap:2px}
.fxc-head span{font-size:9.5px;color:var(--fx-dim)}
.fxc-head strong{
  font-family:"Space Grotesk",sans-serif;font-size:25px;line-height:1;
  letter-spacing:-1.1px;color:#5f9c2c;font-variant-numeric:tabular-nums;
}
[data-theme="light"] .fxc-head strong{color:#4d8020}
.fxc-go{
  flex-shrink:0;font-size:9px;font-weight:700;color:var(--fx-ink);
  padding:5px 9px;border-radius:7px;border:1px solid var(--fx-line);background:var(--fx-surface);
}
.fx-cleanup .fx-bar{height:7px}
.fxc-cat{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fxc-cat li{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--fx-ink)}
.fxc-cat i{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.fxc-cat span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxc-cat b{flex-shrink:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fx-dim)}


/* ================= Understand, as a slide ================= */
/* Rows are 1fr + auto so the document fills the window and the footer sits on
   the bottom edge — screen-body's margin-top:auto does nothing inside a grid. */
.und-body{display:grid;grid-template-columns:118px 1fr;grid-template-rows:1fr auto;gap:14px}
.und-doc{
  border-radius:7px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.2);
  padding:11px 10px;display:flex;flex-direction:column;gap:5px;align-content:start;
}
.und-doc b{font-size:8px;line-height:1.3;color:#1c1c1c;margin-bottom:3px}
.und-doc span{height:3.4px;border-radius:2px;background:#e4e4df}
.und-doc span:nth-child(3){width:86%}
.und-doc span:nth-child(6){width:70%}
.und-doc span:nth-child(9){width:78%}
.und-doc span:nth-child(12){width:58%}
.und-side{display:flex;flex-direction:column;gap:8px;align-content:start}
.und-label{
  margin:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--fx-dim);
}
.und-side u{
  text-decoration:none;position:relative;padding-left:17px;
  font-size:12.5px;line-height:1.4;color:var(--fx-ink);
}
.und-side u:before{
  content:"";position:absolute;left:2px;top:.36em;width:8px;height:4px;
  border-left:1.6px solid #6aa832;border-bottom:1.6px solid #6aa832;transform:rotate(-45deg);
}
.und-flag{
  margin-top:2px;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;font-size:11.5px;line-height:1.4;
  background:rgba(255,180,20,.13);border:1px solid rgba(255,180,20,.32);color:#a97400;
}
.und-flag i{width:7px;height:7px;border-radius:50%;background:#e0a32c;flex-shrink:0}
[data-theme="light"] .und-flag{color:#8a6000}
.und-body .screen-foot{grid-column:1/-1}
@media(max-width:680px){
  .und-body{grid-template-columns:88px 1fr;gap:11px}
  .und-side u{font-size:11.5px;padding-left:15px}
  .und-flag{font-size:10.5px}
}


@media(max-width:680px){
  /* Narrow phones can't hold it on one line; let it wrap and square it off. */
  .hero-price{font-size:12.5px;border-radius:16px;padding:10px 14px;white-space:normal}
  .copy-prompt{width:100%;min-width:0}
  .ea-row{flex-direction:column}
  .ea-submit{width:100%}
  .pricing-panel{padding:48px 20px 42px;border-radius:26px}
  .pricing-panel h2{font-size:34px;letter-spacing:-1.6px}
  .price-points{grid-template-columns:1fr;gap:22px 12px;margin-top:38px}
  /* Row layout on phones: label left, figure right, caption under the label.
     The badge moves inline so it stops overlapping the card above. */
  .price-points li{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:2px 14px;padding:16px 18px 15px;text-align:left;
  }
  .price-points b{grid-column:1;grid-row:1}
  .price-points em{grid-column:1;grid-row:2}
  .pp-amount{grid-column:2;grid-row:1/3;font-size:32px;letter-spacing:-1.6px}
  .pp-amount i{font-size:18px}
  .pp-flag{top:-10px;left:18px;transform:none}
  .price-beta{margin-top:32px;gap:18px}
  .price-beta .button{width:100%}
}