/* site.css: consumes tokens only. No raw colors, no raw durations. */

/* ============ RESET ============ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
  img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  p, li, h1, h2, h3, h4, blockquote, dd { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
}

/* ============ BASE ============ */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + var(--space-5));
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    min-height: 100svh;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    letter-spacing: var(--track-display);
    line-height: var(--lh-snug);
    text-wrap: balance;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 30, "WONK" 0;
  }
  h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-2xl); line-height: 1.06; }
  h3 { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.012em; }
  h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
  p { text-wrap: pretty; }
  em, i { font-style: italic; }
  .display em, h1 em, h2 em {
    font-style: italic;
    color: var(--color-accent-text);
    font-variation-settings: "SOFT" 100, "WONK" 1;
  }
  strong, b { font-weight: var(--fw-semibold); }
  small { font-size: var(--fs-sm); }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--color-border-strong);
    transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    a:hover { text-decoration-color: currentColor; color: var(--color-accent-text); }
  }

  :focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
    border-radius: var(--radius-sm);
  }
  ::selection { background: var(--color-accent-soft); color: var(--color-fg); }

  hr { border: 0; border-top: var(--hairline) solid var(--color-border); }
  kbd {
    font-family: var(--font-mono);
    font-size: 0.8em;
    padding: 0.1em 0.45em;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--hairline) var(--color-border-strong);
    background: var(--color-bg-raised);
  }
  .num, time, td { font-variant-numeric: tabular-nums; }

  @media (forced-colors: active) {
    :focus-visible { outline: 2px solid CanvasText; }
    .btn { border: 1px solid ButtonText; }
  }
}

/* ============ LAYOUT ============ */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container-narrow { width: min(100% - 2 * var(--gutter), 48rem); margin-inline: auto; }
  .section { padding-block: var(--section-y); position: relative; }
  .section-tight { padding-block: calc(var(--section-y) * 0.6); }
  .stack > * + * { margin-top: var(--stack, var(--space-4)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-3)); align-items: center; }
  .grid { display: grid; gap: var(--gap, var(--space-5)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 18rem)), 1fr)); }
  .split { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 60rem) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  }
  .sticky-col { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .center { text-align: center; margin-inline: auto; }
  .measure { max-width: var(--measure); }
}

