.hero { position: relative; padding-block: 56px 88px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 70% at 78% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 40%, #000 20%, transparent 75%); opacity: .7; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.h1-soft { color: var(--soft-head); }
.role { margin-top: 10px; }
.role-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--sunk); border-radius: var(--pill); flex-wrap: wrap; }
.role-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: var(--pill); padding: 10px 16px; min-height: 44px; font: 500 .92rem var(--font); color: var(--muted); cursor: pointer; transition: background .18s, color .18s; }
.role-tabs button svg { width: 17px; height: 17px; }
.role-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(var(--shadow) / .08), 0 4px 12px rgb(var(--shadow) / .06); }
.role-tabs button[aria-selected="true"] svg { color: var(--cu); }
.role-panel { margin-top: 12px; }
.ask { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: 0 1px 2px rgb(var(--shadow) / .05), 0 18px 44px rgb(var(--shadow) / .08); display: grid; gap: 10px; transition: border-color .2s; }
.ask:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-ring), 0 18px 44px rgb(var(--shadow) / .08); }
.ask-label { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.ask textarea { border: 0; outline: 0; resize: none; font: 400 1.08rem/1.5 var(--font); color: var(--ink); background: transparent; padding: 0; min-height: 3.2em; }
.ask textarea::placeholder, .ask-row input::placeholder { color: var(--placeholder); opacity: 1; }
.ask-detect { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; color: var(--muted); }
.tag { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px; background: var(--cu-wash); color: var(--cu-ink); font-size: .82rem; font-weight: 500; animation: pop .25s var(--ease); }
.tag-line { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
@keyframes pop { from { transform: scale(.94); opacity: .4; } }
.ask-row { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.ask-row input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: var(--pill); padding: 0 18px; font: 400 .98rem var(--font); background: var(--paper); color: var(--ink); min-height: 50px; }
.ask-row input:focus { outline: 0; border-color: var(--ink); background: var(--surface); }
.role-alt { margin-top: 12px; font-size: .88rem; color: var(--muted); }
.role-alt a { color: var(--ink); text-underline-offset: 3px; }
.role-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 14px; box-shadow: 0 18px 44px rgb(var(--shadow) / .08); }
.role-card-h { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.4; }
.role-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: .95rem; }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: var(--cu) var(--tick) center / 10px no-repeat; }
.on-dark .ticks { color: #d6d1cb; }
.pool { margin: 0; position: relative; background: var(--night); border-radius: 28px; padding: 18px 18px 0; color: #f3f1ee; box-shadow: 0 40px 80px rgb(14 12 11 / .25); }
.pool-cap { display: flex; justify-content: space-between; gap: 10px; color: var(--night-muted); padding: 4px 6px 0; }
.pool-svg { width: 100%; height: auto; display: block; overflow: visible; }
.p-orbit { fill: none; stroke: var(--night-line); stroke-width: 1; stroke-dasharray: 2 6; }
.p-orbit-2 { stroke-dasharray: none; opacity: .5; }
.p-lines line { stroke: var(--night-line); stroke-width: 1.2; }
.p-pulse { fill: var(--cu-hi); filter: drop-shadow(0 0 6px rgb(217 146 79 / .9)); }
.p-node { cursor: pointer; outline: none; }
.p-node circle { fill: var(--night-2); stroke: var(--night-line); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.p-node:hover circle, .p-node:focus-visible circle { stroke: var(--cu-hi); }
.p-node.is-active circle { fill: var(--night-3); stroke: var(--cu); stroke-width: 2; }
.p-label { fill: #f3f1ee; font: 600 13px var(--font); letter-spacing: -.01em; pointer-events: none; }
.p-sub { fill: var(--night-muted); font: 400 10px var(--mono); pointer-events: none; }
.p-trade .p-label { font-size: 12px; font-weight: 500; }
.p-hub circle { fill: var(--cu); stroke: var(--cu-hi); }
.p-hub.is-active circle { fill: var(--cu); stroke: #fff; }
.p-hub .p-label { fill: var(--night); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.p-hub .p-sub { fill: #1f1106; }
.p-hub .p-hub-sub { font-weight: 600; letter-spacing: .12em; }
.pool-info { margin: 0 -18px; padding: 16px 24px 20px; border-top: 1px solid var(--night-line); display: grid; gap: 4px; min-height: 96px; }
.pool-info b { font-weight: 600; }
.pool-info span { color: var(--night-muted); font-size: .92rem; }
.sec-tight { padding-block: 96px; }
.define { display: grid; gap: 18px; max-width: 900px; }
.define h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.define-plain { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; padding: 18px 20px; border-left: 3px solid var(--cu); background: var(--surface); border-radius: 0 12px 12px 0; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--ink); }
.pillar { padding: 28px 28px 8px 0; display: grid; gap: 10px; align-content: start; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--line); }
.pillar-n { color: var(--cu-ink); }
.pillar h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.pillar p { color: var(--muted); }
.flow-ctl { display: flex; gap: 8px; }
.flow-ctl svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.flow { display: grid; gap: 28px; }
.flow-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; position: relative; }
.flow-rail::before, .flow-rail::after { content: ""; position: absolute; top: 15px; left: 15px; height: 2px; }
.flow-rail::before { right: 15px; background: var(--night-line); }
.flow-rail::after { width: calc((100% - 30px) * var(--p, 0)); background: var(--cu); transition: width .5s var(--ease); }
.flow-rail button { position: relative; z-index: 1; display: grid; justify-items: start; gap: 12px; border: 0; background: none; color: var(--night-muted); padding: 0 8px 0 0; font: 500 .9rem/1.25 var(--font); text-align: left; cursor: pointer; width: 100%; min-height: 44px; }
.flow-rail button .mono { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--night); border: 1.5px solid var(--night-line); color: var(--night-muted); font-size: .72rem; transition: all .25s var(--ease); }
.flow-rail button:hover { color: #fff; }
.flow-rail button.is-done .mono { border-color: var(--cu); color: var(--cu-hi); }
.flow-rail button[aria-selected="true"] { color: #fff; }
.flow-rail button[aria-selected="true"] .mono { background: var(--cu); border-color: var(--cu); color: var(--night); transform: scale(1.12); }
.flow-stage { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-lg); padding: 30px; display: grid; gap: 22px; min-height: 280px; }
.fs-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.fs-head h3 { font-size: 1.8rem; letter-spacing: -.03em; display: grid; gap: 6px; }
.fs-head h3 .mono { color: var(--night-muted); font-weight: 400; }
.fs-states { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fs-states > .mono { color: var(--night-muted); margin-right: 6px; }
.fs-state { padding: 6px 12px; border-radius: 6px; background: var(--night-3); border: 1px solid var(--night-line); font-size: .86rem; animation: pop .35s var(--ease) both; animation-delay: calc(var(--d) * 90ms); }
.fs-state:last-of-type { border-color: var(--cu); color: var(--cu-hi); }
.fs-arrow { color: var(--night-muted); }
.fs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--night-line); }
.fs-cols > div { padding: 18px 20px 0 0; display: grid; gap: 6px; align-content: start; }
.fs-cols > div + div { padding-left: 20px; border-left: 1px solid var(--night-line); }
.fs-cols .mono { color: var(--cu-hi); }
.fs-cols p { color: #d6d1cb; }
.fineprint { margin-top: 16px; font: 400 .78rem var(--mono); color: var(--night-muted); }
.paths3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.path { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; min-height: 340px; }
.path:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 24px 48px rgb(var(--shadow) / .08); }
.path-for { color: var(--cu-ink); }
.path h3 { font-size: 1.55rem; letter-spacing: -.03em; line-height: 1.12; }
.path ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: .95rem; }
.path li { padding-left: 16px; position: relative; }
.path li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--cu); }
.path-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.path-go svg { transition: transform .2s var(--ease); }
.path:hover .path-go svg { transform: translateX(4px); }
.sys > *, .hero-grid > *, .sub-hero-grid > * { min-width: 0; }
.sys { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.sys-copy { display: grid; gap: 22px; align-content: start; }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.sys-copy .btn { justify-self: start; }
.screen { background: var(--night); border-radius: 22px; padding: 10px; box-shadow: 0 40px 80px rgb(14 12 11 / .22); }
.screen-tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.screen-tabs button { border: 0; background: transparent; color: var(--night-muted); padding: 10px 14px; border-radius: 10px; font: 500 .86rem var(--font); cursor: pointer; white-space: nowrap; min-height: 40px; }
.screen-tabs button[aria-selected="true"] { background: var(--night-3); color: #fff; }
.screen-body { position: relative; background: var(--surface); border-radius: 14px; padding: 20px; min-height: 330px; margin-top: 6px; }
.ui-status { position: absolute; right: 16px; bottom: 16px; }
.ui { display: grid; gap: 14px; font-size: .9rem; animation: pop .3s var(--ease); }
.ui-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ui-top b { font-weight: 600; }
.ui-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font: 400 .78rem var(--mono); }
.ui-pill { font: 500 .72rem var(--mono); padding: 5px 9px; border-radius: 6px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.ui-pill.is-cu { background: var(--cu-wash); color: var(--cu-ink); }
.ui-pill.is-ok { background: var(--ok-wash); color: var(--ok); }
.ui-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ui-row { display: grid; grid-template-columns: 2.2fr .6fr .8fr .9fr; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ui-row:first-child { border-top: 0; background: var(--sunk); font: 500 .72rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ui-row span:last-child { text-align: right; }
.ui-list { display: grid; gap: 8px; }
.ui-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.ui-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: .84rem; padding-right: 110px; }
.ui-btn { background: var(--ink); color: var(--on-ink); padding: 9px 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; white-space: nowrap; }
.ui-btn-sm { padding: 7px 12px; font-size: .78rem; }
.ui-btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.ui-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 40px; }
.ui-tiles span { padding: 12px; border-radius: 10px; background: var(--sunk); font-size: .84rem; }
.screen-note { color: var(--night-muted); padding: 10px 8px 4px; }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.principle { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.principle p { color: var(--muted); font-size: .94rem; }
.principle .status { margin-top: auto; align-self: flex-start; }
.seg-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); }
.seg-filter button { border: 0; background: transparent; border-radius: var(--pill); padding: 9px 16px; min-height: 40px; font: 400 .9rem var(--font); color: var(--ink-2); cursor: pointer; }
.seg-filter button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.cases { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.case { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.case:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgb(var(--shadow) / .1); }
.case img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.case:hover img { filter: none; }
.case-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.case-body .mono { color: var(--muted); }
.case-body h3 { font-size: 1.05rem; }
.case-body p { color: var(--muted); font-size: .9rem; }
.case-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 500; }
.case-go svg { width: 16px; height: 16px; }
.case-lead { grid-column: span 2; grid-row: span 2; }
.case-lead img { aspect-ratio: auto; flex: 1; min-height: 300px; height: 100%; }
.case-lead h3 { font-size: 1.55rem; letter-spacing: -.025em; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.q { margin: 0; padding: 24px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.q-type { color: var(--cu-ink); }
.q blockquote { margin: 0; font-size: 1rem; line-height: 1.55; }
.q figcaption { margin-top: auto; display: grid; font-size: .86rem; }
.q figcaption span { color: var(--muted); }
.final { background: var(--night); color: #f3f1ee; }
.final-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
.final h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.final-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.mdock { display: none; }
.dlg-h { font-size: 1.7rem; margin-top: 6px; }
.dlg-step { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; }
.detect { background: var(--cu-wash); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; font-size: .9rem; }
.detect .mono { color: var(--cu-ink); }
.detect span:not(.mono) { color: var(--muted); font-size: .8rem; }
.detect small { color: var(--muted); font-size: .78rem; }
.link-btn { justify-self: start; border: 0; background: none; padding: 6px 0; font: 500 .88rem var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.chips-scroll { max-height: 220px; overflow: auto; padding: 2px; }
.seg4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: var(--sunk); border-radius: 14px; }
.seg4 label { position: relative; }
.seg4 input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg4 span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; font-size: .86rem; color: var(--muted); }
.seg4 input:checked + span { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 3px rgb(var(--shadow) / .1); }
.seg4 input:focus-visible + span { outline: 2.5px solid var(--cu); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub-hero { padding-block: 72px 80px; position: relative; overflow: hidden; }
.sub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.sub-hero .hero-copy { gap: 20px; }
.sub-hero h1 { font-size: clamp(2.3rem, 4.4vw, 4rem); }
.sub-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-dark { background: var(--night); color: #f3f1ee; border-radius: 26px; padding: 28px; display: grid; gap: 16px; }
.panel-dark h3 { font-size: 1.3rem; }
.panel-list { list-style: none; margin: 0; padding: 0; display: grid; }
.panel-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--night-line); font-size: .95rem; }
.panel-list li:first-child { border-top: 0; }
.panel-list li::before { content: "→"; color: var(--cu-hi); margin-right: 10px; }
.panel-list li { justify-content: flex-start; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.benefit { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.benefit:not(:nth-child(3n + 1)) { padding-left: 26px; border-left: 1px solid var(--line); }
.benefit p { color: var(--muted); font-size: .95rem; }
.benefit .mono { color: var(--cu-ink); }
.steps-h { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.steps-h li { counter-increment: s; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.steps-h li::before { content: counter(s, decimal-leading-zero); font: 500 .8rem var(--mono); color: var(--cu-ink); }
.steps-h p { color: var(--muted); font-size: .94rem; }
.calc-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 40px; }
.calc-band dl { margin: 0; display: grid; }
.calc-band dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.calc-band dt { color: var(--muted); font-size: .9rem; }
.calc-band dd { margin: 0; }
.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
.mod { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 12px; align-content: start; }
.mod h3 { font-size: 1.1rem; color: #fff; }
.mod ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mod li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--night-line); font-size: .9rem; color: #d6d1cb; }
.vision-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vision-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: var(--r); }
.compare-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.compare-roles article { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 10px; align-content: start; }
.compare-roles .mono { color: var(--cu-ink); }
.compare-roles p { color: var(--muted); font-size: .94rem; }
.note-box { padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.note-box b { font-weight: 600; }
.on-dark .note-box { background: var(--night-2); border-color: var(--night-line); color: #d6d1cb; }
.faq-d { max-width: 860px; border-top: 1px solid var(--line); }
.faq-d details { border-bottom: 1px solid var(--line); }
.faq-d summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-weight: 500; font-size: 1.05rem; position: relative; }
.faq-d summary::-webkit-details-marker { display: none; }
.faq-d summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 300; color: var(--cu-ink); transition: transform .2s var(--ease); }
.faq-d details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-d details p { color: var(--ink-2); padding-bottom: 22px; max-width: 64ch; }
.mod-light { background: var(--surface); border-color: var(--line); }
.mod-light h3 { color: var(--ink); }
.mod-light li { color: var(--ink-2); border-top-color: var(--line); }
@media (max-width: 1180px) {
  .hero-grid, .sub-hero-grid, .sys, .final-grid, .calc-band { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pool { max-width: 620px; }
  .paths3, .compare-roles { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr 1fr; }
  .cases { grid-template-columns: 1fr 1fr; }
  .case-lead { grid-column: span 2; grid-row: auto; }
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefit:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .benefit:nth-child(even) { padding-left: 26px; border-left: 1px solid var(--line); }
  .steps-h { grid-template-columns: 1fr 1fr; }
  .final-cta { justify-content: flex-start; }
  .flow-rail { grid-template-columns: repeat(7, minmax(92px, 1fr)); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
}
@media (max-width: 720px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .hero { padding-block: 26px 56px; }
  .hero::before { display: none; }
  .hero-copy { gap: 16px; }
  .role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 16px; }
  .role-tabs button { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: .78rem; border-radius: 12px; text-align: center; line-height: 1.2; }
  .ask { padding: 14px; }
  .ask-row { flex-direction: column; }
  .ask-row .btn { width: 100%; }
  .pool { border-radius: 22px; padding: 12px 10px 0; }
  .pool-info { margin: 0 -10px; padding: 14px 16px 18px; }
  .pillars { grid-template-columns: 1fr; margin-top: 36px; }
  .pillar, .pillar + .pillar { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .flow-rail { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -18px; padding-inline: 18px; }
  .flow-rail li { flex: 0 0 104px; scroll-snap-align: start; }
  .flow-stage { padding: 20px; min-height: 0; }
  .fs-head h3 { font-size: 1.4rem; }
  .fs-cols { grid-template-columns: 1fr; }
  .fs-cols > div, .fs-cols > div + div { padding: 14px 0 0; border-left: 0; }
  .fs-cols > div + div { border-top: 1px solid var(--night-line); margin-top: 14px; }
  .paths3, .compare-roles { grid-template-columns: 1fr; }
  .path { min-height: 0; padding: 22px; }
  .screen-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .screen-tabs button { white-space: normal; text-align: center; }
  .screen-body { padding: 14px; min-height: 0; }
  .ui-row { grid-template-columns: 1.6fr .5fr .6fr .9fr; font-size: .8rem; gap: 4px; padding: 9px 10px; }
  .ui-foot { padding-right: 0; flex-direction: column; align-items: flex-start; }
  .ui-status { position: static; margin-bottom: 10px; }
  .ui-tiles { grid-template-columns: 1fr 1fr; padding-bottom: 0; }
  .principles { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .case-lead { grid-column: auto; }
  .case { flex-direction: row; }
  .case img { width: 112px; aspect-ratio: auto; height: auto; object-fit: cover; }
  .case-lead { flex-direction: column; }
  .case-lead img { width: 100%; aspect-ratio: 16 / 10; }
  .case-body { padding: 14px 16px; }
  .quotes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -18px; padding-inline: 18px; scrollbar-width: none; }
  .q { flex: 0 0 85%; scroll-snap-align: start; }
  .final-cta .btn { flex: 1; }
  .sub-hero { padding-block: 28px 56px; }
  .benefits { grid-template-columns: 1fr; }
  .benefit, .benefit:nth-child(even) { padding: 20px 0; border-left: 0; }
  .steps-h { grid-template-columns: 1fr; }
  .calc-band { padding: 24px 20px; border-radius: 22px; }
  .calc-band dl div { grid-template-columns: 110px 1fr; }
  .vision-list { grid-template-columns: 1fr; }
  .seg-filter { width: 100%; justify-content: space-between; }
  .seg-filter button { padding: 8px 10px; font-size: .84rem; }
  .seg4 { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: 1fr; }
  .mdock { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgb(14 12 11 / .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); transition: transform .25s var(--ease); }
  .mdock.is-hidden { transform: translateY(110%); }
  .mdock a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; border-radius: 12px; font-size: .72rem; color: var(--night-muted); text-decoration: none; }
  .mdock svg { width: 20px; height: 20px; }
  .mdock-main { background: var(--cu); color: var(--night) !important; font-weight: 600; font-size: .92rem !important; }
}