:root { --color-urgent-on-field: oklch(70% 0.17 29); --color-photo-fade: oklch(17% 0.04 242 / 0.85); }

.section--tint { background: var(--color-paper-2); }
main > .section { padding-block: var(--section-gap-s); }
main > .section:not(.section--tint):not(.section--alt) + .section:not(.section--tint):not(.section--alt), main > .section:not(.section--tint):not(.section--alt) + #faq:not(.section--tint):not(.section--alt) { padding-top: 0; }
.arrow-link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-weight: 600; }
.arrow-link .icon { transition: transform var(--dur-short) var(--ease-out); }

.page-hero { --hero-cell: 60px; position: relative; overflow: clip; background-color: var(--color-field); background-image: linear-gradient(var(--color-field-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-field-grid) 1px, transparent 1px); background-size: var(--hero-cell) var(--hero-cell); background-position: -1px -1px; color: var(--color-field-ink); }
.page-hero__inner { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; row-gap: var(--space-xl); min-height: clamp(560px, calc(86svh - var(--nav-h) - var(--alert-h)), 800px); padding-block: var(--space-md) var(--space-xl); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-field-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--color-field-rule); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-field-ink); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-on-field); text-decoration: underline; }
.page-hero__head { --hero-h1: clamp(2.5rem, 4.2vw + 0.5rem, 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-self: end; padding-top: var(--space-lg); }
.page-hero__head:has(.page-sym) { grid-template-columns: auto minmax(0, 1fr); }

.page-sym { position: relative; align-self: start; width: var(--sym-size, var(--hero-h1)); height: var(--sym-size, var(--hero-h1)); font-size: var(--hero-h1); color: var(--color-accent); }

.page-sym .scan-line { height: calc(100% + 0.14em); }
.page-sym .icon { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1.15; }
.page-sym__base { color: var(--color-field-dim); }
.page-hero h1 { max-width: 22ch; text-wrap: balance; font-size: var(--hero-h1, clamp(2.5rem, 4.2vw + 0.5rem, 4.5rem)); line-height: 1; letter-spacing: -0.022em; }
.page-hero h1.scan-title { position: relative; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.page-hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.page-hero__copy { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.page-hero .lead { max-width: 46ch; color: var(--color-field-muted); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); }
.page-hero__call { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); color: var(--color-field-muted); font-size: var(--text-sm); }
.page-hero__call .icon { width: 18px; height: 18px; color: var(--color-accent); }
.page-hero__call a { font-weight: 600; white-space: nowrap; }
.page-hero__facts { grid-column: 8 / -1; }
.facts { margin: 0; border-top: 1px solid var(--color-field-rule); }
.facts > div { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-field-rule); }
.facts dt { color: var(--color-field-muted); font-size: var(--text-sm); }
.facts dd { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }

.hero--alert .page-sym__lit { color: var(--color-urgent-on-field); }
.hero--alert .scan-line { border-top-color: var(--color-urgent-on-field); }
@media (prefers-reduced-motion: no-preference) {
  .page-hero .breadcrumb { animation: settle 0.5s var(--ease-out) both; }
  .page-sym__lit { animation: sym-scan 1.1s var(--ease-in-out) 0.1s both; }
  .page-hero__copy { animation: settle 0.6s var(--ease-out) 0.4s both; }
  .page-hero__facts { animation: settle 0.6s var(--ease-out) 0.5s both; }
}

@keyframes sym-scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -0.14em 0); } }
@media (forced-colors: active) { .page-sym__base, .page-sym .scan-line { display: none; } }

.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: start; }
.intro-grid > h2 { grid-column: 1 / span 5; max-width: 16ch; }
.intro-copy { grid-column: 7 / -1; display: grid; gap: var(--space-md); }
.intro-copy p:not(.lead) { color: var(--color-ink-2); }

.node { width: 24px; height: 24px; overflow: visible; color: var(--color-icon); }
.node-icon { stroke-width: 1.5; }
.node-list--rows .node-icon { width: 32px; height: 32px; margin-top: -0.1em; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .node__c, .node__plus { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-long) var(--ease-out); }
  :is(.node-item, .system-index li, .principles li):hover .node__plus { transform: rotate(90deg); }
  :is(.node-item, .system-index li, .principles li):hover .node__c--tl { transform: translate(-3px, -3px); }
  :is(.node-item, .system-index li, .principles li):hover .node__c--tr { transform: translate(3px, -3px); }
  :is(.node-item, .system-index li, .principles li):hover .node__c--br { transform: translate(3px, 3px); }
  :is(.node-item, .system-index li, .principles li):hover .node__c--bl { transform: translate(-3px, 3px); }
}
.node-list { margin: 0; padding: 0; list-style: none; }
.node-list--rows { border-top: 2px solid var(--color-ink); }
.node-list--rows { --mark: 24px; }
.node-list--rows:has(.node-icon) { --mark: 32px; }
.node-list--rows .node-item { display: grid; grid-template-columns: var(--mark) minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.node-list--rows .node { align-self: start; margin-top: 0.15em; }
.node-list--rows p { max-width: 60ch; color: var(--color-ink-2); }
.node-list--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.node-list--grid .node-item { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.node-list--grid .node { width: 28px; height: 28px; margin-bottom: var(--space-xs); }
.node-list--grid h3 { font-size: var(--text-xl); }
.node-list--grid p { color: var(--color-ink-2); }

.system-index { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.system-index li { display: grid; grid-template-columns: 24px minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto auto; column-gap: var(--gap-columns); row-gap: var(--space-3xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.system-index .node { grid-row: 1 / span 2; margin-top: 0.15em; }
.system-index h3 { grid-column: 2; font-size: var(--text-xl); }
.system-provider { grid-column: 2; color: var(--color-muted); font-size: var(--text-sm); }
.system-index p { grid-column: 3; grid-row: 1 / span 2; max-width: 60ch; color: var(--color-ink-2); }
.system-note { max-width: 72ch; margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.step { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); }
.step-num { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--color-signal-ink); }
.step h3 { margin-top: var(--space-xs); }
.step p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }

.svc-offer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap-columns); row-gap: var(--space-xl); padding: var(--space-2xl); border-radius: var(--radius-card); }
.svc-offer__figure { grid-column: 1 / span 5; grid-row: 1; container-type: inline-size; }
.svc-offer__price { display: grid; justify-items: start; gap: var(--space-xs); }
.svc-offer__amount { font-family: var(--font-display); font-size: clamp(2.75rem, 15cqi, 8rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; color: var(--color-accent); }
.svc-offer__qual { font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; color: var(--color-field-muted); }
.svc-offer__price--text { max-width: 14ch; font-family: var(--font-display); font-size: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); font-weight: 700; line-height: 1.05; color: var(--color-accent); text-wrap: balance; }
.svc-offer__body { grid-column: 7 / -1; grid-row: 1 / span 2; display: grid; gap: var(--space-lg); align-content: start; }
.svc-offer__body h2 { font-size: var(--text-3xl); }
.svc-offer__lead { max-width: 56ch; color: var(--color-field-muted); font-size: var(--text-lead); line-height: 1.45; }
.svc-offer .checks li { border-bottom-color: var(--color-field-rule); }
.svc-offer .checks .icon { color: var(--color-accent); }
.svc-offer__actions { grid-column: 1 / span 5; grid-row: 2; align-self: start; display: grid; justify-items: start; gap: var(--space-sm); }
.svc-offer__call { color: var(--color-field-muted); font-size: var(--text-sm); }
.svc-offer__call a { font-weight: 600; white-space: nowrap; }
.svc-addon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); margin-top: var(--space-lg); padding: var(--space-xl) var(--space-2xl); border: 1px solid var(--color-rule-2); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); }
.svc-addon__head { grid-column: 1 / span 5; grid-row: 1 / span 2; display: grid; align-content: start; gap: var(--space-xs); }
.svc-addon__kicker { color: var(--color-signal-ink); font-size: var(--text-sm); font-weight: 600; }
.svc-addon__head h3 { font-size: var(--text-xl); }
.svc-addon__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.svc-addon__price .svc-offer__qual { color: var(--color-ink-2); font-size: var(--text-md); }
.svc-addon__amount { font-size: var(--text-2xl); }
.svc-addon__text, .svc-addon .checks { grid-column: 7 / -1; }
.svc-addon__text { max-width: 60ch; color: var(--color-ink-2); }
.svc-addon .checks .icon { color: var(--color-icon); }

