/* Shared AppNova controls and layout primitives. Single S18 token source. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--pm-space-5); }
body { margin: 0; background: var(--pm-canvas); color: var(--pm-body); font: var(--pm-weight-body) var(--pm-font-body)/var(--pm-leading-body) var(--pm-font-sans); }
a { color: var(--pm-accent); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--pm-accent-hover); }
a:active { color: var(--pm-accent-pressed); }
button { font: inherit; }
a, button, summary { overflow-wrap: anywhere; }
button:disabled { cursor: not-allowed; opacity: 1; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: var(--pm-focus-width) solid var(--pm-focus); outline-offset: var(--pm-focus-offset); box-shadow: 0 0 0 var(--pm-focus-offset) var(--pm-focus-gap); }
main:focus { outline: none; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { color: var(--pm-ink); font-weight: var(--pm-weight-heading); letter-spacing: var(--pm-tracking-heading); overflow-wrap: anywhere; }
h1, h2 { font-family: var(--pm-font-editorial); font-weight: var(--pm-weight-editorial); letter-spacing: var(--pm-tracking-editorial); line-height: var(--pm-leading-editorial); text-wrap: balance; }
h1 { font-size: var(--pm-font-h1); }
h2 { font-size: var(--pm-font-h2); }
h3 { font-size: var(--pm-font-h3); line-height: 1.3; }
strong { color: var(--pm-ink); font-weight: var(--pm-weight-label); }
p, li, dd, dt { overflow-wrap: anywhere; }
.no-wrap { white-space: nowrap; }
.container { width:100%; max-width:82rem; margin-inline:auto; padding-inline:3rem; }
.skip-link { position: absolute; top: 0; left: var(--pm-gutter); z-index: 20; transform: translateY(-150%); padding: var(--pm-space-3) var(--pm-space-5); border-radius: var(--pm-radius-control); background: var(--pm-accent); color: var(--pm-on-accent); }
.skip-link:focus { top: var(--pm-space-3); transform: none; color: var(--pm-on-accent); }
.skip-link:hover { background: var(--pm-accent-hover); color: var(--pm-on-accent); }
.preview-notice { background: var(--pm-notice-bg); color: var(--pm-notice-text); border-bottom: 1px solid var(--pm-line); font-size: var(--pm-font-small); line-height: 1.5; }
.preview-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pm-space-2) var(--pm-space-6); padding-block: 0; }
.preview-inner > p { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pm-space-1) var(--pm-space-3); }
.preview-inner strong { color: inherit; }
.preview-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.preview-inner details { max-width: 100%; }
.preview-inner summary { cursor: pointer; min-height: var(--pm-icon-target); align-content: center; text-decoration: underline; text-underline-offset: .2em; padding-block: var(--pm-space-2); }
.preview-inner summary:hover { color: var(--pm-ink); }
.preview-inner details[open] { flex-basis: 100%; }
.preview-inner details p { max-width: var(--pm-copy-measure); padding-block: var(--pm-space-2) var(--pm-space-4); }
.site-header { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem; min-height:96px; padding-block:14px; border-bottom:1px solid var(--pm-line); background:var(--an-header); }
.brand { display: inline-flex; align-items: center; gap: var(--pm-space-3); color: var(--pm-ink); font-weight: var(--pm-weight-label); line-height: 1.3; text-decoration: none; min-height: var(--pm-control-min-height); }
.brand > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.brand small { display: block; margin-top: var(--pm-space-1); color: var(--pm-muted); font-size: var(--pm-font-small); font-weight: var(--pm-weight-body); letter-spacing: .06em; }
.brand-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 44px; height: 44px; padding: 11px; flex-shrink: 0; background: var(--pm-accent); border-radius: var(--pm-radius-control); }
.brand-mark i { background: var(--pm-surface); border-radius: 1px; }
.brand-mark i:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.main-nav { display: flex; gap: var(--pm-space-6); }
.main-nav a { display: inline-flex; align-items: center; min-height: var(--pm-control-min-height); padding-block: var(--pm-space-2); color: var(--pm-body); text-decoration: none; font-size: 1rem; }
.main-nav a[aria-current] { color: var(--pm-accent); font-weight: var(--pm-weight-label); box-shadow: inset 0 -2px var(--pm-accent); }
.main-nav a:hover { color: var(--pm-accent-hover); text-decoration: underline; }
.main-nav a:active { color: var(--pm-accent-pressed); }
.header-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--pm-space-5); min-height: var(--pm-control-min-height); padding: var(--pm-space-2) var(--pm-space-4); border: 1px solid var(--pm-control-border); border-radius: var(--pm-radius-control); font-size: 1rem; font-weight: var(--pm-weight-label); text-decoration: none; }
.header-link:hover { background: var(--pm-accent-soft); }
.header-link:active { background: var(--pm-surface-subtle); }
.eyebrow { color: var(--pm-accent); font-size: var(--pm-font-small); font-weight: var(--pm-weight-label); letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; margin-bottom: var(--pm-space-5); }
.eyebrow > span { margin-right: var(--pm-space-2); }
.hero { position: relative; isolation: isolate; background: var(--pm-canvas); }
.hero-inner { padding-block: 3.3rem 2.4rem; min-height: 45.7rem; }
.hero-copy { width: min(39.75rem, 53%); position: relative; }
.hero h1 { max-width: 12em; }
@media (min-width: 901px) {
    .hero-copy { isolation: isolate; }
    .hero-copy::before { content: ''; position: absolute; inset: -3.3rem -3rem -2.4rem -1rem; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--pm-canvas) calc(100% - 2rem), transparent); }
}
.hero-offer { margin-top: var(--pm-space-5); color: var(--pm-accent); font-size: 1.24rem; font-weight: var(--pm-weight-label); line-height: 1.5; max-width: 100%; }
.hero-lead { margin-top: 1.4rem; font-size: 1.09rem; max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pm-space-4); margin-top: var(--pm-space-6); }
.hero-actions > * { flex: 1 1 17rem; min-width: 0; }
.hero-actions .button { justify-content: center; padding-inline: 1rem; }
.hero-actions .planned-cta button { width: 100%; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--pm-control-min-height); max-width: 100%; border: 1px solid var(--pm-accent); border-radius: var(--pm-radius-control); padding: var(--pm-space-3) var(--pm-space-5); background: var(--pm-accent); color: var(--pm-on-accent); font-size: 1rem; font-weight: var(--pm-weight-label); line-height: 1.5; text-decoration: none; transition: background var(--pm-motion-fast) var(--pm-motion-ease); }
.button:hover { background: var(--pm-accent-hover); border-color: var(--pm-accent-hover); color: var(--pm-on-accent); }
.button:active { background: var(--pm-accent-pressed); border-color: var(--pm-accent-pressed); color: var(--pm-on-accent); }
/* Shared secondary button, also used by F1 service CTAs. */
.button.m3-secondary{background:transparent;color:var(--pm-ink);border:1px solid var(--pm-control-border)}
.button.m3-secondary:hover{background:var(--pm-surface);color:var(--pm-ink)}
.button > span, .text-link > span { flex-shrink: 0; }
.text-link { display: inline-flex; align-items: center; gap: var(--pm-space-4); min-height: var(--pm-control-min-height); font-size: 1rem; font-weight: var(--pm-weight-label); }
.fine-print { font-size: var(--pm-font-small); line-height: 1.65; color: var(--pm-muted); max-width: var(--pm-copy-measure); margin-top: var(--pm-space-5); }
.planned-cta { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; gap: var(--pm-space-2); }
.planned-cta button { text-align: left; border: 1px solid var(--pm-control-border); border-radius: var(--pm-radius-control); padding: var(--pm-space-3) var(--pm-space-4); min-height: var(--pm-control-min-height); max-width: 100%; color: var(--pm-disabled-text); background: var(--pm-disabled-bg); font-size: 1rem; font-weight: var(--pm-weight-label); line-height: 1.5; overflow-wrap: anywhere; }
.planned-note { font-size: var(--pm-font-small); line-height: 1.5; color: var(--pm-muted); max-width: 38ch; }
/* Static, explicitly illustrative UI. No app controls, claims or references. */
.concept-art { display: flex; flex-direction: column; align-items: center; gap: var(--pm-space-5); position: relative; padding: var(--pm-space-6) var(--pm-space-3); }
.concept-art::before { content: ''; position: absolute; inset: 12% 0 9%; z-index: -1; border-radius: 48% 48% 40% 40%; background: var(--pm-surface-subtle); }
.concept-top { max-width: 100%; overflow-wrap: anywhere; display: flex; justify-content: space-between; gap: var(--pm-space-6); font-size: var(--pm-font-small); color: var(--pm-muted); letter-spacing: .05em; }
.concept-label { max-width: 100%; overflow-wrap: anywhere; font-size: var(--pm-font-small); color: var(--pm-body); background: var(--pm-surface); border: 1px solid var(--pm-line); border-radius: var(--pm-radius-control); padding: var(--pm-space-2) var(--pm-space-4); }
.label-one { align-self: flex-start; }
.label-two { align-self: flex-end; }
.phone-demo { position: relative; width: 252px; max-width: 100%; padding: 24px 16px 18px; border: 6px solid var(--pm-ink); border-radius: 32px; background: var(--pm-surface); color: var(--pm-ink); transform: rotate(-5deg); box-shadow: var(--pm-shadow-device); }
.phone-camera { position: absolute; top: 8px; left: calc(50% - 18px); height: 4px; width: 36px; border-radius: 4px; background: var(--pm-ink); }
.phone-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; }
.demo-avatar { display: grid; place-items: center; width: 28px; height: 28px; background: var(--pm-surface-subtle); border-radius: 50%; }
.phone-title { color: var(--pm-ink); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; margin-block: 22px; }
.demo-task { display: flex; align-items: center; gap: 9px; padding: 12px 8px; border: 1px solid var(--pm-line); border-radius: 8px; margin-block: 9px; font-size: 12px; font-weight: 600; }
.demo-task small { display: block; margin-top: 3px; color: var(--pm-muted); font-size: 10px; font-weight: 400; }
.demo-icon { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; background: var(--pm-accent-soft); color: var(--pm-accent); border-radius: 6px; font-size: 16px; }
.phone-bottom { display: flex; justify-content: space-around; margin-top: 22px; }
.phone-bottom span { width: 14px; height: 3px; background: var(--pm-control-border); border-radius: 4px; }
.phone-bottom span:first-child { background: var(--pm-ink); }
.concept-art figcaption { color: var(--pm-muted); font-size: var(--pm-font-small); text-align: center; max-width: 35ch; }
/* Section-owned photographic layers, derived from the supplied D3 reference.
   The gradient is the fallback; the optional mask only softens the photo edge.
   Text remains in flow. Only decorative image layers may clip. */
