:root {
  color-scheme: dark;
  --page: #0b101c;
  --panel: #111a2a;
  --line: #26334a;
  --ink: #f2f5fc;
  --muted: #adb9ce;
  --blue: #a7c0ff;
  --action: #bbceff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
button { font: inherit; }
img { display: block; width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
p { line-height: 1.65; color: var(--muted); }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.04em; }
h1 { font-size: clamp(2.7rem, 4.8vw, 4.35rem); letter-spacing: -.052em; word-spacing: .035em; }
h2 { font-size: clamp(2rem, 4.1vw, 3.4rem); letter-spacing: -.058em; }
h3 { font-size: 1.35rem; }
.wrap { width: min(100% - 80px, 1240px); margin-inline: auto; }
.skip { position: absolute; top: 8px; left: 12px; transform: translateY(-150%); z-index: 5; padding: 12px; background: var(--action); color: #0c1730; }
.skip:focus { transform: none; }
.header { border-bottom: 1px solid #202b40; background: #0d1320; }
.nav, .footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.25rem; font-weight: 760; letter-spacing: -.05em; }
.mark { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; color: #121d35; background: var(--blue); font-size: 1.35rem; }
nav { display: flex; flex-wrap: wrap; gap: clamp(15px, 2.8vw, 37px); }
nav a, .quiet { color: #c3cee2; text-decoration: none; font-size: .91rem; font-weight: 650; }
nav a:hover, .quiet:hover { color: white; text-decoration: underline; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 47px; padding: 11px 17px; border-radius: 8px; text-decoration: none; font-size: .91rem; font-weight: 750; border: 1px solid transparent; }
.outline { border-color: #3a4a67; color: #d8e4ff; }
.outline:hover { background: #1c2b44; }
.primary { background: var(--action); color: #101b34; box-shadow: 0 7px 30px #5486f12e; }
.primary:hover { background: #d6e2ff; }
.hero { background: radial-gradient(ellipse at 75% 43%, #1b2e51 0, #10192c 36%, transparent 72%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); align-items: center; gap: clamp(25px, 4vw, 65px); padding-block: clamp(56px, 8vw, 118px) clamp(50px, 7vw, 86px); }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: var(--blue); font-size: .73rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span, .sample-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #86a9ff; flex: none; }
.lead { max-width: 45ch; margin: 22px 0 27px; font-size: 1.07rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 19px; }
.hero-shot { min-width: 0; }
.frame { overflow: hidden; background: #0e1627; border: 1px solid #445778; border-radius: 14px; box-shadow: 0 28px 64px #030710a8; }
.frame-bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 35px; font-size: .7rem; color: #b4c3dc; background: #172237; border-bottom: 1px solid #34445e; }
.frame-dots { display: flex; gap: 5px; position: absolute; left: 13px; }
.frame-dots i { display: block; width: 6px; height: 6px; background: #6f85a8; border-radius: 50%; }
figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .76rem; margin-top: 13px; }
.facts { border-block: 1px solid var(--line); background: #0f1625; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 19px; gap: 12px; }
.facts-grid span { text-align: center; color: #d2dcef; font-weight: 640; font-size: .86rem; }
.facts b { color: var(--blue); margin-right: 7px; }
.section { padding-block: clamp(55px, 8vw, 104px); }
.section-head { margin-bottom: 30px; }
.section-head > p:not(.eyebrow) { max-width: 60ch; margin-top: 13px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 0; list-style: none; }
.steps li { padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: #101827; }
.step-number { display: inline-block; margin-bottom: 15px; color: var(--blue); font-weight: 750; font-size: .82rem; font-variant-numeric: tabular-nums; }
.steps p, .feature-grid p { margin-top: 10px; font-size: .94rem; }
.demo { border-block: 1px solid var(--line); background: linear-gradient(128deg, #111a2a, #0e1524 65%); }
.switch { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-bottom: 17px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: #0c1321; }
.switch button { cursor: pointer; border: 1px solid transparent; border-radius: 7px; padding: 9px 13px; color: #bccbe3; background: transparent; font-size: .85rem; font-weight: 700; }
.switch button:hover, .switch button[aria-pressed="true"] { background: #243657; color: #eff4ff; border-color: #435b88; }
.demo-panel { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); align-items: center; gap: clamp(16px, 4vw, 43px); padding: clamp(16px, 3vw, 32px); border: 1px solid #344663; border-radius: 15px; background: #121d31; }
.example-label { color: #b8cdff; font-size: .75rem; font-weight: 750; }
.example-copy h3 { margin-top: 9px; font-size: clamp(1.45rem, 2.7vw, 2.2rem); }
.example-copy p { font-size: .88rem; }
dl { margin-block: 15px; }
dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid #2d3e59; }
dt { color: #bfcee6; font-size: .83rem; }
dd { margin: 0; text-align: right; font-size: .93rem; color: #edf3ff; font-weight: 740; font-variant-numeric: tabular-nums; }
.demo-image { display: block; min-width: 0; text-decoration: none; }
.demo-image img { border: 1px solid #465a7d; border-radius: 9px; }
.demo-image span { display: block; margin-top: 8px; color: var(--blue); font-size: .76rem; text-align: right; }
.demo-image:hover span { text-decoration: underline; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.feature-grid article { border-top: 1px solid var(--line); padding-top: 16px; }
.feature-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 13px; border-radius: 8px; background: #1b2b46; color: var(--blue); font-weight: 800; }
.privacy { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px, 5vw, 64px); padding: clamp(23px, 5vw, 55px); background: linear-gradient(117deg, #172643, #101a2d); border: 1px solid #33486a; border-radius: 16px; }
.privacy p + p { margin-top: 10px; }
.pricing .section-head { text-align: center; }
.pricing .eyebrow { justify-content: center; }
.pricing .section-head > p { margin-inline: auto; }
.price-card { max-width: 590px; margin-inline: auto; padding: clamp(20px, 4vw, 34px); border-radius: 16px; background: #131e31; border: 1px solid #40577d; box-shadow: 0 15px 55px #04081278; }
.price-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.price-main h3 { font-size: 1.65rem; }
.price-main p:not(.price) { font-size: .86rem; }
.price { color: var(--ink); font-size: 2.65rem; font-weight: 780; line-height: 1; letter-spacing: -.055em; }
.price span { display: block; margin-top: 7px; color: var(--muted); font-size: .79rem; font-weight: 620; letter-spacing: 0; }
.includes { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; list-style: none; padding: 0; margin-block: 20px; font-size: .9rem; }
.includes li::before { content: '✓'; color: var(--blue); margin-right: 7px; }
.purchase { width: 100%; background: #2b3f64; color: #e2ebff; border-color: #536c99; cursor: not-allowed; }
#purchase-status { margin-top: 8px; font-size: .8rem; text-align: center; }
.faq { display: grid; grid-template-columns: minmax(0, .73fr) minmax(0, 1.27fr); gap: 28px 60px; border-top: 1px solid var(--line); }
.faq .section-head { margin: 0; }
details { border-bottom: 1px solid var(--line); }
details:first-child { border-top: 1px solid var(--line); }
summary { position: relative; cursor: pointer; padding: 15px 34px 15px 0; font-weight: 690; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; color: var(--blue); font-size: 1.15rem; }
details[open] summary::after { content: '−'; }
details p { padding: 0 20px 16px 0; font-size: .91rem; }
.footer { border-top: 1px solid var(--line); background: #0d1422; }
@media (max-width: 950px) {
  .wrap { width: min(100% - 48px, 1240px); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 730px) {
  .hero-grid, .demo-panel, .privacy, .faq { grid-template-columns: 1fr; }
  .hero-grid { padding-top: 50px; }
  h1 { max-width: 15ch; }
  .nav { flex-wrap: wrap; gap: 10px; padding-block: 11px; }
  .nav nav { order: 3; width: 100%; justify-content: space-between; gap: 7px; padding: 5px 0; }
  .nav-cta { min-height: 37px; padding: 7px 11px; }
  .steps { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 430px) {
  .wrap { width: calc(100% - 32px); }
  .facts-grid { grid-template-columns: 1fr; gap: 9px; }
  .facts-grid span { text-align: left; }
  .includes, .feature-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 25px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.demo-detail { min-width: 0; }
.detail-scroll { overflow-x: auto; border: 1px solid #465a7d; border-radius: 9px; }
.detail-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.detail-scroll img { min-width: 530px; }
.cost-detail { width: min(100%, 390px); justify-self: center; }
.cost-crop { aspect-ratio: 569 / 598; overflow: hidden; border: 1px solid #465a7d; border-radius: 9px; }
.image-link { display: block; padding-block: 9px; color: var(--blue); font-size: .82rem; text-align: right; }
.price-scope { margin-bottom: 17px; font-size: .88rem; }
.support { border-top: 1px solid var(--line); }
.policy-nav { gap: 8px; margin-bottom: 18px; }
.policy-nav a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; }
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.policy-grid article { padding: 18px; background: #101827; border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 12px; }
.policy-grid p { margin-top: 9px; font-size: .89rem; }
@media (max-width: 950px) {
  .policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 730px) {
  .nav nav a { font-size: .81rem; }
  .switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .switch button { min-height: 44px; padding-inline: 6px; }
}
@media (max-width: 490px) {
  .policy-grid { grid-template-columns: 1fr; }
  .footer .wrap { flex-wrap: wrap; gap: 10px; padding-block: 13px; }
}

/* Product-led hero and the transition into the audit workflow. */
:root {
  --page: #080d19;
  --blue: #8db9ff;
  --action: #297aff;
}
.header { background: #090f1c; }
.hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 79% 44%, #132957 0%, #0a1428 40%, transparent 73%);
}
.hero-grid {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(30px, 5vw, 76px);
  padding-block: clamp(75px, 9vw, 132px) clamp(62px, 7vw, 103px);
}
.hero h1 {
  max-width: 13ch;
  font-size: clamp(3.25rem, 5.35vw, 5.15rem);
  letter-spacing: -.058em;
  line-height: .99;
}
.hero h1 em { color: #579bff; font-style: normal; }
.hero .eyebrow { margin-bottom: 19px; }
.hero .lead { margin-block: 23px 24px; }
.hero .primary { color: #fff; background: #2367de; box-shadow: 0 9px 30px #145ad94f; }
.hero .primary:hover { background: #2159be; }
.hero .outline { background: #111b2c; }
.hero .outline:hover { background: #1a2c4a; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px 15px;
  margin: 19px 0 0; padding: 0; list-style: none;
  color: #c6d2e7; font-size: .77rem; font-weight: 650;
}
.hero-trust li::before { content: '✓'; color: #80afff; margin-right: 5px; }
.hero-art { position: relative; isolation: isolate; padding: 29px 0 38px; }
.hero-orbits { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.hero-orbits i { position: absolute; width: 95%; height: 105%; left: 2.5%; top: -2.5%; border: 1px solid #6195fc34; border-radius: 50%; }
.hero-orbits i:nth-child(2) { transform: scale(.82); }
.hero-orbits i:nth-child(3) { transform: scale(.64); }
.hero-orbits b { position: absolute; left: 14%; top: 13%; width: 8px; height: 8px; background: #86b4ff; border-radius: 50%; box-shadow: 0 0 25px 7px #3d83ff65; }
.hero-art .frame { border-color: #526c99; box-shadow: 0 30px 65px #02050bc7, 0 0 52px #3676ed32; }
.hero-finding {
  position: absolute; right: 5%; bottom: 9px; display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  padding: 12px 15px; background: #101c32; border: 1px solid #547ab3; border-radius: 11px;
  box-shadow: 0 12px 25px #050813a6;
}
.hero-finding span, .hero-finding strong { display: block; }
.hero-finding span { color: #b8c8e3; font-size: .72rem; }
.hero-finding strong { margin-top: 4px; font-size: .88rem; }
.hero-finding b { color: #ffc0cf; background: #45293f; padding: 6px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; font-size: .9rem; }
.pain { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 48% 0%, #14213a 0, #0b1221 58%, #090f1c); }
.pain .section-head { max-width: 710px; margin: 0 auto 32px; text-align: center; }
.pain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pain-card { padding: 22px; border: 1px solid #2d405f; border-radius: 13px; background: linear-gradient(150deg, #182846, #10192a 65%); }
.pain-card:nth-child(2) { background: linear-gradient(150deg, #26223f, #10192a 65%); }
.pain-card:nth-child(3) { background: linear-gradient(150deg, #173043, #10192a 65%); }
.pain-card:nth-child(4) { background: linear-gradient(150deg, #272739, #10192a 65%); }
.pain-card h3 { line-height: 1.2; font-size: 1.21rem; }
.pain-card p { margin-top: 10px; font-size: .9rem; }
.pain-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 17px; border: 1px solid #597ab4; border-radius: 11px; color: #a5c9ff; background: #203456; font-size: 1.3rem; }
.pain-transition { margin: 33px 0 0; text-align: center; color: #d5e0f3; font-size: clamp(1.18rem, 2.3vw, 1.75rem); font-weight: 650; }
.pain-transition strong { color: #8db9ff; }
.steps { position: relative; gap: 19px; }
.steps::before { content: ''; position: absolute; top: 42px; inset-inline: 12%; height: 1px; background: #43649a; }
.steps li { position: relative; display: flex; flex-direction: column; }
.steps .step-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #4c6ea6; background: #1b2d4b; }
.steps p { margin-bottom: 17px; }
.steps img { margin-top: auto; aspect-ratio: 2.25; object-fit: cover; object-position: top; border: 1px solid #314361; border-radius: 8px; }
.demo-panel { grid-template-columns: minmax(0, .67fr) minmax(0, 1.33fr); }
.detail-scroll { overflow: hidden; }
.detail-scroll img { min-width: 0; }
.price-card { border-color: #537ab8; background: radial-gradient(ellipse at 90% 0%, #233b63, #131e31 64%); }
@media (prefers-reduced-motion: no-preference) {
  .pain-card, .button { transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
  .pain-card:hover { transform: translateY(-4px); border-color: #6189ca; }
}
@media (max-width: 950px) {
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 730px) {
  .hero-grid, .demo-panel { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 25px; padding-top: 44px; }
  .hero h1 { font-size: clamp(2.65rem, 9vw, 4.4rem); }
  .hero-art { padding-top: 17px; }
  .steps::before { top: 30px; bottom: 30px; height: auto; width: 1px; inset-inline: 40px auto; }
}
@media (max-width: 430px) {
  .hero-grid { padding-top: 33px; }
  .hero .eyebrow { margin-bottom: 13px; }
  .hero .lead { margin-block: 16px; font-size: .98rem; }
  .hero .actions { gap: 8px; }
  .hero .actions .button { padding-inline: 11px; gap: 6px; min-height: 45px; font-size: .82rem; }
  .hero-trust { margin-top: 14px; gap: 5px 10px; font-size: .73rem; }
  .pain-grid { gap: 10px; }
  .pain-card { padding: 13px; }
  .pain-card h3 { font-size: 1.03rem; }
  .pain-card p { font-size: .84rem; }
  .hero-finding { right: 3%; padding: 8px 10px; }
}

:root {
  --electric: #3B82F6;
  --emerald: #22C55E;
  --coral: #FB7185;
  --amber: #F59E0B;
}
.hero {
  background:
    radial-gradient(ellipse at 90% 72%, #fb718510, transparent 38%),
    radial-gradient(ellipse at 68% 84%, #22c55e0e, transparent 40%),
    radial-gradient(ellipse at 79% 44%, #132957, #0a1428 40%, transparent 73%);
}
.hero .primary, .purchase-link {
  background: var(--electric);
  color: #07152c;
  box-shadow: 0 6px 24px #3b82f638;
}
.hero .primary:hover, .purchase-link:hover { background: #6ea7ff; }
.hero h1 em { color: #71a8ff; }
.mark { background: var(--electric); color: #07152c; }
.hero-trust li::before, .includes li::before { color: var(--emerald); }
.hero-finding { border-color: #fb718568; box-shadow: 0 12px 25px #050813a6, 0 0 26px #fb718515; }
.hero-finding b { color: #ffc2cc; background: #4a2337; border: 1px solid #fb718563; }
.pain-card { --accent: var(--coral); }
.pain-card:nth-child(2) { --accent: var(--amber); }
.pain-card:nth-child(3) { --accent: var(--electric); }
.pain-card:nth-child(4) { --accent: var(--emerald); }
.pain-icon {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, #111b2c);
  border-color: color-mix(in srgb, var(--accent) 48%, #1c2a41);
}
.pain-card:hover { border-color: color-mix(in srgb, var(--accent) 62%, #26334a); }
.pain-transition strong { color: #70e4a0; }
.feature-grid article:nth-child(1) .feature-icon { color: var(--coral); }
.feature-grid article:nth-child(2) .feature-icon { color: var(--emerald); }
.feature-grid article:nth-child(3) .feature-icon { color: var(--amber); }
#scenario-example dd:last-child { color: #87eab0; }
.price-card { box-shadow: 0 15px 55px #04081278, 0 0 42px #3b82f61b; }

.skip { z-index: 12; }
.nav-cta {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding-block: 6px;
  white-space: nowrap;
}
.nav-cta small { font-size: .68rem; font-weight: 700; }
.mobile-purchase { display: none; }
@media (min-width: 731px) {
  html { scroll-padding-top: 96px; }
  .header { position: sticky; top: 0; z-index: 10; }
}
@media (max-width: 730px) {
  html { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .nav-cta { font-size: .79rem; min-height: 44px; }
  .mobile-purchase {
    position: fixed;
    inset: auto 0 0;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    border-top: 1px solid #456293;
    background: #101a2d;
    box-shadow: 0 -10px 35px #02050b94;
  }
  body:has(dialog[open], [aria-modal="true"]:not([hidden]), [data-purchase-bar-blocking]:not([hidden])) .mobile-purchase { display: none; }
  .mobile-purchase-copy { display: grid; min-width: 0; gap: 4px; }
  .mobile-purchase-copy strong { font-size: .83rem; line-height: 1.22; }
  .mobile-purchase-copy span { color: #f6c778; font-size: .73rem; }
  .mobile-purchase .button { min-height: 44px; flex: none; padding-inline: 11px; font-size: .79rem; white-space: nowrap; }
}

/* Margentro. Shared brand tokens with the working product. */
:root { --page:var(--brand-bg); --panel:var(--brand-surface); --line:var(--brand-border); --ink:var(--brand-text); --muted:var(--brand-secondary); --blue:#9BBEFF; --action:var(--brand-action); --electric:var(--brand-blue); --emerald:var(--brand-emerald); --coral:var(--brand-coral); --amber:var(--brand-amber); font-family:var(--brand-font); }
body { background:var(--brand-bg); }
.header { background:#0B1220F5; border-color:#283951; }.brand { font-size:1.6rem; letter-spacing:-.065em; font-weight:720; gap:7px; }.brand-symbol { width:35px; height:35px; flex:none; }.brand-dot { color:var(--brand-blue); }
.nav { min-height:82px; }.nav nav { gap:25px; }.nav nav a { font-size:.79rem; font-weight:500; }.nav-cta { padding:10px 17px; }.nav-cta small { font-weight:500; }
.hero { background:radial-gradient(ellipse at 85% 65%,#26C69A0B,transparent 36%),radial-gradient(ellipse at 75% 25%,#3977F618,transparent 50%),var(--brand-bg); }
.hero-grid { grid-template-columns:1fr 1.1fr; gap:55px; padding-top:105px; padding-bottom:100px; }
.hero h1 { max-width:13ch; font-size:clamp(3.2rem,5.5vw,5.2rem); font-weight:680; letter-spacing:-.062em; line-height:1.04; }.hero h1 em { color:#80AAFF; }
.hero .lead { color:#AEBFD5; font-size:1rem; line-height:1.8; margin-top:28px; max-width:44ch; }.hero .eyebrow { font-size:.64rem; letter-spacing:.15em; color:#A1C1FF; }
.hero .primary,.purchase-link { background:var(--brand-action); color:#fff; border-color:#497FEF; box-shadow:0 8px 22px #3977F61A; }.hero .primary:hover,.purchase-link:hover { background:#244FB6; color:#fff; }
.hero .outline { border-color:#3C506F; background:transparent; }.hero-trust { color:#ACBDD4; font-size:.7rem; gap:12px; margin-top:24px; }.hero-trust li::before { color:var(--brand-emerald); }
.hero-orbits i { border-color:#3977F620; }.hero-orbits b { background:var(--brand-emerald); box-shadow:0 0 30px #26C69A66; }
.hero-art .frame { transform:perspective(1400px) rotateY(-4deg); border-color:#46628A; border-radius:12px; box-shadow:0 30px 70px #02081290,0 0 45px #3977F60B; }.frame-bar { background:#15223A; font-size:.61rem; }
.hero-finding { background:#162139; border-color:#FF6B8355; right:2%; padding:13px 17px; }.hero-finding b { color:#FFB3C2; background:#FF6B8319; border-color:#FF6B8340; }
figcaption { font-size:.68rem; letter-spacing:.01em; }
h2 { font-size:clamp(2rem,3.8vw,3.35rem); line-height:1.12; letter-spacing:-.055em; font-weight:660; }.section { padding-block:95px; }.section-head { margin-bottom:38px; }.section-head > p:not(.eyebrow) { font-size:.93rem; line-height:1.8; }
.pain { background:linear-gradient(180deg,#0E182A,#0B1220); border-block:1px solid #263A55; }.pain-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:15px; }.pain-card { grid-column:span 2; padding:26px; background:linear-gradient(135deg,#17253D,#111B2E 80%); border-color:#2D425F; border-radius:15px; }.pain-card:nth-child(n) { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,#111B2E),#111B2E 80%); }.pain-card:nth-child(4) { grid-column:2/span 2; --accent:var(--brand-blue); }.pain-card:nth-child(5) { grid-column:span 2; --accent:var(--brand-emerald); }.pain-card h3 { font-size:1.2rem; letter-spacing:-.025em; }.pain-card p { font-size:.87rem; line-height:1.8; }.pain-icon { border-radius:12px; width:46px; height:46px; margin-bottom:23px; }.pain-transition { font-size:1.3rem; font-weight:500; margin-top:42px; }.pain-transition strong { color:#6FDDBD; }
.steps::before { background:#304E7A; }.steps li { background:#111B2E; border-color:#2B405D; padding:27px; border-radius:15px; }.steps h3 { font-size:1.2rem; line-height:1.3; }.steps img { aspect-ratio:1.65; object-fit:cover; object-position:top; border-color:#3A5276; }.steps .step-number { background:#3977F616; color:#A4C3FF; border-color:#3977F655; border-radius:50%; }
.demo { background:linear-gradient(150deg,#13213A,#0C1525 70%); border-color:#2D405B; }.demo-panel { background:#111C30; border-color:#385475; border-radius:18px; gap:40px; padding:34px; }.example-label { color:#87DCBE; letter-spacing:.1em; text-transform:uppercase; font-size:.6rem; }.example-copy h3 { font-size:clamp(1.5rem,2.5vw,2.3rem); line-height:1.15; }.example-copy p { line-height:1.85; font-size:.87rem; }.switch { background:#0B1424; border-color:#334A68; padding:5px; margin-bottom:25px; }.switch button { min-height:44px; font-size:.77rem; }.switch button[aria-pressed="true"] { background:#274B87; border-color:#537AB6; }.demo-image img,.detail-scroll,.cost-crop { border-color:#3E587C; border-radius:10px; }.detail-scroll img { width:100%; }.cost-crop { aspect-ratio:auto; overflow:visible; }.image-link { min-height:44px; font-size:.76rem; }.demo-image span { min-height:44px; display:flex; justify-content:flex-end; align-items:center; }
.feature-grid { gap:30px; }.feature-grid h3 { font-size:1.1rem; line-height:1.35; }.feature-grid article { border-color:#355071; }.feature-icon { width:42px; height:42px; background:#3977F615; border-radius:11px; }.privacy { background:radial-gradient(ellipse at 100% 0%,#26C69A0D,transparent 60%),#111E33; border-color:#315270; border-radius:18px; }.privacy p { font-size:.87rem; line-height:1.9; }
.price-card { max-width:650px; border-color:#507CC3; background:radial-gradient(ellipse at 85% 0%,#3977F619,transparent 60%),#111B2E; padding:38px; border-radius:20px; box-shadow:0 20px 65px #02081350; }.price { font-size:3.8rem; letter-spacing:-.06em; }.price-main h3 { font-size:1.8rem; }.price-scope { color:#B3C3D9; font-size:.84rem; line-height:1.9; }.includes { font-size:.85rem; line-height:1.6; margin-block:27px; }.purchase { background:#243753; color:#BDCEE5; border-color:#3D5474; min-height:51px; }.pricing .section-head p { max-width:62ch; }
.faq { border-color:#30455F; }.questions details { border-color:#2D425E; }.questions summary { font-size:.94rem; min-height:58px; }.questions p { font-size:.86rem; line-height:1.85; }.policy-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.policy-grid article { background:transparent; border:0; border-top:1px solid #355071; border-radius:0; padding:23px 0; }.policy-grid h3 { font-size:1.1rem; }.policy-grid p { font-size:.82rem; line-height:1.85; }.policy-nav a { min-height:44px; display:flex; align-items:center; font-size:.77rem; }.footer { background:#0C1627; }.footer .wrap { min-height:100px; }.site-menu { display:none; }
@media (max-width:1100px) { .nav nav { gap:15px; }.nav nav a { font-size:.74rem; }.hero-grid { gap:30px; }.brand { font-size:1.4rem; }.button { font-size:.8rem; } }
@media (max-width:950px) { .hero-grid { grid-template-columns:1fr; gap:38px; padding-top:60px; }.hero h1 { max-width:17ch; font-size:clamp(3rem,6.7vw,4.8rem); }.hero-art { max-width:730px; margin:auto; }.hero .lead { max-width:56ch; }.hero .actions { gap:12px; }.pain-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.pain-card:nth-child(n) { grid-column:auto; }.pain-card:last-child { grid-column:1/-1; }.demo-panel { gap:24px; padding:25px; }.steps li { padding:19px; }.policy-grid { grid-template-columns:1fr 1fr; }.nav nav { gap:12px; } }
@media (max-width:730px) { .header .nav > nav,.header .nav > .nav-cta { display:none; }.header .nav { min-height:72px; padding-block:10px; flex-wrap:nowrap; }.site-menu { display:block; position:relative; border:0; }.site-menu summary { min-width:64px; min-height:44px; padding:12px; border:1px solid #3C557A; border-radius:8px; font-size:.8rem; }.site-menu summary::after { display:none; }.site-menu nav { position:absolute; top:calc(100% + 8px); right:0; width:200px; background:#192A45; border:1px solid #5A7598; padding:10px; display:grid; gap:4px; border-radius:12px; z-index:11; box-shadow:0 15px 30px #02081370; }.site-menu nav a { min-height:44px; display:flex; align-items:center; padding:9px; }
 .wrap { width:calc(100% - 36px); }.brand { font-size:1.55rem; }.hero-grid { padding-top:38px; padding-bottom:53px; gap:25px; }.hero h1 { font-size:clamp(2.9rem,10vw,4rem); max-width:14ch; }.hero .eyebrow { font-size:.58rem; margin-bottom:20px; }.hero .lead { font-size:.92rem; line-height:1.85; margin:20px 0 23px; }.hero .actions .primary { min-height:50px; padding-inline:18px; font-size:.87rem; }.hero .actions .outline { min-height:50px; font-size:.8rem; }.hero-trust { line-height:1.7; gap:6px 11px; font-size:.66rem; }.hero-art { padding-top:12px; padding-bottom:36px; }.hero-art .frame { transform:none; }.hero-finding { padding:10px 12px; right:8px; bottom:5px; }.hero-finding span { font-size:.6rem; }.hero-finding strong { font-size:.75rem; }.hero-finding b { font-size:.8rem; }figcaption { font-size:.63rem; }
 .section { padding-block:60px; }h2 { font-size:2rem; }.section-head { margin-bottom:26px; }.section-head > p:not(.eyebrow) { font-size:.87rem; }.pain-grid { grid-template-columns:1fr; gap:12px; }.pain-card:last-child { grid-column:auto; }.pain-card { padding:23px; }.pain-card h3 { font-size:1.2rem; }.pain-card p { font-size:.86rem; }.pain-icon { width:40px; height:40px; margin-bottom:17px; }.pain-transition { font-size:1.13rem; line-height:1.6; }
 .steps { grid-template-columns:1fr; gap:16px; }.steps li { padding:23px; }.steps img { aspect-ratio:1.7; }.steps::before { display:none; }.demo-panel { grid-template-columns:1fr; padding:21px; }.switch { width:100%; grid-template-columns:1fr 1fr; }.example-copy h3 { font-size:1.7rem; }.demo-detail { width:100%; }.detail-scroll { overflow-x:auto; }.detail-scroll img { min-width:550px; }.cost-detail { max-width:430px; }.demo-image img { width:100%; }.privacy { padding:26px 23px; }.feature-grid { gap:27px; }.price-card { padding:27px 22px; }.price { font-size:3.3rem; }.price-main { gap:20px; }.includes { grid-template-columns:1fr; gap:13px; }.faq { grid-template-columns:1fr; gap:27px; }.policy-grid { grid-template-columns:1fr; gap:4px; }.footer .wrap { padding-block:25px; gap:19px; }.mobile-purchase { background:#101D32FA; border-color:#46658B; }.mobile-purchase .button { background:var(--brand-action); color:#fff; }.mobile-purchase-copy strong { font-size:.78rem; }.mobile-purchase-copy span { color:#F4CA8A; font-size:.68rem; }
}
@media (max-width:350px) { .hero h1 { font-size:2.7rem; }.hero .actions { display:grid; grid-template-columns:1fr; }.hero .actions .button { width:100%; }.hero-finding strong { font-size:.65rem; }.mobile-purchase { gap:7px; padding-inline:10px; }.mobile-purchase-copy strong { font-size:.69rem; }.mobile-purchase .button { font-size:.73rem; padding-inline:10px; } }
@media(max-width:730px) { .detail-scroll:has(picture) img { min-width:0; width:100%; } }

/* Focused Workflow redesign. Illustrations are original local SVGs, not screenshots. */
#how.workflow { padding-block:96px; }
#how .section-head { max-width:760px; margin-bottom:42px; }
#how .section-head > p:not(.eyebrow) { margin-top:16px; color:var(--brand-secondary); }
.workflow-steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin:0; padding:0; list-style:none; }
.workflow-steps::before { content:""; position:absolute; z-index:0; top:21px; left:20px; right:20px; height:1px; background:linear-gradient(90deg,#3977F660,#26C69A45,#FF6B8340); }
.workflow-steps > li { position:relative; min-width:0; }
.workflow-step-top { position:relative; display:flex; align-items:center; gap:12px; min-height:44px; margin-bottom:22px; }
.workflow-step-top > span:last-child { padding-right:12px; background:var(--brand-bg); color:#B3C8E5; font-size:.59rem; font-weight:650; letter-spacing:.11em; line-height:1.6; }
.workflow-number { display:grid; flex:none; place-items:center; width:44px; height:44px; background:#12213B; border:1px solid #4A73AD; border-radius:50%; color:#BED4FF; font-size:.83rem; font-weight:650; font-variant-numeric:tabular-nums; box-shadow:0 0 0 7px var(--brand-bg); }
.workflow-steps > li:nth-child(2) .workflow-number { background:#122A2D; border-color:#36766B; color:#8EE5CD; }
.workflow-steps > li:nth-child(3) .workflow-number { background:#2A1F32; border-color:#8A4C65; color:#FFC0CC; }
.workflow-visual { margin:0 0 25px; border:1px solid #364D70; border-radius:18px; background:#0D1729; box-shadow:0 15px 38px #03091630; }
.workflow-visual img { display:block; width:100%; height:auto; aspect-ratio:360 / 280; border-radius:17px; }
.workflow-steps h3 { margin:0 0 12px; font-size:clamp(1.15rem,1.65vw,1.45rem); line-height:1.3; letter-spacing:-.025em; font-weight:650; }
.workflow-steps > li > p { margin:0; max-width:38ch; font-size:.9rem; line-height:1.85; color:#A9B8CC; }
.workflow-art-note { margin-top:28px; color:#A9B8CC; font-size:.68rem; letter-spacing:.02em; }
.workflow-transition { margin-top:36px; padding-top:33px; border-top:1px solid #2A3D58; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.workflow-transition p { font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.55; letter-spacing:-.025em; color:#F8FAFC; }
.workflow-transition p span { color:#A9B8CC; }
.workflow-transition a { flex:none; min-height:48px; padding-inline:20px; color:#D8E6FC; border-color:#55739F; }
@media (prefers-reduced-motion:no-preference) { .workflow-visual { transition:transform 180ms ease,border-color 180ms ease; }.workflow-steps > li:hover .workflow-visual { transform:translateY(-3px); border-color:#7092C6; } }
@media (max-width:1000px) {
 .workflow-steps { gap:22px; }.workflow-step-top > span:last-child { font-size:.54rem; letter-spacing:.06em; }
}
@media (max-width:900px) {
 #how.workflow { padding-block:64px; }.workflow-steps { grid-template-columns:1fr; gap:42px; }.workflow-steps::before { display:none; }
 .workflow-steps > li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 28px; align-content:start; }
 .workflow-step-top { grid-column:1/-1; margin-bottom:18px; }.workflow-visual { grid-column:1; grid-row:2 / span 2; margin:0; }.workflow-steps h3 { align-self:end; font-size:1.4rem; margin-bottom:12px; }.workflow-steps > li > p { font-size:.89rem; }
 .workflow-step-top > span:last-child { font-size:.62rem; letter-spacing:.1em; }.workflow-art-note { margin-top:30px; }.workflow-transition { gap:20px; }
}
@media (max-width:600px) {
 #how.workflow { padding-block:58px; }#how .section-head { margin-bottom:33px; }#how h2 { font-size:2rem; line-height:1.13; }
 .workflow-steps { gap:40px; }.workflow-steps > li { display:block; }.workflow-step-top { margin-bottom:17px; }.workflow-visual { margin:0 0 22px; width:100%; }.workflow-steps h3 { font-size:1.32rem; line-height:1.35; margin-bottom:11px; }.workflow-steps > li > p { max-width:none; font-size:.89rem; line-height:1.85; }
 .workflow-art-note { text-align:center; font-size:.63rem; }.workflow-transition { flex-direction:column; text-align:center; margin-top:28px; padding-top:28px; gap:20px; }.workflow-transition p { max-width:25ch; font-size:1.24rem; }.workflow-transition p span { display:block; }.workflow-transition a { width:100%; max-width:320px; min-height:50px; }
}

/* Laptop hero: natural content height, with media and type responding to viewport height. */
@media (min-width:951px) {
 .hero-grid {
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(26px,3.3vw,48px);
  padding-block:clamp(28px,5.2vh,60px);
  padding-block:clamp(28px,5.2svh,60px);
 }
 .hero h1 {
  max-width:14ch;
  font-size:clamp(2.85rem,min(4.6vw,8.2vh),4.4rem);
  font-size:clamp(2.85rem,min(4.6vw,8.2svh),4.4rem);
  line-height:1.06;
  letter-spacing:-.055em;
 }
 .hero .eyebrow { margin-bottom:clamp(12px,2vh,18px); }
 .hero .lead { margin-block:clamp(16px,2.6vh,24px) clamp(18px,2.6vh,24px); line-height:1.75; }
 .hero .actions { gap:12px 16px; }
 .hero-trust { margin-top:clamp(14px,2.2vh,20px); line-height:1.65; }
 .hero-shot {
  width:100%;
  max-width:min(100%,max(320px,calc((100vh - 270px) * 1.36)));
  max-width:min(100%,max(320px,calc((100svh - 270px) * 1.36)));
  justify-self:center;
 }
 .hero-art { padding:12px 0 24px; }
 .hero-shot figcaption { margin-top:10px; }
}

/* Keep the word boundary clear across the two headline colors. */
#headline .hero-word-gap { letter-spacing:.08em; word-spacing:normal; }