.link-index { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.link-index a { --row-fill: var(--color-signal-soft); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; column-gap: var(--gap-columns); align-items: baseline; min-height: 88px; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); color: var(--color-ink); text-decoration: none; }
.link-index a.has-sym { grid-template-columns: 24px minmax(0, 4fr) minmax(0, 6fr) auto; }
.section--tint .link-index a { --row-fill: var(--color-paper-3); }
.link-index a::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(-1 * var(--space-md)); z-index: -1; background: var(--row-fill); opacity: 0; transform-origin: right center; transition: opacity var(--dur-micro) var(--ease-out); }
.link-index__sym { align-self: start; width: 24px; height: 24px; margin-top: 0.1em; stroke-width: 1.75; color: var(--color-icon); }
.link-index__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: 700; line-height: 1.2; }
.link-index__text { max-width: 60ch; color: var(--color-ink-2); }
.link-index__more { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-link); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.link-index__more .icon { transition: transform var(--dur-short) var(--ease-out); }
.link-index a:hover { color: var(--color-ink); text-decoration: none; }
.link-index a:focus-visible::before { opacity: 1; }
.link-index a:active { transform: translateY(1px); }

.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.faq-grid > .section-head { grid-column: 1 / span 4; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: 0; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.faq-grid > .section-head > h2, .faq-grid > .section-head > p { grid-column: 1; }
.faq-grid > .section-head > p { color: var(--color-ink-2); }
.faq-answer p + p { margin-top: var(--space-sm); }

.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.contact-intro { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.contact-intro h2 { max-width: 14ch; }
.contact-intro .lead { color: var(--color-ink-2); }
.contact-direct { margin: var(--space-xs) 0 0; padding: 0; list-style: none; border-top: 3px solid var(--color-accent); }
.contact-direct li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-sm); align-items: start; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule-2); }
.contact-direct .icon { width: 22px; height: 22px; margin-top: 0.1em; color: var(--color-icon); }
.contact-direct div { display: grid; gap: var(--space-3xs); }
.contact-direct span { color: var(--color-muted); font-size: var(--text-sm); }
.contact-direct a { font-weight: 600; }
.contact-direct li:first-child a { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; color: var(--color-ink); text-decoration: none; }
.contact-direct li:first-child a:hover { color: var(--color-link); }
.contact-urgent { padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.form-card { grid-column: 7 / -1; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.form-card > h3 { font-size: var(--text-xl); }
.form-card > p { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.form-grid { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.required-mark { margin-inline-start: var(--space-3xs); color: var(--color-urgent); }
.field select { appearance: none; padding-inline-end: var(--space-2xl); background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.field select:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field legend { margin-bottom: var(--space-xs); padding: 0; font-size: var(--text-sm); font-weight: 600; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.radio-row label { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.radio-row input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--color-ink); }
.radio-row label span { white-space: nowrap; }
.radio-row label:has(input:checked) { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.form-submit { display: grid; gap: var(--space-sm); margin-top: var(--space-xs); }
.form-submit .btn { width: 100%; }
.form-legal { color: var(--color-muted); font-size: var(--text-sm); }

@media (hover: hover) {
  .link-index a:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .link-index a::before { opacity: 1; transform: scaleX(0); transition: transform 160ms var(--ease-in); }
  .link-index a:focus-visible::before { transform: none; transform-origin: left center; transition: transform 260ms var(--ease-out); }
  .arrow-link:focus-visible .icon, .link-index a:focus-visible .link-index__more .icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .link-index a:hover::before { transform: none; transform-origin: left center; transition: transform 260ms var(--ease-out); }
  .arrow-link:hover .icon, .link-index a:hover .link-index__more .icon { transform: translateX(3px); }
}

@media (max-width: 75rem) {
  .link-index a, .link-index a.has-sym { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2xs); }
  .link-index a.has-sym { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .link-index__text { grid-column: 1; grid-row: 2; }
  .link-index a.has-sym .link-index__text { grid-column: 2; }
  .link-index__sym { grid-row: 1 / span 2; }
  .link-index__more { grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 64rem) {
  .steps { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); border-top-width: 2px; }
  .step { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule-2); }
  .step-num { grid-row: 1 / span 2; font-size: var(--text-2xl); }
  .step h3 { margin-top: 0; }
  .node-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-offer { grid-template-rows: none; }
  .svc-offer__figure, .svc-offer__body, .svc-offer__actions { grid-column: 1 / -1; grid-row: auto; }
  .svc-offer__amount { font-size: clamp(2.75rem, 11cqi, 6rem); }
  .svc-addon__head, .svc-addon__text, .svc-addon .checks { grid-column: 1 / -1; grid-row: auto; }
  .contact-intro, .form-card { grid-column: 1 / -1; }
  .contact-intro { position: static; }
  .faq-grid > .section-head { grid-column: 1 / -1; position: static; }
}
@media (max-width: 60rem) {
  .page-hero__inner { min-height: 0; padding-block: var(--space-md) var(--space-xl); }
  .page-hero__head { padding-top: var(--space-md); }
  .page-hero__copy, .page-hero__facts { grid-column: 1 / -1; }
  .intro-grid > h2, .intro-copy { grid-column: 1 / -1; }
  .system-index li { grid-template-columns: 24px minmax(0, 1fr); row-gap: var(--space-2xs); }
  .node-list--rows .node-item { grid-template-columns: var(--mark) minmax(0, 1fr); row-gap: var(--space-2xs); }
  .node-list--rows .node { grid-row: 1 / span 2; }
  .node-list--rows p, .system-index p { grid-column: 2; grid-row: auto; }
  .system-index .node { grid-row: 1 / span 3; }
  .svc-offer { padding: var(--space-xl); }
  .svc-addon { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .page-hero__head { gap: var(--space-sm); }
  .page-hero h1 { hyphens: auto; -webkit-hyphens: auto; }

  .page-sym { width: 0.8em; height: 0.8em; font-size: var(--hero-h1); margin-top: 0.1em; }
  .page-sym .icon { stroke-width: 1.6; }
  .node-list--grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .svc-offer { padding: var(--space-lg); }
  .link-index__more { display: none; }
  .link-index a, .link-index a.has-sym { grid-template-columns: minmax(0, 1fr); }
  .link-index a.has-sym { grid-template-columns: 24px minmax(0, 1fr); }
}

:root { --lg-blue-100: #daecff; --lg-blue-200: #b5d8ff; --lg-blue-400: #379bfc; --lg-blue-50: #eef6ff; --lg-blue-500: #0f7bd6; --lg-blue-600: #0069bb; --lg-blue-700: #00579e; --lg-cyan-200: #b3e8f8; --lg-cyan-400: #10bddf; --lg-fs-lg: clamp(1.375rem, 1.25rem + 0.4vw, 1.6875rem); --lg-fs-sm: 0.9375rem; --lg-green-50: #ecfedf; --lg-green-700: #3d6900; --lg-navy-100: #dcecf9; --lg-navy-300: #97bcdc; --lg-navy-600: #2b5f87; --lg-navy-800: #013a60; --lg-navy-900: #022237; --lg-navy-950: #001425; --lg-radius-sm: 3px; --lg-red-300: #ff8b7b; --lg-red-50: #fff2ef; --lg-red-600: #c10002; --lg-slate-100: #ecf5fc; --lg-slate-200: #dee8f0; --lg-slate-300: #cbd6df; --lg-slate-400: #99a7b3; --lg-slate-50: #f6fbff; --lg-slate-500: #6d7d8b; --lg-slate-600: #4f606e; --lg-slate-700: #3e4c59; --lg-white: oklch(99.4% 0.003 242); --lg-mist: #f7fbff; --lg-shadow: rgba(0, 33, 55, 0.4); --lg-shadow-strong: rgba(0, 33, 55, 0.55); --lg-shadow-soft: rgba(0, 33, 55, 0.25); --lg-shadow-phone: rgba(0, 20, 37, 0.6); --lg-cyan-line: rgba(136, 213, 234, 0.55); --lg-blue-grid: rgba(15, 123, 214, 0.04); --lg-blue-wash: rgba(15, 123, 214, 0.06); }
.a11y-card .check-list { gap: var(--space-sm); margin-top: 1.25rem; font-size: 1.2109rem; }
.check-list { list-style: none; display: grid; gap: var(--space-md); }
.check-list li { display: flex; gap: var(--space-md); align-items: flex-start; line-height: 1.5; }
.check-list .icon { margin-top: 0.15em; color: var(--lg-blue-600); stroke-width: 2.5; }
.baseline .check-list { gap: var(--space-md); }
@media (min-width: 56em) {
  .baseline .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.125rem; }
}
.card-label { display: inline-flex; margin-bottom: var(--space-md); padding: var(--space-2xs) 0.625rem; border-radius: 0.25rem; background: var(--lg-blue-50); color: var(--lg-blue-700); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; }
.admin-preview-grid { display: grid; gap: clamp(2.1875rem, 1.25rem + 2.5vw, 4.375rem); align-items: center; }
.admin-preview-figure { min-width: 0; margin: 0; }
.admin-mock { border: 0.0625rem solid var(--lg-slate-300); border-radius: var(--radius-card); background: var(--lg-white); box-shadow: 0 1.875rem 3.75rem -1.75rem var(--lg-shadow); }
.admin-mock-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem 1.25rem; padding: var(--space-md) var(--space-lg); border-radius: calc(var(--radius-card) - 0.0625rem) calc(var(--radius-card) - 0.0625rem) 0 0; background: linear-gradient(135deg, var(--lg-navy-950), var(--lg-navy-800)); color: var(--lg-navy-100); font-family: var(--font-body); font-size: 0.9375rem; letter-spacing: 0.02em; }
.admin-mock-path { min-width: 0; }
.admin-mock-status { padding: var(--space-3xs) var(--space-sm); border: 0.0625rem solid var(--lg-cyan-line); border-radius: 62.4375rem; color: var(--lg-cyan-200); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.admin-mock-body { display: grid; gap: 1.25rem; padding: var(--space-lg) var(--space-lg); }
.admin-mock-field { position: relative; display: grid; align-content: start; gap: var(--space-xs); min-width: 0; }
.admin-mock-label { padding-right: var(--space-xl); color: var(--lg-slate-600); font-size: 0.9375rem; font-weight: 600; }
.admin-mock-value { display: flex; align-items: center; gap: 0.625rem; min-height: 3.125rem; padding: 0.625rem var(--space-md); border: 0.0625rem solid var(--lg-slate-300); border-radius: var(--lg-radius-sm); background: var(--lg-slate-50); color: var(--lg-navy-900); font-size: 1.1719rem; overflow-wrap: anywhere; }
.admin-mock-field--select .admin-mock-value { justify-content: space-between; }
.admin-mock-field--select .admin-mock-value::after { content: ""; flex: none; width: 0.5625rem; height: 0.5625rem; margin-right: var(--space-3xs); border-right: 0.125rem solid var(--lg-slate-500); border-bottom: 0.125rem solid var(--lg-slate-500); transform: translateY(-0.1rem) rotate(45deg); }
.admin-mock-chips { flex-wrap: wrap; gap: var(--space-xs); }
.admin-mock-chip { padding: var(--space-3xs) var(--space-sm); border-radius: 62.4375rem; background: var(--lg-blue-100); color: var(--lg-blue-700); font-size: 1.0156rem; font-weight: 600; }
.admin-mock-avatar { display: inline-grid; flex: none; place-items: center; width: 2.0312rem; height: 2.0312rem; border-radius: 50%; background: var(--lg-navy-800); color: var(--lg-white); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; }
.admin-mock-hint { color: var(--lg-slate-600); font-size: 0.9375rem; line-height: 1.45; }
.admin-mock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-md); padding: 1.25rem var(--space-lg) var(--space-lg); border-top: 0.0625rem solid var(--lg-slate-200); }
.admin-mock-button { position: relative; display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; border: 0.125rem solid var(--lg-navy-800); border-radius: var(--lg-radius-sm); color: var(--lg-navy-800); font-size: 1.0938rem; font-weight: 650; }
.admin-mock-button--primary { border-color: var(--lg-cyan-400); background: var(--lg-cyan-400); color: var(--lg-navy-900); }
.admin-mock-marker { position: absolute; top: -0.7rem; right: -0.7rem; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 0.125rem solid var(--lg-white); border-radius: 50%; background: var(--lg-blue-600); color: var(--lg-white); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1; box-shadow: 0 0.3125rem 0.9375rem var(--lg-shadow-soft); }
.admin-mock-field > .admin-mock-marker { top: -0.3rem; right: 0; }
.admin-preview-figure figcaption { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--lg-fs-sm); }
.admin-callouts { display: grid; gap: var(--space-lg); list-style: none; counter-reset: callout; }
.admin-callouts li { position: relative; min-height: 2.1875rem; padding-left: 3.4375rem; counter-increment: callout; }
.admin-callouts li::before { content: counter(callout); position: absolute; top: -0.05rem; left: 0; display: grid; place-items: center; width: 2.1875rem; height: 2.1875rem; border-radius: 50%; background: var(--lg-blue-600); color: var(--lg-white); font-family: var(--font-body); font-size: 1.0156rem; font-weight: 700; }
.compare-grid { display: grid; gap: 1.25rem; }
.compare-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5625rem, 1.25rem + 1vw, 2.1875rem); border: 0.0625rem solid var(--lg-slate-200); border-radius: var(--radius-card); background: var(--lg-white); }
.compare-card--highlight { border-color: var(--lg-blue-200); border-top-color: transparent; background: linear-gradient(90deg, var(--lg-blue-500), var(--lg-cyan-400)) top / 100% 0.25rem no-repeat border-box, linear-gradient(180deg, var(--lg-blue-50), var(--lg-mist) 65%) padding-box; }
.compare-card--highlight dl, .compare-card--highlight dl > div { border-color: var(--lg-blue-100); }
.compare-card--highlight .card-label { background: var(--lg-white); box-shadow: 0 0 0 0.0625rem var(--lg-blue-100); }
.compare-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem var(--space-md); }
.compare-card-head h3 { font-size: 1.4062rem; }
.compare-card-head .card-label { margin-bottom: 0; }
.compare-card dl { margin-top: 1.25rem; border-top: 0.0625rem solid var(--lg-slate-200); }
.compare-card dl > div { display: grid; gap: var(--space-2xs); padding: var(--space-md) 0; border-bottom: 0.0625rem solid var(--lg-slate-200); }
.compare-card dt { color: var(--color-ink-2); font-size: 1.0156rem; }
.compare-card dd { margin: 0; font-size: 1.1719rem; }
.compare-card dl > div:last-child dd { color: var(--color-ink); font-family: var(--font-display); font-weight: 650; }
.compare-card-link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-lg); font-weight: 650; }
.compare-card-link .icon { width: 1.25rem; height: 1.25rem; transition: transform .2s var(--ease-out); }
.compare-card-link:hover .icon { transform: translateX(0.1875rem); }
.compare-note { max-width: 72.5rem; margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--lg-fs-sm); }
@media (min-width: 40em) {
  .admin-mock-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-mock-field:first-child, .admin-mock-field--chips { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .admin-preview-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .compare-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-cases .card-label { display: none; }
.app-demo-figure { min-width: 0; margin: 0; }
.app-demo-stage { display: grid; align-items: start; }
.app-window { min-width: 0; border: 0.0625rem solid var(--lg-slate-300); border-radius: var(--radius-card); background: var(--lg-white); box-shadow: 0 1.875rem 3.75rem -1.75rem var(--lg-shadow); }
.app-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem 1.25rem; padding: 0.875rem var(--space-lg); border-radius: calc(var(--radius-card) - 0.0625rem) calc(var(--radius-card) - 0.0625rem) 0 0; background: linear-gradient(135deg, var(--lg-navy-950), var(--lg-navy-800)); color: var(--lg-navy-100); font-family: var(--font-body); font-size: 0.9375rem; }
.app-window-brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--lg-white); }
.app-window-logo { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 0.375rem; background: var(--lg-cyan-400); color: var(--lg-navy-900); font-weight: 700; }
.app-window-body { display: grid; }
.app-list { padding: var(--space-md) var(--space-md) 1.25rem; border-bottom: 0.0625rem solid var(--lg-slate-200); }
.app-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 0.625rem 0.625rem var(--space-md); font-weight: 650; color: var(--color-ink); }
.app-new { position: relative; padding: var(--space-xs) 0.875rem; border-radius: var(--lg-radius-sm); background: var(--lg-blue-50); color: var(--lg-blue-700); font-size: 1.0156rem; font-weight: 650; }
.app-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-sm); border-radius: var(--lg-radius-sm); border-left: 0.1875rem solid transparent; }
.app-row + .app-row { margin-top: var(--space-3xs); }
.app-row.is-current { border-left-color: var(--lg-blue-600); background: var(--lg-blue-50); }
.app-row-id { color: var(--lg-slate-600); font-family: var(--font-body); font-size: 0.9375rem; }
.app-row-job { display: grid; min-width: 0; color: var(--lg-navy-900); font-size: 1.1719rem; font-weight: 600; }
.app-row-job small { color: var(--lg-slate-600); font-size: 1.0156rem; font-weight: 400; }
.app-pill { padding: var(--space-3xs) var(--space-sm); border-radius: 62.4375rem; font-size: 0.9375rem; font-weight: 650; white-space: nowrap; }
.app-pill--active { background: var(--lg-blue-100); color: var(--lg-blue-700); }
.app-pill--planned { background: var(--lg-slate-100); color: var(--lg-slate-700); }
.app-pill--warn { background: var(--lg-red-50); color: var(--lg-red-600); }
.app-pill--done { background: var(--lg-green-50); color: var(--lg-green-700); }
.app-detail { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-lg) var(--space-lg) var(--space-lg); }
.app-detail-id { color: var(--lg-slate-600); font-family: var(--font-body); font-size: 0.9375rem; }
.app-detail-title { color: var(--color-ink); font-family: var(--font-display); font-size: 1.5625rem; font-weight: 650; }
.app-stages { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0 0.625rem; padding-right: 1.875rem; }
.app-stages > .admin-mock-marker { top: -0.2rem; right: 0; }
.app-stage { padding: var(--space-2xs) var(--space-sm); border-radius: 62.4375rem; background: var(--lg-slate-100); color: var(--lg-slate-600); font-size: 0.9375rem; font-weight: 600; }
.app-stage.is-done { background: var(--lg-blue-100); color: var(--lg-blue-700); }
.app-stage.is-now { background: var(--lg-blue-600); color: var(--lg-white); }
.app-facts { margin: 0.625rem 0 0; border-top: 0.0625rem solid var(--lg-slate-200); }
.app-facts > div { display: grid; grid-template-columns: 8.125rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 0.0625rem solid var(--lg-slate-200); }
.app-facts-label { color: var(--lg-slate-600); font-size: 1.0156rem; }
.app-facts-value { display: flex; align-items: center; gap: 0.625rem; margin: 0; color: var(--lg-navy-900); font-size: 1.125rem; }
.app-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: 1.25rem; }
.app-phone { position: relative; justify-self: center; width: 18.75rem; margin-top: calc(-1 * var(--space-lg)); padding: 0.625rem; border-radius: 2.5rem; background: var(--lg-navy-900); box-shadow: 0 2.5rem 4.375rem -1.5rem var(--lg-shadow-phone); }
.app-phone > .admin-mock-marker { top: 1.5625rem; right: -0.6rem; }
.app-phone-screen { display: grid; gap: var(--space-sm); padding: var(--space-lg) 1.125rem 1.125rem; border-radius: 1.9375rem; background: var(--lg-white); }
.app-phone-kicker { color: var(--lg-slate-600); font-family: var(--font-body); font-size: 0.875rem; }
.app-phone-title { margin-top: -0.35rem; color: var(--color-ink); font-family: var(--font-display); font-size: 1.3125rem; font-weight: 650; }
.app-phone-row { display: flex; justify-content: space-between; gap: var(--space-md); padding: 0.625rem var(--space-sm); border: 0.0625rem solid var(--lg-slate-300); border-radius: var(--lg-radius-sm); background: var(--lg-slate-50); font-size: 1.0156rem; }
.app-phone-row span { color: var(--lg-slate-600); }
.app-phone-row strong { color: var(--lg-navy-900); font-weight: 600; text-align: right; }
.app-phone-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
.app-phone-photos span { aspect-ratio: 1; border-radius: var(--lg-radius-sm); background: linear-gradient(135deg, var(--lg-navy-300), var(--lg-navy-600)); }
.app-phone-photos span:nth-child(2) { background: linear-gradient(135deg, var(--lg-slate-300), var(--lg-slate-500)); }
.app-phone-photos .app-phone-add { display: grid; place-items: center; border: 0.0938rem dashed var(--lg-slate-400); background: var(--lg-white); color: var(--lg-slate-500); font-size: 1.5625rem; }
.app-phone-sign { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm) var(--space-xs); border: 0.0625rem solid var(--lg-slate-300); border-radius: var(--lg-radius-sm); }
.app-phone-sign svg { width: 100%; height: 2.8125rem; fill: none; stroke: var(--lg-navy-800); stroke-width: 2; stroke-linecap: round; }
.app-phone-sign span { border-top: 0.0625rem solid var(--lg-slate-300); padding-top: var(--space-2xs); color: var(--lg-slate-600); font-size: 0.875rem; }
.app-phone-button { display: block; padding: var(--space-sm); border-radius: var(--lg-radius-sm); background: var(--lg-cyan-400); color: var(--lg-navy-900); font-size: 1.0938rem; font-weight: 650; text-align: center; }
.app-demo-figure figcaption { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--lg-fs-sm); }
.app-demo .admin-callouts { margin-top: var(--space-xl); }
.app-extras { margin-top: var(--space-2xl); padding: clamp(1.5625rem, 1.25rem + 1vw, 2.1875rem); border: 0.0625rem solid var(--lg-slate-200); border-radius: var(--radius-card); background: var(--lg-slate-50); }
.app-extras h3 { margin-bottom: 1.25rem; font-size: 1.4062rem; }
.app-extras-list { gap: var(--space-sm) var(--space-xl); }
.before-after-grid { display: grid; gap: 1.25rem; }
.ba-card { padding: clamp(1.5625rem, 1.25rem + 1vw, 2.1875rem); border: 0.0625rem solid var(--lg-slate-200); border-radius: var(--radius-card); background: var(--lg-white); }
.ba-card--after { border-color: var(--lg-blue-200); border-top-color: transparent; background: linear-gradient(90deg, var(--lg-blue-500), var(--lg-cyan-400)) top / 100% 0.25rem no-repeat border-box, linear-gradient(180deg, var(--lg-blue-50), var(--lg-mist) 65%) padding-box; }
.ba-kicker { color: var(--lg-blue-700); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; }
.ba-count { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: 1.1719rem; }
.ba-count strong { margin-right: var(--space-xs); font-variant-numeric: tabular-nums lining-nums; color: var(--color-ink); font-family: var(--font-display); font-size: 2.8125rem; line-height: 1; }
.ba-card--after .ba-count strong { color: var(--lg-blue-600); }
.ba-steps { display: grid; gap: 0.625rem; margin-top: var(--space-lg); list-style: none; counter-reset: ba; }
.ba-steps li { position: relative; padding: 0.625rem var(--space-md) 0.625rem 3.25rem; border-radius: var(--lg-radius-sm); background: var(--lg-slate-50); color: var(--lg-slate-700); font-size: 1.1719rem; counter-increment: ba; }
.ba-steps li::before { content: counter(ba); position: absolute; top: 0.625rem; left: 0.9375rem; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--lg-slate-300); color: var(--lg-navy-900); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; }
.ba-card--after .ba-steps li { background: var(--lg-white); color: var(--lg-navy-900); font-weight: 600; box-shadow: 0 0 0 0.0625rem var(--lg-blue-100); }
.ba-card--after .ba-steps li::before { background: var(--lg-blue-600); color: var(--lg-white); }
@media (min-width: 40em) {
  .app-extras-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-demo .admin-callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .app-window-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .app-list { border-bottom: 0; border-right: 0.0625rem solid var(--lg-slate-200); }
  .before-after-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .app-demo-stage { grid-template-columns: minmax(0, 1fr) auto; }
  .app-phone { justify-self: auto; margin: var(--space-3xl) 0 0 -2rem; }
  .app-detail { padding-right: var(--space-2xl); }
  .app-demo .admin-callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.875rem; }
  .app-extras-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ba-dropped { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: 1.875rem; padding-top: var(--space-lg); border-top: 0.0625rem solid var(--lg-blue-100); color: var(--lg-slate-600); font-size: 1.0156rem; }
