/* fitting-guide (single, contextual) */
    /* BEGIN GENERATED route-compare CSS — tools/build-route-compare.py — do not edit */
      .routenav { padding:72px 0; border-top:1px solid var(--line-soft); background:var(--bg); }
      .routenav-head { max-width:680px; margin:0 0 24px; }
      .routenav-head h2 { font-size:clamp(22px,2.2vw,28px); line-height:1.18; letter-spacing:-.02em; font-weight:500; margin:0 0 10px; }
      .routenav-head p { color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; }
      .routenav-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
      .routenav-media { position:relative; overflow:hidden; isolation:isolate; margin:-22px -22px 4px; aspect-ratio:16/9; border-bottom:1px solid var(--line); border-radius:13px 13px 0 0; background:var(--bg-2); }
      .routenav-media-img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:var(--route-pos, center center); filter:saturate(.78) contrast(.94) brightness(.84); }
      :root[data-theme="light"] .routenav-media-img { filter:saturate(.9) contrast(.97); }
      .routenav-card { display:flex; flex-direction:column; gap:10px; padding:22px 22px 20px; border:1px solid var(--line); border-radius:14px; background:var(--card); text-decoration:none; transition:border-color .18s ease, transform .18s ease, background-color .18s ease; }
      a.routenav-card:hover { border-color:var(--mineral); transform:translateY(-2px); }
      a.routenav-card:focus-visible { outline:2px solid var(--mineral); outline-offset:3px; }
      .routenav-card.is-current { border-color:rgba(230,224,210,.34); background:rgba(230,224,210,.05); }
      .routenav-name { font-size:16px; font-weight:500; color:var(--text); letter-spacing:-.01em; margin:0; line-height:1.25; }
      .routenav-fit { color:var(--muted); font-size:13.5px; line-height:1.55; margin:0; flex:1; }
      .routenav-go { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mineral); margin-top:6px; }
      .routenav-card.is-current .routenav-go { color:var(--faint); }
      @media (max-width:980px) and (min-width:641px) { .routenav-grid { grid-template-columns:1fr 1fr; } }
      @media (max-width:640px) { .routenav-grid { grid-template-columns:1fr; } .routenav-media { aspect-ratio:2/1; } }
      /* END GENERATED route-compare CSS */
    /* BEGIN GENERATED cost-anatomy CSS — tools/build-cost-anatomy.py — do not edit */
/* WarmInfoFrame — SINGLE SOURCE (2026-09-09, owner brief). tools/_warm_frame.py writes this into every consumer's region:
   the bank template (tools/build-bank-detail.py — the readiness checklist and the operating-details strip) and the setup-cost
   inclusions panel on the three route pages (tools/build-cost-anatomy.py). ONE contained warm surface — the theme's tinted
   paper, a hairline border, restrained radius, 18/22px padding — with the quiet mono label 9px above its content and a
   marker-led list: a fixed 15px marker column, 8px to the text, 6px between rows, continuation lines under the text.
   Markers are decorative glyphs on the theme's --marker-* tokens (a green check = included / a strength; a muted-orange
   outlined diamond = a factor that varies the outcome, informational, never a warning). The frame never styles what sits
   inside it beyond these primitives; consumers add their own layout (columns, media) with their own class names. */
