/* Urthmapper components for www/ — the stylesheet half of um/components.js.
   Source: docs/tools/components/components.css (copied here by build.sh).
   The page's own <style> block defines the color and font tokens; this adds
   the length, radius and shadow tokens the components also read. */
:root {
  --danger:var(--accent);
  --danger-text:var(--accent-text);
  --danger-soft:var(--accent-soft);
  --shadow-panel:0 0 0 1px rgba(255, 255, 255, 0.04), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 140px -40px rgba(0, 102, 177, 0.55);
  --shadow-hot:0 0 0 1px rgba(225, 39, 24, 0.2), 0 30px 80px -40px rgba(225, 39, 24, 0.5);
  --shadow-halo:0 0 0 5px rgba(225, 39, 24, 0.25);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:56px;
  --space-12:72px;
  --space-16:96px;
  --space-20:128px;
  --space-24:160px;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-pill:9999px;
  --wrap:1200px;
  --nav-h:64px;
  --control:44px;
  --control-sm:34px;
  --chip-h:26px;
  --grid-pitch:64px;
}

/* Urthmapper components. Every color, length and radius comes from tokens.css.
   Motion has no token family, so its values live here. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 700ms;
}

.um, .um *, .um *::before, .um *::after { box-sizing: border-box; }
.um :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, blockquote) { margin: 0; padding: 0; }
.um :where(ul, ol) { list-style: none; }
.um :where(a) { color: inherit; text-decoration: none; }
.um :where(button) { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.um :where(svg) { display: block; }
.um :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.um-stage { padding: var(--space-6); }
.um-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.um-num { font-variant-numeric: tabular-nums; }

/* type roles */
.um-hero { font:700 clamp(40px,8.33vw,64px)/1.05 var(--font-display); text-wrap: balance; letter-spacing:0; }
.um-closer { font:700 clamp(40px,8.33vw,64px)/1.05 var(--font-display); text-wrap: balance; letter-spacing:0; }
.um-h2 { font:700 clamp(32px,6.25vw,48px)/1.1 var(--font-display); text-wrap: balance; letter-spacing:0; }
.um-h3 { font:700 24px/1.25 var(--font-display);letter-spacing:0; }
.um-title { font:700 18px/1.4 var(--font-display);letter-spacing:0; }
.um-dim { color: var(--dim); }
.um-lede { max-width: 36em; font:400 16px/1.55 var(--font-text); color: var(--mute); letter-spacing:0; }
.um-p { max-width: 34em; font:400 16px/1.55 var(--font-text); color: var(--mute); letter-spacing:0; }
.um-eyebrow { font:700 13px/1.3 var(--font-text); text-transform: uppercase; color: var(--accent-text); letter-spacing:1.5px; }
.um-data { font: 400 0.75rem/1.4 var(--font-mono);font-variant-numeric:tabular-nums; letter-spacing: 0; }
.um-label { font:700 13px/1.3 var(--font-text); text-transform: uppercase; color: var(--dim); letter-spacing:1.5px; }

/* Button */
.um-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control); padding: 0 18px; border: 1px solid var(--fg); border-radius: var(--radius-pill); background: var(--fg); color: var(--bg); font:700 14px/1 var(--font-text); white-space: nowrap; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); letter-spacing:.5px; }
.um-btn:hover { opacity: 0.9; }
.um-btn:active { transform: scale(0.96); }
.um-btn svg { transition: transform var(--dur-2) var(--spring); }
.um-btn:hover svg { transform: translateX(3px); }
.um-btn-sm { height: var(--control-sm); padding: 0 14px; font-size: 0.8125rem; }
.um-btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.um-btn-ghost:hover { opacity: 1; background: var(--surface-2); border-color: var(--line-3); }
.um-btn:disabled { cursor: default; opacity: 1; background: transparent; color: var(--mute); border-color: var(--line-2); }
.um-btn-block { width: 100%; }