.ba-dropped s { padding: var(--space-3xs) var(--space-sm); border-radius: 62.4375rem; background: var(--lg-white); box-shadow: 0 0 0 0.0625rem var(--lg-slate-200); color: var(--lg-slate-600); text-decoration-color: var(--lg-red-300); }
.admin-preview { background: var(--lg-white); }
.admin-preview-grid { align-items: start; }
.admin-mock { overflow: hidden; border-radius: 0.25rem; box-shadow: 0 1.875rem 3.75rem -2.2rem var(--lg-shadow-strong); }
.admin-mock-bar { border-radius: 0; font-size: var(--text-sm); }
.admin-mock-status { border-radius: 0.125rem; font-size: var(--text-sm); letter-spacing: 0.01em; text-transform: none; }
:is(
  .admin-mock-label,
  .admin-mock-value,
  .admin-mock-chip,
  .admin-mock-avatar,
  .admin-mock-hint,
  .admin-mock-button,
  .admin-preview-figure figcaption
) { font-size: var(--text-sm); }
.admin-preview .admin-mock-marker { display: none; }
.admin-preview .admin-callouts { counter-reset: none; gap: 0; border-top: 0.0625rem solid var(--lg-slate-300); }
.admin-preview .admin-callouts li { min-height: 0; padding: 1.25rem 0 1.25rem var(--space-xl); border-bottom: 0.0625rem solid var(--lg-slate-300); color: var(--lg-slate-700); font-size: var(--text-sm); line-height: 1.65; }
.admin-preview .admin-callouts li::before { content: ""; top: 1.4375rem; width: 1rem; height: 1rem; border: 0.0625rem solid var(--lg-blue-400); border-radius: 0; background: linear-gradient(var(--lg-blue-700), var(--lg-blue-700)) center / 0.25rem 0.25rem no-repeat, var(--lg-white); }
.compare-grid { gap: 1.25rem; }
.compare-card { border-color: var(--lg-slate-300); border-radius: 0; box-shadow: none; }
.compare-card--highlight { border-top-color: transparent; background: linear-gradient(90deg, var(--lg-blue-600), var(--lg-cyan-400)) top / 100% 0.1875rem no-repeat border-box, linear-gradient(180deg, var(--lg-blue-50), var(--lg-white) 70%) padding-box; }
.compare-card :is(dt, dd, .compare-card-link), .compare-note { font-size: var(--text-sm); }
.app-demo { position: relative; background: var(--lg-white); }
.app-demo-stage { position: relative; padding: var(--space-lg); border: 0.0625rem solid var(--lg-slate-300); background: linear-gradient(var(--lg-blue-grid) 0.0625rem, transparent 0.0625rem), linear-gradient(90deg, var(--lg-blue-grid) 0.0625rem, transparent 0.0625rem), var(--lg-slate-50); background-size: 5rem 5rem; }
.app-demo-stage::before { content: ""; position: absolute; top: -0.05rem; right: -0.05rem; width: 2.75rem; height: 2.75rem; border-top: 0.0625rem solid var(--lg-blue-500); border-right: 0.0625rem solid var(--lg-blue-500); }
.app-window { overflow: hidden; border-radius: 0.25rem; box-shadow: 0 1.875rem 3.75rem -2.2rem var(--lg-shadow-strong); }
.app-header { border-radius: 0; font-size: var(--text-sm); }
.app-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.app-pill { grid-column: 2; justify-self: start; }
:is(
  .app-list-head,
  .app-new,
  .app-row-id,
  .app-row-job,
  .app-row-job small,
  .app-pill,
  .app-detail-id,
  .app-stage,
  .app-facts-label,
  .app-facts-value,
  .admin-mock-avatar,
  .admin-mock-button,
  .app-phone-kicker,
  .app-phone-row,
  .app-phone-sign span,
  .app-phone-button
) { font-size: var(--text-sm); }
.app-detail-title { font-size: 1.25rem; }
.app-phone-title { font-size: 1.05rem; }
.app-demo .admin-mock-marker { display: none; }
.app-demo-figure figcaption { margin-top: var(--space-md); font-size: var(--text-sm); }
.app-demo .admin-callouts { counter-reset: none; gap: 0 3rem; margin-top: clamp(2.25rem, 1.75rem + 1.5vw, 3.5rem); }
.app-demo .admin-callouts li { min-height: 0; padding: var(--space-lg) 0 var(--space-lg) var(--space-xl); border-top: 0.0625rem solid var(--lg-slate-300); color: var(--lg-slate-700); font-size: var(--text-sm); line-height: 1.65; }
.app-demo .admin-callouts li::before { content: ""; top: 1.5625rem; width: 1rem; height: 1rem; border: 0.0625rem solid var(--lg-blue-400); border-radius: 0; background: linear-gradient(var(--lg-blue-700), var(--lg-blue-700)) center / 0.25rem 0.25rem no-repeat, var(--lg-white); }
.app-extras { display: grid; gap: 1.875rem var(--space-2xl); margin-top: var(--space-2xl); padding: var(--space-lg) 0; border: 0; border-block: 0.0625rem solid var(--lg-slate-300); border-radius: 0; background: transparent; }
.app-extras h3 { margin: 0; font-size: var(--lg-fs-lg); text-wrap: balance; }
.app-extras-list { font-size: var(--text-sm); }
.before-after { border-block: 0.0625rem solid var(--lg-slate-200); background: var(--lg-slate-50); }
.before-after-grid { gap: 0; border-block: 0.0625rem solid var(--lg-slate-300); }
.ba-card { padding: clamp(1.75rem, 1.25rem + 1.5vw, 3rem) 0; border: 0; border-radius: 0; background: transparent; }
.ba-card--after { margin-top: 1.875rem; padding-inline: var(--space-lg); border-left: 0.1875rem solid var(--lg-blue-600); background: linear-gradient(90deg, var(--lg-blue-wash), transparent 75%); }
.ba-kicker { font-size: var(--text-sm); }
.ba-count { font-size: var(--text-sm); }
.ba-count strong { font-size: 2.25rem; }
.ba-steps { counter-reset: none; gap: 0; margin-top: 1.75rem; border-top: 0.0625rem solid var(--lg-slate-300); }
.ba-steps li, .ba-card--after .ba-steps li { min-height: 3.5rem; padding: var(--space-md) 0 var(--space-md) var(--space-xl); border-bottom: 0.0625rem solid var(--lg-slate-300); border-radius: 0; background: transparent; box-shadow: none; color: var(--lg-slate-700); font-size: var(--text-sm); font-weight: 400; line-height: 1.5; counter-increment: none; }
.ba-card--after .ba-steps li { color: var(--lg-navy-900); font-weight: 600; }
.ba-steps li::before, .ba-card--after .ba-steps li::before { content: ""; top: 1.25rem; left: 0; width: 1rem; height: 1rem; border: 0.0625rem solid var(--lg-slate-400); border-radius: 0; background: var(--lg-white); }
.ba-card--after .ba-steps li::before { border-color: var(--lg-blue-500); background: linear-gradient(var(--lg-blue-700), var(--lg-blue-700)) center / 0.25rem 0.25rem no-repeat, var(--lg-white); }
.ba-dropped { font-size: var(--text-sm); }
.ba-dropped s { border-radius: 0.125rem; box-shadow: none; }
.before-after .compare-note { font-size: var(--text-sm); line-height: 1.6; }
.admin-preview .admin-callouts li::before, .app-demo .admin-callouts li::before, .ba-steps li::before, .ba-card--after .ba-steps li::before { width: 1.5rem; height: 1.5rem; border: 0; border-radius: 0; background: var(--color-icon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M1 7V1h6M17 1h6v6M23 17v6h-6M7 23H1v-6' stroke='black' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='square'/%3E%3Cpath d='M8 12h8M12 8v8' stroke='black' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M1 7V1h6M17 1h6v6M23 17v6h-6M7 23H1v-6' stroke='black' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='square'/%3E%3Cpath d='M8 12h8M12 8v8' stroke='black' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (min-width: 48em) {
  .app-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .app-pill { grid-column: auto; justify-self: auto; }
  .app-extras { grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr); }
  .before-after-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ba-card { padding-right: clamp(1.875rem, 3vw, 3.75rem); }
  .ba-card--after { margin-top: 0; padding-left: clamp(1.875rem, 3vw, 3.75rem); padding-right: 0; }
}
@media (max-width: 63.99em) {
  .app-phone { margin: 1.25rem auto 0; }
}

:where(.admin-callouts, .ba-steps, .check-list, .app-extras-list, .compare-card dl, .compare-card dd) { margin: 0; padding: 0; list-style: none; }

.intro-sub { font-size: var(--text-xl); }

.section-head > h2, .intro-grid > h2, .next-project h2 { hyphens: auto; -webkit-hyphens: auto; }
.intro-copy .checks { margin-top: var(--space-xs); border-top: 1px solid var(--color-rule-2); }

.proj-index { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-rule-2); }
.proj-index li + li .project-card { border-top: 1px solid var(--color-rule); }
.project-card { position: relative; display: grid; grid-template-columns: 176px minmax(0, 3fr) minmax(0, 5fr) auto; column-gap: var(--gap-columns); align-items: center; min-height: 128px; padding-block: var(--space-lg); color: var(--color-ink); text-decoration: none; }
.project-card::after { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 2px; background: var(--color-link); opacity: 0; transform-origin: right center; transition: opacity var(--dur-micro) var(--ease-out); pointer-events: none; }
.project-card:hover { color: var(--color-ink); text-decoration: none; }
.project-card:focus-visible::after { opacity: 1; }
.project-card:active { transform: translateY(1px); }
.proj-logo { display: flex; align-items: center; height: 80px; }
.proj-logo img { width: auto; height: auto; max-width: 100%; max-height: 72px; object-fit: contain; mix-blend-mode: multiply; }
.proj-wordmark { display: grid; place-items: center; width: 100%; height: 100%; padding-inline: var(--space-sm); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-field-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; text-align: center; }
.proj-name { display: grid; gap: var(--space-2xs); justify-items: start; }
.proj-name h3 { font-size: var(--text-title); transition: color var(--dur-short) var(--ease-out); }
.proj-kind { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-signal-soft); color: var(--color-signal-ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.proj-body { display: grid; gap: var(--space-2xs); }
.project-summary { font-weight: 600; }
.proj-desc { max-width: 62ch; color: var(--color-ink-2); }
.proj-credit { color: var(--color-muted); font-size: var(--text-sm); }
.proj-more { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-link); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.proj-more .icon { transition: transform var(--dur-short) var(--ease-out); }
.project-card:focus-visible h3 { color: var(--color-link); }
.proj-note { max-width: 72ch; margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }
.proj-note strong { color: var(--color-ink); }

.case-card { display: grid; gap: var(--space-sm); justify-items: start; padding-top: var(--space-lg); border-top: 3px solid var(--color-accent); }
.case-card__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); justify-self: stretch; min-height: 120px; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); }
.case-card__logos img { width: auto; height: auto; max-width: 100%; max-height: 88px; object-fit: contain; }
.case-card__wordmark { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); }
.case-card__kind { margin-top: var(--space-xs); color: var(--color-accent-on-field); font-weight: 600; }
.case-card__role { color: var(--color-field-muted); font-size: var(--text-sm); line-height: 1.6; }
.case-card .arrow-link { min-height: 32px; }
.fact-strip { border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.fact-strip dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; }
.fact-strip dl > div { display: grid; align-content: start; gap: var(--space-3xs); padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
.fact-strip dl > div + div { padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-rule); }
.fact-strip dt { color: var(--color-muted); font-size: var(--text-sm); }
.fact-strip dd { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }

.next-project { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap-columns); row-gap: var(--space-xs); align-items: end; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); color: var(--color-ink); text-decoration: none; }
.next-project h2 { grid-column: 1; font-size: var(--text-display-s); transition: color var(--dur-short) var(--ease-out); }
.next-project__text { grid-column: 1; max-width: 56ch; color: var(--color-ink-2); }
.next-project__more { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-link); font-weight: 600; white-space: nowrap; }
.next-project__more .icon { transition: transform var(--dur-short) var(--ease-out); }
.next-project:hover { color: var(--color-ink); text-decoration: none; }
.next-project:hover h2, .next-project:focus-visible h2 { color: var(--color-link); }

@media (hover: hover) {
  .project-card:hover::after { opacity: 1; }
  .project-card:hover h3 { color: var(--color-link); }
}
@media (prefers-reduced-motion: no-preference) {
  .project-card::after { opacity: 1; transform: scaleX(0); transition: transform 160ms var(--ease-in); }
  .project-card:focus-visible::after { transform: none; transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
  .project-card:focus-visible .proj-more .icon, .next-project:focus-visible .next-project__more .icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .project-card:hover::after { transform: none; transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
  .project-card:hover .proj-more .icon, .next-project:hover .next-project__more .icon { transform: translateX(3px); }
}
@media (max-width: 64rem) {
  .project-card { grid-template-columns: 128px minmax(0, 1fr); row-gap: var(--space-sm); align-items: start; }
  .proj-logo { grid-row: 1 / span 3; height: 72px; }
  .proj-name, .proj-body, .proj-more { grid-column: 2; }
}
@media (max-width: 40rem) {
  .project-card { grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-md); }
  .proj-logo { height: 56px; }
  .proj-logo img { max-height: 52px; }
  .proj-wordmark { font-size: var(--text-md); }
  .fact-strip dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip dl > div { padding: var(--space-md) var(--space-sm) var(--space-md) 0; }
  .fact-strip dl > div + div { padding-inline-start: var(--space-sm); }
  .fact-strip dl > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .next-project { grid-template-columns: minmax(0, 1fr); }
  .next-project__more { grid-column: 1; grid-row: auto; margin-top: var(--space-xs); }
}

.page-hero--compact .page-hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; row-gap: var(--space-lg); padding-block: var(--space-md) var(--space-2xl); }
.page-hero--compact .page-hero__head { padding-top: var(--space-xl); }
.page-hero--compact h1 { font-size: clamp(2.25rem, 3.2vw + 0.75rem, 4rem); }
.page-hero--compact .page-hero__copy { grid-column: 1; max-width: 46rem; }

