/* Hallmark · macrostructure: Workbench · genre: modern-minimal · tone: utilitarian, technical · anchor hue: orange 58 / navy 256
 * theme: custom (brand-anchored) · fonts: Space Grotesk (display) + IBM Plex Sans (body) + IBM Plex Mono (data)
 * nav: N1b · footer: Ft2 inline-rule · features: F5 annotated output (tabbed, looping demo per tab) · steps: F4 · CTA: C4 sticky bar (mobile)
 * dark mode: prefers-color-scheme + [data-theme] (PHP prints it from the kjt-theme cookie) · audit 2026-10-06: 1 critical / 6 major / 8 minor fixed
 */
/* KJT TOOL - public site styles. Admin pages use admin.css. Fonts are self-hosted: the CSP (default-src 'self') blocks Google Fonts. */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --color-paper:   oklch(99.2% 0.003 250);
  --color-paper-2: oklch(96.8% 0.008 250);
  --color-paper-3: oklch(93.2% 0.013 250);
  --color-rule:    oklch(90.5% 0.012 250);
  --color-rule-2:  oklch(83% 0.018 250);
  --color-ink:     oklch(23% 0.035 255);
  --color-ink-2:   oklch(46% 0.03 255);
  --color-navy:    oklch(27% 0.07 256);
  --color-navy-2:  oklch(35% 0.09 256);
  --color-navy-3:  oklch(31% 0.08 256);
  --color-accent:       oklch(75% 0.165 58);
  --color-accent-hover: oklch(70% 0.17 52);
  --color-accent-ink:   oklch(54% 0.16 46);
  --color-accent-soft:  oklch(95.5% 0.035 65);
  --color-on-accent:    oklch(27% 0.07 256);
  --color-on-dark:      oklch(97% 0.01 250);
  --color-on-dark-2:    oklch(82% 0.035 250);
  --color-on-dark-rule: oklch(42% 0.07 256);
  --color-line-blue:    oklch(76% 0.11 250);
  --color-focus:        oklch(52% 0.19 258);
  --color-ok:      oklch(47% 0.12 150);
  --color-ok-bg:   oklch(95.5% 0.04 150);
  --color-warn:    oklch(48% 0.1 70);
  --color-warn-bg: oklch(96.5% 0.05 85);
  --color-err:     oklch(50% 0.19 28);
  --color-err-bg:  oklch(95.5% 0.03 25);
  --color-info:    oklch(42% 0.11 256);
  --color-info-bg: oklch(95.5% 0.025 256);
  --color-fiber-blue:   oklch(55% 0.17 255);
  --color-fiber-orange: oklch(72% 0.17 55);
  --color-fiber-green:  oklch(60% 0.15 150);
  --color-fiber-brown:  oklch(48% 0.07 55);
  --color-scrim:   oklch(23% 0.035 255 / 0.4);
  --color-mock:    oklch(55% 0.22 330);
  --color-mock-bg: oklch(97% 0.03 330);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --text-xs: .8125rem;
  --text-sm: .9rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 2.6vw, 2rem);
  --text-3xl: clamp(1.75rem, 3.4vw, 2.5rem);
  --text-display: clamp(2.125rem, 5vw, 3.5rem);

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --rule: 1px solid var(--color-rule);
  --shadow-sm: 0 1px 2px oklch(27% 0.07 256 / 0.06), 0 4px 16px -8px oklch(27% 0.07 256 / 0.12);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;

  --page-max: 1140px;
  --gutter: 20px;

  /* semantic roles (navy splits into text / band / solid) */
  --color-heading:   var(--color-navy);
  --color-heading-2: var(--color-navy-2);
  --color-link:      var(--color-navy-2);
  --color-band:      var(--color-navy);
  --color-band-line: var(--color-navy-3);
  --color-strong:       var(--color-navy);
  --color-strong-hover: var(--color-navy-2);
  --color-on-strong:    var(--color-on-dark);
  --color-logo-bg:      var(--color-navy);
  --shadow-up: 0 -8px 24px -16px oklch(27% 0.07 256 / 0.3);
  color-scheme: light;
}

