/* ============================================================ cloneaible — shared design system Light-premium. Used by every page via app.py layout(). All surfaces/lines/ink are variable-driven so the whole site (marketing + dashboard + likeness + admin) is one swappable theme. ============================================================ */ :root{ /* surfaces — page -> raised card -> deeper inset -> deepest */ --bg:#ffffff; --bg2:#f6f8fc; --bg3:#eef2f9; --bg4:#e4eaf3; /* semantic aliases (use these going forward in inline styles) */ --surface:#ffffff; --surface-2:#f6f8fc; --surface-3:#eef2f9; --line:rgba(16,24,48,0.10); --line-2:rgba(16,24,48,0.16); --hover:rgba(16,24,48,0.045); --hover-2:rgba(16,24,48,0.07); --shadow:0 18px 50px rgba(16,24,48,.12); --shadow-sm:0 6px 20px rgba(16,24,48,.08); --border:rgba(16,24,48,0.10); --border2:rgba(16,24,48,0.16); /* accents — deepened for AA contrast on white */ --accent:#2f6bdb; --accent2:#7a45e0; --green:#1f9d63; --amber:#b7791f; /* AA-safe TEXT variants (fills keep the brighter hues above) + themed danger */ --green-text:#157a4c; --amber-text:#8f5e0e; --danger:#b3261e; /* ONE shared brand gradient (blue->indigo->purple) — grades the icon stroke, the icon's filled square, and the wordmark "ai" so the whole lockup reads as one unified system */ --cl-grad:linear-gradient(135deg,#2f6bdb 0%,#5a52ee 50%,#7a45e0 100%); --on-accent:#ffffff; --text:#0e1525; --muted:#54607a; --dim:#6b7488; /* themed chrome (flip per theme so glassy/white surfaces aren't hardcoded) */ --nav-bg:rgba(255,255,255,0.78); --nav-bg-c:rgba(255,255,255,0.92); --glass:rgba(255,255,255,0.92); --glass-strong:rgba(255,255,255,0.96); --input-bg:#ffffff; --shimmer:rgba(255,255,255,0.7); --glow-1:#cfe0ff; --glow-2:#e6d8ff; --glow-op:.6; --display:'Sora',sans-serif; --body:'Manrope',sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --maxw:1140px; --nav-h:68px; } /* ============================== DARK THEME ============================== Intentional dark palette (not an inversion). Applied via . Only variables change — every component re-themes automatically. */ :root[data-theme="dark"]{ --bg:#0b0d12; --bg2:#13161f; --bg3:#1a1e29; --bg4:#232838; --surface:#13161f; --surface-2:#1a1e29; --surface-3:#232838; --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.17); --hover:rgba(255,255,255,0.05); --hover-2:rgba(255,255,255,0.09); --shadow:0 20px 55px rgba(0,0,0,.55); --shadow-sm:0 6px 22px rgba(0,0,0,.4); --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.17); --accent:#6aa3ff; --accent2:#b08bff; --green:#46d49a; --amber:#f0c061; --green-text:#46d49a; --amber-text:#f0c061; --danger:#ff7a70; --on-accent:#08101f; --text:#eef1f6; --muted:#a3acc0; --dim:#8a93a8; --nav-bg:rgba(11,13,18,0.72); --nav-bg-c:rgba(11,13,18,0.92); --glass:rgba(22,26,36,0.9); --glass-strong:rgba(22,26,36,0.96); --input-bg:rgba(255,255,255,0.04); --shimmer:rgba(255,255,255,0.08); --glow-1:#1d3a7a; --glow-2:#3a2a6e; --glow-op:.45; } html{color-scheme:light} html[data-theme="dark"]{color-scheme:dark} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-anchor:none} body.no-scroll{overflow:hidden} a{color:inherit;text-decoration:none} img{max-width:100%} picture{display:contents} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .accent{color:var(--accent)} .accent2{color:var(--accent2)} ::selection{background:rgba(47,107,219,.18);color:var(--text)} /* ---------- scroll-progress bar ---------- */ .progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px rgba(91,155,255,.6);transition:width .08s linear} /* ---------- nav ---------- */ nav.site{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(16px);background:var(--nav-bg);border-bottom:1px solid var(--border);transition:height .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);transition:height .25s var(--ease)} nav.site.condensed{background:var(--nav-bg-c);box-shadow:0 1px 0 var(--line),0 8px 24px rgba(16,24,48,.05)} nav.site.condensed .nav-in{height:56px} .logo{display:flex;align-items:center;gap:11px;flex:none} /* Canonical mark — two overlapping rounded squares (hollow accent square TL + filled accent2 square BR) */ .logo .mark{position:relative;width:27px;height:27px;flex:none} .logo .mark .sq{position:absolute;width:18px;height:18px;border-radius:5px} /* back square: gradient OUTLINE ring (gradient bg clipped to the border via mask) */ .logo .mark .sq1{top:0;left:0;border:2.5px solid transparent;background:var(--cl-grad) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} /* front square: gradient FILL */ .logo .mark .sq2{bottom:0;right:0;background:var(--cl-grad)} /* admin topbar uses the same mark at 24px */ .adm-top .mark .sq{position:absolute;width:16px;height:16px;border-radius:4px} .adm-top .mark .sq1{top:0;left:0;border:2.2px solid transparent;background:var(--cl-grad) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} .adm-top .mark .sq2{bottom:0;right:0;background:var(--cl-grad)} .logo .word{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-0.5px} /* "ai" — same brand gradient as the icon, clipped to the text so the lockup reads as one system */ .logo .word .accent{font-size:1.42em;font-weight:700;letter-spacing:-1px; background:var(--cl-grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} .nav-mid{display:flex;align-items:center;gap:28px} .nav-links{display:flex;align-items:center;gap:26px} .nav-links a{font-family:var(--display);font-weight:600;font-size:14px;color:var(--muted);transition:color .15s} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-right{display:flex;gap:10px;align-items:center} /* "Log in" — clear, separate from Apply */ .nav-login{font-family:var(--display);font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;padding:8px 4px;transition:color .15s} .nav-login:hover{color:var(--accent)} .drawer-login{font-weight:700!important} /* theme toggle (sun/moon) */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--border2);background:var(--surface);cursor:pointer;font-size:16px;line-height:1;transition:background-color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);box-shadow:var(--shadow-sm)} .theme-toggle:hover{background:var(--hover);border-color:var(--line-2);transform:translateY(-1px)} .theme-toggle .tt-ic{display:block} .drawer-tt{width:auto;height:auto;justify-content:flex-start;gap:10px;padding:14px 14px;border-radius:12px;font-weight:600;font-family:var(--display);font-size:15px;color:var(--text);margin-top:8px} .drawer-tt .tt-lbl{font-size:15px} @media(max-width:860px){.theme-toggle.desk{display:none}} /* audience toggle */ .aud{display:inline-flex;padding:3px;border-radius:99px;background:var(--bg3);border:1px solid var(--border)} .aud a{font-family:var(--display);font-weight:600;font-size:13px;padding:6px 14px;border-radius:99px;color:var(--muted);transition:background-color .18s var(--ease),color .18s var(--ease)} .aud a:hover{color:var(--text)} .aud a.on{color:var(--on-accent);background:var(--accent)} .aud a.on.biz{color:var(--on-accent);background:var(--accent2)} /* Logged-in: hide every "apply" CTA + the apply form sections (the creator is already onboarding; the header, drawer + mobile sticky bar show Dashboard / Log out instead). Covers hero, guides, who-it-for, business + pricing apply buttons via href, and the two apply
s. */ body[data-auth=in] a.btn[href$="#apply"], body[data-auth=in] a.btn[href$="#apply-business"], body[data-auth=in] section#apply, body[data-auth=in] section#apply-business{display:none!important} .nav-hi{color:var(--muted);font-family:var(--display);font-weight:600;font-size:13px;margin-right:6px} .nav-right .nav-logout .btn{padding:8px 14px;font-size:13px} .drawer .nav-logout{width:100%;margin-top:6px}.drawer .nav-logout .btn{width:100%} /* hamburger */ .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--border2);border-radius:11px;background:transparent;cursor:pointer;flex:none} .burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;margin:0 auto;transition:.25s var(--ease)} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile drawer */ .drawer{position:fixed;inset:var(--nav-h) 0 0;z-index:95;background:var(--glass-strong);backdrop-filter:blur(8px);transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;padding:28px 24px;display:flex;flex-direction:column;gap:6px;overflow-y:auto} .drawer.open{opacity:1;transform:none;visibility:visible;pointer-events:auto} .drawer a{font-family:var(--display);font-weight:600;font-size:18px;color:var(--text);padding:14px 4px;border-bottom:1px solid var(--border)} .drawer .aud{margin:14px 0 4px;align-self:flex-start} .drawer .btn{margin-top:14px;text-align:center} /* buttons */ .btn{font-family:var(--display);font-weight:600;font-size:15px;padding:11px 22px;border-radius:11px;border:1px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);display:inline-block;text-align:center} .btn{box-shadow:var(--shadow-sm)} .btn:hover{background:var(--hover);border-color:var(--line-2)} .btn-pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 8px 22px rgba(47,107,219,.28)} .btn-pri:hover{background:#255cc6;border-color:#255cc6} .btn-bizpri{background:var(--accent2);border-color:var(--accent2);color:var(--on-accent);box-shadow:0 8px 22px rgba(122,69,224,.26)} .btn-bizpri:hover{background:#6a39c9;border-color:#6a39c9} .btn-biz{border-color:rgba(122,69,224,.4);color:var(--accent2);background:var(--surface)} .btn-biz:hover{background:rgba(122,69,224,.07);border-color:rgba(122,69,224,.6)} .btn-lg{font-size:16px;padding:15px 30px} .btn-block{display:block;width:100%} /* thumb-reachable sticky mobile CTA */ .mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--glass-strong),var(--glass) 70%,transparent);backdrop-filter:blur(8px);gap:10px} .mcta .btn{flex:1} /* ---------- generic section ---------- */ section{position:relative} .sec{padding:84px 0} .sec-sm{padding:56px 0} .sec-head{text-align:center;max-width:680px;margin:0 auto 54px} .sec-head.left{text-align:left;margin-left:0} .kicker{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .kicker.biz{color:var(--accent2)} h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,6.6vw,78px);line-height:1.03;letter-spacing:-0.03em;margin-bottom:24px} h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-0.02em;margin-bottom:16px} h3{font-family:var(--display);font-weight:600;letter-spacing:-0.01em} .grad{background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .grad-biz{background:linear-gradient(100deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .sec-head p,.lead{font-size:17px;color:var(--muted)} /* glows / aurora */ .glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:var(--glow-op);pointer-events:none;z-index:0} .glow1{width:540px;height:540px;background:var(--glow-1);top:-180px;left:-120px} .glow2{width:460px;height:460px;background:var(--glow-2);top:-60px;right:-140px} .hero{position:relative;padding:104px 0 78px;text-align:center;overflow:hidden} .hero .wrap{position:relative;z-index:2} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:rgba(91,155,255,0.1);border:1px solid rgba(91,155,255,0.25);padding:7px 15px;border-radius:999px;margin-bottom:28px} .eyebrow.biz{color:var(--accent2);background:rgba(155,109,255,0.12);border-color:rgba(155,109,255,0.3)} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:pulse 1.6s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.55)}70%{box-shadow:0 0 0 9px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}} .sub{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:640px;margin:0 auto 36px;line-height:1.5} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .trust{margin-top:24px;font-size:14px;color:var(--dim)} .statrow{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:56px} .stat .n{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,40px);line-height:1} .stat .l{font-size:13px;color:var(--dim);margin-top:8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em} /* ---------- brand proof strip (STYLED TEXT only — no logos) ---------- */ .proof{margin-top:54px;padding-top:32px;border-top:1px solid var(--border)} .proof-lbl{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:20px} .proof-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 32px} .proof-name{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.8vw,19px);letter-spacing:-0.01em;color:var(--muted);opacity:.66;transition:.2s var(--ease)} .proof-name:hover{opacity:1;color:var(--text)} /* ---------- trust strip (credentials + signed brands, near hero) ---------- */ .tstrip{margin-top:48px;padding-top:30px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:18px;align-items:center} .tstrip-creds{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px} .tcred{font-family:var(--display);font-weight:600;font-size:13px;color:var(--text);background:rgba(95,211,154,.1);border:1px solid rgba(95,211,154,.3);padding:6px 14px;border-radius:99px;display:inline-flex;align-items:center;gap:8px} .tcred:before{content:"✓";color:var(--green);font-weight:800} .tstrip-names{display:flex;flex-direction:column;align-items:center;gap:12px} .tstrip-lbl{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} /* ---------- SEO guide cards ---------- */ a.gcard{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:26px 24px;transition:transform .2s var(--ease),border-color .2s var(--ease)} a.gcard:hover{border-color:var(--border2);transform:translateY(-3px)} a.gcard h3{font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:8px;line-height:1.25} a.gcard p{font-size:14px;color:var(--muted);line-height:1.55;flex:1} a.gcard .more{font-family:var(--display);font-weight:600;font-size:13px;color:var(--accent);margin-top:14px} a.gcard.biz .more{color:var(--accent2)} /* ---------- consent flow module (/business) ---------- */ .consent-flow{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap} .consent-flow .cstep{flex:1;min-width:220px;max-width:300px;background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:28px 24px} .consent-flow .cnum{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--on-accent);background:var(--accent2);margin-bottom:14px} .consent-flow .cstep h3{font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:8px} .consent-flow .cstep p{font-size:14px;color:var(--muted);line-height:1.55} .consent-flow .carrow{display:flex;align-items:center;color:var(--accent2);font-size:24px;font-weight:700} @media(max-width:760px){.consent-flow .carrow{display:none}} /* green "live" pulse — used by .hh-badge .erdot */ @keyframes pulse-g{0%{box-shadow:0 0 0 0 rgba(95,211,154,.5)}70%{box-shadow:0 0 0 7px rgba(95,211,154,0)}100%{box-shadow:0 0 0 0 rgba(95,211,154,0)}} /* ---------- earnings calculator ---------- */ .calc{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden} .calc-l .kicker,.calc-l h2{margin-bottom:14px} .calc-l p{font-size:16px;color:var(--muted)} .calc-r{text-align:center} .calc-out{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,52px);background:linear-gradient(100deg,var(--accent),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1} .calc-out-lbl{font-size:14px;color:var(--dim);margin-top:4px} .calc-curve{width:100%;height:74px;margin-top:18px;overflow:visible} .calc-curve path.area{fill:url(#calcfill);opacity:.5} .calc-curve path.line{fill:none;stroke:url(#calcstroke);stroke-width:2.5;stroke-linecap:round} .slider-row{margin-top:22px;text-align:left} .slider-row label{font-size:14px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:12px;font-family:var(--display);font-weight:600} .slider-row label b{color:var(--text)} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(16,24,48,.22);transition:transform .12s var(--ease)} input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)} input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:none;cursor:pointer} .calc-note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55} .calc-note b{color:var(--amber);font-weight:700} .illus{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--amber);background:rgba(255,207,107,.1);border:1px solid rgba(255,207,107,.3);padding:5px 11px;border-radius:99px;margin-bottom:16px} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .step{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:32px 26px;transition:.22s var(--ease)} .step:hover{border-color:var(--border2);transform:translateY(-3px)} .step .no{font-family:var(--display);font-weight:800;font-size:15px;color:var(--accent);letter-spacing:.05em;margin-bottom:18px} .step.biz .no{color:var(--accent2)} .step h3{font-size:21px;margin-bottom:11px} .step p{font-size:15px;color:var(--muted);line-height:1.6} /* ---------- 'made' / vibe ---------- */ .vibe{text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .vibe-lbl{font-size:14px;color:var(--muted);font-family:var(--display);font-weight:600} .vibe-chip{font-family:var(--display);font-weight:600;font-size:13px;padding:8px 16px;border-radius:99px;background:rgba(47,107,219,.08);border:1px solid rgba(47,107,219,.22);color:var(--accent)} .made{display:flex;gap:18px;flex-wrap:wrap;justify-content:center} .madestep{flex:1;min-width:200px;max-width:250px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:26px 22px;text-align:center} .madestep .ic{width:46px;height:46px;border-radius:12px;background:rgba(91,155,255,.12);border:1px solid rgba(91,155,255,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px} .madestep h3{font-size:17px;margin-bottom:8px}.madestep p{font-size:14px;color:var(--muted)} /* ---------- control / chips ---------- */ .control{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .chips{display:flex;flex-wrap:wrap;gap:11px} .chip{font-family:var(--display);font-weight:600;font-size:14px;padding:10px 17px;border-radius:11px;display:inline-flex;align-items:center;gap:8px} .chip.on{background:rgba(95,211,154,0.12);border:1px solid rgba(95,211,154,0.3);color:var(--green)} .chip.off{background:var(--bg3);border:1px solid var(--border);color:var(--dim)} .control h2{margin-bottom:16px} .control .ctext p{font-size:17px;color:var(--muted);margin-bottom:14px} /* ---------- who / generic card grid ---------- */ .who,.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .wc{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:30px 26px} .wc .em{font-family:var(--display);font-weight:700;font-size:18px;color:var(--accent);margin-bottom:12px} .wc h3{font-size:19px;margin-bottom:9px}.wc p{font-size:14px;color:var(--muted)} /* ---------- roster ---------- */ .roster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .roster.three{grid-template-columns:repeat(3,1fr)} .rcard{background:var(--bg2);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);will-change:transform} .rcard:hover{border-color:var(--border2);box-shadow:var(--shadow)} .rcard .ph{position:relative;aspect-ratio:1/1;overflow:hidden} .rcard .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)} .rcard:hover .ph img{transform:scale(1.05)} .rcard-body{padding:16px 18px 20px} .rname{font-family:var(--display);font-weight:700;font-size:18px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .lic{font-family:var(--display);font-weight:600;font-size:11px;padding:3px 9px;border-radius:99px;background:rgba(155,109,255,.16);color:var(--accent2);border:1px solid rgba(155,109,255,.38);letter-spacing:.02em;white-space:nowrap} .rvibe{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .rtag{font-family:var(--display);font-weight:600;font-size:11px;color:var(--muted);background:var(--bg3);border:1px solid var(--border);padding:4px 10px;border-radius:99px} .rclear{font-size:12px;color:var(--dim);margin-top:12px;display:flex;align-items:center;gap:6px} .rclear b{color:var(--green-text);font-weight:700} /* ---------- flagship card / real-vs-AI ---------- */ .flagship{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--border2);border-radius:26px;padding:36px;overflow:hidden} .flagship .fimg{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5} .flagship .fimg img{width:100%;height:100%;object-fit:cover;display:block} .verified{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:12px;padding:6px 12px;border-radius:99px;background:rgba(91,155,255,.9);color:var(--on-accent);backdrop-filter:blur(4px)} .flagship .fq{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.4vw,24px);line-height:1.4;letter-spacing:-0.01em;margin:6px 0 18px} .flagship .fq:before{content:"“";color:var(--accent);font-size:1.4em;line-height:0;vertical-align:-0.3em;margin-right:2px} .flagship .fby{font-size:14px;color:var(--muted);margin-bottom:22px} /* ---------- pricing ---------- */ .biz{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} .tier{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:34px 28px;display:flex;flex-direction:column;transition:.22s var(--ease)} .tier:hover{transform:translateY(-3px)} .tier.pop{border:2px solid var(--accent2);position:relative} .tier .poptag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent2);color:var(--on-accent);font-family:var(--display);font-weight:700;font-size:12px;padding:5px 14px;border-radius:999px} .tier .tname{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:6px} .tier .tfor{font-size:14px;color:var(--muted);margin-bottom:20px} .tier .price{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;margin-bottom:2px} .tier .price-custom{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.15;margin-bottom:4px;color:var(--text)} .tier .price small{font-family:var(--body);font-weight:600;font-size:15px;color:var(--dim)} .tier .pricesub{font-size:13px;color:var(--dim);margin-bottom:22px} .tier .est{font-size:11px;color:var(--amber-text);margin-bottom:20px;font-family:var(--display);font-weight:600} .tier ul{list-style:none;margin-bottom:26px;flex:1} .tier li{font-size:14px;color:var(--muted);padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--border)} .tier li:first-child{border-top:none} .tier li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700} .tier .btn{width:100%} /* credit mechanic */ .credits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px} .credit{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center} .credit .ic{font-size:26px;margin-bottom:12px} .credit h4{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:7px} .credit p{font-size:13px;color:var(--muted)} .creditflow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px;color:var(--dim)} .creditflow .arr{color:var(--accent2);font-size:18px} /* ---------- FAQ ---------- */ .faq{max-width:780px;margin:0 auto} .qa{border-bottom:1px solid var(--border);padding:22px 0} .qa summary{font-family:var(--display);font-weight:600;font-size:18px;display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none} .qa summary::-webkit-details-marker{display:none} .qa summary .q{color:var(--accent);font-weight:800} .qa summary .chev{margin-left:auto;color:var(--dim);transition:transform .2s var(--ease)} .qa[open] summary .chev{transform:rotate(180deg)} .qa p{font-size:15px;color:var(--muted);padding:12px 0 0 27px} /* ---------- forms / apply ---------- */ .apply{padding:92px 0} .applycard{background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--border2);border-radius:26px;padding:56px 52px;max-width:680px;margin:0 auto;text-align:center;position:relative;overflow:hidden} .applycard h2{margin-bottom:14px} .applycard>p{font-size:17px;color:var(--muted);margin-bottom:30px;max-width:480px;margin-left:auto;margin-right:auto} .form{display:grid;gap:14px;max-width:480px;margin:0 auto;text-align:left;position:relative;z-index:2} .form label{font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted);margin-bottom:-7px} .form input,.form select,.form textarea{font-family:var(--body);font-size:15px;padding:14px 16px;border-radius:12px;border:1px solid var(--border2);background:var(--input-bg);color:var(--text);outline:none;transition:.16s var(--ease);width:100%;box-shadow:inset 0 1px 2px rgba(16,24,48,.04)} .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,155,255,0.16)} .form.biz input:focus,.form.biz select:focus,.form.biz textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(155,109,255,0.16)} .form input.bad,.form select.bad{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.14)} .form input::placeholder,.form textarea::placeholder{color:var(--dim)} .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .handle-row{display:flex;gap:8px} .handle-row select{flex:0 0 130px}.handle-row input{flex:1} .addhandle{font-family:var(--display);font-weight:600;font-size:13px;color:var(--accent);cursor:pointer;background:none;border:none;text-align:left;padding:12px 4px;margin:-6px 0} .form .btn{margin-top:8px;padding:15px;font-size:16px} .form-err{color:var(--danger);font-size:13px;font-family:var(--display);font-weight:600;min-height:1px} .fnote{font-size:12px;color:var(--dim);margin-top:4px} .success{display:none;padding:14px 0} .success.show{display:block;animation:pop .5s var(--ease)} @keyframes pop{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}} .success .ck{width:64px;height:64px;border-radius:50%;background:rgba(95,211,154,0.14);border:1px solid rgba(95,211,154,0.4);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px} .success.biz .ck{background:rgba(155,109,255,.14);border-color:rgba(155,109,255,.4);color:var(--accent2)} .success h3{font-size:26px;margin-bottom:10px}.success p{color:var(--muted);font-size:16px} /* ---------- prose (legal/about) ---------- */ .prose{max-width:760px;margin:0 auto} .prose h2{font-size:26px;margin:38px 0 14px} .prose h3{font-size:19px;margin:26px 0 10px;color:var(--text)} .prose p,.prose li{font-size:16px;color:var(--muted);margin-bottom:14px;line-height:1.7} .prose ul{padding-left:22px;margin-bottom:14px} .prose a{color:var(--accent)} .draft-banner{display:inline-flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);color:var(--dim);font-family:var(--display);font-weight:600;font-size:12px;padding:6px 12px;border-radius:99px;margin-bottom:24px} /* ---------- consent capture: choice groups + scroll-to-agree ---------- */ .cgroup{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px} .cgroup.col{flex-direction:column} .copt{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--body);font-weight:500;font-size:14px;color:var(--text);background:var(--input-bg);border:1px solid var(--border2);border-radius:11px;padding:11px 14px;cursor:pointer;transition:.16s var(--ease)} .copt:hover{border-color:var(--accent)} .copt input{width:auto!important;margin:0;accent-color:var(--accent)} .scrollbox{max-height:240px;overflow-y:auto;border:1px solid var(--border2);border-radius:14px;background:var(--bg2);padding:18px 20px;font-size:13.5px;line-height:1.6;color:var(--muted)} .scrollbox:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,155,255,.16);outline:none} .scrollbox.read{border-color:rgba(95,211,154,.5)} .scrollbox h4{font-family:var(--display);color:var(--text);font-size:14px;margin:16px 0 6px} .scrollbox h4:first-of-type{margin-top:0} .scrollbox p{margin-bottom:10px} .agree-end{text-align:center;color:var(--dim);font-style:italic;margin-top:14px} .btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.3)} .btn:not([disabled]){opacity:1;cursor:pointer} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--border);padding:56px 0 40px;margin-top:20px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px} .foot-brand .logo{margin-bottom:14px} .foot-brand p{font-size:14px;color:var(--muted);max-width:280px} .foot-col h5{font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);margin-bottom:14px} .foot-col a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .15s} .foot-col a:hover{color:var(--text)} .foot-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;border-top:1px solid var(--border)} .foot-bot .tag{font-size:13px;color:var(--dim)} /* ---------- reveal / motion base (full reduced-motion fallback below) ---------- */ .rv{opacity:0;transform:translateY(24px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .rv.in{opacity:1;transform:none} [data-stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .35s var(--ease),transform .35s var(--ease)} [data-stagger].in>*{opacity:1;transform:none} /* branded loader */ #loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s var(--ease),visibility .5s} #loader.done{opacity:0;visibility:hidden} /* 404 */ .e404{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px} .e404 .big{font-family:var(--display);font-weight:800;font-size:clamp(90px,18vw,180px);line-height:1;letter-spacing:-.04em} /* ============================ TIER 3 MOTION ============================ */ /* aurora drift — subtle, always-on gradient-mesh depth */ .glow.aurora{animation:drift 22s var(--ease) infinite alternate;will-change:transform} .glow1.aurora{animation-duration:24s} .glow2.aurora{animation-duration:30s;animation-delay:-6s} @keyframes drift{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,28px) scale(1.12)} 100%{transform:translate(-30px,18px) scale(1.04)} } /* 3D tilt cards */ .tilt{transform-style:preserve-3d;will-change:transform} .tilt .ph{transform:translateZ(0)} /* nav is position:fixed (decoupled from flow so its condense shrink can't reflow the page); this constant spacer reserves the UNCONDENSED nav height (68px nav-in + 1px border) and never changes when .condensed toggles, so content scrolls 1:1 with zero jump. */ main{padding-top:calc(var(--nav-h) + 1px);transition:opacity .42s var(--ease),transform .42s var(--ease)} /* float loop (flagship + opt-in) */ .floaty{animation:floaty 6s var(--ease) infinite alternate;will-change:transform} @keyframes floaty{0%{transform:translateY(0)}100%{transform:translateY(-10px)}} @media(prefers-reduced-motion:reduce){ .glow.aurora,.floaty{animation:none!important} main{transition:none!important} } /* ---------- responsive ---------- */ @media(max-width:960px){ .roster{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} } @media(max-width:860px){ .nav-mid,.nav-right .desk,.nav-right .aud{display:none} .burger{display:flex} .calc,.control,.flagship{grid-template-columns:1fr;gap:30px} .steps,.who,.cardgrid,.tiers,.credits{grid-template-columns:1fr} .calc{padding:32px 24px} .applycard{padding:40px 22px} .sec{padding:58px 0} .form .row2{grid-template-columns:1fr} .mcta{display:flex} body{padding-bottom:0} .foot-grid{grid-template-columns:1fr 1fr;gap:24px} } @media(max-width:430px){ .hero{padding:80px 0 60px} .statrow{gap:26px} .foot-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .rv,[data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important} #loader{display:none!important} .eyebrow .dot{animation:none} } /* ---------- public-readiness pass (2026-06-27): protections grid, onboarding card, solo hero ---------- */ .prots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .prot{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px 22px} .prot-ic{font-size:24px;line-height:1;margin-bottom:12px} .prot h3{font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:8px} .prot p{font-size:14px;color:var(--muted);line-height:1.6} .rcard-soon .soon-ph{display:flex;align-items:center;justify-content:center;text-align:center;min-height:210px;background:linear-gradient(135deg,rgba(91,155,255,.08),rgba(155,109,255,.08));border:1px dashed var(--border2);color:var(--muted);font-family:var(--display);font-weight:600;font-size:14px;line-height:1.5} @media(max-width:860px){ .prots{grid-template-columns:1fr 1fr;gap:14px} } @media(max-width:560px){ .prots{grid-template-columns:1fr} } /* ---------- guided wizard step indicator ---------- */ .wiz{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 20px;flex-wrap:wrap} .wiz-step{display:flex;align-items:center;gap:8px;opacity:.5;transition:opacity .2s var(--ease)} .wiz-step.on,.wiz-step.done{opacity:1} .wiz-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%; font-family:var(--display);font-weight:700;font-size:13px;background:var(--surface);border:1.5px solid var(--border2);color:var(--muted)} .wiz-step.on .wiz-num{background:var(--cl-grad);border-color:transparent;color:#fff} .wiz-step.done .wiz-num{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:transparent;color:var(--accent)} .wiz-label{font-family:var(--display);font-weight:600;font-size:13px;color:var(--text)} .wiz-sep{width:26px;height:2px;border-radius:2px;background:var(--border2)} /* ---------- likeness capture (mobile-first) ---------- */ .lk-card{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:24px 20px;margin-bottom:18px} .lk-footer{text-align:center} .lk-advance{min-width:240px} a.lk-advance.is-disabled,a.lk-advance[aria-disabled=true]{opacity:.45;pointer-events:none;cursor:default} .lk-advance-hint{text-align:center} .lk-textlink{background:none;border:0;color:var(--accent);font-family:var(--body);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:12px 8px} .lk-textlink:hover{filter:brightness(1.1)} .lk-uploadrow{text-align:center;margin-top:14px} .lk-card h3{font-family:var(--display);font-weight:700;font-size:19px;margin:4px 0 8px} .lk-step{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)} .lk-help{font-size:14px;color:var(--muted);line-height:1.6} .lk-err{background:color-mix(in srgb,var(--danger) 8%,transparent);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:14px} .lk-stage{position:relative;width:100%;max-width:300px;max-height:48vh;margin:12px auto;aspect-ratio:3/4;background:#05060a;border-radius:16px;overflow:hidden;border:1px solid var(--border2)} .lk-stage #lkVideo{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)} .lk-stage #lkOverlay{position:absolute;inset:0;width:100%;height:100%} .lk-guide{position:absolute;left:0;right:0;bottom:0;padding:10px;text-align:center;font-size:13px;color:#cfd4e0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)} .lk-prompt{text-align:center;font-size:15px;margin-top:6px}.lk-prompt b{color:var(--text)} .lk-count{text-align:center;font-size:13px;color:var(--muted);margin-top:8px;font-family:var(--display);font-weight:600} .lk-debug{text-align:center;font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--muted);background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:7px 14px;margin-top:10px;word-break:break-word;display:inline-flex;align-items:center;gap:7px} .lk-tips{background:rgba(91,155,255,.08);border:1px solid rgba(91,155,255,.3);border-radius:12px;padding:14px 16px;margin:14px 0} .lk-tips-h{font-family:var(--display);font-weight:700;font-size:13px;color:var(--text);margin-bottom:8px} .lk-tips ul{margin:0;padding-left:2px;list-style:none} .lk-tips li{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:5px} .lk-thumbs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px} .lk-thumb{position:relative;width:72px;text-align:center} .lk-thumb img{width:72px;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--border2)} .lk-thumb span{display:block;font-size:11px;color:var(--muted);margin-top:3px} .lk-thumb-x{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;border:0;background:#e0556a;color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(16,24,48,.16)} .lk-thumb-x::after{content:"";position:absolute;inset:-8px} .lk-pulse{animation:lkpulse 1.1s ease-in-out infinite} @keyframes lkpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} .lk-snaprow{text-align:center;margin-top:14px} .lk-snap{min-width:190px;font-size:16px;padding:14px 30px} .lk-upload{margin-top:20px;border-top:1px solid var(--border);padding-top:16px;text-align:center} .lk-upload-h{font-family:var(--display);font-weight:700;font-size:14px;color:var(--text);margin-bottom:2px} .lk-uploadbtn{cursor:pointer;display:inline-block} .lk-script{background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:8px 18px;margin:14px 0;max-height:240px;overflow:auto} .lk-line{padding:11px 0;border-bottom:1px solid var(--border)} .lk-line:last-child{border-bottom:0} .lk-delivery{display:block;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:4px} .lk-say{display:block;color:var(--text);line-height:1.6;font-size:16px} .lk-rec{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .lk-timer{font-family:var(--display);font-weight:700;font-size:18px;color:var(--muted);min-width:54px} .lk-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)} .lk-submit{text-align:center} @media(max-width:560px){.lk-stage{max-width:100%}} /* ============================================================ HOME — light, imagery-forward redesign (reference design language) ============================================================ */ /* split hero: copy left, large human portrait right */ .hh-hero{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center;padding:52px 0 30px} .hh-copy{position:relative;z-index:2} .hh-copy .eyebrow{margin-bottom:22px} .hh-copy h1{margin-bottom:20px} .hh-copy .sub{margin:0 0 30px;max-width:520px} .hh-cta{display:flex;gap:14px;flex-wrap:wrap} .hh-trust{margin-top:24px;font-size:14px;color:var(--dim);display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap} .hh-trust .ok{display:inline-flex;align-items:center;gap:7px} .hh-trust .ok:before{content:"✓";color:var(--green);font-weight:800} .hh-figure{position:relative} .hh-portrait{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--bg2)} .hh-portrait img{width:100%;height:100%;object-fit:cover;display:block} .hh-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:7px;background:var(--glass);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-family:var(--display);font-weight:700;font-size:12px;color:var(--text);box-shadow:var(--shadow-sm)} .hh-badge .erdot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(31,157,99,.5);animation:pulse-g 1.8s infinite} .hh-chip{position:absolute;bottom:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--glass);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:18px;padding:13px 16px;box-shadow:var(--shadow)} .hh-chip .who{display:block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2} .hh-chip .who span{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted)} .hh-chip .amt{text-align:right;white-space:nowrap} .hh-chip .amt b{font-family:var(--display);font-weight:800;font-size:16px;color:var(--green)} .hh-chip .amt span{display:block;font-size:11px;color:var(--dim)} /* alternating tinted band for section rhythm */ .band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* image-led split block */ .imgsplit{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .imgsplit-copy .kicker{margin-bottom:14px} .imgsplit-copy p{font-size:17px;color:var(--muted);line-height:1.6;margin-bottom:16px} .imgsplit-media{position:relative} .imgsplit-media .hh-portrait{aspect-ratio:5/6} /* photo placeholder (where the owner drops real human imagery) */ .imgph{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px dashed var(--line-2);display:flex;align-items:center;justify-content:center;text-align:center} .imgph.ar45{aspect-ratio:4/5}.imgph.ar54{aspect-ratio:5/4}.imgph.ar11{aspect-ratio:1/1} .imgph .imgph-l{font-family:var(--display);font-weight:600;font-size:13px;color:var(--dim);padding:0 22px;line-height:1.5} .imgph .imgph-l .em{display:block;font-size:26px;margin-bottom:8px;opacity:.65} .facerow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:860px){ .hh-hero{grid-template-columns:1fr;gap:34px;padding:30px 0 6px;text-align:center} .hh-copy .sub{margin-left:auto;margin-right:auto} .hh-cta,.hh-trust{justify-content:center} .hh-figure{max-width:400px;margin:0 auto;width:100%} .imgsplit{grid-template-columns:1fr;gap:30px} .imgsplit-media{order:-1;max-width:420px;margin:0 auto;width:100%} } @media(max-width:560px){.facerow{grid-template-columns:1fr 1fr}} /* ============================================================ BRANDED LOADER + PROCESSING COMPONENT (the two-square mark) Built FROM our canonical mark — the same two rounded squares as the header/favicon. Inspiration (not a copy) from calm studio loaders: the squares gently DRIFT toward each other and apart, BREATHE in counter-phase, and the filled square GLOWS as they overlap — a smooth infinite loop that reads as "working" without a frozen bar. Our shape, our colours. ============================================================ */ .cl-squares{position:relative;display:block;width:var(--dsz,76px);height:var(--dsz,76px)} .cl-squares .sq{position:absolute;width:62%;height:62%;border-radius:calc(var(--dsz,76px)*.14);will-change:transform,filter,opacity} .cl-squares .sq1{top:0;left:0;border:calc(var(--dsz,76px)*.055) solid transparent;background:var(--cl-grad) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;animation:cl-sqA 3.2s ease-in-out infinite} .cl-squares .sq2{bottom:0;right:0;background:var(--cl-grad);animation:cl-sqB 3.2s ease-in-out infinite} /* hollow square drifts down-right toward centre while growing; */ @keyframes cl-sqA{0%,100%{transform:translate(0,0) scale(.96);opacity:.82} 50%{transform:translate(15%,15%) scale(1.05);opacity:1}} /* filled square drifts up-left toward centre, easing smaller and glowing as the two overlap */ @keyframes cl-sqB{0%,100%{transform:translate(0,0) scale(1.05);filter:drop-shadow(0 0 0 transparent)} 50%{transform:translate(-15%,-15%) scale(.96);filter:drop-shadow(0 0 calc(var(--dsz,76px)*.16) color-mix(in srgb,var(--accent2) 70%,transparent))}} /* processing block — constant diamond anchor + swappable caption + honest progress */ .cl-proc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center} .cl-proc-cap{font-family:var(--display);font-weight:700;font-size:19px;color:var(--text);min-height:1.2em;transition:opacity .18s var(--ease)} .cl-proc-sub{font-size:14px;color:var(--muted);max-width:400px;min-height:1.1em;transition:opacity .18s var(--ease)} .cl-proc-cap.fade,.cl-proc-sub.fade{opacity:0} .cl-proc-bar{position:relative;width:100%;max-width:520px;height:8px;border-radius:99px;background:var(--bg3);overflow:hidden;box-shadow:inset 0 1px 2px rgba(16,24,48,.06)} .cl-proc-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--cl-grad);transition:width .6s var(--ease)} .cl-proc-bar.indeterminate i{width:38%;animation:cl-indet 1.5s var(--ease) infinite} @keyframes cl-indet{0%{left:-40%}100%{left:100%}} .cl-proc-pct{font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);letter-spacing:.03em} .cl-flash{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--dsz,76px);height:var(--dsz,76px);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 62%);opacity:0;pointer-events:none} .cl-proc.is-done .cl-squares .sq{animation-duration:5s} .cl-proc.is-done .cl-flash{animation:cl-flash .75s var(--ease)} @keyframes cl-flash{0%{opacity:0;transform:translateX(-50%) scale(.5)}40%{opacity:.95}100%{opacity:0;transform:translateX(-50%) scale(1.7)}} /* full-screen processing overlay (voice processing / generation) */ .cl-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:32px;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .42s var(--ease),visibility .42s} .cl-overlay.show{opacity:1;visibility:visible} @media(prefers-reduced-motion:reduce){ .cl-squares .sq,.cl-proc-bar.indeterminate i{animation:none!important} .cl-squares .sq{opacity:1} } /* ============================== VOICE CAPTURE (BB1) ============================== */ .vc-card{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:28px 24px;max-width:660px;margin:0 auto;box-shadow:var(--shadow-sm)} .vc-tiers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px} @media(max-width:480px){.vc-tiers{grid-template-columns:1fr}} .vc-tier{position:relative;border:1px solid var(--border2);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.16s var(--ease);background:var(--surface)} .vc-tier:hover{border-color:var(--accent)} .vc-tier input{position:absolute;opacity:0;inset:0;cursor:pointer} .vc-tier:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,219,.14)} .vc-tier.pro:has(input:checked){border-color:var(--accent2);box-shadow:0 0 0 3px rgba(122,69,224,.14)} .vc-tier .tag{font-family:var(--display);font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em} .vc-tier.pro .tag{color:var(--accent2)} .vc-tier h4{font-family:var(--display);font-weight:700;font-size:16px;margin:5px 0 4px} .vc-tier p{font-size:13px;color:var(--muted);line-height:1.5} .vc-prompt{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:22px;text-align:center;margin:4px 0 18px;min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:10px} .vc-prompt-step{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)} .vc-prompt-text{font-size:17px;line-height:1.55;color:var(--text);transition:opacity .16s var(--ease)} .vc-prompt-text.fade{opacity:0} .vc-meter{position:relative;height:14px;border-radius:99px;background:var(--bg3);overflow:hidden;margin:10px 0 6px;box-shadow:inset 0 1px 2px rgba(16,24,48,.08)} .vc-meter-fill{position:absolute;inset:0 auto 0 0;height:100%;width:0;border-radius:99px;background:var(--cl-grad);transition:width .08s ease-out} .vc-meter-fill.clip{background:linear-gradient(90deg,#7a45e0,#e0556a)} .vc-meter-msg{text-align:center;font-size:13px;color:var(--muted);font-family:var(--display);font-weight:600;min-height:1.2em;margin-bottom:12px} .vc-timer{font-family:var(--display);font-weight:800;font-size:32px;text-align:center;letter-spacing:.02em;color:var(--text)} .vc-bar{height:6px;border-radius:99px;background:var(--bg3);overflow:hidden;margin:12px auto 2px;max-width:320px} .vc-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--cl-grad);transition:width .3s linear} .vc-hint{text-align:center;font-size:12px;color:var(--dim);margin-top:4px} .vc-controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px} .vc-controls .btn.ready{animation:vc-rdy 1.4s var(--ease) infinite} @keyframes vc-rdy{0%,100%{box-shadow:0 8px 22px rgba(47,107,219,.28)}50%{box-shadow:0 8px 30px rgba(47,107,219,.5)}} .vc-card.vc-live{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,219,.10)} /* pre-record guidance */ .vc-guide{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px 14px 18px;margin:0 0 16px} .vc-guide-h{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:8px} .vc-guide ul{list-style:none;margin:0;padding:0;display:grid;gap:7px} .vc-guide li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--muted)} .vc-guide li:before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800} .vc-guide li b{color:var(--text);font-weight:600} /* live meter target green zone + loud state + legend */ .vc-meter .vc-zone{position:absolute;top:0;bottom:0;left:55.5%;width:38%;border-radius:6px;background:color-mix(in srgb,var(--green) 26%,transparent);border-left:1px solid color-mix(in srgb,var(--green) 55%,transparent);border-right:1px solid color-mix(in srgb,var(--green) 55%,transparent);z-index:0;pointer-events:none} .vc-meter-fill{z-index:1} .vc-meter-fill.loud{background:linear-gradient(90deg,#7a45e0,var(--amber))} .vc-meter-legend{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);font-family:var(--display);font-weight:600;margin:2px 2px 6px} .vc-meter-legend .vc-zone-lbl{color:var(--green)} /* post-record quality gate */ .vc-gate{margin-top:14px;border-radius:16px;padding:16px 18px;border:1px solid var(--border2);background:var(--surface)} .vc-gate.pass{border-color:color-mix(in srgb,var(--green) 45%,transparent);background:color-mix(in srgb,var(--green) 9%,var(--surface))} .vc-gate.fail{border-color:color-mix(in srgb,var(--amber) 50%,transparent);background:color-mix(in srgb,var(--amber) 9%,var(--surface))} .vc-gate-verdict{font-family:var(--display);font-weight:800;font-size:16px} .vc-gate-verdict.pass{color:var(--green)} .vc-gate-verdict.fail{color:var(--amber)} .vc-gate-fix{margin-top:6px;font-size:14px;font-weight:600;color:var(--text)} .vc-gate-more{margin-top:4px;font-size:12.5px;color:var(--muted)} .vc-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .vc-metric{display:flex;flex-direction:column;gap:2px;padding:7px 11px;border-radius:10px;background:var(--bg);border:1px solid var(--border);min-width:84px} .vc-metric .vc-metric-l{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);font-family:var(--display);font-weight:600} .vc-metric b{font-size:13.5px;font-weight:700;color:var(--text)} .vc-metric.ok b{color:var(--green)} .vc-metric.warn b{color:var(--amber)} .vc-metric.bad b{color:#e0556a} .vc-metric.ok{border-color:color-mix(in srgb,var(--green) 35%,transparent)} .vc-metric.warn{border-color:color-mix(in srgb,var(--amber) 38%,transparent)} .vc-metric.bad{border-color:color-mix(in srgb,#e0556a 40%,transparent)} .btn.vc-override{opacity:.7;font-size:13px;padding:9px 16px} .btn.vc-override:hover{opacity:1} /* dashboard A/B voice compare */ .vc-cmp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px} @media(max-width:560px){.vc-cmp-row{grid-template-columns:1fr}} .vc-cmp{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:14px} .vc-cmp-h{font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:8px} .vc-live-badge{font-family:var(--display);font-weight:700;font-size:12px;color:var(--green-text);margin-left:6px} .vc-live-badge.flag{color:var(--amber-text)} .vc-live-badge.proc{color:var(--accent)} .vc-enough{margin:10px 0 2px;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--text);background:color-mix(in srgb,var(--green) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--green) 42%,transparent)} .vc-enough b{color:var(--green)} /* ============================== ADMIN (themed, BB4) ============================== */ .adm-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:12px 22px;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);flex-wrap:wrap;row-gap:8px} .adm-top .logo .word{font-size:19px} .adm-top .adm-badge{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 32%,transparent);padding:3px 9px;border-radius:99px} .adm-nav{display:flex;gap:6px;margin-left:8px} .adm-nav a{font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted);padding:7px 13px;border-radius:9px;transition:.15s var(--ease)} .adm-nav a:hover{color:var(--text);background:var(--hover)} .adm-nav a.on{color:var(--on-accent);background:var(--accent)} .adm-right{margin-left:auto;display:flex;align-items:center;gap:10px} .adm-wrap{max-width:1180px;margin:0 auto;padding:28px 22px 80px} .adm-h{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;margin:34px 0 4px;display:flex;align-items:center;gap:10px} .adm-h:first-child{margin-top:6px} .adm-sub{color:var(--muted);font-size:13.5px;margin-bottom:16px} .adm-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm)} /* monitor: flagged exceptions pinned + clearly marked; real vs AI clone side-by-side */ .adm-card.adm-flagged{border-color:color-mix(in srgb,var(--amber) 55%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 22%,transparent)} .adm-flag-reason{margin-top:10px;background:color-mix(in srgb,var(--amber) 14%,transparent);border:1px solid color-mix(in srgb,var(--amber) 38%,transparent);border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;color:var(--text)} .adm-mon-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px} @media(max-width:640px){.adm-mon-grid{grid-template-columns:1fr}} .adm-mon-h{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .adm-clone-proc{font-size:13px;color:var(--muted);background:var(--bg3);border:1px dashed var(--border2);border-radius:10px;padding:14px;text-align:center} .adm-mon-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .adm-decide-inline{display:inline} /* messages inbox */ .adm-msg-body{margin-top:10px;white-space:pre-wrap;font-size:14px;line-height:1.6;color:var(--text);background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent2);border-radius:10px;padding:12px 14px;max-height:320px;overflow:auto} .adm-card.adm-msg-archived{opacity:.6} .adm-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow-x:auto;box-shadow:var(--shadow-sm);margin-bottom:20px} .adm-panel .adm-table{margin:0} .adm-table{width:100%;border-collapse:collapse;font-size:13px} .adm-table th{text-align:left;padding:11px 14px;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.5px;font-family:var(--display);font-weight:700;background:var(--bg2);border-bottom:1px solid var(--border)} .adm-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top} .adm-table tr:last-child td{border-bottom:0} .adm-table tr:hover td{background:var(--hover)} .adm-empty{padding:22px;color:var(--muted);text-align:center} /* theme-aware status pills */ .pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:700;font-size:11px;padding:3px 10px;border-radius:99px;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent} .pill-ok{color:var(--green-text);background:color-mix(in srgb,var(--green) 15%,transparent);border-color:color-mix(in srgb,var(--green) 34%,transparent)} .pill-info{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:color-mix(in srgb,var(--accent) 34%,transparent)} .pill-acc{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 15%,transparent);border-color:color-mix(in srgb,var(--accent2) 34%,transparent)} .pill-warn{color:var(--amber-text);background:color-mix(in srgb,var(--amber) 16%,transparent);border-color:color-mix(in srgb,var(--amber) 36%,transparent)} .pill-bad{color:#d6336c;background:color-mix(in srgb,#d6336c 14%,transparent);border-color:color-mix(in srgb,#d6336c 34%,transparent)} .pill-neutral{color:var(--muted);background:var(--bg3);border-color:var(--border)} /* applicant review card */ .adm-app{display:grid;grid-template-columns:1fr;gap:14px} .adm-app-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .adm-app-head b{font-size:16px;font-family:var(--display)} .adm-app-meta{color:var(--muted);font-size:13px;margin-top:2px} .adm-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .adm-thumbs img{width:84px;height:104px;object-fit:cover;border-radius:10px;border:1px solid var(--border)} .adm-decide{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .adm-decide input[type=text]{flex:1;min-width:200px;padding:9px 12px;background:var(--input-bg);border:1px solid var(--border2);border-radius:9px;color:var(--text);font-family:var(--body);font-size:13px} .adm-btn{font-family:var(--display);font-weight:700;font-size:13px;padding:8px 16px;border-radius:9px;border:0;cursor:pointer;color:var(--on-accent);transition:filter .15s var(--ease)} .adm-btn:hover{filter:brightness(1.06)} .adm-btn.ok{background:var(--green)} .adm-btn.warn{background:var(--amber)} .adm-btn.bad{background:#d6336c} .adm-btn.ghost{background:transparent;color:#d6336c;border:1px solid color-mix(in srgb,#d6336c 45%,transparent)} .adm-hist{margin-top:10px;border-top:1px solid var(--line);padding-top:8px} .adm-hist div{font-size:11.5px;color:var(--muted);padding:1px 0} .adm-banner{display:block;padding:14px 18px;border-radius:12px;margin-bottom:22px;font-family:var(--display);font-weight:600;text-decoration:none;color:var(--text)} /* ============================== GOOGLE SIGN-IN (QF3) ============================== */ .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--surface);border:1px solid var(--border2);color:var(--text)} .btn-google:hover{background:var(--hover);border-color:var(--line-2)} .btn-google svg{width:18px;height:18px;flex:none} .oauth-sep{display:flex;align-items:center;gap:12px;color:var(--dim);font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin:16px 0} .oauth-sep:before,.oauth-sep:after{content:"";flex:1;height:1px;background:var(--border)} .oauth-wrap{margin-bottom:6px} .gprefill-note{background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 38%,transparent);color:var(--text);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px} /* ---- Voice lab (admin calibration audition) ---- */ .vlab-picker{display:flex;align-items:center;gap:10px;margin:14px 0 18px;flex-wrap:wrap} .vlab-picker label{font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted)} .vlab-picker input{width:110px;padding:9px 12px;border-radius:10px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font-size:14px} .vlab-picker .btn{padding:9px 18px;font-size:14px} .vlab-muted{color:var(--muted);font-size:14px;line-height:1.6;max-width:640px} .vlab-muted code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:13px} .vlab-meta{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--text);margin-bottom:14px} .vlab-meta b{color:var(--muted);font-weight:600;margin-right:6px;font-size:12px;text-transform:uppercase;letter-spacing:.03em} .vlab-script{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:20px;max-width:760px} .vlab-script b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:6px} .vlab-script p{margin:0;font-size:14px;line-height:1.6;color:var(--text)} .vlab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px} .vlab-card{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)} .vlab-card.failed{opacity:.55;background:var(--surface-2)} .vlab-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px} .vlab-num{font-family:var(--display);font-weight:700;font-size:16px;color:var(--text)} .vlab-model{font-family:var(--mono,monospace);font-size:12px;font-weight:600;color:var(--on-accent);background:var(--accent);padding:3px 9px;border-radius:99px} .vlab-settings{display:flex;flex-wrap:wrap;gap:6px} .vlab-set{font-size:12px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:4px 9px} .vlab-set b{color:var(--muted);font-weight:600;margin-right:4px} .vlab-failed{margin-top:12px;font-size:13px;font-weight:600;color:var(--muted)} /* ============ focus + interaction states (wave 1) ============ */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .btn:focus-visible{outline-offset:3px} .vc-tier:has(input:focus-visible){box-shadow:0 0 0 2px var(--accent)} .btn:active{transform:translateY(1px) scale(.985)} .adm-btn:disabled{opacity:.55;cursor:default;transform:none} /* skip-to-content: visually hidden until keyboard focus */ .skip{position:fixed;top:-48px;left:14px;z-index:200;background:var(--surface);color:var(--text); border:1px solid var(--line-2);border-radius:10px;padding:10px 16px;font-family:var(--display); font-weight:700;font-size:13px;box-shadow:var(--shadow-sm);transition:top .18s var(--ease)} .skip:focus-visible{top:14px} /* keep the last footer rows tappable above the fixed mobile CTA bar */ @media(max-width:860px){body:has(.mcta){padding-bottom:82px}} /* wave 4 — admin engine chip + voice-lab winner */ .adm-engine{font-family:var(--display);font-weight:700;font-size:11.5px;padding:6px 12px;border-radius:99px;white-space:nowrap} .adm-engine.ok{color:var(--green-text);background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)} .adm-engine.stale{color:var(--amber-text);background:color-mix(in srgb,var(--amber) 14%,transparent);border:1px solid color-mix(in srgb,var(--amber) 34%,transparent)} .vlab-card.vlab-winner{border-color:color-mix(in srgb,var(--green) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent)} .vlab-win{display:inline-block;margin:8px 0 0;font-family:var(--display);font-weight:700;font-size:11.5px;color:var(--green-text);background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);border-radius:99px;padding:4px 11px} .vlab-win.human{color:var(--on-accent);background:var(--cl-grad);border:0} .vlab-pick{margin-top:10px} /* success notice (login after reset, etc.) — green sibling of .form-err */ .form-ok{color:var(--green-text);background:color-mix(in srgb,var(--green) 10%,transparent);border:1px solid color-mix(in srgb,var(--green) 28%,transparent);border-radius:10px;padding:10px 14px;font-size:13px;font-family:var(--display);font-weight:600;margin-bottom:10px} /* winner reveal — the magic moment: brand-gradient ring, no logo changes */ .vc-winner{position:relative;border-radius:16px;padding:18px;background:var(--surface);border:1px solid transparent;background-clip:padding-box} .vc-winner:before{content:"";position:absolute;inset:-1px;border-radius:17px;padding:1.5px;background:var(--cl-grad);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .vc-winner-badge{display:inline-block;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--on-accent);background:var(--cl-grad);border-radius:99px;padding:5px 13px} /* i18n: footer switcher, suggestion banner, legal notice */ .lang-switch{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap} .lang-switch a{color:var(--muted);padding:8px 6px} .lang-switch a.on{color:var(--text);font-weight:700} .lang-banner{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 42px 10px 16px;position:relative;background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-bottom:1px solid var(--line);font-size:14px} .lang-banner a{font-weight:700;color:var(--accent);padding:6px} .lang-banner .lb-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:400;padding:10px 12px} .i18n-legal-note{font-size:12.5px;color:var(--muted);padding:10px 0 0;border-top:1px solid var(--line);margin-top:14px} /* admin escape hatch */ .adm-home{display:inline-flex;align-items:center;border-radius:8px} .adm-home:hover .sq1{border-color:var(--accent2)} .adm-back{font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--muted);padding:8px 10px;border-radius:8px;white-space:nowrap} .adm-back:hover{color:var(--text);background:var(--hover)} /* answer-shaped intro (AI-search groundwork) — quiet, not competing with the hero */ .answer-capsule{max-width:820px;margin:0 auto;font-size:15.5px;line-height:1.65;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 22px;text-align:center} .answer-capsule b{color:var(--text)} /* guided multi-angle capture: per-angle tag on thumbnails */ .lk-thumb-tag{position:absolute;left:4px;bottom:4px;background:rgba(10,12,20,.72);color:#fff;font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:.03em;padding:2px 7px;border-radius:6px;pointer-events:none} /* voice: full-window branded submit takeover + paused state */ .vc-takeover{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);overflow:hidden} .vc-takeover .glow{position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(90px);opacity:var(--glow-op)} .vc-takeover .glow1{top:-20vh;right:-10vw;background:var(--glow-1)} .vc-takeover .glow2{bottom:-20vh;left:-10vw;background:var(--glow-2)} .vc-takeover-cap{font-family:var(--display);font-weight:700;font-size:clamp(20px,3.4vw,28px);color:var(--text);z-index:1} .vc-takeover-sub{font-size:14.5px;color:var(--muted);z-index:1;text-align:center;padding:0 24px} .vc-card.vc-paused{outline:2px dashed color-mix(in srgb,var(--amber) 55%,transparent);outline-offset:4px} @media(prefers-reduced-motion:reduce){.vc-takeover .cl-squares .sq{animation:none}} /* reference pack grid */ .refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px} .refv{margin:0} .refv img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block;background:var(--bg3)} .refv figcaption{font-size:11.5px;color:var(--muted);margin-top:5px;text-align:center;font-family:var(--display);font-weight:600;text-transform:capitalize}