:root {
  --bg: #06111f;
  --bg-deep: #050914;
  --surface: #101629;
  --surface-2: #151b31;
  --surface-soft: rgba(20, 28, 50, .72);
  --text: #f7f8fc;
  --muted: #9ca6bb;
  --muted-2: #68738a;
  --blue: #438ff2;
  --blue-2: #5869ed;
  --cyan: #21b7e8;
  --red: #fa3d49;
  --red-soft: #4a2030;
  --green: #62cb38;
  --line: rgba(158, 180, 220, .16);
  --shadow: 0 20px 55px rgba(0,0,0,.36);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background:#030811; }
html.menu-open, html.menu-open body { overflow:hidden; }
body {
  margin:0;
  min-width:320px;
  min-height:100vh;
  background:radial-gradient(circle at 50% -10%, #14326c 0, var(--bg) 30rem, #030811 75rem);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; }
.site-shell {
  width:100%;
  min-height:100vh;
  background:linear-gradient(180deg, rgba(20,47,103,.35) 0, var(--bg-deep) 25rem, #080b17 100%);
  overflow:hidden;
}

/* Header */
.site-header {
  width:min(calc(100% - 28px), 1180px);
  height:76px;
  margin:0 auto;
  padding:14px 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:50;
}
.site-header--compact { height:70px; }
.brand {
  grid-column:2;
  justify-self:center;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
}
.brand__icon {
  width:35px;
  height:35px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(24,106,225,.2);
}
.menu-toggle {
  grid-column:1;
  grid-row:1;
  justify-self:start;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(8,12,26,.52);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
}
.menu-toggle span { width:17px; height:2px; border-radius:99px; background:#dce5f5; display:block; }
.header-actions {
  grid-column:3;
  grid-row:1;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:600;
}
.text-button,.contact-link {
  border:1px solid var(--line);
  background:rgba(8,12,26,.45);
  border-radius:999px;
  height:36px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.contact-link { background:#f1f4fb; color:#111827; border-color:transparent; }
.icon { flex:0 0 auto; }

/* Burger drawer */
.menu-layer { position:fixed; inset:0; z-index:90; pointer-events:none; visibility:hidden; }
.menu-layer.is-open { pointer-events:auto; visibility:visible; }
.menu-backdrop { position:absolute; inset:0; border:0; background:rgba(0,3,10,.72); backdrop-filter:blur(8px); opacity:0; transition:opacity .22s ease; }
.menu-layer.is-open .menu-backdrop { opacity:1; }
.menu-panel {
  position:absolute;
  top:0;
  left:0;
  width:min(88vw, 390px);
  height:100%;
  padding:24px 22px calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,#171f37 0,#090e1d 70%);
  border-right:1px solid var(--line);
  box-shadow:30px 0 80px rgba(0,0,0,.4);
  transform:translateX(-103%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
}
.menu-layer.is-open .menu-panel { transform:translateX(0); }
.menu-panel__top { display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--line); }
.menu-panel__brand { display:flex; align-items:center; gap:10px; }
.menu-panel__brand img { width:42px; height:42px; border-radius:13px; }
.menu-panel__brand strong { font-size:18px; }
.menu-close { width:38px; height:38px; border:1px solid var(--line); border-radius:12px; background:#10162a; font-size:27px; line-height:1; cursor:pointer; color:#aeb8ca; }
.menu-nav { display:flex; flex-direction:column; margin-top:23px; }
.menu-nav a { min-height:57px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:18px; font-weight:750; }
.menu-nav a span { color:#637089; font-size:11px; letter-spacing:.1em; }
.menu-actions { margin-top:auto; display:grid; gap:9px; }
.menu-legal { display:flex; gap:16px; flex-wrap:wrap; margin-top:19px; color:#8894aa; font-size:11px; }

main { display:block; }
.hero {
  width:min(calc(100% - 28px), 900px);
  min-height:760px;
  margin:0 auto;
  position:relative;
  padding:42px 8px 0;
  text-align:center;
  overflow:hidden;
}
.hero-glow { position:absolute; width:420px; height:420px; left:50%; transform:translateX(-50%); top:-160px; background:radial-gradient(circle, rgba(78,128,255,.36), rgba(53,81,197,.02) 68%); pointer-events:none; }
.eyebrow,.section-kicker { color:#7db5ff; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.hero h1 { margin:12px auto 13px; font-size:39px; line-height:1.05; letter-spacing:-.052em; max-width:420px; }
.hero h1 span { color:#85b8ff; }
.hero-copy { color:#c1c9d8; font-size:16px; line-height:1.55; max-width:390px; margin:0 auto; }
.hero-actions { margin-top:23px; display:flex; flex-direction:column; align-items:center; gap:13px; position:relative; z-index:4; }
.button { min-height:54px; padding:0 20px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; font-size:16px; border:0; cursor:pointer; transition:transform .18s ease, filter .18s ease; }
.button:hover { transform:translateY(-1px); filter:brightness(1.05); }
.button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.button--primary { background:linear-gradient(105deg, #506eea, #3f94f0); color:white; box-shadow:0 14px 30px rgba(50,120,240,.28), 0 0 28px rgba(55,143,245,.12); }
.button--ghost { background:rgba(255,255,255,.07); border:1px solid rgba(135,180,255,.22); }
.button--wide { width:100%; }
.button--hero { min-width:240px; }
.security-pill { color:#b8c4d8; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; }
.security-pill .icon { color:var(--green); }
.security-pill--center { justify-content:center; }
.phone-stage { position:absolute; left:50%; transform:translateX(-50%); bottom:-146px; width:min(100%,620px); height:500px; z-index:2; }
.phone { position:absolute; width:260px; filter:drop-shadow(0 30px 35px rgba(0,0,0,.45)); }
.phone--left { left:calc(50% - 245px); top:40px; transform:rotate(-4deg); }
.phone--right { right:calc(50% - 245px); top:9px; transform:rotate(4deg); }
.phone-fade { position:absolute; inset:auto 0 0; height:210px; background:linear-gradient(transparent, #080b17 85%); z-index:3; }

.section-card,.section-block,.showcase,.final-cta { width:min(calc(100% - 32px), 760px); margin:16px auto; }
.section-card { background:linear-gradient(155deg, rgba(27,35,63,.93), rgba(14,19,36,.95)); border:1px solid var(--line); border-radius:var(--radius-xl); padding:26px 22px; box-shadow:var(--shadow); }
.section-card h2,.section-block h2,.showcase h2 { font-size:27px; line-height:1.12; letter-spacing:-.035em; margin:9px 0 11px; }
.section-card p,.section-block p,.showcase p { color:var(--muted); line-height:1.55; margin:0 0 21px; }
.support-strip { text-align:center; }
.section-block { padding:35px 7px; }
.feature-cloud { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.feature-chip { border:1px solid var(--line); background:var(--surface-soft); border-radius:17px; min-height:90px; padding:14px; display:flex; flex-direction:column; gap:12px; }
.feature-chip div { color:#92b9ff; width:38px; height:38px; border-radius:12px; background:rgba(70,118,255,.1); border:1px solid rgba(89,132,255,.18); display:grid; place-items:center; }
.feature-chip span { font-weight:700; font-size:14px; }
.steps ol { list-style:none; margin:20px 0 24px; padding:0; }
.steps li { display:flex; gap:15px; padding:18px 0; border-top:1px solid var(--line); }
.steps li>span { width:37px; height:37px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#506eea,#3e93ef); font-weight:800; font-size:13px; flex:0 0 auto; }
.steps strong { display:block; font-size:16px; }
.steps li p { margin:5px 0 0; font-size:13px; }
.showcase { min-height:560px; border:1px solid var(--line); border-radius:var(--radius-xl); background:linear-gradient(180deg,#11182e,#080d1b); overflow:hidden; position:relative; padding:26px 22px 0; }
.showcase-copy { position:relative; z-index:3; }
.showcase-copy .button { font-size:14px; min-height:48px; }
.showcase-phone { height:355px; margin:20px -10px 0; position:relative; overflow:hidden; }
.showcase-phone img { width:270px; position:absolute; top:0; left:50%; transform:translateX(-50%); filter:drop-shadow(0 20px 35px rgba(0,0,0,.4)); }
.showcase-phone::after { content:""; position:absolute; inset:auto 0 0; height:120px; background:linear-gradient(transparent,#090e1c); }
.showcase--identity { min-height:620px; }
.showcase-phone--low { height:390px; }
.final-cta { text-align:center; }
.final-cta .security-pill { justify-content:center; margin-top:14px; }
.final-cta h2 { margin-top:0; }

/* Footer */
.site-footer { margin-top:46px; border-top:1px solid var(--line); background:#050812; }
.site-footer__inner { width:min(calc(100% - 32px), 900px); margin:0 auto; padding:40px 6px 28px; }
.footer-brand { display:flex; align-items:center; gap:11px; margin-bottom:20px; }
.footer-brand img { width:46px; height:46px; border-radius:14px; }
.footer-brand strong,.footer-brand span { display:block; }
.footer-brand span { color:var(--muted); font-size:12px; margin-top:3px; }
.site-footer address { color:var(--muted); font-size:12px; line-height:1.65; font-style:normal; }
.site-footer address a { color:#d7deeb; }
.footer-links { margin:24px 0; display:flex; flex-direction:column; }
.footer-links a { display:flex; justify-content:space-between; padding:13px 0; border-top:1px solid var(--line); font-size:13px; font-weight:600; }
.footer-copy { color:var(--muted-2); font-size:11px; margin:0; }

/* Product */
.product-hero { width:min(calc(100% - 28px), 860px); padding:35px 8px 0; margin:0 auto; text-align:center; min-height:690px; position:relative; overflow:hidden; }
.product-hero h1 { margin:14px auto 12px; font-size:32px; line-height:1.08; letter-spacing:-.045em; max-width:620px; }
.danger-label { display:inline-block; color:#ff7881; background:rgba(255,62,74,.1); border:1px solid rgba(255,62,74,.2); border-radius:999px; padding:7px 11px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.product-hero p { color:#b7c0d1; font-size:15px; line-height:1.55; max-width:620px; margin-left:auto; margin-right:auto; }
.product-hero .security-pill { justify-content:center; margin-top:13px; }
.product-phones { height:330px; margin:24px auto 0; position:relative; width:min(100%,560px); }
.product-phones img { position:absolute; width:215px; top:0; filter:drop-shadow(0 24px 30px rgba(0,0,0,.5)); }
.product-phones img:first-child { left:30px; transform:rotate(-5deg); }
.product-phones img:last-child { right:30px; transform:rotate(5deg); top:18px; }
.product-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:130px; background:linear-gradient(transparent,#080b17); z-index:2; }
.product-features { width:min(calc(100% - 32px), 880px); }
.product-feature-list { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.product-feature { display:flex; align-items:flex-start; gap:14px; padding:17px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.product-feature__icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; color:#8eb9ff; background:rgba(65,128,255,.1); flex:0 0 auto; }
.product-feature strong { font-size:15px; }
.product-feature p { font-size:12px; margin:5px 0 0; }
.webshield-preview { width:min(calc(100% - 32px), 820px); padding-bottom:0; overflow:hidden; }
.webshield-crop { height:360px; overflow:hidden; margin-top:4px; }
.webshield-crop img { width:275px; display:block; margin:0 auto; }
.compact-steps { width:min(calc(100% - 44px), 760px); margin:38px auto; }
.compact-steps h2 { font-size:27px; margin:9px 0; }
.product-page .final-cta h2 { font-size:23px; }

/* Funnel */
.funnel-page { min-height:100vh; background:linear-gradient(180deg,#17356d 0,#0b1023 12rem,#080b17 36rem); }
.funnel-main { width:min(calc(100% - 28px), 610px); margin:0 auto; padding:5px 0 40px; }
.funnel-top { display:flex; align-items:center; justify-content:center; text-align:center; font-size:16px; font-weight:800; margin:4px 0 22px; min-height:42px; }
.scanner-card { text-align:center; padding:27px 18px 22px; background:rgba(12,17,34,.88); border:1px solid var(--line); border-radius:27px; box-shadow:var(--shadow); }
.scanner-orbit { width:146px; height:146px; border-radius:50%; border:1px solid rgba(84,145,255,.2); margin:0 auto 18px; display:grid; place-items:center; position:relative; background:radial-gradient(circle,rgba(55,128,240,.2),transparent 65%); }
.scanner-orbit::before { content:""; position:absolute; inset:-1px; border-radius:inherit; border-top:3px solid #4b98f4; animation:spin 1.6s linear infinite; }
.scanner-shield { width:76px; height:76px; display:grid; place-items:center; color:#8fbaff; border-radius:24px; background:linear-gradient(145deg,#17264a,#0b1328); box-shadow:inset 0 0 0 1px rgba(127,177,255,.14); }
@keyframes spin { to{ transform:rotate(360deg); } }
.scanner-card h1 { font-size:25px; margin:0 0 8px; letter-spacing:-.03em; }
.scanner-card>p { font-size:12px; color:var(--muted); line-height:1.5; margin:0 auto 23px; max-width:390px; }
.progress-track { height:8px; background:#20263a; border-radius:99px; overflow:hidden; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#536be9,#399cff); box-shadow:0 0 15px rgba(64,151,255,.5); }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-top:8px; }
.progress-meta strong { color:white; }
.scan-list { display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.scan-row { display:grid; grid-template-columns:35px 1fr 24px; gap:12px; align-items:center; background:#12172a; border:1px solid var(--line); border-radius:17px; padding:13px; transition:border-color .3s, background .3s; }
.scan-state { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#1b2136; color:#8994aa; font-size:12px; font-weight:800; }
.scan-row strong { font-size:13px; }
.scan-row p { color:var(--muted-2); font-size:10px; margin:3px 0 0; }
.scan-done { color:var(--green); opacity:.1; transition:opacity .3s; }
.scan-row.is-done { border-color:rgba(98,203,56,.23); background:#111b26; }
.scan-row.is-done .scan-state { background:rgba(98,203,56,.14); color:#8fe46a; }
.scan-row.is-done .scan-done { opacity:1; }
.complete-backdrop { position:fixed; inset:0; z-index:70; background:rgba(1,4,11,.75); backdrop-filter:blur(10px); display:grid; align-items:end; justify-items:center; }
.complete-card { width:min(calc(100% - 24px),480px); border-radius:28px 28px 0 0; padding:30px 22px calc(28px + env(safe-area-inset-bottom)); background:linear-gradient(160deg,#171d32,#0c1020); border:1px solid var(--line); box-shadow:0 -20px 80px rgba(0,0,0,.5); }
.complete-icon,.payment-icon,.mail-lock { width:58px; height:58px; display:grid; place-items:center; color:white; border-radius:18px; background:linear-gradient(135deg,#566de9,#3d9af3); margin-bottom:17px; }
.complete-card h2 { font-size:26px; letter-spacing:-.035em; margin:8px 0; }
.complete-card>p { color:var(--muted); font-size:13px; line-height:1.5; }
.complete-results { display:flex; flex-direction:column; gap:9px; margin:20px 0; }
.complete-results span { color:#c9d2e1; font-size:12px; display:flex; gap:8px; align-items:center; }
.complete-results .icon { color:var(--green); }

/* Mail and checkout */
.mail-card,.payment-card { margin-top:20px; padding:30px 24px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(155deg,rgba(24,31,55,.95),rgba(11,15,29,.96)); box-shadow:var(--shadow); }
.mail-lock,.payment-icon { margin-left:auto; margin-right:auto; }
.mail-card,.payment-card { text-align:center; }
.mail-card h1,.payment-card h1 { font-size:29px; line-height:1.1; letter-spacing:-.04em; margin:9px 0 10px; }
.mail-card h1 span { color:#7fb4ff; }
.mail-card>p,.payment-card>p { color:var(--muted); font-size:13px; line-height:1.55; max-width:430px; margin-left:auto; margin-right:auto; }
#mail-form { margin-top:22px; }
#lead-email,.login-modal input { width:100%; height:56px; border-radius:15px; border:1px solid rgba(155,177,215,.28); background:#080d1b; color:white; padding:0 15px; outline:none; }
#lead-email:focus,.login-modal input:focus { border-color:#4b94ee; box-shadow:0 0 0 3px rgba(65,146,240,.1); }
.form-error { min-height:17px; color:#ff6972; font-size:11px; margin:6px 0; text-align:left; }
.domain-picks { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:5px 0 14px; }
.domain-picks button { border:1px solid var(--line); background:#11172a; border-radius:10px; height:36px; color:#aeb8c9; font-size:10px; cursor:pointer; padding:0 4px; }
.mail-card .security-pill,.payment-card .security-pill { justify-content:center; margin-top:14px; }
.checkout-summary { margin:22px 0 16px; border:1px solid var(--line); border-radius:17px; overflow:hidden; background:#0b1020; text-align:left; }
.checkout-summary div { padding:14px 15px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); }
.checkout-summary div:first-child { border-top:0; }
.checkout-summary span { color:var(--muted); font-size:11px; }
.checkout-summary strong { font-size:12px; text-align:right; }

/* Login */
.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(0,3,10,.76); backdrop-filter:blur(10px); }
.login-modal { position:relative; width:min(100%,390px); background:linear-gradient(150deg,#181f36,#0c1020); border:1px solid var(--line); border-radius:28px; padding:27px 22px 24px; box-shadow:0 30px 90px rgba(0,0,0,.62); }
.modal-close { position:absolute; right:15px; top:13px; border:0; background:transparent; font-size:28px; color:#8f9ab0; cursor:pointer; }
.modal-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; color:#85b5ff; background:rgba(68,137,244,.12); }
.login-modal h2 { font-size:27px; margin:15px 0 5px; }
.login-modal>p { color:var(--muted); font-size:13px; margin:0 0 20px; }
.login-modal label { display:block; font-size:12px; color:#c7cfdd; margin:0 0 13px; }
.login-modal input { margin-top:7px; }
.modal-support { display:block; text-align:center; color:#8eb9ff; font-size:12px; margin-top:15px; }
.login-success { min-height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; text-align:center; }
.login-success .icon { color:var(--green); }
.login-success strong { font-size:19px; }
.login-success span { color:var(--muted); font-size:12px; line-height:1.5; }

/* Legal */
.legal-main { width:min(calc(100% - 32px), 900px); margin:0 auto; padding:42px 0 20px; }
.legal-main>h1 { font-size:36px; letter-spacing:-.045em; margin:10px 0 6px; }
.effective { color:var(--muted); font-size:12px; margin-bottom:28px; }
.legal-main section { padding:21px 0; border-top:1px solid var(--line); }
.legal-main section h2 { font-size:18px; margin:0 0 9px; line-height:1.35; }
.legal-main section p { color:#aab3c3; font-size:13px; line-height:1.75; margin:0; }
.not-found { width:min(calc(100% - 32px),520px); min-height:100vh; margin:0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px; text-align:center; }
.not-found img { width:90px; border-radius:26px; }
.not-found p { color:var(--muted); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (min-width: 760px) {
  .site-header { height:84px; }
  .brand { font-size:19px; }
  .brand__icon { width:39px; height:39px; }
  .hero { min-height:820px; padding-top:70px; }
  .hero h1 { font-size:52px; max-width:650px; }
  .hero-copy { font-size:18px; max-width:600px; }
  .phone-stage { width:720px; height:520px; bottom:-145px; }
  .phone { width:290px; }
  .phone--left { left:70px; }
  .phone--right { right:70px; }
  .section-card { padding:34px 34px; }
  .section-card h2,.section-block h2,.showcase h2 { font-size:32px; }
  .feature-cloud { grid-template-columns:repeat(3,1fr); }
  .feature-chip { min-height:110px; }
  .showcase { min-height:480px; width:min(calc(100% - 40px), 920px); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:26px; padding:38px 42px 0; }
  .showcase-phone { height:440px; margin:0; align-self:end; }
  .showcase-phone img { width:320px; }
  .showcase--identity { min-height:510px; }
  .showcase-phone--low { height:470px; }
  .site-footer__inner { display:grid; grid-template-columns:1.15fr 1fr; gap:28px 50px; }
  .footer-brand,.site-footer address { grid-column:1; }
  .footer-links { grid-column:2; grid-row:1 / span 2; margin:0; }
  .footer-copy { grid-column:1 / -1; }
  .product-hero { min-height:760px; padding-top:60px; }
  .product-hero h1 { font-size:40px; max-width:700px; }
  .product-hero p { font-size:17px; }
  .product-phones { height:380px; width:660px; }
  .product-phones img { width:250px; }
  .product-phones img:first-child { left:65px; }
  .product-phones img:last-child { right:65px; }
  .product-feature-list { display:grid; grid-template-columns:1fr 1fr; }
  .webshield-preview { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:center; padding:38px 38px 0; }
  .webshield-crop { margin-top:0; height:400px; }
  .webshield-crop img { width:300px; }
  .product-page .final-cta h2 { font-size:28px; }
  .complete-backdrop { align-items:center; }
  .complete-card { border-radius:28px; }
  .mail-card,.payment-card { margin-top:30px; padding:38px 38px; }
  .legal-main>h1 { font-size:46px; }
}

@media (min-width: 1080px) {
  .hero { min-height:850px; }
  .hero h1 { font-size:60px; max-width:760px; }
  .hero-copy { font-size:19px; }
  .section-card,.section-block { width:min(calc(100% - 48px), 900px); }
  .showcase { width:min(calc(100% - 48px), 980px); }
  .product-features { width:min(calc(100% - 48px), 980px); }
  .webshield-preview { width:min(calc(100% - 48px), 940px); }
}

@media (max-width: 590px) {
  .header-actions .contact-link { display:none; }
  .header-actions .text-button span { display:none; }
  .header-actions .text-button { width:38px; padding:0; justify-content:center; }
  .site-header { grid-template-columns:48px 1fr 48px; }
  .brand { font-size:16px; }
  .brand__icon { width:33px; height:33px; }
  .product-phones img:first-child { left:-22px; }
  .product-phones img:last-child { right:-22px; }
}

@media (max-width: 365px) {
  .site-header { width:calc(100% - 22px); }
  .hero { width:calc(100% - 22px); }
  .hero h1 { font-size:35px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* v3 layout correction: narrow mobile-first content, full-width desktop header */
html, body { overflow-x:hidden; }
.site-shell { overflow-x:clip; }

.site-header {
  width:100%;
  height:76px;
  margin:0;
  padding:14px clamp(16px, 3vw, 44px);
  display:flex;
  align-items:center;
  gap:10px;
}
.site-header--compact { height:70px; }
.brand {
  order:1;
  grid-column:auto;
  justify-self:auto;
  margin-right:auto;
  flex:0 1 auto;
  min-width:0;
  justify-content:flex-start;
  font-size:17px;
  white-space:nowrap;
}
.brand__icon { width:35px; height:35px; }
.header-actions {
  order:2;
  grid-column:auto;
  grid-row:auto;
  justify-self:auto;
  margin-left:auto;
  flex:0 0 auto;
}
.menu-toggle {
  order:3;
  grid-column:auto;
  grid-row:auto;
  justify-self:auto;
  flex:0 0 auto;
  margin-left:2px;
}
.menu-panel {
  left:auto;
  right:0;
  border-right:0;
  border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(0,0,0,.4);
  transform:translateX(103%);
}
.menu-layer.is-open .menu-panel { transform:translateX(0); }

/* Keep the actual site content intentionally narrow on desktop, just like mobile. */
.hero,
.section-card,
.section-block,
.showcase,
.final-cta,
.product-hero,
.product-features,
.webshield-preview,
.compact-steps,
.funnel-main,
.legal-main,
.site-footer__inner {
  width:min(calc(100% - 28px), 540px);
}

.hero {
  min-height:760px;
  padding:42px 8px 0;
}
.hero h1 { font-size:39px; max-width:430px; }
.hero-copy { font-size:16px; max-width:400px; }
.phone-stage { width:min(620px, 150vw); height:500px; bottom:-146px; }
.phone { width:260px; }
.phone--left { left:calc(50% - 245px); top:40px; }
.phone--right { right:calc(50% - 245px); top:9px; }

.section-card { padding:26px 22px; }
.section-card h2,.section-block h2,.showcase h2 { font-size:27px; }
.feature-cloud { grid-template-columns:1fr 1fr; }
.feature-chip { min-height:90px; }

.showcase {
  min-height:560px;
  display:block;
  padding:26px 22px 0;
}
.showcase-phone { height:355px; margin:20px -10px 0; }
.showcase-phone img { width:270px; }
.showcase--identity { min-height:620px; }
.showcase-phone--low { height:390px; }

.site-footer__inner {
  display:block;
  padding:40px 6px 28px;
}
.footer-brand,.site-footer address,.footer-links,.footer-copy {
  grid-column:auto;
  grid-row:auto;
}
.footer-links { margin:24px 0; }

.product-hero {
  min-height:690px;
  padding:35px 8px 0;
}
.product-hero h1 { font-size:32px; max-width:500px; }
.product-hero p { font-size:15px; max-width:470px; }
.product-phones { width:min(560px, 145vw); height:350px; }
.product-phones img { width:230px; }
.product-phones img:first-child { left:28px; }
.product-phones img:last-child { right:28px; }
.product-feature-list { display:flex; flex-direction:column; }
.webshield-preview { display:block; padding:26px 22px 0; }
.webshield-crop { margin-top:4px; height:360px; }
.webshield-crop img { width:275px; }
.product-page .final-cta h2 { font-size:23px; }

.legal-main { padding:42px 0 20px; }
.legal-main>h1 { font-size:36px; }

@media (min-width:760px) {
  .site-header { height:84px; }
  .brand { font-size:19px; }
  .brand__icon { width:39px; height:39px; }
  .hero { min-height:790px; padding-top:58px; }
  .hero h1 { font-size:42px; max-width:470px; }
  .hero-copy { font-size:16px; max-width:420px; }
  .product-hero { min-height:720px; padding-top:48px; }
  .product-hero h1 { font-size:34px; max-width:500px; }
  .product-hero p { font-size:15px; }
  .legal-main>h1 { font-size:39px; }
}

@media (min-width:1080px) {
  .hero,
  .section-card,
  .section-block,
  .showcase,
  .final-cta,
  .product-hero,
  .product-features,
  .webshield-preview,
  .compact-steps,
  .funnel-main,
  .legal-main,
  .site-footer__inner {
    width:540px;
  }
}

@media (max-width:720px) {
  .site-header { padding-left:16px; padding-right:16px; }
  .header-actions { display:none; }
  .brand { font-size:16px; }
  .brand__icon { width:34px; height:34px; }
  .menu-toggle { width:42px; height:42px; }
}

@media (max-width:390px) {
  .hero,
  .section-card,
  .section-block,
  .showcase,
  .final-cta,
  .product-hero,
  .product-features,
  .webshield-preview,
  .compact-steps,
  .funnel-main,
  .legal-main,
  .site-footer__inner { width:calc(100% - 22px); }
  .hero h1 { font-size:35px; }
  .hero-copy { font-size:15px; }
  .phone-stage { width:550px; }
  .phone { width:245px; }
  .phone--left { left:calc(50% - 226px); }
  .phone--right { right:calc(50% - 226px); }
}

/* =========================================================
   v4: competitor-like narrow mobile column + true fluid header
   ========================================================= */
:root { --content-column: 390px; }
html, body, #app, .site-shell { width:100%; max-width:100%; }
body { min-width:0; overflow-x:hidden; }
.site-shell { overflow-x:hidden; }
main, section, article, div { min-width:0; }
h1,h2,h3,p,a,span,strong { overflow-wrap:normal; word-break:normal; }

/* Header is viewport-wide. The product content below stays narrow. */
.site-header,
.site-header.site-header--compact {
  width:100%;
  max-width:none;
  height:64px;
  margin:0;
  padding:9px max(10px, env(safe-area-inset-left)) 9px max(10px, env(safe-area-inset-right));
  display:flex;
  align-items:center;
  gap:5px;
}
.brand {
  order:1;
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  margin:0 auto 0 0;
  gap:6px;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}
.brand__icon { width:31px; height:31px; border-radius:9px; flex:0 0 auto; }
.header-actions {
  order:2;
  display:flex !important;
  align-items:center;
  flex:0 0 auto;
  margin:0;
  gap:4px;
  font-size:11px;
}
.text-button,.contact-link {
  height:32px;
  min-width:0;
  padding:0 9px;
  border-radius:999px;
  font-size:11.5px;
  line-height:1;
  white-space:nowrap;
  gap:0;
}
.text-button { background:#050914; border-color:rgba(255,255,255,.12); }
.text-button .icon { display:none; }
.contact-link { background:linear-gradient(105deg,#5875ef,#4599f2); color:#fff; }
.menu-toggle {
  order:3;
  flex:0 0 31px;
  width:31px;
  height:31px;
  margin:0 0 0 1px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  gap:3px;
}
.menu-toggle span { width:17px; height:1.8px; }

/* Drawer closes with the reverse of its opening animation. */
.menu-layer {
  pointer-events:none;
  visibility:hidden;
  transition:visibility 0s linear .26s;
}
.menu-layer.is-open {
  pointer-events:auto;
  visibility:visible;
  transition-delay:0s;
}
.menu-backdrop { transition:opacity .26s ease; }
.menu-panel {
  left:auto;
  right:0;
  width:min(86vw,350px);
  border-right:0;
  border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(0,0,0,.4);
  transform:translateX(103%);
  transition:transform .26s cubic-bezier(.22,.8,.24,1);
}
.menu-layer.is-open .menu-panel { transform:translateX(0); }
.menu-nav a {
  min-height:60px;
  justify-content:flex-start;
  font-size:17px;
  font-weight:750;
}
.menu-actions,.menu-legal { display:none; }

/* Every marketing/product block is the same thin, centered column on mobile and desktop. */
.hero,
.section-card,
.section-block,
.showcase,
.final-cta,
.product-hero,
.product-features,
.webshield-preview,
.compact-steps,
.funnel-main,
.legal-main,
.site-footer__inner {
  width:min(calc(100% - 20px), var(--content-column)) !important;
  max-width:var(--content-column) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero {
  min-height:710px;
  padding:34px 10px 0;
  text-align:center;
}
.hero-glow { width:360px; height:360px; top:-145px; }
.eyebrow,.section-kicker { font-size:11px; letter-spacing:.11em; }
.hero h1 {
  width:100%;
  max-width:350px;
  margin:11px auto 13px;
  font-size:33px;
  line-height:1.07;
  letter-spacing:-.045em;
}
.hero-copy {
  width:100%;
  max-width:350px;
  font-size:14.5px;
  line-height:1.55;
}
.hero-actions { margin-top:22px; }
.button--hero { width:min(100%,300px); min-width:0; }
.phone-stage {
  width:450px;
  max-width:none;
  height:420px;
  bottom:-116px;
}
.phone { width:205px; }
.phone--left { left:28px; top:50px; }
.phone--right { right:28px; top:18px; }
.phone-fade { height:150px; }

.section-card { padding:25px 22px; }
.section-card h2,.section-block h2,.showcase h2 { font-size:25px; }
.section-block { padding:32px 6px; }
.feature-cloud { grid-template-columns:1fr 1fr !important; gap:9px; }
.feature-chip { min-height:86px; padding:13px; }
.showcase {
  display:block !important;
  min-height:540px;
  padding:25px 21px 0;
}
.showcase-phone { height:350px; margin:18px -8px 0; }
.showcase-phone img { width:265px; }
.showcase--identity { min-height:600px; }
.showcase-phone--low { height:382px; }

.product-hero {
  min-height:660px;
  padding:32px 10px 0;
}
.product-hero h1 { max-width:350px; font-size:29px; line-height:1.08; }
.product-hero p { max-width:345px; font-size:14px; }
.product-phones { width:440px; height:330px; }
.product-phones img { width:200px; }
.product-phones img:first-child { left:30px; }
.product-phones img:last-child { right:30px; }
.product-feature-list { display:flex !important; flex-direction:column; }
.webshield-preview { display:block !important; padding:25px 21px 0; }
.webshield-crop { height:350px; }
.webshield-crop img { width:265px; }
.compact-steps { margin-top:34px !important; margin-bottom:34px !important; }

/* Funnel: fit the active scanning state comfortably inside one phone viewport. */
.funnel-page { min-height:100svh; background:linear-gradient(180deg,#17356d 0,#0b1023 10rem,#080b17 31rem); }
.funnel-main { padding:0 0 14px; }
.funnel-top {
  min-height:25px;
  margin:0 0 7px;
  font-size:13px;
}
.scanner-card {
  padding:12px 13px 11px;
  border-radius:20px;
}
.scanner-orbit {
  width:82px;
  height:82px;
  margin:0 auto 7px;
}
.scanner-shield { width:48px; height:48px; border-radius:15px; }
.scanner-card h1 { font-size:20px; margin:0 0 3px; }
.scanner-card>p { font-size:10.5px; line-height:1.35; margin:0 auto 9px; }
.progress-track { height:6px; }
.progress-track span { transition:width .08s linear; }
.progress-meta { margin-top:5px; font-size:10px; }
.scan-list { gap:5px; margin-top:7px; }
.scan-row {
  min-height:47px;
  grid-template-columns:28px 1fr 19px;
  gap:8px;
  padding:7px 9px;
  border-radius:13px;
}
.scan-state { width:27px; height:27px; border-radius:8px; font-size:10px; }
.scan-row strong { display:block; font-size:11.2px; line-height:1.15; }
.scan-row p { font-size:8.8px; line-height:1.2; margin:2px 0 0; }
.complete-card {
  width:min(calc(100% - 20px),390px);
  max-height:calc(100svh - 20px);
  overflow:auto;
  padding:20px 18px calc(18px + env(safe-area-inset-bottom));
}
.complete-icon { width:48px; height:48px; margin-bottom:11px; }
.complete-card h2 { font-size:22px; }
.complete-results { gap:6px; margin:13px 0; }
.complete-results span { font-size:10.5px; }

/* Legal pages: competitor-like structure and typography, adapted to SentriON. */
.legal-main { padding:34px 4px 18px; }
.legal-main>h1 { font-size:32px !important; line-height:1.08; margin:0 0 6px; }
.effective { margin:0 0 25px; font-size:11.5px; }
.legal-content>p { color:#aeb8c9; font-size:12.5px; line-height:1.68; margin:0 0 15px; }
.legal-content a { color:#83b7ff; text-decoration:underline; text-underline-offset:2px; }
.legal-main section {
  padding:20px 0;
  border-top:1px solid var(--line);
}
.legal-main section h2 {
  margin:0 0 10px;
  font-size:17px;
  line-height:1.3;
}
.legal-main section h3 {
  margin:17px 0 8px;
  font-size:14px;
  line-height:1.35;
}
.legal-main section p,
.legal-main section li {
  color:#aeb8c9;
  font-size:12.5px;
  line-height:1.7;
}
.legal-main section p { margin:0 0 13px; }
.legal-main section ul { margin:8px 0 12px; padding-left:19px; }
.legal-main section li { margin:6px 0; }
.legal-section--first { border-top:0 !important; padding-top:0 !important; }
.legal-lead { color:#f6f8fc !important; letter-spacing:.015em; }
.legal-contact { color:#d4dbe7 !important; }
.feature-legal-list strong { color:#edf2fb; }

.site-footer__inner { display:block !important; padding:36px 5px 25px; }
.footer-brand,.site-footer address,.footer-links,.footer-copy { grid-column:auto !important; grid-row:auto !important; }
.footer-links { margin:23px 0 !important; }

/* Never widen the center column at desktop breakpoints. */
@media (min-width:760px) {
  .site-header,.site-header.site-header--compact { height:68px; padding-left:24px; padding-right:24px; }
  .brand { font-size:15px; }
  .brand__icon { width:33px; height:33px; }
  .text-button,.contact-link { height:34px; padding-left:11px; padding-right:11px; font-size:12px; }
  .menu-toggle { width:33px; height:33px; flex-basis:33px; }
  .hero { min-height:720px; padding-top:40px; }
  .hero h1 { font-size:34px; max-width:355px; }
  .hero-copy { font-size:14.5px; max-width:350px; }
  .section-card h2,.section-block h2,.showcase h2 { font-size:25px; }
  .feature-cloud { grid-template-columns:1fr 1fr !important; }
  .showcase { display:block !important; min-height:540px; padding:25px 21px 0; }
  .showcase-phone { height:350px; margin:18px -8px 0; }
  .showcase-phone img { width:265px; }
  .showcase--identity { min-height:600px; }
  .product-hero { min-height:660px; padding-top:32px; }
  .product-hero h1 { font-size:29px; max-width:350px; }
  .product-hero p { font-size:14px; max-width:345px; }
  .product-feature-list { display:flex !important; }
  .webshield-preview { display:block !important; padding:25px 21px 0; }
  .legal-main>h1 { font-size:32px !important; }
}

@media (max-width:390px) {
  .site-header,.site-header.site-header--compact { padding-left:9px; padding-right:9px; gap:3px; }
  .brand { gap:5px; font-size:13.2px; }
  .brand__icon { width:29px; height:29px; }
  .header-actions { gap:3px; }
  .text-button,.contact-link { height:30px; padding:0 7px; font-size:10.7px; }
  .menu-toggle { width:29px; height:29px; flex-basis:29px; }
  .hero,
  .section-card,
  .section-block,
  .showcase,
  .final-cta,
  .product-hero,
  .product-features,
  .webshield-preview,
  .compact-steps,
  .funnel-main,
  .legal-main,
  .site-footer__inner { width:calc(100% - 18px) !important; }
  .hero h1 { font-size:31px; max-width:330px; }
  .hero-copy { font-size:14px; max-width:330px; }
}

@media (max-width:340px) {
  .site-header,.site-header.site-header--compact { padding-left:7px; padding-right:7px; gap:2px; }
  .brand { font-size:12px; gap:4px; }
  .brand__icon { width:27px; height:27px; }
  .text-button,.contact-link { padding:0 6px; font-size:10px; }
  .menu-toggle { width:27px; height:27px; flex-basis:27px; }
  .menu-toggle span { width:15px; }
  .hero h1 { font-size:29px; }
  .feature-cloud { grid-template-columns:1fr !important; }
}


/* =========================================================
   v5: mobile header, centered completion modal, footer badges
   ========================================================= */
/* An older mobile rule hid Contact us. Keep both primary header actions visible. */
.header-actions .contact-link {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}
.header-actions .text-button {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

/* The completion state must stay centered on short screens such as iPhone SE. */
.complete-backdrop {
  align-items:center !important;
  justify-items:center;
  padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  overflow:auto;
}
.complete-card {
  border-radius:24px !important;
  max-height:min(620px, calc(100svh - 20px));
  margin:auto;
  padding:17px 18px 16px;
}
.complete-card .complete-icon { width:44px; height:44px; border-radius:14px; margin-bottom:8px; }
.complete-card .section-kicker { font-size:10px; }
.complete-card h2 { margin:6px 0; font-size:20px; line-height:1.15; }
.complete-card>p { margin:0; font-size:11.5px; line-height:1.4; }
.complete-results { gap:5px; margin:10px 0 12px; }
.complete-results span { font-size:10px; line-height:1.2; }
.complete-card .button { min-height:52px; }

/* Compact trust/payment strip directly below Contact Us in the footer. */
.footer-trust {
  display:grid;
  grid-template-columns:1.65fr 1.25fr .82fr .82fr;
  gap:7px;
  align-items:center;
  margin:-8px 0 22px;
}
.trust-badge {
  height:39px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.12);
  background:#f7f8fb;
  color:#111827;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  overflow:hidden;
}
.trust-badge small,
.trust-badge strong { display:block; white-space:nowrap; }
.trust-badge small { font-size:6.7px; line-height:1; font-weight:500; }
.trust-badge strong { font-size:11px; line-height:1.05; }
.trust-badge--appstore { background:#050505; color:#fff; padding:0 6px; justify-content:flex-start; }
.trust-apple {
  width:20px; height:23px; position:relative; display:block; flex:0 0 20px;
  font-size:0;
}
.trust-apple::before {
  content:""; position:absolute; width:13px; height:15px; left:3px; top:7px;
  background:#fff; border-radius:50% 50% 45% 45%; transform:rotate(-7deg);
}
.trust-apple::after {
  content:""; position:absolute; width:7px; height:5px; left:10px; top:2px;
  background:#fff; border-radius:7px 1px 7px 1px; transform:rotate(-30deg);
}
.trust-badge--trustpilot { border-color:#00b67a; padding:0 5px; justify-content:flex-start; }
.trust-star { color:#00b67a; font-size:18px; line-height:1; }
.trust-badge--trustpilot strong { font-size:9px; }
.trust-badge--visa strong { color:#1a1f71; font-size:15px; font-style:italic; letter-spacing:-.06em; }
.mastercard-mark { position:relative; display:block; width:32px; height:20px; }
.mastercard-mark i { position:absolute; top:2px; width:18px; height:18px; border-radius:50%; }
.mastercard-mark i:first-child { left:2px; background:#eb001b; }
.mastercard-mark i:last-child { right:2px; background:#f79e1b; opacity:.92; }

@media (max-width:390px) {
  /* Fit brand + Login + Contact us + burger into 375px without dropping an action. */
  .site-header,.site-header.site-header--compact { padding-left:7px; padding-right:7px; gap:2px; }
  .brand { font-size:12.2px; gap:4px; }
  .brand__icon { width:27px; height:27px; }
  .header-actions { gap:2px; }
  .text-button,.contact-link { height:29px; padding:0 6px; font-size:9.8px; }
  .menu-toggle { width:27px; height:27px; flex-basis:27px; margin-left:0; }
  .menu-toggle span { width:15px; }
  .footer-trust { gap:5px; }
  .trust-badge { height:37px; border-radius:6px; }
  .trust-badge small { font-size:6px; }
  .trust-badge strong { font-size:10px; }
  .trust-badge--trustpilot strong { font-size:8px; }
  .trust-badge--visa strong { font-size:14px; }
}

@media (max-width:345px) {
  .brand { font-size:11px; }
  .brand__icon { width:25px; height:25px; }
  .text-button,.contact-link { height:27px; padding:0 5px; font-size:8.8px; }
  .menu-toggle { width:25px; height:25px; flex-basis:25px; }
  .footer-trust { grid-template-columns:1.55fr 1.15fr .8fr .8fr; gap:4px; }
  .trust-badge { height:35px; }
}

/* =========================================================
   v6: competitor-structured SentriON checkout (UI only)
   ========================================================= */
.checkout-page { background:linear-gradient(180deg,rgba(18,43,92,.58) 0,#070b16 26rem,#050812 100%); }
.payment-layout {
  width:min(calc(100% - 20px),390px);
  margin:0 auto;
  padding:20px 0 10px;
}
.checkout-title {
  margin:2px 0 17px;
  text-align:center;
  font-size:32px;
  line-height:1;
  letter-spacing:-.045em;
}
.checkout-title span { color:#65a7ff; }
.checkout-account {
  min-height:48px;
  margin:0 0 18px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(13,20,38,.72);
  color:#aeb9cb;
  font-size:11px;
}
.checkout-account .icon { color:#82b8ff; }
.checkout-account strong { color:#eef4ff; font-weight:700; }
.checkout-plans { display:flex; flex-direction:column; gap:8px; }
.checkout-plan {
  width:100%; min-height:104px; position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) auto 21px; align-items:center; gap:10px;
  padding:18px 15px; border:1px solid rgba(149,172,214,.21); border-radius:20px;
  background:linear-gradient(145deg,#141b30,#0d1223); color:var(--text); text-align:left;
  cursor:pointer; box-shadow:0 9px 26px rgba(0,0,0,.18); transition:.18s ease;
}
.checkout-plan:hover { border-color:rgba(111,169,255,.5); }
.checkout-plan.is-selected { border-color:#559df6; box-shadow:0 0 0 1px rgba(85,157,246,.16),0 15px 32px rgba(42,98,206,.2); }
.checkout-plan__badge {
  position:absolute; right:14px; top:-10px; padding:5px 10px; border-radius:999px;
  background:linear-gradient(105deg,#5673ec,#4196f1); color:#fff; font-size:9px; font-weight:800;
  box-shadow:0 8px 18px rgba(59,132,241,.3);
}
.checkout-plan__copy strong { display:block; font-size:14px; margin-bottom:4px; }
.checkout-plan__copy span { display:block; color:#8f9bb0; font-size:10px; }
.checkout-plan__copy b { color:#dce8fa; font-size:11px; }
.checkout-plan__price { display:flex; align-items:flex-start; color:#f7f9ff; line-height:1; }
.checkout-plan__price .currency { margin:4px 2px 0 0; font-size:12px; font-weight:800; }
.checkout-plan__price>b { font-size:38px; letter-spacing:-.06em; }
.checkout-plan__price .cents { margin:3px 0 0 3px; font-size:12px; font-weight:800; }
.checkout-plan__price small { display:block; margin-top:3px; color:#7e899e; font-size:8px; font-weight:600; line-height:1.05; }
.checkout-radio { width:20px; height:20px; display:grid; place-items:center; border:2px solid #476f9f; border-radius:50%; }
.checkout-radio i { width:10px; height:10px; border-radius:50%; background:transparent; }
.checkout-plan.is-selected .checkout-radio { border-color:#5da6ff; }
.checkout-plan.is-selected .checkout-radio i { background:#5da6ff; }

.checkout-benefits { margin:35px 0; }
.checkout-benefits h2,.checkout-payment>h2 { margin:0 0 18px; text-align:center; font-size:22px; letter-spacing:-.03em; }
.checkout-benefit-list { display:flex; flex-direction:column; gap:12px; }
.checkout-benefit { display:flex; align-items:center; gap:11px; }
.checkout-benefit>span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; color:#7ab4ff; border-radius:10px; background:rgba(74,137,244,.1); border:1px solid rgba(102,159,248,.15); }
.checkout-benefit strong,.checkout-benefit small { display:block; }
.checkout-benefit strong { font-size:12px; line-height:1.15; }
.checkout-benefit small { margin-top:3px; color:#818ca0; font-size:9.5px; line-height:1.35; }

.checkout-payment {
  margin:0 0 14px; padding:24px 17px 18px; border:1px solid var(--line); border-radius:25px;
  background:linear-gradient(155deg,rgba(23,31,55,.96),rgba(9,13,27,.97)); box-shadow:var(--shadow);
}
.apple-pay-button {
  width:100%; height:54px; border:0; border-radius:14px; background:#fff; color:#000; font-size:20px; font-weight:800; cursor:pointer;
}
.checkout-subscription-copy,.checkout-renewal,.checkout-agreement { color:#8792a7; font-size:9px; line-height:1.55; text-align:center; }
.checkout-subscription-copy { margin:11px 4px 0; }
.checkout-subscription-copy strong,.checkout-renewal strong { color:#cbd6e7; }
.checkout-divider { margin:18px 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; }
.checkout-divider span { height:1px; background:var(--line); }
.checkout-divider b { color:#778398; font-size:9px; font-weight:650; }
#payment-ui-form>label,.payment-field-grid label { display:block; color:#dce4f0; font-size:11px; font-weight:700; }
.payment-field { position:relative; margin:7px 0 13px; }
.payment-field input,.payment-field-grid input {
  width:100%; height:51px; border:1px solid rgba(153,177,215,.2); border-radius:13px; background:#080d1a; color:#f7f8fc;
  padding:0 13px; outline:none; font-size:14px;
}
.payment-field--number input { padding-right:82px; }
.payment-field input:focus,.payment-field-grid input:focus { border-color:#4e98f1; box-shadow:0 0 0 3px rgba(68,147,241,.09); }
.payment-field input::placeholder,.payment-field-grid input::placeholder { color:#566176; }
.payment-card-marks { position:absolute; right:9px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:5px; }
.payment-card-marks i { display:grid; place-items:center; height:23px; min-width:31px; padding:0 5px; border-radius:5px; background:#f5f6f8; color:#1b2675; font-size:8px; font-style:normal; font-weight:900; }
.payment-card-marks i:last-child { color:#eb4b2e; letter-spacing:-5px; padding-right:9px; }
.payment-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:11px; }
.payment-field-grid input { margin-top:7px; }
.checkout-agreement { margin:12px 3px; }
.checkout-agreement a,.checkout-renewal a { color:#82b6ff; text-decoration:underline; text-underline-offset:2px; }
.checkout-confirm { min-height:55px; border-radius:14px; }
.checkout-renewal { margin:12px 2px 0; }
.moneyback-card {
  position:relative; overflow:hidden; margin:21px 0 0; padding:22px 17px; border:1px solid rgba(105,165,255,.17); border-radius:18px;
  background:rgba(74,108,181,.08); text-align:center;
}
.moneyback-card strong { display:block; margin-bottom:7px; font-size:13px; }
.moneyback-card p { margin:0; color:#8994a8; font-size:9.5px; line-height:1.5; }
.moneyback-shield { position:absolute; right:-7px; top:-8px; width:68px; height:68px; display:grid; place-items:center; color:rgba(102,172,255,.18); transform:rotate(12deg); }

@media (max-width:345px) {
  .payment-layout { width:calc(100% - 14px); }
  .checkout-title { font-size:29px; }
  .checkout-plan { padding-left:12px; padding-right:12px; gap:7px; }
  .checkout-plan__price>b { font-size:34px; }
  .checkout-plan__copy strong { font-size:13px; }
}

/* =========================================================
   v7: payment-success handoff + download-app page
   ========================================================= */
.payment-success-open { overflow:hidden; }
.payment-success-layer {
  position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:18px;
  background:rgba(0,0,0,.58); backdrop-filter:blur(7px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.payment-success-layer.is-visible {
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .22s ease;
}
.payment-success-card {
  width:min(100%,420px); padding:48px 30px 31px; border-radius:24px; background:#fff; color:#171717;
  text-align:center; box-shadow:0 28px 80px rgba(0,0,0,.34);
  transform:translateY(12px) scale(.985); transition:transform .22s ease;
}
.payment-success-layer.is-visible .payment-success-card { transform:translateY(0) scale(1); }
.payment-success-check {
  width:80px; height:80px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%;
  background:#29c522; color:#050505;
}
.payment-success-check .icon { stroke-width:2.6; }
.payment-success-card h2 { margin:0 0 8px; font-size:28px; line-height:1.12; letter-spacing:-.035em; }
.payment-success-card p { max-width:310px; margin:0 auto 22px; color:#586982; font-size:16px; line-height:1.45; }
.payment-success-next {
  width:100%; min-height:62px; border:0; border-radius:16px; background:#050505; color:#fff;
  font:inherit; font-size:20px; font-weight:800; cursor:pointer;
}

.download-page { background:linear-gradient(180deg,rgba(18,43,92,.5),#070b16 25rem,#050812 100%); }
.download-layout { width:min(calc(100% - 20px),390px); margin:0 auto; padding:22px 0 12px; }
.download-hero-card {
  padding:30px 18px 24px; border:1px solid var(--line); border-radius:26px;
  background:linear-gradient(155deg,rgba(23,31,55,.97),rgba(9,13,27,.98)); text-align:center; box-shadow:var(--shadow);
}
.download-app-icon { width:66px; height:66px; display:block; margin:0 auto 13px; border-radius:18px; }
.download-hero-card h1 { margin:7px 0 11px; font-size:32px; line-height:1.08; letter-spacing:-.045em; }
.download-hero-card h1 span,.download-benefits h2 span { color:#65a7ff; }
.download-hero-card p { margin:0 auto 19px; max-width:310px; color:#9ba8bc; font-size:12px; line-height:1.55; }
.download-primary,.download-bottom { min-height:57px; border-radius:15px; }
.subscription-status-card {
  margin:15px 0 0; padding:20px 18px; border:1px solid rgba(105,165,255,.2); border-radius:21px;
  background:linear-gradient(135deg,#2978df,#4a96ef); color:white; text-align:center; box-shadow:0 18px 38px rgba(33,100,207,.18);
}
.subscription-status-card>span { display:block; font-size:11px; font-weight:750; opacity:.86; }
.subscription-status-card>strong { display:block; margin:4px 0 11px; font-size:31px; line-height:1; }
.subscription-status-card>div { padding-top:11px; border-top:1px solid rgba(255,255,255,.2); }
.subscription-status-card b,.subscription-status-card small { display:block; }
.subscription-status-card b { font-size:12px; }
.subscription-status-card small { margin-top:3px; font-size:9.5px; opacity:.75; word-break:break-word; }
.download-contact-card { margin:28px 0; text-align:center; }
.download-contact-card strong { display:block; margin:0 auto 15px; max-width:310px; font-size:15px; line-height:1.4; }
.download-contact-card .button--outline { min-height:55px; }
.download-benefits { margin:0 0 25px; }
.download-benefits h2 { margin:0 0 18px; text-align:center; font-size:27px; letter-spacing:-.035em; }
.download-feature-list { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#0f1528; }
.download-feature-row { display:flex; align-items:center; gap:12px; padding:14px 15px; border-top:1px solid var(--line); }
.download-feature-row:first-child { border-top:0; }
.download-feature-row>span { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:11px; color:#79b2ff; background:rgba(74,137,244,.1); }
.download-feature-row strong,.download-feature-row small { display:block; }
.download-feature-row strong { font-size:12px; }
.download-feature-row small { margin-top:3px; color:#8793a8; font-size:9.5px; line-height:1.35; }
.download-bottom { margin-bottom:6px; }

@media (max-width:345px) {
  .payment-success-card { padding:37px 20px 24px; }
  .payment-success-check { width:70px; height:70px; }
  .payment-success-card h2 { font-size:24px; }
  .payment-success-card p { font-size:14px; }
  .download-layout { width:calc(100% - 14px); }
  .download-hero-card h1 { font-size:29px; }
}


/* =========================================================
   v8: dark payment success + live rebill date + final links
   ========================================================= */
.payment-success-layer {
  background:rgba(2,6,16,.78);
  backdrop-filter:blur(10px);
}
.payment-success-card {
  background:linear-gradient(155deg,#151d34 0%,#0b1020 100%);
  color:#f7f9ff;
  border:1px solid rgba(132,174,255,.24);
  box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 50px rgba(53,125,245,.10);
}
.payment-success-check {
  background:linear-gradient(145deg,#59a7ff,#3f78ee);
  color:#fff;
  box-shadow:0 12px 30px rgba(61,132,242,.3);
}
.payment-success-card p { color:#aab7cd; }
.payment-success-next {
  background:linear-gradient(105deg,#506eea,#3f94f0);
  color:#fff;
  box-shadow:0 14px 30px rgba(50,120,240,.28);
}

.subscription-status-card .subscription-rebill {
  margin-top:7px;
  color:rgba(255,255,255,.96);
  font-size:10.5px;
  font-weight:700;
}
.download-contact-card .button--outline {
  min-height:55px;
  color:#f5f8ff;
  background:rgba(255,255,255,.035);
  border:1.5px solid rgba(189,211,255,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.14);
}
.download-contact-card .button--outline:hover {
  background:rgba(118,168,255,.10);
  border-color:#bcd7ff;
}
.footer-trust a.trust-badge {
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.footer-trust a.trust-badge:hover {
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 5px 14px rgba(0,0,0,.24);
}