/* dark theme: follows the device unless the visitor picked one */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:   oklch(17.5% 0.025 256);
    --color-paper-2: oklch(21% 0.03 256);
    --color-paper-3: oklch(25.5% 0.035 256);
    --color-rule:    oklch(31% 0.035 256);
    --color-rule-2:  oklch(43% 0.04 256);
    --color-ink:     oklch(93% 0.01 250);
    --color-ink-2:   oklch(76% 0.025 250);
    --color-heading:   oklch(97% 0.008 250);
    --color-heading-2: oklch(82% 0.06 250);
    --color-link:      oklch(80% 0.1 245);
    --color-band:      oklch(13.5% 0.03 256);
    --color-band-line: oklch(18.5% 0.035 256);
    --color-on-dark-rule: oklch(30% 0.05 256);
    --color-strong:       oklch(92% 0.015 250);
    --color-strong-hover: oklch(98% 0.006 250);
    --color-on-strong:    oklch(20% 0.04 256);
    --color-logo-bg:      oklch(27% 0.07 256);
    --color-accent-ink:   oklch(79% 0.15 62);
    --color-accent-soft:  oklch(31% 0.07 55);
    --color-focus:   oklch(80% 0.12 245);
    --color-ok:      oklch(79% 0.14 150);
    --color-ok-bg:   oklch(28% 0.05 150);
    --color-warn:    oklch(84% 0.12 85);
    --color-warn-bg: oklch(30% 0.05 80);
    --color-err:     oklch(76% 0.15 28);
    --color-err-bg:  oklch(30% 0.07 28);
    --color-info:    oklch(83% 0.08 250);
    --color-info-bg: oklch(28% 0.05 256);
    --color-fiber-blue:   oklch(66% 0.15 255);
    --color-fiber-orange: oklch(75% 0.16 55);
    --color-fiber-green:  oklch(70% 0.15 150);
    --color-fiber-brown:  oklch(60% 0.07 55);
    --color-scrim:   oklch(0% 0 0 / 0.55);
    --color-mock:    oklch(74% 0.2 330);
    --color-mock-bg: oklch(25% 0.06 330);
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px -12px oklch(0% 0 0 / 0.6);
    --shadow-up: 0 -8px 24px -12px oklch(0% 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-paper:   oklch(17.5% 0.025 256);
  --color-paper-2: oklch(21% 0.03 256);
  --color-paper-3: oklch(25.5% 0.035 256);
  --color-rule:    oklch(31% 0.035 256);
  --color-rule-2:  oklch(43% 0.04 256);
  --color-ink:     oklch(93% 0.01 250);
  --color-ink-2:   oklch(76% 0.025 250);
  --color-heading:   oklch(97% 0.008 250);
  --color-heading-2: oklch(82% 0.06 250);
  --color-link:      oklch(80% 0.1 245);
  --color-band:      oklch(13.5% 0.03 256);
  --color-band-line: oklch(18.5% 0.035 256);
  --color-on-dark-rule: oklch(30% 0.05 256);
  --color-strong:       oklch(92% 0.015 250);
  --color-strong-hover: oklch(98% 0.006 250);
  --color-on-strong:    oklch(20% 0.04 256);
  --color-logo-bg:      oklch(27% 0.07 256);
  --color-accent-ink:   oklch(79% 0.15 62);
  --color-accent-soft:  oklch(31% 0.07 55);
  --color-focus:   oklch(80% 0.12 245);
  --color-ok:      oklch(79% 0.14 150);
  --color-ok-bg:   oklch(28% 0.05 150);
  --color-warn:    oklch(84% 0.12 85);
  --color-warn-bg: oklch(30% 0.05 80);
  --color-err:     oklch(76% 0.15 28);
  --color-err-bg:  oklch(30% 0.07 28);
  --color-info:    oklch(83% 0.08 250);
  --color-info-bg: oklch(28% 0.05 256);
  --color-fiber-blue:   oklch(66% 0.15 255);
  --color-fiber-orange: oklch(75% 0.16 55);
  --color-fiber-green:  oklch(70% 0.15 150);
  --color-fiber-brown:  oklch(60% 0.07 55);
  --color-scrim:   oklch(0% 0 0 / 0.55);
  --color-mock:    oklch(74% 0.2 330);
  --color-mock-bg: oklch(25% 0.06 330);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px -12px oklch(0% 0 0 / 0.6);
  --shadow-up: 0 -8px 24px -12px oklch(0% 0 0 / 0.6);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-base)/1.6 var(--font-body); }
a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-ink); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; color: var(--color-heading);
  line-height: 1.15; margin: 0 0 .5em; overflow-wrap: anywhere; min-width: 0; letter-spacing: -.015em; }
h1 { font-size: var(--text-display); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: var(--text-3xl); font-weight: 600; }
h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--page-max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(480px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.muted { color: var(--color-ink-2); }
.mono { font-family: var(--font-mono); font-weight: 500; }
.section { padding-block: var(--space-4xl); }
.section-soft { background: var(--color-paper-2); border-block: var(--rule); }
.stack > * + * { margin-top: var(--space-md); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 46px; padding: 0 var(--space-lg); border-radius: var(--radius-md); border: 1.5px solid transparent;
  font: 600 var(--text-base)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--color-on-accent); border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn-dark { background: var(--color-strong); color: var(--color-on-strong); }
.btn-dark:hover { background: var(--color-strong-hover); color: var(--color-on-strong); }
.btn-outline { border-color: var(--color-rule-2); color: var(--color-heading); background: var(--color-paper); }
.btn-outline:hover { border-color: var(--color-heading); color: var(--color-heading); }
.btn-danger { border-color: var(--color-rule-2); color: var(--color-err); background: var(--color-paper); }
.btn-danger:hover { border-color: var(--color-err); background: var(--color-err-bg); color: var(--color-err); }
.btn-sm { min-height: 38px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.link-arrow { font-weight: 600; text-decoration: none; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow span { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover span { transform: translateX(3px); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- nav (N1b, always-solid) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--color-paper); border-bottom: var(--rule); }
.nav__in { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 700 1.125rem/1 var(--font-display); letter-spacing: .01em; color: var(--color-heading); }
.brand:hover { color: var(--color-heading); }
.brand b { color: var(--color-accent-ink); font-weight: 700; }
.brand svg { flex: none; }
.brand .logo-bg { fill: var(--color-logo-bg); } .brand .logo-line { stroke: var(--color-accent); } .brand .logo-dot { fill: var(--color-on-dark); }
.nav__center { display: flex; gap: var(--space-2xs); }
.nav__link { padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-ink); font-weight: 500; white-space: nowrap; }
.nav__link:hover { color: var(--color-heading); background: var(--color-paper-2); }
.nav__link[aria-current="page"] { color: var(--color-heading); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
.nav__right { justify-self: end; display: flex; align-items: center; gap: var(--space-xs); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-heading); cursor: pointer; place-items: center; }
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .i-close { display: none; }
.nav__toggle[aria-expanded="true"] .i-open { display: none; }
.nav__toggle[aria-expanded="true"] .i-close { display: block; }
.nav__panel { display: none; }
@media (max-width: 880px) {
  .nav__in { grid-template-columns: 1fr auto; }
  .nav__center, .nav__right .nav-desktop { display: none; }
  .nav__toggle { display: grid; }
  .nav__panel { position: absolute; inset: 64px 0 auto; background: var(--color-paper); border-bottom: var(--rule);
    box-shadow: var(--shadow-sm); padding: var(--space-xs) var(--gutter) var(--space-lg); }
  .nav__panel.is-open { display: block; }
  .nav__panel a.nav__link { display: block; padding: 14px 4px; border-bottom: var(--rule); border-radius: 0; }
  .nav__panel a.nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-accent); padding-left: 14px; }
  .nav__panel .btn-row { margin-top: var(--space-lg); }
  .nav__panel .btn { flex: 1 1 140px; }
}