.legal-page .copy-rich { display: grid; justify-items: start; }
.copy-rich > * { max-width: 72ch; }
.copy-rich > * + * { margin-top: var(--space-md); }
.copy-rich h2 { justify-self: stretch; width: 100%; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); font-size: var(--text-2xl); }
.copy-rich h2:first-child, .copy-rich .review-note + h2 { margin-top: var(--space-xl); }
.copy-rich h3 { margin-top: var(--space-xl); font-size: var(--text-xl); }
.copy-rich p, .copy-rich li { color: var(--color-ink-2); }
.copy-rich strong { color: var(--color-ink); }
.copy-rich ul, .copy-rich ol { padding-inline-start: var(--space-lg); }
.copy-rich li + li { margin-top: var(--space-2xs); }
.copy-rich code { padding: 0 var(--space-3xs); border-radius: 3px; background: var(--color-paper-3); font-size: 0.9em; }
.copy-rich small { color: var(--color-muted); font-size: var(--text-sm); }
.review-note { justify-self: stretch; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-signal-soft); border-radius: var(--radius-card); background: var(--color-signal-wash); color: var(--color-ink-2); }
.review-note + .review-note { margin-top: var(--space-sm); }
.legal-data { display: grid; margin: 0; border-top: 1px solid var(--color-rule-2); justify-self: stretch; }
.legal-data > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule-2); }
.legal-data dt { color: var(--color-muted); font-size: var(--text-sm); }
.legal-data dd { margin: 0; font-weight: 600; }
@media (max-width: 40rem) {
  .legal-data > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}

