/* ========================================================================== DRIVE ID — Phase 0 landing page Depends on tokens.css. Nothing here is application code (guide D7). ========================================================================== */ /* --- Variant switching ----------------------------------------------------- Both pitches (guide §2) ship in the same document. The element gets data-pitch="a" or "b" from app.js; only the matching copy is shown. Anything without a [data-pitch] attribute is shared by both. */ [data-pitch="a"] [data-pitch-only="b"], [data-pitch="b"] [data-pitch-only="a"] { display: none !important; } /* --- Header ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 68px; } .logo { font-weight: 800; letter-spacing: -0.04em; font-size: var(--step-1); text-decoration: none; color: var(--text); } .logo i { font-style: normal; color: var(--text-muted); } /* --- Hero ------------------------------------------------------------------ */ .hero { padding: var(--sp-8) 0 var(--sp-7); } .hero-grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .hero { padding: var(--sp-7) 0 var(--sp-8); } .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); } } .eyebrow { display: inline-block; margin-bottom: var(--sp-4); font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted); } .hero h1 { margin-bottom: var(--sp-5); max-width: 19ch; } .hero .lede { font-size: var(--step-1); color: var(--text-muted); max-width: 46ch; margin-bottom: var(--sp-6); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); } .hero-note { font-size: var(--step--1); color: var(--text-muted); } /* Phone mock — the scan view is the hero image, per guide D2 */ .phone { width: min(320px, 100%); margin-inline: auto; border: 10px solid #05090d; border-radius: 34px; box-shadow: var(--shadow); overflow: hidden; background: var(--bg); } .phone .photo { aspect-ratio: 4 / 3; border: 0; border-radius: 0; } .phone-body { padding: var(--sp-4); } .phone-body h3 { margin-bottom: var(--sp-1); font-size: var(--step-1); } .phone-body .sub { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--sp-4); } .phone-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } /* --- Sections -------------------------------------------------------------- */ .section { padding: var(--sp-8) 0; border-top: 1px solid var(--border); } .section-head { max-width: 60ch; margin-bottom: var(--sp-6); } .section-head p { color: var(--text-muted); margin-bottom: 0; } .grid-3 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .step-num { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: var(--sp-4); border-radius: var(--radius-pill); background: var(--fill-primary); color: var(--text-on-fill); font-weight: 700; font-size: var(--step--1); } .card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); } .card p:last-child { margin-bottom: 0; color: var(--text-muted); } /* --- Pricing --------------------------------------------------------------- */ .price-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 720px) { .price-grid { grid-template-columns: repeat(2, 1fr); } } .price { font-size: var(--step-3); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--sp-2); } .price small { font-size: var(--step-0); font-weight: 500; color: var(--text-muted); letter-spacing: 0; } .price-card ul { margin: var(--sp-4) 0 var(--sp-5); padding-left: var(--sp-5); color: var(--text-muted); } .price-card li { margin-bottom: var(--sp-2); } /* --- Privacy callout (guide §8) -------------------------------------------- */ .callout { border-left: 3px solid var(--fill-primary); background: var(--surface); border-radius: var(--radius); padding: var(--sp-5); } .callout h3 { margin-bottom: var(--sp-3); } .callout p:last-child { margin-bottom: 0; } /* --- Waitlist -------------------------------------------------------------- */ .signup { max-width: 520px; } .signup .card { padding: var(--sp-6); } /* --- FAQ ------------------------------------------------------------------- */ .faq details { border-bottom: 1px solid var(--border); padding: var(--sp-4) 0; } .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); min-height: 32px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--text-muted); font-size: var(--step-1); flex: none; } .faq details[open] summary::after { content: "\2212"; } .faq details p { margin: var(--sp-3) 0 0; color: var(--text-muted); max-width: 68ch; } /* --- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: var(--sp-6) 0; color: var(--text-muted); font-size: var(--step--1); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; }