.theme-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-heading); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); }
.theme-btn:hover { border-color: var(--color-rule-2); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (max-width: 880px) { .theme-btn { width: 44px; height: 44px; } }

/* ---------- flash ---------- */
.flash { margin-top: var(--space-lg); padding: 12px 16px; border-radius: var(--radius-md); font-weight: 500; border: 1px solid transparent; }
.flash-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.flash-error { background: var(--color-err-bg); color: var(--color-err); }
.flash-info { background: var(--color-info-bg); color: var(--color-info); }
.flash:empty { display: none; }

/* ---------- hero ---------- */
.hero { --color-focus: var(--color-line-blue);
  background-color: var(--color-band); color: var(--color-on-dark);
  background-image: linear-gradient(var(--color-band-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-band-line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px; }
.hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center;
  padding-block: var(--space-3xl) var(--space-4xl); }
.hero h1 { color: var(--color-on-dark); max-width: 14ch; }
.hero .lead { font-size: var(--text-lg); color: var(--color-on-dark-2); max-width: 54ch; margin-bottom: var(--space-xl); }
.hero .link-arrow { color: var(--color-on-dark); }
.hero .link-arrow:hover { color: var(--color-accent); }
.hero .note { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-on-dark-2); }
.hero__fig { margin: 0; background: var(--color-band); border: 1px solid var(--color-on-dark-rule); border-radius: var(--radius-lg); padding: var(--space-md); }
.hero__fig svg { display: block; width: 100%; height: auto; }
.facts { border-top: 1px solid var(--color-on-dark-rule); }
.facts ul { list-style: none; margin: 0; padding: var(--space-lg) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.facts li { display: flex; gap: 10px; align-items: baseline; font-size: var(--text-sm); color: var(--color-on-dark-2); }
.facts li b { color: var(--color-on-dark); font-weight: 600; }
.facts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--color-accent); transform: translateY(-2px); }
@media (max-width: 880px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-2xl) var(--space-3xl); gap: var(--space-xl); }
  .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .facts ul { grid-template-columns: minmax(0, 1fr); } }

