/* IA Foundry — "Live signal" motion prototype.
   Brand tokens are copied from the live site (styles.css + home.css, Oct 2026). */
@font-face { font-family: "IA Foundry Sans"; src: url("/assets/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IA Foundry Sans"; src: url("/assets/fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IA Foundry Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --font-sans: "IA Foundry Sans", sans-serif;
  --font-editorial: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* live palette */
  --paper: #f4f2eb; --ink: #202d25; --muted: #566057; --line: #d1d4c9; --panel: #e7eadd;
  --green: #234b38; --card: #e5ded0; --card-line: #c9c4b8; --mint: #e0e7d9; --sage: #8fa18e; --sage-dark: #647f69;
  --gutter: clamp(24px, 5vw, 72px);
  /* motion tokens: precise, no overshoot ("deterministic motion") */
  --ease-signal: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms; --t-med: 420ms; --t-slow: 800ms;
}
* { box-sizing: border-box; }
html.motion { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; max-width: 68ch; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.section { max-width: 1440px; margin-inline: auto; padding: 104px var(--gutter); }
.section-label { margin: 0 0 28px; font-size: 13px; font-weight: 500; letter-spacing: .025em; display: inline-flex; align-items: center; gap: 10px; }
.section-label::before { content: ""; width: 18px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(var(--lbl, 1)); transition: transform var(--t-slow) var(--ease-signal); }
.h1 { font-size: clamp(48px, 5.1vw, 74px); line-height: 1.04; letter-spacing: -.05em; }
.h2 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -.045em; }
.editorial { font-family: var(--font-editorial); font-weight: 400; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: 24px; top: -100px; background: var(--paper); padding: 12px 20px; z-index: 60; }
.skip-link:focus { top: 12px; }

/* ---------- buttons & links ---------- */
.button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 13px 23px; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font: 500 14px/1.5 var(--font-sans); cursor: pointer; isolation: isolate; transition: background-color var(--t-fast) ease; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green); transform: translateX(-101%); transition: transform var(--t-med) var(--ease-io); }
.button:hover::before, .button:focus-visible::before { transform: none; }
.button::after { /* signal pulse along the bottom edge */ content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 30%; background: linear-gradient(90deg, transparent, #b8c7ad, transparent); transform: translateX(-120%); }
.button:hover::after { animation: btn-signal 900ms var(--ease-signal) 120ms 1; }
@keyframes btn-signal { to { transform: translateX(400%); } }
.arrow { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast) var(--ease-signal); }
a:hover .arrow.diag, button:hover .arrow.diag { transform: translate(2px, -2px); }
a:hover .arrow.right { transform: translateX(3px); }
.text-link { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 15px; font-weight: 500; }
.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform-origin: right; transition: transform var(--t-med) var(--ease-io); }
.text-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-io) 80ms; }
.text-link:hover { color: var(--green); }
.text-link:hover::after { transform: scaleX(0); }
.text-link:hover::before { transform: scaleX(1); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 30px; min-height: 88px; padding: 18px max(var(--gutter), calc((100vw - 1296px) / 2)); background: color-mix(in srgb, var(--paper) 97%, transparent); backdrop-filter: saturate(1.2) blur(12px); view-transition-name: site-nav; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font: 600 clamp(24px, 2.35vw, 34px)/1.2 var(--font-sans); letter-spacing: -.045em; white-space: nowrap; }
.symbol { display: inline-block; height: .78em; aspect-ratio: 151 / 120; flex: none; overflow: visible; }
.symbol path { fill: currentColor; }
.nav .symbol { width: calc(.98em * var(--p, 0)); opacity: var(--p, 0); margin-right: calc(-12px * (1 - var(--p, 0))); }
.nav .symbol .s1 { transform: translateX(calc(-30px * (1 - var(--p, 0)))); }
.nav .symbol .s2 { transform: translateX(calc(30px * (1 - var(--p, 0)))); }
.brand-letters { display: inline-flex; align-items: baseline; white-space: pre; }
.brand-rest { display: inline-block; overflow: hidden; max-width: calc(var(--w, 400px) * (1 - var(--p, 0))); opacity: calc(1 - var(--p, 0) * 1.6); }
.brand-rest > span { display: block; width: max-content; white-space: pre; }
.nav-items { position: relative; display: flex; align-items: center; gap: 12px 26px; margin-left: auto; font-size: 14px; font-weight: 500; }
.nav-items a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-cta { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 8px 18px; transition: background-color var(--t-fast); }
.nav-cta:hover { background: var(--green); }
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; overflow: hidden; }
.nav-progress i { position: absolute; inset: 0; background: var(--green); transform-origin: left; transform: scaleX(var(--scroll, 0)); }
.nav-progress b { /* boot / route-change signal */ position: absolute; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, transparent, var(--green), transparent); transform: translateX(-100%); }
.booting .nav-progress b { animation: boot 900ms var(--ease-io) 1; }
@keyframes boot { to { transform: translateX(560%); } }

/* ---------- reveal system ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease-signal), transform var(--t-slow) var(--ease-signal); transition-delay: calc(var(--i, 0) * 70ms); }
.motion [data-reveal].in { opacity: 1; transform: none; }
.lines .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.lines .line > span { display: block; }
.motion [data-reveal-lines] .line > span { transform: translateY(105%); transition: transform 900ms var(--ease-signal); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.motion [data-reveal-lines].in .line > span { transform: none; }
.draw-line { position: relative; }
.draw-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; transition: transform 1100ms var(--ease-io); transition-delay: calc(var(--i, 0) * 90ms); }
.motion .draw-line:not(.in)::before { transform: scaleX(0); }

.draw-line::after { /* signal head travelling along the drawn line */ content: ""; position: absolute; top: -1px; left: 0; width: 60px; height: 3px; background: linear-gradient(90deg, transparent, var(--green)); opacity: 0; }
.draw-line.in::after { animation: line-head 1100ms var(--ease-io) 1 both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes line-head { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--lw, 1200px) - 60px)); } }
.motion .icon-draw { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1400ms var(--ease-io) 200ms; }
.motion .in .icon-draw, .motion .in.icon-draw { stroke-dashoffset: 0; }

