:root {
  --ink: #11121a;
  --ink-soft: #343643;
  --muted: #6f7280;
  --line: #e2e3e9;
  --paper: #ffffff;
  --wash: #f5f5f9;
  --purple: #665cf6;
  --purple-dark: #4e43dc;
  --purple-pale: #ebe9ff;
  --mint: #25c4a4;
  --night: #0b0c13;
  --shadow: 0 24px 80px rgba(24, 22, 55, .13);
  --shell: 1180px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img, svg { display: block; }
.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; color: #fff; background: var(--ink); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled { border-color: rgba(17, 18, 26, .08); background: rgba(255, 255, 255, .88); box-shadow: 0 8px 30px rgba(18, 19, 28, .05); backdrop-filter: blur(18px); }
.nav-shell { display: flex; height: 76px; align-items: center; gap: 38px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 780; letter-spacing: -.03em; }
.brand img { flex: 0 0 auto; border-radius: 11px; box-shadow: 0 5px 16px rgba(36, 32, 94, .18); }
.site-nav { display: flex; align-items: center; gap: 31px; margin-left: auto; }
.site-nav a, .footer-links a { color: var(--muted); font-size: 13px; font-weight: 600; transition: color .18s ease; }
.site-nav a:hover, .footer-links a:hover { color: var(--ink); }
.nav-cta { padding: 10px 16px; border: 1px solid rgba(17, 18, 26, .16); border-radius: 10px; font-size: 12px; font-weight: 720; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.nav-cta:hover { transform: translateY(-1px); border-color: var(--ink); background: #fff; }
.menu-button { display: none; width: 42px; height: 42px; margin-left: auto; padding: 0; cursor: pointer; border: 0; border-radius: 10px; background: transparent; }
.menu-button > span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 5px auto; border-radius: 2px; background: currentColor; transition: transform .2s ease; }

.hero { position: relative; min-height: 800px; padding: 142px 0 94px; overflow: hidden; background: linear-gradient(180deg, #fafaff 0%, #fff 76%); }
.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(rgba(102, 92, 246, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 92, 246, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-one { top: -190px; right: 3%; width: 610px; height: 610px; background: radial-gradient(circle, rgba(102, 92, 246, .2), rgba(102, 92, 246, 0) 70%); }
.hero-glow-two { bottom: -300px; left: -180px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(37, 196, 164, .12), rgba(37, 196, 164, 0) 70%); }
.hero-grid { position: relative; display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 50px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 8px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--purple-dark); font-size: 11px; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow > span { width: 19px; height: 2px; border-radius: 3px; background: currentColor; }
.hero h1, .section-heading h2, .final-card h2 { margin: 20px 0 0; font-size: clamp(62px, 6.3vw, 94px); line-height: .92; letter-spacing: -.07em; }
.hero h1 em { color: var(--purple); font-style: normal; }
.hero-lede { max-width: 530px; margin: 29px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.72; letter-spacing: -.01em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 33px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 0 21px; cursor: pointer; border: 0; border-radius: 11px; font-size: 13px; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button-primary { color: #fff; background: var(--ink); box-shadow: 0 12px 26px rgba(17, 18, 26, .19); }
.button-primary:hover { background: #272936; box-shadow: 0 16px 32px rgba(17, 18, 26, .24); }
.button-quiet { color: var(--ink-soft); background: transparent; }
.button-quiet:hover { background: var(--wash); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 19px; margin: 24px 0 0; padding: 0; color: var(--muted); list-style: none; font-size: 11px; font-weight: 580; }
.hero-notes li { display: flex; align-items: center; gap: 6px; }
.hero-notes svg, .price-card li svg { width: 16px; height: 16px; fill: none; stroke: var(--mint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.product-stage { position: relative; min-height: 540px; perspective: 1500px; }
.browser-mock { position: absolute; z-index: 3; top: 28px; right: -70px; width: 690px; overflow: hidden; transform: rotateY(-3deg) rotateX(1deg); border: 1px solid rgba(29, 28, 49, .13); border-radius: 18px; background: #fff; box-shadow: 0 42px 100px rgba(35, 28, 91, .2), 0 12px 34px rgba(17, 18, 26, .09); }
.browser-bar { display: grid; height: 42px; grid-template-columns: 90px 1fr 46px; align-items: center; padding: 0 13px; border-bottom: 1px solid #e8e8ee; background: #f4f4f7; }
.browser-dots { display: flex; gap: 5px; }
.browser-dots span { width: 7px; height: 7px; border-radius: 50%; background: #c9cad2; }
.browser-dots span:first-child { background: #ff7c79; }
.browser-dots span:nth-child(2) { background: #f5c866; }
.browser-dots span:last-child { background: #61ca8a; }
.browser-address { display: flex; height: 25px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #e1e2e8; border-radius: 7px; color: #8b8e9a; background: #fff; font-size: 9px; }
.lock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.browser-more { color: #a0a2ab; font-size: 10px; text-align: right; letter-spacing: 2px; }
.mock-page { position: relative; height: 438px; overflow: hidden; background: #efeef7; }
.mock-page-art { position: absolute; width: 58%; inset: 0 auto 0 0; overflow: hidden; background: #11131a; }
.shape { position: absolute; display: block; }
.shape-one { top: -90px; left: -65px; width: 310px; height: 310px; transform: rotate(24deg); border-radius: 85px; background: #665cf6; }
.shape-two { right: -80px; bottom: -80px; width: 300px; height: 300px; border: 50px solid #25c4a4; border-radius: 50%; }
.shape-three { top: 80px; right: 38px; width: 110px; height: 220px; transform: rotate(36deg); border-radius: 80px; background: #f7d86d; }
.mock-play { position: absolute; z-index: 2; display: grid; width: 56px; height: 56px; inset: 50% auto auto 50%; transform: translate(-50%, -50%); place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(12, 13, 19, .75); backdrop-filter: blur(8px); }
.mock-play svg { width: 22px; fill: currentColor; }
.extension-panel { position: absolute; z-index: 4; top: 20px; right: 16px; width: 355px; padding: 13px; border: 1px solid rgba(22, 22, 34, .1); border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 22px 55px rgba(17, 18, 26, .2); backdrop-filter: blur(14px); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid #e8e8ee; }
.panel-brand { display: flex; align-items: center; gap: 8px; }
.panel-brand img { border-radius: 9px; }
.panel-brand span { display: grid; }
.panel-brand strong { font-size: 11px; }
.panel-brand small { color: #858896; font-size: 8px; }
.panel-icons { display: flex; align-items: center; gap: 11px; color: #555866; font-size: 13px; }
.panel-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 11px 0; padding: 3px; border-radius: 8px; background: #f0f0f5; }
.panel-tabs > span { padding: 7px 4px; border-radius: 6px; color: #828591; font-size: 8px; font-weight: 700; text-align: center; }
.panel-tabs > .active { color: #22232d; background: #fff; box-shadow: 0 1px 4px rgba(20,20,35,.1); }
.panel-tabs b { display: inline-grid; min-width: 15px; height: 15px; margin-left: 3px; place-items: center; border-radius: 50%; background: #e7e7ed; font-size: 7px; }
.media-row { display: grid; grid-template-columns: 89px 1fr; gap: 9px; padding: 8px; border: 1px solid #e4e4ea; border-radius: 10px; background: #fff; }
.second-row { margin-top: 7px; }
.media-thumb { position: relative; height: 66px; overflow: hidden; border-radius: 7px; }
.thumb-purple { background: linear-gradient(135deg, #5e35f3 0 45%, #c2ffda 45% 62%, #15161d 62%); }
.thumb-mint { background: radial-gradient(circle at 70% 25%, #f9dc71 0 16%, transparent 17%), linear-gradient(145deg, #24c3a2 0 50%, #243046 50%); }
.mini-play { position: absolute; display: grid; width: 25px; height: 25px; inset: 50% auto auto 50%; transform: translate(-50%, -50%); place-items: center; border-radius: 50%; color: #fff; background: rgba(10,11,17,.72); font-size: 8px; }
.media-info { min-width: 0; }
.media-info strong, .media-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-info strong { font-size: 10px; }
.media-info small { margin-top: 3px; color: #7b7e8b; font-size: 7.5px; }
.media-info button { float: right; margin-top: 12px; padding: 6px 9px; border: 0; border-radius: 6px; color: #fff; background: var(--purple); font-size: 7.5px; font-weight: 750; }
.orbit { position: absolute; border: 1px solid rgba(102, 92, 246, .12); border-radius: 50%; }
.orbit-one { top: -90px; right: -170px; width: 600px; height: 600px; }
.orbit-two { top: -22px; right: -100px; width: 450px; height: 450px; }
.floating-chip { position: absolute; z-index: 5; padding: 11px 14px; border: 1px solid rgba(24, 23, 42, .1); border-radius: 10px; color: #343643; background: rgba(255,255,255,.93); box-shadow: 0 12px 30px rgba(22, 19, 57, .13); font-size: 10px; font-weight: 700; backdrop-filter: blur(12px); }
.chip-private { bottom: 18px; left: 8px; display: flex; align-items: center; gap: 7px; }
.chip-private span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(37,196,164,.13); }
.chip-formats { top: 8px; right: -4px; color: var(--purple-dark); }

.trust-strip { border-block: 1px solid var(--line); background: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-grid > div { display: grid; gap: 4px; padding: 27px 38px; border-right: 1px solid var(--line); }
.trust-grid > div:first-child { padding-left: 0; }
.trust-grid > div:last-child { border-right: 0; }
.trust-grid strong { font-size: 12px; }
.trust-grid span { color: var(--muted); font-size: 11px; }

.section-block { padding: 124px 0; }
.features-section { background: #fff; }
.section-heading { display: grid; max-width: 700px; grid-template-columns: 1fr 280px; column-gap: 65px; align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2 { margin-top: 18px; font-size: clamp(48px, 5vw, 72px); }
.section-heading > p { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 60px; }
.feature-card { position: relative; min-height: 340px; overflow: hidden; padding: 33px; border: 1px solid var(--line); border-radius: 22px; background: var(--wash); }
.feature-card h3 { max-width: 380px; margin: 19px 0 0; font-size: 25px; letter-spacing: -.04em; }
.feature-card p { max-width: 390px; margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.feature-wide { display: grid; min-height: 390px; grid-column: 1 / -1; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 40px; }
.feature-number { color: #9a9ca8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .08em; }
.feature-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 14px; }
.feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.purple-icon { color: var(--purple); background: var(--purple-pale); }
.mint-icon { color: var(--mint); background: rgba(37, 196, 164, .13); }
.dark-card { color: #fff; border-color: #1d1f28; background: var(--night); }
.dark-card p, .dark-card .feature-number { color: #999dab; }
.signal-visual { position: relative; height: 270px; }
.signal-core { position: absolute; z-index: 4; width: 94px; height: 94px; inset: 50% auto auto 50%; transform: translate(-50%, -50%); padding: 14px; border-radius: 26px; background: #fff; box-shadow: 0 20px 50px rgba(41, 35, 104, .2); }
.signal-core img { width: 100%; height: 100%; }
.signal-line { position: absolute; display: block; height: 1px; transform-origin: left; background: linear-gradient(90deg, rgba(102,92,246,.8), rgba(102,92,246,.06)); }
.line-one { top: 48%; left: 17%; width: 34%; transform: rotate(9deg); }
.line-two { top: 49%; left: 50%; width: 35%; transform: rotate(-28deg); }
.line-three { top: 54%; left: 50%; width: 34%; transform: rotate(26deg); }
.format-pill { position: absolute; z-index: 3; padding: 9px 13px; border: 1px solid #dfe0e8; border-radius: 9px; background: #fff; box-shadow: 0 8px 20px rgba(26,25,48,.08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; }
.format-one { top: 39%; left: 5%; }
.format-two { top: 7%; right: 5%; }
.format-three { right: 3%; bottom: 13%; }
.panel-feature { background: linear-gradient(135deg, #f2f1ff, #f6faf9); }
.mode-demo { display: grid; grid-template-columns: 1fr 56px 1.4fr; align-items: center; gap: 14px; }
.mode-demo > svg { width: 44px; fill: none; stroke: var(--purple); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mode-window { position: relative; height: 180px; overflow: hidden; border: 1px solid #d9dae3; border-radius: 14px; background: #fff; box-shadow: 0 18px 35px rgba(37, 33, 88, .1); }
.mode-window::before { display: block; height: 24px; content: ""; border-bottom: 1px solid #e4e5eb; background: #f2f2f5; }
.mode-window > span { display: block; height: 9px; margin: 16px 14px 0; border-radius: 9px; background: #e8e8ee; }
.mode-window > span:nth-child(2) { width: 62%; }
.mode-window > span:nth-child(3) { width: 78%; }
.popup-mode { height: 128px; }
.sidebar-mode i { position: absolute; top: 25px; right: 0; bottom: 0; width: 36%; border-left: 1px solid #dfdfe7; background: var(--purple-pale); }

.how-section { color: #f7f7fa; background: var(--night); }
.how-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.section-heading.compact { display: block; }
.section-heading.compact h2 { font-size: clamp(50px, 5.5vw, 75px); }
.eyebrow.light { color: #9892ff; }
.steps { margin: 0; padding: 0; border-top: 1px solid #30323c; list-style: none; }
.steps li { display: grid; grid-template-columns: 55px 1fr; gap: 22px; padding: 31px 4px; border-bottom: 1px solid #30323c; }
.steps li > span { color: #777b89; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.steps h3 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.steps p { max-width: 460px; margin: 7px 0 0; color: #989ba8; font-size: 13px; line-height: 1.65; }

.pricing-section { background: #f6f6fa; }
.section-heading.centered { display: block; max-width: 720px; margin-inline: auto; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading.centered > p { max-width: 480px; margin: 20px auto 0; }
.pricing-grid { display: grid; max-width: 850px; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 60px auto 0; }
.price-card { position: relative; padding: 35px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 12px 38px rgba(29,29,47,.05); }
.premium-card { color: #fff; border-color: #272936; background: var(--night); box-shadow: 0 24px 60px rgba(20,20,35,.19); }
.popular-badge { position: absolute; top: 22px; right: 22px; padding: 6px 9px; border-radius: 99px; color: #c7fff3; background: rgba(37,196,164,.15); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan-head { display: grid; gap: 3px; }
.plan-head > span { font-size: 18px; font-weight: 760; }
.plan-head small { color: var(--muted); font-size: 10px; }
.premium-card .plan-head small, .premium-card .plan-lede, .premium-card .cancel-note { color: #9b9eaa; }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 28px; }
.price strong { font-size: 58px; line-height: 1; letter-spacing: -.06em; }
.price sup { margin-right: 3px; font-size: 25px; vertical-align: top; }
.price > span { color: var(--muted); font-size: 11px; }
.premium-card .price > span { color: #9b9eaa; }
.plan-lede { min-height: 44px; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.price-card ul { display: grid; gap: 13px; margin: 26px 0 31px; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
.premium-card ul { border-color: #30323c; }
.price-card li { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 12px; }
.premium-card li { color: #d9dae1; }
.price-card li svg { flex: 0 0 auto; }
.full-button { width: 100%; }
.button-outline { border: 1px solid #d6d7df; background: #fff; }
.button-outline:hover { border-color: var(--ink); }
.button-premium { color: #11131a; background: linear-gradient(135deg, #8b82ff, #54e3c6); box-shadow: 0 12px 28px rgba(76, 202, 177, .15); }
.button-premium:hover { box-shadow: 0 17px 36px rgba(76, 202, 177, .24); }
.cancel-note { display: block; margin-top: 11px; font-size: 9px; text-align: center; }

.faq-section { background: #fff; }
.faq-shell { display: grid; grid-template-columns: .72fr 1.28fr; gap: 110px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 73px; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 680; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
.faq-list summary span::before, .faq-list summary span::after { position: absolute; top: 9px; left: 3px; width: 14px; height: 1.5px; content: ""; background: var(--ink); transition: transform .2s ease; }
.faq-list summary span::after { transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 630px; margin: -5px 42px 25px 0; color: var(--muted); font-size: 13px; line-height: 1.72; }

.final-cta { padding: 0 0 90px; }
.final-card { display: flex; min-height: 330px; align-items: flex-end; justify-content: space-between; gap: 50px; padding: 52px; overflow: hidden; border-radius: 26px; color: #fff; background: radial-gradient(circle at 78% 0%, rgba(37,196,164,.38), transparent 32%), linear-gradient(135deg, #665cf6, #33298f); box-shadow: 0 28px 70px rgba(75, 64, 207, .22); }
.mini-label { display: block; margin-bottom: 28px; color: #d7d4ff; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.final-card h2 { margin: 0; font-size: clamp(45px, 5vw, 67px); }
.final-actions { display: grid; min-width: 210px; gap: 18px; }
.button-light { color: var(--purple-dark); background: #fff; }
.text-link { font-size: 11px; font-weight: 680; text-align: center; }
.text-link span { margin-left: 6px; }

.site-footer { padding: 45px 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.footer-brand p { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.footer-links { display: flex; gap: 24px; }
.copyright { grid-column: 1 / -1; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: #9a9ca6; font-size: 9px; }

.checkout-dialog { width: min(440px, calc(100% - 32px)); padding: 35px; border: 0; border-radius: 20px; color: var(--ink); box-shadow: 0 30px 100px rgba(10,11,18,.34); }
.checkout-dialog::backdrop { background: rgba(9,10,16,.62); backdrop-filter: blur(6px); }
.checkout-dialog h2 { margin: 20px 0 0; font-size: 25px; letter-spacing: -.04em; }
.checkout-dialog p { margin: 12px 0 25px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.checkout-dialog code { padding: 2px 5px; border-radius: 4px; color: var(--purple-dark); background: var(--purple-pale); font-size: 11px; }
.dialog-icon img { border-radius: 13px; }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; cursor: pointer; border: 0; border-radius: 9px; color: var(--muted); background: var(--wash); font-size: 22px; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 20px; }
  .browser-mock { right: -170px; }
  .chip-formats { right: -30px; }
}

@media (max-width: 900px) {
  .nav-shell { height: 68px; }
  .menu-button { display: block; }
  .nav-cta { display: none; }
  .site-nav { position: fixed; top: 68px; right: 18px; left: 18px; display: grid; gap: 0; margin: 0; padding: 10px; transform: translateY(-12px); visibility: hidden; opacity: 0; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .site-nav.open { transform: translateY(0); visibility: visible; opacity: 1; }
  .site-nav a { padding: 13px 12px; }
  .menu-button[aria-expanded="true"] > span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { min-height: auto; padding-top: 120px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 650px; }
  .product-stage { min-height: 560px; margin-top: 20px; }
  .browser-mock { right: auto; left: 50%; transform: translateX(-50%); }
  .chip-formats { right: 3%; }
  .trust-grid > div { padding-inline: 24px; }
  .section-heading { max-width: 100%; }
  .how-shell, .faq-shell { grid-template-columns: 1fr; gap: 55px; }
  .feature-wide { grid-template-columns: 1fr 1fr; }
  .final-card { align-items: flex-start; flex-direction: column; }
  .final-actions { width: 100%; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 30px, var(--shell)); }
  .hero { padding: 108px 0 70px; }
  .hero h1 { font-size: clamp(58px, 19vw, 82px); }
  .hero-lede { font-size: 15px; }
  .hero-actions .button { flex: 1; }
  .hero-notes { align-items: flex-start; flex-direction: column; gap: 9px; }
  .product-stage { min-height: 440px; margin-top: 10px; }
  .browser-mock { width: 550px; transform: translateX(-44%) scale(.8); transform-origin: top center; }
  .floating-chip { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div, .trust-grid > div:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-grid > div:last-child { border-bottom: 0; }
  .section-block { padding: 88px 0; }
  .section-heading { display: block; }
  .section-heading h2 { font-size: 48px; }
  .section-heading > p { margin-top: 20px; }
  .feature-grid, .pricing-grid { grid-template-columns: 1fr; }
  .feature-wide { display: block; min-height: 0; grid-column: auto; }
  .feature-card { min-height: 320px; padding: 27px; }
  .signal-visual { height: 260px; margin-top: 26px; }
  .panel-feature .feature-copy { margin-top: 35px; }
  .mode-demo { grid-template-columns: 1fr 34px 1.25fr; gap: 8px; }
  .mode-demo > svg { width: 32px; }
  .mode-window { height: 140px; }
  .popup-mode { height: 100px; }
  .how-shell, .faq-shell { gap: 45px; }
  .price-card { padding: 29px; }
  .faq-list summary { min-height: 68px; font-size: 14px; }
  .final-cta { padding-bottom: 55px; }
  .final-card { min-height: 390px; padding: 33px 27px; }
  .final-card h2 { font-size: 46px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; }
}

@media (max-width: 400px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .browser-mock { transform: translateX(-43%) scale(.7); }
  .product-stage { min-height: 390px; }
  .feature-card { min-height: 300px; }
  .price strong { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Checkout success and license activation */
.success-page { min-height: 100vh; background: radial-gradient(circle at 50% -10%, rgba(102,92,246,.17), transparent 36%), var(--wash); }
.success-header { padding: 24px 0; }
.success-header .shell { display: flex; justify-content: center; }
.success-main { display: grid; min-height: calc(100vh - 150px); padding: 32px 16px 70px; place-items: center; }
.activation-card { width: min(620px, 100%); padding: 48px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
.activation-mark { display: grid; width: 62px; height: 62px; margin-bottom: 26px; place-items: center; border-radius: 18px; color: var(--purple); background: var(--purple-pale); }
.activation-mark svg { display: none; width: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.activation-spinner { width: 24px; height: 24px; border: 2px solid rgba(102,92,246,.2); border-top-color: var(--purple); border-radius: 50%; animation: activation-spin .75s linear infinite; }
.activation-card[data-state="success"] .activation-mark { color: #08745e; background: #dff8f1; }
.activation-card[data-state="success"] .activation-mark svg { display: block; }
.activation-card[data-state="success"] .activation-spinner { display: none; }
.activation-card[data-state="error"] .activation-mark { color: #b82f4c; background: #fff0f3; }
.activation-card[data-state="error"] .activation-spinner { display: none; }
.activation-card[data-state="error"] .activation-mark::before { content: "!"; font-size: 28px; font-weight: 800; }
.activation-card h1 { margin: 17px 0 0; font-size: clamp(38px, 7vw, 56px); line-height: .98; letter-spacing: -.06em; }
.activation-lede { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.license-result { margin-top: 28px; padding: 18px; border: 1px solid #dcd9ff; border-radius: 14px; background: #faf9ff; }
.license-result label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.license-copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.license-copy-row input { min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.license-result > p { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.activation-steps { display: grid; gap: 0; margin: 25px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.activation-steps li { display: grid; grid-template-columns: 29px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.activation-steps li > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--purple-dark); background: var(--purple-pale); font-size: 10px; font-weight: 800; }
.activation-steps strong, .activation-steps small { display: block; }
.activation-steps strong { font-size: 12px; }
.activation-steps small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.activation-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 28px; }
.success-footer { padding: 20px; color: var(--muted); font-size: 10px; text-align: center; }
@keyframes activation-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .activation-card { padding: 32px 22px; border-radius: 20px; }
  .license-copy-row { grid-template-columns: 1fr; }
  .activation-actions { align-items: stretch; flex-direction: column-reverse; }
  .activation-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .activation-spinner { animation: none; }
}