/* svg illustration classes (shared) */
.s-grid { stroke: var(--color-band-line); fill: none; }
.s-route { stroke: var(--color-accent); stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.s-drop { stroke: var(--color-line-blue); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.s-hp { fill: var(--color-line-blue); }
.s-pole-dark { fill: var(--color-band); stroke: var(--color-on-dark); stroke-width: 2.5; }
.s-txt-dark { fill: var(--color-on-dark-2); font: 500 11px var(--font-mono); }
.s-chip-dark { fill: var(--color-band-line); stroke: var(--color-on-dark-rule); }
.s-chip-title { fill: var(--color-on-dark); font: 600 13px var(--font-body); }
.s-chip-sub { fill: var(--color-on-dark-2); font: 500 11px var(--font-mono); }
.s-road { stroke: var(--color-paper-3); stroke-width: 30; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-street { stroke: var(--color-paper); stroke-width: 9; fill: none; stroke-linecap: round; }
.s-block { fill: var(--color-paper-3); }
.s-pole { fill: var(--color-paper); stroke: var(--color-heading); stroke-width: 2.5; }
.s-lbl { fill: var(--color-heading); font: 500 12px var(--font-mono); }
.s-lbl-sm { fill: var(--color-ink-2); font: 500 10.5px var(--font-mono); }
.s-callout { fill: var(--color-paper); stroke: var(--color-rule-2); }
.s-callout-t { fill: var(--color-heading); font: 600 12.5px var(--font-body); }
.s-callout-s { fill: var(--color-ink-2); font: 500 11px var(--font-mono); }
.s-leader { stroke: var(--color-ink-2); stroke-width: 1; fill: none; }
.s-odp { fill: var(--color-heading); }
.s-fdt { fill: var(--color-strong); } .s-fdt-t { fill: var(--color-on-strong); font: 600 13px var(--font-body); }
.s-pin { fill: var(--color-heading); stroke: var(--color-paper); stroke-width: 1.5; }
.s-pin-dot { fill: var(--color-accent); }
.s-frame { fill: none; stroke: var(--color-heading-2); stroke-width: 1.5; stroke-dasharray: 6 4; }
.s-tblock { fill: var(--color-paper); stroke: var(--color-heading-2); stroke-width: 1.2; }
.s-feeder { stroke: var(--color-heading); stroke-width: 4; fill: none; stroke-linecap: round; }
.s-branch { stroke: var(--color-heading-2); stroke-width: 2; fill: none; }
.f-blue { fill: var(--color-fiber-blue); } .f-orange { fill: var(--color-fiber-orange); }
.f-green { fill: var(--color-fiber-green); } .f-brown { fill: var(--color-fiber-brown); }

@media (max-width: 640px) {
  .s-lbl { font-size: 16px; } .s-lbl-sm { font-size: 14px; }
  .s-callout-t { font-size: 15px; } .s-callout-s { font-size: 13px; }
  .s-txt-dark { font-size: 15px; } .s-chip-title { font-size: 16px; } .s-chip-sub { font-size: 14px; }
}

/* ---------- workbench (F5, tabbed) ---------- */
.wb__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin-bottom: var(--space-2xl); max-width: 640px; }
.wb__head p { margin: 0; color: var(--color-ink-2); font-size: var(--text-lg); }
.wb { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: start; }
.wb__tabs { display: grid; gap: 2px; border-left: var(--rule); }
.wb__tab { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); align-items: center; text-align: left;
  padding: 14px var(--space-md); margin-left: -1px; border: 0; border-left: 2px solid transparent; background: none;
  font: 500 var(--text-base)/1.3 var(--font-body); color: var(--color-ink-2); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.wb__tab svg { width: 22px; height: 22px; }
.wb__tab:hover { color: var(--color-heading); background: var(--color-paper-2); }
.wb__tab[aria-selected="true"] { color: var(--color-heading); font-weight: 600; border-left-color: var(--color-accent); background: var(--color-paper-2); }
.wb__tab[aria-selected="true"] svg { color: var(--color-accent-ink); }
.wb__panel { animation: fade var(--dur-slow) var(--ease-out); }
.wb__panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.wb__panel h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.wb__panel > p { color: var(--color-ink-2); max-width: 60ch; }
.output { margin: var(--space-lg) 0 0; }
.output__frame { background: var(--color-paper-2); border: var(--rule); border-radius: var(--radius-lg); padding: var(--space-md); overflow: hidden; }
.output__frame svg { display: block; width: 100%; height: auto; }
.output figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.output figcaption .tag { margin-left: 6px; padding: 1px 8px; border: var(--rule); border-radius: var(--radius-pill); font-size: var(--text-xs); white-space: nowrap; }
.output figcaption b { color: var(--color-heading); font-weight: 600; }
@media (max-width: 880px) {
  .wb { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .wb__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; gap: var(--space-xs); }
  .wb__tab { margin: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: 12px; grid-template-columns: 22px minmax(0, 1fr); font-size: var(--text-sm); }
  .wb__tab[aria-selected="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
}
@media (max-width: 560px) {
  .wb__tabs { grid-template-columns: minmax(0, 1fr); }
  .wb__tab { white-space: nowrap; }
}

/* ---------- feature loops: "GIF" boxes (animated SVG; production can swap in real screen recordings) ---------- */
.wb__tab .new { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--color-accent-soft);
  color: var(--color-accent-ink); font: 600 11px/18px var(--font-body); vertical-align: 1px; }
.feat { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--space-lg); }
.feat li { display: flex; gap: 8px; align-items: baseline; font-size: var(--text-sm); color: var(--color-ink); }
.feat--col { flex-direction: column; }
.feat li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--color-accent); transform: translateY(-2px); }
.output figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gif__btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: var(--rule); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-heading); font: 500 var(--text-xs) var(--font-body); cursor: pointer; }
.gif__btn:hover { border-color: var(--color-rule-2); }
.gif__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gif__btn .i-play { display: none; fill: currentColor; }
.gif__btn[aria-pressed="true"] .i-play { display: block; } .gif__btn[aria-pressed="true"] .i-pause { display: none; }
.gif-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.also { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule); }
.also h3 { font-size: var(--text-base); margin-bottom: var(--space-sm); }
.also ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-sm) var(--space-lg); }
.also li { font-size: var(--text-sm); color: var(--color-ink-2); }
.also li b { display: block; color: var(--color-heading); font-weight: 600; }

/* the box always looks like AutoCAD's dark model space (a screen recording), in both site themes */
.gif { --cad-bg: oklch(23% 0.012 250); --cad-gridc: oklch(26.5% 0.012 250); --cad-bar: oklch(29% 0.015 250); --cad-bar-2: oklch(38% 0.02 250);
  --cad-ink: oklch(93% 0.008 250); --cad-ink-2: oklch(74% 0.02 250); --cad-road: oklch(52% 0.02 250); --cad-roadband: oklch(29% 0.012 250);
  --cad-cable: oklch(76% 0.16 58); --cad-hp: oklch(82% 0.11 210); --cad-lot: oklch(70% 0.2 330); --cad-area: oklch(74% 0.16 150);
  --cad-arrow: oklch(87% 0.15 98); --cad-fdt: oklch(66% 0.15 255); --cad-err: oklch(70% 0.19 28); --cad-warn: oklch(84% 0.15 85); --cad-ok: oklch(77% 0.16 150);
  --cad-win: oklch(27% 0.014 250); --cad-win-h: oklch(33% 0.02 250); --cad-sel: oklch(40% 0.07 250);
  --doc: oklch(98.5% 0.004 250); --doc-ink: oklch(26% 0.03 255); --doc-ink-2: oklch(48% 0.02 255); --doc-rule: oklch(88% 0.01 250);
  --cad-sheet: oklch(27% 0.012 250); --cad-sheet-2: oklch(25% 0.012 250); --cad-white: oklch(99% 0.003 250); --cad-black: oklch(15% 0.01 250); --cad-area-fill: oklch(74% 0.16 150 / .13); --cad-fixed: oklch(32% 0.05 150);
  --cad-toast: oklch(30% 0.05 150); --ge: oklch(31% 0.04 140); --ge-2: oklch(36% 0.035 120); --ge-road: oklch(62% 0.02 80); --ge-pin: oklch(60% 0.2 28);
  --map: oklch(33% 0.035 145); --map-2: oklch(29% 0.03 135); --map-road: oklch(52% 0.025 80);
  --doc-side: oklch(97% 0.004 250); --doc-xl: oklch(48% 0.12 150); --doc-xl-th: oklch(93% 0.02 150); --doc-pdf: oklch(55% 0.2 28); --doc-ppt: oklch(62% 0.18 40);
  --doc-box: oklch(95% 0.01 250); --doc-navy: oklch(30% 0.07 256); --doc-navy-2: oklch(45% 0.06 256);
  --fiber-blue: oklch(55% 0.17 255); --fiber-orange: oklch(72% 0.17 55); --fiber-green: oklch(60% 0.15 150); --fiber-brown: oklch(48% 0.07 55);
  position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-rule-2); background: var(--cad-bg); }
