@font-face { font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/inter-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+20C2-20C5,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:500 800; font-display:swap; src:url('fonts/roboto-condensed-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:500 800; font-display:swap; src:url('fonts/roboto-condensed-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+20C2-20C5,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:500 800; font-display:swap; src:url('fonts/roboto-condensed-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --paper:#faf7f2;
  --white:#fffdf9;
  --ink:#171519;
  --muted:#504a51;
  --line:#d7cfc6;
  --strong-line:#968d86;
  --blue:#170dc7;
  --blue-dark:#1a129d;
  --blue-wash:#eeecff;
  --lilac:#e9e3ee;
  --plum:#251a25;
  --display:'Roboto Condensed','Arial Narrow','Segoe UI',sans-serif;
  --body:Inter,'Segoe UI',sans-serif;
  --gutter:max(clamp(32px,3.9vw,56px), calc((100% - 1328px) / 2));
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.55 var(--body); }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
h1, h2, h3, p, dl, dd, figure { margin:0; }
h1, h2, h3 { font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.043em; }
h2 { font-size:clamp(46px,5.6vw,82px); }
h2 em { color:var(--blue); font-style:normal; }
.wrap { width:min(1328px,calc(100% - var(--gutter) * 2)); margin-inline:auto; }
.sr-only, .skip:not(:focus) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip:focus { position:absolute; z-index:5; top:8px; left:8px; background:var(--white); padding:10px; }
.header-inner { display:flex; align-items:center; gap:clamp(20px,4vw,60px); min-height:78px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; width:max-content; font:700 41px/.95 var(--body); letter-spacing:-.085em; }
.brand span { color:var(--ink); }
nav { margin-inline-start:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,3.35vw,48px); font-size:14px; font-weight:600; }
nav a:hover, .text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; width:max-content; min-height:56px; padding:0 22px; border:1px solid var(--blue); background:var(--blue); color:#fff; font-size:15px; font-weight:600; transition:background .18s,color .18s; }
.button:hover { background:var(--blue-dark); }
.button-small { min-height:42px; padding:0 12px 0 14px; gap:14px; font-size:13px; background:transparent; color:var(--ink); border-color:var(--strong-line); }
.button-small:hover { color:white; border-color:var(--blue-dark); }
.text-link { display:inline-flex; align-items:center; gap:10px; width:fit-content; min-height:44px; color:var(--blue); font-size:14px; font-weight:700; }
.eyebrow { margin-bottom:18px; color:var(--muted); font-size:11px; line-height:1.35; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }

.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,46.5fr) minmax(0,53.5fr); align-items:center; min-height:clamp(560px,47vw,657px); overflow:hidden; }
.hero-copy { position:relative; z-index:1; padding:56px 0 61px; }
.hero-copy .eyebrow { margin-bottom:24px; color:var(--blue); }
.hero h1 { font-size:clamp(66px,8.32vw,120px); font-weight:800; letter-spacing:-.06em; line-height:.875; }
.hero h1 span { display:block; white-space:nowrap; }
.hero-intro { max-width:436px; margin-top:29px; color:var(--ink); font-size:clamp(16px,1.33vw,19px); line-height:1.48; }
.hero-actions { margin-top:30px; }
.hero-actions .button { min-width:234px; }
.hero-visual { align-self:stretch; position:relative; }
.hero-visual > img { position:absolute; top:clamp(45px,6vw,83px); right:0; width:100%; height:auto; }
.hero-order { position:absolute; right:20px; bottom:clamp(47px,4.7vw,68px); width:clamp(290px,26.6vw,382px); }
.order-paper { padding:clamp(17px,1.55vw,22px); background:#fff6eb; box-shadow:0 14px 34px #351b2340; }
.paper-heading { display:flex; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:1px solid #cbb9a7; color:#584956; font-size:11px; font-weight:700; letter-spacing:.065em; text-transform:uppercase; }
.paper-log { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.paper-log li { padding:6px 8px 8px 10px; border-left:3px solid transparent; }
.paper-log li > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.paper-log b { font-size:14px; line-height:1.25; }
.paper-log time { color:#574d54; font-size:11px; font-variant-numeric:tabular-nums; }
.paper-log p { margin-top:2px; font-size:clamp(13px,1.08vw,16px); line-height:1.34; }
.paper-log .paper-bot { border-color:var(--blue); background:#f1e9f1; }
.paper-bot b { color:var(--blue); }
.paper-paid { position:relative; margin:-3px -8px 0 auto; width:fit-content; display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--plum); color:#fff; font-size:14px; box-shadow:0 6px 20px #2a172650; }
.paper-amount { padding-left:10px; border-left:1px solid #806c7f; font-size:12px; white-space:nowrap; }

.section { padding-block:clamp(64px,8vw,122px); }
.section-heading, .case-heading { display:flex; justify-content:space-between; align-items:end; gap:26px; margin-bottom:35px; }
.section-heading > p { max-width:360px; color:var(--muted); line-height:1.5; }

.flow { border-top:1px solid var(--line); background:var(--white); }
.flow-layout { display:grid; grid-template-columns:minmax(0,365px) minmax(0,1fr); gap:clamp(24px,4.17vw,60px); align-items:center; }
.flow-copy .eyebrow { color:var(--blue); }
.flow-copy > p:not(.eyebrow) { max-width:354px; color:var(--muted); margin-top:20px; }
.flow-copy .text-link { margin-top:15px; }
.flow-chart { --request:69px; --stock:126px; --branch:169px; --exception:218px; --confirm:273px; --link:343px; --paid:403px; --node-half:min(14.5cqw,92px); container-type:inline-size; position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-height:430px; }
.flow-lane { padding:0 8px 12px; text-align:center; border-bottom:1px solid var(--strong-line); align-self:start; font:700 clamp(16px,2vw,25px)/1 var(--display); letter-spacing:-.025em; }
.lane-nativa { color:var(--blue); }
.flow-chart::before, .flow-chart::after { content:''; position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.flow-chart::before { left:33.333%; }
.flow-chart::after { right:33.333%; }
.flow-node { z-index:1; position:absolute; transform:translate(-50%,-50%); left:50%; width:min(29%,184px); min-height:42px; padding:6px 5px; display:grid; place-items:center; text-align:center; background:var(--blue); color:#fff; font-size:clamp(11px,1.1vw,14px); line-height:1.16; font-weight:650; }
.flow-request, .flow-exception, .flow-confirm { background:var(--white); color:var(--ink); border:1px solid var(--strong-line); }
.flow-request { top:var(--request); left:16.666%; }
.flow-stock { top:var(--stock); }
.flow-exception { top:var(--exception); left:83.333%; }
.flow-confirm { top:var(--confirm); left:16.666%; }
.flow-link { top:var(--link); }
.flow-paid { top:var(--paid); background:var(--plum); }
.route { position:absolute; border-style:solid; border-color:var(--ink); border-width:0; }
.route::after { content:''; position:absolute; width:7px; height:7px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.route-request { left:16.666%; top:var(--request); width:33.334%; height:calc(var(--stock) - var(--request)); border-width:0 0 1px 1px; border-bottom-left-radius:12px; }
.route-request::after { right:calc(var(--node-half) + 1px); bottom:-4px; transform:rotate(-45deg); }
.route-stock { left:50%; top:var(--stock); height:calc(var(--link) - var(--stock)); border-left-width:1px; }
.route-stock::after, .route-paid::after { left:-4px; bottom:23px; transform:rotate(45deg); }
.route-exception { left:50%; top:var(--branch); width:33.333%; height:calc(var(--exception) - var(--branch)); border-width:1px 1px 0 0; border-top-right-radius:12px; }
.route-exception::after { right:-4px; bottom:23px; transform:rotate(45deg); }
.route-confirm { left:16.666%; top:var(--exception); width:66.667%; height:calc(var(--confirm) - var(--exception)); border-width:0 1px 1px 0; border-bottom-right-radius:10px; }
.route-confirm::before { content:''; position:absolute; bottom:-4px; left:50%; width:13px; height:7px; transform:translateX(-50%); background:linear-gradient(var(--white) 3px,var(--ink) 3px,var(--ink) 4px,var(--white) 4px); }
.route-confirm::after { left:calc(var(--node-half) + 1px); bottom:-4px; transform:rotate(135deg); }
.route-return { left:16.666%; top:var(--confirm); width:33.334%; height:calc(var(--link) - var(--confirm)); border-width:0 0 1px 1px; border-bottom-left-radius:10px; }
.route-return::after { right:calc(var(--node-half) + 1px); bottom:-4px; transform:rotate(-45deg); }
.route-paid { left:50%; top:var(--link); height:calc(var(--paid) - var(--link)); border-left-width:1px; }
.flow-label { position:absolute; z-index:1; padding:0 5px; width:max-content; max-width:32%; background:var(--white); font-size:clamp(10px,1vw,13px); font-weight:550; line-height:1.2; }
.label-stock { top:calc(var(--branch) + 23px); right:calc(50% + 8px); text-align:right; }
.label-exception { top:calc(var(--branch) - 17px); left:54%; }
.label-return { top:calc(var(--link) + 8px); left:calc(16.666% + 3px); }

.demo { background:#f1ebe4; }
.demo-frame { border:1px solid var(--strong-line); background:var(--white); }
.demo-bar { min-height:53px; padding:10px clamp(13px,2.3vw,30px); display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--plum); color:white; font-size:14px; font-weight:650; line-height:1.25; }
.demo-tag { font-weight:400; font-size:12px; color:#eadfe8; text-align:right; }
.scenario-switch { display:flex; flex-wrap:wrap; gap:5px; padding:16px clamp(13px,2.3vw,30px) 0; }
.scenario-switch button { min-height:44px; border:1px solid var(--line); background:transparent; color:var(--ink); padding:5px 12px; font-weight:600; font-size:13px; }
.scenario-switch button[aria-pressed=true] { border-color:var(--blue); background:var(--blue); color:white; }
.stepper { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:9px clamp(13px,2.3vw,30px) 0; border-bottom:1px solid var(--line); }
.stepper button { border:0; border-bottom:2px solid transparent; padding:8px 3px 10px; min-height:46px; background:none; color:var(--muted); text-align:left; font-size:14px; font-weight:600; }
.stepper button span { font-size:11px; margin-right:4px; font-variant-numeric:tabular-nums; }
.stepper button:hover, .scenario-switch button:not([aria-pressed=true]):hover { background:var(--blue-wash); }
.stepper button[aria-pressed=true] { color:var(--blue); border-color:var(--blue); }
.demo-workspace { display:grid; grid-template-columns:minmax(0,1.44fr) minmax(260px,1fr); }
.dialogue { min-height:340px; padding:clamp(16px,2.65vw,38px); }
.dialogue h3, .order-panel h3 { font-size:clamp(26px,2.65vw,37px); }
.stage-summary { margin:9px 0 19px; color:var(--muted); max-width:600px; font-size:14px; }
.message { display:flex; gap:10px; align-items:start; margin-top:7px; max-width:580px; }
.message > div { min-width:0; padding:4px 10px 8px; border-left:1px solid var(--line); }
.message b { font-size:12px; }
.message p { margin-top:2px; font-size:14px; line-height:1.4; }
.avatar { flex:none; width:27px; height:27px; display:grid; place-items:center; background:#ede6e3; color:var(--plum); font-size:11px; font-weight:700; }
.avatar-bot { background:var(--blue); color:#fff; }
.avatar-team { background:var(--blue-wash); color:var(--blue); }
.avatar-manager { background:var(--lilac); }
.order-panel { min-width:0; border-left:1px solid var(--line); background:#f1e9f1; padding:clamp(16px,2.65vw,38px); }
.order-panel .eyebrow { margin-bottom:8px; font-size:10px; }
.order-panel dl { margin:13px 0; font-size:13px; }
.order-panel dl div, .calc-results dl div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.order-panel dd { text-align:right; font-weight:600; }
.status { display:inline-block; padding:4px 6px; background:#e9e2eb; color:#47314e; font-size:11px; font-weight:700; line-height:1.2; }
.status-good { background:var(--blue-wash); color:#21179d; }
.status-alert { background:#f1dfcc; color:#633113; }
.next-action { padding:10px 12px; border-left:3px solid var(--blue); background:var(--blue-wash); font-size:13px; }
.next-action.alert { border-color:#9b4f29; background:#f4e6d8; }
.next-action p { color:var(--muted); margin-top:3px; line-height:1.4; }
.decision { margin-top:9px; min-height:44px; padding:4px 10px; background:var(--blue); color:white; border:0; font-size:13px; font-weight:650; }
.decision:hover { background:var(--blue-dark); }
.demo-controls { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:6px clamp(13px,2.3vw,30px); border-top:1px solid var(--line); }
.demo-controls button, .reset { border:0; min-height:44px; padding:0 3px; color:var(--blue); background:none; font-size:14px; font-weight:700; }
.demo-controls button:hover:not(:disabled), .reset:hover { text-decoration:underline; text-underline-offset:4px; }
.demo-controls button:disabled { cursor:default; color:#746b72; }
.step-count { color:var(--muted); font-size:12px; }
.role-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px; }
.role-strip > div { padding-top:12px; border-top:1px solid var(--strong-line); }
.role-strip b { font-size:14px; }
.role-strip p { color:var(--muted); font-size:13px; margin-top:4px; }

.night-scenario { padding-block:clamp(45px,6vw,84px); background:var(--blue-wash); }
.night-scenario h2 { font-size:clamp(42px,5vw,68px); }
.night-scenario .eyebrow { color:var(--blue); margin-bottom:10px; }
.night-diagram { margin-bottom:20px; padding:clamp(8px,2vw,28px); background:var(--white); border:1px solid var(--line); }
.night-diagram > figcaption { margin:4px 6px 16px; font-size:15px; font-weight:700; }
.night-lanes {
  --lane-gap:clamp(12px,4vw,60px);
  display:grid;
  grid-template: auto auto auto 28px auto 38px auto 27px auto 27px auto auto 29px auto / repeat(3,minmax(0,1fr));
  padding-bottom:12px;
  background:linear-gradient(to right,transparent calc(100% / 3 - .5px),var(--line) calc(100% / 3 - .5px) calc(100% / 3 + .5px),transparent calc(100% / 3 + .5px) calc(200% / 3 - .5px),var(--line) calc(200% / 3 - .5px) calc(200% / 3 + .5px),transparent calc(200% / 3 + .5px));
}
.night-lane { grid-row:1; padding:8px 2px 12px; text-align:center; font:700 clamp(16px,2vw,24px)/1 var(--display); }
.night-lane-client { grid-column:1; }
.night-lane-nativa { grid-column:2; color:var(--blue); }
.night-lane-manager { grid-column:3; }
.night-phase { grid-column:1/-1; padding:6px 9px; background:var(--blue-wash); color:var(--blue); border-block:1px solid var(--line); font-size:11px; font-weight:700; letter-spacing:.04em; }
.night-phase-evening { grid-row:2; margin-bottom:12px; }
.night-phase-morning { grid-row:12; position:relative; margin-top:16px; background:#f1ebe4; color:var(--plum); }
.night-phase-morning::before { content:""; position:absolute; bottom:100%; left:50%; height:17px; border-left:1px solid var(--muted); }
.night-node {
  position:relative; z-index:1; justify-self:center; width:calc(100% - var(--lane-gap)); padding:clamp(6px,1vw,13px);
  background:var(--paper); border:1px solid var(--strong-line); text-align:center;
  font-size:clamp(12px,1.03vw,15px); line-height:1.3; overflow-wrap:break-word;
}
.night-node strong { display:block; }
.night-node span { display:block; margin-top:4px; }
.night-call { grid-area:3/1; }
.night-check { grid-area:5/2; }
.night-offer { grid-area:7/2; }
.night-agree { grid-area:9/1; }
.night-ticket { grid-area:11/2; }
.night-review { grid-area:14/3; border-color:var(--plum); background:var(--plum); color:white; }
.night-check, .night-offer, .night-ticket { border-color:var(--blue); background:var(--blue); color:white; }
.night-arrow { position:relative; color:var(--muted); }
.night-arrow::after, .night-split::after {
  content:""; position:absolute; width:7px; height:7px; bottom:2px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg);
}
.night-arrow-call, .night-arrow-agree, .night-arrow-manager, .night-arrow-offer {
  justify-self:center; width:50%;
  background:
    linear-gradient(currentColor,currentColor) top left/1px 50% no-repeat,
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) bottom right/1px 50% no-repeat;
}
.night-arrow-offer {
  background:
    linear-gradient(currentColor,currentColor) top right/1px 50% no-repeat,
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) bottom left/1px 50% no-repeat;
}
.night-arrow-call, .night-arrow-agree { grid-column:1/3; }
.night-arrow-call { grid-row:4; }
.night-arrow-agree { grid-row:10; }
.night-arrow-offer { grid-area:8/1/9/3; }
.night-arrow-manager { grid-area:13/2/14/4; }
.night-arrow-call::after, .night-arrow-agree::after, .night-arrow-manager::after { right:-3px; }
.night-arrow-offer::after { left:-3px; }
.night-split {
  grid-area:6/2; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6px; padding:0 4px;
  color:var(--muted); text-align:center; font-size:clamp(10px,1vw,12px); font-weight:700; line-height:1.1;
  background:linear-gradient(currentColor,currentColor) center/1px 100% no-repeat, linear-gradient(currentColor,currentColor) right center/50% 1px no-repeat;
}
.night-split span { position:relative; z-index:1; justify-self:center; padding-inline:2px; background:var(--white); }
.night-split::after { left:calc(50% - 3px); }
.night-arrow-direct {
  grid-area:6/2/11/4; align-self:stretch; justify-self:start; width:31%; margin:19px 0 5px 32%;
  border:1px solid currentColor; border-width:1px 1px 1px 0; border-radius:0 8px 8px 0;
}
.night-arrow-direct::after { bottom:-4px; left:0; transform:rotate(135deg); }
.night-steps, .night-handoff { display:grid; gap:12px; }
.night-steps { list-style:none; margin:0; padding:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.night-steps li, .night-quote, .night-manager { padding:clamp(16px,2vw,25px); background:var(--white); border:1px solid var(--line); }
.night-steps li { border-top:2px solid var(--blue); }
.night-scenario h3 { font-size:clamp(22px,2.4vw,30px); }
.night-steps p, .night-manager h3 + p { margin-top:8px; color:var(--muted); font-size:14px; }
.night-handoff { grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:12px; }
.night-quote { background:var(--plum); color:var(--paper); border-color:var(--plum); }
.night-quote .eyebrow { color:#e5cfe6; }
.night-quote blockquote { max-width:48ch; margin:0; font-size:clamp(16px,1.5vw,20px); line-height:1.45; }
.night-manager { border-left:3px solid var(--blue); }

.case { background:var(--plum); color:var(--paper); }
.case .eyebrow, .pilot .eyebrow { color:#e5cfe6; }
.case-heading .text-link { color:#ded7ff; }
.case :focus-visible, .pilot :focus-visible, .calc-results :focus-visible { outline-color:#e5dbff; }
.case-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:repeat(3,auto); border-top:1px solid #a08a9b; border-bottom:1px solid #a08a9b; }
.case-grid article { padding:clamp(14px,2vw,27px) clamp(12px,2.2vw,32px); }
.case-grid .case-primary { grid-row:1/4; display:flex; flex-direction:column; justify-content:center; padding-left:0; border-right:1px solid #7b6877; color:#f2e0f2; }
.case-primary strong, .case-stat strong { display:block; font:700 clamp(26px,3.5vw,50px)/1 var(--display); letter-spacing:-.044em; }
.case-primary strong { font-size:clamp(55px,7.8vw,108px); }
.case-stat { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; gap:14px; }
.case-stat + .case-stat { border-top:1px solid #7b6877; }
.case-stat strong { font-size:clamp(25px,3.15vw,45px); }
.case-grid p { margin-top:12px; font-size:14px; line-height:1.35; }
.case-grid .case-primary p { max-width:340px; }
.case-grid .case-stat p { margin:0; color:#e5d7e1; }
.case-overline { display:block; margin-bottom:9px; font-size:12px; font-weight:700; }
.case-note { margin-top:17px; color:#e5d7e1; font-size:13px; }

.compare-table { width:100%; border-collapse:collapse; table-layout:fixed; border-top:1px solid var(--strong-line); }
.compare-table th, .compare-table td { padding:15px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.compare-table th:first-child { width:23%; }
.compare-table td { color:var(--muted); }
.compare-table th:last-child, .compare-table td:last-child { background:var(--blue-wash); color:var(--ink); }
.compare-table thead th { font-size:14px; }
.compare-label { display:none; }

.calc-section { background:#f1e9f1; }
.calculator { display:grid; grid-template-columns:1fr 1.04fr; border:1px solid #bfb4c5; background:var(--white); }
.calc-fields { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; padding:clamp(16px,3vw,38px); }
.calc-fields label { min-width:0; display:grid; grid-template-rows:auto 48px; align-content:end; gap:6px; color:var(--ink); font-size:13px; font-weight:600; }
.calc-fields input { width:100%; height:48px; border:1px solid var(--strong-line); padding:9px 11px; background:#fff; color:var(--ink); font-weight:700; font-size:18px; }
.calc-fields input[aria-invalid=true] { border-color:#9a4b30; }
.reset { justify-self:start; grid-column:1/-1; }
.calc-results { min-width:0; background:var(--blue); color:white; padding:clamp(17px,3vw,38px); }
.calc-results output { display:block; overflow-wrap:anywhere; font:700 clamp(38px,5.4vw,75px)/.98 var(--display); letter-spacing:-.05em; margin:6px 0 14px; }
.calc-results dl { font-size:13px; }
.calc-results dl div { border-color:#d3c9ff80; }
.calc-results dd { text-align:right; font-weight:700; }
.formula { color:#f0ebff; font-size:13px; line-height:1.4; margin-top:14px; }

.growth-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--strong-line); border-bottom:1px solid var(--line); }
.growth-grid article { padding:20px 34px 22px 0; }
.growth-grid article + article { padding-left:34px; border-left:1px solid var(--line); }
.growth-grid .eyebrow { margin-bottom:9px; }
.growth-grid h3 { font-size:clamp(28px,3.2vw,43px); margin-bottom:12px; }
.growth-grid article > p:last-child { color:var(--muted); max-width:510px; }

.pilot { background:var(--plum); color:var(--paper); }
.pilot h2 em { color:#e5d3f0; }
.pilot-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(26px,6vw,90px); align-items:center; }
.pilot-grid > div > p:not(.eyebrow) { max-width:450px; color:#e8dbe5; margin-top:16px; }
.button-light { background:var(--paper); color:var(--plum); border-color:var(--paper); margin-top:24px; }
.button-light:hover { background:var(--lilac); }
.pilot-grid > div > .contact-note { font-size:13px; margin-top:8px; }
.pilot-list { list-style:none; margin:0; padding:0; }
.pilot-list li { display:flex; align-items:start; gap:13px; padding:15px 0; border-top:1px solid #8a7486; }
.pilot-list li:last-child { border-bottom:1px solid #8a7486; }
.pilot-list li > span { color:#e7d4ed; font-size:11px; padding-top:3px; }
.pilot-list b { font-size:16px; }
.pilot-list p { margin-top:4px; color:#e8dbe5; font-size:14px; line-height:1.42; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:19px; }
.footer .brand { font-size:32px; }

@media (max-width:1050px) {
  .hero-intro { max-width:320px; }
  .flow-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); }
}
@media (max-width:850px) {
  :root { --gutter:24px; }
  .wrap { width:calc(100% - 48px); }
  .header-inner { gap:17px; min-height:67px; }
  .brand { font-size:36px; }
  nav { gap:16px; font-size:12px; }
  .hero { min-height:530px; }
  .hero h1 { font-size:clamp(52px,7.65vw,72px); }
  .hero-order { width:min(80%,306px); }
  .hero-intro { padding-right:9px; }
  .flow-layout { gap:23px; }
  .section-heading, .case-heading { margin-bottom:24px; }
}
@media (max-width:740px) {
  :root { --gutter:20px; }
  .wrap { width:calc(100% - 40px); }
  .header-inner { justify-content:space-between; min-height:62px; }
  nav { display:none; }
  .button-small { min-height:44px; }
  .hero.wrap { display:block; width:100%; min-height:0; }
  .hero-copy { padding:25px var(--gutter) 0; }
  .hero-copy .eyebrow { margin-bottom:17px; }
  .hero h1 { font-size:clamp(59px,13.5vw,89px); line-height:.93; }
  .hero-intro { max-width:410px; margin-top:18px; }
  .hero-actions { margin-top:18px; }
  .hero-actions .button { min-width:200px; min-height:48px; }
  .hero-visual { min-height:clamp(404px,69vw,498px); }
  .hero-order { bottom:23px; right:calc(var(--gutter) + 1px); width:min(78%,306px); }
  .hero-visual > img { top:0; left:-5.5%; right:auto; width:min(124%,790px); }
  .order-paper { padding:15px 17px; }
  .paper-log { margin-top:9px; gap:5px; }
  .paper-log li { padding-block:4px; }
  .paper-log p { font-size:13px; }
  .paper-paid { margin-right:-4px; padding:8px 10px; font-size:13px; }
  .section-heading, .case-heading { align-items:start; flex-direction:column; gap:12px; }
  .section-heading > p { max-width:570px; }
  .night-steps, .night-handoff { grid-template-columns:1fr; }
  .night-lanes { --lane-gap:6px; }
  .night-split { gap:3px; padding-inline:2px; }
  .flow-layout, .demo-workspace, .calculator, .pilot-grid { grid-template-columns:1fr; }
  .flow-chart { margin-top:6px; }
  .dialogue { min-height:0; }
  .order-panel { border-left:0; border-top:1px solid var(--line); }
  .case-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .case-grid .case-primary { grid-row:auto; border-right:0; border-bottom:1px solid #7b6877; }
  .case-primary strong { font-size:clamp(54px,12vw,82px); }
  .case-grid .case-stat { padding-inline:0; }
}
@media (max-width:580px) {
  .compare-table, .compare-table tbody { display:block; }
  .compare-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .compare-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--strong-line); padding-block:13px; }
  .compare-table th[scope=row]:first-child { width:auto; grid-column:1/-1; font:700 22px/1.15 var(--display); padding:0 0 10px; border:0; }
  .compare-table td { padding:10px; border:0; font-size:13px; line-height:1.46; overflow-wrap:anywhere; }
  .compare-label { display:block; margin-bottom:5px; font-size:12px; font-weight:700; }
  .compare-table td:last-child .compare-label { color:var(--blue-dark); }
}
@media (max-width:440px) {
  :root { --gutter:16px; }
  .wrap { width:calc(100% - 32px); }
  .hero h1 { font-size:clamp(46px,14.35vw,65px); }
  .hero-order { width:min(78%,270px); }
  .flow-label { padding-inline:3px; }
  .label-exception { left:53%; }
  .label-return { left:4px; }
  .demo-bar { font-size:12px; }
  .demo-tag { max-width:140px; font-size:10px; }
  .scenario-switch button { font-size:12px; padding-inline:8px; }
  .stepper { gap:1px; }
  .stepper button { font-size:11px; text-align:center; }
  .stepper button span { display:block; margin:0; }
  .role-strip, .growth-grid { grid-template-columns:1fr; gap:0; }
  .role-strip > div { padding:10px 0; }
  .case-grid p { margin-top:6px; }
  .calc-fields { gap:11px 9px; }
  .calc-fields label { font-size:12px; }
  .growth-grid article { padding:16px 0; }
  .growth-grid article + article { padding-left:0; border-left:0; border-top:1px solid var(--line); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* Subtle process illustrations sit beneath the existing diagrams. */
.flow-chart { background: url('day-motif.svg') center / 100% 100% no-repeat; }
.night-diagram { background: var(--white) url('night-motif.svg') center / 100% 100% no-repeat; }
@media (max-width: 600px) {
  .flow-chart, .night-diagram { background-image:none; }
}

/* Editorial process imagery is separate from diagram content. */
.flow-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px clamp(28px, 5vw, 72px); }
.flow-copy { align-self:center; }
.flow-chart { grid-column:1 / -1; width:min(100%, 900px); justify-self:center; }
.editorial-photo { position:relative; min-height:320px; background-size:cover; overflow:hidden; }
.editorial-photo span { position:absolute; bottom:12px; right:12px; padding:5px 8px; background:rgba(24,20,25,.75); color:#fff; font-size:10px; line-height:1.2; }
.day-photo { background-image:url('day-photo.jpg'); background-position:50% 62%; }
.night-scenario .section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); grid-template-rows:auto 1fr; align-items:start; gap:16px clamp(28px,5vw,72px); }
.night-scenario .section-heading > p { grid-column:1; max-width:360px; }
.night-photo { grid-column:2; grid-row:1 / 3; min-height:320px; background-image:url('night-photo.jpg'); background-position:50% 90%; }
@media (max-width: 700px) {
  .flow-layout, .night-scenario .section-heading { display:grid; grid-template-columns:1fr; gap:20px; }
  .flow-chart, .night-scenario .section-heading > p, .night-photo { grid-column:1; }
  .night-photo { grid-row:auto; }
  .editorial-photo { min-height:220px; }
  .day-photo { background-position:50% 62%; }
  .night-photo { background-position:50% 90%; }
}


/* Tone the image layer only; captions and diagrams stay crisp. */
.editorial-photo { border-radius:16px; isolation:isolate; }
.editorial-photo::before { content:""; position:absolute; inset:0; z-index:-1; background-image:var(--editorial-image); background-size:cover; background-position:var(--editorial-position); filter:saturate(.84) contrast(.96) brightness(1.03); }
.day-photo { --editorial-image:url('day-photo.jpg'); --editorial-position:50% 62%; background-image:none; }
.night-photo { --editorial-image:url('night-photo.jpg'); --editorial-position:50% 90%; background-image:none; }

/* Route selection highlights the chosen path without hiding the alternatives. */
.route-picker { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.flow-layout > .route-picker { grid-column:1 / -1; width:min(100%,900px); justify-self:center; margin-bottom:-20px; }
.route-picker-title { font-size:13px; font-weight:700; margin-right:4px; }
.route-picker button { min-height:44px; padding:8px 15px; border:1px solid var(--strong-line); border-radius:6px; color:var(--ink); background:var(--white); font-weight:700; cursor:pointer; }
.route-picker button[aria-pressed="true"] { background:var(--blue); color:#fff; border-color:var(--blue); }
.route-picker button[aria-pressed="true"]::before { content:'✓ '; }
.route-picker button:focus-visible { outline:3px solid var(--plum); outline-offset:3px; }
.route-status { flex-basis:100%; font-size:12px; color:var(--muted); line-height:1.4; }
.night-diagram .route-picker { margin:0 6px 20px; }
.flow-chart[data-route] .flow-request, .flow-chart[data-route] .flow-stock, .flow-chart[data-route] .flow-link, .flow-chart[data-route] .flow-paid,
.flow-chart[data-route="replacement"] .flow-exception, .flow-chart[data-route="replacement"] .flow-confirm,
.night-lanes[data-route] .night-call, .night-lanes[data-route] .night-check, .night-lanes[data-route] .night-ticket, .night-lanes[data-route] .night-review,
.night-lanes[data-route="replacement"] .night-offer, .night-lanes[data-route="replacement"] .night-agree { box-shadow:0 0 0 3px #7280da; }
.flow-chart[data-route] .route-request, .flow-chart[data-route] .route-paid,
.flow-chart[data-route="stock"] .route-stock,
.flow-chart[data-route="replacement"] .route-exception, .flow-chart[data-route="replacement"] .route-confirm, .flow-chart[data-route="replacement"] .route-return { border-color:var(--blue); border-width:0; }
.flow-chart[data-route] .route-request { border-width:0 0 2px 2px; }
.flow-chart[data-route] .route-paid, .flow-chart[data-route="stock"] .route-stock { border-left-width:2px; }
.flow-chart[data-route="replacement"] .route-exception { border-width:2px 2px 0 0; }
.flow-chart[data-route="replacement"] .route-confirm { border-width:0 2px 2px 0; }
.flow-chart[data-route="replacement"] .route-return { border-width:0 0 2px 2px; }
.flow-chart[data-route] .route-request::after, .flow-chart[data-route] .route-paid::after,
.flow-chart[data-route="stock"] .route-stock::after,
.flow-chart[data-route="replacement"] .route-exception::after, .flow-chart[data-route="replacement"] .route-confirm::after, .flow-chart[data-route="replacement"] .route-return::after { border-color:var(--blue); border-width:2px; }
.night-lanes[data-route] .night-arrow-call, .night-lanes[data-route] .night-arrow-manager,
.night-lanes[data-route="stock"] .night-arrow-direct,
.night-lanes[data-route="replacement"] .night-arrow-offer, .night-lanes[data-route="replacement"] .night-arrow-agree { color:var(--blue); }
.flow-chart[data-route="stock"] .label-stock, .flow-chart[data-route="replacement"] .label-exception,
.night-lanes[data-route="stock"] .night-split span:last-child, .night-lanes[data-route="replacement"] .night-split span:first-child { color:var(--blue); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
@media (max-width:700px) { .flow-layout > .route-picker { margin-bottom:0; } .route-picker button { flex:1 1 135px; } }
@media (max-width:700px) { .route-picker-title { flex-basis:100%; } }

/* Emphasize the actual night connectors and keep the other branch legible. */
.night-lanes[data-route] .night-arrow-call,
.night-lanes[data-route] .night-arrow-manager,
.night-lanes[data-route="replacement"] .night-arrow-agree {
  background:linear-gradient(currentColor,currentColor) top left/2px 50% no-repeat,
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) bottom right/2px 50% no-repeat;
}
.night-lanes[data-route="replacement"] .night-arrow-offer {
  background:linear-gradient(currentColor,currentColor) top right/2px 50% no-repeat,
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) bottom left/2px 50% no-repeat;
}
.night-lanes[data-route] .night-arrow-call::after,
.night-lanes[data-route] .night-arrow-manager::after,
.night-lanes[data-route="stock"] .night-arrow-direct::after,
.night-lanes[data-route="replacement"] .night-arrow-offer::after,
.night-lanes[data-route="replacement"] .night-arrow-agree::after,
.night-lanes[data-route="replacement"] .night-split::after { border-right-width:2px; border-bottom-width:2px; }
.night-lanes[data-route="stock"] .night-arrow-direct { border-width:2px 2px 2px 0; }
.night-lanes[data-route="stock"] .night-split {
  background:linear-gradient(var(--blue),var(--blue)) top center/2px 50% no-repeat,
    linear-gradient(var(--muted),var(--muted)) bottom center/1px 50% no-repeat,
    linear-gradient(var(--blue),var(--blue)) right center/50% 2px no-repeat;
}
.night-lanes[data-route="replacement"] .night-split {
  background:linear-gradient(var(--blue),var(--blue)) center/2px 100% no-repeat,
    linear-gradient(var(--muted),var(--muted)) right center/50% 1px no-repeat;
}
.night-lanes[data-route="replacement"] .night-split::after { color:var(--blue); }
.night-lanes[data-route] .night-phase-morning::before { border-left:2px solid var(--blue); }

/* Give narrow diagram labels and step buttons enough inline room. */
@media (max-width:440px) {
  .flow-chart { --node-half:16.5cqw; }
  .flow-node { width:33%; padding-inline:2px; }
  .flow-node > span { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .night-lanes { --lane-gap:2px; }
  .night-node { padding:6px 3px; }
  .stepper { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
}

/* Panels retain opaque, high-contrast fallbacks with a restrained glass-like sheen. */
.flow-node, .night-node { border-radius:7px; box-shadow:0 4px 12px rgba(37,26,37,.10), inset 0 1px 0 rgba(255,255,255,.5); }
.flow-request, .flow-exception, .flow-confirm, .night-call, .night-agree { background:#fffdf9; background-image:linear-gradient(155deg,rgba(255,255,255,.96),rgba(250,247,242,.91)); border:1px solid #aaa2a5; }
.flow-stock, .flow-link, .night-check, .night-offer, .night-ticket { background-color:#170dc7; background-image:linear-gradient(155deg,#3026cc,#170db7); border:1px solid #3026ad; box-shadow:0 4px 12px rgba(23,13,130,.16),inset 0 1px 0 rgba(255,255,255,.24); }
.flow-paid, .night-review { background-color:#251a25; background-image:linear-gradient(155deg,#3a2939,#251a25); border:1px solid #493b49; color:#fff; box-shadow:0 4px 12px rgba(37,26,37,.18),inset 0 1px 0 rgba(255,255,255,.18); }
.flow-chart[data-route] .flow-request, .flow-chart[data-route] .flow-stock, .flow-chart[data-route] .flow-link, .flow-chart[data-route] .flow-paid,
.flow-chart[data-route="replacement"] .flow-exception, .flow-chart[data-route="replacement"] .flow-confirm,
.night-lanes[data-route] .night-call, .night-lanes[data-route] .night-check, .night-lanes[data-route] .night-ticket, .night-lanes[data-route] .night-review,
.night-lanes[data-route="replacement"] .night-offer, .night-lanes[data-route="replacement"] .night-agree { box-shadow:0 0 0 2px #7280da,0 4px 12px rgba(37,26,37,.14),inset 0 1px 0 rgba(255,255,255,.26); }

/* On portrait phones, the same route controls follow the diagram near the bottom edge. */
@media (max-width:740px) and (orientation:portrait) {
  .flow-layout > .flow-chart { order:1; }
  .flow-layout > .route-picker { order:2; }
  .night-diagram { display:flex; flex-direction:column; }
  .night-diagram > figcaption { order:0; }
  .night-diagram > .night-lanes { order:1; }
  .night-diagram > .route-picker { order:2; }
  .flow-layout > .route-picker, .night-diagram > .route-picker {
    position:sticky; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); z-index:5;
    display:flex; flex-wrap:nowrap; align-items:center; gap:6px; width:100%;
    margin:12px 0 0; padding:7px; border:1px solid #b5acc1; border-radius:10px;
    background:rgba(255,253,249,.97); box-shadow:0 6px 22px rgba(37,26,37,.18);
  }
  .route-picker .route-picker-title { display:none; }
  .route-picker button { min-width:0; flex:1 1 0; min-height:44px; padding:7px 5px; font-size:12px; line-height:1.2; }
  .route-picker .route-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .route-watch-ready .route-picker:not(.route-in-view) { visibility:hidden; pointer-events:none; }
}
@media (max-width:740px) and (orientation:portrait) {
  .flow-layout > .route-picker, .night-diagram > .route-picker {
    position:fixed; left:50%; bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%); width:min(calc(100% - 32px), 600px); margin:0;
  }
  .flow-layout::after { content:''; grid-column:1 / -1; order:2; height:72px; }
  .night-diagram::after { content:''; order:2; display:block; height:72px; flex:none; }
}
@media (min-width:441px) and (max-width:460px) { .stepper { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:440px) { .night-node { padding-inline:1px; } }

/* Contrast only the floating portrait controls; desktop controls stay unchanged. */
@media (max-width:740px) and (orientation:portrait) {
  .flow-layout > .route-picker, .night-diagram > .route-picker {
    background:#251a25; border-color:#746579;
    box-shadow:0 0 0 1px rgba(255,253,249,.45),0 7px 22px rgba(25,18,28,.4);
  }
  .flow-layout > .route-picker button, .night-diagram > .route-picker button {
    color:#fffdf9; background:#493b49; border-color:#a396a5;
  }
  .flow-layout > .route-picker button[aria-pressed="true"], .night-diagram > .route-picker button[aria-pressed="true"] {
    color:#170d77; background:#f2efff; border-color:#f2efff;
  }
  .flow-layout > .route-picker button:focus-visible, .night-diagram > .route-picker button:focus-visible {
    outline:2px solid #fffdf9; outline-offset:2px;
  }
}

/* Selected typography: Playfair for headings, Manrope for text and figures. */
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay.woff2') format('woff2'); font-style:normal; font-weight:400 900; font-display:swap; }
@font-face { font-family:Manrope; src:url('fonts/Manrope.woff2') format('woff2'); font-style:normal; font-weight:200 800; font-display:swap; }
:root { --display:'Playfair Display',Georgia,serif; --body:Manrope,'Segoe UI',sans-serif; }
.brand { font-family:Inter,'Segoe UI',sans-serif; }
h1,h2,h3 { font-weight:700; letter-spacing:-.025em; line-height:1.1; }
h2 { font-size:clamp(36px,4.6vw,66px); }
.hero h1 { font-size:clamp(48px,5.2vw,78px); font-weight:700; line-height:1.05; letter-spacing:-.035em; }
.flow-lane, .night-lane { font-family:var(--body); font-weight:700; letter-spacing:-.025em; }
.case-primary strong, .case-stat strong, .calc-results output { font-family:var(--body); letter-spacing:-.045em; }
.case-primary strong { font-size:clamp(44px,5vw,72px); }
.case-stat strong { font-size:clamp(24px,2.8vw,40px); }
.calc-results output { font-size:clamp(34px,4vw,58px); line-height:1.08; }
@media (max-width:740px) {
  .hero h1 { font-size:clamp(40px,8vw,58px); line-height:1.08; }
  .flow-lane, .night-lane { font-size:clamp(13px,3.3vw,18px); }
}
@media (max-width:440px) {
  .hero h1 { font-size:clamp(36px,10.3vw,45px); }
  .case-primary strong { font-size:clamp(38px,10vw,54px); }
}

/* Compact order walkthrough, limited to portrait phones. */
.compact-demo { display:none; }
.desktop-approval-state { margin:8px 0 0; color:#633113; font-size:12px; }
@media (max-width:740px) and (orientation:portrait) {
  .demo-desktop { display:none; }
  .compact-demo { display:block; background:var(--white); }
  .compact-head { display:flex; justify-content:space-between; gap:8px; background:var(--plum); color:#fff; padding:10px 12px; font-size:12px; }
  .compact-head span { color:#eadfe8; font-size:11px; }
  .compact-selectors { display:grid; grid-template-columns:1.15fr 1fr; gap:8px; padding:10px 12px 8px; }
  .compact-selectors label { min-width:0; color:var(--muted); font-size:11px; font-weight:700; }
  .compact-selectors select { width:100%; min-height:42px; margin-top:3px; border:1px solid #bcb4ba; background:var(--white); border-radius:5px; padding:5px 4px; color:var(--ink); font:600 12px/1.2 var(--body); }
  .compact-stage { padding:7px 14px 10px; }
  .compact-meta { display:flex; justify-content:space-between; gap:6px; align-items:center; font-size:11px; font-weight:700; color:var(--muted); }
  .compact-status { background:#eae6fc; color:#24178f; border-radius:4px; padding:4px 6px; text-align:right; }
  .compact-stage h3 { font:700 clamp(23px,5.6vw,30px)/1.12 var(--display); letter-spacing:-.02em; margin:8px 0; }
  .compact-summary { color:var(--muted); font-size:12px; line-height:1.38; margin:0 0 9px; }
  .compact-primary { border-left:3px solid var(--blue); background:var(--blue-wash); padding:7px 9px; font-size:12px; line-height:1.35; }
  .compact-primary b { font-size:10px; color:var(--blue); }
  .compact-primary p, .compact-action p { margin:3px 0 0; }
  .compact-approval-state { font-size:11px; color:#633113; margin:7px 0 0; }
  .compact-approval { min-height:42px; margin-top:8px; padding:8px 12px; background:var(--blue); color:#fff; border:0; border-radius:4px; font:700 12px var(--body); }
  .compact-navigation { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding:6px 12px; }
  .compact-navigation button { min-height:44px; border:0; background:transparent; color:var(--blue); font:700 13px var(--body); padding:0 5px; }
  .compact-navigation button:disabled { color:#746b72; }
  .compact-demo details { border-top:1px solid var(--line); }
  .compact-demo summary { cursor:pointer; min-height:44px; padding:12px 14px; font-weight:700; font-size:12px; color:var(--plum); }
  .compact-demo details[open] summary { color:var(--blue); }
  .compact-messages { list-style:none; margin:0; padding:0 14px 14px; }
  .compact-messages li { margin:8px 0 0; padding:7px 9px; border-left:2px solid #c8c0cb; font-size:12px; }
  .compact-messages b { font-size:10px; }
  .compact-messages p { margin:3px 0 0; }
  .compact-details-body { padding:0 14px 14px; }
  .compact-details-body dl { margin:0; font-size:12px; }
  .compact-details-body dl div { display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); }
  .compact-details-body dd { margin:0; text-align:right; font-weight:700; }
  .compact-action { background:#f4e6d8; border-left:3px solid #9b4f29; padding:8px; margin-top:10px; font-size:12px; }
  .compact-demo :focus-visible { outline:3px solid #7a62db; outline-offset:2px; }
}
@media (max-width:340px) and (orientation:portrait) {
  .compact-stage { padding-inline:12px; }
  .compact-selectors { gap:5px; }
  .compact-selectors select { font-size:11px; }
  .compact-stage h3 { font-size:23px; }
}