: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)} }
@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}}
@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}}