.gif > svg { display: block; width: 100%; height: auto; }
.cad-bg { fill: var(--cad-bg); } .cad-gridline { fill: none; stroke: var(--cad-gridc); stroke-width: 1; }
.cad-cursor { fill: var(--cad-white); stroke: var(--cad-black); stroke-width: 1; }
.gif__ring { fill: none; stroke: var(--color-accent); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.gif__ring.on { opacity: 1; transform: none; transition: transform .3s var(--ease-out), opacity .3s; }
.cad-road { stroke: var(--cad-road); stroke-width: 1.2; fill: none; }
.cad-roadband { stroke: var(--cad-roadband); stroke-width: 34; fill: none; stroke-linejoin: round; stroke-linecap: round; } .cad-roadband--sm { stroke-width: 22; }
.cad-cable { stroke: var(--cad-cable); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cad-pole { fill: var(--cad-bg); stroke: var(--cad-ink); stroke-width: 2; }
.cad-hp, .cad-hp text { fill: var(--cad-hp); font: 500 9px var(--font-mono); }
.cad-hp-sq { fill: var(--cad-hp); } .cad-hp-sq--warn { fill: var(--cad-warn); }
.cad-bnd { fill: none; stroke: var(--cad-area); stroke-width: 1.5; }
.cad-sel { fill: none; stroke: var(--cad-white); stroke-width: 2; stroke-dasharray: 5 4; }
.cad-lot { stroke: var(--cad-lot); stroke-width: 1.3; fill: none; }
.cad-arrow { stroke: var(--cad-arrow); stroke-width: 1; fill: none; }
.cad-area { fill: var(--cad-area-fill); stroke: var(--cad-area); stroke-width: 1.3; }
.cad-fat { fill: var(--cad-area); } .cad-fatblk { fill: var(--cad-area); }
.cad-fdt { fill: var(--cad-fdt); }
.cad-poleblk { fill: var(--cad-bg); stroke: var(--cad-ink); stroke-width: 1.5; } .cad-poleblk-dot { fill: var(--cad-ink); }
.cad-t { fill: var(--cad-ink); font: 500 10.5px var(--font-mono); } .cad-t--pole { font-weight: 600; } .cad-t--fat { fill: var(--cad-area); }
.cad-t--ok { fill: var(--cad-ok); font-weight: 600; }
.cad-t2 { fill: var(--cad-ink-2); font: 500 10px var(--font-mono); }
.cad-ghost { fill: var(--cad-hp); font: italic 500 10.5px var(--font-mono); }
.cad-dim { fill: var(--cad-arrow); font: 500 9.5px var(--font-mono); }
.cad-frame { fill: none; stroke: var(--cad-bar-2); stroke-width: 1; } .cad-frame--new { stroke: var(--cad-ink-2); stroke-dasharray: 6 4; }
.cad-leader { stroke: var(--cad-ink-2); stroke-width: 1; fill: none; }
.cad-info { fill: var(--cad-win); stroke: var(--cad-ink-2); stroke-width: 1; }
.cad-ring { fill: none; stroke: var(--cad-err); stroke-width: 2.5; }
.map { fill: var(--map); } .map-2 { fill: var(--map-2); } .map-road { stroke: var(--map-road); stroke-width: 8; fill: none; }
.w { fill: var(--cad-win); stroke: var(--cad-bar-2); } .w-h { fill: var(--cad-win-h); }
.w-t { fill: var(--cad-ink); font: 600 11.5px var(--font-body); }
.w-s { fill: var(--cad-ink-2); font: 500 10px var(--font-body); }
.w-r { fill: var(--cad-ink); font: 500 10.5px var(--font-body); }
.w-n { fill: var(--cad-ink); font: 500 10.5px var(--font-mono); }
.w-tab { fill: var(--cad-ink-2); font: 500 10px var(--font-body); } .w-tab--on { fill: var(--cad-ink); font-weight: 600; } .w-tab-line { fill: var(--color-accent); }
.w-ghost { fill: none; stroke: var(--cad-bar-2); }
.w-chk { fill: var(--color-accent); } .w-tick { fill: none; stroke: var(--color-on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-btn { fill: var(--color-accent); } .w-btn-t { fill: var(--color-on-accent); font: 600 11px var(--font-body); }
.w-rowsel { fill: var(--cad-sel); } .w-fixed { fill: var(--cad-fixed); }
.w-track { fill: var(--cad-bar-2); } .w-prog { stroke: var(--cad-ok); stroke-width: 6; stroke-linecap: round; fill: none; }
.sev-err { fill: var(--cad-err); } .sev-warn { fill: var(--cad-warn); } .sev-ok { fill: var(--cad-ok); }
.chip rect { fill: var(--cad-win); stroke: var(--cad-hp); } .chip text { fill: var(--cad-hp); font: 500 10.5px var(--font-body); } .chip .chip-s { fill: var(--cad-ink-2); font-size: 10px; }
.toast rect { fill: var(--cad-toast); stroke: var(--cad-ok); } .toast text { fill: var(--cad-ink); font: 500 11px var(--font-body); }
.toast-ok { fill: none; stroke: var(--cad-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ge { fill: var(--ge); } .ge-2 { fill: var(--ge-2); } .ge-road { stroke: var(--ge-road); stroke-width: 7; fill: none; }
.ge-side { fill: var(--doc-side); } .ge-h { fill: var(--doc-ink); font: 600 11px var(--font-body); } .ge-t { fill: var(--doc-ink); font: 500 9.5px var(--font-body); }
.ge-route { stroke: var(--cad-cable); stroke-width: 3; fill: none; stroke-linejoin: round; }
.ge-pin { fill: var(--ge-pin); stroke: var(--cad-white); stroke-width: 1.2; } .ge-pin-dot { fill: var(--cad-white); } .ge-hp { fill: var(--cad-hp); }
.xl { fill: var(--doc); } .xl-h { fill: var(--doc-xl); } .xl-ht { fill: var(--cad-white); font: 600 11px var(--font-body); }
.xl-th { fill: var(--doc-xl-th); } .xl-tht { fill: var(--doc-ink); font: 600 9.5px var(--font-mono); }
.xl-td { fill: var(--doc-ink); font: 500 9.5px var(--font-mono); } .xl-rule { stroke: var(--doc-rule); }
.sheet { fill: var(--cad-sheet); stroke: var(--cad-bar-2); } .sheet--back { fill: var(--cad-sheet-2); }
.sheet-line { fill: none; stroke: var(--cad-ink-2); stroke-width: 1; }
.vp { fill: var(--cad-bg); stroke: var(--cad-bar-2); }
.kop { fill: var(--cad-win); stroke: var(--cad-ink-2); } .kop-rule { stroke: var(--cad-ink-2); fill: none; }
.kop-t { fill: var(--cad-ink-2); font: 500 7.5px var(--font-mono); } .kop-v { fill: var(--cad-ink); font: 600 8px var(--font-mono); }
.kop-logo { fill: none; stroke: var(--color-accent); stroke-dasharray: 3 3; } .kop-lt { fill: var(--color-accent); font: 600 8px var(--font-body); }
.ds { fill: var(--cad-win); stroke: var(--cad-ink-2); } .ds-rule { stroke: var(--cad-ink-2); }
.ds-h { fill: var(--cad-ink); font: 600 9px var(--font-mono); } .ds-t { fill: var(--cad-ink-2); font: 500 8.5px var(--font-mono); } .ds-v { fill: var(--cad-ink); font: 600 8.5px var(--font-mono); }
.pdf { fill: var(--doc); } .pdf-fold { fill: none; stroke: var(--doc-rule); stroke-width: 1.5; } .pdf-band { fill: var(--doc-pdf); }
.pdf-t { fill: var(--cad-white); font: 700 11px var(--font-body); }
.slide { fill: var(--doc); } .slide-h { fill: var(--doc-ink); font: 700 12px var(--font-body); } .slide-rule { stroke: var(--color-accent); stroke-width: 2; }
.slide-s { fill: var(--doc-ink-2); font: 500 9.5px var(--font-mono); }
.slide-box { fill: var(--doc-box); stroke: var(--doc-rule); } .slide-t { fill: var(--doc-ink); font: 600 10.5px var(--font-mono); }
.gif .s-fdt { fill: var(--doc-navy); } .gif .s-fdt-t { fill: var(--cad-white); font: 600 12px var(--font-body); }
.gif .s-feeder { stroke: var(--doc-navy); stroke-width: 4; fill: none; stroke-linecap: round; }
.gif .s-branch { stroke: var(--doc-navy-2); stroke-width: 2; fill: none; }
.gif .f-blue { fill: var(--fiber-blue); } .gif .f-orange { fill: var(--fiber-orange); } .gif .f-green { fill: var(--fiber-green); } .gif .f-brown { fill: var(--fiber-brown); }
.file { fill: var(--cad-win); stroke: var(--cad-bar-2); } .file-ic--ppt { fill: var(--doc-ppt); } .file-ic--xl { fill: var(--doc-xl); }
.file-ict { fill: var(--cad-white); font: 700 12px var(--font-body); }

/* timeline states: the script toggles .on when an element's data-at time is reached */
.gif .k { opacity: 0; transition: opacity .3s var(--ease-out); } .gif .k.on { opacity: 1; }
.gif .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dd, .8s) linear; } .gif .draw.on { stroke-dashoffset: 0; }
.gif .pop { transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .2s var(--ease-out), transform .35s var(--ease-out); } .gif .pop.on { transform: none; }
.gif .rot { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease-in-out); } .gif .rot.on { transform: rotate(var(--r)); }
.gif .slidein { transform: var(--s); transition: opacity .4s, transform .8s var(--ease-in-out); } .gif .slidein.on { transform: none; }
.gif .zoom { transform-box: view-box; transform-origin: 0 0; transition: transform .9s var(--ease-in-out); } .gif .zoom.on { transform: var(--z); }
.gif .fly { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease-in), opacity .5s .3s; } .gif .fly.on { transform: var(--f); opacity: 0; }
.gif__scene { transition: opacity .45s var(--ease-out); } .gif.is-fading .gif__scene { opacity: 0; }
.gif.is-reset *, .gif.is-reset .gif__scene { transition: none !important; }
/* no script: show the finished picture */
.gif:not(.is-live) .k, .gif:not(.is-live) .pop { opacity: 1; transform: none; } .gif:not(.is-live) .draw { stroke-dashoffset: 0; }
.gif:not(.is-live) .tmp, .gif:not(.is-live) .gif__cur, .gif:not(.is-live) .gif__ring { display: none; }
.gif:not(.is-live) .slidein { transform: none; } .gif:not(.is-live) .rot { transform: rotate(var(--r)); }
.gif:not(.is-live) ~ figcaption .gif__btn { display: none; }

/* ---------- steps (F4, horizontal) ---------- */
.steps { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); counter-reset: step; }
.steps li { position: relative; padding-top: var(--space-2xl); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-strong); color: var(--color-on-strong); font: 500 var(--text-sm) var(--font-mono); }
.steps li::after { content: ""; position: absolute; top: 17px; left: 46px; right: calc(-1 * var(--space-xl) + 12px); height: 1px; background: var(--color-rule-2); }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--color-ink-2); margin: 0; }
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .steps li { padding: 0 0 0 52px; min-height: 34px; }
  .steps li::after { display: none; }
}

