/* Take One website — visual redesign */
:root {
  --bg: #070914;
  --bg-2: #0d1020;
  --surface: #12162a;
  --surface-2: #181d35;
  --surface-3: #0b0f20;
  --text: #f8fafc;
  --text-soft: #e8ecf7;
  --muted: #98a2b8;
  --muted-2: #c0c7d6;
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --green: #10b981;
  --line: rgba(148,163,184,.16);
  --line-strong: rgba(167,139,250,.28);
  --gradient: linear-gradient(115deg, var(--blue), var(--purple) 54%, var(--pink));
  --max: 1180px;
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 30px;
  --shadow: 0 28px 80px rgba(0,0,0,.34);
  --font: "Segoe UI Variable", "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.58; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(139,92,246,.42); color: #fff; }
.container { width: min(calc(100% - 2.4rem), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 2.4rem), 860px); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 1000; padding: .65rem 1rem; border-radius: 10px; background: #fff; color: #000; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.copy { color: var(--muted-2); }

.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; background: rgba(7,9,20,.73); backdrop-filter: blur(18px); transition: border-color .2s ease, background .2s ease; }
.site-header.is-scrolled { border-color: var(--line); background: rgba(7,9,20,.92); }
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; color: #fff; text-decoration: none; font-size: 1.22rem; font-weight: 680; letter-spacing: -.025em; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 auto; filter: drop-shadow(0 7px 18px rgba(139,92,246,.24)); }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links > a:not(.btn) { color: #d7dbea; text-decoration: none; font-size: .91rem; font-weight: 540; transition: color .15s ease; }
.nav-links > a:not(.btn):hover { color: #fff; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; }

.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid transparent; border-radius: 12px; padding: .8rem 1.28rem; color: #fff; text-decoration: none; font-weight: 650; line-height: 1; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, .text-link:focus-visible, .nav-links a:focus-visible { outline: 3px solid rgba(167,139,250,.52); outline-offset: 4px; }
.btn-primary { background: var(--gradient); box-shadow: 0 14px 34px rgba(121,72,231,.3); }
.btn-primary:hover { box-shadow: 0 18px 42px rgba(121,72,231,.42); }
.btn-secondary { border-color: var(--line-strong); background: rgba(255,255,255,.035); }
.btn-secondary:hover { border-color: rgba(167,139,250,.5); }
.btn-small { min-height: 40px; padding: .65rem 1.08rem; font-size: .88rem; }
.btn:disabled { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: .48rem; color: #f0edff; text-decoration: none; font-weight: 600; }
.text-link span { color: #d3b8ff; }
.text-link:hover { color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }

.hero { position: relative; isolation: isolate; padding: clamp(4.8rem, 8vw, 8.2rem) 0 5.2rem; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 74% 48%, rgba(74,61,210,.14), transparent 34%), linear-gradient(180deg, #070914, #080b18 75%, #070914); }
.hero-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(30px); opacity: .64; pointer-events: none; }
.hero-glow-one { width: 420px; height: 420px; right: 3%; top: 18%; background: radial-gradient(circle, rgba(139,92,246,.31), transparent 68%); }
.hero-glow-two { width: 330px; height: 330px; right: 21%; bottom: -10%; background: radial-gradient(circle, rgba(236,72,153,.2), transparent 68%); }
.hero-grid { display: grid; grid-template-columns: .97fr 1.03fr; gap: clamp(2rem, 6vw, 5.2rem); align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1rem; color: #bd9cff; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.display { margin: 0; max-width: 760px; font-size: clamp(3.2rem, 5.5vw, 5.85rem); line-height: .99; letter-spacing: -.055em; font-weight: 720; }
.gradient-text { background: var(--gradient); background-clip: text; -webkit-background-clip: text; color: transparent; }
.lead { margin: 1.55rem 0 0; max-width: 650px; color: var(--muted-2); font-size: clamp(1rem, 1.5vw, 1.17rem); line-height: 1.66; font-weight: 410; }
.hero-copy .actions { margin-top: 2rem; }
.trust-line { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.9rem; }
.trust-line span { display: inline-flex; align-items: center; gap: .48rem; border: 1px solid var(--line); border-radius: 999px; padding: .52rem .75rem; background: rgba(9,12,28,.64); color: #d4d9e7; font-size: .77rem; white-space: nowrap; }
.trust-line b { color: #bd9cff; font-weight: 600; }

.hero-media { min-width: 0; }
.device-stage { position: relative; min-height: 610px; display: grid; place-items: center; }
.phone { position: relative; width: 330px; padding: 10px; border-radius: 50px; background: linear-gradient(145deg, #363b50, #111522 34%, #05070c 68%, #34384a); box-shadow: 0 36px 100px rgba(0,0,0,.55), 0 0 65px rgba(97,68,222,.18); transform: rotate(3deg); }
.phone::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,.14); border-radius: 48px; pointer-events: none; }
.phone-side { position: absolute; width: 4px; background: #171a24; border-radius: 5px; }
.phone-side-left { left: -3px; top: 135px; height: 78px; }
.phone-side-right { right: -3px; top: 158px; height: 112px; }
.phone-screen { position: relative; min-height: 604px; overflow: hidden; border-radius: 41px; padding: 1.2rem 1.15rem .85rem; background: linear-gradient(180deg, #090b17 0%, #0b1021 100%); border: 1px solid rgba(255,255,255,.08); }
.phone-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 65% 29%, rgba(90,61,225,.15), transparent 34%); }
.phone-status { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: .05rem .42rem .65rem; color: #f6f7fb; font-size: .62rem; font-weight: 650; }
.phone-notch { position: absolute; top: 10px; left: 50%; width: 98px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #020306; }
.phone-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-top: .25rem; }
.phone-brand { display: inline-flex; align-items: center; gap: .38rem; font-size: .76rem; font-weight: 650; }
.phone-settings { color: #d7dbea; font-size: .8rem; }
.phone-kicker { position: relative; z-index: 2; margin: 1.15rem 0 .75rem; font-size: 1.05rem; font-weight: 690; letter-spacing: -.025em; }
.take-card { position: relative; z-index: 2; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; padding: 1rem; background: linear-gradient(135deg, rgba(61,92,239,.92), rgba(90,38,201,.95) 58%, rgba(218,65,162,.82)); box-shadow: 0 16px 35px rgba(79,43,196,.27); }
.take-card .tag { display: inline-block; color: rgba(255,255,255,.78); font-size: .58rem; letter-spacing: .04em; }
.take-card h3 { margin: .35rem 0 .42rem; font-size: 1.02rem; line-height: 1.16; letter-spacing: -.025em; }
.take-card p { margin: 0; color: rgba(255,255,255,.78); font-size: .68rem; }
.take-button { margin-top: .85rem; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; padding: .58rem .7rem; background: rgba(255,255,255,.15); color: #fff; font-size: .68rem; font-weight: 650; }
.phone-list { position: relative; z-index: 2; display: grid; gap: .58rem; margin-top: .72rem; }
.phone-row { display: grid; grid-template-columns: 32px 1fr auto; gap: .65rem; align-items: center; min-height: 65px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: .65rem; background: rgba(20,25,48,.92); }
.phone-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(167,139,250,.25); border-radius: 10px; background: rgba(139,92,246,.09); color: #bd9cff; font-size: .62rem; }
.phone-row strong { display: block; font-size: .76rem; font-weight: 650; }
.phone-row small { display: block; margin-top: .08rem; color: #8f99ad; font-size: .58rem; }
.phone-chevron { color: #aeb6c6; }
.phone-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.08); background: rgba(8,10,21,.95); padding: .58rem .45rem .68rem; }
.phone-nav span { display: grid; place-items: center; gap: .1rem; color: #6f788d; font-size: .65rem; }
.phone-nav small { font-size: .48rem; }
.phone-nav .is-active { color: #bd9cff; }
.callout { position: absolute; width: 220px; display: grid; grid-template-columns: 42px 1fr; gap: .8rem; align-items: start; border: 1px solid rgba(167,139,250,.3); border-radius: 16px; padding: 1rem; background: linear-gradient(145deg, rgba(20,24,48,.94), rgba(10,13,28,.93)); box-shadow: 0 24px 55px rgba(0,0,0,.3); }
.callout::before { content: ""; position: absolute; width: 86px; height: 58px; border-top: 1px dashed rgba(181,153,255,.48); border-radius: 50%; }
.callout-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(139,92,246,.12); color: #bd9cff; }
.callout strong { display: block; margin-bottom: .25rem; font-size: .88rem; font-weight: 650; }
.callout span { display: block; color: #aeb6c7; font-size: .74rem; line-height: 1.45; }
.callout-insight { right: -12px; top: 128px; }
.callout-insight::before { left: -76px; top: 58px; transform: rotate(-12deg); }
.callout-private { right: -18px; bottom: 95px; }
.callout-private::before { left: -77px; top: 20px; transform: rotate(18deg); }

.assurance-bar { border-block: 1px solid var(--line); background: rgba(9,12,27,.68); }
.assurance-grid { min-height: 74px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 1rem; }
.assurance-grid span { position: relative; padding-left: 1rem; color: #c7cedb; text-align: center; font-size: .85rem; }
.assurance-grid span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .7rem .12rem 0; border-radius: 50%; background: var(--gradient); }

.section { padding: clamp(5rem, 8vw, 7.8rem) 0; }
.section-compact { padding: 2rem 0 5.5rem; }
.section-line { border-top: 1px solid var(--line); }
.section-intro { max-width: 760px; margin-bottom: 2.4rem; }
.h1, .h2, .h3 { color: #fff; letter-spacing: -.035em; }
.h1 { margin: 0; font-size: clamp(2.7rem, 5vw, 4.7rem); line-height: 1.05; font-weight: 710; }
.h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.09; font-weight: 690; }
.h3 { margin: 0; font-size: 1.17rem; line-height: 1.3; font-weight: 650; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(19,23,44,.94), rgba(10,13,29,.92)); padding: 1.35rem; box-shadow: 0 16px 45px rgba(0,0,0,.12); }
.card-raised { background: linear-gradient(145deg, rgba(27,32,60,.96), rgba(12,15,32,.96)); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.step-card { position: relative; min-height: 245px; padding: 1.45rem; }
.step-badge { position: absolute; right: 1rem; top: 1rem; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #a98cff, #d970d7); color: #141126; font-size: .75rem; font-weight: 700; }
.step-icon, .feature-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 1.1rem; border: 1px solid rgba(167,139,250,.25); border-radius: 14px; background: rgba(139,92,246,.09); color: #bd9cff; font-size: 1.25rem; }
.step-card h3 { margin: 0 0 .65rem; font-size: 1.04rem; font-weight: 650; }
.step-card p, .card p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.58; }

.progress-privacy-section { background: linear-gradient(180deg, rgba(9,12,26,.62), rgba(7,9,20,.18)); }
.split-feature-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: rgba(10,13,29,.72); box-shadow: var(--shadow); }
.feature-panel { min-width: 0; padding: clamp(1.6rem, 4vw, 3rem); }
.feature-panel + .feature-panel { border-left: 1px solid var(--line); }
.feature-panel .lead { font-size: 1rem; }
.progress-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr auto 1fr; gap: .55rem; align-items: center; margin-top: 2.25rem; }
.progress-flow i, .privacy-flow i { color: #b690ff; font-style: normal; }
.progress-item { min-width: 0; display: grid; justify-items: center; text-align: center; gap: .5rem; }
.progress-item span { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(167,139,250,.42); border-radius: 50%; background: rgba(139,92,246,.07); color: #c3a9ff; }
.progress-item strong { font-size: .75rem; line-height: 1.3; font-weight: 600; }
.progress-return { margin: 1.25rem auto 0; width: 74%; border-top: 1px dashed rgba(236,72,153,.46); padding-top: .55rem; color: #a8b0c1; text-align: center; font-size: .72rem; }
.privacy-badges { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; margin-top: 1.65rem; }
.privacy-badges span { border: 1px solid var(--line); border-radius: 12px; padding: .68rem .75rem; color: #c9cfdd; font-size: .72rem; }
.privacy-badges span::before { content: "✓"; margin-right: .45rem; color: #b79cff; }
.privacy-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .42rem; align-items: start; margin-top: 1.75rem; }
.privacy-flow div { min-width: 0; display: grid; justify-items: center; gap: .45rem; text-align: center; }
.privacy-flow b { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(167,139,250,.27); border-radius: 50%; background: rgba(139,92,246,.08); color: #cfbdff; font-size: .73rem; }
.privacy-flow span { color: #b3bbca; font-size: .66rem; line-height: 1.35; }
.privacy-link { margin-top: 1.4rem; font-size: .86rem; }

.beta-section { background: radial-gradient(circle at 78% 50%, rgba(122,71,226,.13), transparent 32%); }
.beta-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 2.2rem; align-items: start; border: 1px solid rgba(167,139,250,.25); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); background: linear-gradient(135deg, rgba(24,29,56,.92), rgba(12,15,32,.94)); box-shadow: var(--shadow); }
.beta-points { list-style: none; padding: 0; margin: 1.7rem 0 0; display: grid; gap: .75rem; }
.beta-points li { display: flex; gap: .68rem; color: #c5ccda; font-size: .9rem; }
.beta-points li::before { content: ""; width: 7px; height: 7px; margin-top: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--gradient); }
.form-card { border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 1.3rem; background: rgba(7,9,20,.64); }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .9rem; }
.form-grid-compact .textarea { min-height: 92px; }
.field { display: grid; gap: .38rem; }
.field-full { grid-column: 1 / -1; }
.field label, .field-label { color: #dfe4ef; font-size: .77rem; font-weight: 570; }
.optional { color: var(--muted); font-weight: 430; }
.input, .select, .textarea { width: 100%; border: 1px solid rgba(148,163,184,.2); border-radius: 11px; padding: .72rem .78rem; background: rgba(255,255,255,.035); color: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(167,139,250,.68); box-shadow: 0 0 0 4px rgba(139,92,246,.12); }
.select option { background: #12162a; }
.textarea { min-height: 112px; resize: vertical; }
.consent-stack { display: grid; gap: .62rem; }
.check { display: grid; grid-template-columns: 18px 1fr; gap: .65rem; align-items: start; color: #bdc5d4; font-size: .74rem; line-height: 1.46; }
.check input { width: 17px; height: 17px; margin: .12rem 0 0; accent-color: var(--purple); }
.check a { color: #cfbdff; }
.form-submit-row { align-items: start; }
.form-submit-row .btn { justify-self: start; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-pending { margin-bottom: 1rem; padding: .78rem .85rem; border: 1px solid rgba(245,158,11,.22); border-radius: 12px; background: rgba(245,158,11,.07); color: #f7d79e; font-size: .76rem; }
.form-status { min-height: 22px; font-size: .8rem; }
.form-status.is-error { color: #fda4af; }
.form-status.is-success { color: #6ee7b7; }
.turnstile-slot { min-height: 0; }

.faq-preview-section { background: rgba(8,11,24,.58); }
.faq-preview-layout { display: grid; grid-template-columns: .6fr 1.4fr; gap: 2rem; align-items: start; }
.faq-preview-title .text-link { margin-top: 1.2rem; font-size: .86rem; }
.faq-preview-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; }
.faq-preview-card { border: 1px solid var(--line); border-radius: 16px; padding: 1.15rem; background: linear-gradient(145deg, rgba(20,24,47,.94), rgba(10,13,29,.94)); }
.faq-preview-card h3 { margin: 0 0 .65rem; font-size: .9rem; line-height: 1.35; font-weight: 620; }
.faq-preview-card p { margin: 0; color: #aeb7c7; font-size: .76rem; line-height: 1.52; }

/* Shared supporting pages */
.page-hero { padding: 5.2rem 0 3.2rem; background: radial-gradient(circle at 70% 30%, rgba(139,92,246,.1), transparent 31%); }
.page-hero .lead { margin-top: 1rem; }
.breadcrumbs { margin-bottom: 1.2rem; color: var(--muted); font-size: .82rem; }
.breadcrumbs a { text-decoration: none; }
.content-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 3rem; align-items: start; }
.side-nav { position: sticky; top: 100px; border: 1px solid var(--line); border-radius: 17px; padding: .9rem; background: rgba(18,22,42,.74); }
.side-nav strong { display: block; margin: .25rem .45rem .65rem; font-weight: 650; }
.side-nav a { display: block; padding: .52rem .62rem; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: .8rem; }
.side-nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.prose section { scroll-margin-top: 105px; padding-bottom: 2rem; }
.prose h2 { margin: 0 0 .8rem; font-size: 1.65rem; font-weight: 670; letter-spacing: -.03em; }
.prose h3 { margin: 1.25rem 0 .5rem; font-size: 1.03rem; font-weight: 630; }
.prose p, .prose li { color: var(--muted-2); }
.prose ul { padding-left: 1.2rem; }
.prose a { color: #cfbdff; }
.notice { margin: 0 0 2rem; border: 1px solid rgba(245,158,11,.24); border-radius: 15px; padding: .95rem; background: rgba(245,158,11,.065); color: #f5dfb4; }
.info-box { border-left: 3px solid var(--purple); border-radius: 0 13px 13px 0; padding: .85rem .95rem; background: rgba(139,92,246,.07); color: var(--muted-2); }
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.contact-card { min-height: 190px; display: flex; flex-direction: column; }
.contact-card a { margin-top: auto; color: #cfbdff; font-weight: 620; word-break: break-word; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0; padding: 1.2rem 0; background: transparent; color: #fff; text-align: left; font-weight: 620; cursor: pointer; }
.faq-question span:last-child { color: #bd9cff; font-size: 1.3rem; transition: transform .2s ease; }
.faq-question[aria-expanded="true"] span:last-child { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-answer > div { max-width: 760px; padding: 0 0 1.2rem; color: var(--muted-2); }

.site-footer { border-top: 1px solid var(--line); padding: 3.8rem 0 1.7rem; background: rgba(3,5,12,.52); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3,.7fr); gap: 2.3rem; }
.footer-brand p { max-width: 350px; color: var(--muted); font-size: .84rem; }
.footer-col strong { display: block; margin-bottom: .75rem; font-size: .82rem; font-weight: 650; }
.footer-col a { display: block; margin: .46rem 0; color: var(--muted); text-decoration: none; font-size: .8rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; border-top: 1px solid var(--line); padding-top: 1.2rem; color: var(--muted); font-size: .74rem; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .callout { width: 190px; }
  .callout-insight, .callout-private { right: -6%; }
  .steps-grid { grid-template-columns: repeat(2,1fr); }
  .faq-preview-cards { grid-template-columns: 1fr; }
}
@media (max-width: 930px) {
  .hero-grid, .beta-layout, .split-feature-grid, .faq-preview-layout { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .lead { margin-inline: auto; }
  .hero-copy .actions, .trust-line { justify-content: center; }
  .device-stage { min-height: 610px; }
  .split-feature-grid { overflow: visible; background: transparent; border: 0; gap: 1rem; box-shadow: none; }
  .feature-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(10,13,29,.75); }
  .feature-panel + .feature-panel { border-left: 1px solid var(--line); }
  .beta-layout { gap: 2rem; }
  .beta-copy { max-width: 720px; }
  .footer-grid { grid-template-columns: 1.4fr repeat(2,1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .content-layout { grid-template-columns: 1fr; }
  .side-nav { position: static; }
}
@media (max-width: 720px) {
  .container, .narrow { width: min(calc(100% - 1.35rem), var(--max)); }
  .nav { min-height: 70px; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-links { position: absolute; left: .7rem; right: .7rem; top: 66px; display: none; flex-direction: column; align-items: stretch; gap: .15rem; border: 1px solid var(--line); border-radius: 16px; padding: .7rem; background: rgba(13,16,32,.98); box-shadow: var(--shadow); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: .7rem; border-radius: 9px; }
  .hero { padding-top: 3.8rem; }
  .display { font-size: clamp(2.75rem, 13vw, 4.3rem); }
  .assurance-grid { grid-template-columns: 1fr; padding: 1.1rem 0; }
  .assurance-grid span { text-align: left; }
  .device-stage { min-height: 570px; }
  .phone { width: 300px; transform: none; }
  .phone-screen { min-height: 558px; }
  .callout { display: none; }
  .steps-grid, .grid-4, .grid-3, .grid-2, .form-grid, .privacy-badges, .contact-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .progress-flow { grid-template-columns: 1fr auto 1fr; row-gap: 1.15rem; }
  .progress-flow .progress-item:nth-of-type(3), .progress-flow .progress-item:nth-of-type(4), .progress-flow i:nth-of-type(2), .progress-flow i:nth-of-type(3) { display: none; }
  .privacy-flow { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .privacy-flow i { display: none; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .phone { width: 286px; }
  .phone-screen { min-height: 548px; }
  .footer-grid { grid-template-columns: 1fr; }
  .actions { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}