:root {
  --bg: #050b18;
  --bg-2: #081529;
  --panel: #0b1a35;
  --ink: #e9f1ff;
  --ink-dim: #b7c7e3;
  --muted: #7f93b5;
  --blue: #2e86ff;
  --blue-bright: #4da3ff;
  --cyan: #35e0ff;
  --stroke: rgba(74,120,196,.22);
  --stroke-soft: rgba(74,120,196,.12);
  --radius: 16px;
  --maxw: 1280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3 { line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--blue-bright); text-decoration: none; }
img { max-width: 100%; display: block; }

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

/* Background */
.site-bg { position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 720px at 80% -8%, rgba(39,110,210,.30), transparent 60%),
    radial-gradient(900px 560px at 10% 6%, rgba(32,96,190,.16), transparent 55%),
    linear-gradient(180deg,#050b18 0%,#071428 48%,#050b18 100%);
}
.site-bg::before { content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(185,218,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 62% 12%, rgba(150,200,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 84% 36%, rgba(190,222,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 38% 58%, rgba(160,205,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 12% 74%, rgba(170,210,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 92% 82%, rgba(170,210,255,.4), transparent),
    radial-gradient(1.1px 1.1px at 72% 68%, rgba(150,200,255,.4), transparent);
  background-repeat: no-repeat; opacity: .75;
}
/* Mountain range across the top of the page (scrolls with content, fades into the night sky) */
.range {
  position: absolute; top: 0; left: 0; width: 100%; height: 940px; z-index: -1; pointer-events: none;
  background: url("/img/hero-bg.webp") top center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}
@media (max-width: 760px) { .range { height: 620px; } }

/* Brand logo image */
.brand-logo { height: 34px; width: auto; display: block; }
.footer .brand-logo { height: 30px; }

/* Hero product laptop (provided angled image — used as-is). See "Landing screen" below for sizing. */
.hero-laptop { display: block; filter: drop-shadow(0 18px 24px rgba(0,4,12,0.6)) drop-shadow(0 30px 50px rgba(2,10,28,0.45)); }

/* faint circuit lines */
.site-bg::after { content:""; position:absolute; inset:0; opacity:.05;
  background-image: linear-gradient(var(--blue) 1px, transparent 1px), linear-gradient(90deg, var(--blue) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(900px 600px at 80% 0%, #000, transparent 70%);
}

/* Layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 86px 0; }
.section-sm { padding: 54px 0; }
@media (max-width: 820px){ .section{ padding: 56px 0; } }
.center { text-align: center; }

.eyebrow { letter-spacing: .22em; text-transform: uppercase; font-size: 12px; font-weight: 700; color: var(--cyan); margin-bottom: 14px; }
.h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.h3 { font-size: 20px; font-weight: 700; }
.lead { color: var(--ink-dim); font-size: 18px; max-width: 640px; }
.grad { background: linear-gradient(180deg,#fff 20%,#b2daff 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cyan { color: var(--cyan); }
.dim { color: var(--ink-dim); }
.muted { color: var(--muted); }
.mono { font-family: Consolas, ui-monospace, monospace; }
.strike { text-decoration: line-through; color: var(--muted); }

/* Glass */
.glass { background: linear-gradient(180deg, rgba(16,32,62,.72), rgba(9,20,40,.6)); border: 1px solid var(--stroke); border-radius: var(--radius); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(120,170,255,.08), 0 10px 40px rgba(2,8,20,.5); }
.hoverable { transition: transform .25s, border-color .25s, box-shadow .25s; }
.hoverable:hover { transform: translateY(-3px); border-color: rgba(90,150,240,.5); box-shadow: inset 0 1px 0 rgba(120,170,255,.12), 0 18px 50px rgba(2,8,20,.6); }

/* Icon tile */
.tile { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--cyan);
  background: linear-gradient(135deg, rgba(20,58,110,.85), rgba(10,28,60,.85)); border: 1px solid rgba(90,150,240,.35);
  box-shadow: 0 0 22px rgba(46,134,255,.18); }
.tile.sm { width: 42px; height: 42px; border-radius: 11px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; border-radius: 12px; padding: 13px 22px; font-size: 15px; cursor: pointer; transition: all .2s; border: 1px solid transparent; text-decoration: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(135deg, var(--blue-bright), var(--blue)); color: #fff; box-shadow: 0 8px 30px rgba(46,134,255,.35); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 40px rgba(46,134,255,.5); transform: translateY(-1px); }
.btn-ghost { background: rgba(14,30,60,.5); border-color: var(--stroke); color: var(--ink); }
.btn-ghost:hover { border-color: rgba(90,150,240,.6); background: rgba(18,38,72,.6); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-block { width: 100%; }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--stroke); background: rgba(14,30,60,.5); color: var(--ink-dim); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 60; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(6,13,28,.85); backdrop-filter: blur(14px); border-bottom-color: var(--stroke-soft); }
.nav .bar { display: flex; align-items: center; gap: 22px; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; }
.brand .mg { color: var(--blue-bright); }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--cyan);
  background: linear-gradient(135deg, rgba(20,58,110,.9), rgba(10,28,60,.9)); border: 1px solid rgba(90,150,240,.5); box-shadow: 0 0 18px rgba(46,134,255,.3); }
.nav .links { display: flex; gap: 26px; margin-left: 14px; }
.nav .links a { color: var(--ink-dim); font-size: 14.5px; font-weight: 500; transition: color .2s; }
.nav .links a:hover { color: #fff; }
.nav .links a[aria-current="page"] { color: #fff; text-decoration: underline 2px var(--cyan); text-underline-offset: 9px; }
.nav .tagline { margin-left: auto; color: var(--cyan); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.nav .navcta { margin-left: 18px; white-space: nowrap; }
/* Compact header button: sized to the 14.5px menu instead of the large page buttons. */
.nav .navcta { padding: 9px 18px; font-size: 14px; gap: 8px; border-radius: 10px; box-shadow: 0 4px 16px rgba(46,134,255,.28); }
.nav .navcta:hover { box-shadow: 0 6px 20px rgba(46,134,255,.38); }
/* Phone menu: the same compact button, centered under the links (not stretched full width). */
.nav .mobile-menu .mobile-cta { display: inline-flex; align-self: center; margin: 10px 0 4px; padding: 9px 18px; font-size: 14px; }
.menu-btn { display: none; background: none; border: 1px solid var(--stroke); color: var(--ink); border-radius: 10px; padding: 8px; cursor: pointer; }
/* Mobile menu drops over the page (never pushes content — the landing screen can't scroll). */
.mobile-menu { display: none; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: 100%;
  padding: 12px 24px 18px; background: rgba(6,13,28,.97); backdrop-filter: blur(14px); border-top: 1px solid var(--stroke-soft); border-bottom: 1px solid var(--stroke-soft); }
.mobile-menu { text-align: center; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu a:not(.btn) { padding: 11px 6px; color: var(--ink-dim); border-radius: 8px; }
.mobile-menu a:not(.btn):hover, .mobile-menu a[aria-current="page"] { background: rgba(14,30,60,.6); color: #fff; }

@media (max-width: 960px){
  .nav .links, .nav .tagline { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .nav .navcta { margin-left: 12px; }
  .mobile-menu.open { display: flex; }
}
/* Mobile view: the header purchase button duplicates the hero CTA and the menu's own button. */
@media (max-width: 760px){ .nav .navcta { display: none; } }
@media (max-width: 480px){
  .nav .bar { height: 64px; gap: 10px; }
  .brand-logo { height: 28px; }
  .nav .navcta { padding: 9px 14px; font-size: 13.5px; }
}

/* Hero */
.hero { position: relative; padding: 70px 0 150px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 900; letter-spacing: -0.03em; }
.hero h1 .l2 { color: var(--cyan); text-shadow: 0 0 40px rgba(53,224,255,.35); }
.hero .subhead { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; margin-top: 14px; color: var(--ink); }
.hero .hcopy { margin-top: 18px; color: var(--ink-dim); font-size: 17px; max-width: 540px; }
/* Button groups are centered horizontally site-wide (symmetry rule). The hero is the one exception:
   on desktop its buttons align with the left-aligned headline column beside the laptop. */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.hero .cta-row { gap: 14px; margin-top: 28px; justify-content: flex-start; }
.hero .micro { margin-top: 16px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.side-word { position: absolute; right: 0; top: 120px; writing-mode: vertical-rl; letter-spacing: .4em; font-size: 11px; font-weight: 700; color: rgba(140,175,225,.5); text-transform: uppercase; }
@media (max-width: 980px){ .hero-grid { grid-template-columns: 1fr; } .side-word { display: none; } .hero .hcopy { max-width: none; } }

/* Differentiator strip */
.diff-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-top: 46px; }
.diff { display: flex; gap: 13px; align-items: flex-start; padding: 18px; }
.diff .t { font-weight: 700; font-size: 15px; }
.diff .d { color: var(--muted); font-size: 13px; margin-top: 2px; }
@media (max-width: 980px){ .diff-strip { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .diff-strip { grid-template-columns: 1fr; } }

/* Credential categories */
.cats { display: grid; grid-template-columns: repeat(9,1fr); gap: 12px; margin-top: 36px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 8px; text-align: center; }
.cat .label { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--ink-dim); }
@media (max-width: 1100px){ .cats { grid-template-columns: repeat(5,1fr); } }
@media (max-width: 620px){ .cats { grid-template-columns: repeat(3,1fr); } }

/* Feature grid */
/* Two columns of wide cards (icon left, copy right) so each description reads in 1–2 lines. */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 36px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.feat { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; }
.feat .t { font-weight: 700; font-size: 16.5px; }
.feat .d { color: var(--ink-dim); font-size: 14.5px; margin-top: 5px; line-height: 1.55; }
.feat-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px){ .feat-grid.cols-3 { grid-template-columns: minmax(0,1fr); max-width: 640px; } }
@media (max-width: 760px){ .feat-grid { grid-template-columns: minmax(0,1fr); } .feat { padding: 18px; } }
/* Security disclaimer: readable, with an icon, aligned to the card grid. */
.sec-note { display: flex; gap: 10px; align-items: flex-start; justify-content: center; max-width: 760px; margin: 26px auto 0; color: var(--ink-dim); font-size: 14px; line-height: 1.55; text-align: left; }
.sec-note svg { color: var(--cyan); flex: none; margin-top: 2px; }
/* Contact page: form (left) + direct options (right). */
.contact-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 20px; max-width: 1100px; margin: 36px auto 0; align-items: start; }
.contact-form { padding: 28px; }
.contact-form .h3 { margin-bottom: 4px; }
.contact-form textarea.field { resize: vertical; min-height: 140px; line-height: 1.5; }
.contact-form select.field { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2335e0ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.contact-form select.field option { background: #0b1a35; color: var(--ink); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-submit { margin-top: 18px; }
.cf-privacy { margin-top: 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.cf-privacy a { color: var(--ink-dim); }
.cf-done { text-align: center; padding: 28px 8px; }
.cf-done .tile { margin: 0 auto; color: #6fe3a3; }
.cf-done-text { color: var(--ink-dim); margin: 8px auto 18px; max-width: 420px; }
.cf-done:focus { outline: none; }
.contact-side { display: grid; gap: 16px; }
.contact-side .feat { color: inherit; text-decoration: none; }
.contact-side .feat .t { color: #fff; }
.contact-email { color: var(--cyan); overflow-wrap: anywhere; }
@media (max-width: 900px){ .contact-layout { grid-template-columns: minmax(0,1fr); max-width: 640px; } }
@media (max-width: 520px){ .contact-form { padding: 20px; } }

/* Short pages: keep the footer at the bottom of the window instead of floating mid-screen. */
body:not(.home-screen) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
body:not(.home-screen) > main { flex: 1 0 auto; width: 100%; }
/* The decorative backdrop may never be taller than the page itself (it used to stretch short pages
   to 940px, leaving empty background scrollable below the footer). */
body:not(.home-screen) .range { height: min(940px, 100%); }
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
@media (max-width: 820px){ .split-head { grid-template-columns: 1fr; gap: 10px; } }

/* Showcase */
.shots { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 34px; }
.shot .cap { margin-top: 14px; }
/* Real screenshots: uniform frame regardless of capture size; reserves space (no layout shift). */
.shot-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.shot .cap .t { font-weight: 700; font-size: 15px; }
.shot .cap .d { color: var(--muted); font-size: 13px; }
@media (max-width: 1000px){ .shots { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .shots { grid-template-columns: 1fr; } }

/* Local control / use cases / three-up */
.three { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 820px){ .three { grid-template-columns: 1fr; } }
.cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 920px){ .cards3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cards3 { grid-template-columns: 1fr; } }
/* Four-up variant (Security) — collapses like .cards3 instead of forcing 4 columns on phones. */
.cards3.cards4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1000px){ .cards3.cards4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cards3.cards4 { grid-template-columns: 1fr; } }
.usecase { display: flex; gap: 14px; padding: 22px; align-items: flex-start; }
.usecase .t { font-weight: 700; font-size: 16px; }
.usecase .d { color: var(--muted); font-size: 13.5px; margin-top: 5px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 36px; position: relative; }
.step { padding: 24px; text-align: center; }
.step .num { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue)); box-shadow: 0 6px 22px rgba(46,134,255,.4); }
.step .t { font-weight: 700; }
.step .d { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
@media (max-width: 820px){ .steps { grid-template-columns: 1fr; } }

/* Pricing */
.price-wrap { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 20px; margin: 36px auto 0; max-width: 1100px; align-items: start; text-align: left; }
@media (max-width: 920px){ .price-wrap { grid-template-columns: minmax(0,1fr); max-width: 640px; } }
.price-side { display: grid; gap: 20px; }
.price-side .price-card { padding: 28px; }
.price-line { display: flex; align-items: flex-end; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.benefits-2col { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 18px; }
@media (max-width: 560px){ .benefits-2col { grid-template-columns: minmax(0,1fr); } .price-card { padding: 24px; } .price-amt { font-size: 50px; } }
.qty-note-box { padding: 14px; margin-top: 16px; text-align: center; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(6,16,34,.5); }
.price-help { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.price-help a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--ink-dim); font-size: 14.5px; font-weight: 600; transition: background .2s, color .2s; }
.price-help a:hover { background: rgba(14,30,60,.6); color: #fff; }
.price-help a > svg:first-child { color: var(--cyan); flex: none; }
.price-help a span { flex: 1; }
.price-help .arr { color: var(--muted); }
.price-card { padding: 34px; position: relative; overflow: hidden; }
.price-card.featured { border-color: rgba(90,160,255,.55); box-shadow: inset 0 1px 0 rgba(120,170,255,.15), 0 0 60px rgba(46,134,255,.18); }
.price-amt { font-size: 60px; font-weight: 900; line-height: 1; color: #fff; }
.price-retail { font-size: 17px; }
.benefits { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; }
.benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-dim); }
.benefits li svg { color: var(--cyan); flex: none; margin-top: 1px; width: 20px; height: 20px; }
.qty-note { font-size: 20px; font-weight: 800; }

/* FAQ */
.faq { max-width: 860px; margin: 32px auto 0; display: grid; gap: 12px; }
.faq details { padding: 4px 20px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .25s; color: var(--cyan); flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
.faq { text-align: left; }
.faq-group { display: grid; gap: 12px; }
.faq-group + .faq-group { margin-top: 22px; }
.faq-gtitle { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 6px 0 2px 4px; }
.faq-link { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--cyan); font-weight: 600; white-space: nowrap; }
.faq-link:hover { color: #fff; }
.faq-more { text-align: center; margin-top: 26px; color: var(--ink-dim); font-size: 15px; }
.faq-more a { color: var(--cyan); font-weight: 600; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq .ans { color: var(--ink-dim); padding: 0 0 20px; font-size: 15px; line-height: 1.6; }

/* Final CTA */
.finalcta { padding: 60px; text-align: center; position: relative; overflow: hidden; }
.finalcta h2 { font-size: clamp(30px, 4.5vw, 48px); font-weight: 900; }
@media (max-width: 560px){ .finalcta { padding: 34px 20px; } .finalcta .cta-row .btn { flex: 1 1 100%; } }
/* Closing buttons: two equal columns, same width and height, text centered. Stacked full width on phones. */
.cta-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(100%, 540px); margin-left: auto; margin-right: auto; }
.cta-pair .btn { width: 100%; min-height: 54px; padding: 0 20px; font-size: 16px; white-space: nowrap; }
@media (max-width: 560px){ .cta-pair { grid-template-columns: minmax(0, 1fr); width: 100%; } }
/* Phones: justified text leaves large gaps in a narrow column, so the closing paragraph is centered there. */
@media (max-width: 560px){ .finalcta p.lead { text-align: center !important; text-align-last: center !important; } }

/* Footer */
/* Footer: one slim bar — copyright · "Powered by" logo (centered) · legal links. */
.footer { border-top: 1px solid var(--stroke-soft); margin-top: 0; padding: 6px 0; background: rgba(4,9,20,.55); }
/* The footer sits directly under the page content: menu pages end on a card (flush), text pages keep a slim 24px. */
.page-main > .section:last-child { padding-bottom: 0 !important; }
.page-main > .section:last-child .finalcta, .page-main > .section:last-child .price-wrap { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
main.section { padding-bottom: 24px; }
.foot-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.foot-copy { color: var(--muted); font-size: 13px; }
.foot-powered { justify-self: center; display: block; border-radius: 6px; transition: transform .2s, opacity .2s; }
.foot-powered:hover { transform: translateY(-1px); opacity: .9; }
.foot-powered:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.foot-powered img { height: 54px; width: auto; display: block; }
.foot-legal { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; }
.foot-legal a { color: var(--ink-dim); font-size: 13px; }
.foot-legal a:hover { color: #fff; }
@media (max-width: 860px){
  .footer { padding: 10px 0 12px; }
  .foot-bar { grid-template-columns: minmax(0,1fr); justify-items: center; gap: 6px; text-align: center; }
  .foot-powered { order: -1; }
  .foot-legal { justify-self: center; justify-content: center; }
}

/* Desktop: the footer stays in view at the bottom of the window on every page.
   Menu pages: pinned while scrolling. Home: the last row of the one-screen layout (the hero gives up the space). */
@media (min-width: 961px){
  body:not(.home-screen) > .footer { position: sticky; bottom: 0; z-index: 40; background: rgba(4,9,20,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .home-screen > .footer { flex: none; }
}
/* Phones and tablets: unchanged — menu pages end with the footer; the home screen has none. */
@media (max-width: 960px){ .home-screen > .footer { display: none; } }

/* Reveal — progressive enhancement: only hidden when JS is active, so no-JS users & crawlers see all. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* App window mock */
.appwin { border-radius: 12px; overflow: hidden; border: 1px solid rgba(90,150,240,.3); background: linear-gradient(180deg,#0a1730,#070f22); box-shadow: 0 40px 90px rgba(2,8,20,.7); }
.appwin .titlebar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #0a1526; border-bottom: 1px solid var(--stroke-soft); }
.appwin .dot { width: 9px; height: 9px; border-radius: 50%; background: #2a3a55; }
.appwin .tb-title { margin-left: 8px; font-size: 12px; color: var(--ink-dim); font-weight: 600; }
.appwin .tb-title .mg { color: var(--blue-bright); }
.appwin .body { display: grid; grid-template-columns: 150px 1fr; min-height: 340px; }
.appwin .side { background: #081226; border-right: 1px solid var(--stroke-soft); padding: 12px 10px; }
.appwin .side .nav-i { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; font-size: 12px; color: var(--ink-dim); }
.appwin .side .nav-i.active { background: #103056; color: #fff; }
.appwin .side .nav-i svg { width: 14px; height: 14px; color: var(--cyan); }
.appwin .main { padding: 14px; }
.appwin .rowline { display: grid; grid-template-columns: 90px 1fr 110px 80px; gap: 10px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--stroke-soft); font-size: 12px; }
.appwin .pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; }
.appwin .pill.user { background: #0f2a1c; color: #6fe3a3; }
.appwin .pill.db { background: #201a3a; color: #c3b4ff; }
.appwin .pill.host { background: #06303a; color: var(--cyan); }
.appwin .pill.api { background: #2a2210; color: #ffcf6b; }
.appwin .pill.prod { background: #0f2a1c; color: #6fe3a3; }
.appwin .pill.dev { background: #0e2850; color: #7cb4ff; }

/* ===== Laptop + detailed app (hero) ===== */
.laptop-stage { width: 100%; max-width: 730px; margin-left: auto; perspective: 1900px; }
.laptop { width: 100%; filter: drop-shadow(0 44px 80px rgba(2,10,28,.75)); transform: rotateY(-9deg) rotateX(3deg); transform-origin: 62% 50%; }
.laptop-screen { border-radius: 14px 14px 6px 6px; padding: 10px 10px 12px; background: linear-gradient(180deg,#11182a,#0a0f1c);
  border: 1px solid rgba(120,160,220,.25); box-shadow: inset 0 0 0 2px rgba(10,16,30,.9), 0 0 50px rgba(46,134,255,.2); }
.laptop-base { height: 16px; margin: 0 auto; width: 116%; max-width: 790px; position: relative; transform: translateX(-7%);
  background: linear-gradient(180deg,#aeb8c6,#79859a 55%,#5a6678); border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 30px rgba(2,10,28,.6); }
.laptop-base .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 7px;
  background: #4a5668; border-radius: 0 0 9px 9px; }

.app { border-radius: 7px; overflow: hidden; background: linear-gradient(180deg,#0a1324,#070e1d); border: 1px solid rgba(90,150,240,.18); }
.app-top { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #0a1120; border-bottom: 1px solid var(--stroke-soft); }
.app-brand { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11px; }
.app-brand .mg { color: var(--blue-bright); }
.app-logo { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: var(--cyan); background: linear-gradient(135deg,#123a6b,#0c2044); border: 1px solid rgba(90,150,240,.5); }
.app-search { flex: 1; max-width: 340px; margin: 0 auto; display: flex; align-items: center; gap: 7px; background: #0c1730; border: 1px solid var(--stroke); border-radius: 7px; padding: 5px 9px; font-size: 10px; color: var(--muted); }
.app-search .kbd { margin-left: auto; font-size: 8px; padding: 1px 5px; border: 1px solid var(--stroke); border-radius: 4px; color: var(--ink-dim); }
.app-win { display: flex; gap: 7px; }
.app-win span { width: 9px; height: 9px; border-radius: 50%; background: #2a3a55; }
.app-win .x { background: #e0556a; }
.app-body { display: grid; grid-template-columns: 124px 1fr 156px; min-height: 320px; }

.app-side { background: #081124; border-right: 1px solid var(--stroke-soft); padding: 8px 7px; display: flex; flex-direction: column; gap: 2px; }
.si { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.si svg { color: var(--muted); flex: none; }
.si.active { background: #103056; color: #fff; }
.si.active svg { color: var(--cyan); }
.si .sbadge { margin-left: auto; font-size: 8px; background: #13233f; color: var(--muted); border-radius: 999px; padding: 0 5px; }

.app-list { padding: 8px 6px; }
.al-head { display: grid; grid-template-columns: 1.4fr 1.3fr .9fr; gap: 6px; padding: 4px 8px 7px; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.al-row { display: grid; grid-template-columns: 20px 1.4fr 1.3fr .9fr; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 10px; }
.al-row + .al-row { margin-top: 1px; }
.al-row.sel { background: #0e2142; box-shadow: inset 2px 0 0 var(--blue-bright); }
.al-row .nm { font-weight: 600; color: var(--ink); }
.al-row .us, .al-row .cat { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-row .ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; }
.ic.dark { background: #1a222f; color: #cdd7e6; }
.ic.amber { background: #2d2110; color: #ffc46b; }
.ic.red { background: #2d1518; color: #ff8a93; }
.ic.green { background: #0f2a1c; color: #6fe3a3; }
.ic.blue { background: #0e2850; color: #7cb4ff; }
.ic.purple { background: #201a3a; color: #c3b4ff; }

.app-detail { border-left: 1px solid var(--stroke-soft); background: #0a1427; padding: 10px 11px; display: flex; flex-direction: column; gap: 9px; }
.ad-top { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ad-top .ad-edit { margin-left: auto; font-size: 8px; border: 1px solid var(--stroke); border-radius: 5px; padding: 2px 7px; color: var(--ink-dim); }
.ad-l { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.ad-v { font-size: 10px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.ad-v svg { color: var(--muted); }
.ad-tags { display: flex; gap: 5px; }
.atag { font-size: 8px; padding: 2px 7px; border-radius: 999px; background: #0e2850; color: #7cb4ff; }
.ad-modified { margin-top: auto; font-size: 8px; color: var(--muted); }

@media (max-width: 980px){ .laptop-stage { margin: 0 auto; max-width: 560px; perspective: none; } .laptop { transform: none; } }
@media (max-width: 560px){ .app-body { grid-template-columns: 96px 1fr; } .app-detail { display: none; } .al-row { grid-template-columns: 20px 1.4fr 1fr; } .al-row .cat { display: none; } }

/* Hero side labels (vertical). Sized from the viewport height so both always fit, even in a short window. */
.hero-side { position: absolute; right: 2px; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .32em; font-size: clamp(8.5px, 1.25dvh, 11px); font-weight: 800; color: rgba(150,185,235,.6); text-transform: uppercase; }
.hero-side.top { top: clamp(6px, 8dvh, 86px); }
.hero-side.win { bottom: clamp(6px, 3dvh, 30px); display: flex; align-items: center; gap: clamp(6px, 1.2dvh, 12px); color: rgba(150,185,235,.75); }
.hero-side.win .wlogo { writing-mode: horizontal-tb; color: var(--blue-bright); }
.hero-side.win .wlogo svg { width: clamp(15px, 2.2dvh, 22px); height: clamp(15px, 2.2dvh, 22px); }
@media (max-width: 1180px){ .hero-side, .hero-side.win { display: none; } }

/* Trust band (full-width) */
.trustband { border-top: 1px solid var(--stroke-soft); border-bottom: 1px solid var(--stroke-soft); background: rgba(5,11,22,.45); backdrop-filter: blur(6px); padding: 22px 0; margin-top: 18px; }
.trust-items { display: grid; grid-template-columns: repeat(5,1fr); }
.trust-it { display: flex; gap: 14px; align-items: center; padding: 6px 22px; }
.trust-it + .trust-it { border-left: 1px solid var(--stroke-soft); }
.trust-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(90,150,240,.4); background: rgba(14,30,60,.4); flex: none; box-shadow: 0 0 18px rgba(46,134,255,.15); }
.trust-it .t { font-weight: 700; font-size: 15px; }
.trust-it .d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ===== Landing screen: exactly one viewport — nav + hero + trust band, no vertical scroll. =====
   Every hero text element is ALWAYS shown (eyebrow, headline, subhead, paragraph, both CTAs,
   microcopy). Fit comes from sizes that scale with viewport height + width; the laptop image
   absorbs whatever height is left. */
body.home-screen { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.home-screen .range { height: 100%; }
.home-screen .nav { flex: none; }
.home-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hero-fit { flex: 1 1 auto; min-height: 0; display: flex; padding: clamp(8px, 3.5dvh, 56px) 0 0; }
.hero-fit .hero-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
.hero-fit .hero-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); grid-template-rows: minmax(0,1fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; }
.hero-copy { align-self: center; padding-bottom: clamp(6px, 2.6dvh, 40px); }
.hero-visual { min-height: 0; display: flex; align-items: flex-end; justify-content: flex-end; container-type: size; }
/* The image has ~12% transparent padding under the laptop; nudge it down so the base meets the floor. */
.hero-visual .hero-laptop { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform: translateY(9%); }
/* When the space left for the laptop is too small to show it properly (small phones), it becomes a
   faded backdrop behind the hero text instead of a postage stamp. Positioned against .hero. */
.hero-copy { position: relative; z-index: 1; }
@container (max-height: 150px){
  .hero-visual .hero-laptop {
    position: absolute; left: 50%; top: 60%; z-index: 0; pointer-events: none;
    width: min(125%, 640px); max-width: none; max-height: none;
    transform: translate(-50%, -50%); opacity: .4; filter: saturate(1.15);
  }
}
.hero-fit .eyebrow { margin-bottom: clamp(6px, 2.2dvh, 26px); }
.hero-fit h1 { font-size: clamp(28px, min(6vw, 8.2dvh), 80px); }
.hero-fit .subhead { font-size: clamp(14px, min(2.4vw, 3.2dvh), 25px); margin-top: clamp(4px, 1.4dvh, 16px); }
.hero-fit .hcopy { font-size: clamp(12.5px, min(1.3vw, 2.3dvh), 17.5px); line-height: 1.55; margin-top: clamp(6px, 1.8dvh, 20px); max-width: 600px; }
.hero-fit .cta-row { margin-top: clamp(10px, 2.8dvh, 32px); }
.hero-fit .btn-lg { padding: clamp(9px, 1.6dvh, 16px) clamp(18px, 2vw, 28px); font-size: clamp(14px, 1.9dvh, 16px); }
.hero-fit .micro { margin-top: clamp(6px, 1.6dvh, 18px); font-size: clamp(11.5px, 1.6dvh, 13.5px); }
@media (max-height: 640px){ .nav .bar { height: 60px; } }

/* "See How It Works" — filled secondary button (distinct from the primary purchase CTA). */
.btn-video { background: linear-gradient(135deg, #1d4384, #10295a); border-color: rgba(53,224,255,.45); color: #fff; box-shadow: 0 8px 26px rgba(8,24,60,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.btn-video svg { color: var(--cyan); }
.btn-video:hover { background: linear-gradient(135deg, #25509b, #143368); border-color: var(--cyan); transform: translateY(-1px); }
.btn-video:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Trust band on the landing screen: icon + title only, every title on a single line. */
.home-screen .trustband { flex: none; margin-top: 0; padding: clamp(8px, 2.2dvh, 24px) 0; }
.home-screen .trust-it .d { display: none; }
.home-screen .trust-it { padding: 4px clamp(8px, 1.2vw, 22px); gap: clamp(8px, 1vw, 14px); }
.home-screen .trust-it .t { font-size: clamp(13px, 1.1vw, 16px); white-space: nowrap; }
.home-screen .trust-ic { width: clamp(34px, 5dvh, 46px); height: clamp(34px, 5dvh, 46px); }
@media (max-width: 1240px){
  .home-screen .trust-it { flex-direction: column; text-align: center; gap: 6px; padding: 2px 6px; }
  .home-screen .trust-it .t { font-size: clamp(10px, 1.5vw, 13px); line-height: 1.25; }
}
/* Phones: five items share ~375px, so titles may wrap under their icon here. */
@media (max-width: 700px){ .home-screen .trust-it .t { white-space: normal; } }
@media (max-width: 560px){
  .home-screen .trust-it { padding: 0 3px; }
  .home-screen .trust-ic { width: 30px; height: 30px; border-radius: 9px; }
  .trust-ic svg { width: 17px; height: 17px; }
}

/* Stacked layout: phones and tablets held upright (landscape keeps two columns — it's short, not narrow). */
@media (max-width: 1100px) and (orientation: portrait){
  .hero-fit .hero-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: clamp(6px, 1.6dvh, 24px); }
  .hero-copy { align-self: start; padding-bottom: 0; }
  .hero-visual { justify-content: center; }
  .hero-visual .hero-laptop { max-width: min(100%, 680px); }
}
@media (max-width: 760px){
  .hero-fit .hcopy { max-width: none; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
  .hero-fit .micro { text-align: center; }
  .hero-fit .eyebrow { font-size: 10px; letter-spacing: .14em; }
  .hero-fit h1 { font-size: clamp(26px, min(10.5vw, 5.4dvh), 52px); }
  .hero-fit .subhead { font-size: clamp(14px, min(4.4vw, 2.3dvh), 19px); }
  .hero-fit .hcopy { font-size: clamp(12.5px, 1.95dvh, 15px); line-height: 1.5; }
  .hero-fit .cta-row { gap: 8px; }
  .hero-fit .cta-row .btn { flex: 1 1 100%; }
  .hero-fit .micro { font-size: 11.5px; }
}
/* Narrow two-column screens (e.g. tablets in landscape): the copy column wraps more, so tighten it. */
@media (max-width: 1100px) and (orientation: landscape){
  .hero-fit h1 { font-size: clamp(26px, min(5.4vw, 7.6dvh), 64px); }
  .hero-copy { padding-bottom: 0; }
}
/* Phones held sideways are too short to show every line plus the laptop legibly in one screen.
   Rather than hide text, the landing screen may scroll here (touch scrolling, no visible bar). */
@media (max-height: 480px) and (orientation: landscape){
  body.home-screen { height: auto; min-height: 100dvh; overflow-y: auto; }
  .hero-fit .hero-grid { grid-template-rows: auto; }
  .hero-visual { container-type: normal; align-items: center; }
  .hero-visual .hero-laptop { max-height: 72dvh; transform: none; }
  .hero-copy { padding-bottom: 14px; }
}

/* Video modal */
.video-modal { width: min(960px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--stroke); border-radius: 18px; background: linear-gradient(180deg, #0b1a35, #07122a); color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.65); overflow: hidden; }
.video-modal::backdrop { background: rgba(2,6,16,.8); backdrop-filter: blur(6px); }
.video-modal[open] { animation: vmIn .25s ease; }
@keyframes vmIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.vm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--stroke-soft); }
.vm-title { font-size: 17px; font-weight: 700; }
.vm-close { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(14,30,60,.6); border: 1px solid var(--stroke); color: var(--ink); cursor: pointer; }
.vm-close:hover { border-color: var(--blue-bright); color: #fff; }
.vm-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vm-frame { width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 32px - 64px); background: #030914; display: grid; place-items: center; }
.vm-frame video { width: 100%; height: 100%; display: block; background: #000; }
.vm-placeholder { text-align: center; padding: 24px; }
.vm-play { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue-bright), var(--blue)); box-shadow: 0 0 44px rgba(46,134,255,.45); }
.vm-play svg { margin-left: 3px; }
.vm-placeholder .t { font-size: 18px; font-weight: 700; color: #fff; }
.vm-placeholder .d { font-size: 14px; margin-top: 6px; color: var(--muted); }
@media (prefers-reduced-motion: reduce){ .video-modal[open] { animation: none; } }

/* Legal modal (footer links) — mountain backdrop, darkened toward the text for comfortable reading. */
.legal-modal { width: min(860px, calc(100vw - 32px)); max-width: none; height: min(82dvh, 780px); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--stroke); border-radius: 18px; color: var(--ink); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.65);
  background: linear-gradient(180deg, rgba(5,11,24,.3) 0%, rgba(5,11,24,.66) 38%, rgba(5,11,24,.84) 100%), url("/img/hero-bg.webp") center top / cover no-repeat, #050b18;
  color-scheme: dark; }
.legal-modal[open] { display: flex; flex-direction: column; animation: vmIn .25s ease; }
.legal-modal::backdrop { background: rgba(2,6,16,.8); backdrop-filter: blur(6px); }
.lm-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 28px; border-bottom: 1px solid var(--stroke-soft); }
.lm-title { font-size: clamp(18px, 2.4vw, 23px); font-weight: 800; }
.lm-body.prose { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; max-width: none; margin: 0; padding: 6px 28px 30px;
  scrollbar-width: thin; scrollbar-color: rgba(90,150,240,.55) transparent; }
.lm-body.prose p, .lm-body.prose li { color: #c9d6ec; }
.lm-body:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
@media (max-width: 520px){ .lm-head { padding-left: 18px; } .lm-body.prose { padding: 4px 18px 24px; } }
@media (prefers-reduced-motion: reduce){ .legal-modal[open] { animation: none; } }

/* Menu pages (shared layout) */
.page-main .section { padding: 64px 0; }
.page-main > .section:first-child { padding-top: 48px; }
@media (max-width: 820px){ .page-main .section { padding: 44px 0; } .page-main > .section:first-child { padding-top: 32px; } }
/* Darken the mountain backdrop behind content pages so body copy stays readable over the bright peaks. */
.content-page .range {
  background-image: linear-gradient(180deg, rgba(5,11,24,.62) 0%, rgba(5,11,24,.45) 45%, rgba(5,11,24,.7) 100%), url("/img/hero-bg.webp");
  background-size: cover; background-position: top center;
}

/* Showcase (no real screenshots yet): product image beside the four core views. */
.showcase-split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 36px; }
.sc-visual img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(2,10,28,.6)); }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sc-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
.sc-item .t { font-weight: 700; font-size: 16px; }
.sc-item .d { color: var(--muted); font-size: 14px; margin-top: 3px; line-height: 1.5; }
@media (max-width: 900px){
  .showcase-split { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .sc-visual { width: 100%; max-width: 620px; margin: 0 auto; }
  .sc-visual img { margin: -8% 0 -5%; } /* trim the image's transparent padding when stacked */
}
/* Screenshot grid: a missing capture shows a quiet framed icon, not fake "loading" bars. */
.shot-pending-body { aspect-ratio: 16 / 10; display: grid; place-items: center; }

/* Checkout */
.co-shell { max-width: 1080px; }
.co-card { padding: 26px; margin-bottom: 20px; }
.co-step { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.co-step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg,var(--blue-bright),var(--blue)); flex: none; }
.co-step h3 { font-size: 19px; }
.field { width: 100%; background: rgba(6,16,34,.7); border: 1px solid var(--stroke); color: var(--ink); border-radius: 11px; padding: 12px 14px; font-size: 15px; font-family: inherit; }
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(46,134,255,.18); }
.flabel { display: block; font-size: 13px; font-weight: 600; color: var(--ink-dim); margin: 14px 0 7px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .frow { grid-template-columns: 1fr; } }
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (max-width: 520px){ .radio-row { grid-template-columns: 1fr; } }
.radio-card { display: flex; gap: 12px; align-items: center; padding: 15px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(6,16,34,.5); cursor: pointer; transition: border-color .2s, background .2s; }
.radio-card.sel { border-color: var(--blue-bright); background: rgba(20,45,85,.5); }
.radio-card .t { font-weight: 700; font-size: 15px; }
.radio-card .d { color: var(--muted); font-size: 12.5px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--stroke); border-radius: 11px; overflow: hidden; }
.qty button { background: rgba(14,30,60,.6); border: none; color: var(--ink); width: 42px; height: 42px; font-size: 18px; cursor: pointer; }
.qty input { width: 56px; height: 42px; text-align: center; background: transparent; border: none; color: #fff; font-size: 16px; font-weight: 700; }
.summary-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14.5px; color: var(--ink-dim); }
.summary-row.total { border-top: 1px solid var(--stroke); margin-top: 8px; padding-top: 16px; font-size: 22px; font-weight: 800; color: #fff; }
.trust-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 1100px){ .trust-row { grid-template-columns: 1fr; } }
.trust-mini { display: flex; gap: 11px; align-items: flex-start; }
.trust-mini .t { font-weight: 700; font-size: 13.5px; }
.trust-mini .d { color: var(--muted); font-size: 12px; }

/* One-page checkout: details + payment (left), sticky order summary (right; first on mobile). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.co-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; grid-template-areas: "main side"; gap: 22px; align-items: start; margin-top: 30px; }
.co-main { grid-area: main; display: grid; gap: 20px; min-width: 0; }
.co-side { grid-area: side; position: sticky; top: 96px; min-width: 0; }
.co-grid .co-card { margin-bottom: 0; }
@media (max-width: 960px){
  .co-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "side" "main"; max-width: 640px; margin-left: auto; margin-right: auto; }
  .co-side { position: static; }
}
.co-step h2 { font-size: 19px; font-weight: 700; }
.co-sub { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; }
/* Order summary */
.co-sum-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.co-sum-title svg { color: var(--cyan); }
.co-sum-product { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.co-sum-product .t { font-weight: 800; font-size: 16px; }
.co-sum-product .d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.co-sum-price { text-align: right; white-space: nowrap; }
.co-sum-price .strike { font-size: 13px; margin-right: 6px; }
.co-sum-price .now { font-size: 20px; font-weight: 800; color: #fff; }
.co-sum-promo { color: var(--cyan); font-size: 12.5px; font-weight: 600; text-align: right; margin-top: 2px; }
.co-sum .qty-row { justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--stroke-soft); }
.co-sum-rows { margin: 16px 0 0; display: grid; gap: 8px; }
.co-sum-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-dim); }
.co-sum-rows dd { margin: 0; color: var(--ink); font-weight: 600; }
.co-sum-rows .co-sum-total { align-items: baseline; margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: rgba(20,45,85,.35); border: 1px solid var(--stroke-soft); }
.co-sum-rows .co-sum-total dt { color: var(--ink-dim); font-weight: 600; }
.co-sum-rows .co-sum-total dd { font-size: 22px; font-weight: 800; color: #fff; white-space: nowrap; }
.co-sum-rows .cur { color: var(--muted); font-size: 13px; font-weight: 500; }
.co-sum-benefits { margin-top: 16px; gap: 9px; }
.co-sum-benefits li { font-size: 13.5px; }
.co-sum-benefits li svg { width: 18px; height: 18px; }
/* Stripe Elements mount points */
.stripe-mount { min-height: 44px; }
.stripe-loading { padding: 16px; border-radius: 11px; border: 1px dashed var(--stroke); color: var(--muted); font-size: 13.5px; text-align: center; }
.pay-btn { width: 100%; justify-content: center; margin-top: 24px; }
/* Checkout page: same top spacing as the other pages; the header "Get PassMGT" is redundant here. */
.checkout-page main.co-page { padding-top: 48px; }
.checkout-page .nav .navcta { display: none; }
@media (max-width: 820px){ .checkout-page main.co-page { padding-top: 32px; } }
.btn-text { background: none; border: none; color: var(--ink-dim); padding: 12px 8px; }
.btn-text:hover { color: #fff; }
.btn-text:focus-visible, .btn-primary:focus-visible, .qty button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.fset { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.fset legend { padding: 0; }
.field[aria-invalid="true"] { border-color: #ff6b88; box-shadow: 0 0 0 3px rgba(255,107,136,.15); }
.ferr { color: #ff9fb2; font-size: 12.5px; margin-top: 6px; }
.ferr:empty, .fsuggest:empty { display: none; }
.fhint { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.fsuggest { font-size: 12.5px; color: var(--ink-dim); margin-top: 6px; }
.fsuggest button { background: none; border: none; padding: 0; font: inherit; color: var(--cyan); text-decoration: underline; cursor: pointer; }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty input[aria-invalid="true"] { color: #ff9fb2; }
.qty-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.co-legal { color: var(--muted); font-size: 12px; margin-top: 14px; text-align: center; }
.co-legal a { color: var(--ink-dim); }
/* Condensed trust signals, placed at the point of payment. */
.co-trust { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.co-trust li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-dim); }
.co-trust svg { color: var(--cyan); flex: none; }
.fhint a { color: var(--cyan); }
@media (max-width: 520px){ .co-card { padding: 20px; } }

/* Legal / content pages */
.prose { max-width: 820px; margin: 0 auto; }
.prose h1 { font-size: 34px; font-weight: 800; margin-bottom: 10px; }
.prose h2 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; }
.prose p, .prose li { color: var(--ink-dim); margin: 10px 0; }
.prose ul { padding-left: 20px; }
.prose .updated { color: var(--muted); font-size: 13px; }
.notice { padding: 14px 18px; border-radius: 12px; font-size: 14px; }
.notice.info { background: rgba(20,45,85,.5); border: 1px solid var(--stroke); color: var(--ink-dim); }
.notice.ok { background: #0f2a1c; border: 1px solid #1c4a33; color: #8ff0bc; }
.notice.warn { background: #2a1220; border: 1px solid #4a2030; color: #ff9fb2; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---- Paid download page ---- */
.dl-box { max-width: 560px; margin: 24px auto 0; padding: 22px; text-align: left; }
.dl-sums { margin-top: 16px; font-size: 12.5px; }
.dl-sums summary { cursor: pointer; color: var(--ink-dim); }
.dl-sums div { margin-top: 8px; }
.dl-sums code { display: block; word-break: break-all; font-size: 11.5px; color: var(--ink-dim); }

/* ---- Pricing: license scope (users/devices) ---- */
.license-scope { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: rgba(20,45,85,.5); border: 1px solid var(--stroke); }
.license-scope svg { flex: none; margin-top: 2px; color: var(--cyan, #35e0ff); }
.license-scope p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }
.license-scope strong { color: var(--ink, #fff); }

.dl-verify .flabel { display: block; margin-bottom: 6px; }

/* ---- Test payment: simulated billing location ---- */
.tp-billing { border: 1px solid var(--stroke); border-radius: 12px; padding: 12px 14px 14px; margin: 0 0 16px; }
.tp-billing legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-row .flabel { margin-top: 4px; }
@media (max-width: 520px) { .tp-row { grid-template-columns: 1fr; } }

/* ---- License keys with a copy button (order confirmation) ---- */
.key-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; margin-bottom: 6px;
  background: rgba(6,16,34,.7); border: 1px solid var(--stroke); border-radius: 8px; }
.key-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.key-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 8px;
  border-radius: 7px; border: 1px solid var(--stroke); background: rgba(20,45,85,.5); color: var(--ink-dim); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.key-copy:hover { color: var(--ink); border-color: var(--cyan); }
.key-copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.key-copy .ic-done, .key-copy .key-copied { display: none; }
.key-copy.done { color: #8ff0bc; border-color: #1c4a33; background: #0f2a1c; }
.key-copy.done .ic-copy { display: none; }
.key-copy.done .ic-done, .key-copy.done .key-copied { display: inline-flex; }
.key-copied { font-size: 12.5px; font-weight: 600; }

/* ---- Comparison page ---- */
.cmp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 32px auto 16px; color: var(--ink-dim); font-size: 14px; }
.cmp-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.cmp-wrap { max-width: 1100px; margin: 0 auto; overflow-x: auto; padding: 6px; }
.cmp-wrap:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cmp { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--stroke-soft); text-align: center; vertical-align: middle; }
.cmp thead th { padding: 18px 12px 16px; border-bottom: 1px solid var(--stroke); font-size: 16px; font-weight: 700; color: var(--ink); vertical-align: bottom; }
.cmp .cmp-feat { text-align: left; width: 42%; font-weight: 500; color: var(--ink); }
.cmp thead .cmp-feat { color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.cmp-name { display: block; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* PassMGT column */
.cmp .cmp-us { background: linear-gradient(180deg, rgba(46,134,255,.16), rgba(46,134,255,.08)); border-left: 1px solid rgba(77,163,255,.45); border-right: 1px solid rgba(77,163,255,.45); }
.cmp thead .cmp-us { border-top: 1px solid rgba(77,163,255,.45); border-radius: 14px 14px 0 0; color: #fff; }
.cmp tbody tr:last-child .cmp-us { border-bottom: 1px solid rgba(77,163,255,.45); border-radius: 0 0 14px 14px; }
.cmp-us-badge { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #04121f; background: linear-gradient(135deg, var(--cyan), var(--blue-bright)); font-weight: 800; }

/* group rows */
.cmp tr.cmp-group th { text-align: left; padding: 22px 16px 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-weight: 700; border-bottom: 1px solid var(--stroke); }

/* marks */
.cmp-check { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #04121f;
  background: linear-gradient(135deg, #5be3a1, #35e0ff); box-shadow: 0 4px 14px rgba(53,224,255,.25); }
.cmp-check svg { stroke-width: 3; }
.cmp-check.sm { width: 22px; height: 22px; }
.cmp-blank { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed rgba(127,147,181,.35); }
.cmp-blank.sm { width: 22px; height: 22px; }
.cmp-text { font-size: 13.5px; color: var(--ink-dim); }
.cmp-text.us { color: #fff; font-weight: 700; }

/* PassMGT-only rows */
.cmp tr.cmp-adv th.cmp-feat { box-shadow: inset 3px 0 0 var(--cyan); }
.cmp-only { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--cyan); background: rgba(53,224,255,.1); border: 1px solid rgba(53,224,255,.35); vertical-align: middle; white-space: nowrap; }
.cmp-legend .cmp-only { margin-left: 0; }
.cmp-note { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 400; line-height: 1.45; }
.cmp tr.cmp-adv .cmp-us .cmp-check { width: 32px; height: 32px; box-shadow: 0 0 0 4px rgba(53,224,255,.15), 0 6px 18px rgba(53,224,255,.35); }

/* disclaimer */
.cmp-foot { max-width: 1100px; margin: 28px auto 0; }
.cmp-disclaimer { color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 900px; margin: 18px auto 0; text-align: center; }

/* phones: each feature becomes a card: label, then four product cells (name + check/blank) */
@media (max-width: 760px) {
  .cmp-wrap { overflow: visible; padding: 4px 10px; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; min-width: 0; }
  .cmp thead { display: none; }
  .cmp tr.cmp-group th { padding: 20px 4px 6px; border-bottom: 0; }
  .cmp tbody tr:not(.cmp-group) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 14px 4px; border-bottom: 1px solid var(--stroke-soft); }
  .cmp tbody tr:not(.cmp-group) th.cmp-feat { grid-column: 1 / -1; width: auto; padding: 0 0 6px 10px; border: 0; }
  .cmp tr.cmp-adv th.cmp-feat { box-shadow: inset 3px 0 0 var(--cyan); }
  .cmp tbody td { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border: 1px solid var(--stroke-soft); border-radius: 10px; }
  .cmp tbody td::before { content: attr(data-name); font-size: 11px; color: var(--muted); font-weight: 600; }
  .cmp .cmp-us { border-radius: 10px !important; border: 1px solid rgba(77,163,255,.5) !important; }
  .cmp tbody td.cmp-us::before { color: #fff; }
  .cmp-text { font-size: 11.5px; line-height: 1.3; text-align: center; }
  .cmp-check, .cmp-blank { width: 24px; height: 24px; }
  .cmp tr.cmp-adv .cmp-us .cmp-check { width: 26px; height: 26px; }
}