/* ---------- pricing teaser + closing ---------- */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--space-2xl); align-items: end; }
.teaser h2 { margin-bottom: var(--space-xs); }
.teaser p { margin: 0; color: var(--color-ink-2); font-size: var(--text-lg); max-width: 56ch; }
.teaser .num { color: var(--color-heading); font-weight: 600; white-space: nowrap; }
.closing { --color-focus: var(--color-line-blue); background: var(--color-band); color: var(--color-on-dark); }
.closing__in { padding-block: var(--space-3xl); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--space-2xl); align-items: center; }
.closing h2 { color: var(--color-on-dark); margin: 0; font-size: var(--text-2xl); }
.closing .link-arrow { color: var(--color-on-dark); }
.closing .link-arrow:hover { color: var(--color-accent); }
@media (max-width: 760px) { .teaser, .closing__in { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- sticky CTA (C4, mobile only) ---------- */
.sticky-cta { position: fixed; inset: auto 0 0; z-index: 40; padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--color-paper); border-top: var(--rule); box-shadow: var(--shadow-up);
  transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out); display: none; }
.sticky-cta.is-shown { transform: none; }
@media (max-width: 760px) { body.page-home .sticky-cta { display: block; } body.page-home .foot { padding-bottom: 96px; } }

/* ---------- page head ---------- */
.page-head { padding-block: var(--space-3xl) var(--space-xl); }
.page-head h1 { font-size: var(--text-3xl); }
.page-head p { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 60ch; margin: 0; }
.page-body { padding-bottom: var(--space-4xl); }