.scene { position: absolute; z-index: -1; pointer-events: none; overflow: hidden; }
.scene .editorial-picture, .scene img { display: block; width: 100%; height: 100%; }
.scene img { object-fit: cover; border-radius: 0; box-shadow: none; }
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.hero-scene { inset: 0 0 2.5rem 47%; max-height: 840px; }
.hero-scene img { object-position: 55% 50%; }
.hero-scene::after { background: linear-gradient(90deg, var(--pm-canvas), rgb(var(--pm-paper-rgb) / .96) 6%, rgb(var(--pm-paper-rgb) / .15) 20%, transparent 28%), linear-gradient(0deg, var(--pm-canvas), transparent 7%); }
@supports (mask-image: linear-gradient(black, transparent)) {
    .hero-scene .editorial-picture { mask-image: linear-gradient(90deg, transparent, black 18%); }
}
.hero-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 37rem; margin-top: 2rem; }
.hero-pillars p { font-size: var(--pm-font-small); font-weight: var(--pm-weight-label); color: var(--pm-ink); }
.hero-pillars .card-icon { width: 2.6rem; height: 2.6rem; margin-bottom: .55rem; }
.hero-pillars svg { width: 1.28rem; height: 1.28rem; }
.hero-caption { position: relative; border-top: 1px solid var(--pm-line); background: var(--pm-canvas); }
.caption-inner { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; padding-block: .55rem; }
.caption-inner .concept-top, .caption-inner .concept-label { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--pm-muted); letter-spacing: 0; align-self: auto; }
.caption-inner .media-caption { margin: 0 0 0 auto; }
.media-caption { margin-top: 1.2rem; font-size: var(--pm-font-small); line-height: 1.5; color: var(--pm-muted); }
.hero-fallback { position: absolute; top: 3rem; right: 0; width: 45%; padding-bottom: 2rem; }
.hero-fallback .concept-art { max-width: 25rem; margin-left: auto; }
.process-section { position: relative; isolation: isolate; background: var(--pm-canvas); }
.process-copy { width: min(43rem, 55%); }
.process-copy > div:first-child { margin-bottom: 2.4rem; }
.process-scene { inset: 0 0 0 53%; }
.process-scene img { object-position: 65% 55%; }
.process-scene::after { background: linear-gradient(90deg, var(--pm-canvas), rgb(var(--pm-paper-rgb) / .96) 14%, rgb(var(--pm-paper-rgb) / .32) 63%, rgb(var(--pm-paper-rgb) / .12)), linear-gradient(0deg, var(--pm-canvas), transparent 22%, transparent 80%, var(--pm-canvas)); }
.price-scene { inset: 0 0 0 57%; }
.price-scene img { object-position: 50% 55%; }
.price-scene::after { background: linear-gradient(90deg, var(--pm-canvas), rgb(var(--pm-paper-rgb) / .95) 13%, rgb(var(--pm-paper-rgb) / .25) 52%, rgb(var(--pm-paper-rgb) / .06)), linear-gradient(0deg, var(--pm-canvas), transparent 17%, transparent 90%, var(--pm-canvas)); }
.section { padding-block: var(--pm-section-gap); }
.section + .section { border-top: 1px solid var(--pm-line); }
.section-tinted { background: var(--pm-surface); border-block: 1px solid var(--pm-line); }
.section-soft { background: var(--pm-surface-subtle); }
.section-heading { max-width: 48rem; margin-bottom: var(--pm-space-7); }
.section-heading .eyebrow, .split-section .eyebrow { margin-bottom: var(--pm-space-4); }
.solution-grid, .example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pm-grid-gap); }
.solution-card, .example-card { padding: var(--pm-card-pad); background: var(--pm-surface); border: 1px solid var(--pm-line); border-radius: var(--pm-radius-card); box-shadow: var(--pm-shadow-card); }
.solution-card { display: flex; flex-direction: column; align-items: flex-start; border: 0; border-top: 1px solid var(--pm-control-border); border-radius: 0; box-shadow: none; background: linear-gradient(145deg, var(--pm-surface), transparent 65%); }
.card-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--pm-space-5); border-radius: 50%; color: var(--pm-accent); background: radial-gradient(circle at 30% 20%, var(--pm-surface), var(--pm-accent-soft)); }
.card-icon svg { width: 26px; height: 26px; }
.solution-card > * { max-width: 100%; min-width: 0; }
.solution-card h3 { margin-bottom: var(--pm-space-4); }
.solution-card > p { margin-bottom: var(--pm-space-6); }
.solution-card > .planned-cta { width: 100%; margin-top: auto; padding-top: var(--pm-space-5); border-top: 1px solid var(--pm-line); }
.split-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: var(--pm-space-9); }
.prose { max-width: var(--pm-copy-measure); }
.prose p + p { margin-top: var(--pm-space-5); }
.prose > .button, .prose > .planned-cta { margin-top: var(--pm-space-6); }
.callout { border-left: 3px solid var(--pm-accent); padding: var(--pm-space-4) var(--pm-space-5); background: var(--pm-surface-subtle); }
.callout strong { display: block; margin-bottom: var(--pm-space-2); }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pm-space-7); }
.offer-grid > div { border-top: 1px solid var(--pm-control-border); padding-top: var(--pm-space-5); }
.line-symbol { display: block; color: var(--pm-accent); font-size: 1.75rem; margin-bottom: var(--pm-space-4); }
.offer-grid h3 { margin-bottom: var(--pm-space-3); }
.section-closing { max-width: var(--pm-copy-measure); margin-top: var(--pm-space-6); }
.section-soft .section-closing { border-top: 1px solid var(--pm-line); margin-top: var(--pm-space-7); padding-top: var(--pm-space-5); }
.process-list { padding: 0; margin: 0 0 var(--pm-space-6); list-style: none; counter-reset: step; }
.process-list li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1.15rem; border-top: 1px solid var(--pm-line); padding-block: 1.3rem; }
.process-list li::before { content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; grid-row: 1 / 3; border: 1px solid var(--pm-control-border); border-radius: 50%; color: var(--pm-accent); font: 1.2rem var(--pm-font-editorial); }
.process-list p { grid-column: 2; margin-top: .5rem; }
.faq-list details { border-bottom: 1px solid var(--pm-line); }
.faq-list details:first-child { border-top: 1px solid var(--pm-line); }
.faq-list summary { display: flex; align-items: start; justify-content: space-between; gap: var(--pm-space-4); min-height: var(--pm-control-min-height); padding-block: var(--pm-space-5); cursor: pointer; list-style: none; }
.faq-list summary h3 { min-width: 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--pm-accent); font-size: 1.5rem; line-height: 1; flex-shrink: 0; margin-top: .2rem; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary:hover h3, .faq-list summary:active h3 { color: var(--pm-accent-hover); }
.faq-list details[open] summary { padding-bottom: var(--pm-space-4); }
.faq-list details p { padding-bottom: var(--pm-space-5); }
.closing-panel { padding: var(--pm-space-8); border-block: 1px solid var(--pm-line); background: linear-gradient(115deg, var(--pm-canvas), var(--pm-accent-soft)); }
.closing-panel h2 { max-width: 22ch; }
.closing-panel > p:not(.eyebrow) { max-width: var(--pm-copy-measure); margin-block: var(--pm-space-5); }
.closing-panel .contact-prompt { font-size: var(--pm-font-small); }
.site-footer { border-top: 1px solid var(--pm-line); background: var(--pm-surface); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--pm-space-6); padding-block: var(--pm-space-7); font-size: var(--pm-font-small); }
.footer-inner > p { color: var(--pm-ink); font-weight: var(--pm-weight-label); }
.footer-inner > p > span { display: block; margin-top: var(--pm-space-2); color: var(--pm-muted); font-weight: var(--pm-weight-body); }
.footer-inner nav { display: flex; gap: var(--pm-space-5); }
.footer-inner nav a { display: inline-flex; align-items: center; min-height: var(--pm-control-min-height); }
.footer-preview { color: var(--pm-muted); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pm-space-3); font-size: var(--pm-font-small); color: var(--pm-muted); margin-bottom: var(--pm-space-6); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--pm-control-min-height); }
.price-hero { position: relative; isolation: isolate; background: var(--pm-canvas); padding-block: 2rem 3.5rem; }
.price-copy { width: min(41rem, 55%); }
.price-hero h1 { max-width: 22ch; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.08; }
.price-card { margin-top: 2rem; }
.price-figure { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.2rem; max-width: 35rem; padding-block: 1.5rem; border-block: 1px solid var(--pm-control-border); }
.price-figure .eyebrow { grid-column: 2; grid-row: 2; margin: 0; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pm-muted); }
.price-value { display: contents; }
.price-range { grid-column: 1; grid-row: 1 / 4; font: 4.8rem/.9 var(--pm-font-editorial); letter-spacing: -.04em; white-space: nowrap; color: var(--pm-accent); }
.price-unit { grid-column: 2; grid-row: 1; color: var(--pm-ink); font-size: 1.2rem; }
.price-condition { grid-column: 2; grid-row: 3; font-size: var(--pm-font-small); color: var(--pm-muted); }
.tax-note { font-size: var(--pm-font-small); margin-top: 1.2rem; color: var(--pm-muted); }
.price-card .text-link { margin-top: 1.4rem; }
.price-intro { max-width: 36rem; margin-top: 1.4rem; }
.price-intro > p { font-size: var(--pm-font-small); color: var(--pm-muted); }
.price-intro strong { font-weight: 400; color: inherit; }
.price-intro > .planned-cta { margin-top: 1.4rem; }
.section-intro { max-width: var(--pm-copy-measure); margin-bottom: var(--pm-space-6); }
.examples-caption { color: var(--pm-muted); font-size: var(--pm-font-small); margin-bottom: var(--pm-space-5); }
.example-label { color: var(--pm-accent); font-size: var(--pm-font-small); margin-bottom: var(--pm-space-3); }
.example-card h3 { font: 400 1.65rem/1.2 var(--pm-font-editorial); }
.example-card dl { margin: var(--pm-space-5) 0 0; }
.example-card dt { color: var(--pm-ink); font-size: 1rem; line-height: 1.45; font-weight: var(--pm-weight-label); margin-bottom: var(--pm-space-3); }
.example-card dt:not(:first-child) { border-top: 1px solid var(--pm-line); margin-top: var(--pm-space-5); padding-top: var(--pm-space-5); }
.example-card dd { margin: 0; }
.factor-list > div + div { border-top: 1px solid var(--pm-line); margin-top: var(--pm-space-5); padding-top: var(--pm-space-5); }
.factor-list p { margin-top: var(--pm-space-3); }
.section-last { padding-top: 0; }
.error-layout { background: var(--pm-canvas); }
.error-page { max-width: 52rem; padding-block: var(--pm-section-gap); }
.error-page h1 { margin-bottom: var(--pm-space-6); }
/* Reflow uses the same DOM and source order at every width. */
.hero-copy, .price-copy, .process-copy, .hero-actions > *, .caption-inner > *, .hero-pillars > *, .split-section > *, .site-header > * { min-width: 0; }
@media (min-width: 901px) and (max-width: 1150px) {
    .hero-copy, .price-copy, .process-copy { width: 53%; }
    .hero h1, .price-hero h1 { font-size: 3.05rem; }
    .hero-scene { top: 9rem; bottom: auto; aspect-ratio: 760 / 734; }
    .hero-scene::after { background: linear-gradient(90deg, var(--pm-canvas), rgb(var(--pm-paper-rgb) / .96) 6%, rgb(var(--pm-paper-rgb) / .15) 20%, transparent 28%), linear-gradient(180deg, var(--pm-canvas), transparent 12%, transparent 87%, var(--pm-canvas)); }
    .hero-pillars { gap: .75rem; }
    .split-section { gap: 2.8rem; }
}
@media (max-width: 1100px) {
    .solution-grid, .example-grid { grid-template-columns: minmax(0, 1fr); }
    .example-card dl { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--pm-space-4) var(--pm-space-5); }
    .example-card dt { margin: 0; }
    .example-card dt:not(:first-child) { margin: 0; padding: 0; border: 0; }
}
@media (max-width: 900px) {
    .hero-inner { min-height: 0; padding-block: 2.3rem 0; }
    .hero-copy, .price-copy, .process-copy { width: auto; max-width: 42rem; }
    .hero h1 { font-size: clamp(2.2rem, 6.5vw, 3.4rem); max-width: 18ch; }
    .scene { position: relative; inset: auto; z-index: 0; width: 100%; }
    .hero-scene { --scene-height: min(25rem, 400px); height: var(--scene-height); margin-top: 1rem; }
    .hero-scene .editorial-picture { mask-image: none; width: min(100%, calc(var(--scene-height) * 590 / 682)); margin-inline: auto; }
    .hero-scene img { object-fit: contain; object-position: center bottom; }
    .hero-scene::after { inset-inline: max(0px, calc((100% - var(--scene-height) * 590 / 682) / 2)); background: linear-gradient(180deg, var(--pm-canvas), transparent 18%, transparent 87%, var(--pm-canvas)), linear-gradient(90deg, var(--pm-canvas), transparent 12%, transparent 88%, var(--pm-canvas)); }
    .hero-pillars { gap: 1rem; margin-top: 1.6rem; }
    .caption-inner .media-caption { flex-basis: 100%; margin: .35rem 0 0; }
    .section { padding-block: 3.4rem; }
    .section-heading { margin-bottom: 1.8rem; }
    .split-section, .offer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .process-scene { height: 18rem; margin-block: 1.5rem -1.4rem; }
    .process-scene::after { background: linear-gradient(0deg, var(--pm-canvas), transparent 25%, transparent 75%, var(--pm-canvas)), linear-gradient(90deg, var(--pm-canvas), transparent 20%, transparent 80%, var(--pm-canvas)); }
    .price-hero { padding-block: 1.8rem 1.5rem; }
    .price-scene { height: 12rem; margin-top: 1rem; }
    .price-scene img { object-position: center 65%; }
    .price-scene::after { background: linear-gradient(0deg, var(--pm-canvas), transparent 40%, transparent 60%, var(--pm-canvas)), linear-gradient(90deg, var(--pm-canvas), transparent 20%, transparent 85%, var(--pm-canvas)); }
    .hero-fallback .concept-art { margin-inline: auto; }
    .hero-fallback { position: relative; inset: auto; width: 100%; }
    .closing-panel { padding: 2rem 1.5rem; }
    .preview-inner { padding-block: .5rem; align-items: flex-start; }
}
@media (max-width: 560px) {
    .site-header { gap: var(--pm-space-3); padding-block: 1rem .75rem; }
    .brand { width: auto; }
    .brand small { letter-spacing: .025em; }
    .main-nav { gap: var(--pm-space-5); }
    .header-link { gap: var(--pm-space-3); padding-inline: var(--pm-space-3); }
    .preview-inner > p > span:last-child { flex-basis: 100%; }
    .hero-actions { flex-direction: column; gap: .9rem; }
    .hero-actions > * { flex: auto; }
    .hero-actions > .button, .hero-actions > .planned-cta, .planned-cta-button, .planned-cta-button button { width: 100%; }
    .hero-offer { font-size: 1.05rem; }
    .hero-lead { font-size: 1rem; }
    .hero-pillars { gap: .75rem; }
    .hero-pillars .card-icon { width: 2.25rem; height: 2.25rem; }
    .hero-scene { --scene-height: min(23rem, 368px); }
    .price-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; }
    .price-figure > .eyebrow, .price-condition { flex-basis: 100%; }
    .price-range { font-size: 3.9rem; }
    .example-card dl { display: block; }
    .example-card dt { margin-bottom: var(--pm-space-3); }
    .example-card dt:not(:first-child) { border-top: 1px solid var(--pm-line); padding-top: var(--pm-space-5); margin-top: var(--pm-space-5); }
    .footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button { transition: none; }
}
@media (forced-colors: active) {
    .scene { display: none; }
    .hero-inner { min-height: 0; }
    .button, .planned-cta button, .header-link, .brand-mark, .card-icon { border: 1px solid ButtonText; }
    .main-nav a[aria-current] { text-decoration: underline; }
    :focus-visible { outline-color: Highlight; box-shadow: none; }
    .phone-demo { border-color: CanvasText; }
}