/* ============ COMPONENTS ============ */
@layer components {

  /* ---- Skip link ---- */
  .skip-link {
    position: absolute; left: var(--space-4); top: var(--space-3); z-index: calc(var(--z-dialog) + 1);
    padding: var(--space-2) var(--space-4); background: var(--color-fg); color: var(--color-bg);
    border-radius: var(--radius-sm); transform: translateY(-200%); text-decoration: none;
  }
  .skip-link:focus-visible { transform: none; }

  /* ---- Grain overlay (pure SVG, ~0 cost) ---- */
  .grain {
    position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain);
    opacity: var(--color-grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }
  @media (prefers-reduced-transparency: reduce) { .grain { display: none; } }

  /* ---- Nav ---- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--color-nav-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 var(--hairline) 0 var(--color-border);
    padding-top: env(safe-area-inset-top);
  }
  @media (prefers-reduced-transparency: reduce) { .site-header { background: var(--color-bg); backdrop-filter: none; } }
  .nav { height: var(--nav-h); display: flex; align-items: center; gap: var(--space-5); }
  .brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.02em; font-weight: 450; min-height: 44px; }
  .brand img { width: auto; height: 36px; flex: none; }
  .brand .dot { color: var(--color-accent-text); }
  .nav-links { display: none; gap: var(--space-1); margin-inline-start: auto; }
  .nav-links a {
    text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-fg-muted);
    min-height: 40px; display: inline-flex; align-items: center;
  }
  .nav-links a[aria-current="page"] { color: var(--color-fg); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
  @media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--color-fg); background: var(--color-bg-muted); } }
  .nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
  @media (min-width: 64rem) {
    .nav-links { display: flex; }
    .nav-actions { margin-inline-start: var(--space-3); }
    .nav-actions .menu-btn { display: none; }
  }
  .icon-btn {
    width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-pill);
    color: var(--color-fg-muted); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .icon-btn svg { width: 20px; height: 20px; }
  @media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--color-bg-muted); color: var(--color-fg); } }
  .theme-toggle .moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .moon { display: block; }
  .nav-actions .nav-cta { display: none; }
  @media (min-width: 30rem) { .nav-actions .nav-cta { display: inline-flex; } }
  @media (max-width: 22rem) { .brand { font-size: 1.1rem; } .brand img { height: 30px; } .nav { gap: var(--space-2); } }

  /* Mobile menu (native <dialog>) */
  .menu-dialog {
    margin: 0; margin-inline-start: auto; height: 100dvh; max-height: 100dvh; width: min(100%, 26rem); max-width: 100%;
    border: 0; padding: calc(env(safe-area-inset-top) + var(--space-5)) var(--space-6) calc(env(safe-area-inset-bottom) + var(--space-6));
    background: var(--color-bg-raised); color: var(--color-fg);
    box-shadow: var(--shadow-pop);
    opacity: 0; transform: translateX(var(--motion-distance));
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete;
  }
  .menu-dialog[open] { opacity: 1; transform: none; display: flex; flex-direction: column; }
  @starting-style { .menu-dialog[open] { opacity: 0; transform: translateX(var(--motion-distance)); } }
  .menu-dialog::backdrop { background: oklch(from var(--bean-12) l c h / 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .menu-dialog .menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
  .menu-dialog nav a {
    display: flex; justify-content: space-between; align-items: center; text-decoration: none;
    font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: var(--track-display);
    padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--color-border); min-height: 56px;
  }
  .menu-dialog nav a[aria-current="page"] { color: var(--color-accent-text); }
  .menu-dialog .menu-foot { margin-top: auto; padding-top: var(--space-6); }

  /* ---- Buttons ---- */
  .btn {
    --btn-h: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--btn-h); padding: 0 var(--space-5);
    border-radius: var(--radius-sm); font-weight: var(--fw-semibold); font-size: var(--fs-base); line-height: 1;
    text-decoration: none; white-space: nowrap; letter-spacing: -0.005em;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
  .btn-sm { --btn-h: 40px; padding: 0 var(--space-4); font-size: var(--fs-sm); }
  .btn-pill { border-radius: var(--radius-pill); }
  .btn-primary { background: var(--color-accent); color: var(--color-accent-fg); box-shadow: 0 0 0 var(--hairline) oklch(from var(--color-accent) calc(l - 0.08) c h) inset, 0 8px 22px -10px var(--color-accent); }
  .btn-secondary { background: var(--color-bg-raised); color: var(--color-fg); box-shadow: 0 0 0 var(--hairline) var(--color-border-strong) inset; }
  .btn-ghost { color: var(--color-fg); padding-inline: var(--space-3); }
  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { background: var(--color-accent-hover); color: var(--color-accent-fg); }
    .btn-secondary:hover { background: var(--color-bg-muted); color: var(--color-fg); }
    .btn:hover svg.arrow { transform: translateX(3px); }
  }
  .btn:active { transform: translateY(1px); }
  .band-dark .btn-primary { background: var(--band-accent); color: var(--bean-12); }
  .band-dark .btn-secondary { background: transparent; color: var(--band-fg); box-shadow: 0 0 0 var(--hairline) var(--band-border) inset; }

  /* ---- Eyebrow / chips ---- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-accent-text);
  }
  .eyebrow.pill { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-accent-soft); box-shadow: 0 0 0 var(--hairline) oklch(from var(--color-accent) l c h / 0.25) inset; }
  .eyebrow .live { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 var(--color-accent); animation: pulse 2.4s var(--ease-out) infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(from var(--color-accent) l c h / 0.5); } 70%, 100% { box-shadow: 0 0 0 8px oklch(from var(--color-accent) l c h / 0); } }
  @media (prefers-reduced-motion: reduce) { .eyebrow .live { animation: none; } }
  .chip svg { width: 12px; height: 12px; flex: none; }
  .chip {
    display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-medium);
    padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); background: var(--color-bg-muted); color: var(--color-fg-muted); text-decoration: none;
  }
  .lede { font-size: var(--fs-lg); line-height: 1.5; color: var(--color-fg-muted); max-width: 40ch; text-wrap: pretty; }
  .muted { color: var(--color-fg-muted); }
  .subtle { color: var(--color-fg-subtle); font-size: var(--fs-sm); }

  /* ---- Section heads ---- */
  .section-head { max-width: 46rem; margin-bottom: var(--space-8); }
  .section-head > * + * { margin-top: var(--space-4); }
  .section-head.center { text-align: center; }
  .section-head.center .lede { margin-inline: auto; }

  /* ---- Hero ---- */
  .hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5rem); min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; }
  .hero::before {
    content: ""; position: absolute; z-index: -1; inset: -10% -10% 0;
    background: radial-gradient(ellipse 50% 50% at 72% 28%, var(--color-glow), transparent 70%),
      radial-gradient(ellipse 35% 30% at 8% 70%, oklch(from var(--color-glow) l c h / 0.55), transparent 70%);
  }
  .hero-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-9); } }
  .hero h1 { font-size: var(--fs-hero); max-width: 12ch; margin-top: var(--space-5); }
  .hero .lede { margin-top: var(--space-5); max-width: 36rem; }
  .hero-ctas { margin-top: var(--space-6); --gap: var(--space-3); }
  .reassure { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); color: var(--color-fg-muted); padding: 0; list-style: none; }
  .reassure li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .reassure svg { width: 16px; height: 16px; color: var(--color-success); flex: none; }
  @media (max-width: 29.99rem) { .hero-ctas .btn, .cta-panel .btn { width: 100%; } }
  @media (max-width: 22rem) { .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--space-2); } }

  /* Steam line art */
  .steam path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: steam 5.5s var(--ease-in-out) infinite; }
  .steam path:nth-child(2) { animation-delay: 0.9s; }
  .steam path:nth-child(3) { animation-delay: 1.8s; }
  @keyframes steam { 0% { stroke-dashoffset: 220; opacity: 0; } 25% { opacity: 1; } 70% { opacity: 0.6; } 100% { stroke-dashoffset: -220; opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .steam path { animation: none; stroke-dashoffset: 0; opacity: 0.6; } }

  /* ---- Window-chrome canvas (Show, don't tell) ---- */
  .canvas {
    position: relative; border-radius: var(--radius-xl); background: var(--color-bg-raised);
    box-shadow: 0 0 0 var(--hairline) var(--color-border), var(--shadow-canvas); overflow: hidden;
  }
  .canvas-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--color-border); background: var(--color-bg-sunken); }
  .canvas-bar .dots { display: flex; gap: 6px; }
  .canvas-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
  .canvas-bar .addr { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--color-fg-subtle); text-align: center; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabs { display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-4) 0; overflow-x: auto; scrollbar-width: none; border-bottom: var(--hairline) solid var(--color-border); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: none; padding: var(--space-2) var(--space-3); min-height: 44px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: relative;
  }
  .tab[aria-selected="true"] { color: var(--color-fg); }
  .tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 2px; background: var(--color-accent); border-radius: 2px; }
  @media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--color-fg); } }
  .tabpanel { padding: var(--space-5); }
  .tabpanel[hidden] { display: none; }
  .tabpanel.is-entering { animation: fadeUp var(--dur-slow) var(--ease-out); }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .brief-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
  .brief-q { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.015em; }
  .brief-list { margin-top: var(--space-4); padding: 0; list-style: none; counter-reset: q; display: grid; gap: var(--space-2); }
  .brief-list li { counter-increment: q; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
  .brief-list li::before { content: counter(q, decimal-leading-zero); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--color-accent-text); font-weight: var(--fw-semibold); padding-top: 0.15em; }
  .brief-take { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-accent-soft); font-size: var(--fs-sm); }
  .brief-take b { display: block; font-size: var(--fs-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-1); }
  .seats { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--color-fg-subtle); }
  .seats .ring { display: flex; }
  .seats .ring i { width: 22px; height: 22px; border-radius: 50%; margin-inline-start: -6px; box-shadow: 0 0 0 2px var(--color-bg-raised); background: var(--color-bg-muted); }
  .seats .ring i:first-child { margin-inline-start: 0; }
  .seats .ring i.taken { background: linear-gradient(135deg, var(--copper-5), var(--copper-9)); }

  /* ---- House-rules strip ---- */
  .rules-strip { border-block: var(--hairline) solid var(--color-border); }
  .rules-strip ul { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; }
  .rules-strip li { padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-1); border-top: var(--hairline) solid var(--color-border); }
  .rules-strip li:first-child { border-top: 0; }
  @media (min-width: 40rem) {
    .rules-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rules-strip li { border-top: 0; border-inline-start: var(--hairline) solid var(--color-border); }
    .rules-strip li:nth-child(odd) { border-inline-start: 0; }
  }
  @media (min-width: 64rem) {
    .rules-strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rules-strip li:nth-child(odd) { border-inline-start: var(--hairline) solid var(--color-border); }
    .rules-strip li:first-child { border-inline-start: 0; }
  }
  .rules-strip .k { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: var(--track-display); line-height: 1.1; }
  .rules-strip .v { font-size: var(--fs-sm); color: var(--color-fg-muted); }

  /* ---- Dark espresso band ---- */
  .band-dark {
    background: var(--band-bg); color: var(--band-fg);
    --color-fg: var(--band-fg); --color-fg-muted: var(--band-fg-muted); --color-fg-subtle: var(--band-fg-muted);
    --color-border: var(--band-border); --color-border-strong: var(--band-border);
    --color-bg-raised: var(--band-bg-raised); --color-bg-muted: var(--band-bg-raised); --color-bg-sunken: var(--band-bg);
    --color-accent-text: var(--band-accent); --color-accent: var(--band-accent); --color-accent-soft: oklch(from var(--band-accent) l c h / 0.14);
    --color-focus: var(--band-accent);
    --color-bg: var(--band-bg);
  }
  .band-sunken { background: var(--color-bg-sunken); }

  /* ---- Compare (old way / new way) ---- */
  .compare { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 52rem) { .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .compare-col { padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: 0 0 0 var(--hairline) var(--color-border) inset; }
  .compare-col.new { background: var(--color-bg-raised); box-shadow: 0 0 0 var(--hairline) oklch(from var(--color-accent) l c h / 0.5) inset, var(--shadow-pop); }
  .compare-col h3 { display: flex; align-items: center; gap: var(--space-2); }
  .compare-col ul { list-style: none; padding: 0; margin-top: var(--space-5); display: grid; gap: var(--space-3); }
  .compare-col li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); color: var(--color-fg-muted); }
  .compare-col li svg { width: 20px; height: 20px; margin-top: 0.2em; }
  .compare-col.old li svg { color: var(--color-fg-subtle); }
  .compare-col.new li svg { color: var(--color-accent); }
  .compare-col.old li { text-decoration: line-through; text-decoration-color: oklch(from var(--color-fg-subtle) l c h / 0.5); }

  /* ---- Bento ---- */
  .bento { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 72rem) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bento > :nth-child(1) { grid-column: span 4; }
    .bento > :nth-child(2) { grid-column: span 2; }
    .bento > :nth-child(3) { grid-column: span 2; }
    .bento > :nth-child(4) { grid-column: span 2; }
    .bento > :nth-child(5) { grid-column: span 2; }
    .bento > :nth-child(6) { grid-column: span 6; }
  }
  .card {
    position: relative; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-raised);
    box-shadow: 0 0 0 var(--hairline) var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .card h3 { font-size: var(--fs-lg); }
  .card p { color: var(--color-fg-muted); font-size: var(--fs-sm); line-height: 1.55; }
  .card .viz { margin-top: auto; padding-top: var(--space-4); }
  a.card { text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { a.card:hover, .card.lift:hover { box-shadow: 0 0 0 var(--hairline) var(--color-border-strong), var(--shadow-pop); transform: translateY(-2px); color: inherit; } }
  .card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .card .card-link { text-decoration: none; }

  /* Mini visuals inside bento */
  .mini-agenda { display: grid; gap: var(--space-2); font-size: var(--fs-xs); }
  .mini-agenda div { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-sunken); }
  .mini-agenda time { color: var(--color-fg-subtle); }
  .mini-agenda .bar { height: 6px; border-radius: 3px; background: var(--color-accent-soft); width: var(--w, 60%); }
  .mini-agenda .bar.on { background: var(--color-accent); }
  .mini-doc { font-size: var(--fs-xs); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-sunken); display: grid; gap: 6px; }
  .mini-doc i { display: block; height: 6px; border-radius: 3px; background: var(--color-border-strong); width: var(--w, 100%); }
  .mini-doc b { font-weight: var(--fw-semibold); font-size: var(--fs-xs); }
  .mini-thread { display: grid; gap: var(--space-2); font-size: var(--fs-xs); }
  .mini-thread p { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-sunken); max-width: 90%; color: var(--color-fg); margin: 0; }
  .mini-thread p.me { justify-self: end; background: var(--color-accent-soft); }
  .mini-pulse { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
  .mini-pulse i { flex: 1; border-radius: 3px 3px 0 0; background: var(--color-accent-soft); height: var(--h, 40%); }
  .mini-pulse i.on { background: var(--color-accent); }
  .card .term, .term { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: var(--track-display); }
  .card .term small, .term small { display: block; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--color-fg-subtle); letter-spacing: 0; }

  /* ---- Finder (self-qualification) ---- */
  .finder { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 60rem) { .finder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
  fieldset { border: 0; padding: 0; min-width: 0; }
  legend { font-weight: var(--fw-semibold); margin-bottom: var(--space-3); font-size: var(--fs-sm); }
  .choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .choice { position: relative; }
  .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .choice span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
    box-shadow: 0 0 0 var(--hairline) var(--color-border-strong) inset; font-size: var(--fs-sm); font-weight: var(--fw-medium);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .choice input:checked + span { background: var(--color-fg); color: var(--color-bg); box-shadow: none; }
  .choice input:focus-visible + span { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); }
  @media (hover: hover) and (pointer: fine) { .choice:hover span { box-shadow: 0 0 0 var(--hairline) var(--color-fg) inset; } }
  .finder-form { display: grid; gap: var(--space-6); }
  .finder-result {
    border-radius: var(--radius-xl); padding: var(--space-6); background: var(--color-bg-raised);
    box-shadow: 0 0 0 var(--hairline) var(--color-border); display: flex; flex-direction: column; gap: var(--space-4); min-height: 20rem;
  }
  .finder-result .table-name { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: var(--track-display); line-height: 1.05; }
  .finder-result dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
  .finder-result dt { color: var(--color-fg-subtle); }
  .finder-result .actions { margin-top: auto; }

  /* ---- FAQ ---- */
  .faq { border-top: var(--hairline) solid var(--color-border); }
  .faq details { border-bottom: var(--hairline) solid var(--color-border); }
  .faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
    padding: var(--space-5) 0; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.015em; min-height: 56px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .plus { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 var(--hairline) var(--color-border-strong) inset; transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast); }
  .faq summary .plus svg { width: 14px; height: 14px; }
  .faq details[open] summary .plus { transform: rotate(45deg); background: var(--color-accent-soft); }
  .faq .answer { padding-bottom: var(--space-5); color: var(--color-fg-muted); max-width: var(--measure); }
  .faq .answer > * + * { margin-top: var(--space-3); }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

  /* ---- CTA panel ---- */
  .cta-panel {
    position: relative; overflow: clip; isolation: isolate; border-radius: var(--radius-xl);
    padding: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  }
  .cta-panel::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; z-index: -1; background: radial-gradient(ellipse 50% 50% at 50% 50%, oklch(from var(--band-accent) l c h / 0.35), transparent 70%); }
  .cta-panel h2 { font-size: var(--fs-3xl); max-width: 16ch; }
  .cta-panel .lede { color: var(--band-fg-muted); }

  /* ---- Footer ---- */
  .site-footer { padding-block: var(--space-9) calc(var(--space-6) + env(safe-area-inset-bottom)); border-top: var(--hairline) solid var(--color-border); background: var(--color-bg-sunken); position: relative; z-index: 2; }
  .footer-grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
  .footer-grid h2 { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: var(--space-4); }
  .footer-grid ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
  .footer-grid li a { text-decoration: none; color: var(--color-fg-muted); font-size: var(--fs-sm); display: inline-flex; min-height: 32px; align-items: center; }
  .footer-grid li a:hover { color: var(--color-fg); }
  .footer-bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--hairline) solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; font-size: var(--fs-xs); color: var(--color-fg-subtle); }
  .status-dot { display: inline-flex; align-items: center; gap: var(--space-2); }
  .status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
  .wordmark-xl { font-family: var(--font-display); font-size: clamp(4rem, 2rem + 14vw, 15rem); letter-spacing: -0.05em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--color-border-strong); margin-top: var(--space-8); user-select: none; white-space: nowrap; overflow: hidden; }
  .wordmark-xl span { color: var(--color-accent); -webkit-text-stroke: 0; opacity: 0.8; }

  /* Newsletter inline */
  .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .inline-form input { flex: 1 1 14rem; min-width: 0; }

  /* ---- Forms ---- */
  .field { display: grid; gap: var(--space-2); }
  .field label, .label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .field .hint { font-size: var(--fs-xs); color: var(--color-fg-subtle); }
  .input, .field input, .field select, .field textarea {
    width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--color-bg-raised); border: var(--hairline) solid var(--color-border-strong); color: var(--color-fg);
    font-size: 1rem; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .field textarea { min-height: 8rem; resize: vertical; field-sizing: content; }
  .input:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-focus); }
  .field [aria-invalid="true"] { border-color: var(--color-danger); }
  .field .error { font-size: var(--fs-xs); color: var(--color-danger); display: flex; gap: var(--space-1); align-items: center; }
  .field .error:empty { display: none; }
  .form-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40rem) { .form-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .form-grid .full { grid-column: 1 / -1; } }
  .form-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-xl); background: var(--color-bg-raised); box-shadow: 0 0 0 var(--hairline) var(--color-border), var(--shadow-pop); }
  .form-success { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-success-soft); color: var(--color-success-text); }
  .form-success[hidden] { display: none; }
  .privacy-line { font-size: var(--fs-xs); color: var(--color-fg-subtle); }

  /* ---- Page header (interior) ---- */
  .page-hero { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(2rem, 1.5rem + 3vw, 4rem); position: relative; isolation: isolate; overflow: clip; }
  .page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 38% 55% at 78% 0%, var(--color-glow), transparent 72%); }
  .page-hero h1 { max-width: 18ch; margin-top: var(--space-4); }
  .page-hero .lede { margin-top: var(--space-5); max-width: 44rem; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; font-size: var(--fs-xs); color: var(--color-fg-subtle); }
  .crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); opacity: 0.6; }
  .crumbs a { text-decoration: none; }

  /* ---- Prose (articles, legal) ---- */
  .prose { max-width: var(--measure); font-size: var(--fs-md); line-height: 1.7; }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 { font-size: var(--fs-xl); margin-top: 2.2em; line-height: 1.15; }
  .prose h3 { font-size: var(--fs-lg); margin-top: 1.8em; }
  .prose ul, .prose ol { padding-inline-start: 1.25em; }
  .prose li + li { margin-top: 0.4em; }
  .prose li::marker { color: var(--color-accent-text); }
  .prose blockquote { border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-5); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.4; }
  .prose table { width: 100%; font-size: var(--fs-sm); display: block; overflow-x: auto; }
  .prose th, .prose td { text-align: start; padding: var(--space-3); border-bottom: var(--hairline) solid var(--color-border); vertical-align: top; min-width: 9rem; }
  .prose th { font-weight: var(--fw-semibold); background: var(--color-bg-sunken); }
  .prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1em 0.35em; border-radius: 4px; background: var(--color-bg-muted); }
  .answer-box { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--color-accent-soft); box-shadow: 0 0 0 var(--hairline) oklch(from var(--color-accent) l c h / 0.25) inset; font-size: var(--fs-base); }
  .answer-box b:first-child { display: block; font-size: var(--fs-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-2); }
  .article-layout { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
  .article-layout > aside { display: none; }
  @media (min-width: 68rem) { .article-layout { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } .article-layout > aside { display: block; } }
  .toc { font-size: var(--fs-sm); }
  .toc ol { list-style: none; padding: 0; display: grid; gap: var(--space-1); border-inline-start: var(--hairline) solid var(--color-border); }
  .toc a { display: block; padding: var(--space-1) var(--space-3); text-decoration: none; color: var(--color-fg-muted); margin-inline-start: -1px; border-inline-start: 2px solid transparent; }
  .toc a[aria-current="true"] { color: var(--color-fg); border-inline-start-color: var(--color-accent); }
  .byline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--color-fg-muted); margin-top: var(--space-5); }
  .progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: calc(var(--z-nav) + 1); background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0); }
  @supports (animation-timeline: scroll()) {
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { to { transform: scaleX(1); } }
  }

  /* ---- Glossary ---- */
  .az { display: flex; flex-wrap: wrap; gap: var(--space-1); position: sticky; top: var(--nav-h); z-index: 5; padding-block: var(--space-3); background: var(--color-bg); border-bottom: var(--hairline) solid var(--color-border); }
  .az a { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
  .az a:hover { background: var(--color-bg-muted); }
  .az span { min-width: 40px; min-height: 40px; display: grid; place-items: center; color: var(--color-fg-subtle); opacity: 0.4; font-size: var(--fs-sm); }
  .gloss-letter { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--color-accent-text); line-height: 1; margin-top: var(--space-8); }
  .gloss-term { padding-block: var(--space-6); border-bottom: var(--hairline) solid var(--color-border); display: grid; gap: var(--space-3); }
  @media (min-width: 52rem) { .gloss-term { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-7); } }
  .gloss-term dt { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.015em; }
  .gloss-term dt a { text-decoration: none; }
  .gloss-term dd { color: var(--color-fg-muted); max-width: var(--measure); }
  .gloss-term dd > * + * { margin-top: var(--space-2); }
  .search-box { position: relative; max-width: 32rem; }
  .search-box svg { position: absolute; left: var(--space-4); top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--color-fg-subtle); pointer-events: none; }
  .search-box input { padding-inline-start: 2.75rem; }

  /* ---- Insight cards ---- */
  .post-card .meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-subtle); align-items: center; }
  .post-card h3 { font-size: var(--fs-xl); line-height: 1.12; }
  .post-card.feature { background: var(--band-bg); color: var(--band-fg); --color-fg-muted: var(--band-fg-muted); --color-fg-subtle: var(--band-fg-muted); --color-bg-muted: var(--band-bg-raised); --color-border: var(--band-border); }
  .post-card.feature h3 { font-size: var(--fs-2xl); }
  .post-card .cover { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-sunken); margin-bottom: var(--space-2); }

  /* ---- Steps ---- */
  .steps { list-style: none; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
  .steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg-raised); box-shadow: 0 0 0 var(--hairline) var(--color-border); }
  .steps li::before { content: counter(step); width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-lg); background: var(--color-accent-soft); color: var(--color-accent-text); }
  .steps h3 { font-size: var(--fs-md); font-family: var(--font-sans); font-weight: var(--fw-semibold); letter-spacing: 0; }
  .steps p { color: var(--color-fg-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }

  /* ---- Fit table (for / not for) ---- */
  .fit { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .fit > div { padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: 0 0 0 var(--hairline) var(--color-border) inset; }
  .fit ul { margin-top: var(--space-4); padding-inline-start: 1.1em; display: grid; gap: var(--space-2); color: var(--color-fg-muted); }

  /* ---- Placeholder marker (owner must fill) ---- */
  [data-placeholder] { position: relative; }
  .ph-note { font-size: var(--fs-xs); color: var(--color-fg-subtle); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); display: inline-block; }

  /* ---- Big quote / manifesto ---- */
  .manifesto { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.18; letter-spacing: var(--track-display); max-width: 30ch; text-wrap: balance; }
  .manifesto em { color: var(--color-accent-text); }
  .principles { counter-reset: p; display: grid; gap: 0; list-style: none; padding: 0; border-top: var(--hairline) solid var(--color-border); }
  .principles li { counter-increment: p; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-6); border-bottom: var(--hairline) solid var(--color-border); }
  @media (min-width: 52rem) { .principles li { grid-template-columns: 5rem minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-6); } }
  .principles li::before { content: counter(p, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--color-accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding-top: 0.4em; }
  .principles h3 { font-size: var(--fs-lg); }
  .principles p { color: var(--color-fg-muted); }

  /* ---- Format cards (tables page) ---- */
  .format .fact { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

  /* ---- 404 ---- */
  .four { font-family: var(--font-display); font-size: clamp(6rem, 3rem + 18vw, 16rem); line-height: 0.85; letter-spacing: -0.06em; color: var(--color-accent-text); }

  /* ---- Toast ---- */
  .toast { position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); translate: -50% 0; z-index: var(--z-dialog); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: var(--color-fg); color: var(--color-bg); font-size: var(--fs-sm); box-shadow: var(--shadow-pop); max-width: calc(100vw - 2 * var(--gutter)); }
  .toast[hidden] { display: none; }
}