/* ---------- cards ---------- */
.card { background: var(--color-paper); border: var(--rule); border-radius: var(--radius-lg); padding: var(--space-lg); }
.card h3 { margin-bottom: var(--space-xs); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.plan { padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: var(--radius-md);
  background: var(--color-paper-3); border: 0; margin: 0 0 var(--space-xl); min-width: 0; }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg label { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 24px; border-radius: 7px;
  font-weight: 600; color: var(--color-ink-2); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--color-paper); color: var(--color-heading); box-shadow: var(--shadow-sm); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.save { display: inline-block; margin-left: 6px; white-space: nowrap; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 600; }
.price-opt { display: none; }
.plan:has(#cyc-yearly:checked) .price-opt[data-cycle="yearly"],
.plan:has(#cyc-monthly:checked) .price-opt[data-cycle="monthly"] { display: block; }
.price { font: 700 clamp(2.25rem, 5vw, 3rem)/1 var(--font-display); color: var(--color-heading); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-unit { display: block; margin-top: var(--space-xs); color: var(--color-ink-2); }
.price-eq { margin-top: var(--space-sm); font-weight: 500; color: var(--color-heading); }
.check { list-style: none; padding: 0; margin: var(--space-xl) 0; border-top: var(--rule); }
.check li { display: flex; gap: 12px; padding: 12px 0; border-bottom: var(--rule); }
.check li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--color-ok); }
.plan .alt { margin: var(--space-md) 0 0; text-align: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.notes h2 { font-size: var(--text-xl); }
.notes ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.notes li { counter-increment: n; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: var(--rule); color: var(--color-ink); }
.notes li::before { content: counter(n); font: 500 var(--text-sm)/1.6 var(--font-mono); color: var(--color-accent-ink); }
.notes li:first-child { border-top: var(--rule); }
.notes strong { color: var(--color-heading); }
@media (max-width: 880px) { .pricing { grid-template-columns: minmax(0, 1fr); } .plan { padding: var(--space-lg); } }

/* ---------- download ---------- */
.dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.dl h2 { font-size: var(--text-2xl); margin-bottom: 4px; }
.dl p { margin: 0; color: var(--color-ink-2); }
.dl__meta { font: 500 var(--text-sm) var(--font-mono); }
.dl__act { display: grid; gap: 8px; justify-items: center; text-align: center; }
.dl__act small { color: var(--color-ink-2); font-size: var(--text-xs); }
@media (max-width: 640px) { .dl { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); } .dl__act { justify-items: stretch; } }
.ol-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.ol-steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); padding: 10px 0; }
.ol-steps li::before { content: counter(s) "."; font: 500 var(--text-sm)/1.6 var(--font-mono); color: var(--color-accent-ink); }
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 12px 0; border-bottom: var(--rule); vertical-align: top; }
.spec th { width: 38%; font-weight: 500; color: var(--color-ink-2); padding-right: var(--space-md); }
.spec td { font-weight: 500; color: var(--color-heading); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); max-width: 820px; }
.contact .card { display: grid; gap: var(--space-sm); align-content: start; }
.contact .card.primary { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.contact .card p { margin: 0; }
.contact .val { font: 500 var(--text-lg) var(--font-mono); color: var(--color-heading); overflow-wrap: anywhere; }
.contact .btn { justify-self: start; margin-top: var(--space-xs); }
.tip { max-width: 820px; margin-top: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 640px) { .contact { grid-template-columns: minmax(0, 1fr); } .contact .btn { justify-self: stretch; } }

/* ---------- forms ---------- */
.form-card { margin-block: var(--space-3xl); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.form-card h1 { font-size: var(--text-2xl); }
label.lbl { display: block; font-weight: 600; margin: var(--space-md) 0 6px; color: var(--color-heading); }
.input { width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--color-rule-2); border-radius: var(--radius-md);
  font: inherit; background: var(--color-paper); color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out); }
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); border-radius: var(--radius-md); }
.input[aria-invalid="true"] { border-color: var(--color-err); }
.input:disabled { background: var(--color-paper-2); color: var(--color-ink-2); cursor: not-allowed; }
.input::placeholder { color: var(--color-ink-2); opacity: .7; }
.field-err { display: none; margin-top: 6px; color: var(--color-err); font-size: var(--text-sm); font-weight: 500; }
.input[aria-invalid="true"] + .field-err { display: block; }
.code-input { font: 500 1.75rem/1 var(--font-mono); letter-spacing: .45em; text-align: center; padding-left: .45em; }
.help { font-size: var(--text-sm); color: var(--color-ink-2); }
.form-foot { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule); font-size: var(--text-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-card { padding: var(--space-lg); margin-block: var(--space-xl); } }

