:root {
    --bg: #efe9dc;
    --bg-2: #e7e0d0;
    --ink: #1a1814;
    --ink-2: #3a352d;
    --muted: #6a6357;
    --line: #cdc4b1;
    --paper: #f6f1e6;
    --accent: #b8553a;
    --accent-ink: #f6f1e6;
    --serif: "Instrument Serif", "Times New Roman", serif;
    --sans: "Geist", -apple-system, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }

  /* Palettes */
  html[data-palette="cream"] {
    --bg: #efe9dc; --bg-2: #e7e0d0; --paper: #f6f1e6;
    --ink: #1a1814; --ink-2: #3a352d; --muted: #6a6357; --line: #cdc4b1;
  }
  html[data-palette="forest"] {
    --bg: #1c2620; --bg-2: #243029; --paper: #2a3730;
    --ink: #ece7d8; --ink-2: #c8c1ad; --muted: #8a8676; --line: #3a4942;
  }
  html[data-palette="midnight"] {
    --bg: #14141a; --bg-2: #1c1c24; --paper: #1f1f28;
    --ink: #e9e6e0; --ink-2: #b8b5af; --muted: #797687; --line: #2e2e3a;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
  body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Paper texture overlay */
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
      radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: multiply;
    opacity: 0.6;
    z-index: 1;
  }
  html[data-palette="forest"] body::before,
  html[data-palette="midnight"] body::before {
    mix-blend-mode: screen;
    opacity: 0.4;
    background-image:
      radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  }
  html[data-grain="off"] body::before { display: none; }

  /* Type */
  .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
  .mono { font-family: var(--mono); }
  .eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
  }
  .h-display {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 9vw, 168px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
  }
  .h-display em {
    font-style: italic;
    color: var(--accent);
  }
  .h-section {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(40px, 5.5vw, 86px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .h-section em { font-style: italic; }
  .h-card {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
  }
  p { color: var(--ink-2); max-width: 60ch; }
  a { color: inherit; }

  /* Layout */
  .wrap {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    position: relative;
    z-index: 2;
  }

  hr.rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0;
  }

  /* Nav */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
    gap: 24px;
  }
  .brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--serif); font-size: 22px;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--ink);
  }
  .brand-text {
    white-space: nowrap;
    line-height: 1;
  }
  .brand-text em {
    font-style: italic;
  }
  @media (max-width: 720px) {
    .brand { font-size: 16px; }
  }
  @media (max-width: 400px) {
    .brand { font-size: 14px; }
    .nav-cta { padding: 7px 9px; font-size: 11px; letter-spacing: 0.03em; }
  }
  .brand-mark {
    width: 32px; height: 32px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    transition: filter 0.3s;
  }
  /* Invert the dark-blue logo for dark palettes so it stays visible */
  html[data-palette="forest"] .brand-mark,
  html[data-palette="midnight"] .brand-mark {
    filter: brightness(0) invert(1);
  }
  .nav-links {
    display: flex; gap: 28px; align-items: center;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .nav-links a { text-decoration: none; color: var(--ink-2); }
  .nav-links a:hover { color: var(--accent); }
  .nav-cta {
    background: var(--ink);
    color: var(--bg);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--accent); color: var(--accent-ink); }

  /* Nav right-hand group (CTA + hamburger) */
  .nav-right {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  }

  /* Hamburger — hidden on desktop, shown on mobile */
  .nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    padding: 6px 10px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .nav-toggle:hover { border-color: var(--accent); background: var(--paper); }

  @media (max-width: 720px) {
    .nav { position: relative; }
    .nav-toggle { display: flex; align-items: center; justify-content: center; }
    .nav-inner { gap: 12px; }

    /* Nav links become a full-width dropdown panel */
    .nav-links {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      flex-direction: column;
      gap: 0;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35);
      z-index: 49;
      padding: 4px 0 8px;
    }
    .nav-links.open { display: flex; }
    .nav-links a {
      padding: 13px clamp(20px, 4vw, 56px);
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      letter-spacing: 0.04em;
    }
    .nav-links a:last-child { border-bottom: 0; }
  }

  /* Search form: stack vertically on small screens so button never goes off-screen */
  @media (max-width: 640px) {
    .search-row   { flex-direction: column; align-items: stretch; gap: 10px; }
    .search-input { font-size: 16px; }
    .search-btn   { padding: 14px; width: 100%; }
  }

  /* Hero */
  .hero {
    padding: clamp(36px, 7vw, 92px) 0 clamp(28px, 5vw, 64px);
    position: relative;
  }
  .hero-eyebrow-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: clamp(28px, 5vw, 56px);
    gap: 24px;
    flex-wrap: wrap;
  }
  .hero-title {
    position: relative;
  }
  .hero-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 5px 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: super;
    margin-left: 8px;
    border-radius: 3px;
  }
  .hero-bottom {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: end;
    margin-top: clamp(40px, 6vw, 80px);
  }
  @media (max-width: 860px) {
    .hero-bottom { grid-template-columns: 1fr; gap: 32px; }
  }
  .hero-lede {
    font-family: var(--serif);
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.35;
    color: var(--ink-2);
    max-width: 32ch;
  }

  .search {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 30px 60px -30px rgba(0,0,0,0.15);
  }
  .search-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    display: flex; justify-content: space-between; align-items: center;
  }
  .search-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    margin-right: 6px;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
    animation: pulse 2.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent); }
    50% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--accent) 0%, transparent); }
  }
  .search-row {
    display: flex; align-items: center; gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
  .search-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--mono);
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ink);
    padding: 4px 0;
    min-width: 0;
  }
  .search-input::placeholder { color: var(--muted); }
  .search-btn {
    background: var(--ink);
    color: var(--bg);
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    font-family: var(--sans);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .search-btn:hover { background: var(--accent); transform: translateY(-1px); }
  .search-meta {
    display: flex; justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  /* Marquee */
  .marquee {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-2);
    white-space: nowrap;
    background: var(--bg-2);
  }
  .marquee-track {
    display: inline-flex;
    gap: 56px;
    animation: marquee 40s linear infinite;
    padding-left: 56px;
  }
  .marquee-track span { display: inline-flex; align-items: center; gap: 8px; }
  .marquee-track .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
    display: inline-block;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Section headers */
  .sec {
    padding: clamp(60px, 9vw, 140px) 0;
    position: relative;
  }
  .sec-head {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(20px, 4vw, 64px);
    margin-bottom: clamp(40px, 6vw, 80px);
    align-items: start;
  }
  @media (max-width: 720px) {
    .sec-head { grid-template-columns: 1fr; gap: 16px; }
  }
  .sec-num {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    padding-top: 14px;
  }
  .sec-num .bar {
    display: block;
    height: 1px;
    background: var(--accent);
    width: 40px;
    margin-bottom: 12px;
  }

  /* Stat cards */
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 28px);
  }
  @media (max-width: 860px) {
    .stats { grid-template-columns: 1fr; }
  }
  .stat-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
    background: var(--paper);
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s;
  }
  .stat-card:hover { transform: translateY(-4px); border-color: var(--accent); }
  .stat-card .img-slot {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .stat-card .stat-num {
    font-family: var(--serif);
    font-size: clamp(56px, 6vw, 88px);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
  }
  .stat-card .stat-num em {
    font-style: italic;
    color: var(--accent);
  }
  .stat-card h3 {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .stat-card p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
  }

  /* Image placeholder */
  .img-slot {
    background:
      repeating-linear-gradient(
        135deg,
        color-mix(in oklab, var(--ink) 12%, transparent),
        color-mix(in oklab, var(--ink) 12%, transparent) 1px,
        transparent 1px,
        transparent 9px
      ),
      var(--bg-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    position: relative;
  }
  .img-slot::after {
    content: attr(data-label);
    background: var(--paper);
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  .img-slot.photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(0.85) contrast(1.02);
  }
  html[data-palette="forest"] .img-slot.photo,
  html[data-palette="midnight"] .img-slot.photo {
    filter: saturate(0.7) contrast(0.95) brightness(0.85);
  }
  .img-slot.photo::after { display: none; }

  /* Product/spec section */
  .spec-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  @media (max-width: 860px) {
    .spec-grid { grid-template-columns: 1fr; }
  }
  .spec-claim {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
  }
  .spec-claim em { font-style: italic; color: var(--accent); }
  .spec-body {
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.6;
    max-width: 52ch;
  }
  .spec-sheet {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    overflow: hidden;
  }
  .spec-sheet-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
  }
  .spec-row {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
    align-items: baseline;
  }
  .spec-row:last-child { border-bottom: 0; }
  .spec-row dt {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
  }
  .spec-row dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
  }
  .spec-row dd small {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Microchip visual */
  .chip-visual {
    margin-top: 32px;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px;
    background: var(--paper);
  }
  .chip-scale {
    position: relative;
    height: 120px;
    border-bottom: 1px dashed var(--line);
    display: flex;
    align-items: center;
    padding: 0 8px;
  }
  .chip-grain {
    width: 64px;
    height: 15px;
    border-radius: 8px;
    background: linear-gradient(180deg, #efe2c7 0%, #d8c79f 50%, #b9a576 100%);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    flex-shrink: 0;
  }
  .chip-grain::before {
    content: "";
    position: absolute;
    inset: 4px 12px;
    background: linear-gradient(90deg, #4a2f1a 0%, #6b4423 100%);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .chip-grain::after {
    content: "8mm";
    position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .chip-ruler {
    flex: 1;
    height: 1px;
    background: var(--line);
    position: relative;
    margin-left: 24px;
  }
  .chip-ruler::before {
    content: "← actual size";
    position: absolute;
    left: 0; top: -22px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .chip-caption {
    margin-top: 28px;
    display: flex; justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
  }

  /* How it works */
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 32px);
    counter-reset: step;
  }
  @media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
  .step {
    padding-top: 32px;
    border-top: 1px solid var(--ink);
    position: relative;
  }
  .step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute; top: -1px; left: 0;
    background: var(--bg);
    padding-right: 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.14em;
    transform: translateY(-50%);
  }
  .step h4 {
    font-family: var(--serif);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
  }
  .step p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
  }

  /* Quote/recovery section */
  .recovery {
    background: var(--ink);
    color: var(--bg);
    border-radius: 24px;
    padding: clamp(40px, 6vw, 96px);
    position: relative;
    overflow: hidden;
  }
  html[data-palette="forest"] .recovery,
  html[data-palette="midnight"] .recovery {
    background: var(--paper);
    color: var(--ink);
  }
  .recovery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    position: relative;
    z-index: 1;
  }
  @media (max-width: 860px) { .recovery-grid { grid-template-columns: 1fr; } }
  .recovery h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
  }
  .recovery h2 em {
    font-style: italic;
    color: var(--accent);
  }
  .recovery p {
    color: color-mix(in oklab, var(--bg) 75%, transparent);
    font-size: 17px;
    max-width: 44ch;
  }
  html[data-palette="forest"] .recovery p,
  html[data-palette="midnight"] .recovery p {
    color: var(--ink-2);
  }
  .scanner {
    aspect-ratio: 1;
    border: 1px solid color-mix(in oklab, var(--bg) 25%, transparent);
    border-radius: 18px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%);
  }
  .scan-ring {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .scan-ring::before, .scan-ring::after {
    content: "";
    position: absolute;
    width: 60%; height: 60%;
    border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent);
    border-radius: 50%;
    animation: scan 3s ease-out infinite;
  }
  .scan-ring::after { animation-delay: 1.5s; }
  @keyframes scan {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  .scan-id {
    position: relative;
    z-index: 2;
    font-family: var(--mono);
    font-size: 14px;
    text-align: center;
    color: var(--bg);
  }
  html[data-palette="forest"] .scan-id,
  html[data-palette="midnight"] .scan-id { color: var(--ink); }
  .scan-id .num {
    display: block;
    font-size: clamp(22px, 2.5vw, 36px);
    letter-spacing: 0.08em;
    margin-top: 6px;
  }
  .scan-id .label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10px;
    opacity: 0.7;
  }
  .scan-corner {
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid color-mix(in oklab, var(--accent) 80%, transparent);
  }
  .scan-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
  .scan-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
  .scan-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
  .scan-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

  /* Pullquote */
  .pull {
    padding: clamp(80px, 12vw, 160px) 0;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .pull blockquote {
    font-family: var(--serif);
    font-size: clamp(36px, 5.5vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 auto;
    max-width: 18ch;
    color: var(--ink);
  }
  .pull blockquote em { font-style: italic; color: var(--accent); }
  .pull cite {
    display: block;
    margin-top: 32px;
    font-style: normal;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
  }

  /* About / contact */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(24px, 3vw, 56px);
  }
  @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
  .about-card h3 {
    font-family: var(--serif);
    font-size: 28px;
    margin: 0 0 16px;
  }
  .about-card p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 12px;
  }
  .contact-list {
    list-style: none; padding: 0; margin: 0;
  }
  .contact-list li {
    border-top: 1px solid var(--line);
    padding: 16px 0;
    display: flex; justify-content: space-between;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-2);
  }
  .contact-list li:last-child { border-bottom: 1px solid var(--line); }
  .contact-list li strong { color: var(--muted); font-weight: 400; }

  /* Footer */
  .foot {
    padding: clamp(40px, 6vw, 80px) 0 32px;
    border-top: 1px solid var(--line);
  }
  .foot-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(24px, 3vw, 56px);
    margin-bottom: 64px;
  }
  @media (max-width: 720px) { .foot-top { grid-template-columns: 1fr; } }
  .foot-brand {
    font-family: var(--serif);
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .foot-brand em { font-style: italic; color: var(--accent); }
  .foot-brand-wrap {
    display: flex; flex-direction: column;
    gap: 18px;
  }
  .foot-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    object-position: left;
    align-self: flex-start;
    max-width: 240px;
  }
  html[data-palette="forest"] .foot-logo,
  html[data-palette="midnight"] .foot-logo {
    filter: brightness(0) invert(1);
  }
  .foot-tagline {
    color: var(--muted);
    font-size: 14px;
    margin: 4px 0 0;
    max-width: 28ch;
  }
  .foot-bottom a {
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s;
  }
  .foot-bottom a:hover { color: var(--accent); }
  .foot-col h5 {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin: 0 0 16px;
  }
  .foot-col ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .foot-col a {
    text-decoration: none;
    color: var(--ink);
    font-size: 15px;
  }
  .foot-col a:hover { color: var(--accent); }
  .foot-bottom {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    display: flex; justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    flex-wrap: wrap; gap: 12px;
  }

  /* Reveal animation */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .reveal-1 { animation-delay: 0.05s; }
  .reveal-2 { animation-delay: 0.18s; }
  .reveal-3 { animation-delay: 0.32s; }
  .reveal-4 { animation-delay: 0.46s; }
  @keyframes reveal {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Selection */
  ::selection { background: var(--accent); color: var(--accent-ink); }

  /* ---------- Document pages (privacy, terms) ---------- */
  .doc-hero {
    padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 5vw, 64px);
  }
  .doc-eyebrow-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: clamp(28px, 4vw, 48px);
    gap: 24px; flex-wrap: wrap;
  }
  .doc-eyebrow-row a:hover { color: var(--accent) !important; }
  .h-doc {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 9vw, 144px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 40px;
  }
  .h-doc em { font-style: italic; color: var(--accent); }
  .doc-lede {
    font-family: var(--serif);
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.35;
    color: var(--ink-2);
    max-width: 42ch;
  }

  .doc-body {
    padding: clamp(48px, 7vw, 96px) 0 clamp(80px, 10vw, 140px);
  }
  .doc-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
  }
  @media (max-width: 860px) {
    .doc-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  .doc-toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  @media (max-width: 860px) { .doc-toc { position: static; } }

  .doc-toc .toc-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .doc-toc ol {
    list-style: none;
    counter-reset: toc;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .doc-toc ol li {
    counter-increment: toc;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    padding-left: 28px;
  }
  .doc-toc ol li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0; top: 1px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.1em;
  }
  .doc-toc a {
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s;
  }
  .doc-toc a:hover { color: var(--accent); }
  .doc-toc .toc-meta {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
  }
  .doc-toc .toc-meta a {
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
  }

  .doc-article {
    max-width: 64ch;
  }
  .doc-intro {
    font-family: var(--serif);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
  }
  .doc-section {
    padding: clamp(36px, 5vw, 56px) 0;
    border-bottom: 1px solid var(--line);
  }
  .doc-section:last-child { border-bottom: 0; }
  .doc-section-num {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin-bottom: 18px;
  }
  .doc-section h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 24px;
    max-width: 22ch;
  }
  .doc-section h2 em { font-style: italic; color: var(--accent); }
  .doc-section p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 16px;
    max-width: 58ch;
  }
  .doc-section .callout {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 18px 22px;
    font-size: 15px;
    color: var(--ink);
    margin-top: 8px;
  }
  .doc-section .callout strong { color: var(--ink); font-weight: 500; }
  .doc-section .callout a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .doc-signoff {
    margin-top: 32px !important;
    font-size: 12px !important;
    color: var(--muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  /* ---------- 404 page ---------- */
  .fourohfour {
    padding: clamp(40px, 7vw, 96px) 0 clamp(80px, 10vw, 140px);
  }
  .fof-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    margin-top: clamp(40px, 5vw, 64px);
  }
  @media (max-width: 860px) {
    .fof-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  .h-fof {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 8.5vw, 132px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 32px;
  }
  .h-fof em { font-style: italic; color: var(--accent); }
  .fof-lede {
    font-family: var(--serif);
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.4;
    color: var(--ink-2);
    max-width: 38ch;
    margin: 0 0 32px;
  }
  .fof-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-bottom: 48px;
  }
  .fof-btn {
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  }
  .fof-btn:hover { background: var(--paper); transform: translateY(-1px); }
  .fof-btn.primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
  }
  .fof-btn.primary:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .fof-links h5 {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }
  .fof-links ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .fof-links a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s;
  }
  .fof-links a:hover { color: var(--accent); }

  .fof-scan {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
      radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 65%),
      var(--paper);
    position: relative;
    overflow: hidden;
    max-width: 460px;
    margin: 0 auto;
  }
  .fof-scan-inner {
    position: absolute;
    inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    z-index: 2;
  }
  .fof-num {
    font-family: var(--serif);
    font-size: clamp(64px, 10vw, 140px);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.04em;
  }
  .fof-status {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
  }
  .fof-id {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.1em;
    margin-top: 6px;
  }
  .fof-caption {
    margin-top: 16px;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
  }


  /* ---------- Microchip product page ---------- */
  .prod-hero {
    padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px);
  }
  .prod-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    margin-top: clamp(32px, 5vw, 56px);
  }
  @media (max-width: 960px) {
    .prod-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  .h-prod {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 8.5vw, 144px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 32px;
  }
  .h-prod em { font-style: italic; color: var(--accent); }
  .prod-lede {
    font-family: var(--serif);
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.4;
    color: var(--ink-2);
    max-width: 38ch;
    margin: 0 0 40px;
  }
  .prod-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: clamp(24px, 4vw, 56px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
    justify-content: start;
  }
  .prod-stat-num {
    font-family: var(--serif);
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .prod-stat-num span { color: var(--accent); }
  .prod-stat-lbl {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    margin-top: 8px;
  }

  /* Anatomy diagram */
  .anatomy {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--paper);
    padding: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .anatomy-inner {
    color: var(--ink);
  }
  .chip-svg {
    width: 100%;
    height: auto;
    display: block;
    color: var(--ink-2);
  }
  .anatomy-cap {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-align: center;
  }

  /* Physics row */
  .physics-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: clamp(12px, 2vw, 28px);
    align-items: stretch;
  }
  @media (max-width: 960px) {
    .physics-grid { grid-template-columns: 1fr; }
    .physics-arrow { display: none; }
  }
  .physics-step {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    padding: clamp(20px, 2vw, 28px);
    display: flex;
    flex-direction: column;
  }
  .physics-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.16em;
    margin-bottom: 16px;
  }
  .physics-step h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
  }
  .physics-step p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
  }
  .physics-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 28px;
    color: var(--accent);
  }

  /* Full spec table */
  .spec-table-wrap {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    overflow: hidden;
  }
  .spec-table {
    display: flex; flex-direction: column;
  }
  .spec-table-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr 2fr;
    gap: 24px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in oklab, var(--paper) 60%, var(--bg-2));
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
  }
  .spec-row-3 {
    display: grid;
    grid-template-columns: 1.2fr 1fr 2fr;
    gap: 24px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .spec-row-3:last-child { border-bottom: 0; }
  .spec-row-3 dt {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
  }
  .spec-row-3 dd {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .spec-row-3 dd.note {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    letter-spacing: 0;
  }
  @media (max-width: 720px) {
    .spec-table-head { display: none; }
    .spec-row-3 {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 18px 20px;
    }
  }

  /* Safety lists */
  .safety-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 40px);
  }
  @media (max-width: 720px) { .safety-grid { grid-template-columns: 1fr; } }
  .safety-col {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 40px);
    background: var(--paper);
  }
  .safety-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .safety-mark {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 500;
  }
  .safety-header.is .safety-mark {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .safety-header.isnt .safety-mark {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
  }
  .safety-header h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .safety-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 18px;
  }
  .safety-list li {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    padding-left: 16px;
    border-left: 2px solid var(--line);
  }
  .safety-list strong {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }

  /* Compatibility grid */
  .compat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
  }
  @media (max-width: 720px) { .compat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .compat-grid { grid-template-columns: 1fr; } }
  .compat-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    background: var(--paper);
    display: flex; flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
  }
  .compat-card:hover { border-color: var(--accent); }
  .compat-name {
    font-family: var(--serif);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .compat-models {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    flex: 1;
  }
  .compat-status {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-top: 4px;
  }
  .compat-note {
    margin: 28px 0 0;
    font-size: 14px;
    color: var(--muted);
    max-width: 60ch;
    line-height: 1.55;
  }

  /* Product CTA */
  .prod-cta {
    background: var(--ink);
    color: var(--bg);
    border-radius: 24px;
    padding: clamp(40px, 6vw, 96px);
    position: relative;
    overflow: hidden;
  }
  html[data-palette="forest"] .prod-cta,
  html[data-palette="midnight"] .prod-cta {
    background: var(--paper);
    color: var(--ink);
  }
  .prod-cta-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  @media (max-width: 860px) { .prod-cta-grid { grid-template-columns: 1fr; } }
  .prod-cta-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(34px, 4.5vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    max-width: 14ch;
  }
  .prod-cta-lede {
    color: color-mix(in oklab, var(--bg) 75%, transparent);
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 32px;
    max-width: 44ch;
  }
  html[data-palette="forest"] .prod-cta-lede,
  html[data-palette="midnight"] .prod-cta-lede {
    color: var(--ink-2);
  }
  .prod-cta-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
  }
  .prod-cta-btn {
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 1px solid color-mix(in oklab, var(--bg) 25%, transparent);
    color: var(--bg);
    transition: background 0.2s, color 0.2s, transform 0.2s;
  }
  html[data-palette="forest"] .prod-cta-btn,
  html[data-palette="midnight"] .prod-cta-btn {
    color: var(--ink);
    border-color: var(--line);
  }
  .prod-cta-btn:hover { transform: translateY(-1px); }
  .prod-cta-btn.primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
  }
  .prod-cta-btn.primary:hover { background: var(--bg); color: var(--ink); }
  html[data-palette="forest"] .prod-cta-btn.primary:hover,
  html[data-palette="midnight"] .prod-cta-btn.primary:hover {
    background: var(--ink);
    color: var(--bg);
  }
  .prod-cta-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 0;
  }
  .prod-cta-list li {
    display: flex; gap: 18px; align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid color-mix(in oklab, var(--bg) 18%, transparent);
    font-family: var(--serif);
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.2;
  }
  html[data-palette="forest"] .prod-cta-list li,
  html[data-palette="midnight"] .prod-cta-list li {
    border-top-color: var(--line);
  }
  .prod-cta-list li:last-child {
    border-bottom: 1px solid color-mix(in oklab, var(--bg) 18%, transparent);
  }
  html[data-palette="forest"] .prod-cta-list li:last-child,
  html[data-palette="midnight"] .prod-cta-list li:last-child {
    border-bottom-color: var(--line);
  }
  .prod-cta-list li .mono {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 0.14em;
    flex-shrink: 0;
    min-width: 32px;
  }


  /* ---------- Microchip search-result page ---------- */
  .mc-result {
    padding: clamp(28px, 5vw, 64px) 0 clamp(60px, 8vw, 120px);
  }

  .mc-status {
    display: inline-flex; align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink);
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
    padding: 6px 12px;
    border-radius: 999px;
  }
  .mc-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
    animation: pulse 2.5s ease-in-out infinite;
  }
  .mc-status-private .mc-status-dot { background: #d49141; box-shadow: 0 0 0 4px color-mix(in oklab, #d49141 25%, transparent); }
  .mc-status-empty .mc-status-dot { background: var(--muted); box-shadow: 0 0 0 4px color-mix(in oklab, var(--muted) 25%, transparent); animation: none; }

  /* Hero header */
  .mc-hero {
    padding: clamp(28px, 5vw, 56px) 0 0;
  }
  .mc-hero-meta {
    padding-bottom: 32px;
    margin-bottom: clamp(28px, 4vw, 48px);
    border-bottom: 1px solid var(--line);
  }
  .mc-label-row {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: clamp(28px, 5vw, 72px);
    justify-content: start;
  }
  @media (max-width: 640px) {
    .mc-label-row { grid-template-columns: 1fr 1fr; gap: 20px 28px; }
  }
  .mc-tiny-lbl {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .mc-chip-id {
    font-size: clamp(20px, 2.2vw, 30px);
    letter-spacing: 0.04em;
    color: var(--ink);
    font-weight: 500;
  }
  .mc-empty-id { color: var(--muted); }
  .mc-tag-id {
    font-size: clamp(16px, 1.6vw, 22px);
    color: var(--ink-2);
    letter-spacing: 0.04em;
  }
  .mc-pet-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(44px, 7vw, 108px);
    line-height: 0.94;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 28px;
    max-width: 18ch;
  }
  .mc-pet-name em { font-style: italic; color: var(--accent); }
  .mc-pet-sub {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.4;
    color: var(--ink-2);
    max-width: 48ch;
    margin: 0;
  }

  /* Body grid */
  .mc-body { padding: clamp(40px, 6vw, 80px) 0 0; }
  .mc-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }
  @media (max-width: 960px) {
    .mc-grid { grid-template-columns: 1fr; }
  }
  .mc-col-left, .mc-col-right {
    display: flex; flex-direction: column;
    gap: clamp(16px, 2vw, 24px);
  }

  /* Cards */
  .mc-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    padding: clamp(20px, 2.5vw, 32px);
    transition: border-color 0.2s;
  }
  .mc-card:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
  .mc-card-head {
    display: flex; align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .mc-card-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.14em;
    min-width: 32px;
  }
  .mc-card-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
    flex: 1;
  }
  .mc-priv-badge {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 4px 8px;
    border-radius: 4px;
  }
  .mc-priv-badge.ok {
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  }
  .mc-priv-badge.muted {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
  }

  /* Pet photo */
  .mc-pet-card { padding: 0; overflow: hidden; }
  .mc-photo {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-2);
    filter: saturate(0.85) contrast(1.02);
  }
  html[data-palette="forest"] .mc-photo,
  html[data-palette="midnight"] .mc-photo {
    filter: saturate(0.7) contrast(0.95) brightness(0.85);
  }
  .mc-pet-card .mc-card-body {
    padding: clamp(20px, 2.5vw, 32px);
  }

  /* Custom photo slideshow in mc-photo slot */
  .mc-photo.mc-slides { position: relative; overflow: hidden; background: #000; }
  .mc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; display: flex; align-items: center; justify-content: center; }
  .mc-slide.active { opacity: 1; }
  .mc-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
  .mc-slide-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.45); border: none; color: #fff;
    font-size: 22px; line-height: 1; padding: 8px 13px;
    cursor: pointer; z-index: 2; border-radius: 4px;
    transition: background 0.15s;
  }
  .mc-slide-btn:hover { background: rgba(0,0,0,0.7); }
  .mc-slide-btn.prev { left: 8px; }
  .mc-slide-btn.next { right: 8px; }
  .mc-slide-count {
    position: absolute; bottom: 8px; right: 10px;
    font-family: var(--mono); font-size: 11px;
    color: rgba(255,255,255,0.8); z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }

  /* Definition lists (key/value rows) */
  .mc-dl {
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 0;
  }
  .mc-dl > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
    align-items: baseline;
  }
  .mc-dl > div:last-child { border-bottom: 0; }
  .mc-dl dt {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
  }
  .mc-dl dd {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .mc-dl dd a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  }
  .mc-dl dd a:hover { border-bottom-color: var(--accent); }
  .mc-private { color: var(--muted); font-style: italic; font-family: var(--sans); font-size: 13px; }

  .mc-notes {
    font-family: var(--serif);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
  }

  /* Action buttons */
  .mc-actions {
    display: flex; flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
  .mc-action {
    display: flex; align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
  }
  .mc-action:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .mc-action.primary {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  html[data-palette="forest"] .mc-action.primary,
  html[data-palette="midnight"] .mc-action.primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
  }
  .mc-action.primary .mc-action-lbl { color: color-mix(in oklab, var(--bg) 75%, transparent); }
  .mc-action.primary .mc-action-val { color: var(--bg); }
  html[data-palette="forest"] .mc-action.primary .mc-action-lbl,
  html[data-palette="midnight"] .mc-action.primary .mc-action-lbl { color: color-mix(in oklab, var(--accent-ink) 75%, transparent); }
  html[data-palette="forest"] .mc-action.primary .mc-action-val,
  html[data-palette="midnight"] .mc-action.primary .mc-action-val { color: var(--accent-ink); }
  .mc-action-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.1em;
    min-width: 42px;
    text-align: center;
    padding: 8px 0;
    border-right: 1px solid var(--line);
  }
  .mc-action.primary .mc-action-num {
    color: var(--bg);
    border-right-color: color-mix(in oklab, var(--bg) 25%, transparent);
  }
  html[data-palette="forest"] .mc-action.primary .mc-action-num,
  html[data-palette="midnight"] .mc-action.primary .mc-action-num {
    color: var(--accent-ink);
    border-right-color: color-mix(in oklab, var(--accent-ink) 25%, transparent);
  }
  .mc-action-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .mc-action-lbl {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
  }
  .mc-action-val {
    font-family: var(--serif);
    font-size: clamp(17px, 1.4vw, 22px);
    color: var(--ink);
    line-height: 1.1;
  }

  /* Private state */
  .mc-private-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 28px);
    margin-bottom: clamp(28px, 4vw, 48px);
  }
  @media (max-width: 720px) { .mc-private-grid { grid-template-columns: 1fr; } }
  .mc-private-body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
  }
  .mc-private-info {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(20px, 2.5vw, 32px);
    background: var(--paper);
  }
  .mc-private-info h5 {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  /* Not found state */
  .mc-empty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 28px);
  }
  @media (max-width: 860px) { .mc-empty-grid { grid-template-columns: 1fr; } }
  .mc-empty-step {
    border-top: 1px solid var(--ink);
    padding-top: 32px;
    position: relative;
  }
  .mc-empty-step .mc-card-num {
    position: absolute;
    top: -1px; left: 0;
    background: var(--bg);
    padding-right: 12px;
    transform: translateY(-50%);
  }
  .mc-empty-step h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
  }
  .mc-empty-step p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 16px;
  }
  .mc-empty-btn {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  }
  .mc-empty-btn:hover { border-bottom-color: var(--accent); }