:root { --ink:#20221f; --muted:#77766e; --paper:#f5f1eb; --card:#fffdf9; --lime:#d7ee68; --line:#dedbd2; --coral:#f06d59; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:Manrope, ui-sans-serif, system-ui, sans-serif; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.page-shell { width:min(1180px, calc(100% - 72px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
.topbar { height:104px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:11px; align-items:center; color:var(--ink); text-decoration:none; font-size:19px; font-weight:800; letter-spacing:-.06em; }
.brand-dot { color:var(--coral); padding:0 2px; }.brand-mark { display:flex; gap:3px; align-items:end; height:24px; }.brand-mark span { display:block; width:5px; border-radius:6px; background:var(--ink); }.brand-mark span:nth-child(1){height:12px}.brand-mark span:nth-child(2){height:21px;background:var(--coral)}.brand-mark span:nth-child(3){height:16px}
.topbar-note { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; display:flex; gap:8px; align-items:center; }.status-dot { width:7px;height:7px;border-radius:50%; background:#65a762; box-shadow:0 0 0 4px #65a76222; }
.invite-layout { flex:1; display:grid; grid-template-columns:1fr 470px; align-items:center; gap:110px; padding:70px 8.5% 78px; }.eyebrow { display:flex; align-items:center; gap:15px; color:#8a887e; font:500 11px/1 DM Mono, monospace; text-transform:uppercase; letter-spacing:.16em; }.eyebrow-line { height:1px; width:48px; background:var(--coral); }.intro-column h1 { margin:24px 0 26px; font-size:clamp(52px, 6vw, 84px); letter-spacing:-.085em; line-height:.94; font-weight:700; }.intro-column h1 em { color:var(--coral); font-style:normal; }.intro-copy { max-width:450px; color:#66655f; font-size:17px; line-height:1.68; letter-spacing:-.02em; }.invitee { display:flex; align-items:center; gap:13px; margin-top:37px; }.avatar { width:43px;height:43px; display:grid;place-items:center;border-radius:50%;color:var(--ink);background:var(--lime);font-weight:800; }.invitee div:last-child { display:flex; flex-direction:column; gap:3px; font-size:13px; }.invitee span { color:var(--muted); font-size:12px; }.micro-note { display:flex; align-items:center; gap:9px; margin-top:54px; color:#96938b; font:11px DM Mono, monospace; }.spark { color:var(--coral); font-size:16px; }
.call-card { overflow:hidden; background:var(--card); border:1px solid #e8e3d9; box-shadow:0 28px 70px #3c322519; border-radius:9px; }.card-topline { display:flex; justify-content:space-between; align-items:center; height:54px; padding:0 25px; border-bottom:1px solid #eeeae1; color:#99968b; font:10px DM Mono, monospace; letter-spacing:.08em; }.live-pill { color:var(--coral); font-weight:500; display:flex; align-items:center; gap:8px; }.live-pill span { width:6px;height:6px;border-radius:50%; background:var(--coral); }.call-id { color:#b4b1a8; }.card-body { padding:51px 50px 48px; }.call-icon { width:65px; height:65px; margin:0 auto 30px; border-radius:18px; background:var(--lime); display:flex; align-items:center; justify-content:center; gap:10px; }.video-shape { width:20px;height:15px; border:2px solid var(--ink); border-radius:4px; position:relative; }.video-shape:after { content:""; position:absolute; right:-9px;top:3px;border-left:6px solid var(--ink);border-top:4px solid transparent;border-bottom:4px solid transparent; }.audio-wave { display:flex; align-items:center; gap:2px; height:18px; }.audio-wave i { width:2px; background:var(--ink); border-radius:3px; }.audio-wave i:nth-child(1){height:6px}.audio-wave i:nth-child(2){height:13px}.audio-wave i:nth-child(3){height:18px}.audio-wave i:nth-child(4){height:10px}.card-body h2 { margin:0 0 13px; text-align:center; font-size:26px; letter-spacing:-.055em; }.card-body p { margin:0 auto; color:#77756c; text-align:center; font-size:14px; line-height:1.7; max-width:335px; }.card-body p strong { color:var(--ink); font-weight:700; }.primary-button { width:100%; margin-top:31px; padding:17px 18px 17px 23px; border:0; border-radius:5px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--ink); background:var(--ink); font:700 14px Manrope; transition:transform .18s, background .18s; }.primary-button span:first-child { color:#fffdf9; }.primary-button:hover { transform:translateY(-2px); background:#353832; }.arrow { width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--lime);font-size:17px; }.permission-hint { margin-top:18px!important; color:#a8a59c!important; font:10px DM Mono, monospace; letter-spacing:.02em; }.lock { font-size:17px; vertical-align:-2px; }.card-footer { display:flex; justify-content:space-between; padding:15px 25px; color:#aaa69b; background:#faf8f4; font:9px DM Mono, monospace; letter-spacing:.11em; }.footer { display:flex; justify-content:space-between; padding:0 0 27px; color:#98968d; font:10px DM Mono, monospace; letter-spacing:.04em; }.footer b { color:var(--coral); font-size:13px; }
.consent-list { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }.consent-list[hidden] { display:none; }.consent-list li { display:flex; align-items:center; gap:13px; padding:14px 16px; border:1px solid #ece7dd; border-radius:7px; background:#fdfbf7; text-align:left; }.consent-ico { color:var(--coral); font-size:16px; line-height:1; }.consent-text { flex:1; display:flex; flex-direction:column; gap:3px; }.consent-text strong { font-size:13px; letter-spacing:-.01em; }.consent-text small { color:#8f8d84; font-size:11.5px; line-height:1.45; }.consent-tag { font:9px DM Mono, monospace; letter-spacing:.1em; text-transform:uppercase; color:#97948b; padding:4px 8px; border-radius:20px; background:#f0ece3; }
.switch { position:relative; display:inline-flex; align-items:center; cursor:pointer; flex:none; }.switch input { position:absolute; opacity:0; width:0; height:0; }.switch .track { width:40px; height:23px; border-radius:20px; background:#d8d3c8; transition:background .18s; }.switch .track:after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fffdf9; box-shadow:0 1px 3px #3c322530; transition:transform .18s; }.switch input:checked + .track { background:var(--coral); }.switch input:checked + .track:after { transform:translateX(17px); }.switch input:focus-visible + .track { outline:2px solid var(--ink); outline-offset:2px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.done-state .call-icon { background:#e7f3c9; }.done-state .call-icon:before { content:"✓"; font-size:30px; font-weight:700; color:#5c7a1e; }.done-state .video-shape,.done-state .audio-wave { display:none; }
.hero { display:grid; grid-template-columns:1fr 430px; align-items:center; gap:88px; padding:84px 8.5% 70px; border-bottom:1px solid var(--line); }.hero-copy h1 { margin:22px 0 26px; font-size:clamp(46px, 5.4vw, 76px); letter-spacing:-.085em; line-height:.95; font-weight:700; }.hero-copy h1 em { color:var(--coral); font-style:normal; }.hero-lead { max-width:470px; color:#605f58; font-size:17px; line-height:1.68; letter-spacing:-.02em; }.hero-points { display:flex; flex-direction:column; gap:16px; margin:34px 0 0; }.hero-point { display:flex; align-items:flex-start; gap:13px; }.hp-ico { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--lime); color:var(--ink); font-size:15px; }.hero-point div { display:flex; flex-direction:column; gap:2px; }.hero-point strong { font-size:14px; letter-spacing:-.02em; }.hero-point span { color:#87857c; font-size:13px; line-height:1.5; }.hero-mascot { display:flex; align-items:center; gap:11px; margin-top:34px; color:#8d8a81; font:11px/1.5 DM Mono, monospace; }.mascot-badge { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--line); font-size:15px; }
.hero-media { position:relative; margin:0; border-radius:20px; overflow:hidden; border:1px solid #e3ded3; box-shadow:0 30px 70px #3c32251f; background:#e9e4da; aspect-ratio:768/1376; max-height:620px; }.hero-media img { width:100%; height:100%; object-fit:cover; display:block; }.hero-caption { position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:30px; background:rgba(22,20,18,.62); backdrop-filter:blur(8px); color:#fdfbf7; font:500 11px DM Mono, monospace; letter-spacing:.02em; }.live-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px #d7ee6833; animation:pulse 2s ease-in-out infinite; }@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.modal-overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(28,24,20,.52); backdrop-filter:blur(5px); animation:overlayIn .2s ease; }.modal-overlay[hidden] { display:none; }@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.modal { width:min(620px, 100%); max-height:min(860px, 92vh); display:flex; flex-direction:column; background:var(--card); border:1px solid #e6e1d7; border-radius:14px; box-shadow:0 40px 90px #241c1340; overflow:hidden; animation:modalIn .24s cubic-bezier(.2,.8,.2,1); }@keyframes modalIn { from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:26px 28px 16px; }.modal-eyebrow { display:flex; align-items:center; gap:13px; margin:0 0 12px; color:#8a887e; font:500 11px/1 DM Mono, monospace; text-transform:uppercase; letter-spacing:.16em; }.modal-head h2 { margin:0; font-size:27px; letter-spacing:-.05em; }.modal-close { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#faf8f4; color:#79766d; font-size:14px; cursor:pointer; transition:background .15s, color .15s; }.modal-close:hover { background:#f0ece3; color:var(--ink); }
.modal-intro { margin:0; padding:0 28px 18px; color:#6f6e66; font-size:13.5px; line-height:1.6; }
.terms-body { flex:1; min-height:0; overflow-y:auto; padding:6px 28px 8px; border-top:1px solid #eee9e0; border-bottom:1px solid #eee9e0; background:#fffdf9; scroll-behavior:smooth; }.terms-body:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }.terms-updated { margin:16px 0 0; color:#a8a59c; font:11px DM Mono, monospace; letter-spacing:.04em; }.terms-notice { margin:14px 0 4px; padding:13px 15px; border-radius:8px; background:#fbf4d9; border:1px solid #efe4b4; color:#6b6230; font-size:12.5px; line-height:1.55; }.terms-notice strong { color:#514a22; }.terms-body h3 { margin:24px 0 7px; font-size:14.5px; letter-spacing:-.02em; }.terms-body p { margin:0 0 11px; color:#67665f; font-size:13px; line-height:1.66; }.terms-body p strong { color:var(--ink); font-weight:700; }.terms-mail { color:var(--coral); font-weight:600; }.terms-ack { margin-top:20px!important; padding-top:14px; border-top:1px dashed #e4dfd4; color:#8c8a81!important; font-style:italic; }.terms-end { height:1px; }
.scroll-cue { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; color:#97948b; font:10px DM Mono, monospace; letter-spacing:.09em; text-transform:uppercase; transition:color .2s; }.cue-ico { display:inline-block; animation:bob 1.3s ease-in-out infinite; }@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }.scroll-cue.done { color:#5c7a1e; }.scroll-cue.done .cue-ico { animation:none; }
.modal-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px 20px; flex-wrap:wrap; }.perm-setup { display:flex; gap:8px; flex-wrap:wrap; }.perm-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:30px; border:1px solid #e7e2d8; background:#faf8f4; color:#8c8a81; font:11px DM Mono, monospace; letter-spacing:.02em; }.perm-chip .perm-ico { color:#b7b4ab; font-size:12px; }.perm-chip b { color:#6f6e66; font-weight:500; }.perm-chip.ok { border-color:#cfe39a; background:#f1f7e1; color:#5c7a1e; }.perm-chip.ok .perm-ico, .perm-chip.ok b { color:#5c7a1e; }.perm-chip.bad { border-color:#f1c4bb; background:#fdecE8; color:#c0503c; }.perm-chip.bad .perm-ico, .perm-chip.bad b { color:#c0503c; }.perm-chip.busy b { color:#9a9890; }
.modal-accept { width:auto!important; margin-top:0!important; flex:1; min-width:200px; }.modal-accept:disabled { opacity:.5; cursor:not-allowed; transform:none; }.modal-accept:disabled span:first-child { color:#cfcdc6; }.modal-accept:disabled .arrow { background:#4a4d46; color:#8d8f88; }
.connecting-state .call-icon { background:var(--lime); }.connecting-state .call-icon .audio-wave i { animation:eq .9s ease-in-out infinite; }.connecting-state .call-icon .audio-wave i:nth-child(2){animation-delay:.15s}.connecting-state .call-icon .audio-wave i:nth-child(3){animation-delay:.3s}.connecting-state .call-icon .audio-wave i:nth-child(4){animation-delay:.45s}@keyframes eq { 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1.25)} }
.call-view { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; background:radial-gradient(130% 100% at 50% 0%, #27405f 0%, #16202f 46%, #0f1620 100%); color:#eef1f5; overflow:hidden; animation:overlayIn .25s ease; }
.call-view[hidden] { display:none; }
.call-top { width:100%; max-width:720px; display:flex; align-items:center; justify-content:space-between; padding:22px 26px 0; }
.call-brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.05em; font-size:16px; color:#eef1f5; }
.call-brand .brand-mark span { background:#eef1f5; }.call-brand .brand-mark span:nth-child(2){background:var(--coral)}
.call-timer { font:12px DM Mono, monospace; color:#9fb0c4; letter-spacing:.06em; }
.call-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:20px; }
.cody { position:relative; width:148px; height:148px; display:grid; place-items:center; }
.cody-rings span { position:absolute; inset:0; margin:auto; width:148px; height:148px; border-radius:50%; border:1.5px solid #6ea0d733; opacity:0; }
.cody.speaking .cody-rings span { animation:ring 1.8s ease-out infinite; }
.cody.speaking .cody-rings span:nth-child(2){animation-delay:.6s}.cody.speaking .cody-rings span:nth-child(3){animation-delay:1.2s}
@keyframes ring { 0%{transform:scale(.62);opacity:.7} 100%{transform:scale(1.15);opacity:0} }
.cody-face { position:relative; width:112px; height:112px; border-radius:30px; background:linear-gradient(160deg,#dff0a0,#c9e86a); display:flex; align-items:center; justify-content:center; gap:16px; box-shadow:0 14px 40px #0c141d66, inset 0 -6px 14px #a9cc4f55; transition:transform .12s ease; }
.cody.speaking .cody-face { transform:scale(var(--cody-scale, 1)); }
.cody-eye { width:17px; height:17px; border-radius:50%; background:#222; animation:blink 5.2s infinite; }
@keyframes blink { 0%,96%,100%{transform:scaleY(1)} 98%{transform:scaleY(.1)} }
.call-who { text-align:center; }
.call-who h2 { margin:0 0 4px; font-size:25px; letter-spacing:-.04em; }
.call-who p { margin:0; color:#9fb0c4; font-size:13px; }
.call-status { display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:30px; background:#ffffff12; border:1px solid #ffffff1c; font:11px DM Mono, monospace; letter-spacing:.04em; color:#cdd8e6; }
.cs-dot { width:7px; height:7px; border-radius:50%; background:#e8b65a; }
.call-status.live .cs-dot { background:#8fd06a; box-shadow:0 0 0 4px #8fd06a22; animation:pulse 1.8s ease-in-out infinite; }
.call-status.ended .cs-dot { background:var(--coral); }
.caption-wrap { width:100%; max-width:640px; min-height:62px; padding:0 24px; display:flex; align-items:center; justify-content:center; }
.caption { margin:0; text-align:center; font-size:18px; line-height:1.5; letter-spacing:-.02em; color:#eef1f5; opacity:0; transition:opacity .2s; }
.caption.show { opacity:1; }
.call-selfview { position:absolute; right:20px; top:64px; width:104px; height:140px; border-radius:14px; overflow:hidden; background:#0c1119; border:1px solid #ffffff22; box-shadow:0 12px 30px #0009; }
.call-selfview video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.selfview-tag { position:absolute; left:8px; bottom:7px; padding:2px 8px; border-radius:20px; background:#00000066; font:9px DM Mono, monospace; letter-spacing:.08em; color:#dfe6ef; }
.call-controls { display:flex; gap:18px; padding:22px 0 34px; }
.call-btn { display:flex; flex-direction:column; align-items:center; gap:7px; border:0; background:none; cursor:pointer; color:#cdd8e6; font:600 11px Manrope; }
.call-btn .cb-ico { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#ffffff18; font-size:20px; transition:background .15s, transform .15s; }
.call-btn:hover .cb-ico { background:#ffffff28; transform:translateY(-2px); }
.call-btn.mute[aria-pressed="true"] .cb-ico { background:#e8b65a; color:#20221f; }
.call-btn.hangup .cb-ico { background:var(--coral); color:#fff; }
.call-btn.hangup:hover .cb-ico { background:#e05843; }
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:40px;padding:48px 0 44px}.hero-media{max-height:none;max-width:420px;width:100%;margin:0 auto;justify-self:center}.hero-copy h1{font-size:50px}.modal-foot{flex-direction:column-reverse;align-items:stretch}.modal-accept{width:100%!important}.perm-setup{justify-content:center}.call-selfview{width:88px;height:118px;top:58px}}
@media (max-width:800px){.page-shell{width:calc(100% - 36px)}.topbar{height:80px}.topbar-note{font-size:9px}.invite-layout{grid-template-columns:1fr;gap:48px;padding:55px 0 50px}.intro-column h1{font-size:57px}.intro-copy{font-size:15px}.micro-note{margin-top:30px}.card-body{padding:40px 28px}.footer{padding-bottom:20px;font-size:9px}}

.sam-typing { display:inline-flex; align-items:center; gap:9px; margin-top:-8px; font:11px DM Mono, monospace; letter-spacing:.04em; color:var(--lime); }
.sam-typing[hidden] { display:none; }
.st-dots { display:inline-flex; gap:3px; }
.st-dots span { width:5px; height:5px; border-radius:50%; background:var(--lime); animation:stBlink 1.2s ease-in-out infinite; }
.st-dots span:nth-child(2) { animation-delay:.15s; } .st-dots span:nth-child(3) { animation-delay:.3s; }
@keyframes stBlink { 0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-2px)} }

/* Simulated Sam feed: a local portrait keeps the preview useful before a real
   participant joins, while the animated slices make its demo nature clear. */
.sam-video { position:relative; width:min(430px, 78vw); aspect-ratio:640/420; overflow:hidden; border:1px solid #ffffff2b; border-radius:16px; background:#111b28; box-shadow:0 18px 48px #050a1180; isolation:isolate; }
.sam-video img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.88) contrast(1.05); }
.sam-video:after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:repeating-linear-gradient(0deg, #fff0 0 3px, #d7ee680d 4px, #fff0 6px 8px); mix-blend-mode:screen; }
.sam-video-meta { position:absolute; z-index:4; inset:12px 13px auto; display:flex; justify-content:space-between; color:#dfe8f1; font:10px DM Mono,monospace; letter-spacing:.08em; text-shadow:0 1px 3px #000; }
.sam-video-live { display:flex; align-items:center; gap:6px; }.sam-video-live i { width:6px; height:6px; display:block; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px #f06d5930; animation:pulse 1.5s ease-in-out infinite; }
.sam-video-scan { position:absolute; z-index:3; left:0; right:0; height:2px; top:-4px; background:#d7ee68a8; box-shadow:0 0 14px #d7ee68; animation:scan 3.8s linear infinite; }
.sam-video-glitch { position:absolute; z-index:3; left:-3%; width:106%; pointer-events:none; opacity:0; mix-blend-mode:screen; background:#f06d59; }
.glitch-a { top:33%; height:12px; animation:glitchA 6s steps(1,end) infinite; }.glitch-b { top:68%; height:7px; background:#62c9ed; animation:glitchB 4.5s steps(1,end) infinite; }
@keyframes scan { from { transform:translateY(0); } to { transform:translateY(430px); } }
@keyframes glitchA { 0%,91%,100% { opacity:0; transform:translateX(0); } 92% { opacity:.7; transform:translateX(-16px); } 93% { opacity:.45; transform:translateX(22px); } 94% { opacity:0; } }
@keyframes glitchB { 0%,84%,100% { opacity:0; transform:translateX(0); } 85% { opacity:.55; transform:translateX(18px); } 86% { opacity:.3; transform:translateX(-10px); } 87% { opacity:0; } }
@media (max-width:600px) { .sam-video { width:min(390px, 90vw); } }
.sam-video img.expression-change { animation: expressionChange .32s steps(2,end); }
@keyframes expressionChange { 0% { filter:saturate(.88) contrast(1.05); transform:translateX(0); } 35% { filter:saturate(1.4) contrast(1.35) hue-rotate(18deg); transform:translateX(-3px); } 70% { filter:saturate(.75) contrast(1.4); transform:translateX(3px); } 100% { filter:saturate(.88) contrast(1.05); transform:translateX(0); } }
.home-signup { flex:1; display:grid; grid-template-columns:1fr 430px; align-items:center; gap:88px; padding:84px 8.5% 70px; border-bottom:1px solid var(--line); }
.home-copy h1 { margin:22px 0 26px; font-size:clamp(52px, 6vw, 84px); letter-spacing:-.085em; line-height:.94; font-weight:700; }.home-copy h1 em { color:var(--coral); font-style:normal; }.home-lead { max-width:480px; color:#605f58; font-size:17px; line-height:1.68; letter-spacing:-.02em; }.home-benefits { display:flex; flex-direction:column; gap:14px; margin-top:30px; }.home-benefits > div { display:flex; align-items:center; gap:13px; }.home-benefits p { display:flex; flex-direction:column; gap:2px; margin:0; }.home-benefits strong { font-size:14px; }.home-benefits small { color:#87857c; font-size:13px; }.signup-button { max-width:360px; margin-top:34px; }.home-media { max-height:620px; }
.signup-form { display:flex; flex-direction:column; gap:16px; padding:4px 28px 28px; }.signup-form label:not(.terms-check) { display:flex; flex-direction:column; gap:7px; color:#6f6e66; font:11px DM Mono,monospace; letter-spacing:.04em; text-transform:uppercase; }.signup-form input:not([type="checkbox"]) { width:100%; padding:13px 14px; border:1px solid #e2ddd3; border-radius:6px; background:#fff; color:var(--ink); font:14px Manrope,sans-serif; text-transform:none; letter-spacing:0; outline:none; }.signup-form input:focus { border-color:var(--coral); box-shadow:0 0 0 3px #f06d5922; }.terms-check { display:flex; align-items:flex-start; gap:9px; color:#77756c; font-size:12px; line-height:1.45; }.terms-check input { accent-color:var(--coral); margin-top:3px; }.terms-check a { color:var(--coral); }.signup-success { padding:4px 28px 28px; text-align:center; }.signup-success .success-mark { width:54px; height:54px; display:grid; place-items:center; margin:5px auto 18px; border-radius:50%; background:#e7f3c9; color:#5c7a1e; font-size:29px; font-weight:700; }.signup-success h2 { margin:0 0 10px; font-size:25px; }.signup-success p { margin:0 auto; max-width:390px; color:#77756c; font-size:13px; line-height:1.65; }.signup-success .primary-button { margin-top:24px; }
@media (max-width:860px){.home-signup{grid-template-columns:1fr;gap:40px;padding:48px 0 44px}.home-media{max-height:none;max-width:420px;width:100%;margin:0 auto;justify-self:center}.home-copy h1{font-size:57px}}
.home-video { background:#101820; }
.home-video-layers { position:absolute; inset:0; }
.home-loop-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease-in-out; }
.home-loop-video.active { opacity:1; }
.speaker-toggle { position:absolute; z-index:5; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid #ffffff35; border-radius:30px; color:#fdfbf7; background:rgba(22,20,18,.62); backdrop-filter:blur(8px); cursor:pointer; font:500 11px DM Mono,monospace; letter-spacing:.02em; transition:background .15s,transform .15s; }
.speaker-toggle:hover { background:rgba(22,20,18,.8); transform:translateY(-1px); }.speaker-toggle:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }.speaker-icon { font-size:14px; line-height:1; }.speaker-label { white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .home-loop-video { transition:none; } }