@media print {
    .scene, .hero-pillars, .preview-notice { display: none; }
    .hero-inner { min-height: 0; }
    .hero-copy, .price-copy, .process-copy { width: 100%; max-width: 100%; }
}

/* One navigation DOM; native popover with a visible fallback when unsupported. */
.an-brand-lockup,.an-brand-image { display:block; }
.an-brand-image { width:218px; height:auto; max-width:100%; object-fit:contain; }
.brand { flex:0 0 auto; gap:0; }
.site-header--m2 .main-nav[popover] { display:flex; position:static; inset:auto; margin:0 0 0 auto; padding:0; width:auto; height:auto; overflow:visible; border:0; background:transparent; color:inherit; gap:1.35rem; }
.main-nav a { font-size:.9rem; white-space:nowrap; }
.main-nav a.is-ancestor { color:var(--pm-accent); text-decoration:underline dotted; }
.header-link { flex:0 0 auto; font-size:.92rem; min-height:46px; padding:10px 16px; }
.menu-toggle,.menu-close { display:none; min-height:48px; border:1px solid var(--pm-control-border); padding:.65rem .85rem; border-radius:var(--pm-radius-control); background:var(--pm-surface); color:var(--pm-ink); cursor:pointer; font:inherit; }
.menu-toggle:hover,.menu-close:hover { background:var(--pm-accent-soft); }
.site-footer { background:var(--pm-surface-subtle); }
.site-footer--m2 .footer-inner { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:2rem 3rem; }
.footer-brand,.site-footer--m2 .footer-inner>p { grid-column:1/-1; }
.footer-brand .an-brand-image { width:186px; margin-bottom:18px; }
.footer-brand p,.site-footer a { color:var(--pm-body); }
.site-footer--m2 nav { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; min-width:0; }
.site-footer--m2 nav .eyebrow { margin-bottom:.5rem; }
.site-footer--m2 nav a { min-height:44px; display:flex; align-items:center; }
.site-footer--m2 .footer-preview { grid-column:1/-1; }
@media(max-width:1150px) {
 .container { padding-inline:28px; }
 .site-footer--m2 .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Keep the longer approved navigation labels at their original font size. */
@media(max-width:1360px) {
 .site-header { min-height:82px; gap:18px; }
 .site-header .menu-toggle { margin-left:auto; }
 .site-header--m2 .main-nav[popover] { flex-wrap:wrap; margin:0; }
 @supports selector(:popover-open) {
  .menu-toggle { display:inline-flex; align-items:center; gap:.5rem; }
  .site-header--m2 .main-nav[popover]:not(:popover-open) { display:none; }
  .site-header--m2 .main-nav[popover]:popover-open { display:flex; position:fixed; inset:16px 16px auto auto; width:min(600px,calc(100% - 32px)); height:auto; max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:24px; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:.5rem; background:var(--pm-surface); border:1px solid var(--pm-control-border); }
  .main-nav::backdrop { background:rgb(var(--pm-overlay-rgb) / .68); }
  .main-nav:popover-open a { white-space:normal; font-size:1.1rem; min-height:48px; }
  .main-nav:popover-open .menu-close { display:inline-flex; justify-content:space-between; gap:.75rem; }
 }
}
@media(max-width:900px) { .container { padding-inline:22px; } }
@media(max-width:560px) {
 .container { padding-inline:18px; }
 .site-header { min-height:80px; padding-block:12px; gap:12px; }
 .an-brand-image { width:184px; }
 .site-header .header-link { display:inline-flex; flex-basis:100%; width:100%; justify-content:center; }
 .site-header--m2 .main-nav[popover]:popover-open { inset:10px; width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
 .site-footer--m2 .footer-inner { grid-template-columns:1fr; }
}
[hidden] { display:none !important; }
@media(forced-colors:active) {
 .an-brand-image { forced-color-adjust:none; }
 .main-nav:popover-open,.site-header,.site-footer { background:Canvas; color:CanvasText; }
 :focus-visible { outline-color:Highlight; }
}
@media print {
 :root { color-scheme:light; }
 body { background:white; color:black; }
 body :is(h1,h2,h3,h4,p,li,dt,dd,a,label,legend,pre) { color:black; }
 .site-header,.site-footer,.preview-notice,#measurement { display:none; }
 .solution-card,.example-card,.f1-demo,.f1-brief pre,.m3-option,.m3-summary .m3-budget { background:white; box-shadow:none; }
}