.warm-frame { padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-tinted); }
.warm-frame-label { margin: 0 0 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--faint); }
.warm-frame-list { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 6px; }
.warm-frame-list li { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 8px; align-items: start; color: var(--text); font-size: 15px; line-height: 1.5; min-width: 0; }
.warm-frame-mark { width: 15px; height: 15px; margin-top: 4px; display: block; }
.warm-frame-mark svg { width: 15px; height: 15px; display: block; }
.warm-frame-mark--win { color: var(--marker-win-glyph); }   /* the shared positive glyph token; the heavier 2.4 stroke carries the visibility */
.warm-frame-mark--alt { color: var(--marker-alt-glyph); }   /* the shared alternative / variable token (muted orange) */
      .cost-anatomy { padding:96px 0; border-top:1px solid var(--line-soft); background:var(--bg); }
      .cost-anatomy .wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
      .cost-anatomy-lede { max-width:520px; }
      .cost-anatomy-lede h2 { font-size:clamp(28px,3vw,38px); line-height:1.14; letter-spacing:-.02em; font-weight:500; margin:0 0 28px; }
      .cost-anatomy-range { display:block; margin:0 0 24px; padding:22px 0 26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
      .cost-anatomy-range small { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }   /* the package eyebrow a zone-priced node carries (tools/build-zone-prices.py) — dedicated free-zone pages, 2026-09-09 */
      .cost-anatomy-range b { display:flex; align-items:baseline; gap:10px; font-family:var(--sans); font-weight:500; font-size:clamp(28px,3.2vw,38px); color:var(--text); letter-spacing:-.02em; line-height:1; }
      .cost-anatomy-range b .u { font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.14em; vertical-align:6px; text-transform:uppercase; font-weight:400; }
      .cost-anatomy-range b .sep { font-family:var(--mono); font-size:22px; color:var(--faint); font-weight:400; letter-spacing:0; vertical-align:2px; }
      .cost-anatomy-lede p { color:var(--muted); font-size:15px; line-height:1.68; margin:0 0 24px; }
      /* the action sits under the information frame in the right column, left edge on the frame's left edge (owner brief 2026-09-06) */
      .cost-anatomy-right { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
      .cost-anatomy-right .cost-anatomy-card { align-self:stretch; }
      .cost-anatomy-cta { display:inline-flex; align-items:center; }   /* shared .btn geometry — no local gap / font-size (CTA hierarchy, 2026-09-08) */
      /* the inclusions panel is the shared WarmInfoFrame (.warm-frame / -label / -list / -mark, _shared/warm-frame.css, written above
         these rules): green checks on the included items, muted-orange outlined diamonds on the price-variable items (owner brief
         2026-09-09). This block owns only the two-column layout inside that frame. */
      .cost-anatomy-card { display:grid; grid-template-columns:1fr 1px 1fr; column-gap:18px; align-items:start; }
      .cost-anatomy-rule { display:block; align-self:stretch; width:1px; background:var(--line-soft); }
      .cost-anatomy-card li b { color:var(--text); font-weight:500; }
      .cost-anatomy-card li em { font-style:normal; color:var(--faint); }
      @media (max-width:960px) { .cost-anatomy .wrap { grid-template-columns:1fr; gap:36px; } }
      @media (max-width:640px) { .cost-anatomy-right { gap:18px; } .cost-anatomy-card { grid-template-columns:1fr; column-gap:0; } .cost-anatomy-rule { display:none; } .cost-anatomy-rule + .cost-anatomy-col { margin-top:26px; padding-top:26px; border-top:1px solid var(--line-soft); } }
      /* END GENERATED cost-anatomy CSS */
    /* BEGIN GENERATED consult CSS — tools/build-consult.py — do not edit */
      .svc-fields select { width:100%;padding:12px 14px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.02);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.55;appearance:none;-webkit-appearance:none;cursor:pointer }
      .svc-fields select:focus-visible { outline:1px solid var(--mineral);outline-offset:-1px }
      /* Consultation intake — component-owned layout (2026-09-06). Two columns on desktop: copy (row 1) and the
         optional photograph (row 2) on the left, the intake card spanning both rows on the right; align-items:end
         puts the card's bottom edge on the photograph's bottom edge with no offsets. Stacks copy → card → photo.
         2026-09-18 (owner): row 2 is 1fr and the photograph STRETCHES to fill it, so a taller card (corporate.html adds a
         Country select) grows the photograph instead of opening a gap under the copy; 21/9 was the old fixed ratio. */
      :root .consult .consult-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,430px);grid-template-rows:auto 1fr;column-gap:clamp(40px,4vw,48px);row-gap:28px;align-items:end }
      :root .consult .consult-copy { grid-column:1;grid-row:1;align-self:start }
      :root .consult .consult-media { grid-column:1;grid-row:2;align-self:stretch;position:relative;overflow:hidden;isolation:isolate;margin:0;min-height:240px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2) }
      :root .consult .consult-card { grid-column:2;grid-row:1/3;align-self:end;box-sizing:border-box;width:100%;max-width:430px;min-height:412px;display:flex;flex-direction:column;padding:32px 28px 34px }
      :root .consult .consult-card .svc-fields { flex:1;align-content:start;gap:16px }
      :root .consult .consult-card h3 + .svc-fields { margin-top:18px }   /* 2026-09-18 (owner): a card with no SLA line and no sub-copy had the fields 6px under the heading; match the 20px the sub-copy leaves */
      :root .consult .consult-card .svc-fields textarea { min-height:82px;resize:vertical }
      :root .consult .consult-card .svc-fields .btn { min-height:44px }
      /* Intake-form legibility (2026-09-06). Labels: same 12px, tracking eased from .06em to .04em (no giant caps).
         Controls keep 14.5px on desktop and go to 16px under 520px so iOS Safari does not zoom. Placeholders use the
         theme's faint token at full opacity — subordinate, never clipped. The phone control gets the whole row (the
         catalogue marks `phone` and `company` wide), the selector is a fixed segment and the number takes the rest. */
      :root .consult .consult-card .svc-fields .fld span { font-size:12px;letter-spacing:.04em;line-height:1.3 }
      :root .consult .consult-card .svc-fields :is(input,textarea,select)::placeholder { color:var(--faint);opacity:1 }
      :root .consult .consult-card .svc-fields .pi-wrap { grid-template-columns:max-content minmax(0,1fr) }
      :root .consult .consult-card .svc-fields .pi-wrap > .pi-cc { padding:0 12px }
      :root .consult .consult-card .svc-fields .pi-wrap > input[type="tel"] { min-width:0;width:100%;max-width:none;padding-left:12px;padding-right:12px;text-overflow:clip;overflow:visible }
      @media (max-width:520px) {
        :root .consult .consult-card .svc-fields :is(input,textarea,select) { font-size:16px }
        :root .consult .consult-card .svc-fields .pi-wrap { --pi-font-size:16px }
      }
      .consult-media-img { position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;filter:saturate(.66) contrast(.92) brightness(.72) }
      .consult-media--top .consult-media-img { object-position:center 30% }
      .consult-media--bottom .consult-media-img { object-position:center 70% }
      :root[data-theme="light"] .consult-media-img { filter:saturate(.82) contrast(.94) brightness(1.01) }
      @media (max-width:900px) {
        :root .consult .consult-grid { grid-template-columns:1fr;grid-template-rows:none;row-gap:24px;align-items:start }
        :root .consult .consult-copy, :root .consult .consult-card, :root .consult .consult-media { grid-column:1;grid-row:auto }
        :root .consult .consult-card { max-width:none;min-height:0;padding:26px 22px 28px }
        :root .consult .consult-media { aspect-ratio:16/9 }
      }
      /* END GENERATED consult CSS */