/* Chip */
.um-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); font: 400 0.75rem/1 var(--font-mono);font-variant-numeric:tabular-nums; color: var(--mute); white-space: nowrap; }
.um-chip-accent { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.um-chip-green { color: var(--green-text); border-color: transparent; background: var(--green-soft); }
.um-chip-blue { color: var(--blue-text); border-color: transparent; background: var(--blue-soft); }
.um-chip-danger { color: var(--fg); }
.um-chip-danger i { color: var(--danger); }
.um-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.um-pill { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px 0 4px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); font:400 14px/1 var(--font-text); color: var(--mute); transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2); letter-spacing:0; }
.um-pill:hover { border-color: var(--line-3); color: var(--fg); }
.um-pill b { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font:700 13px/1.3 var(--font-text); text-transform: uppercase; letter-spacing:1.5px; }

/* SectionHead */
.um-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
.um-head .um-h2 { margin-top: 14px; }
.um-head .um-p { max-width: 26em; }

/* Nav */
.um-nav { display: flex; align-items: center; gap: var(--space-7); height: var(--nav-h); padding: 0 var(--space-8); border-bottom: 1px solid var(--line); background: var(--bg); }
.um-nav-brand img { display: block; height: 30px; width: auto; }
.um-nav-brand span { font:700 18px/1.4 var(--font-display);letter-spacing:0; }
.um-nav-links { display: flex; gap: var(--space-1); }
.um-nav-links a, .um-nav-ghost { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); font:400 14px/1.4 var(--font-text); color: var(--mute); transition: color var(--dur-1) linear, background-color var(--dur-1) linear; letter-spacing:.3px; }
.um-nav-links a:hover, .um-nav-ghost:hover { color: var(--fg); background: var(--surface-2); }
.um-nav-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Panel */
.um-panel { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; }
.um-panel-hero { box-shadow: var(--shadow-panel); }
.um-panel-bar { display: flex; align-items: center; gap: var(--space-4); min-height: 46px; padding: 0 var(--space-4); border-bottom: 1px solid var(--line); }
.um-panel-bar .um-chip { margin-left: auto; }
.um-panel-bar b { font: 400 0.875rem/1 var(--font-mono);font-variant-numeric:tabular-nums; }
.um-panel-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.um-fact { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--bg); }
.um-fact b { font: 400 0.9375rem/1.3 var(--font-mono);font-variant-numeric:tabular-nums; }
.um-fact b[data-tone="green"] { color: var(--green-text); }
.um-fact b[data-tone="blue"] { color: var(--blue-text); }
.um-fact b[data-tone="accent"] { color: var(--accent-text); }

/* Timeline */
.um-steps { --draw: 0.5; position: relative; padding-left: 44px; }
.um-steps::before, .um-steps::after { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; }
.um-steps::before { background: var(--line-2); }
.um-steps::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--draw)); }
.um-steps li { position: relative; padding-bottom: var(--space-10); opacity: 0.45; transition: opacity var(--dur-3) var(--ease-out); }
.um-steps li:last-child { padding-bottom: 0; }
.um-steps li[data-on] { opacity: 1; }
.um-steps li::before { content: ""; position: absolute; left: -38px; top: 6px; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-3); transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--spring); }
.um-steps li[data-on]::before { background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-halo); transform: scale(1.1); }
.um-step-head { display: flex; gap: var(--space-3); align-items: center; }
.um-step-head .um-data { color: var(--fg); }
.um-steps .um-h3 { margin-top: var(--space-2); }
.um-steps p { margin-top: var(--space-2); max-width: 32em; color: var(--mute); }

/* TileGrid */
.um-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--line); overflow: hidden; }
.um-tile { display: flex; flex-direction: column; min-height: 220px; padding: var(--space-7); background: var(--bg); }
.um-tile-wide { grid-column: span 2; }
.um-tile-vis { flex: 1; min-height: 72px; }
.um-tile .um-title { margin-top: auto; padding-top: var(--space-6); }
.um-tile p { margin-top: var(--space-2); max-width: 34em; font-size: 0.9375rem; color: var(--mute); }
.um-big { font:700 clamp(40px,8.33vw,64px)/1.05 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing:0; }
.um-stack { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
.um-stack div { display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 0 14px; margin-left: calc(var(--i, 0) * 24px); border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--surface); font: 400 0.75rem/1 var(--font-mono);font-variant-numeric:tabular-nums; }
.um-stack span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-stack em { margin-left: auto; font-style: normal; font-size: 0.6875rem; color: var(--dim); }
.um-stack div:last-child em { color: var(--green-text); }