/* ---------- pages & transitions ---------- */
@view-transition { navigation: auto; }
main { view-transition-name: page; }
::view-transition-old(page) { animation: vt-out 260ms var(--ease-io) both; }
::view-transition-new(page) { animation: vt-in 520ms var(--ease-signal) 60ms both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- HOME ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(40px, 7vw, 104px); padding-top: 92px; padding-bottom: 96px; }
.hero h1 { max-width: 720px; }
.hero-description { font: 400 clamp(21px, 2vw, 28px)/1.38 var(--font-editorial); letter-spacing: -.015em; max-width: 35ch; }
.hero-traces { position: absolute; left: 0; right: 0; bottom: -6px; height: 90px; width: 100%; pointer-events: none; overflow: visible; }
.trace { fill: none; stroke: var(--line); stroke-width: 1; }
.pulse { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .05 .95; stroke-dashoffset: .05; opacity: .85; }
.motion .pulse { animation: pulse-run 5.2s var(--ease-io) infinite; }
.motion .pulse.p2 { animation-delay: 1.7s; animation-duration: 6.4s; }
.motion .pulse.p3 { animation-delay: 3.1s; }
@keyframes pulse-run { 0% { stroke-dashoffset: .05; opacity: 0; } 8% { opacity: .9; } 85% { opacity: .9; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.node { fill: var(--paper); stroke: var(--sage); stroke-width: 1.2; }

.feature { padding-inline: var(--gutter); max-width: 1440px; margin: 0 auto; }
.feature-media { position: relative; display: grid; height: clamp(380px, 42vw, 620px); overflow: hidden; border-radius: 14px; background: var(--green); clip-path: inset(var(--ci, 0%) var(--ci, 0%) round 14px); }
.feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; transform: scale(var(--sc, 1)) translateY(var(--ty, 0px)); }
.feature-media::after { content: ""; position: absolute; inset: 0; background: rgb(12 24 16 / 48%); }
.feature-copy { position: relative; z-index: 2; place-self: center; text-align: center; color: #fffdf7; padding: 44px 24px; }
.feature-copy h2 { font: 400 clamp(44px, 5.3vw, 78px)/1.03 var(--font-editorial); letter-spacing: -.04em; }
.feature-link { display: inline-flex; align-items: center; gap: 26px; margin-top: 30px; min-height: 48px; padding: 10px 20px; border: 1px solid #fffdf7; border-radius: 5px; font-size: 14px; font-weight: 500; transition: background-color var(--t-fast), color var(--t-fast); }
.feature-link:hover { background: #fffdf7; color: var(--ink); }
.feature-cap { display: flex; justify-content: space-between; padding-top: 12px; color: var(--muted); font-size: 11px; }
.feature-cap a { text-decoration: underline; text-underline-offset: 3px; }
.hud { position: absolute; z-index: 3; left: 22px; bottom: 22px; width: min(330px, calc(100% - 44px)); padding: 14px 16px 12px; border: 1px solid rgb(255 253 247 / 28%); border-radius: 8px; background: rgb(20 36 27 / 62%); backdrop-filter: blur(8px); color: #fffdf7; font: 12px/1.5 var(--font-mono); }
.hud-head { display: flex; justify-content: space-between; gap: 10px; color: #b8c7ad; font-size: 11px; margin-bottom: 8px; }
.hud ol { list-style: none; margin: 0; padding: 0; }
.hud li { display: flex; gap: 10px; align-items: center; padding: 3px 0; opacity: .38; transition: opacity var(--t-med); }
.hud li.done, .hud li.now { opacity: 1; }
.hud li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #b8c7ad; flex: none; }
.hud li.now::before { background: #b8c7ad; animation: led 900ms ease-in-out infinite alternate; }
.hud li.done::before { background: #b8c7ad; border-color: #b8c7ad; }
@keyframes led { from { box-shadow: 0 0 0 0 rgb(184 199 173 / 0); } to { box-shadow: 0 0 0 4px rgb(184 199 173 / 25%); } }

.benefits-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 7vw, 104px); margin-bottom: 58px; align-items: start; }
.benefits-head .status { font: 400 22px/1.45 var(--font-editorial); }
.home-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: 72px; }
.benefit { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 28px; padding: 32px 0 36px; position: relative; }
.benefit::marker { content: none; }
.benefit-icon { width: 26px; height: 26px; margin-top: 4px; color: var(--green); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.benefit h3 { font: 400 29px/1.15 var(--font-editorial); letter-spacing: -.025em; max-width: 20ch; transition: transform var(--t-med) var(--ease-signal); }
.benefit p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.benefit .row-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--green); }
.benefit:hover h3 { transform: translateX(6px); }


.mission { background: var(--panel); }
.mission-inner { max-width: 1296px; margin: 0 auto; }
.mission-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(48px, 8vw, 120px); }
.mission .status { max-width: 38ch; margin-top: 30px; font: 400 24px/1.45 var(--font-editorial); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; margin-top: 96px; padding-top: 48px; }
.pillars.draw-line::before { background: #b8c2ae; }
.pillar { padding: 18px; margin: -18px; border-radius: 8px; transition: background-color var(--t-med); cursor: default; }
.pillar:hover, .pillar:focus-visible { background: rgb(255 255 255 / 35%); }
.pillar h3 { margin-bottom: 18px; font: 400 28px/1.2 var(--font-editorial); }
.pillar p { color: var(--muted); font-size: 16px; }
.pillar .tag { display: inline-block; margin-top: 14px; font: 11px/1 var(--font-mono); color: var(--green); letter-spacing: .04em; opacity: .75; transition: opacity var(--t-med); }
.pillar:hover .tag { opacity: 1; }

/* PLC illustration (rebuilt from live markup, now animated) */
.plc-vision { justify-self: end; width: 100%; max-width: 430px; padding: 22px; border-radius: 10px; background: var(--green); color: var(--paper); }
.plc-vision figcaption { font-size: 18px; font-weight: 600; letter-spacing: -.025em; display: flex; justify-content: space-between; align-items: center; }
.run-led { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); color: #b8c7ad; letter-spacing: .06em; }
.run-led::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5d7a63; transition: background-color var(--t-med), box-shadow var(--t-med); }
.is-live .run-led::before { background: #b8c7ad; box-shadow: 0 0 8px #b8c7ad; }
.plc-rack { position: relative; padding: 26px 14px 24px; }
.plc-rack::before { content: ""; position: absolute; top: 47%; left: 0; right: 0; height: 36px; background: var(--sage); border-block: 6px solid var(--sage-dark); transition: transform 700ms var(--ease-io); }
.motion [data-plc]:not(.is-built) .plc-rack::before { transform: scaleX(0); }
.plc-housing { position: relative; border: 1px solid #abbba2; border-radius: 5px; background: #c3ceb9; padding: 10px; box-shadow: 7px 8px 0 #183727; transition: transform 800ms var(--ease-signal) 250ms, opacity 500ms 250ms, box-shadow var(--t-med); }
.motion [data-plc]:not(.is-built) .plc-housing { transform: translateY(26px); opacity: 0; }
.plc-terminals { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 0 8px; }
.plc-terminals i { display: block; height: 15px; background: #304c3b; border: 1px solid var(--sage-dark); position: relative; border-radius: 1px; }
.plc-terminals i::after { content: ""; position: absolute; width: 6px; height: 6px; border: 1px solid #aec09f; border-radius: 50%; top: 3px; left: calc(50% - 4px); transition: background-color 200ms, box-shadow 200ms; transition-delay: calc(var(--k) * 70ms + 900ms); }
.is-live .plc-terminals i::after { background: #b8c7ad; box-shadow: 0 0 6px #b8c7ad; }
.motion .is-live .plc-terminals.io i::after { animation: io-blink 2.4s steps(1) infinite; animation-delay: calc(var(--k) * 310ms + 1.6s); }
@keyframes io-blink { 0%, 60% { background: #b8c7ad; } 61%, 100% { background: transparent; box-shadow: none; } }
.plc-face { margin-block: 10px; padding: 22px 18px 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--sage); border-radius: 3px; }
.plc-name strong { display: block; font: 500 clamp(25px, 2.4vw, 34px)/1.1 var(--font-sans); }
.plc-part { transition: box-shadow var(--t-med), background-color var(--t-med), transform var(--t-med) var(--ease-signal); }
.plc-part.hl { box-shadow: 0 0 0 2px var(--green), 0 0 0 6px rgb(35 75 56 / 15%); }
.plc-intelligence { margin-top: 23px; padding: 15px; border: 1px solid #8da17d; border-left: 4px solid var(--green); background: var(--panel); transition: opacity 500ms 700ms, transform 600ms var(--ease-signal) 700ms, box-shadow var(--t-med); }
.motion [data-plc]:not(.is-built) .plc-intelligence { opacity: 0; transform: translateX(-10px); }
.plc-circuit { display: block; width: 100%; height: 42px; margin-bottom: 12px; overflow: visible; }
.circuit-track { stroke: #73866a; stroke-width: 1.5; fill: none; }
.circuit-signal { stroke: var(--green); stroke-width: 3; fill: none; stroke-dasharray: .12 .88; stroke-dashoffset: .12; opacity: 0; }
.motion .is-live .circuit-signal { animation: plc-signal 3.6s ease-in-out infinite; }
.motion .is-live .circuit-signal.b { animation-delay: 1.8s; }
@keyframes plc-signal { 0% { stroke-dashoffset: .12; opacity: 0; } 12%, 80% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.plc-circuit circle, .plc-circuit .core-dot { fill: var(--green); }
.plc-circuit .circuit-core { fill: var(--paper); stroke: var(--green); stroke-width: 1.5; }
.motion .is-live .circuit-core { animation: core 3.6s ease-in-out infinite; }
@keyframes core { 40%, 55% { fill: #d6e6cc; } }
.plc-intelligence strong { display: block; font-size: 18px; font-weight: 500; line-height: 1.25; }
.plc-intelligence span { display: block; margin-top: 7px; color: #40553d; font-size: 12px; }
.plc-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 23px; }
.plc-layers > div { border-top: 2px solid #73866a; padding-top: 12px; transition: opacity 500ms, box-shadow var(--t-med); }
.plc-layers > div:nth-child(1) { transition-delay: 1000ms, 0ms; }
.plc-layers > div:nth-child(2) { transition-delay: 1150ms, 0ms; border-top: 3px double #73866a; }
.motion [data-plc]:not(.is-built) .plc-layers > div { opacity: 0; }
.plc-layers strong { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; line-height: 1.45; }
.plc-layers svg { width: 21px; height: 21px; stroke: var(--green); stroke-width: 1.5; fill: none; }
.plc-io { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.plc-note { margin-top: 4px; color: var(--mint); font-size: 13px; text-align: center; max-width: none; }

.company { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; padding-block: 116px; }
.company h2 { margin-bottom: 28px; }
.scrub-text { max-width: 42ch; font: 400 25px/1.45 var(--font-editorial); }
.scrub-text .w { color: var(--ink); opacity: calc(.6 + .4 * var(--o, 1)); transition: opacity 120ms linear; }

.sales { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; align-items: end; padding-top: 60px; padding-bottom: 72px; }
.sales p:not(.section-label) { max-width: 50ch; color: var(--muted); }
.sales-action { justify-self: end; }

/* footer with bookend wordmark */
.footer { background: var(--ink); color: var(--paper); padding: 46px max(var(--gutter), calc((100vw - 1296px) / 2)) 38px; overflow: hidden; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
.footer-meta { display: flex; flex-direction: column; font-size: 13px; }
.footer-meta a, .footer-meta button { text-decoration: underline; text-underline-offset: 4px; }
.footer-meta button { all: unset; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.footer-mark { display: flex; align-items: center; gap: .25em; margin-top: 48px; font: 600 clamp(30px, 6.4vw, 100px)/1.1 var(--font-sans); padding-bottom: 8px; letter-spacing: -.055em; white-space: nowrap; }
.footer-mark .symbol { height: .72em; margin-right: .12em; }
.footer-mark .symbol .s1, .footer-mark .symbol .s2 { transition: transform 900ms var(--ease-signal); }
.motion .footer-mark:not(.in) .symbol .s1 { transform: translateX(-40px); }
.motion .footer-mark:not(.in) .symbol .s2 { transform: translateX(40px); }
.footer-mark .dim { color: #44564b; transition: color 1200ms var(--ease-io) 500ms; }
.motion .footer-mark:not(.in) .dim { color: var(--paper); }

/* ---------- SOLUTIONS ---------- */
.page-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 7vw, 104px); align-items: start; padding-top: 92px; padding-bottom: 72px; }
.page-hero .lead { font: 400 clamp(21px, 2vw, 26px)/1.4 var(--font-editorial); }
.page-hero .sub { margin-top: 18px; color: var(--muted); font-size: 16px; }
.launch { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 48px 0; border-radius: 14px; background: var(--panel); overflow: hidden; }
.launch-media { position: relative; overflow: hidden; }
.launch-media img { display: block; width: 100%; height: auto; transform: scale(var(--sc, 1.06)) translateY(var(--ty, 0px)); transition: transform 120ms linear; }
.launch-media::after { /* one-time scan sweep */ content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 42%) 50%, transparent 65%); transform: translateX(-120%); }
.launch-media.in::after { animation: sweep 1600ms var(--ease-io) 400ms 1 both; }
@keyframes sweep { to { transform: translateX(120%); } }
.launch-media figcaption { padding: 10px 12px; font-size: 11px; color: var(--muted); }
.launch-copy { padding-right: 48px; }
.status-pill { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgb(35 75 56 / 40%); }
.motion .status-pill::before { animation: run 1.8s ease-out infinite; }
@keyframes run { 0% { box-shadow: 0 0 0 0 rgb(35 75 56 / 45%); } 100% { box-shadow: 0 0 0 9px rgb(35 75 56 / 0); } }
.launch h2 { margin-top: 18px; }
.launch .lead { margin-top: 18px; font: 400 24px/1.35 var(--font-editorial); }
.launch .note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.cards-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; margin-bottom: 40px; }
.cards-head h2 { font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -.03em; line-height: 1.15; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.case-card { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 12px; background: var(--card); overflow: hidden; isolation: isolate; transition: transform var(--t-med) var(--ease-signal), box-shadow var(--t-med); }
.case-card::before { /* pointer spotlight */ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 45%), transparent 60%); opacity: 0; transition: opacity var(--t-med); }
.case-card::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-io); }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgb(32 45 37 / 45%); }
.case-card:hover::before { opacity: 1; }
.case-card:hover::after { transform: scaleX(1); }
.case-card h3 { font-size: 22px; letter-spacing: -.02em; }
.case-card .promise { margin-top: 12px; font: 400 19px/1.4 var(--font-editorial); }
.case-card dl { margin: 26px 0 24px; font-size: 13px; }
.case-card dl > div { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--card-line); }
.case-card dt { font-size: 11px; font-weight: 500; letter-spacing: .065em; text-transform: uppercase; }
.case-card dd { margin: 0; text-align: right; }
.case-card .button { margin-top: auto; align-self: flex-start; }
.loop { display: grid; grid-template-columns: 1fr 1.25fr; gap: 54px; background: var(--green); color: var(--paper); border-radius: 0; }
.loop p { color: var(--mint); }
.loop p + p { margin-top: 22px; }
.loop a:focus-visible { outline-color: var(--paper); }
.loop-diagram { position: relative; display: grid; gap: 10px; align-content: start; }
.loop-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid #47705a; border-radius: 8px; transition: background-color var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-signal); }
.loop-step .n { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #78947e; border-radius: 50%; font: 500 13px/1 var(--font-mono); transition: background-color var(--t-med), color var(--t-med); }
.loop-step strong { font-weight: 500; }
.loop-step small { display: block; color: #b8c7ad; font-size: 13px; }
.loop-step.on { background: rgb(255 255 255 / 8%); border-color: #b8c7ad; transform: translateX(6px); }
.loop-step.on .n { background: var(--paper); color: var(--green); }
.loop-step.exception { border-style: dashed; }
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.value-grid > div { padding-top: 24px; }
.value-grid h3 { font: 400 26px/1.2 var(--font-editorial); margin-bottom: 14px; }
.value-grid p { color: var(--muted); font-size: 16px; }
.offer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.offer-cols > div { padding-top: 26px; }
.offer-cols h3 { font: 400 28px/1.2 var(--font-editorial); display: flex; gap: 14px; align-items: baseline; }
.offer-cols h3 small { font: 400 11px/1 var(--font-sans); color: var(--muted); }
.offer-cols p { margin-top: 14px; color: var(--muted); }
.offer-cols ul { margin: 20px 0; padding-left: 19px; font-size: 14px; }
.offer-cols li { padding: 4px 0; }

/* ---------- ARCHITECTURE ---------- */
.arch { padding: 28px; border-radius: 14px; background: var(--card); }
.arch-label { font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.arch-env { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; border-radius: 10px; background: #faf8f2; transition: opacity 600ms, transform 800ms var(--ease-signal); }
.motion .arch:not(.in) .arch-env { opacity: 0; transform: translateY(16px); }
.arch-agent h3 { font-size: 34px; letter-spacing: -.03em; }
.arch-agent .ed { font: 400 18px/1.4 var(--font-editorial); color: var(--muted); margin-top: 6px; }
.arch-runtime { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); transition: opacity 600ms 700ms; }
.motion .arch:not(.in) .arch-runtime { opacity: 0; }
.arch-runtime h4 { margin: 0; font: 400 22px/1.3 var(--font-editorial); }
.arch-runtime p { font-size: 14px; color: var(--muted); margin-top: 6px; }
.arch-licensed { padding: 18px 20px; border-radius: 8px; background: var(--panel); transition: opacity 600ms 450ms, transform 900ms var(--ease-signal) 450ms; }
.motion .arch:not(.in) .arch-licensed { opacity: 0; transform: translateX(30px); }
.arch-licensed .k { font-size: 12px; font-weight: 600; }
.arch-licensed dl { margin: 12px 0 0; }
.arch-licensed dl > div { padding: 14px 0; border-top: 1px solid var(--line); }
.arch-licensed dl > div:first-child { border-top: 0; }
.arch-licensed dt { font: 400 22px/1.3 var(--font-editorial); }
.arch-licensed dd { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.arch-links { position: relative; display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: 15px; }
.arch-links svg { position: absolute; left: 0; top: 0; width: 100%; height: 40px; overflow: visible; }
.arch-links .trace { stroke: #b4ad9f; }
.arch-links .pulse { stroke: var(--green); }
.arch-links span { display: block; padding-top: 52px; transition: opacity 600ms 1100ms; }
.motion .arch:not(.in) .arch-links span { opacity: 0; }
.arch-foot { margin: 18px auto 0; text-align: center; font-size: 13px; color: var(--muted); max-width: 52ch; }
.matrix-wrap { overflow-x: auto; border-radius: 12px; }
.matrix { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.matrix th, .matrix td { padding: 20px 22px; border-bottom: 1px solid var(--line); vertical-align: top; transition: background-color var(--t-fast), color var(--t-fast); }
.matrix thead th { background: var(--card); font: 500 22px/1.2 var(--font-sans); letter-spacing: -.02em; }
.matrix thead th span { display: block; margin-top: 6px; font: 400 13px/1.4 var(--font-sans); color: var(--muted); }
.matrix thead th:first-child { width: 18%; font-size: 14px; vertical-align: bottom; }
.matrix tbody th { font-size: 14px; font-weight: 500; }
.matrix td { color: var(--muted); font-size: 15px; }
.matrix .col-ia { background: var(--panel); }
.matrix .col-hl { background: #dfe7d3; color: var(--ink); }
.matrix thead .col-hl { background: var(--green); color: var(--paper); }
.matrix thead .col-hl span { color: var(--mint); }
.lifecycle { background: var(--panel); }
.lifecycle-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding-top: 40px; }
.lifecycle-track::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: #c5cdb9; }
.lifecycle-track::after { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--green); transform-origin: left; transform: scaleX(var(--lp, 0)); }
.lifecycle-track > div { position: relative; }
.lifecycle-track > div::before { content: ""; position: absolute; top: -37px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid #9fb092; transition: background-color var(--t-med), border-color var(--t-med); }
.lifecycle-track > div.reached::before { background: var(--green); border-color: var(--green); }
.lifecycle-track h3 { font: 400 26px/1.2 var(--font-editorial); margin-bottom: 14px; }
.lifecycle-track p { font-size: 16px; color: var(--muted); }

/* ---------- USE CASE ---------- */
.uc-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 7vw, 104px); align-items: end; padding-top: 64px; padding-bottom: 56px; }
.uc-hero .promise { font: 400 26px/1.35 var(--font-editorial); }
.uc-hero .aud { margin-top: 12px; font-size: 13px; color: var(--muted); }
.uc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 7vw, 104px); align-items: start; }
.uc-grid h2 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 16px; }
.uc-steps { position: relative; list-style: none; margin: 24px 0 0; padding: 0 0 0 30px; }
.uc-steps::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.uc-steps::after { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--green); transform-origin: top; transform: scaleY(var(--sp, 0)); }
.uc-steps li { position: relative; padding: 0 0 22px; color: var(--muted); transition: color var(--t-med); }
.uc-steps li::before { content: ""; position: absolute; left: -29px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid #b8c2ae; transition: background-color var(--t-med), border-color var(--t-med); }
.uc-steps li.reached { color: var(--ink); }
.uc-steps li.reached::before { background: var(--green); border-color: var(--green); }
.uc-steps li.branch::before { border-style: dashed; }
.result-card { position: relative; padding: 26px 28px; border-radius: 12px; background: var(--panel); overflow: hidden; }
.result-card h2 { font-size: 24px; }
.result-card p { font: 400 21px/1.42 var(--font-editorial); }
.stamp { position: absolute; right: 18px; top: 18px; display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border: 1.5px solid var(--green); border-radius: 4px; color: var(--green); font: 600 11px/1.4 var(--font-mono); letter-spacing: .08em; transform: rotate(-4deg); transition: transform 380ms var(--ease-signal) 900ms, opacity 200ms 900ms; }
.motion .result-card:not(.in) .stamp { transform: rotate(-4deg) scale(1.6); opacity: 0; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.kpi { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0 22px; }
.kpi svg { width: 26px; height: 26px; color: var(--green); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kpi h3 { font-size: 17px; }
.kpi p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.kpi .trend { display: inline-block; margin-left: 6px; color: var(--green); font-size: 13px; transform: translateY(4px); opacity: 0; transition: transform 500ms var(--ease-signal) 500ms, opacity 500ms 500ms; }
.kpi.in .trend { transform: none; opacity: 1; }
.uc-nav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; font-size: 14px; }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.form { padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf7; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { position: relative; margin-bottom: 14px; }
.field input, .field textarea { width: 100%; padding: 22px 14px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: 15px/1.5 var(--font-sans); color: var(--ink); resize: vertical; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field textarea { min-height: 150px; }
.field label { position: absolute; left: 15px; top: 15px; color: var(--muted); font-size: 15px; pointer-events: none; transform-origin: left top; transition: transform var(--t-fast) var(--ease-signal), color var(--t-fast); }
.field label small { color: var(--muted); font-size: 11px; margin-left: 6px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgb(35 75 56 / 12%); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-9px) scale(.78); color: var(--green); }
.field .trace-bar { position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-io); border-radius: 2px; }
.field input:focus ~ .trace-bar, .field textarea:focus ~ .trace-bar { transform: scaleX(1); }
.form .submit-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.send-state { font: 12px/1.4 var(--font-mono); color: var(--muted); min-height: 1.4em; }
.button[data-state="sending"] { pointer-events: none; }
.button[data-state="sending"] .lbl::after { content: "…"; }
.button .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; display: none; animation: spin 700ms linear infinite; }
.button[data-state="sending"] .spinner { display: inline-block; }
.button[data-state="sent"] { background: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
.form .fine { margin-top: 18px; font-size: 12px; color: var(--muted); }

/* ---------- prototype controls ---------- */
.proto-bar { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; gap: 8px; align-items: center; padding: 8px 10px 8px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 12px/1 var(--font-sans); box-shadow: 0 10px 30px rgb(0 0 0 / 22%); }
.proto-bar button { all: unset; cursor: pointer; padding: 7px 11px; border-radius: 999px; background: rgb(255 255 255 / 10%); }
.proto-bar button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.proto-bar button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ---------- reduced motion ---------- */
html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { animation: none !important; transition: none !important; }
html:not(.motion) [data-reveal], html:not(.motion) .lines .line > span { opacity: 1 !important; transform: none !important; }
html:not(.motion) .feature-media { clip-path: inset(0 round 14px) !important; }
html:not(.motion) .feature-media img, html:not(.motion) .launch-media img { transform: none !important; }
html:not(.motion) .scrub-text .w { opacity: 1 !important; }
html:not(.motion) .pulse { display: none; }
html:not(.motion) .brand-rest { display: none; }
html:not(.motion) .nav .symbol { width: .98em; opacity: 1; margin-right: 0; }
html:not(.motion) .nav .symbol path { transform: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero, .page-hero, .benefits-head, .mission-intro, .company, .sales, .launch, .cards-head, .loop, .uc-hero, .uc-grid, .contact-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .benefit-body, .home-cards, .pillars { grid-template-columns: 1fr 1fr; }
  .plc-vision { justify-self: start; }
  .launch-copy { padding: 0 28px; }
  .sales-action { justify-self: start; }
  .nav { flex-wrap: wrap; gap: 4px; }
  .nav-items { margin-left: 0; width: 100%; justify-content: space-between; font-size: 13px; }
}
@media (max-width: 700px) {
  :root { --gutter: 20px; }
  .section { padding-block: 72px; }
  .cards, .pillars, .home-cards, .value-grid, .offer-cols, .lifecycle-track, .kpis, .arch-env, .form .row { grid-template-columns: 1fr; }
  .hud, .hero-traces { display: none; }
  .nav-cta { padding: 4px 12px; }
  .nav-items { flex-wrap: wrap; font-size: 12px; gap: 0 10px; }
}

/* =========================================================
   USE-CASE PAGES v2 — narrative: stage → why → how (sticky story) → result/handoff → impact → CTA → related
   ========================================================= */
button.text-link { all: unset; position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 15px/1.4 var(--font-sans); cursor: pointer; }
button.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; }
button.text-link:hover { color: var(--green); }
button.text-link:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.uc-stage { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: center; padding-top: 48px; padding-bottom: 72px; }
.uc-stage .promise { margin-top: 22px; font: 400 clamp(22px, 2vw, 28px)/1.38 var(--font-editorial); max-width: 30ch; }

/* schematic */
.flow-card { margin: 0; padding: 22px 22px 14px; border-radius: 14px; background: var(--panel); }
.flow-card figcaption { margin-top: 6px; font: 11px/1.4 var(--font-mono); color: var(--muted); }
.flow { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.f-trace { fill: none; stroke: #b8c2ae; stroke-width: 1.5; }
.f-dash { stroke-dasharray: 5 5; }
.f-pulse { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .14 .86; stroke-dashoffset: .14; opacity: 0; }
.f-node rect { fill: #faf8f2; stroke: #c5cdb9; stroke-width: 1; transition: fill var(--t-med), stroke var(--t-med); }
.f-node text { font-size: 13px; font-weight: 500; fill: var(--ink); }
.f-core rect:first-child { fill: var(--green); stroke: var(--green); }
.f-core text { fill: var(--paper); font-size: 13px; }
.f-core .f-sub { fill: #b8c7ad; font-size: 10.5px; font-weight: 400; }
.f-sym path { fill: var(--paper); }
.f-ring { fill: none; stroke: var(--green); stroke-width: 1.5; opacity: 0; }
.f-led { fill: #dfe4d6; stroke: #9fb092; }
.f-check { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.f-exception rect { stroke-dasharray: 5 4; fill: transparent; stroke: #9fb092; }
.f-exception text { fill: var(--muted); }
.f-cap { font: 10.5px var(--font-mono); fill: var(--muted); letter-spacing: .04em; }
/* hero loop (6 s cycle: inputs → agent → result; exception lane pulses every other beat) */
.motion .run .f-in-p { animation: f-run 6s var(--ease-io) infinite; animation-delay: var(--d, 0s); }
.motion .run .f-out-p { animation: f-run 6s var(--ease-io) 2.2s infinite; }
.motion .run .f-ex-p { animation: f-run 12s var(--ease-io) 8.2s infinite; }
.motion .run .f-ring { animation: f-ring 6s ease-out 1.5s infinite; }
.motion .run .f-input .f-led { animation: f-led 6s steps(1) infinite; }
.motion .run .f-output rect { animation: f-done 6s ease 3s infinite; }
.motion .run .f-check { animation: f-check 6s var(--ease-io) 3.1s infinite; }
@keyframes f-run { 0% { stroke-dashoffset: .14; opacity: 0; } 4% { opacity: 1; } 26% { opacity: 1; } 32%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes f-ring { 0% { opacity: .9; transform: scale(1); } 30%, 100% { opacity: 0; transform: scale(1.08); } }
.f-ring { transform-box: fill-box; transform-origin: center; }
@keyframes f-led { 0%, 30% { fill: var(--green); stroke: var(--green); } 31%, 100% { fill: #dfe4d6; stroke: #9fb092; } }
@keyframes f-done { 0% { fill: #faf8f2; stroke: #c5cdb9; } 8%, 50% { fill: #e2ead8; stroke: var(--green); } 70%, 100% { fill: #faf8f2; stroke: #c5cdb9; } }
@keyframes f-check { 0% { stroke-dashoffset: 24; } 10%, 50% { stroke-dashoffset: 0; } 70%, 100% { stroke-dashoffset: 24; } }

/* why it matters — editorial statement band */
.uc-why { background: var(--green); color: var(--paper); }
.uc-why-inner { padding-top: 88px; padding-bottom: 96px; }
.uc-why .section-label { color: #b8c7ad; }
.uc-why-head { max-width: 22ch; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.035em; }
.uc-why-text { margin-top: 26px; max-width: 52ch; font-size: 19px; color: var(--mint); }

/* how it works — sticky scrollytelling */
.uc-how { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.story { list-style: none; margin: 0; padding: 0; }
.story li { border-top: 1px solid var(--line); }
.story button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 44px 1fr; gap: 14px; width: 100%; padding: 26px 0 26px; min-height: 22vh; align-items: start; cursor: pointer; color: var(--muted); font-size: 19px; line-height: 1.5; transition: color var(--t-med); }
.story button:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.story .sn { font: 500 13px/1.9 var(--font-mono); color: var(--muted); }
.story button.reached { color: #2f3d34; }
.story button.active { color: var(--ink); }
.story button.active .sn { color: var(--green); }
.story button.active span:last-child { box-shadow: inset 3px 0 0 var(--green); padding-left: 14px; margin-left: -14px; transition: padding var(--t-med) var(--ease-signal); }
.flow-card.sticky { position: sticky; top: 120px; }
[data-flow-steps] .f-node rect, [data-flow-steps] .f-trace { transition: fill var(--t-med), stroke var(--t-med), opacity var(--t-med); }
[data-flow-steps] .f-node { opacity: .38; transition: opacity var(--t-med); }
[data-flow-steps][data-stage="in"] .f-input,
[data-flow-steps][data-stage="core"] .f-input, [data-flow-steps][data-stage="core"] .f-core,
[data-flow-steps][data-stage="out"] .f-node { opacity: 1; }
[data-flow-steps][data-stage="in"] .f-input rect { stroke: var(--green); }
[data-flow-steps][data-stage="in"] .f-led { fill: var(--green); stroke: var(--green); }
[data-flow-steps][data-stage="out"] .f-output rect { fill: #e2ead8; stroke: var(--green); }
[data-flow-steps][data-stage="out"] .f-check { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease-io); }
.motion [data-flow-steps].run[data-stage="core"] .f-in-p { animation: f-run 3s var(--ease-io) infinite; animation-delay: var(--d, 0s); }
.motion [data-flow-steps].run[data-stage="core"] .f-ring { animation: f-ring 3s ease-out 1s infinite; }
.motion [data-flow-steps].run[data-stage="out"] .f-out-p { animation: f-run 3s var(--ease-io) infinite; }
.motion [data-flow-steps].run[data-stage="out"] .f-ex-p { animation: f-run 3s var(--ease-io) 1.5s infinite; }
[data-flow-steps].run .f-input .f-led, [data-flow-steps].run .f-output rect, [data-flow-steps].run .f-check { animation: none !important; }
.proof-card { display: grid; gap: 10px; margin-top: 34px; padding: 22px 24px; border-radius: 12px; background: var(--card); transition: transform var(--t-med) var(--ease-signal), box-shadow var(--t-med); }
.proof-card strong { font: 400 21px/1.4 var(--font-editorial); }
.proof-card .proof-link { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; color: var(--green); }
.proof-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgb(32 45 37 / 50%); }

/* result vs handoff */
.uc-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding-top: 24px; }
.uc-split h2 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 14px; }
.handoff-card { padding: 26px 28px; border-radius: 12px; border: 1.5px dashed #9fb092; }
.handoff-card p:last-child { color: var(--muted); }

/* impact */
.uc-impact-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; margin-bottom: 36px; }
.kpi-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi-tile { padding: 24px 22px; border-radius: 12px; background: var(--panel); }
.kpi-tile svg { width: 30px; height: 30px; color: var(--green); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kpi-tile h3 { margin-top: 18px; font-size: 18px; letter-spacing: -.01em; }
.kpi-tile p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.measure-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 44px; }
.measure-strip > div { padding-top: 22px; }
.measure-strip h3 { font: 400 22px/1.25 var(--font-editorial); margin-bottom: 10px; }
.measure-strip p { font-size: 15px; color: var(--muted); }

/* closing CTA with signal ring */
.uc-cta { position: relative; display: grid; place-items: center; min-height: 560px; padding: 64px var(--gutter); overflow: hidden; text-align: center; }
.cta-ring { position: absolute; width: min(520px, 92vw); height: auto; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 1; }
.ring-draw { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1800ms var(--ease-io); }
.motion .uc-cta:not(.in) .ring-draw { stroke-dashoffset: 1; }
.uc-cta-inner { position: relative; max-width: 420px; }
.uc-cta-inner h2 { font-size: clamp(32px, 3.4vw, 44px); }
.uc-cta-inner p:not(.section-label) { margin: 16px auto 26px; color: var(--muted); }
.uc-cta-inner .section-label { justify-content: center; }

/* related tiles */
.rel-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rel-tile { position: relative; display: grid; align-content: start; gap: 8px; min-height: 190px; padding: 24px 24px 56px; border-radius: 12px; background: var(--card); transition: transform var(--t-med) var(--ease-signal), box-shadow var(--t-med); }
.rel-tile span { font-size: 13px; }
.rel-tile strong { font: 400 23px/1.25 var(--font-editorial); }
.rel-tile .arrow { position: absolute; right: 22px; bottom: 22px; width: 22px; height: 22px; }
.rel-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgb(32 45 37 / 45%); }
.rel-tile.dark { background: var(--ink); color: var(--paper); }
.rel-tile.dark span { color: #b8c7ad; }

/* reduced motion: show the complete state */
html:not(.motion) .f-pulse, html:not(.motion) .f-ring { display: none; }
html:not(.motion) .f-check { stroke-dashoffset: 0; }
html:not(.motion) .f-output rect { fill: #e2ead8; stroke: var(--green); }
html:not(.motion) [data-flow-steps] .f-node { opacity: 1; }
html:not(.motion) .ring-draw { stroke-dashoffset: 0; }

@media (max-width: 1000px) {
  .uc-stage, .uc-how, .uc-split, .uc-impact-head { grid-template-columns: 1fr; }
  .kpi-tiles { grid-template-columns: 1fr 1fr; }
  .uc-how-visual:not(:has(.board)) { display: none; } /* the hero schematic carries the visual on small screens */
  .story button { min-height: 0; }
}
@media (max-width: 700px) {
  .kpi-tiles, .measure-strip, .rel-tiles { grid-template-columns: 1fr; }
  .uc-cta { min-height: 460px; }
}
.uc-how-visual { align-self: stretch; }
.f-node .f-ring { fill: none; stroke: var(--green); }
.result-card .section-label, .handoff-card .section-label { font: 500 13px/1.4 var(--font-sans); letter-spacing: .025em; }

/* ===== v3: multi-page, crawler-safe additions ===== */
/* Hero heading is visible at first paint. The subhead still fades in. Text stays visible without JS and with reduced motion. */
.lines .line { display: block; }
.motion .hero-in { animation: fade-rise 800ms var(--ease-signal) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
@keyframes line-rise { from { transform: translateY(105%); } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(12px); } }
.nav-items a[aria-current="page"]:not(.nav-cta) { position: relative; }
.cur { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--ink); view-transition-name: nav-current; }
::view-transition-group(nav-current) { animation-duration: 420ms; animation-timing-function: var(--ease-signal); }
.nav { view-transition-name: site-nav; }
.benefit .row-link .arrow { transition: transform var(--t-fast) var(--ease-signal); }
.benefit:hover .row-link .arrow { transform: translateX(3px); }
/* footer columns */
.footer-top { align-items: flex-start; }
.footer-col { display: flex; flex-direction: column; font-size: 13px; }
.footer-col a { min-height: 44px; }
.footer-h { margin: 0 0 6px; color: #b8c7ad; font-size: 12px; font-weight: 500; letter-spacing: .04em; }
/* breadcrumb */
.crumbs { padding-top: 32px; font-size: 13px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
/* direct answer: static, never animated (it is the paragraph answer engines quote) */
.direct-answer { margin-top: 22px; max-width: 58ch; font: 400 19px/1.5 var(--font-editorial); color: var(--ink); }
/* FAQ: plain h3 + p, visible */
.uc-faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 88px); align-items: start; border-top: 1px solid var(--line); }
.uc-faq .h2 { font-size: clamp(30px, 3vw, 40px); }
.faq-note { margin-top: 16px; font-size: 13px; }
.faq-item { padding: 22px 0; border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item h3 { font-size: 19px; letter-spacing: -.01em; }
.faq-item p { margin-top: 8px; color: var(--muted); font-size: 16px; }
/* 404 */
.nf { align-items: center; min-height: 60vh; }
.nf-trace { width: 100%; height: auto; }
.nf-spark { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.motion .nf-spark { animation: spark 1.6s steps(2) infinite; }
@keyframes spark { 50% { opacity: .2; } }
.motion .nf .pulse { animation: pulse-run 2.6s var(--ease-io) infinite; }
@media (max-width: 1000px) { .uc-faq { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .footer-top { flex-direction: column; } }

/* ===== v3: use-case long-form template (900–1,500 words, /de/-ready) ===== */
.uc-page section[id] { scroll-margin-top: calc(var(--nav-h, 88px) + 64px); }
.uc-h1 { font-size: clamp(44px, 5vw, 72px); overflow-wrap: break-word; }
:lang(de) .h1, :lang(de) .h2, :lang(de) .uc-why-head { hyphens: auto; }
.uc-stage .section-label { max-width: 52ch; }
/* sticky in-page nav + reading progress */
.toc { position: sticky; top: var(--nav-h, 88px); z-index: 30; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-block: 1px solid var(--line); }
.toc-inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.toc-inner a { flex: none; padding: 13px 12px; font-size: 13px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-med) var(--ease-signal); }
.toc-inner a:hover { color: var(--ink); }
.toc-inner a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--green); }
.toc-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--green); transform-origin: left; transform: scaleX(var(--toc-p, 0)); }
/* problem band additions */
.uc-why-text + .uc-why-text { margin-top: 14px; }
/* 3. how the agent solves it: readable measure */
.uc-solve { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.uc-solve-head .h2 { max-width: 14ch; }
.prose { max-width: 66ch; font-size: 18px; line-height: 1.65; }
.prose h3 { margin-top: 34px; font-size: 20px; letter-spacing: -.01em; }
.prose p { margin-top: 10px; color: #3a463e; }
.solve-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.solve-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-top: 1px solid var(--line); }
.solve-steps li::before { content: counter(s, decimal-leading-zero); font: 500 13px/2 var(--font-mono); color: var(--green); }
.uc-solve .uc-impact { grid-column: 1 / -1; margin-top: 24px; }
.measure-h { margin: 56px 0 18px; }
/* 4. worked example: scroll-linked walkthrough, every word in the HTML */
.walk { list-style: none; margin: 0; padding: 0; }
.walk-step { padding: 28px 0 32px 20px; border-top: 1px solid var(--line); box-shadow: inset 2px 0 0 transparent; transition: box-shadow var(--t-med) var(--ease-signal), color var(--t-med); }
.walk-step h3 { font-size: 24px; letter-spacing: -.015em; margin: 6px 0 10px; }
.walk-step p { max-width: 60ch; margin-top: 8px; font-size: 17px; line-height: 1.6; }
.walk-n { font: 500 12px/1.6 var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.walk-lead { font-size: 20px !important; line-height: 1.45 !important; }
.walk-step.active { box-shadow: inset 2px 0 0 var(--green); }
.walk-step.active .walk-n { color: var(--green); }
.motion .walk-step:not(.active) { color: #6c766e; }
@media (min-width: 1001px) { .walk-step { min-height: 46vh; } }
.sticky { position: sticky; top: calc(var(--nav-h, 88px) + 72px); }
/* diagnosis board */
.board { margin: 0; padding: 22px 22px 16px; border: 1px solid var(--line); border-radius: 12px; background: #faf8f2; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgb(32 45 37 / 35%); font-size: 14px; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.board-head .section-label { margin: 0; font-size: 11px; }
.board-state { flex: none; padding: 3px 10px; border-radius: 99px; background: var(--card); font: 500 11px/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.board-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #9b7b3c; vertical-align: 1px; }
.board [data-part] { transition: opacity 500ms var(--ease-signal), filter 500ms; }
.board-seq { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.board-seq li { display: grid; grid-template-columns: 74px 128px 1fr; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--panel); }
.board-seq time { font: 500 12px/1.6 var(--font-mono); color: var(--green); }
.board-seq span { color: var(--muted); }
.board-q { font-weight: 500; margin-bottom: 8px; }
.board table { width: 100%; border-collapse: collapse; }
.board th, .board td { padding: 8px 6px; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
.board td { text-align: right; font: 500 12px/1.6 var(--font-mono); white-space: nowrap; }
.board code { display: block; font: 11px/1.5 var(--font-mono); color: var(--muted); }
.board td.ok { color: var(--green); }
.board td.no { color: var(--ink); }
.board tr.blk th, .board tr.blk td { background: var(--card); }
.board tr.sum th { font-weight: 500; }
.board-code { margin: 12px 0 6px; padding: 12px 14px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 12px/1.55 var(--font-mono); overflow-x: auto; }
.board-code mark { background: #b8c7ad; color: var(--ink); padding: 0 3px; border-radius: 2px; }
.board-src { font: 11px/1.5 var(--font-mono); color: var(--muted); }
.board-case { margin-top: 16px; padding: 16px 18px; border-radius: 10px; background: var(--green); color: var(--paper); }
.board-case .section-label { margin: 0 0 6px; color: #b8c7ad; font-size: 11px; }
.board-verdict { font: 400 22px/1.25 var(--font-editorial); }
.board figcaption { margin-top: 12px; font: 11px/1.4 var(--font-mono); color: var(--muted); }
.motion .board[data-stage="0"] [data-part="1"], .motion .board[data-stage="0"] [data-part="2"], .motion .board[data-stage="1"] [data-part="2"] { opacity: .32; filter: grayscale(1); }
.motion .board[data-stage="1"] .board-cond tbody tr { animation: fade-rise 500ms var(--ease-signal) both; }
.motion .board[data-stage="1"] .board-cond tbody tr:nth-child(2) { animation-delay: 160ms; }
.motion .board[data-stage="1"] .board-cond tbody tr:nth-child(3) { animation-delay: 320ms; }
.motion .board[data-stage="1"] .board-cond tbody tr:nth-child(4) { animation-delay: 520ms; }
.motion .board[data-stage="2"] .board-case { animation: case-in 600ms var(--ease-signal) both; }
@keyframes case-in { from { transform: translateY(8px); box-shadow: 0 0 0 0 rgb(35 75 56 / 40%); } 60% { box-shadow: 0 0 0 8px rgb(35 75 56 / 0%); } }
/* 5. trust & safety */
.trust-h2 { max-width: 24ch; margin-bottom: 36px; }
.trust-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; align-items: stretch; }
.trust-grid h3 { font-size: 21px; letter-spacing: -.01em; margin-bottom: 10px; }
.trust-grid p + p { margin-top: 10px; }
.trust-grid p { font-size: 16px; line-height: 1.6; }
.env-card { padding: 26px 28px; border-radius: 12px; background: var(--card); }
.env-card .text-link { display: inline-flex; margin-top: 14px; font-size: 14px; }
/* placeholders: clearly marked, never shipped */
.ph { margin-top: 22px; max-width: 62ch; padding: 14px 16px; border: 1.5px dashed var(--card-line, #c9c4b8); border-radius: 8px; background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(201 196 184 / 18%) 10px 20px); }
.ph-tag { display: inline-block; margin-bottom: 6px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #8a6a2e; }
.ph p { font-size: 15px; color: var(--muted); margin: 0; }
.uc-why .ph { border-color: #8fa18e; background: rgb(255 255 255 / 4%); }
.uc-why .ph p, .uc-why .ph-tag { color: var(--mint); }
.uc-related { padding-bottom: 24px; }
@media (max-width: 1000px) {
  .uc-solve, .trust-grid { grid-template-columns: 1fr; }
  .uc-how-visual .board { position: static; }
  .board-seq li { grid-template-columns: 70px 1fr; } .board-seq li span { grid-column: 2; }
}
.board .board-code code { display: inline; font: inherit; color: var(--paper); }
body:has([data-toc]) .nav-progress i { display: none; }

/* ===== v4: brief-driven content ===== */
/* "to confirm" highlight: visible in the demo, text unchanged for crawlers and JSON-LD */
mark.tbc { background: linear-gradient(transparent 58%, rgb(214 178 92 / 38%) 58%); color: inherit; padding: 0 1px; border-bottom: 1px dashed #a07d2c; cursor: help; }
mark.tbc::after { content: "to confirm"; display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; background: #efe2bf; color: #6d5313; font: 500 10px/1.7 var(--font-mono); letter-spacing: .04em; vertical-align: 2px; white-space: nowrap; }
.uc-why mark.tbc, .board-case mark.tbc, .footer mark.tbc { background: linear-gradient(transparent 58%, rgb(214 178 92 / 30%) 58%); }
/* use-case page */
.uc-sub { margin-top: 16px; font: 400 clamp(20px, 1.8vw, 24px)/1.35 var(--font-editorial); color: var(--muted); max-width: 40ch; }
.direct-answer { font: 400 18px/1.6 var(--font-sans); max-width: 60ch; padding-left: 16px; border-left: 2px solid var(--green); }
.uc-why-head { font-size: clamp(32px, 3.6vw, 52px); max-width: 24ch; margin-bottom: 26px; }
.prose-dark .uc-why-text { max-width: 64ch; font-size: 18px; line-height: 1.65; }
.prose-dark .uc-why-text a, .solve-steps.on-dark a { text-decoration: underline; text-underline-offset: 3px; }
.solve-steps.on-dark { margin-top: 28px; max-width: 900px; }
.solve-steps.on-dark li { border-top-color: rgb(224 231 217 / 22%); }
.solve-steps.on-dark li::before { color: #b8c7ad; }
.solve-steps.on-dark p { color: var(--mint); }
.solve-steps li > div h3 { font-size: 18px; letter-spacing: -.01em; }
.solve-steps li > div p { margin-top: 4px; font-size: 16px; color: var(--muted); }
.solve-steps li a { text-decoration: underline; text-underline-offset: 3px; }
.uc-solve { display: block; }
.how-block { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.how-block + .how-block { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--line); }
.how-h2 { font-size: clamp(30px, 3.2vw, 44px); max-width: 16ch; }
.how-after { margin-top: 24px; font-size: 16px; }
.how-after a, .prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.ex-h2 { font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 14px; }
.ex-label { margin-bottom: 28px; font: 12px/1.5 var(--font-mono); color: var(--muted); max-width: 60ch; }
.team-list { margin: 0; padding-left: 18px; }
.team-list li { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.uc-impact { padding-top: 40px; }
.board caption { caption-side: top; text-align: left; padding: 10px 0 4px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.board thead th { font: 500 11px/1.4 var(--font-mono); color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.board thead ~ tbody td { text-align: left; white-space: normal; font: 400 13px/1.45 var(--font-sans); }
.board thead ~ tbody td.ok, .board thead ~ tbody td.no { font-weight: 500; }
.board table + table { margin-top: 10px; }
.board-src-l { margin-top: 8px; font: 11px/1.5 var(--font-mono); color: #b8c7ad; }
.motion .board[data-stage="0"] [data-part="1"], .motion .board[data-stage="0"] [data-part="2"], .motion .board[data-stage="1"] [data-part="2"] { opacity: .32; filter: grayscale(1); }
/* home additions */
.hero-head { display: grid; gap: 0; }
.hero-eyebrow { margin-bottom: 22px; color: var(--green); }
.define { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 88px); padding-block: 8px 72px; }
.define-h2 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1.15; max-width: 16ch; }
.define-p { font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--font-editorial); max-width: 56ch; margin-bottom: 12px; }
.row-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.prereg { margin: 28px 0 8px; }
.pillar-link { display: inline-block; margin-top: 8px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.control { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.control-list { margin: 24px 0 0; padding: 0; list-style: none; max-width: 70ch; }
.control-list li { padding: 14px 0 14px 28px; border-top: 1px solid var(--line); position: relative; }
.control-list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 2px; background: var(--green); }
.control-list a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.about-add { margin-top: 18px; font-size: 15px; color: var(--muted); }
.about-add a, .faq-item a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .how-block, .define, .control { grid-template-columns: 1fr; }
  .control { gap: 0; }
}
.solve-steps li::before { grid-column: 1; grid-row: 1; }
.solve-steps li > div { grid-column: 2; grid-row: 1; min-width: 0; }
.control { align-items: start; }

/* Production additions: consent banner, contact states, copy-fix layout. */
.hero-description { max-width: 42ch; }
.scope-line { margin: 18px 0 0; max-width: 70ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
body[data-page="home"] .hero { padding-top: 120px; padding-bottom: 132px; }
body[data-page="home"] .section { padding-block: 128px; }
body[data-page="home"] .define { padding-top: 24px; }
.home-card h3 { margin: 18px 0 12px; font: 400 clamp(26px, 2vw, 32px)/1.15 var(--font-editorial); letter-spacing: -.025em; }
.home-card p { max-width: 24ch; color: var(--muted); font-size: 16px; line-height: 1.45; }
.home-card a { display: inline; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.home-faq details.faq-item > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 19px; letter-spacing: -.01em; }
.home-faq details.faq-item > summary::-webkit-details-marker { display: none; }
.practice-notes { display: grid; gap: 14px; max-width: 68ch; margin-top: 56px; color: var(--muted); }
@media (max-width: 700px) {
  body[data-page="home"] .section { padding-block: 80px; }
  body[data-page="home"] .hero { padding-top: 72px; padding-bottom: 80px; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-turnstile { min-height: 65px; }
.form .button[disabled] { opacity: .68; cursor: not-allowed; }
.form .button[disabled]::before, .form .button[disabled]::after { display: none; }
.contact-form-status[hidden] { display: none; }
.contact-form-status { margin: 0; }
.contact-form-status[data-state="success"] { color: var(--green); }
.contact-form-status[data-state="error"] { color: #6f241f; }
.contact-fallback a, .contact-processing a { text-decoration: underline; text-underline-offset: 4px; }
.ia-consent-banner, .ia-consent-banner * { box-sizing: border-box; }
.ia-consent-banner { position: fixed; left: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); bottom: clamp(10px, 2vw, 24px); z-index: 100; color: #192d23; font: 400 15px/1.55 var(--font-sans); }
.ia-consent-banner[hidden] { display: none; }
.ia-consent-inner { max-width: 1120px; max-height: calc(100svh - 48px); overflow: auto; margin: 0 auto; padding: 22px; background: #fffdf7; border: 1px solid #cdd4c8; border-radius: 8px; box-shadow: 0 18px 44px rgba(25, 45, 35, .18); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr); gap: 20px; }
.ia-consent-kicker { margin: 0 0 5px; color: #526459; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ia-consent-copy h2 { margin: 0 0 9px; font: 500 26px/1.15 var(--font-sans); letter-spacing: -.015em; }
.ia-consent-copy h2:focus { outline: 3px solid #234b38; outline-offset: 5px; }
.ia-consent-copy p { margin: 0; max-width: 72ch; }
.ia-consent-copy p + p { margin-top: 9px; }
.ia-consent-copy a { color: #234b38; text-decoration: underline; text-underline-offset: 4px; }
.ia-consent-gpc, .ia-consent-status { color: #526459; font-size: 13px; }
.ia-consent-actions, .ia-consent-settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.ia-consent-actions[hidden], .ia-consent-settings[hidden] { display: none; }
.ia-consent-banner button { min-height: 46px; border-radius: 4px; padding: 11px 15px; font: 500 14px/1.35 var(--font-sans); cursor: pointer; }
.ia-consent-banner button:focus-visible { outline: 3px solid #234b38; outline-offset: 4px; }
.ia-consent-primary, .ia-consent-secondary { border: 1px solid #234b38; background: #234b38; color: #fff; }
.ia-consent-link, .ia-consent-language { border: 1px solid #cdd4c8; background: #efeee8; color: #192d23; }
.ia-consent-settings { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; border-top: 1px solid #cdd4c8; padding-top: 18px; }
.ia-consent-setting { padding-top: 12px; border-top: 1px solid #dde4d5; }
.ia-consent-setting label { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.ia-consent-setting input { width: 18px; height: 18px; accent-color: #234b38; }
.ia-consent-setting p { margin: 8px 0 0; color: #526459; font-size: 13px; line-height: 1.55; }
.ia-consent-setting-locked input { opacity: .7; }
@media (max-width: 700px) {
  .ia-consent-inner { grid-template-columns: 1fr; max-height: calc(100svh - 28px); padding: 18px; }
  .ia-consent-actions, .ia-consent-settings-actions, .ia-consent-settings { grid-template-columns: 1fr; }
}
html.motion .ia-consent-banner { animation: consent-in var(--t-med) var(--ease-signal) both; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }