:root { color-scheme: light; --navy:#071c26; --teal:#0d9488; --teal-dark:#08675f; --paper:#f3f6f4; --ink:#19312c; --muted:#657670; --line:#dce6e1; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,a { font:inherit; }
button { cursor:pointer; }
.demo-banner { position:sticky; top:0; z-index:30; display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:18px; padding:9px 20px; background:#fff5d9; color:#6a4b07; font-size:11px; box-shadow:0 4px 18px rgba(25,49,44,.09); }
.demo-banner > div { display:flex; align-items:center; gap:8px; }
.demo-banner button,.demo-banner a { min-height:30px; border:1px solid #dbc780; border-radius:8px; padding:6px 10px; background:white; color:#5e460c; font-weight:800; text-decoration:none; }
.demo-banner .buy-link { border-color:var(--teal); background:var(--teal); color:white; }
.app-shell { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:calc(100vh - 48px); }
.sidebar { position:sticky; top:48px; display:flex; height:calc(100vh - 48px); flex-direction:column; padding:24px 20px; overflow-y:auto; background:linear-gradient(180deg,#0b2732,#071c26); color:#eef8f5; }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:13px; background:linear-gradient(145deg,#1db5a2,#08776d); color:white; font-size:12px; font-weight:900; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:14px; }.brand small { margin-top:2px; color:#94aea9; font-size:10px; }
.mock-status { margin:14px 3px 25px; color:#91aaa5; font-size:10px; }.mock-status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#58dcc9; box-shadow:0 0 0 3px rgba(88,220,201,.14); }
.nav-label { margin:0 6px 9px; color:#809b96; font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.sidebar nav { display:grid; gap:7px; }
.demo-nav { display:grid; min-height:46px; grid-template-columns:24px 1fr auto; align-items:center; border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:10px 12px; background:rgba(255,255,255,.035); color:#d9e9e5; font-size:12px; font-weight:800; text-align:left; }
.demo-nav span { color:#6be2d2; }.demo-nav b { display:grid; min-width:22px; height:22px; place-items:center; border-radius:999px; background:rgba(88,220,201,.12); color:#8ce9dc; font-size:9px; }
.demo-nav:hover,.demo-nav.active { border-color:rgba(88,220,201,.35); background:rgba(29,181,162,.16); color:white; }
.approval-note { display:flex; gap:9px; margin-top:auto; padding:13px; border:1px solid rgba(88,220,201,.2); border-radius:12px; background:rgba(29,181,162,.08); }.approval-note > span { display:grid; width:22px; height:22px; flex:0 0 22px; place-items:center; border-radius:50%; background:#0d9488; font-size:10px; }.approval-note strong { font-size:10px; }.approval-note p { margin:3px 0 0; color:#88a49f; font-size:9px; line-height:1.5; }
main { padding:40px clamp(20px,5vw,70px) 80px; }
.project-header { display:flex; max-width:1120px; align-items:flex-start; justify-content:space-between; gap:30px; margin:0 auto 24px; }.project-header p { margin:0 0 7px; color:var(--teal-dark); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.project-header h1 { max-width:850px; margin:0; font-size:clamp(28px,3.5vw,46px); line-height:1.05; letter-spacing:-.04em; }
.status-pill { display:inline-flex; min-height:28px; flex:0 0 auto; align-items:center; border-radius:999px; padding:6px 10px; background:#def3eb; color:#176b52; font-size:9px; font-weight:900; text-transform:uppercase; }
.progress { display:grid; max-width:740px; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; align-items:center; margin:0 auto 34px; }.progress > span { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:#d8efe7; color:#116e59; font-size:11px; font-weight:900; }.progress span small { position:absolute; margin-top:58px; color:#73817d; font-size:9px; font-weight:800; }.progress i { height:2px; background:#b8dcd1; }
.demo-view { display:none; max-width:1120px; margin:50px auto 0; }.demo-view.active { display:block; animation:fade-in 220ms ease; }@keyframes fade-in { from { opacity:.4; transform:translateY(5px); } }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:18px; }.section-heading p { margin:0 0 4px; color:var(--teal-dark); font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.section-heading h2 { margin:0; font-size:30px; letter-spacing:-.03em; }.section-heading > span { color:var(--muted); font-size:10px; }
.radar-grid,.output-grid { display:grid; grid-template-columns:270px 1fr; gap:14px; }.score-card,.evidence-card,.content-card,.script-card,.output-details,.platform-grid article { border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 10px 32px rgba(28,54,47,.05); }.score-card { display:flex; min-height:260px; flex-direction:column; justify-content:center; padding:26px; background:linear-gradient(145deg,#0c9588,#08756c); color:white; }.score-card > span { font-size:72px; font-weight:900; letter-spacing:-.08em; }.score-card strong { font-size:15px; }.score-card p { color:#d8f4ee; font-size:11px; line-height:1.6; }.evidence-card { padding:28px; }.tag { color:var(--teal-dark); font-size:9px; font-weight:900; letter-spacing:.08em; }.evidence-card h3 { margin:15px 0 11px; font-size:24px; }.evidence-card > p:not(.tag) { color:var(--muted); line-height:1.7; }.evidence-card > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }.evidence-card > div span,.control-strip span { border-radius:999px; padding:7px 10px; background:#e7f4ef; color:#27685a; font-size:9px; font-weight:800; }
.next-step { display:block; min-height:44px; margin:18px 0 0 auto; border:0; border-radius:11px; padding:10px 16px; background:var(--teal); color:white; font-weight:850; }
.brief-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; }.brief-grid > div { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.brief-grid .wide { grid-column:span 2; }.brief-grid label { color:var(--teal-dark); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.brief-grid p,.brief-grid blockquote { margin:8px 0 0; line-height:1.65; }.brief-grid blockquote { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.script-card { overflow:hidden; }.script-card article { display:grid; grid-template-columns:75px 1fr; gap:18px; padding:18px 22px; border-bottom:1px solid var(--line); }.script-card article:last-child { border-bottom:0; }.script-card article > span { color:var(--teal-dark); font-size:10px; font-weight:900; }.script-card strong { font-size:13px; }.script-card p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.visual-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.visual-grid figure { overflow:hidden; margin:0; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 10px 32px rgba(28,54,47,.05); }.visual-grid img { width:100%; aspect-ratio:9/12; object-fit:cover; }.visual-grid figcaption { padding:13px; }.visual-grid figcaption strong,.visual-grid figcaption span { display:block; }.visual-grid figcaption strong { font-size:11px; }.visual-grid figcaption span { margin-top:3px; color:var(--muted); font-size:9px; }.control-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.phone { width:min(330px,100%); padding:8px; border-radius:32px; background:#071c26; box-shadow:0 24px 70px rgba(10,36,32,.22); }.phone video { display:block; width:100%; aspect-ratio:9/16; border-radius:25px; background:black; object-fit:cover; }.output-details { align-self:center; padding:28px; }.output-details h3 { margin-top:0; font-size:24px; }.output-details dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.output-details dl div { padding:13px; border:1px solid var(--line); border-radius:10px; }.output-details dt { color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.output-details dd { margin:5px 0 0; font-size:12px; font-weight:800; }.receipt { display:grid; gap:5px; margin-top:18px; padding:13px; border-radius:10px; background:#edf4f1; }.receipt span { color:var(--teal-dark); font-size:8px; font-weight:900; }.receipt code { overflow-wrap:anywhere; color:#52635e; font-size:9px; }.output-details > p { color:var(--muted); font-size:11px; line-height:1.7; }
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.platform-grid article { padding:22px; }.platform-grid article > span { color:var(--teal-dark); font-size:9px; font-weight:900; text-transform:uppercase; }.platform-grid h3 { margin:12px 0 8px; }.platform-grid p { color:var(--muted); font-size:11px; line-height:1.6; }.platform-grid small { color:#1a7769; font-weight:800; }.tour-finish { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; padding:22px; border-radius:15px; background:#0b332f; color:white; }.tour-finish p { margin:5px 0 0; color:#b6d8d1; font-size:10px; }.tour-finish a { flex:0 0 auto; border-radius:10px; padding:11px 14px; background:#31bea9; color:#06231e; font-size:11px; font-weight:900; text-decoration:none; }
@media (max-width:860px) { .demo-banner { align-items:flex-start; flex-direction:column; }.demo-banner > div { width:100%; flex-wrap:wrap; }.app-shell { grid-template-columns:1fr; }.sidebar { position:static; height:auto; }.sidebar nav { grid-template-columns:repeat(6,145px); overflow-x:auto; }.approval-note { display:none; }main { padding-top:28px; }.project-header { flex-direction:column; }.radar-grid,.output-grid { grid-template-columns:1fr; }.phone { margin-inline:auto; } }
@media (max-width:620px) { .brief-grid,.visual-grid,.platform-grid { grid-template-columns:1fr; }.brief-grid .wide { grid-column:auto; }.progress { transform:scale(.85); }.section-heading { align-items:flex-start; flex-direction:column; }.output-details dl { grid-template-columns:1fr; }.tour-finish { align-items:flex-start; flex-direction:column; }.demo-banner .buy-link { width:100%; text-align:center; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }