:root {
  color-scheme: light dark;
  --canvas: #f4f7f9;
  --surface: #ffffff;
  --surface-muted: #e8eef2;
  --ink: #101820;
  --muted: #53616e;
  --line: #c9d3db;
  --accent: #245aa8;
  --accent-dark: #184783;
  --on-accent: #ffffff;
  --nav: color-mix(in srgb, var(--canvas) 94%, transparent);
  --radius: 14px;
  --shadow: 0 22px 55px rgba(31, 54, 74, .13);
  --max: 1200px;
  --wide: 1380px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #11171d; --surface: #192129; --surface-muted: #222d36;
    --ink: #edf2f6; --muted: #aebbc5; --line: #35434e;
    --accent: #73a3e8; --accent-dark: #9abcf0; --on-accent: #0d1720;
    --nav: rgba(17, 23, 29, .94); --shadow: 0 22px 55px rgba(0, 0, 0, .27);
  }
}
:root[data-theme="dark"] {
  --canvas: #11171d; --surface: #192129; --surface-muted: #222d36;
  --ink: #edf2f6; --muted: #aebbc5; --line: #35434e;
  --accent: #73a3e8; --accent-dark: #9abcf0; --on-accent: #0d1720;
  --nav: rgba(17, 23, 29, .94); --shadow: 0 22px 55px rgba(0, 0, 0, .27);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Aptos, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; }
button, input, textarea { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.06; letter-spacing: -.045em; }