/* CellGrid (cursor spotlight on the hairlines) */
.um-cells { --mx: -999px; --my: -999px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 1px; border-radius: var(--radius-xl); overflow: hidden; background: radial-gradient(360px circle at var(--mx) var(--my), var(--accent), transparent 60%), var(--line-2); }
.um-cell { display: flex; flex-direction: column; gap: 6px; min-height: 104px; padding: var(--space-5); background: var(--bg-2); color: var(--fg); transition: background-color var(--dur-2) var(--ease-out); }
.um-cell:hover { background: var(--surface); }
.um-cell .um-label { margin-bottom: auto; }
.um-cell b { font:700 16px/1.4 var(--font-display);letter-spacing:0; }
.um-cell > span:last-child { font:400 14px/1.55 var(--font-text); color: var(--mute); letter-spacing:0; }

/* Stats */
.um-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.um-stats > div { padding: var(--space-7) var(--space-6) var(--space-7) 0; }
.um-stats > div + div { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.um-stats dt { font:700 clamp(32px,6.25vw,48px)/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing:0; }
.um-stats dd { margin-top: 10px; font:400 14px/1.55 var(--font-text); color: var(--mute); letter-spacing:0; }

/* Meter */
.um-meter { display: grid; gap: var(--space-3); }
.um-meter-bar { display: grid; grid-template-columns: repeat(var(--n, 25), 1fr); gap: 3px; height: 28px; }
.um-meter-bar i { border-radius: 2px; background: var(--surface-2); }
.um-meter-bar i[data-on] { background: var(--green); }
.um-meter-key { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--mute); font-size: 0.8125rem; }
.um-meter-key b { color: var(--fg); font: 400 0.8125rem/1 var(--font-mono);font-variant-numeric:tabular-nums; }

/* Toggle */
.um-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--bg-2); }
.um-toggle button { position: relative; z-index: 1; height: var(--control-sm); padding: 0 16px; border-radius: var(--radius-pill); font:700 16px/1.4 var(--font-text); color: var(--mute); white-space: nowrap; transition: color var(--dur-2); letter-spacing:0; }
.um-toggle button[aria-pressed="true"] { color: var(--bg); }
.um-toggle button em { font-style: normal; font-weight:700; opacity: 0.75; }
.um-toggle > i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--radius-pill); background: var(--fg); transition: transform var(--dur-3) var(--spring); }
.um-toggle > i[data-right] { transform: translateX(100%); }

/* Range */
.um-range { --pct: 50%; display: grid; gap: var(--space-2); }
.um-range-top { display: flex; justify-content: space-between; align-items: baseline; }
.um-range-top output { font: 400 0.875rem/1 var(--font-mono);font-variant-numeric:tabular-nums; }
.um-range input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.um-range input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--accent) var(--pct), var(--surface-2) var(--pct)); }
.um-range input::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--accent) var(--pct), var(--surface-2) var(--pct)); }
.um-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--fg); box-shadow: var(--shadow-halo); transition: transform var(--dur-2) var(--spring); }
.um-range input:active::-webkit-slider-thumb { transform: scale(1.15); }
.um-range input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--fg); box-shadow: var(--shadow-halo); }

/* Field */
.um-field { display: grid; gap: var(--space-2); }
.um-field input, .um-field select { height: var(--control); padding: 0 14px; border: 1px solid var(--line-3); border-radius: var(--radius-md); background: var(--bg-2); color: var(--fg); font:400 16px/1 var(--font-text); transition: border-color var(--dur-2) var(--ease-out); letter-spacing:0; }
.um-field input::placeholder { color: var(--dim); }
.um-field input:hover { border-color: var(--mute); }
.um-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius-md); }
.um-field small { font:400 14px/1.55 var(--font-text); color: var(--mute); letter-spacing:0; }
.um-field[data-invalid] input { border-color: var(--danger); }
.um-field[data-invalid] small { color: var(--danger-text); }

/* PlanCard */
.um-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.um-plan { display: flex; flex-direction: column; padding: var(--space-7); border: 1px solid var(--line-2); border-radius: var(--radius-xl); background: var(--bg-2); }
.um-plan-hot { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), transparent 40%), var(--bg-2); box-shadow: var(--shadow-hot); }
.um-plan-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.um-plan-sub { margin-top: 6px; font-size: 0.875rem; line-height: 1.45; color: var(--mute); }
.um-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--space-7); }
.um-price span { font:700 clamp(32px,6.25vw,48px)/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing:0; }
.um-price small { font-size: 0.9375rem; color: var(--mute); }
.um-plan ul { display: grid; gap: 10px; margin: var(--space-6) 0 var(--space-7); }
.um-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; line-height: 1.4; }
.um-plan li svg { flex: none; margin-top: 2px; color: var(--green-text); }
.um-plan .um-btn { margin-top: auto; width: 100%; }

/* Quote */
.um-quote { max-width: 900px; margin: 0 auto; text-align: center; }
.um-quote blockquote { font:700 24px/1.25 var(--font-display); text-wrap: balance; letter-spacing:0; }
.um-quote figcaption { margin-top: var(--space-6); font-size: 0.8125rem; color: var(--mute); }
.um-quote figcaption b { display: block; margin-bottom: 6px; font:700 13px/1.3 var(--font-text); text-transform: uppercase; color: var(--fg); letter-spacing:1.5px; }

/* Hero ground: hairline survey grid, one glow */
.um-ground { position: relative; isolation: isolate; overflow: hidden; }
.um-ground::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: var(--grid-pitch) var(--grid-pitch); background-position: center -1px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 0%, transparent 75%); }
.um-ground::after { content: ""; position: absolute; left: 50%; top: 40%; z-index: -1; width: 900px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }

@media (max-width: 720px) {
  .um-nav { padding: 0 var(--space-5); gap: var(--space-4); }
  .um-nav-links, .um-nav-ghost { display: none; }
  .um-panel-body, .um-cells, .um-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .um-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .um-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .um-tiles, .um-plans { grid-template-columns: 1fr; }
  .um-tile-wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .um *, .um *::before, .um *::after { animation: none !important; transition-duration: 0ms !important; }
}

/* ── freedesignmd components, skinned ─────────────────────────────────────
   Fifteen components are built on MIT-licensed sources from freedesignmd
   (components/src/vendor). Each carries its own stylesheet and its own
   palette; the rules below re-point their custom properties at this system's
   tokens. They are declared !important because the vendor <style> is rendered
   inside the component, after this file, at equal specificity. */
.um-fd, .um-fd [class^="fd-"], .um-fd [class*=" fd-"] { font-family: var(--font-text) !important; }

/* Button ← MagneticButton */
.um-fd .fd-mag { --fd-mag-bg: var(--fg) !important; --fd-mag-fg: var(--bg) !important; --fd-mag-ink: var(--fg) !important; --fd-mag-line: var(--line-2) !important; }
.um-fd-btn { display: inline-block; }
.um-fd .fd-mag-btn { font-weight:700 !important; }

/* Chip ← PillTagButton */
.um-fd .fd-pill-group { --p-bg: var(--bg) !important; --p-fg: var(--fg) !important; --p-mut: var(--mute) !important; --p-line: var(--line-2) !important; --p-hover: var(--surface-2) !important; --p-count: var(--surface-2) !important; --p-ring: var(--accent) !important; }
.um-fd .fd-pill-group .fd-pill { --p-on-bg: var(--green) !important; --p-on-fg: var(--on-green) !important; --p-on-count: rgba(0, 0, 0, 0.16) !important; }
.um-fd .fd-pill, .um-fd .fd-pill-count { font-family: var(--font-mono) !important;font-variant-numeric:tabular-nums; font-weight:400 !important; }

/* Toggle ← SegmentedControl */
.um-fd .fd-seg { --g-track: var(--bg-2) !important; --g-thumb: var(--fg) !important; --g-thumb-sh: none !important; --g-fg: var(--bg) !important; --g-mut: var(--mute) !important; --g-ring: var(--accent) !important; --g-badge-bg: var(--green-soft) !important; --g-badge-fg: var(--green-text) !important; }
.um-fd .fd-seg-track { box-shadow: inset 0 0 0 1px var(--line-2); }
.um-fd .fd-seg-badge { font-family: var(--font-mono) !important;font-variant-numeric:tabular-nums; font-weight:400 !important; }

/* Field ← InputField */
.um-fd .fd-in { --fd-in-radius: var(--radius-md); --fd-in-accent: var(--accent); --n-bg: var(--bg) !important; --n-fg: var(--fg) !important; --n-mut: var(--mute) !important; --n-line: var(--line-3) !important; --n-line-h: var(--mute) !important; --n-err: var(--accent-text) !important; --n-ok: var(--green-text) !important; --n-dis: var(--surface) !important; --n-sh: 0 0 0 0 transparent !important; }
.um-fd-field { max-width: 420px; }

/* Range ← GlassSlider */
.um-fd-range { max-width: 420px; }
.um-fd .fd-gsl { --fd-gsl-track: var(--surface-2) !important; }
.um-fd-range output { font: 400 0.875rem/1 var(--font-mono);font-variant-numeric:tabular-nums; }

/* SectionHead ← ScrambleText */
.um-fd .um-eyebrow .fd-sc, .um-fd .um-eyebrow [class^="fd-sc"] { font-family: var(--font-text) !important; font-weight: 700 !important; }

/* Stats ← Odometer (CountUpStats) */
.um-fd.um-stats dt [class^="fd-"] { font-family: var(--font-display) !important; font-weight:700 !important; }

/* Meter ← AnimatedNumber */
.um-meter-head { display: flex; align-items: baseline; gap: 10px; }
.um-meter-n { font:700 clamp(32px,6.25vw,48px)/1.1 var(--font-display); color: var(--fg); letter-spacing:0; }
.um-fd .fd-an { --fd-an-up: var(--green-text) !important; --fd-an-down: var(--accent-text) !important; }

/* Quote ← ScrollTextReveal */
.um-fd .fd-trs { --fd-trs-ink: var(--fg) !important; --fd-trs-accent: var(--fg) !important; --fd-trs-marker: var(--accent) !important; }
.um-fd.um-quote .fd-trs, .um-fd.um-quote .fd-trs * { font-family: var(--font-display) !important; font-weight:700 !important; }

/* CellGrid ← SplitFlap / FlapBoard */
.um-fd .fd-sf { --fd-sf-bg: var(--surface-2) !important; --fd-sf-bg2: var(--surface) !important; font-family: var(--font-mono) !important;font-variant-numeric:tabular-nums; font-weight:400 !important; }
.um-fd-board { overflow-x: auto; font-size: 15px; }
/* The pricing source sets its "save" note in an italic serif at 35% opacity:
   a third typeface and a slant, neither of which this brand has. It becomes a
   mono label in the text-safe red. */
.um-fd .fd-ptt-save { font:700 13px/1.3 var(--font-text) !important; font-style: normal !important; text-transform: uppercase; color: var(--accent-text) !important; opacity: 0.6 !important; letter-spacing:1.5px; }
.um-fd .fd-ptt-save[data-on] { opacity: 1 !important; }
.um-fd .fd-sf-board th { color: var(--dim) !important; font-family: var(--font-mono) !important;font-variant-numeric:tabular-nums; font-weight:400 !important; }

/* Panel ← TiltCard (adapted) */
.um-tilt { perspective: 1100px; }
.um-tilt-card { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--dur-4) var(--ease-out); will-change: transform; }
.um-tilt-card[data-live] { transition: transform 120ms linear; }
.um-tilt-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.1), transparent 60%); transition: opacity var(--dur-3) var(--ease-out); }
.um-tilt-card[data-live] .um-tilt-sheen { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none) { .um-tilt-card { transform: none !important; } .um-tilt-sheen { display: none; } }

