:root { --paper:#f4f1e9; --paper-deep:#ebe6da; --card:#fffdf8; --ink:#153b3b; --ink-soft:#496667; --ink-faint:#708282; --line:#d9d7c9; --teal:#1d8f87; --teal-dark:#0f6f6a; --teal-pale:#dcefeb; --coral:#f87560; --coral-pale:#fee2dc; --blue:#3c63d7; --blue-pale:#e2e7fb; --shadow:0 20px 60px rgb(22 53 54 / 10%); --shadow-soft:0 8px 24px rgb(22 53 54 / 9%); --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:Georgia,"Times New Roman",serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
* { box-sizing:border-box; } html { min-width:320px; scroll-behavior:smooth; } body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; } button,input { font:inherit; } .skip-link { position:fixed; z-index:10; top:10px; left:10px; padding:10px 14px; border-radius:999px; color:white; background:var(--ink); transform:translateY(-150%); transition:transform .2s ease; }.skip-link:focus { transform:translateY(0); }.demo-shell { min-height:100vh; }
.demo-header { position:sticky; z-index:10; top:0; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:14px clamp(18px,5vw,76px); border-bottom:1px solid rgb(21 59 59 / 10%); background:rgb(244 241 233 / 94%); backdrop-filter:blur(18px); }.demo-brand { display:flex; align-items:center; gap:11px; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow-soft); }.brand-mark img { width:24px; height:24px; }.demo-brand strong { display:block; font-size:16px; letter-spacing:-.04em; }.demo-brand strong span { color:var(--coral); }.demo-brand small { display:block; margin-top:2px; color:var(--ink-faint); font-size:9px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }.demo-header nav { display:flex; gap:22px; color:var(--ink-soft); font-size:12px; font-weight:850; }.demo-header nav a { text-decoration:none; }.demo-header nav a:hover { color:var(--teal-dark); } a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
.demo-hero { position:relative; display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:7vw; min-height:540px; padding:80px clamp(22px,8vw,130px) 90px; overflow:hidden; background:var(--paper); }.demo-hero::before { position:absolute; right:-10%; top:-50%; width:780px; height:780px; border-radius:50%; background:radial-gradient(circle,var(--teal-pale) 0,transparent 68%); content:""; }.hero-copy { position:relative; z-index:1; max-width:720px; }.eyebrow { margin:0 0 16px; color:var(--teal-dark); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }.eyebrow-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--coral); vertical-align:1px; }.demo-hero h1 { max-width:780px; margin:0 0 26px; font-size:clamp(44px,7vw,92px); line-height:.93; letter-spacing:-.075em; }.demo-hero h1 em { color:var(--coral); font-family:var(--serif); font-weight:400; letter-spacing:-.08em; }.lede { max-width:660px; color:var(--ink-soft); font-size:clamp(16px,1.7vw,22px); line-height:1.5; }.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:45px; padding:12px 17px; border-radius:999px; font-size:12px; font-weight:850; text-decoration:none; }.button-primary { border:1px solid var(--coral); color:white; background:var(--coral); box-shadow:0 10px 20px rgb(248 117 96 / 24%); }.button-secondary { border:1px solid var(--line); color:var(--ink); background:var(--card); }.button:hover { transform:translateY(-1px); }.hero-rail { position:relative; z-index:1; display:grid; gap:15px; justify-items:center; max-width:490px; margin-top:35px; }.rail-label { color:var(--teal-dark); font:850 11px var(--mono); letter-spacing:.09em; text-transform:uppercase; }.rail-right { color:var(--coral); }.rail-line { display:flex; align-items:center; width:100%; }.rail-line i { width:18px; height:18px; border:5px solid var(--paper); border-radius:50%; background:var(--coral); box-shadow:0 0 0 1px var(--coral); }.rail-line i:last-child { background:var(--teal); box-shadow:0 0 0 1px var(--teal); }.rail-line b { flex:1; height:8px; border-top:2px solid var(--teal); transform:skewY(-13deg); }
.player-section,.proof-section { padding:clamp(58px,8vw,110px) clamp(18px,8vw,130px); border-top:1px solid var(--line); }.player-section { background:linear-gradient(180deg,var(--paper-deep),var(--paper)); }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; max-width:1520px; margin:0 auto 27px; }.section-heading h2 { margin:0; font-size:clamp(30px,4vw,58px); line-height:.98; letter-spacing:-.065em; }.media-badge { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); background:rgb(255 253 248 / 70%); font-size:10px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }.player-card { max-width:1520px; margin:0 auto; padding:14px; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:var(--shadow); }.video-wrap { position:relative; overflow:hidden; border-radius:15px; background:#102f31; }.video-wrap video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#102f31; }.video-description { margin:0; padding:10px 14px; color:#d5ebe7; background:#102f31; font-size:11px; line-height:1.45; }.custom-controls { display:flex; align-items:center; gap:10px; padding:13px 4px 1px; }.control-button { display:inline-flex; align-items:center; gap:7px; min-height:35px; padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); background:var(--card); font-size:11px; font-weight:850; cursor:pointer; }.control-button:hover { color:var(--teal-dark); border-color:var(--teal); }.control-primary { color:white; border-color:var(--teal); background:var(--teal); }.control-icon { font-size:10px; }.seek-control { position:relative; display:flex; align-items:center; flex:1; height:34px; cursor:pointer; }.seek-control input { position:relative; z-index:2; width:100%; opacity:0; cursor:pointer; }.seek-track { position:absolute; right:0; left:0; height:6px; overflow:hidden; border-radius:99px; background:var(--line); }.seek-track i { display:block; width:0; height:100%; background:var(--teal); }.time-readout { min-width:85px; color:var(--ink-faint); font:800 10px var(--mono); text-align:right; }.download-row { display:flex; align-items:center; flex-wrap:wrap; gap:17px; max-width:1520px; margin:20px auto 0; }.download-row .eyebrow { margin:0 5px 0 0; }.download-row a { color:var(--teal-dark); font-size:11px; font-weight:850; text-underline-offset:3px; }.download-row a span { color:var(--coral); }
.proof-section { background:var(--paper); }.text-link { color:var(--teal-dark); font-size:12px; font-weight:900; text-underline-offset:4px; }.proof-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(28px,6vw,100px); max-width:1520px; margin:0 auto; }.proof-shot { margin:0; padding:10px; border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:var(--shadow); transform:rotate(-.7deg); }.proof-shot img { display:block; width:100%; max-height:590px; object-fit:cover; object-position:top center; border-radius:13px; }.proof-shot figcaption { padding:10px 4px 1px; color:var(--ink-faint); font:800 9px var(--mono); letter-spacing:.04em; text-transform:uppercase; }.proof-copy { max-width:600px; }.truth-card { display:flex; gap:12px; padding:16px; border-left:4px solid var(--coral); border-radius:0 14px 14px 0; color:var(--ink-soft); background:var(--coral-pale); font-size:12px; line-height:1.5; }.truth-mark { display:grid; place-items:center; width:21px; height:21px; flex:0 0 21px; border-radius:50%; color:white; background:var(--coral); font-weight:900; }.truth-card strong { color:var(--ink); }.truth-card p { margin:4px 0 0; }.mini-grid { display:grid; gap:0; margin-top:26px; }.mini-grid article { padding:15px 0; border-top:1px solid var(--line); }.mini-grid article span { color:var(--teal-dark); font:800 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.mini-grid article:nth-child(2) span { color:#a64132; }.mini-grid article:nth-child(3) span { color:var(--blue); }.mini-grid h3 { margin:7px 0 4px; font-size:20px; letter-spacing:-.04em; }.mini-grid p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.45; }
.demo-footer { display:flex; justify-content:space-between; gap:20px; padding:22px clamp(18px,8vw,130px); color:var(--ink-faint); font-size:10px; font-weight:800; letter-spacing:.05em; }.demo-footer a { color:var(--teal-dark); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:850px) { .demo-hero { grid-template-columns:1fr; min-height:620px; gap:18px; padding-top:60px; }.hero-rail { max-width:620px; margin-top:20px; }.section-heading { align-items:start; flex-direction:column; gap:12px; }.proof-grid { grid-template-columns:1fr; }.proof-shot img { max-height:none; }.demo-footer { flex-direction:column; gap:9px; } }
@media (max-width:560px) { .demo-header { padding:10px 14px; }.demo-header nav { gap:11px; font-size:10px; }.demo-brand small { display:none; }.demo-hero { padding:48px 20px 60px; }.demo-hero h1 { font-size:51px; }.player-section,.proof-section { padding:55px 14px; }.player-card { padding:8px; border-radius:17px; }.custom-controls { flex-wrap:wrap; }.seek-control { order:3; flex-basis:100%; }.download-row { gap:11px; }.download-row .eyebrow { flex-basis:100%; }.media-badge { font-size:9px; } }