:root {
  --navy: #102c3c;
  --ink: #102c3c;
  --blue: #315d73;
  --muted: #526674;
  --yellow: #ffcc26;
  --line: #dce4e8;
  --paper: #f6f9fa;
  --radius-control: 10px;
  --radius-panel: 24px;
}

body { background: #fff; color: var(--navy); }
.header { background: var(--navy); color: #fff; border-bottom: 1px solid var(--navy); }
.header .desktop-nav a,.header .login,.header .menu-toggle { color: #fff; }
.header .desktop-nav a:hover,.header .login:hover { color: var(--yellow); }
.header .mobile-nav { background: var(--navy); color: #fff; border-top: 1px solid #ffffff24; box-shadow: 0 12px 22px #102c3c18; }
.header .mobile-nav a:hover { color: var(--yellow); }
.header a:focus-visible,.header button:focus-visible { outline-color: var(--yellow); }
.header:before { content: none; }
.nav-wrap { height: 88px; max-width: 1280px; padding-inline: 40px; }
.brand img { width: 183px; height: auto; }
.desktop-nav { margin-left: 0; gap: 32px; font-size: 12px; }
.nav-actions { gap: 22px; }
.cta { border-radius: var(--radius-control); background: var(--yellow); box-shadow: none; min-height: 56px; }
.cta:hover { background: #ffda60; box-shadow: 0 5px 15px #102c3c0c; transform: translateY(-1px); }
.cta-small { min-height: 43px; }
.hero { max-width: 1280px; grid-template-columns: 1.07fr 1fr; min-height: 760px; padding: 34px 40px 22px; gap: 36px; }
.hero-copy { padding: 0; }
h1 { font-size: clamp(48px,4.5vw,65px); line-height: 1.08; letter-spacing: -3.2px; font-weight: 750; }
h1 em,h2 em { color: var(--blue); }
.eyebrow { color: var(--muted); font-size: 10px; letter-spacing: 1.4px; }
.hero-summary { font-size: 16px; line-height: 1.8; margin-bottom: 25px; }
.capability-list { gap: 13px 28px; margin-bottom: 30px; }
.capability-list li { font-size: 15px; line-height: 1.7; color: var(--navy); }
.text-accent { color: var(--blue); -webkit-text-stroke: 0; background: none; text-shadow: none; font-weight: inherit; }
.capability-list .text-accent { color: var(--navy); }
.capability-list strong { font-weight: 750; }
.tour-link { margin-top: 23px; }
.play-mark { border-radius: 8px; border-color: var(--line); }
.phone-scene { height: 720px; }
.phone-position { width: 300px; left: calc(50% - 150px); top: 10px; }
.phone { aspect-ratio: 71.6 / 147.6; width: 100%; padding: 0; border: 2px solid #6c7880; border-radius: 44px; background: #17242c; box-shadow: 0 0 0 1px #16232d,0 20px 35px #102c3c24; transform: none; }
.phone-glass { position: absolute; inset: 4px 7px; aspect-ratio: auto; border-radius: 36px; background: #f3f5f6; }
.phone-glass>img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.phone-island { position: absolute; top: 11px; left: 36%; width: 28%; height: 21px; border-radius: 16px; background: #091117; box-shadow: inset 0 0 0 1px #19252d; pointer-events: none; z-index: 5; }
.phone-island:after { content: ''; position: absolute; right: 8px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #172d3c; box-shadow: inset 0 0 0 2px #101e2a; }
.phone-side { display: block; position: absolute; right: -5px; top: 26%; height: 55px; width: 3px; background: #5c6972; border-radius: 0 2px 2px 0; }
.phone-home-indicator { height: 3px; bottom: 6px; background: #102c3c; opacity: .55; }
.phone-backdrop { left: 2%; right: 2%; top: 298px; height: 255px; border-radius: var(--radius-panel); background: var(--blue); }
.phone-backdrop:after { opacity: .07; }
.phone-shadow { bottom: 73px; opacity: .5; }
.phone-controls { bottom: 24px; gap: 10px; }
.phone-tabs { padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.phone-tabs button { border-radius: 8px; padding-inline: 12px; font-size: 10px; }
.phone-tabs button[aria-selected=true] { background: var(--navy); color: #fff; box-shadow: none; }
.motion-button { border-radius: 10px; background: white; width: 38px; height: 38px; border-color: var(--line); }
.phone-demo-caption { color: var(--muted); }
.scan-appbar { padding-top: 12cqw; }
.scan-toolbar { padding-top: 3cqw; }
.bridge { max-width: 1200px; padding: 20px 0 24px; }
.ai-intro { max-width: 1200px; padding: 54px 0 36px; grid-template-columns: .9fr 1.8fr; gap: 48px; }
.ai-intro h2 { font-size: 38px; line-height: 1.2; letter-spacing: -1.7px; }
.ai-intro-heading>p:last-child { line-height: 1.8; }
.ai-stories { gap: 30px; }
.ai-stories h3 { font-size: 19px; letter-spacing: -.45px; }
.ai-stories p { font-size: 13px; line-height: 1.8; }
.ai-story-number { color: var(--blue); letter-spacing: 1.2px; }
.ai-stories article+article { padding-left: 30px; }
.text-link { color: var(--navy); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #b4c5cf; }
.text-link:hover { text-decoration-color: var(--navy); }
.tour-section { max-width: 1280px; padding: 56px 0 52px; }
.section-heading { margin-bottom: 30px; }
h2 { font-size: 43px; letter-spacing: -1.8px; }
.tour-shell { padding-inline: 40px; }
.chapter-nav { max-width: none; gap: 5px; border-bottom: 1px solid var(--line); }
.chapter-nav button { min-height: 57px; padding: 16px 24px; }
.chapter-nav button[aria-selected=true]:after { background: var(--navy); height: 2px; }
.chapter-nav button[aria-selected=true] .chapter-num { color: var(--navy); }
.feature-nav { margin: 18px 0 30px; gap: 8px; }
.feature-nav button { border-radius: 9px; min-height: 39px; padding: 9px 19px; }
.feature-nav button[aria-selected=true] { background: var(--navy); color: white; border-color: var(--navy); }
.tour-grid { grid-template-columns: minmax(0,1.9fr) minmax(270px,1fr); gap: 58px; }
.feature-copy { min-height: 390px; padding: 0; }
.feature-copy h3 { font-size: 30px; letter-spacing: -1px; }
.feature-copy .eyebrow { color: var(--blue); }
.feature-copy>p:not(.eyebrow) { font-size: 13px; line-height: 1.85; }
.feature-steps { gap: 8px; }
.feature-steps button:before { border-radius: 6px; }
.feature-steps li.current button:before { background: var(--yellow); }
.player-buttons button { border-radius: 8px; }
.progress-track { height: 3px; border-radius: 2px; }
#tour-progress { background: var(--navy); }
.tour-bottom { margin: 28px 40px 0; max-width: none; }
.connected-section { max-width: 1200px; margin: 24px auto 64px; border-radius: var(--radius-panel); padding: 54px 48px; gap: 70px; background: var(--navy); }
.connected-intro h2 { font-size: 38px; line-height: 1.2; }
.connected-section h2 em { color: #fff; }
.connected-section .eyebrow { color: #c3d4df; }
.connected-section .flow-number { border-radius: 10px; background: var(--yellow); }
.connected-section .flow-list:before { background: #466171; }
.connected-section .flow-list h3 { font-size: 16px; }
.connected-section .flow-list p { color: #d4e0e7; }
.questions { max-width: 1120px; padding: 12px 0 64px; gap: 80px; }
.questions h2 { font-size: 30px; }
.faq-list summary { font-size: 13px; }
.faq-list p { font-size: 12px; }
.final-cta { max-width: 1200px; padding: 48px 0 55px; }
.final-cta h2 { font-size: 36px; }
footer { background: var(--navy); padding-block: 30px; }
footer button { border-radius: 8px; }
.zoom-controls button { border-radius: 9px; }
dialog { border-radius: var(--radius-panel); }

@media(min-width:1600px) {
  .hero { min-height: 790px; }
  .phone-scene { height: 750px; }
  .phone-position { width: 312px; left: calc(50% - 156px); top: 12px; }
  .phone-backdrop { top: 315px; height: 265px; }
}
@media(min-width:761px) and (max-width:1250px) {
  .nav-wrap { padding-inline: 32px; }
  .brand img { width: 163px; }
  .desktop-nav { gap: 23px; }
  .hero { padding-inline: 40px; min-height: 690px; gap: 25px; }
  .hero h1 { font-size: 49px; letter-spacing: -2.5px; }
  .hero-summary { font-size: 14px; }
  .capability-list { gap: 11px 17px; }
  .capability-list li { font-size: 13px; }
  .phone-scene { height: 670px; }
  .phone-position { width: 274px; left: calc(50% - 137px); top: 15px; }
  .phone-backdrop { top: 275px; height: 230px; left: 0; right: 0; }
  .phone-island { height: 19px; }
  .phone-island:after { top: 6px; }
  .bridge { margin-inline: 40px; }
  .ai-intro { padding-inline: 40px; grid-template-columns: .85fr 1.8fr; gap: 30px; }
  .ai-intro-heading { display: block; }
  .ai-intro h2 { font-size: 32px; margin-bottom: 15px; }
  .ai-stories { gap: 22px; }
  .ai-stories article+article { padding-left: 22px; }
  .ai-stories h3 { font-size: 17px; }
  .ai-stories p { font-size: 12px; }
  .tour-grid { grid-template-columns: minmax(0,1.7fr) minmax(235px,1fr); gap: 35px; }
  .feature-copy h3 { font-size: 27px; }
  .connected-section { margin-inline: 40px; padding: 42px 34px; gap: 40px; }
  .connected-intro h2 { font-size: 33px; }
  .questions { padding-inline: 40px; gap: 50px; }
  .final-cta { margin-inline: 40px; }
}
@media(min-width:761px) and (max-width:950px) {
  .nav-wrap { gap: 15px; }
  .brand img { width: 150px; }
  .desktop-nav { gap: 15px; font-size: 11px; }
  .nav-actions { gap: 14px; }
  .cta-small { font-size: 11px; padding-inline: 13px; gap: 10px; }
  .hero { padding-inline: 30px; gap: 16px; }
  .hero h1 { font-size: 44px; }
  .capability-list li { font-size: 12px; }
  .capability-list { gap: 11px 14px; }
  .ai-intro { display: block; }
  .ai-intro-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-bottom: 28px; }
  .ai-intro-heading .eyebrow { grid-column: 1 / -1; }
  .ai-intro-heading h2 { margin: 0; }
  .ai-intro-heading>p:last-child { align-self: center; }
}
@media(max-width:760px) {
  html { scroll-padding-top: 24px; }
  .nav-wrap { height: 76px; padding-inline: 22px; gap: 13px; }
  .brand img { width: 142px; }
  .nav-actions { gap: 12px; }
  .cta-small { font-size: 10px; min-height: 38px; padding-inline: 13px; border-radius: 8px; }
  .menu-toggle { width: 24px; font-size: 19px; }
  .hero { display: block; min-height: 0; padding: 31px 24px 0; }
  .hero-copy { padding: 0; }
  .hero-copy>.eyebrow { font-size: 8px; margin-bottom: 18px; }
  h1 { font-size: 43px; line-height: 1.08; letter-spacing: -2px; margin-bottom: 19px; }
  .hero-summary { font-size: 14px; line-height: 1.7; margin-bottom: 21px; }
  .capability-list { gap: 12px 12px; }
  .capability-list li { font-size: 12px; line-height: 1.6; }
  .hero-copy>.capability-list { margin-bottom: 24px; }
  .cta-main { min-height: 53px; font-size: 13px; }
  .trial-note { font-size: 10px; margin-top: 12px; }
  .hero .tour-link { margin-top: 12px; font-size: 11px; }
  .hero .phone-scene { height: 656px; margin: 25px -24px 0; }
  .phone-position { width: 268px; left: calc(50% - 134px); top: 11px; }
  .phone { border-radius: 40px; border-width: 2px; padding: 0; }
  .phone-glass { inset: 4px 6px; border-radius: 33px; }
  .phone-island { height: 19px; top: 10px; }
  .phone-island:after { top: 6px; width: 6px; height: 6px; }
  .phone-side { height: 45px; }
  .phone-backdrop { left: 24px; right: 24px; top: 285px; height: 216px; border-radius: var(--radius-panel); }
  .phone-shadow { bottom: 64px; }
  .phone-controls { bottom: 24px; gap: 8px; }
  .phone-tabs { border-radius: 11px; }
  .phone-tabs button { font-size: 9px; min-height: 35px; padding-inline: 10px; }
  .phone-controls .motion-button { width: 36px; height: 36px; }
  .phone-demo-caption { font-size: 8px; }
  #more-capabilities:not(:empty) { margin-top: 18px; padding-top: 20px; gap: 13px 12px; }
  .bridge { margin: 20px 24px 0; padding: 14px 0 22px; font-size: 10px; }
  .ai-intro { display: block; padding: 36px 24px 14px; }
  .ai-intro h2 { font-size: 32px; letter-spacing: -1.3px; margin-bottom: 14px; }
  .ai-intro-heading>p:last-child { font-size: 12px; margin-bottom: 25px; }
  .ai-stories { display: block; }
  .ai-stories article { margin: 0; padding: 0 0 21px; }
  .ai-stories article+article { padding: 21px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .ai-stories h3 { font-size: 18px; margin-top: 10px; }
  .ai-stories p { font-size: 12px; line-height: 1.8; }
  .ai-stories .source-note { font-size: 10px; }
  .ai-stories button { font-size: 11px; }
  .tour-section { padding: 38px 0 30px; }
  h2 { font-size: 31px; letter-spacing: -1.2px; }
  .section-heading { padding-inline: 24px; margin-bottom: 23px; }
  .section-heading>p:last-child { font-size: 12px; }
  .tour-shell { padding-inline: 18px; }
  .chapter-nav { gap: 0; }
  .chapter-nav button { min-height: 59px; padding: 11px 7px; font-size: 10px; }
  .chapter-num { font-size: 8px; }
  .feature-nav { margin: 16px 0 25px; gap: 5px; }
  .feature-nav button { font-size: 10px; padding: 9px 15px; min-height: 38px; border-radius: 8px; }
  .tour-grid { display: flex; flex-direction: column; gap: 22px; }
  .feature-copy { min-height: 0; padding-inline: 12px; }
  .feature-copy h3 { font-size: 28px; }
  .feature-copy>p:not(.eyebrow) { font-size: 12px; line-height: 1.85; }
  .feature-steps { gap: 2px; }
  .tour-bottom { margin: 24px 28px 0; }
  .connected-section { margin: 20px 18px 42px; padding: 34px 26px; display: block; border-radius: var(--radius-panel); }
  .connected-intro h2 { font-size: 30px; }
  .connected-intro>p:last-child { font-size: 12px; margin-bottom: 27px; }
  .connected-section .flow-list h3 { font-size: 14px; }
  .connected-section .flow-list p { font-size: 11px; }
  .questions { display: block; padding: 0 26px 42px; }
  .questions h2 { font-size: 27px; }
  .faq-list summary { font-size: 12px; }
  .faq-list p { font-size: 11px; }
  .final-cta { margin: 0 24px; padding: 34px 0 42px; display: block; }
  .final-cta h2 { font-size: 30px; }
  footer { padding: 26px 24px; }
}
@media(max-width:370px) {
  .nav-wrap { padding-inline: 17px; gap: 9px; }
  .brand img { width: 124px; }
  .nav-actions { gap: 8px; }
  .cta-small { padding-inline: 10px; font-size: 9px; }
  .hero { padding-inline: 21px; }
  h1 { font-size: 39px; letter-spacing: -1.8px; }
  .hero .phone-scene { margin-inline: -21px; height: 621px; }
  .phone-position { width: 250px; left: calc(50% - 125px); }
  .phone { border-radius: 37px; }
  .phone-glass { border-radius: 30px; }
  .phone-island { height: 17px; }
  .phone-island:after { top: 5px; }
  .phone-backdrop { left: 21px; right: 21px; top: 265px; height: 205px; }
  .capability-list li { font-size: 11px; }
  .phone-tabs button { padding-inline: 9px; }
  .chapter-nav button { font-size: 9px; }
}