/* ---------- account ---------- */
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-active { background: var(--color-ok-bg); color: var(--color-ok); }
.status-trial { background: var(--color-info-bg); color: var(--color-info); }
.status-grace { background: var(--color-warn-bg); color: var(--color-warn); }
.status-ended { background: var(--color-paper-3); color: var(--color-ink-2); }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px var(--space-md); margin: var(--space-md) 0; }
.kv dt { color: var(--color-ink-2); }
.kv dd { margin: 0; font-weight: 500; color: var(--color-heading); overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 10px; } }
.tbl-wrap { overflow-x: auto; border: var(--rule); border-radius: var(--radius-lg); }
.tbl { width: 100%; border-collapse: collapse; min-width: 560px; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; border-bottom: var(--rule); white-space: nowrap; }
.tbl th { font-size: var(--text-xs); color: var(--color-ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: var(--color-paper-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--font-mono); font-weight: 500; }
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.pill-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.pill-warn { background: var(--color-warn-bg); color: var(--color-warn); }

/* pay (choose plan) */
.choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); border: 0; padding: 0; margin: 0; min-width: 0; }
.choose legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.opt { position: relative; display: grid; gap: 4px; padding: var(--space-lg); border: 1.5px solid var(--color-rule-2); border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out); }
.opt:hover { border-color: var(--color-ink-2); }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); background: var(--color-accent-soft); }
.opt:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.opt b { font: 600 var(--text-lg) var(--font-display); color: var(--color-heading); }
.opt .p { font: 700 var(--text-2xl)/1.2 var(--font-display); color: var(--color-heading); }
.opt small { color: var(--color-ink-2); }
@media (max-width: 560px) { .choose { grid-template-columns: minmax(0, 1fr); } }

/* legal */
.legal { max-width: 720px; }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
.legal p { color: var(--color-ink); }
.ph { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--color-warn-bg); color: var(--color-warn); font-weight: 500; }

/* ---------- footer (Ft2 inline-rule) ---------- */
.foot { border-top: var(--rule); background: var(--color-paper-2); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md) var(--space-xl); padding-block: var(--space-xl) var(--space-md); }
.foot__brand { display: grid; gap: 4px; }
.foot__brand .brand { font-size: 1rem; }
.foot__brand span.muted { font-size: var(--text-sm); }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px var(--space-lg); }
.foot__links a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.foot__links a:hover { color: var(--color-heading); text-decoration: underline; }
.foot__wa { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--color-heading); }
.foot__wa svg { width: 18px; height: 18px; color: var(--color-ok); }
.foot__base { border-top: var(--rule); padding-block: var(--space-md) var(--space-lg); font-size: var(--text-xs); color: var(--color-ink-2); }

/* ---------- production additions ---------- */
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: 100; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md);
  background: var(--color-strong); color: var(--color-on-strong); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--space-xs); color: var(--color-on-strong); }
.center { text-align: center; }
.small { font-size: var(--text-sm); }
.hero__fig { --color-focus: var(--color-line-blue); }
.s-fdt-dark { fill: var(--color-line-blue); }
.page-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.btn-row form { margin: 0; }
.opt-card { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); }
.opt-card.featured { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.opt-card .p { font: 700 var(--text-2xl)/1.2 var(--font-display); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.opt-card .btn { margin-top: var(--space-sm); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
.gif video { display: block; width: 100%; height: auto; }
.gif--video { aspect-ratio: 16 / 9; }

/* receipt: a plain document, always printed light */
.receipt { padding-block: var(--space-2xl) var(--space-4xl); max-width: 760px; }
.receipt__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap;
  padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: var(--rule); }
.receipt__head h1 { font-size: var(--text-2xl); margin: 0; text-align: right; }
.receipt .amount { font: 700 var(--text-xl) var(--font-display); color: var(--color-heading); font-variant-numeric: tabular-nums; }
@media print {
  :root, :root[data-theme="dark"] {
    --color-paper: oklch(100% 0 0); --color-paper-2: oklch(100% 0 0); --color-paper-3: oklch(96% 0 0);
    --color-ink: oklch(15% 0 0); --color-ink-2: oklch(35% 0 0); --color-heading: oklch(10% 0 0);
    --color-rule: oklch(80% 0 0); --color-rule-2: oklch(70% 0 0); --color-accent-ink: oklch(15% 0 0);
    color-scheme: light;
  }
  .nav, .foot, .sticky-cta, .no-print, .skip, .flash { display: none !important; }
  body { background: var(--color-paper); }
  .card { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .wb__panel { animation: none; }
}