.section--alt { background: var(--color-paper-2); }
.faq-item summary h3 { max-width: none; font: inherit; letter-spacing: normal; line-height: inherit; }

.faq-topics { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.faq-topics ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.faq-topics a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.faq-topics a:hover { border-color: var(--color-ink); background: var(--color-paper-2); color: var(--color-ink); }
.faq-topics a:active { transform: translateY(1px); }

.node-list--pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.node-list--pairs .node-item { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.node-list--pairs .node { width: 28px; height: 28px; margin-bottom: var(--space-xs); }
.node-list--pairs h3 { font-size: var(--text-xl); }
.node-list--pairs p { max-width: 56ch; color: var(--color-ink-2); }

.about-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: var(--space-lg); align-items: end; }
.about-portrait { position: relative; margin: 0; }
.service-hero-photo-wrap { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-card); background: var(--color-field-2); }
.service-hero-photo-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 50%, var(--color-photo-fade) 100%); }
.service-hero-photo-wrap picture { display: block; width: 100%; height: 100%; }
.service-hero-photo { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.service-hero-photo-wrap.is-flipped picture { transform: scaleX(-1); }
.portrait-rain { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; background: var(--color-field); }
.portrait-rain.is-on { opacity: 1; }
@media (forced-colors: active), print { .portrait-rain { display: none; } }
.about-portrait figcaption { position: absolute; z-index: 2; inset-inline: var(--space-md); bottom: var(--space-md); display: grid; gap: var(--space-3xs); color: var(--color-field-ink); }
.about-portrait figcaption strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.15; }
.about-portrait figcaption span { color: var(--color-field-muted); font-size: var(--text-sm); line-height: 1.3; }

.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.about-text { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); }
.about-text h2 { max-width: 20ch; }
.about-text .lead { color: var(--color-ink-2); }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.principles li { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); }
.principles h3 { font-size: var(--text-lg); }
.principles p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.profile { grid-column: 9 / -1; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); padding: var(--space-xl); border-radius: var(--radius-card); }
.profile-head { display: flex; align-items: center; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-field-rule); }
.profile-head svg { flex: none; width: 56px; height: 56px; }
.profile-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.15; }
.profile-role { color: var(--color-field-muted); font-size: var(--text-sm); }
.profile dl { display: grid; gap: var(--space-md); margin: 0; padding-top: var(--space-lg); }
.profile dt { color: var(--color-field-muted); font-size: var(--text-sm); }
.profile dd { margin: var(--space-3xs) 0 0; line-height: 1.5; }
.profile-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); font-weight: 600; }