.wide-shell { width: min(var(--wide), calc(100% - 40px)); margin: 0 auto; }
.section-shell { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--ink); color: var(--canvas); padding: .7rem 1rem; border-radius: 0 0 var(--radius) var(--radius); }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.utility-bar { background: #101820; color: #dbe5ec; font-size: .76rem; }
.utility-bar .wide-shell { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.utility-bar div div { display: flex; gap: 1.4rem; }
.utility-bar a { color: #dbe5ec; text-decoration: none; }
.utility-bar a:hover { color: #ffffff; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: var(--nav); backdrop-filter: blur(16px); }
.nav-shell { width: min(var(--wide), calc(100% - 40px)); height: 74px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .68rem; color: var(--ink); font-size: 1.08rem; font-weight: 780; letter-spacing: -.02em; text-decoration: none; }
.brand > span:last-child > span { color: var(--accent); }
.brand-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; overflow: hidden; border-radius: 9px; background: var(--accent); box-shadow: 0 3px 10px rgba(36, 90, 168, .18); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.desktop-nav { display: flex; align-items: stretch; justify-content: center; height: 74px; gap: 1.6rem; }
.desktop-nav > a, .nav-group > a { display: inline-flex; align-items: center; color: var(--muted); font-size: .9rem; font-weight: 680; text-decoration: none; white-space: nowrap; }
.desktop-nav > a:hover, .nav-group > a:hover { color: var(--ink); }
.nav-group { position: relative; display: flex; align-items: stretch; }
.nav-group > a::after { content: "⌄"; margin-left: .38rem; font-size: .8rem; }
.nav-dropdown { position: absolute; top: 67px; left: -1.2rem; width: 295px; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease, visibility .14s; }
.nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: grid; padding: .75rem .85rem; border-radius: 9px; text-decoration: none; }
.nav-dropdown a:hover { background: var(--surface-muted); }
.nav-dropdown strong { font-size: .9rem; }
.nav-dropdown span { color: var(--muted); font-size: .76rem; }
.nav-actions { display: flex; align-items: center; gap: .8rem; }
.theme-toggle, .menu-toggle { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); padding: .48rem .78rem; font-size: .78rem; font-weight: 720; cursor: pointer; }
.menu-toggle { display: none; }
.mobile-menu { padding: 1rem 20px 1.4rem; border-top: 1px solid var(--line); }
.mobile-menu strong { display: block; margin: .8rem 0 .25rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.mobile-menu a { display: block; padding: .48rem 0; color: var(--ink); font-size: .92rem; font-weight: 650; text-decoration: none; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent); padding: .75rem 1.25rem; font-weight: 780; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.button:hover { background: var(--accent-dark); }
.button:active { transform: translateY(1px); }
.button-small { min-height: 40px; padding: .55rem 1rem; font-size: .84rem; }
.button-on-dark { border-color: rgba(255,255,255,.45); background: rgba(16,24,32,.46); color: #ffffff; backdrop-filter: blur(8px); }
.button-on-dark:hover { background: rgba(16,24,32,.72); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero { position: relative; min-height: min(690px, calc(100dvh - 110px)); overflow: hidden; background: #101820; color: #ffffff; }
.hero-media, .hero-scrim { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }
.hero-scrim { background: linear-gradient(90deg, rgba(10,17,24,.95) 0%, rgba(10,17,24,.8) 38%, rgba(10,17,24,.16) 72%, rgba(10,17,24,.05) 100%); }
.hero-content { position: relative; z-index: 1; min-height: inherit; display: flex; align-items: center; }
.hero-copy { max-width: 620px; padding: 4.5rem 0; }
.eyebrow, .section-label { margin-bottom: 1rem; color: #a8c8f3; font-size: .76rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { max-width: 12ch; margin-bottom: 1.15rem; color: #f5f8fc; font-size: clamp(3.7rem, 6.2vw, 6.6rem); font-weight: 780; }
.hero-copy > p:not(.eyebrow) { max-width: 44ch; margin-bottom: 1.8rem; color: #d8e2e9; font-size: 1.15rem; }

.promo-band { background: var(--accent); color: var(--on-accent); }
.promo-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.promo-inner div { display: grid; gap: .1rem; }
.promo-inner strong { font-size: 1.15rem; }
.promo-inner span { opacity: .86; }
.promo-inner a { font-weight: 780; white-space: nowrap; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 7rem); align-items: center; padding-top: 8rem; padding-bottom: 8rem; }
.section-label { color: var(--accent-dark); }
.about h2, .philosophy h2, .services h2, .process h2, .proof h2, .live-proof h2, .pricing-preview h2, .faq h2, .resources h2, .contact h2 { font-size: clamp(2.45rem, 4.4vw, 4.5rem); }
.about-copy > p:not(.section-label), .philosophy-heading > p:not(.section-label), .services-heading > p:not(.section-label), .process-copy > p:not(.section-label), .faq-heading > p:not(.section-label), .contact-layout > div > p:not(.section-label) { color: var(--muted); font-size: 1.06rem; }
.mission-list { margin: 2rem 0 0; }
.mission-list div { padding: 1rem 0; border-top: 1px solid var(--line); }
.mission-list dt { font-weight: 800; }
.mission-list dd { margin: .2rem 0 0; color: var(--muted); }
.about-image { min-height: 570px; margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-image img { width: 100%; height: 100%; object-fit: cover; }

.philosophy { padding: 8rem 0 0; background: var(--surface-muted); color: var(--ink); }
.philosophy .section-label { color: var(--accent-dark); }
.philosophy-heading { max-width: 820px; }
.philosophy-heading > p:not(.section-label) { color: var(--muted); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 4rem; }
.principles article { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.principles h3 { font-size: 1.45rem; }
.principles p { color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 5rem; border-top: 1px solid var(--line); }
.metrics div { padding: 2rem 1.2rem; border-right: 1px solid var(--line); }
.metrics div:last-child { border-right: 0; }
.metrics strong, .metrics span { display: block; }
.metrics strong { font-size: 1.45rem; }
.metrics span { color: var(--muted); font-size: .8rem; }

.services { padding-top: 8rem; padding-bottom: 8rem; }
.services-heading { max-width: 760px; margin-bottom: 4rem; }
.service-catalog { border-top: 1px solid var(--line); }
.service-feature { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 500px; margin: 1.4rem 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.service-image img { width: 100%; height: 100%; object-fit: cover; }
.service-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.service-copy span, .service-row span, .resource-grid span { color: var(--accent-dark); font-size: .76rem; font-weight: 800; }
.service-copy h3 { margin: .5rem 0 1rem; font-size: 3rem; }
.service-copy p { color: var(--muted); }
.service-copy a, .service-row > a { color: var(--accent-dark); font-weight: 780; }
.service-row { display: grid; grid-template-columns: .8fr 1.25fr auto; gap: 2rem; align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.service-row h3 { margin: .25rem 0 0; font-size: 1.55rem; }
.service-row p { margin: 0; color: var(--muted); }
.service-row > a { white-space: nowrap; }

.process { padding: 8rem 0; background: var(--surface-muted); }
.process-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.process-copy .button { margin-top: 1rem; }
.process-photo { height: 260px; margin: 2.2rem 0 0; overflow: hidden; border-radius: var(--radius); }
.process-photo img { width: 100%; height: 100%; object-fit: cover; }
.process-steps { margin: 0; padding: 0; list-style: none; }
.process-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 1.2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.process-steps li:first-child { padding-top: 0; }
.process-steps li > span { color: var(--accent-dark); font-size: .8rem; font-weight: 850; }
.process-steps h3 { margin-bottom: .45rem; font-size: 1.55rem; }
.process-steps p { margin: 0; color: var(--muted); }

.proof { padding-top: 8rem; padding-bottom: 8rem; }
.proof-heading, .pricing-heading { max-width: 780px; margin-bottom: 3.5rem; }
.proof-heading > p, .pricing-heading > p { color: var(--muted); font-size: 1.06rem; }
.workflow-proof { display: grid; grid-template-columns: 1fr 1.1fr 1fr; margin: 0 0 2rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; list-style: none; }
.workflow-proof li { min-height: 250px; display: flex; flex-direction: column; padding: 2rem; border-right: 1px solid var(--line); background: var(--surface); }
.workflow-proof li:nth-child(2) { background: var(--surface-muted); }
.workflow-proof li:last-child { border-right: 0; }
.workflow-proof span { color: var(--accent-dark); font-size: .76rem; font-weight: 800; }
.workflow-proof strong { margin-top: auto; font-size: 1.35rem; letter-spacing: -.03em; }
.workflow-proof p { margin: .7rem 0 0; color: var(--muted); }
.text-link { color: var(--accent-dark); font-weight: 780; }

.live-proof { padding: 8rem 0; background: var(--surface); }
.live-proof-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.live-proof-copy > p:not(.section-label) { max-width: 58ch; color: var(--muted); font-size: 1.06rem; }
.proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.proof-pair article { min-height: 245px; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.proof-pair article:last-child { background: var(--surface-muted); }
.proof-pair span, .inline-proof > div > span { color: var(--accent-dark); font-size: .76rem; font-weight: 820; }
.proof-pair h3 { margin: auto 0 .7rem; font-size: 1.4rem; }
.proof-pair p { margin: 0; color: var(--muted); }
.live-proof-copy small, .inline-proof small { display: block; max-width: 70ch; margin-top: 1.3rem; color: var(--muted); font-size: .76rem; }
.live-proof-media video, .product-demo video { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: var(--radius); background: #081322; box-shadow: var(--shadow); }
.live-proof-media p { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; }

.pricing-preview { padding: 8rem 0; background: var(--surface-muted); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
.pricing-grid article { position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pricing-grid article.featured-plan { border-color: var(--accent); box-shadow: var(--shadow); }
.pricing-grid h3 { margin-bottom: 1.5rem; font-size: 1.3rem; }
.pricing-grid article > p:not(.price) { color: var(--muted); }
.pricing-grid article > a { margin-top: auto; color: var(--accent-dark); font-weight: 780; }
.pricing-grid article > a.button { color: var(--on-accent); }
.price { display: flex; align-items: baseline; gap: .25rem; margin-bottom: 1rem; }
.price strong { font-size: 2.4rem; letter-spacing: -.055em; }
.price span { color: var(--muted); font-size: .85rem; }
.plan-note { display: inline-flex; align-self: flex-start; margin-bottom: 1.2rem; border-radius: 999px; background: var(--surface-muted); color: var(--accent-dark); padding: .3rem .65rem; font-size: .72rem; font-weight: 800; }
.pricing-actions { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1.6rem; }
.pricing-actions p { margin: 0; color: var(--muted); }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 7rem); padding-top: 8rem; padding-bottom: 8rem; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { position: relative; padding: 1.4rem 2rem 1.4rem 0; cursor: pointer; font-size: 1.08rem; font-weight: 780; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: .2rem; font-size: 1.4rem; font-weight: 400; }
.accordion details[open] summary::after { content: "−"; }
.accordion details p { max-width: 62ch; margin-bottom: 1.4rem; color: var(--muted); }

.resources { padding: 8rem 0; background: var(--surface); }
.resources-heading { max-width: 760px; margin-bottom: 3.5rem; }
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.resource-grid a { min-height: 270px; display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.resource-grid a:first-child { background: var(--surface-muted); }
.resource-grid a:hover { transform: translateY(-2px); border-color: var(--accent); }
.resource-grid strong { margin-top: auto; font-size: 1.45rem; letter-spacing: -.03em; }
.resource-grid p { margin: .6rem 0 0; color: var(--muted); }

.contact { padding: 8rem 0; background: var(--canvas); color: var(--ink); }
.contact .section-label { color: var(--accent-dark); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 7rem); }
.contact-layout > div > p:not(.section-label) { color: var(--muted); }
.contact-form, .contact-panel { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.contact-panel h3 { font-size: 1.6rem; }
.contact-panel p { color: var(--muted); }
.contact-panel .button-row { align-items: center; margin-top: 1.7rem; }
.contact-form label { display: grid; gap: .48rem; color: var(--ink); font-size: .86rem; font-weight: 730; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form > label { margin-top: 1rem; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); color: var(--ink); padding: .8rem .9rem; }
textarea { resize: vertical; }
.form-status { min-height: 1.5rem; margin: .8rem 0; color: var(--muted); font-size: .86rem; }
.form-status.error { color: #ffb4ac; }
.form-status.success { color: #a8e6c3; }

footer { padding: 5rem 0 1.5rem; background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2.5rem; }
.footer-grid > div { display: grid; align-content: start; gap: .55rem; }
.footer-about p { max-width: 34ch; margin: 1rem 0 .2rem; color: var(--muted); }
.footer-about > span { color: var(--muted); font-size: .82rem; }
.footer-grid strong { margin-bottom: .4rem; }
.footer-grid a:not(.brand) { color: var(--muted); font-size: .9rem; text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }

.page-hero { position: relative; min-height: min(610px, calc(100dvh - 110px)); overflow: hidden; background: #101820; color: #fff; }
.page-hero-media, .page-hero-scrim { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero-scrim { background: linear-gradient(90deg, rgba(10,17,24,.96), rgba(10,17,24,.77) 48%, rgba(10,17,24,.18)); }
.page-hero-content { position: relative; z-index: 1; min-height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 4rem; padding-bottom: 4rem; }
.page-hero h1 { max-width: 12ch; margin-bottom: 1.2rem; font-size: clamp(3.2rem, 5.7vw, 5.8rem); }
.page-hero-content > p:not(.eyebrow) { max-width: 52ch; margin-bottom: 1.8rem; color: #d8e2e9; font-size: 1.12rem; }
.breadcrumbs { display: flex; gap: .7rem; align-items: center; padding-top: 1.2rem; color: var(--muted); font-size: .78rem; }
.breadcrumbs a { color: var(--accent-dark); }
.breadcrumbs span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-list { padding-top: 6rem; padding-bottom: 6rem; }
.detail-block { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 8vw, 7rem); align-items: start; padding: 4rem 0; border-bottom: 1px solid var(--line); }
.detail-block:first-child { padding-top: 0; }
.detail-block-offset { grid-template-columns: .9fr 1.1fr; }
.detail-block-offset > div { order: 2; }
.detail-block h2 { max-width: 13ch; margin-bottom: 1rem; font-size: clamp(2rem, 3.5vw, 3.5rem); }
.detail-block > div > p { max-width: 58ch; color: var(--muted); }
.detail-block ul { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.detail-block li { min-height: 90px; display: flex; align-items: flex-end; padding: 1rem; border-radius: 10px; background: var(--surface-muted); font-weight: 730; }
.offer-strip { padding: 5.5rem 0; background: var(--surface-muted); }
.offer-layout { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.offer-layout > div > span { color: var(--accent-dark); font-size: .86rem; font-weight: 820; }
.offer-layout h2 { margin: .5rem 0 .8rem; font-size: clamp(2.2rem, 4vw, 4rem); }
.offer-layout p { max-width: 60ch; margin: 0; color: var(--muted); }
.product-demo { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; padding-top: 2rem; padding-bottom: 7rem; }
.product-demo h2, .inline-proof h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.product-demo p, .inline-proof p { color: var(--muted); }
.inline-proof { padding: 5.5rem 0; background: var(--surface); }
.inline-proof > div { max-width: 900px; }
.inline-proof .text-link { display: inline-block; margin-top: 1rem; }

@media (max-width: 1080px) {
  .desktop-nav { gap: 1rem; }
  .desktop-nav > a, .nav-group > a { font-size: .82rem; }
  .hero h1 { font-size: clamp(3.7rem, 7vw, 5.5rem); }
  .service-row { grid-template-columns: .8fr 1.1fr auto; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .utility-bar { display: none; }
  .desktop-nav, .theme-toggle { display: none; }
  .nav-shell { grid-template-columns: auto 1fr; }
  .nav-actions { justify-content: end; }
  .menu-toggle { display: inline-flex; }
  .about, .process-layout, .faq, .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .about-image { min-height: 440px; }
  .service-feature { grid-template-columns: 1fr; }
  .service-image { height: 390px; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
  .live-proof-layout, .product-demo { grid-template-columns: 1fr; }
  .workflow-proof { grid-template-columns: 1fr; }
  .workflow-proof li { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workflow-proof li:last-child { border-bottom: 0; }
  .detail-block, .detail-block-offset { grid-template-columns: 1fr; gap: 2rem; }
  .detail-block-offset > div { order: initial; }
}

@media (max-width: 767px) {
  .wide-shell, .section-shell { width: min(100% - 40px, var(--max)); }
  .nav-shell { width: min(100% - 28px, var(--wide)); height: 64px; }
  .nav-actions .button { display: none; }
  .hero { min-height: 680px; }
  .hero-media img { object-position: 70% center; }
  .hero-scrim { background: linear-gradient(180deg, rgba(10,17,24,.58), rgba(10,17,24,.92) 72%); }
  .hero-content { align-items: flex-end; }
  .hero-copy { padding: 3rem 0; }
  .hero h1 { max-width: 9ch; font-size: clamp(3.2rem, 15vw, 4.5rem); }
  .hero-copy > p:not(.eyebrow) { font-size: 1rem; }
  .promo-inner { padding: 1.2rem 0; align-items: flex-start; }
  .promo-inner span { display: none; }
  .about, .services, .proof, .live-proof, .faq { padding-top: 5rem; padding-bottom: 5rem; }
  .about-image { min-height: 360px; }
  .philosophy, .process, .pricing-preview, .resources, .contact { padding: 5rem 0; }
  .principles { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; }
  .metrics { grid-template-columns: 1fr 1fr; margin-top: 3rem; }
  .metrics div:nth-child(2) { border-right: 0; }
  .metrics div { border-bottom: 1px solid var(--line); }
  .service-feature { min-height: 0; }
  .service-image { height: 300px; }
  .service-copy { padding: 2rem; }
  .service-row { grid-template-columns: 1fr; gap: .7rem; padding: 1.7rem 0; }
  .process-steps li { grid-template-columns: 44px 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-grid a { min-height: 220px; }
  .field-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid article { min-height: 270px; }
  .pricing-actions, .offer-layout { display: grid; grid-template-columns: 1fr; }
  .offer-layout .button { justify-self: start; max-width: 100%; }
  .page-hero { min-height: 620px; }
  .page-hero-scrim { background: linear-gradient(180deg, rgba(10,17,24,.5), rgba(10,17,24,.93) 68%); }
  .page-hero-content { justify-content: flex-end; }
  .page-hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .detail-list { padding-top: 4rem; padding-bottom: 4rem; }
  .detail-block { padding: 3rem 0; }
  .detail-block ul { grid-template-columns: 1fr; }
  .detail-block li { min-height: 72px; }
  .proof-pair { grid-template-columns: 1fr; }
  .proof-pair article { min-height: 210px; }
  .product-demo { padding-top: 1rem; padding-bottom: 5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .footer-bottom { display: grid; }
}

@media (max-width: 430px) {
  .button-row { display: grid; }
  .promo-inner { display: grid; gap: .5rem; }
  .metrics strong { font-size: 1.15rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-about { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--canvas); backdrop-filter: none; }
  .button-on-dark { background: #101820; backdrop-filter: none; }
}

/* Shared marketing bridge
   Older SEO, editorial, contact, trial, setup, SMS, and legal routes use
   their own class names. Keep their HTML, forms, metadata, and scripts intact
   while giving them the same blue/cool-neutral tokens as the core site. */
body.landing-page, body.setup-page, body.blog-page,
body.trial-page,
body.sms-page,
body.blog-index-page,
body.blog-post-page,
body.legal-page,
body.contact-page {
  min-height: 100dvh;
  margin: 0;
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: Aptos, "Segoe UI", system-ui, sans-serif !important;
  line-height: 1.6;
}

/* Legacy pages that explicitly requested the retired dark theme still use the
   shared cool-neutral light tokens. Dark hero/media blocks remain intentional
   contrast surfaces, while forms, copy, and legal content stay readable. */
body.landing-page,
body.setup-page,
body.sms-page,
body.blog-index-page,
body.blog-post-page,
body.trial-page,
body.contact-page,
body.legal-page {
  --canvas: #f4f7f9;
  --surface: #ffffff;
  --surface-muted: #e8eef2;
  --ink: #101820;
  --muted: #53616e;
  --line: #c9d3db;
  --accent: #245aa8;
  --accent-dark: #184783;
  --on-accent: #ffffff;
  --nav: color-mix(in srgb, #f4f7f9 94%, transparent);
  --shadow: 0 22px 55px rgba(31, 54, 74, .13);
}

body.landing-page a,
body.setup-page a,
body.blog-page a,
body.trial-page a,
body.sms-page a,
body.blog-index-page a,
body.blog-post-page a,
body.legal-page a,
body.contact-page a { color: var(--accent-dark); }

body.landing-page .nav-bar,
body.setup-page .nav-bar,
body.blog-page .nav-bar,
body.trial-page .topbar,
body.blog-index-page .nav-bar,
body.blog-post-page .nav-bar,
body.contact-page .nav {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--ink);
  backdrop-filter: blur(16px);
}

body.landing-page .nav-bar,
body.setup-page .nav-bar,
body.blog-page .nav-bar,
body.trial-page .topbar,
body.blog-index-page .nav-bar,
body.blog-post-page .nav-bar { padding: 14px max(20px, calc((100% - var(--wide)) / 2)); }

body.landing-page .nav-bar a.logo,
body.setup-page .nav-bar a.logo,
body.blog-page .nav-bar a.logo,
body.trial-page .topbar .container,
body.blog-index-page .nav-bar .logo,
body.blog-post-page .nav-bar .logo,
body.contact-page .brand { color: var(--ink); }

body.landing-page .logo-mark,
body.setup-page .logo-mark,
body.blog-page .logo-mark,
body.trial-page .logo-mark,
body.blog-index-page .logo-mark,
body.blog-post-page .logo-mark,
body.contact-page .mark { background: var(--accent); border-radius: 9px; box-shadow: 0 3px 10px rgba(36, 90, 168, .18); }

body.landing-page .nav-bar .cta,
body.setup-page .nav-bar .cta,
body.blog-page .nav-bar .cta,
body.blog-index-page .nav-bar .cta,
body.blog-post-page .nav-bar .cta,
body.contact-page .nav-cta {
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent) !important;
  padding: .65rem 1rem;
  font-weight: 780;
}

body.landing-page { color-scheme: light; }
body.landing-page .hero-lp {
  min-height: min(520px, calc(100dvh - 68px));
  display: grid;
  align-content: center;
  padding: clamp(4rem, 9vw, 7rem) 24px;
  background: linear-gradient(120deg, #102b50 0%, #183f76 58%, #245aa8 100%);
  color: #f5f8fc;
  text-align: left;
}
body.landing-page .hero-lp h1 { max-width: 760px; margin: 0 auto 1rem; color: #f5f8fc; font-size: clamp(2.5rem, 6vw, 5.25rem); }
body.landing-page .hero-lp h1 span { color: #cfe0f8; }
body.landing-page .hero-lp .sub { max-width: 760px; margin: 0 auto; color: #e2ebf5; }
body.landing-page article { max-width: var(--max); margin: 0 auto; padding: 5rem 20px 4rem; }
body.landing-page article .container { max-width: 760px; margin: 0 auto; padding: 0; }
body.landing-page article h2 { margin: 3rem 0 .8rem; color: var(--accent-dark); font-size: clamp(1.65rem, 3vw, 2.5rem); }
body.landing-page article p,
body.landing-page article li { color: var(--muted); }
body.landing-page article strong { color: var(--ink); }
body.landing-page .guarantee-box { border: 1px solid #8ab7e8; border-radius: var(--radius); background: #e7f0fb; }
body.landing-page .guarantee-box p { color: var(--ink); }
body.landing-page .cta-section { padding: 5rem 20px; background: var(--surface-muted); color: var(--ink); }
body.landing-page .cta-section h2 { color: var(--ink); }
body.landing-page .cta-section p { color: var(--muted); }
body.landing-page .btn-primary,
body.landing-page .btn-setup { border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent); }
body.landing-page .btn-secondary { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent-dark); }
body.landing-page .footer-lp { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); }
body.landing-page .brand-pog { color: var(--accent); }

body.setup-page { color-scheme: light; }
body.setup-page .main { max-width: 760px; padding: 5rem 20px 6rem; }
body.setup-page .main h1 { color: var(--ink); }
body.setup-page .main h1 span { color: var(--accent-dark); }
body.setup-page .sub,
body.setup-page .check-item,
body.setup-page .note { color: var(--muted); }
body.setup-page .price-block { border: 1px solid #8ab7e8; border-radius: var(--radius); background: #e7f0fb; }
body.setup-page .price-block .amount { color: var(--accent-dark); }
body.setup-page .check-icon { color: var(--accent-dark); }
body.setup-page .strong-on { color: var(--ink); }
body.setup-page .guarantee { border: 1px solid #8ab7e8; border-radius: var(--radius); background: #e7f0fb; }
body.setup-page .guarantee p { color: var(--ink); }
body.setup-page .form-section h2 { color: var(--accent-dark); }
body.setup-page .setup-form input,
body.setup-page .setup-form select { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
body.setup-page .setup-form input:focus,
body.setup-page .setup-form select:focus { border-color: var(--accent); }
body.setup-page .success-msg { border: 1px solid #8ab7e8; background: #e7f0fb; color: var(--accent-dark); }
body.setup-page .error-msg { color: #a33a3a; }

body.sms-page { color-scheme: light; flex-direction: column; }
body.sms-page .conversion-header { width: min(680px, calc(100% - 40px)); margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.sms-page .conversion-header .brand { color: var(--ink); }
body.sms-page .conversion-header .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
body.sms-page .conversion-header .brand > span:last-child > span { color: var(--accent); }
body.sms-page .conversion-header .button { color: var(--on-accent); }
body.sms-page .card { max-width: 680px; margin: 0 auto; border-color: var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
body.sms-page .logo-text { color: var(--ink); }
body.sms-page .logo-text .pog { color: var(--accent); }
body.sms-page h1 { color: var(--ink); }
body.sms-page .card > p { color: var(--muted); }
body.sms-page .consent-box { border-color: #8ab7e8; background: #e7f0fb; color: var(--ink); }
body.sms-page .consent-box strong { color: var(--ink); }
body.sms-page .form-input { border-color: var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
body.sms-page .form-input:focus { border-color: var(--accent); }
body.sms-page .form-input::placeholder,
body.sms-page .checkbox-label { color: var(--muted); }
body.sms-page .btn-submit { border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent); }
body.sms-page .success { border-color: #8ab7e8; background: #e7f0fb; color: var(--accent-dark); }
body.sms-page .fine { color: var(--muted); }

body.legal-page { color-scheme: light; }
body.legal-page .legal-header { width: min(860px, calc(100% - 40px)); margin: 0 auto 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.legal-page .legal-header .brand { color: var(--ink); }
body.legal-page .legal-header .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
body.legal-page .legal-header .brand > span:last-child > span { color: var(--accent); }
body.legal-page .legal-header .button { color: var(--on-accent); }
@media (max-width: 520px) { body.legal-page .legal-header { align-items: flex-start; } body.legal-page .legal-header .button { font-size: .72rem; padding: .5rem .7rem; } }
@media (max-width: 600px) { body.legal-page table { display: block; max-width: 100%; overflow-x: auto; } }
body.legal-page > main#main > .back,
body.legal-page > main#main > h1,
body.legal-page > main#main > .updated,
body.legal-page > main#main > p,
body.legal-page > main#main > ul,
body.legal-page > main#main > table,
body.legal-page > main#main > h2,
body.legal-page > main#main > .contact,
body.legal-page > main#main > .footer-legal { width: min(860px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
body.legal-page > .cookie-preferences-link { width: min(860px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
body.legal-page { padding: 3rem 0 2rem !important; }
body.legal-page > main#main > .back { display: inline-flex; margin-bottom: 2rem; color: var(--muted); }
body.legal-page > main#main > h1 { padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--accent-dark); font-size: clamp(2rem, 4vw, 3.4rem); }
body.legal-page > main#main > h2 { margin-top: 2.5rem; color: var(--accent-dark); font-size: clamp(1.25rem, 2vw, 1.65rem); }
body.legal-page > main#main > p,
body.legal-page > main#main > ul,
body.legal-page > main#main > table { color: var(--muted); }
body.legal-page > main#main > strong,
body.legal-page > main#main > p strong,
body.legal-page > main#main > li strong { color: var(--ink); }
body.legal-page strong { color: var(--ink); }
body.legal-page > main#main > .contact { border: 1px solid #8ab7e8; border-radius: var(--radius); background: #e7f0fb; }
body.legal-page .footer-legal { border-top-color: var(--line); }
body.legal-page .footer-legal a { color: var(--accent-dark); }
body.legal-page table th,
body.legal-page table td { border-bottom-color: var(--line); color: var(--muted); }
body.legal-page table th { color: var(--ink); }

body.contact-page .container { width: min(var(--wide), calc(100% - 40px)); max-width: var(--wide); margin: 0 auto; }
body.contact-page h1,
body.contact-page h2,
body.contact-page h3 { font-family: Aptos, "Segoe UI", system-ui, sans-serif; }
body.contact-page .hero { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--surface); border-bottom-color: var(--line); }
body.contact-page .hero h1 { color: var(--ink); }
body.contact-page .eyebrow { color: var(--accent-dark); }
body.contact-page .lead,
body.contact-page .info-card p { color: var(--muted); }
body.contact-page .contact-card,
body.contact-page .info-card { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow); }
body.contact-page .contact-form input,
body.contact-page .contact-form select { border-color: var(--line); background: var(--surface-muted); color: var(--ink); }
body.contact-page .contact-submit { border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--on-accent); }
body.contact-page .sms-consent { border-color: var(--line); background: var(--surface-muted); color: var(--muted); }
body.contact-page .info { background: var(--surface-muted); border-top-color: var(--line); }
body.contact-page .footer { background: #102b50; color: #dce9f7; }
body.contact-page .footer a { color: #dce9f7; }

body.blog-index-page .hero-blog,
body.blog-post-page .hero-post { background: linear-gradient(120deg, #102b50, #183f76); color: #f5f8fc; }
body.blog-index-page .hero-blog h1,
body.blog-post-page .hero-post h1 { color: #f5f8fc; }
body.blog-index-page .hero-blog .sub,
body.blog-post-page .hero-post .lede { color: #e2ebf5; }
body.blog-index-page .post-card,
body.blog-post-page article { border-color: var(--line); background: var(--surface); }
body.blog-index-page .post-card h2 a,
body.blog-post-page article h2,
body.blog-index-page .cat,
body.blog-post-page article em { color: var(--accent-dark); }
body.blog-index-page .post-card .excerpt,
body.blog-post-page article p { color: var(--muted); }
body.blog-index-page .btn-primary,
body.blog-post-page .btn-primary { border-radius: 999px; background: var(--accent); color: var(--on-accent); }
body.blog-index-page .footer-blog,
body.blog-post-page .footer-blog { border-top-color: var(--line); background: var(--surface); color: var(--muted); }

body.trial-page { color-scheme: light; }
body.trial-page .topbar { background: var(--surface); }
body.trial-page .hero { background: var(--surface); }
body.trial-page .hero h1 { color: var(--ink); }
body.trial-page .hero p,
body.trial-page .cta-fineprint,
body.trial-page .pillar p { color: var(--muted); }
body.trial-page .hero-tag,
body.trial-page .pillar { border-color: var(--line); background: var(--surface-muted); color: var(--accent-dark); }
body.trial-page .video-card { border-color: var(--line); background: #102b50; box-shadow: var(--shadow); }
body.trial-page .btn-primary { border-radius: 999px; background: var(--accent); color: var(--on-accent); box-shadow: none; }
body.trial-page .pillars,
body.trial-page footer { border-top-color: var(--line); }

@media (max-width: 767px) {
  body.landing-page .nav-bar,
  body.setup-page .nav-bar,
  body.blog-page .nav-bar,
  body.trial-page .topbar,
  body.blog-index-page .nav-bar,
  body.blog-post-page .nav-bar { padding-left: 16px; padding-right: 16px; }
  body.landing-page .hero-lp { min-height: 540px; padding-left: 20px; padding-right: 20px; }
  body.landing-page .hero-lp h1 { font-size: clamp(2.4rem, 13vw, 4rem); }
  body.setup-page .main { padding-top: 4rem; }
  body.contact-page .container { width: min(100% - 28px, var(--max)); }
}