:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-warm: #fdeadf; /* persimmon tint: active/selected on light */
  --fg: #0d0f13; /* near-black ink ≈ 19:1 on white */
  --fg-2: #33383f; /* secondary ≈ 11:1 */
  --muted: #4a5058; /* ≈ 8:1 */
  --meta: #9a3412;
  --border: #c3c7cd; /* visible structure, not hairline */
  --border-soft: #e1e3e7;
  --accent: #c2410c; /* warm persimmon */
  --accent-on: #ffffff; /* 4.6:1 on persimmon */
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);
  --success: #15803d;
  --success-on: #ffffff; /* 5.0:1 on success */
  --warn: #b45309;
  --warn-on: #ffffff; /* 5.0:1 on warn */
  --danger: #b91c1c;
  --danger-on: #ffffff; /* 6.5:1 on danger */
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui,
    sans-serif;
  --font-body:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui,
    sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --leading-body: 1.5;
  --leading-tight: 1.12;
  --tracking-display: -0.015em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 96px;
  --section-y-tablet: 68px;
  --section-y-phone: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 3px 8px rgba(13, 15, 19, 0.14);
  --focus-ring: 0 0 0 3px rgba(194, 65, 12, 0.3);
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --container-max: 1200px;
  --container-gutter-desktop: 36px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;

  /* portal rail chrome: deep-ink left rail (alpha variants derive in piper.css) */
  --rail-bg: #1c1917;
  --rail-border: #2e2a26;
  --rail-fg: #faf9f7; /* ≈ 16:1 on rail-bg */
  --rail-nav: #d6d3d1; /* idle nav label, ≈ 11:1 on rail-bg */
  --rail-active-fg: #fdba74; /* persimmon-300, ≈ 10:1 on rail-bg */
  --rail-muted: #a8a29e; /* ≈ 6.8:1 on rail-bg */
  --rail-group: #78716c; /* ≈ 3.5:1 — decorative group caption only */
}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-gutter-desktop)}
header{display:flex;align-items:center;gap:var(--space-4);padding-block:var(--space-6)}
header img{display:block}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg)}
main{display:grid;place-content:center;gap:var(--space-5)}
h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(var(--text-2xl),6vw,var(--text-4xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-display)}
.sub{margin:0;max-width:36ch;font-size:clamp(var(--text-lg),2.5vw,var(--text-xl));color:var(--fg-2)}
.product{margin-top:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--border-soft);display:grid;gap:var(--space-2)}
.label{margin:0;font-size:var(--text-sm);color:var(--muted);letter-spacing:0.08em}
.name{margin:0;font-weight:600;font-size:var(--text-xl)}
.features{margin:0;font-size:var(--text-base);color:var(--muted)}
.cta{margin-top:var(--space-6);justify-self:start;display:inline-flex;align-items:center;padding:var(--space-4) var(--space-8);background:var(--accent);color:var(--accent-on);border-radius:var(--radius-md);font-size:var(--text-lg);text-decoration:none;transition:background-color var(--motion-fast) var(--ease-standard)}
.cta:hover{background:var(--accent-hover)}
.cta:active{background:var(--accent-active)}
.cta:focus-visible{outline:none;box-shadow:var(--focus-ring)}
footer{display:flex;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6);font-size:var(--text-sm);color:var(--muted)}
@media (max-width:768px){.wrap{padding-inline:var(--container-gutter-tablet)}}
@media (max-width:480px){.wrap{padding-inline:var(--container-gutter-phone)} header,footer{padding-block:var(--space-4)} main{gap:var(--space-4)}}