/* ============ UTILITIES / REVEAL ============ */
@layer utilities {
  .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
  .mb-6 { margin-bottom: var(--space-6); }
  .gap-lg { --gap: var(--space-6); }
  .relative { position: relative; z-index: 2; }
  .js .reveal { opacity: 0; transform: translateY(var(--motion-distance)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }
}
@layer utilities {
  .w-full { width: 100%; }
  .max-34 { max-width: 34ch; }
  .gap-md { --gap: var(--space-5); }
}
@layer utilities {
  .d1 { --d: 80ms; } .d2 { --d: 160ms; } .d3 { --d: 240ms; }
}
@layer components {
  .mini-agenda div:nth-child(1) .bar { width: 30%; }
  .mini-agenda div:nth-child(2) .bar { width: 85%; }
  .mini-agenda div:nth-child(3) .bar { width: 65%; }
  .mini-agenda div:nth-child(4) .bar { width: 25%; }
  .mini-doc i:nth-of-type(1) { width: 92%; } .mini-doc i:nth-of-type(2) { width: 78%; }
  .mini-doc i:nth-of-type(3) { width: 86%; } .mini-doc i:nth-of-type(4) { width: 54%; }
  .mini-pulse i:nth-child(1) { height: 45%; } .mini-pulse i:nth-child(2) { height: 70%; }
  .mini-pulse i:nth-child(3) { height: 92%; } .mini-pulse i:nth-child(4) { height: 60%; }
  .mini-pulse i:nth-child(5) { height: 38%; } .mini-pulse i:nth-child(6) { height: 52%; }
}
@layer layout { .grid[data-min="wide"] { --min: 22rem; } @media (min-width: 48rem) { .grid[data-min="wide"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } }

@layer components {
  .card .split { align-items: center; }
  .card .split .cluster { justify-content: flex-start; }
  @media (min-width: 60rem) { .card .split .cluster { justify-content: flex-end; } }
  .wordmark-xl { opacity: 0.7; }
}