.cv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.cv-head { grid-column: 1 / span 5; display: grid; gap: var(--space-md); }
.cv-head p { max-width: 48ch; color: var(--color-ink-2); }
.cv-list { grid-column: 7 / -1; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.cv-entry { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.cv-date { color: var(--color-signal-ink); font-size: var(--text-sm); font-weight: 600; }
.cv-entry h3 { font-size: var(--text-xl); }
.cv-entry h3 + p { max-width: 60ch; color: var(--color-ink-2); }

@media (max-width: 64rem) {
  .about-text, .profile { grid-column: 1 / -1; }
  .profile { position: static; }
  .cv-head, .cv-list { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .node-list--pairs, .principles { grid-template-columns: minmax(0, 1fr); }
  .about-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--space-md); }
  .about-portrait figcaption span { display: none; }
  .profile { padding: var(--space-lg); }
}

.catalog { display: grid; gap: var(--space-3xl); }
.catalog-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.catalog-intro { grid-column: 1 / span 4; display: grid; align-content: start; gap: var(--space-xs); }
.catalog-intro h3 { font-size: var(--text-2xl); }
.catalog-kicker { color: var(--color-signal-ink); font-size: var(--text-sm); font-weight: 600; }
.catalog-intro p:not(.catalog-kicker) { max-width: 46ch; color: var(--color-ink-2); }
.catalog-list { grid-column: 6 / -1; margin: 0; padding: 0; list-style: none; }
.catalog-list li + li a { border-top: 1px solid var(--color-rule-2); }
.catalog-list a { --row-fill: var(--color-paper-3); position: relative; isolation: isolate; display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; column-gap: var(--space-md); row-gap: var(--space-3xs); align-items: start; padding-block: var(--space-md); color: var(--color-ink); text-decoration: none; }
.catalog-list a::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(-1 * var(--space-md)); z-index: -1; background: var(--row-fill); opacity: 0; transform-origin: right center; transition: opacity var(--dur-micro) var(--ease-out); }
.catalog-sym { grid-row: 1 / span 3; width: 24px; height: 24px; margin-top: 0.1em; stroke-width: 1.75; color: var(--color-icon); }
.catalog-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }
.catalog-price { grid-column: 2; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; }
.catalog-text { grid-column: 2; max-width: 64ch; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.catalog-arrow { grid-column: 3; grid-row: 1 / span 3; align-self: center; color: var(--color-link); transition: transform var(--dur-short) var(--ease-out); }
.catalog-list a:hover { color: var(--color-ink); text-decoration: none; }
.catalog-list a:focus-visible::before { opacity: 1; }
.catalog-list a:active { transform: translateY(1px); }
.agency-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--space-2xl); align-items: end; margin-top: var(--space-3xl); padding: var(--space-2xl); border-radius: var(--radius-card); }
.agency-cta h3 { font-size: var(--text-2xl); }
.agency-cta__kicker { margin-top: var(--space-2xs); color: var(--color-accent-on-field); font-weight: 600; }
.agency-cta p:not(.agency-cta__kicker) { max-width: 60ch; margin-top: var(--space-sm); color: var(--color-field-muted); }
@media (hover: hover) { .catalog-list a:hover::before { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .catalog-list a::before { opacity: 1; transform: scaleX(0); transition: transform 160ms var(--ease-in); }
  .catalog-list a:focus-visible::before { transform: none; transform-origin: left center; transition: transform 260ms var(--ease-out); }
  .catalog-list a:focus-visible .catalog-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .catalog-list a:hover::before { transform: none; transform-origin: left center; transition: transform 260ms var(--ease-out); }
  .catalog-list a:hover .catalog-arrow { transform: translateX(3px); }
}
@media (max-width: 64rem) {
  .catalog-intro, .catalog-list { grid-column: 1 / -1; }
  .agency-cta { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: var(--space-xl); }
}
@media (max-width: 40rem) { .agency-cta { padding: var(--space-lg); } }

.plans-baseline { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.plans-baseline h3 { grid-column: 1 / span 4; font-size: var(--text-xl); }
.plans-baseline .checks { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); }
@media (max-width: 64rem) {
  .plans-baseline h3, .plans-baseline .checks { grid-column: 1 / -1; }
}
@media (max-width: 40rem) { .plans-baseline .checks { grid-template-columns: minmax(0, 1fr); } }

.reality { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.reality li { display: grid; grid-template-columns: minmax(0, 5fr) 40px minmax(0, 6fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.reality-seen { color: var(--color-ink-2); font-size: var(--text-lg); }
.reality-sign { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-urgent); text-align: center; }
.reality-risk { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; }
.local-band { margin-top: 0; }
.local-band h2 { font-size: var(--text-2xl); }
.local-band address { display: grid; gap: var(--space-3xs); font-style: normal; color: var(--color-field-muted); }
.local-band address strong { color: var(--color-field-ink); }
@media (max-width: 60rem) {
  .reality li { grid-template-columns: 32px minmax(0, 1fr); row-gap: var(--space-2xs); }
  .reality-seen { grid-column: 1 / -1; }
  .reality-sign { text-align: start; }
}

@media (min-width: 64.001rem) {
  .steps:has(> li:nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-2xl); border-top: 0; }
  .steps:has(> li:nth-child(6)) .step { border-top: 2px solid var(--color-ink); }
}

.eyebrow { color: var(--color-signal-ink); font-size: var(--text-sm); font-weight: 600; }
.knowledge-switcher { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.knowledge-switcher ul { display: flex; gap: var(--space-xs); margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.knowledge-switcher a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.knowledge-switcher a:hover { border-color: var(--color-ink); background: var(--color-paper-2); color: var(--color-ink); }
.knowledge-switcher a[aria-current="page"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }

.link-index a.has-num { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr) auto; }
.link-index__num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: var(--color-signal-ink); font-variant-numeric: tabular-nums; }
.link-index__count { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
.question-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.question-grid a { display: grid; gap: var(--space-2xs); height: 100%; padding-block: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule-2); color: var(--color-ink); text-decoration: none; }
.question-grid span { color: var(--color-signal-ink); font-size: var(--text-sm); font-weight: 600; }
.question-grid strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; transition: color var(--dur-short) var(--ease-out); }
.question-grid a:hover strong { color: var(--color-link); }
.knowledge-method { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; margin-top: 0; }
.knowledge-method h2 { font-size: var(--text-2xl); max-width: 16ch; }
.knowledge-method__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.knowledge-method__steps li { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-field-rule); }
.knowledge-method__steps .step-num { color: var(--color-accent); }
.knowledge-method__steps h3 { font-size: var(--text-lg); hyphens: auto; -webkit-hyphens: auto; }
.knowledge-method__steps p { color: var(--color-field-muted); font-size: var(--text-sm); }