/* TileGrid ← CursorStage (MagneticCursorGrid) */
.um-fd .fd-mcg { --fd-mcg-cursor: var(--fg) !important; --fd-mcg-cursor-ink: var(--bg) !important; }
.um-fd-tiles .um-tile { color: var(--fg); text-decoration: none; }
.um-fd-tiles .um-tiles { overflow: visible; }

/* Timeline ← ProcessTimeline */
.um-fd .fd-ptl { --fd-ptl-bg: var(--bg) !important; --fd-ptl-ink: var(--fg) !important; --fd-ptl-mut: var(--mute) !important; --fd-ptl-line: var(--line-2) !important; --fd-ptl-signal: var(--accent) !important; --fd-ptl-card: var(--bg-2) !important; --fd-ptl-sans: var(--font-text) !important; --fd-ptl-mono-f: var(--font-mono) !important; }
.um-fd .fd-ptl-title { font:700 clamp(32px,6.25vw,48px)/1.1 var(--font-display) !important; text-transform: none !important; letter-spacing:0 !important; }
.um-fd .fd-ptl-stages { border-top-color: var(--line-2) !important; }
.um-fd .fd-ptl-stage[data-s="live"] { background: var(--surface) !important; }
.um-fd .fd-ptl-ref, .um-fd .fd-ptl-stats dt, .um-fd .fd-ptl-mono, .um-fd .fd-ptl-leg { font-family: var(--font-mono) !important;font-variant-numeric:tabular-nums; }
.um-fd .fd-ptl-stage h3, .um-fd .fd-ptl-stage [class*="name"] { font-weight:700 !important; }

/* PlanCard ← PricingTiersToggle */
.um-fd .fd-ptt { --fd-ptt-paper: var(--bg) !important; --fd-ptt-ink: var(--fg) !important; --fd-ptt-signal: var(--accent) !important; --mut: var(--mute); --line: var(--line); --line2: var(--line-2) !important; --sans: var(--font-text) !important; --mono: var(--font-mono) !important; }
.um-fd .fd-ptt-title { font:700 clamp(32px,6.25vw,48px)/1.1 var(--font-display) !important;letter-spacing:0 !important; }
.um-fd .fd-ptt-seg { background: var(--bg-2) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; }
.um-fd .fd-ptt-opt { font-weight:700 !important; }
.um-fd .fd-ptt-price, .um-fd .fd-ptt-price * { font-family: var(--font-display) !important; font-weight:700 !important; }
.um-fd .fd-ptt-price .fd-ptt-unit, .um-fd .fd-ptt-num, .um-fd .fd-ptt-tab, .um-fd .fd-ptt-limits *, .um-fd .fd-ptt-foot, .um-fd .fd-ptt-foot * { font-family: var(--font-mono) !important;font-variant-numeric:tabular-nums; font-weight: 400 !important; }
.um-fd .fd-ptt-plan h3, .um-fd .fd-ptt-plan [class*="name"] { font-weight:700 !important; }
.um-fd .fd-ptt-plan[data-rec] { --mut: #5C5C5C; --line: rgba(0, 0, 0, 0.14); }
.um-fd .fd-ptt-feats svg { color: var(--green-text) !important; }
.um-fd .fd-ptt-plan[data-rec] .fd-ptt-feats svg { color: #0F5A4B !important; }
.um-fd .fd-ptt-foot li::before { background: var(--line-3) !important; }
.um-fd .fd-ptt-cta { font-weight:700 !important; }

/* Nav ← FloatingCapsuleNav */
.um-fd .fd-fcn { --fd-fcn-bg: var(--bg) !important; --fd-fcn-cap: var(--surface) !important; --fd-fcn-line: var(--line-2) !important; --fd-fcn-ink: var(--fg) !important; --fd-fcn-dim: var(--mute) !important; --fd-fcn-accent: var(--fg) !important; }
.um-fd-nav-logo .fd-fcn-mark { width: auto !important; }
.um-fd-nav-logo .fd-fcn-mark img { display: block; height: 22px; width: auto; }
.um-fd-nav-logo .fd-fcn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Headlines are set in capitals (docs/BRAND.md §1). */
.um-hero, .um-closer, .um-h2, .um-big, .um-fd .fd-ptl-title, .um-fd .fd-ptt-title { text-transform: uppercase !important; }