.glossary-layout { display: grid; gap: var(--space-2xl); }
.glossary-intro { display: grid; gap: var(--space-sm); max-width: 60rem; }
.glossary-intro p:not(.eyebrow) { max-width: 62ch; color: var(--color-ink-2); }
.glossary-browser { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.glossary-sidebar { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.glossary-controls { display: grid; gap: var(--space-lg); }
.glossary-search { display: grid; gap: var(--space-xs); }
.glossary-search label, .glossary-filter > span { font-size: var(--text-sm); font-weight: 600; }
.glossary-search__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.glossary-search input { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.glossary-search input:focus-visible { outline-color: var(--color-focus); }
.glossary-reset { padding-inline: var(--space-md); }
.glossary-filter { display: grid; gap: var(--space-xs); }
.glossary-filter__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.glossary-chip { min-height: 40px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.glossary-chip:hover { border-color: var(--color-ink); }
.glossary-chip:active { transform: translateY(1px); }
.glossary-chip.is-active, .glossary-chip[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.glossary-alphabet { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-3xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.glossary-alphabet a, .glossary-alphabet span { display: grid; place-items: center; min-height: 32px; border-radius: 3px; font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.glossary-alphabet a { color: var(--color-link); }
.glossary-alphabet a:hover { background: var(--color-signal-soft); color: var(--color-ink); }
.glossary-alphabet span { color: var(--color-rule-2); }
.glossary-alphabet [hidden] { display: none; }
.glossary-result { color: var(--color-ink-2); font-size: var(--text-sm); }
.glossary-result strong { color: var(--color-ink); }

.glossary-results { display: grid; gap: var(--space-3xl); min-width: 0; }
.glossary-featured { display: grid; gap: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-signal-wash); }
.glossary-featured > div:first-child { display: grid; gap: var(--space-2xs); }
.glossary-featured h2 { font-size: var(--text-2xl); }
.glossary-featured > p, .glossary-featured__secondary > p { max-width: 62ch; color: var(--color-ink-2); }
.glossary-featured__secondary { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.glossary-featured__secondary h3 { font-size: var(--text-xl); }
.glossary-featured__links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.glossary-featured__links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.glossary-featured__links a:hover { box-shadow: inset 0 0 0 1px var(--color-ink); color: var(--color-ink); }

.glossary-groups { display: grid; gap: var(--space-2xl); }
.glossary-group { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-lg); padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.glossary-group[hidden] { display: none; }
.glossary-letter { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--color-signal-ink); }
.glossary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.glossary-item { display: grid; align-content: start; padding-block: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule-2); scroll-margin-top: calc(var(--nav-h) + var(--space-xl)); }
.glossary-item[hidden] { display: none; }
.glossary-item:target { background: var(--color-signal-wash); box-shadow: -12px 0 0 var(--color-signal-wash), 12px 0 0 var(--color-signal-wash); }
.glossary-item__head { display: grid; gap: var(--space-2xs); }
.glossary-item__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); color: var(--color-signal-ink); font-size: var(--text-xs); font-weight: 600; }
.glossary-permalink { color: var(--color-muted); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.glossary-item:hover .glossary-permalink, .glossary-permalink:focus-visible { opacity: 1; }
.glossary-item h3 { font-size: var(--text-lg); line-height: 1.25; }
.glossary-item__long { color: var(--color-muted); font-size: var(--text-xs); }
.glossary-item__summary { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.glossary-item details { margin-top: var(--space-sm); }
.glossary-item summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; color: var(--color-link); font-size: var(--text-sm); font-weight: 600; list-style: none; cursor: pointer; }
.glossary-item summary::-webkit-details-marker { display: none; }
.glossary-item summary::after { content: "+"; font-size: 1.1em; line-height: 1; transition: transform var(--dur-short) var(--ease-in-out); }
.glossary-item details[open] summary::after { transform: rotate(45deg); }
.glossary-item__details { display: grid; gap: var(--space-md); padding-top: var(--space-sm); }
.glossary-item__details h4 { margin: 0 0 var(--space-3xs); font-size: var(--text-sm); font-weight: 600; }
.glossary-item__details p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.glossary-item__cta { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.glossary-item__cta strong { font-size: var(--text-sm); }
.glossary-item__cta .arrow-link { min-height: 32px; font-size: var(--text-sm); }
.glossary-empty { display: grid; justify-items: start; gap: var(--space-sm); padding: var(--space-xl); border-top: 2px solid var(--color-ink); }
.glossary-empty[hidden] { display: none; }
.glossary-empty h2 { font-size: var(--text-2xl); }
.glossary-cta__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: var(--space-lg) var(--gap-columns); align-items: end; }
.glossary-cta h2 { font-size: var(--text-2xl); }
.glossary-cta p:not(.eyebrow) { color: var(--color-field-muted); }
.glossary-cta .eyebrow { color: var(--color-accent-on-field); }
main > .glossary-cta { padding-block: var(--section-gap-s); }

@media (max-width: 75rem) {
  .glossary-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 64rem) {
  .glossary-browser { grid-template-columns: minmax(0, 1fr); }
  .glossary-sidebar { position: static; }
  .question-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-method, .knowledge-method__steps { grid-template-columns: minmax(0, 1fr); }
  .glossary-cta__inner { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .link-index a.has-num { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .link-index a.has-num .link-index__text { grid-column: 2; }
  .link-index__num { grid-row: 1 / span 2; }
}
@media (max-width: 40rem) {
  .question-grid { grid-template-columns: minmax(0, 1fr); }
  .glossary-group { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .glossary-featured { padding: var(--space-lg); }
  .link-index a.has-num { grid-template-columns: 40px minmax(0, 1fr); }
}

.glossary-tag { margin-top: var(--space-2xs); color: var(--color-signal-ink); font-size: var(--text-sm); font-weight: 600; }
.glossary-cta .glossary-tag { color: var(--color-accent-on-field); }
.glossary-item__meta { order: 0; margin-top: var(--space-3xs); }

.glossary-intro h2, .glossary-featured h2, .about-text h2, .glossary-group h2, .catalog-intro h3, .next-project h2 { overflow-wrap: break-word; min-width: 0; }
.service-hero-photo-wrap { color: var(--color-field-ink); }
h1, h2 { overflow-wrap: break-word; min-width: 0; }

.seo-rhythm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md) var(--gap-columns); margin-bottom: var(--space-xl); }
.seo-rhythm__set { min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; }
.seo-rhythm__legend { margin-bottom: var(--space-xs); padding: 0; font-size: var(--text-sm); font-weight: 600; }
.seo-rhythm__options { display: flex; flex-wrap: wrap; gap: var(--space-2xs); width: fit-content; max-width: 100%; padding: var(--space-2xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper); }
.seo-rhythm__option { min-height: 44px; padding: 0 var(--space-md); border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--color-ink-2); font: 600 0.9375rem/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seo-rhythm__option:hover { background: var(--color-paper-2); color: var(--color-ink); }
.seo-rhythm__option:active { transform: translateY(1px); }
.seo-rhythm__option[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.seo-rhythm__hint { flex: 1 1 16rem; max-width: 44ch; margin-bottom: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }

.seo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: stretch; }
.seo-cards--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-card { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; padding: var(--space-xl); border: 1px solid var(--color-rule); border-top: 4px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.seo-card--featured { border-top-color: var(--color-accent); }
.seo-card__head { display: grid; gap: var(--space-sm); }
.seo-card h3 { font-size: var(--text-title); }
.seo-card .sym-head__icon { color: var(--color-signal-ink); }
.seo-card__for { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.seo-card__for .plan-flag { margin-bottom: var(--space-xs); }
.seo-card__hours { display: grid; gap: var(--space-xs); }
.seo-card__hours-label { font-size: var(--text-sm); font-weight: 600; }
.seo-meter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2xs); }
.seo-meter > span { height: 6px; border-radius: 1px; background: var(--color-rule); }
.seo-meter > .is-on { background: var(--color-accent); }
.seo-card__price { display: grid; gap: var(--space-2xs); }
.seo-card__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.seo-card__amount { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.seo-card__unit, .seo-card__summary { color: var(--color-ink-2); font-size: var(--text-sm); }
.seo-card__setup { color: var(--color-muted); font-size: var(--text-xs); }
.seo-card__includes { margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.seo-card .checks { border-top: 1px solid var(--color-rule); }
.seo-card .checks li { border-bottom-color: var(--color-rule); font-size: var(--text-sm); line-height: 1.5; }
.seo-card__cta { margin-top: auto; min-height: 56px; padding: var(--space-xs) var(--space-md); white-space: normal; line-height: 1.25; text-align: center; }
.seo-card--start { border-color: var(--color-field); border-top-color: var(--color-field-2); background: var(--color-field); }
.seo-card--start .sym-head__icon, .seo-card--start .checks .icon { color: var(--color-accent-on-field); }
.seo-card--start .seo-card__for { color: var(--color-field-muted); }
.seo-card--start .checks { border-top: 0; }
.seo-card--start .checks li { border-bottom-color: var(--color-field-rule); }
.seo-start__prices { margin: 0; border-top: 1px solid var(--color-field-rule); }
.seo-start__prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-field-rule); }
.seo-start__prices dt { color: var(--color-field-muted); font-size: var(--text-sm); }
.seo-start__prices dd { margin: 0; color: var(--color-accent-on-field); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1; white-space: nowrap; }
.seo-card__link { margin-top: auto; }
.seo-card__link:hover .icon, .seo-plans__more a:hover .icon { transform: translateX(3px); }
.seo-plans__note { max-width: 72ch; margin-top: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-sm); }
.seo-plans__more { margin-top: var(--space-lg); }
.seo-plans--compact .seo-card { gap: var(--space-md); }
@media (max-width: 64rem) {
  .seo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-card--start { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .seo-cards, .seo-cards--compact { grid-template-columns: minmax(0, 1fr); }
  .seo-card { padding: var(--space-lg); }
  .seo-rhythm__options { width: 100%; }
  .seo-rhythm__option { flex: 1 1 calc(50% - var(--space-2xs)); }
}
@media (forced-colors: active) { .seo-meter > .is-on { background: CanvasText; } .seo-rhythm__option[aria-pressed="true"] { outline: 2px solid CanvasText; } }