/* ============================================
   SPECIFY · 仕様 — Resonic Studio build guide
   Editorial / Japanese / collector-grade.
   Type scale: 11 · 12 · 14 · 16 · 19 · 24 · 32 · 48 · 72
   ============================================ */

.page-specify {
  background: var(--bone);
  color: var(--sumi);

  /* Aliases the page expects (not defined in styles.css) */
  --mincho: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --paper:  #faf4e6;             /* slightly lifted card paper, distinct from --bone */
  --paper-deep: #f1e8d2;         /* deeper paper for press states */
  --kinpaku: #b08544;            /* subtle gold for accents */

  /* Strict editorial scale — snap to these, no arbitrary clamps */
  --t-11: 11px;
  --t-12: 12px;
  --t-14: 14px;
  --t-16: 16px;
  --t-19: 19px;
  --t-24: 24px;
  --t-32: 32px;
  --t-48: 48px;
  --t-72: 72px;

  /* Spacing scale (multiples of 4) */
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-128: 128px;
  --s-160: 160px;

  --sp-content: 1280px;
  --sp-narrow: 920px;
}

/* Selection */
.page-specify ::selection {
  background: var(--akane);
  color: var(--bone);
}

/* Focus rings — canonical :focus-visible lives in styles.css :root.
   PART 9 — page-scoped duplicate (1px/2px offset) removed so all
   pages share one 1.5px/3px treatment site-wide. */

.page-specify .sp-input:focus,
.page-specify .sp-textarea:focus {
  outline: none;
}

/* ===================================================================
   TOP HEADER — slim, editorial sub-page bar
   =================================================================== */
.sp-top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  background: rgba(239, 231, 214, 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 0.5px solid var(--rule-soft);
}
.sp-top__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-19);
  letter-spacing: -0.01em;
  color: var(--sumi);
}
.sp-top__brand a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition: opacity .25s ease;
}
.sp-top__brand a:hover { opacity: 0.7; }
.sp-top__cat {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.sp-top__back {
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  text-decoration: none;
  transition: color .2s ease;
}
.sp-top__back:hover { color: var(--akane); }

@media (max-width: 600px) {
  .sp-top { padding: 12px var(--gutter); }
  .sp-top__brand { font-size: var(--t-16); }
  .sp-top__cat { width: 26px; height: 26px; }
  .sp-top__back { font-size: 10px; letter-spacing: 0.2em; }
}

/* ===================================================================
   HERO — capped at 40vh, dense magazine layout
   =================================================================== */
.sp-hero {
  position: relative;
  padding: 1.5rem var(--gutter);
  border-bottom: 0.5px solid var(--rule-soft);
  max-width: var(--content-max);
  margin: 0 auto;
  overflow: hidden;
  max-height: 64vh;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.sp-hero__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-24);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.sp-hero__eyebrow {
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--akane);
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.sp-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--akane);
}
.sp-hero__progress {
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
}
/* Top-right emblem — large editorial figure that anchors the right
   side of the hero, vertically centered, fully contained inside the
   hero (no clipping, no overflow). Behind text via z-index, no
   pointer events so it never blocks clicks. Subtle bob animation. */
/* Cat lives in the .sp-hero__main grid as a third column so it
   auto-aligns to the same vertical center as the title and lede. */
.sp-hero__emblem {
  width: clamp(240px, 22vw, 300px);
  height: clamp(240px, 22vw, 300px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  align-self: center;
  justify-self: end;
  margin-right: clamp(0px, 4vw, 56px);
  animation: sp-cat-bob 3s ease-in-out infinite;
  will-change: transform;
}
@keyframes sp-cat-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (max-width: 900px) {
  .sp-hero__emblem {
    width: clamp(160px, 32vw, 220px);
    height: clamp(160px, 32vw, 220px);
    margin-right: 0;
    justify-self: center;
    opacity: 0.92;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-hero__emblem {
    animation: none;
    transform: none;
  }
}
.sp-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.sp-hero__meta-line {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Hairline separator above the first supporting metadata line so the
   stack visually subordinates to "04 STAGES → 01 BRIEF" above it */
.sp-hero__meta-line:first-of-type {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 0.5px solid var(--rule-soft);
  min-width: 180px;
  justify-content: flex-end;
}
/* Tiny akane dot leading each metadata line, for visual rhythm */
.sp-hero__meta-line::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--akane);
  opacity: 0.7;
  flex-shrink: 0;
}
/* Main row: title+rom on the left, lede in the middle, cat on the
   right — all in one grid row, all vertically centered to a common
   baseline so they read as a single composed line. */
.sp-hero__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .sp-hero__main { grid-template-columns: 1fr; gap: 1.5rem; }
}
.sp-hero__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sp-hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  /* Smaller than /specify's hero — "Commission" is a longer word than
     "Specify", so a more restrained size keeps the title from blowing
     out the auto-width col-1 and squeezing the lede column. */
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--sumi);
  max-width: 11ch;
}
.sp-hero__title em {
  font-family: var(--mincho);
  font-weight: 700;
  font-style: normal;
  color: var(--akane);
  font-size: 0.5em;
  vertical-align: 0.25em;
  margin-left: 0.16em;
  letter-spacing: 0;
  display: inline-block;
}
.sp-hero__rom {
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pencil);
  line-height: 1.4;
  margin-top: 2.5rem;
}
.sp-hero__rom strong {
  color: var(--sumi);
  font-weight: 500;
  margin-right: 4px;
}
.sp-hero__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--sumi-soft);
  max-width: 36ch;
  margin: 0;
  /* Left-aligned body in col 2, no offset — reads as a single composed
     line with the title on its left and the cat on its right. */
  padding-left: 0;
  text-align: left;
}
.sp-hero__lede em { color: var(--akane); font-style: italic; }

/* ===================================================================
   SECTION SCAFFOLDING
   =================================================================== */
.sp-section {
  padding: 1.5rem var(--gutter) 2rem;
  border-bottom: 0.5px solid var(--rule-soft);
  position: relative;
  overflow: hidden; /* clip the giant kanji watermark to its own section */
  min-height: auto;
  isolation: isolate; /* establish stacking context so z-index:-1 stays inside */
}
.sp-hero + .sp-section {
  padding-top: 1rem;
}
.sp-section > * {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
.sp-section.alt { background: var(--bone-soft); }

/* Section header — title centered, description right-anchored.
   Step indicator column kept implicit so the title stays at the
   visual center of the page. */
.sp-shead {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  max-width: var(--sp-content);
  min-height: clamp(260px, 28vw, 360px);
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 0;
}
.sp-shead__title { grid-column: 2; }
.sp-shead__sub   { grid-column: 3; }
/* Per-section kanji watermarks — atmospheric depth, sits BEHIND content.
   Parallax-driven (~0.5x scroll speed) via useParallax + --parallax CSS var.
   The .sp-section parent has `isolation: isolate` so z-index:-1 stays
   inside the section and can't bleed up over global UI. */
.sp-shead__giant {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  transform: translate3d(-50%, calc(-50% + var(--parallax, 0px)), 0);
  will-change: transform;
}
.sp-shead__giant img {
  display: block;
  width: clamp(220px, 24vw, 320px);
  height: clamp(220px, 24vw, 320px);
  max-width: none;
  object-fit: contain;
}
@media (max-width: 900px) {
  .sp-shead__giant {
    opacity: 0.10;
  }
  .sp-shead__giant img {
    width: clamp(160px, 45vw, 240px);
    height: clamp(160px, 45vw, 240px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-shead__giant {
    transform: translate3d(-50%, -50%, 0);
  }
}
.sp-shead > *:not(.sp-shead__giant) { position: relative; z-index: 1; }

/* Per-section step indicator removed — the new horizontal stepper
   above the first section is the persistent step nav. */
.sp-shead__index { display: none; }
.sp-shead__index .k {
  font-family: var(--mincho);
  font-size: var(--t-48, 48px);
  color: var(--akane);
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1;
}
/* Demoted label — kanji is the dominant step indicator now,
   so the name sits as a quiet eyebrow next to it. */
.sp-shead__index-label {
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  font-weight: 500;
}
.sp-shead__index .rule {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--rule);
}
.sp-shead__title {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--sumi);
  text-align: center;
  max-width: none;
}
.sp-shead__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-14);
  color: var(--sumi-soft);
  line-height: 1.5;
  margin: 0;
  text-align: left;
  max-width: none;
}
/* Mobile fallback: stack the three columns when narrow */
@media (max-width: 900px) {
  .sp-shead {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-height: none;
  }
  /* Reset the explicit column placements (set to 2 / 3 for the desktop
     three-column head) so the title + lede collapse into the single
     mobile column instead of spawning implicit columns — otherwise the
     lede stays pinned to a ~140px track and wraps 2–3 words per line. */
  .sp-shead__title { text-align: left; grid-column: 1; }
  .sp-shead__sub { text-align: left; grid-column: 1; }
}

/* ===================================================================
   SERIES HEADER + BASE GRID
   =================================================================== */
.sp-series {
  max-width: var(--sp-content);
  margin: 0 auto clamp(64px, 9vh, 112px);
  transition: margin-bottom .42s cubic-bezier(.2,.7,.2,1);
}
.sp-series:last-child { margin-bottom: 0; }

/* The series header IS the collapse trigger — the whole title bar is a
   single button. Native <button> chrome is reset so it reads exactly like
   the original static header; a chevron at the end signals state. */
.sp-series__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: var(--s-24);
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 0.5px solid var(--rule-soft);
  padding: 0 0 var(--s-16);
  margin-bottom: var(--s-32);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: margin-bottom .42s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
.sp-series__head:hover .sp-series__name,
.sp-series__head:hover .sp-series__chev { color: var(--akane); }
.sp-series__head:focus-visible {
  outline: 2px solid var(--akane);
  outline-offset: 4px;
  border-radius: 2px;
}
.sp-series__name {
  display: flex;
  align-items: baseline;
  gap: var(--s-12);
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-32);
  color: var(--sumi);
  letter-spacing: -0.015em;
  line-height: 1;
  transition: color .2s ease;
}
.sp-series__name::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 22px;
  background: var(--akane);
  transform: translateY(3px);
}
.sp-series__jp {
  font-family: var(--mincho);
  font-size: var(--t-12);
  color: var(--pencil);
  letter-spacing: 0.05em;
  font-weight: 400;
  font-style: normal;
}
.sp-series__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  font-weight: 500;
  white-space: nowrap;
}
/* Collapse chevron — same idiom as the .sp-base "Full spec" chevron:
   ▼ points down when folded, rotates to ▲ when the section is open. */
.sp-series__chev {
  align-self: center;
  font-size: 11px;
  line-height: 1;
  color: var(--pencil);
  transform: rotate(180deg);
  transition: transform .35s ease, color .2s ease;
}
.sp-series.is-collapsed .sp-series__chev { transform: rotate(0deg); }

/* Collapsible panel — animates true content height via grid-template-rows
   (0fr ↔ 1fr), the house easing curve. The inner clip is overflow:hidden
   only while collapsed or mid-animation, so an open section never clips
   its cards' hover / selected box-shadows. */
.sp-series__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .42s cubic-bezier(.2,.7,.2,1);
}
.sp-series.is-collapsed .sp-series__panel { grid-template-rows: 0fr; }
.sp-series__panel > .sp-bases-clip { min-height: 0; overflow: hidden; }
.sp-series:not(.is-collapsed):not(.is-animating) .sp-series__panel > .sp-bases-clip {
  overflow: visible;
}
/* Once fully folded (settled, not animating) drop the panel from the tab
   order and the accessibility tree. */
.sp-series.is-collapsed:not(.is-animating) .sp-series__panel { visibility: hidden; }

/* Pull the section in tight when it's folded. */
.sp-series.is-collapsed .sp-series__head { margin-bottom: 0; }
.sp-series.is-collapsed { margin-bottom: clamp(2rem, 4vh, 3rem); }

@media (max-width: 600px) {
  .sp-series__name { font-size: var(--t-24); }
  /* Keep the chevron pinned beside the title; the tag drops to its own row. */
  .sp-series__head {
    grid-template-columns: 1fr auto;
    gap: 6px var(--s-16);
  }
  .sp-series__name { grid-column: 1; grid-row: 1; }
  .sp-series__chev { grid-column: 2; grid-row: 1; }
  .sp-series__tag { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-series,
  .sp-series__head,
  .sp-series__panel,
  .sp-series__chev { transition: none; }
  .sp-series:not(.is-collapsed) .sp-series__panel > .sp-bases-clip { overflow: visible; }
  .sp-series.is-collapsed .sp-series__panel { visibility: hidden; }
}

/* Helper tip — interaction guidance, not editorial copy.
   Sans-serif, small, low-emphasis grey. Sits above the first series. */
.sp-bases__tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #888;
  margin: 0 auto 4rem;
  max-width: var(--sp-content);
  padding: 12px 14px;
  background: rgba(20, 17, 13, 0.025);
  border-left: 2px solid var(--rule);
  letter-spacing: 0;
  text-transform: none;
}
.sp-bases__tip strong {
  color: var(--sumi);
  font-weight: 500;
}
.sp-bases__tip em {
  color: var(--akane);
  font-style: normal;
  font-weight: 500;
}
.sp-bases__tip > span:first-child {
  color: var(--akane);
  font-weight: 500;
  flex-shrink: 0;
}

/* Base grid */
.sp-bases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--s-24);
}
.sp-bases.featured {
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
}
/* Neutralize the generic .featured chrome leaking from styles.css —
   the outer Big Screen wrapper should be invisible; KT cards keep
   their own panels. */
body.page-wooting .sp-bases.featured {
  background: transparent;
  background-image: none;
  mask-image: none;
  -webkit-mask-image: none;
  border: none;
  box-shadow: none;
}

/* ===================================================================
   BASE CARD — restrained, hover lifts, click selects
   =================================================================== */
/* Single unified white specimen card. No nested frames — image at top,
   specs below, all on the same paper surface. */
.sp-base {
  position: relative;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  border-radius: 3px;
  padding: 32px;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sp-base:hover {
  border-color: rgba(20, 17, 13, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.sp-base.is-selected {
  border-color: var(--akane);
  background: linear-gradient(180deg, var(--paper) 0%, rgba(179, 36, 25, 0.025) 100%);
  box-shadow:
    0 0 0 1px var(--akane),
    0 22px 60px -28px rgba(179, 36, 25, 0.35);
}
.sp-base.is-selected::after {
  content: "決定";
  position: absolute;
  top: var(--s-12);
  left: var(--s-12);
  width: auto;
  height: 30px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  background: var(--akane);
  color: var(--bone);
  font-family: var(--mincho);
  font-size: var(--t-13);
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 4;
  animation: stamp .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes stamp {
  0% { transform: scale(0) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Media — sits directly on the card paper, no separate background or
   border. Keyboard scaled up to fill more of the white space; any
   overflow at the edges is clipped by the media's overflow:hidden. */
.sp-base__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}
.sp-base__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  transition:
    opacity .35s ease,
    transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  transform: translateY(var(--parallax, 0px)) scale(1.7);
}
.sp-base.is-rotating .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.74) rotate(0.4deg);
}

/* Full-size boards (GMK98, GMK104) have a wider physical layout, so
   their PNGs leave more vertical white space at the same scale. Push
   them up another notch so they read as substantial product shots. */
.sp-base[data-base-id="gmk87"] .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.75);
}
.sp-base[data-base-id="gmk87"].is-rotating .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.79) rotate(0.4deg);
}
.sp-base[data-base-id="gmk98"] .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.65);
}
.sp-base[data-base-id="gmk98"].is-rotating .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.69) rotate(0.4deg);
}
.sp-base[data-base-id="gmk104"] .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.8);
}
.sp-base[data-base-id="gmk104"].is-rotating .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.84) rotate(0.4deg);
}

/* Wooting PNGs are pre-cropped tight by Photoroom. Per-board zoom
   tuned to each chassis layout. */
.sp-base[data-base-id="wooting60he"] .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.7);
}
.sp-base[data-base-id="wooting60he"].is-rotating .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.74) rotate(0.4deg);
}
.sp-base[data-base-id="wooting80he"] .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.6);
}
.sp-base[data-base-id="wooting80he"].is-rotating .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.64) rotate(0.4deg);
}
.sp-base[data-base-id="woototwohe"] .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.7);
}
.sp-base[data-base-id="woototwohe"].is-rotating .sp-base__media img {
  transform: translateY(var(--parallax, 0px)) scale(1.74) rotate(0.4deg);
}
.sp-base__featured-tag {
  position: absolute;
  top: var(--s-12);
  right: var(--s-12);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--sumi);
  padding: 5px 10px;
  z-index: 3;
}

/* Tone toggle — sits between media and body specs, on the same
   unified card surface. */
.sp-base__tones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.sp-base__tones-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-left: 4px;
}
.sp-base__tone {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: var(--sumi);
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, border-color .2s ease;
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.18);
}
.sp-base__tone.white {
  background: #f4efe6;
  box-shadow: inset 0 0 0 0.5px rgba(20,17,13,0.18);
}
.sp-base__tone:hover { transform: scale(1.12); }
.sp-base__tone.is-active {
  border-color: var(--akane);
}

/* Body — specs sit directly on the card paper, no internal padding
   (the card itself owns the 32px padding). */
.sp-base__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  flex: 1;
}
.sp-base__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-12);
}
.sp-base__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-24);
  letter-spacing: -0.02em;
  color: var(--sumi);
  line-height: 1;
}
.sp-base__layout {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sp-base__desc {
  font-family: var(--serif);
  font-size: var(--t-14);
  line-height: 1.55;
  color: var(--sumi-soft);
  font-style: italic;
  margin: 0;
}

/* Specs — minimal, dotted-leader hairline */
.sp-base__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 0.5px solid var(--rule-soft);
  padding-top: var(--s-12);
  margin-top: 4px;
}
.sp-base__specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-12);
  padding: 7px 0;
  border-bottom: 0.5px dotted var(--rule-soft);
}
.sp-base__specs li:last-child { border-bottom: none; }
.sp-base__specs li span:first-child {
  color: var(--pencil);
  flex-shrink: 0;
}
.sp-base__specs li span:last-child {
  color: var(--sumi);
  text-align: right;
  font-weight: 500;
}

/* Expanded full-spec */
.sp-base__more {
  overflow: hidden;
  max-height: 0;
  transition: max-height 400ms ease, opacity 300ms ease;
  opacity: 0;
}
.sp-base.is-expanded .sp-base__more {
  max-height: 800px;
  opacity: 1;
}
.sp-base__nerd {
  padding: var(--s-12) 0 4px;
  border-top: 0.5px solid var(--rule-soft);
  margin-top: var(--s-8);
  display: grid;
  gap: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sp-base__nerd .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-12);
  padding: 6px 0;
  border-bottom: 0.5px dotted var(--rule-soft);
}
.sp-base__nerd .row:last-child { border-bottom: none; }
.sp-base__nerd .row span:first-child { color: var(--pencil); }
.sp-base__nerd .row span:last-child { color: var(--sumi); font-weight: 500; }

/* Foot — price + expand */
.sp-base__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--s-16);
  gap: var(--s-12);
}

/* Explicit Select button — primary action on touch, redundant safety
   net on desktop (clicking the card body still works there). */
.sp-base__select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: var(--s-12);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  font-weight: 500;
}
.sp-base__select:hover {
  background: var(--sumi);
  color: var(--bone);
  border-color: var(--sumi);
}
.sp-base__select.is-selected {
  background: var(--akane);
  color: var(--bone);
  border-color: var(--akane);
}
.sp-base__select.is-selected:hover {
  background: var(--akane-deep);
  border-color: var(--akane-deep);
}
.sp-base__select span { display: inline-block; transition: transform .2s ease; }
.sp-base__select:hover:not(.is-selected) span:last-child { transform: translateX(3px); }

/* Touch-mode visual: when a card is on a touch device, hint that the
   tap-to-rotate behavior is available. */
.sp-base.is-touch .sp-base__media::after {
  content: "Tap to preview";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  background: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity .25s ease;
}
.sp-base.is-touch.is-rotating .sp-base__media::after,
.sp-base.is-touch.is-selected .sp-base__media::after {
  opacity: 0;
}
.sp-base__price { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.sp-base__price-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sp-base__price-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.sp-base__price-ccy {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--pencil);
  text-transform: uppercase;
}
.sp-base__price-num {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-32);
  color: var(--sumi);
  letter-spacing: -0.005em;
  line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
}
.sp-base.is-selected .sp-base__price-num { color: var(--akane); }

.sp-base__expand {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  transition: color .2s ease;
}
.sp-base__expand:hover { color: var(--akane); }
.sp-base__expand .chev {
  display: inline-block;
  transition: transform .35s ease;
  font-size: 9px;
}
.sp-base.is-expanded .sp-base__expand .chev { transform: rotate(180deg); }

/* All cards (including featured KT) share the same 16/10 specimen
   frame for visual consistency across the grid. */

/* ===================================================================
   SWITCHES
   =================================================================== */
.sp-switch-grid {
  max-width: var(--sp-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
}
@media (min-width: 1000px) {
  .sp-switch-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s-48);
    align-items: stretch;
  }
}

.sp-switch-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.sp-switch {
  position: relative;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  padding: var(--s-24);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-16);
}
.sp-switch:hover {
  border-color: rgba(20,17,13,0.3);
  transform: translateX(4px);
}
.sp-switch.is-selected {
  border-color: var(--akane);
  background: linear-gradient(135deg, var(--paper) 60%, rgba(179, 36, 25, 0.04) 100%);
}
.sp-switch.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--akane);
}
/* MX switch media — kanji marker by default, swapped for the photo when
   one is set. Wider than just the kanji so the product image reads
   clearly. The has-image variant drops the bone-soft frame so transparent
   PNGs sit cleanly against the card. */
.sp-switch__media {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  align-self: center;
}
.sp-switch__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.sp-switch__num {
  font-family: var(--mincho);
  font-size: var(--t-32);
  font-weight: 700;
  color: var(--akane);
  line-height: 0.9;
  opacity: 0.82;
}
.sp-switch.is-selected .sp-switch__num { opacity: 1; }
.sp-switch__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sp-switch__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-24);
  letter-spacing: -0.02em;
  color: var(--sumi);
  line-height: 1.05;
}
.sp-switch__sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sp-switch__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--sumi-soft);
  line-height: 1.55;
  margin-top: 6px;
}
.sp-switch__play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0.5px solid var(--rule);
  background: var(--bone-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--sumi);
  transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
  flex: 0 0 auto;
  padding: 0;
}
.sp-switch__play:hover {
  background: var(--akane);
  border-color: var(--akane);
  color: var(--bone);
  transform: scale(1.06);
}
.sp-switch.is-selected .sp-switch__play { border-color: var(--akane); }
.sp-switch__play.is-playing {
  background: var(--akane);
  border-color: var(--akane);
  color: var(--bone);
  /* Infinite pulse while audio is playing — stops as soon as
     `.is-playing` is removed (audio paused / ended). */
  animation: playPulse 1.4s ease-in-out infinite;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179,36,25,0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(179,36,25,0); }
}
/* Subtle card-border pulse to reinforce which switch is currently audible */
.sp-switch.is-playing-audio {
  border-color: var(--akane);
  animation: cardPulse 1.4s ease-in-out infinite;
}
@keyframes cardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179,36,25,0.10); }
  50%      { box-shadow: 0 0 0 6px rgba(179,36,25,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-switch__play.is-playing,
  .sp-switch.is-playing-audio { animation: none; }
}

/* ===== Press-curve diagram ===== */
.sp-curve {
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  padding: var(--s-24);
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  /* Stretch to fill the grid row height so the panel's bottom aligns
     with the last switch in the list (parent grid: align-items: stretch). */
  height: 100%;
}
.sp-curve__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-16);
  padding-bottom: var(--s-12);
  border-bottom: 0.5px solid var(--rule-soft);
}
.sp-curve__title-wrap { min-width: 0; }
.sp-curve__title {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-24);
  color: var(--sumi);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sp-curve__sub {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 4px;
}
.sp-curve__caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akane);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 4px;
}

.sp-curve__chart {
  position: relative;
  background:
    linear-gradient(90deg, transparent, rgba(179, 36, 25, 0.015), transparent),
    repeating-linear-gradient(0deg, transparent, transparent 9px, rgba(20,17,13,0.02) 10px);
  border: 0.5px solid var(--rule-soft);
  padding: 6px;
  user-select: none;
}
.sp-curve__line, .sp-curve__area {
  transition: stroke .18s ease, fill .18s ease;
}

.sp-curve__chart svg {
  display: block;
  width: 100%;
  height: 200px;
}
.sp-curve__grid {
  stroke: var(--rule-soft);
  stroke-width: 0.5;
  stroke-dasharray: 2 4;
}
.sp-curve__axis {
  stroke: var(--rule);
  stroke-width: 0.75;
}
.sp-curve__area {
  fill: var(--sumi);
  opacity: 0.05;
  transition: fill .35s ease, opacity .35s ease;
}
.sp-curve.is-playing .sp-curve__area {
  fill: var(--akane);
  opacity: 0.13;
}
.sp-curve__line {
  fill: none;
  stroke: var(--sumi);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .35s ease;
}
.sp-curve.is-playing .sp-curve__line { stroke: var(--akane); }
.sp-curve__press-line {
  stroke: var(--akane);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}
.sp-curve__press-dot {
  fill: var(--akane);
  stroke: var(--paper);
  stroke-width: 2;
}
/* Axis-label middle text "Press-depth" — slightly emphasised so
   it reads as a label, not a sentence. */
.sp-curve__axis-mid {
  color: var(--sumi-soft);
  letter-spacing: 0.24em;
}

/* Demo key — visible only on press, anchored center */
.sp-curve__key {
  position: absolute;
  left: var(--press-x, 50%);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  background: none;
  border: none;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, left .12s ease-out;
}
.sp-curve.is-playing .sp-curve__key { opacity: 1; }
.sp-curve__key-cap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fafaf6, #ebe6dc);
  border: 0.5px solid rgba(40, 30, 25, 0.4);
  border-radius: 5px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--t-16);
  color: var(--sumi);
  box-shadow:
    0 calc((1 - var(--press, 0)) * 4px) 0 rgba(40, 30, 25, 0.18),
    0 calc((1 - var(--press, 0)) * 6px) 12px rgba(40, 30, 25, 0.08);
  transform: translateY(calc(var(--press, 0) * 4px)) scale(calc(1 - var(--press, 0) * 0.04));
  transition: transform .08s ease-out, box-shadow .08s ease-out, background .25s ease;
}
.sp-curve.is-playing .sp-curve__key-cap {
  background: linear-gradient(180deg, #fff5f3, #f3dfd9);
  border-color: rgba(179, 36, 25, 0.5);
}

.sp-curve__axis-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pencil);
}

/* Legend */
.sp-curve__legend {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0.5px solid var(--rule-soft);
  padding-top: var(--s-12);
  /* Pinned to the bottom of the (now-stretched) panel. */
  margin-top: auto;
}
.sp-curve__legend-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-16);
  padding: 8px 0;
  border-bottom: 0.5px dotted var(--rule-soft);
}
.sp-curve__legend-row:last-child { border-bottom: none; }
.sp-curve__legend-key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pencil);
  flex-shrink: 0;
}
.sp-curve__legend-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-14);
  color: var(--sumi);
  text-align: right;
  line-height: 1.4;
}

/* On mobile, no sticky chart */
@media (max-width: 999px) {
  .sp-curve { position: static; top: auto; }
}

/* ===================================================================
   SWITCH PICKER — TIERED LAYOUT (Wooting / HE)
   Three tiers stacked vertically. Each tier has a divider with a
   monospace label. Cards have an image slot + body.
   =================================================================== */
.sp-switch-tiers {
  max-width: var(--sp-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
}
.sp-switch-tier {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}
.sp-switch-tier__head {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: 4px 0;
}
.sp-switch-tier__rule {
  flex: 1;
  height: 0;
  border-top: 0.5px solid var(--rule-soft);
}
.sp-switch-tier__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--akane);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Uniform 2-column grid for every tier — same card width across the picker.
   Tiers with an odd number of cards leave the trailing cell empty (no
   stretching), so the lone card retains the standard half-row width. */
.sp-switch-grid-tier {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s-16);
}
@media (max-width: 720px) {
  .sp-switch-grid-tier { grid-template-columns: 1fr; }
}

/* Switch card — image slot + body. Content-driven sizing: every
   description is trimmed to ~2 lines so cards naturally render at
   the same compact size across Stock / Premium. */
.sp-switch-card {
  position: relative;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  padding: 25px 32px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-16);
  align-items: center;
  outline: none;
}
.sp-switch-card:hover {
  border-color: rgba(20,17,13,0.28);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.sp-switch-card:focus-visible {
  border-color: var(--akane);
  box-shadow: 0 0 0 2px rgba(179, 36, 25, 0.18);
}
.sp-switch-card.is-selected {
  border-color: var(--akane);
  background: linear-gradient(135deg, var(--paper) 60%, rgba(179, 36, 25, 0.05) 100%);
}
.sp-switch-card.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--akane);
}
.sp-switch-card__check {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--akane);
  color: var(--bone);
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}

/* Media slot — clickable to play sound, holds image + kanji marker.
   80px square matches the planned switch photo footprint. */
.sp-switch-card__media {
  position: relative;
  width: 80px;
  height: 80px;
  border: 0.5px solid var(--rule-soft);
  background: var(--bone-soft);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  flex-shrink: 0;
}
.sp-switch-card__media:hover {
  transform: scale(1.04);
  border-color: var(--akane);
  background: var(--bone);
}
.sp-switch-card.is-selected .sp-switch-card__media {
  border-color: var(--akane);
}
.sp-switch-card__media.is-playing {
  border-color: var(--akane);
  background: var(--akane);
  animation: switchPlayPulse 0.6s ease-out;
}
@keyframes switchPlayPulse {
  0%   { box-shadow: 0 0 0 0 rgba(179,36,25,0.45); }
  100% { box-shadow: 0 0 0 14px rgba(179,36,25,0); }
}
.sp-switch-card__media img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.sp-switch-card__num {
  position: relative;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 30px;
  color: var(--akane);
  opacity: 0.55;
  line-height: 1;
  z-index: 1;
}
.sp-switch-card.is-selected .sp-switch-card__num { opacity: 0.8; }
.sp-switch-card__media.is-playing .sp-switch-card__num { color: var(--bone); opacity: 1; }

/* Body — name, sub, desc, weight selector, upcharge.
   justify-content: center keeps the stack centered when the card has
   been stretched to a row partner's taller height. */
.sp-switch-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
}
.sp-switch-card__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-22);
  letter-spacing: -0.018em;
  color: var(--sumi);
  line-height: 1.05;
}
.sp-switch-card__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 2px;
}
.sp-switch-card__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--sumi-soft);
  line-height: 1.5;
  margin: 8px 0 0;
}

/* Weight selector — Owlab Ti HE. Sits inline with the upcharge so it
   takes no extra vertical space. Sized to match the upcharge text
   line height exactly so the row stays 14px tall. */
.sp-switch-card__weight-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  height: 16px;
}
.sp-switch-card__weight {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
  background: transparent;
  border: 0;
  padding: 0 8px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.sp-switch-card__weight + .sp-switch-card__weight {
  border-left: 0.5px solid var(--rule);
}
.sp-switch-card__weight:hover { color: var(--sumi); }
.sp-switch-card__weight.is-active {
  background: var(--sumi);
  color: var(--bone);
}

/* Upcharge — total price impact + (optional) weight toggle, on one row.
   Flex container so the weight toggle can sit inline without claiming
   its own vertical space. Wraps gracefully if the row is too narrow. */
.sp-switch-card__upcharge {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akane);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.4;
}
.sp-switch-card__upcharge-text { display: inline; }
.sp-switch-card__upcharge strong { font-weight: 600; }
.sp-switch-card__upcharge span { color: var(--pencil); }
.sp-switch-card__upcharge.is-free { color: var(--pencil); }

@media (max-width: 520px) {
  .sp-switch-card { grid-template-columns: 72px 1fr; padding: 20px 22px; gap: var(--s-12); }
  .sp-switch-card__media { width: 72px; height: 72px; }
}

/* ===================================================================
   CASE & CHASSIS MODIFICATIONS — sits between #step-base and #step-switches.

   Two-column layout:
     LEFT  (.sp-case-picker)  — list of selectable case cards. Mirrors
                                 the switch picker visually: kanji marker
                                 → photo on selection, akane left-bar +
                                 hover slide. Cards with color variants
                                 expand to a swatch grid when selected.
     RIGHT (.sp-case-preview) — large image + name + colorway label of
                                 the currently-selected case.
   Internal mods (.sp-case-mods) — orthogonal multi-select sub-section
                                    below the picker.
   =================================================================== */
.sp-case-grid {
  max-width: var(--sp-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.sp-case-picker {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  min-width: 0;
}

/* ----- Case card ----- */
.sp-case {
  position: relative;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  /* 25px / 32px gives the inline akane bar (3px) + selected swatch
     transform: scale(1.05) (~0.9px overflow each side) plenty of room
     to sit cleanly inside the card. Hardcoded values rather than
     spacing tokens because `--s-20` isn't defined and previously
     fell back to 0 — the bug that broke swatch alignment. */
  padding: 25px 32px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .25s ease, background .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}
.sp-case:hover {
  border-color: rgba(20,17,13,0.3);
  transform: translateX(4px);
}
.sp-case.is-selected {
  border-color: var(--akane);
  background: linear-gradient(135deg, var(--paper) 60%, rgba(179, 36, 25, 0.04) 100%);
  cursor: default;
  transform: none;
}
.sp-case.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--akane);
}
.sp-case__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-16);
  align-items: center;
}
/* 48px brand-marker thumbnail at the left edge. Default is the
   maneki-neko mascot; Tofu60 Redux overrides this with the live
   colorway photo from CaseCard. */
.sp-case__thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  align-self: center;
  max-width: none;
}
.sp-case__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sp-case__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-22);
  letter-spacing: -0.015em;
  color: var(--sumi);
  line-height: 1.1;
}
.sp-case__sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sp-case__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--sumi-soft);
  line-height: 1.5;
  margin-top: 4px;
}
.sp-case__price {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}
.sp-case__price.is-paid     { color: var(--akane); }
.sp-case__price.is-included { color: var(--pencil); }
.sp-case__price.is-tbd      { color: var(--pencil); opacity: 0.7; }

/* ----- Variant swatches inside selected card ----- */
.sp-case__variants,
.sp-case__extras {
  border-top: 0.5px solid var(--rule-soft);
  padding-top: var(--s-12);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.sp-case__variants-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pencil);
  text-align: center;
}
.sp-case__swatches {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.sp-case__swatch-group-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 6px;
}
.sp-case__swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 8px;
}
.sp-case__swatch {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  outline: 0.5px solid rgba(20,17,13,0.16);
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.sp-case__swatch:hover {
  transform: scale(1.05);
}
.sp-case__swatch:focus-visible {
  outline: 2px solid var(--akane);
  outline-offset: 2px;
}
.sp-case__swatch.is-selected {
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 3.5px var(--akane);
  transform: scale(1.05);
}
.sp-case__swatch-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--akane);
  text-shadow: 0 1px 2px rgba(255,255,255,0.55);
  pointer-events: none;
}
/* Smaller variant — used by the Holy60 bottom-cover sub-color picker
   inside the EXTRAS block. Matches the 24px target size in spec. */
.sp-case__swatch--sm {
  width: 24px;
  height: 24px;
}
.sp-case__swatch--sm .sp-case__swatch-check {
  font-size: 11px;
}

/* ----- EXTRAS block (case-specific add-ons) -----
   Renders below the variants picker for cases that have an `addons`
   array. Each row: a checkbox-style toggle on the left + akane price
   on the right. When a toggle has nested colors (Holy60 bottom-cover),
   the sub-picker renders below the row, indented under the label. */
.sp-case__addon {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-case__addon-row {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.sp-case__addon-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-width: 0;
}
.sp-case__addon-check {
  width: 18px;
  height: 18px;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bone);
  background: transparent;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.sp-case__addon-toggle[aria-pressed="true"] .sp-case__addon-check {
  background: var(--akane);
  border-color: var(--akane);
}
.sp-case__addon-name {
  font-family: var(--mincho);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-16);
  color: var(--sumi);
}
.sp-case__addon-price {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akane);
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-case__addon-colors {
  display: flex;
  gap: 10px;
  /* Indent the sub-picker so it visually aligns under the toggle's
     label (skipping past the 18px checkbox + 12px gap). */
  margin-left: 30px;
}

/* "Anodized — Burgundy" readout below the swatch grid. Mincho italic
   for editorial weight; group word in akane to mirror the right-pane
   caption styling. */
.sp-case__colorway-readout {
  font-family: var(--mincho);
  font-style: italic;
  font-size: var(--t-16);
  color: var(--sumi-soft);
  text-align: center;
  margin-top: 2px;
}
.sp-case__colorway-readout-group {
  color: var(--akane);
  font-weight: 700;
}
.sp-case__colorway-readout-name {
  color: var(--sumi);
  font-weight: 700;
}

/* ----- Right column preview ----- */
.sp-case-preview {
  position: sticky;
  top: clamp(20px, 4vh, 80px);
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  padding: clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  align-self: start;
}
.sp-case-preview__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bone-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sp-case-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
}
.sp-case-preview__fallback {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  color: var(--pencil);
}
.sp-case-preview__fallback-mascot {
  width: clamp(120px, 18vw, 220px);
  height: clamp(120px, 18vw, 220px);
  object-fit: contain;
  opacity: 0.35;
  max-width: none;
}
.sp-case-preview__fallback-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sp-case-preview__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-case-preview__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-24);
  letter-spacing: -0.015em;
  color: var(--sumi);
  line-height: 1.1;
}
.sp-case-preview__colorway {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sp-case-preview__colorway-accent {
  color: var(--akane);
  font-weight: 700;
}
.sp-case-preview__colorway-brand {
  color: var(--pencil);
}
.sp-case-preview__notes {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sumi-soft);
  margin: 0;
}

/* ----- Internal mods sub-section ----- */
.sp-case-mods {
  max-width: var(--sp-content);
  margin: clamp(36px, 5vh, 64px) auto 0;
}
.sp-case-mods__head {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  margin-bottom: var(--s-16);
}
.sp-case-mods__rule {
  flex: 1 1 auto;
  height: 0.5px;
  background: var(--rule-soft);
}
.sp-case-mods__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pencil);
  flex-shrink: 0;
}
.sp-case-mods__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.sp-case-mod {
  position: relative;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  padding: var(--s-24);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .25s ease, background .25s ease;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--s-16);
  align-items: center;
}
.sp-case-mod:hover {
  border-color: rgba(20,17,13,0.3);
}
.sp-case-mod.is-selected {
  border-color: var(--akane);
  background: linear-gradient(135deg, var(--paper) 60%, rgba(179, 36, 25, 0.04) 100%);
}
.sp-case-mod__check {
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--bone);
  background: transparent;
  transition: background .2s ease, border-color .2s ease;
}
.sp-case-mod.is-selected .sp-case-mod__check {
  background: var(--akane);
  border-color: var(--akane);
}
.sp-case-mod__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sp-case-mod__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-18);
  letter-spacing: -0.01em;
  color: var(--sumi);
}
.sp-case-mod__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--sumi-soft);
  line-height: 1.5;
}
.sp-case-mod__price {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--akane);
}
.sp-case-mod__price.is-tbd {
  color: var(--pencil);
  opacity: 0.7;
}

/* Mobile fallbacks */
@media (max-width: 900px) {
  .sp-case-grid {
    grid-template-columns: 1fr;
    gap: var(--s-24);
  }
  .sp-case-preview {
    position: static;
    order: 1; /* PART 4 — preview below the picker on narrow screens
                so the chooser leads the read order */
  }
  .sp-case-picker { order: 0; }
}
@media (max-width: 520px) {
  .sp-case__head {
    grid-template-columns: 48px 1fr;
  }
  .sp-case__body {
    grid-column: 2;
  }
  .sp-case__price {
    grid-column: 2;
    align-self: start;
    justify-self: start;
  }
  .sp-case-mod {
    grid-template-columns: 22px 1fr;
    gap: var(--s-12);
  }
  .sp-case-mod__price {
    grid-column: 2;
  }
}

/* ===================================================================
   STABILIZER UPGRADE — single-select 2×2 grid that visually mirrors
   the switch card pattern (.sp-switch-card → .sp-stab-card). Lives
   at the top of Optional Refinements, before the multi-select
   services list. Stock is the auto-included default.
   =================================================================== */
.sp-stab-section {
  max-width: var(--sp-content);
  margin: 0 auto var(--s-48);
}

/* Sub-step head — mirrors the main step head but compact, so it can
   nest inside step-services without competing with the parent
   "Optional refinements." heading. Restored after a previous edit
   removed the rule. */
.sp-shead--sub {
  margin-top: var(--s-32);
  padding-top: 0;
  padding-bottom: var(--s-16);
  min-height: 0;
}
.sp-shead--sub .sp-shead__index .k {
  font-size: clamp(28px, 3.2vw, 40px);
}
.sp-shead--sub .sp-shead__title {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
}
.sp-shead--sub .sp-shead__sub {
  font-size: var(--t-13);
}

/* "What's a stabilizer?" callout — quick what-is-it explainer.
   Akane bordered, mono caps lead, italic body. */
.sp-stab-info {
  background: var(--bone-soft);
  border-left: 3px solid var(--akane);
  padding: var(--s-16) var(--s-20);
  margin: 0 0 var(--s-24);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.sp-stab-info strong {
  color: var(--akane);
  font-weight: 600;
  letter-spacing: 0.22em;
  flex-shrink: 0;
}
.sp-stab-info span {
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--sumi-soft);
}

/* 2×2 grid — single column on phones. */
.sp-stab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-24);
}
@media (max-width: 720px) {
  .sp-stab-grid { grid-template-columns: 1fr; gap: var(--s-16); }
}

/* Card — direct parallel to .sp-switch-card. 80px media + body grid. */
.sp-stab-card {
  position: relative;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  padding: 25px 32px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-16);
  align-items: start;
  outline: none;
}
.sp-stab-card:hover {
  border-color: rgba(20,17,13,0.28);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.sp-stab-card:focus-visible {
  border-color: var(--akane);
  box-shadow: 0 0 0 2px rgba(179, 36, 25, 0.18);
}
.sp-stab-card.is-selected {
  border-color: var(--akane);
  background: linear-gradient(135deg, var(--paper) 60%, rgba(179, 36, 25, 0.05) 100%);
}
.sp-stab-card.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--akane);
}
.sp-stab-card__check {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--akane);
  color: var(--bone);
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}
/* Media slot — bone-soft frame, akane border on selection. */
.sp-stab-card__media {
  position: relative;
  width: 80px;
  height: 80px;
  border: 0.5px solid var(--rule-soft);
  background: var(--bone-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .25s ease, background .25s ease;
}
.sp-stab-card.is-selected .sp-stab-card__media {
  border-color: var(--akane);
}
.sp-stab-card__media img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
  max-width: none;
  pointer-events: none;
}
.sp-stab-card__num {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 32px;
  color: var(--akane);
  opacity: 0.7;
  line-height: 1;
}
.sp-stab-card.is-selected .sp-stab-card__num { opacity: 0.9; }
.sp-stab-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sp-stab-card__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-22);
  letter-spacing: -0.015em;
  color: var(--sumi);
  line-height: 1.1;
}
.sp-stab-card__sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 2px;
}
.sp-stab-card__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--sumi-soft);
  line-height: 1.55;
  margin: 8px 0 12px;
}
.sp-stab-card__upcharge {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akane);
  font-variant-numeric: lining-nums tabular-nums;
}
.sp-stab-card__upcharge strong { font-weight: 600; }
.sp-stab-card__upcharge span { color: var(--pencil); }
.sp-stab-card__upcharge.is-free { color: var(--pencil); }
.sp-stab-card__upcharge.is-free strong { color: var(--pencil); }

@media (max-width: 520px) {
  .sp-stab-card { padding: 20px 22px; grid-template-columns: 64px 1fr; gap: var(--s-12); }
  .sp-stab-card__media { width: 64px; height: 64px; }
}

/* ===================================================================
   SERVICES — wide ledger rows
   =================================================================== */
.sp-svc-list {
  max-width: var(--sp-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 0.5px solid var(--rule);
}
.sp-svc {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: var(--s-24);
  align-items: center;
  padding: var(--s-24) var(--s-8);
  border-bottom: 0.5px solid var(--rule-soft);
  cursor: pointer;
  transition: background .25s ease, padding .25s ease;
}
.sp-svc:hover { background: rgba(179,36,25,0.04); padding-left: var(--s-16); }
.sp-svc.is-on { background: rgba(179,36,25,0.06); padding-left: var(--s-16); }

.sp-svc__check {
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: all .2s ease;
  background: var(--paper);
}
.sp-svc.is-on .sp-svc__check {
  background: var(--akane);
  border-color: var(--akane);
  color: var(--bone);
  transform: scale(1.05);
}
.sp-svc__check svg {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.sp-svc.is-on .sp-svc__check svg {
  opacity: 1;
  transform: scale(1);
}
.sp-svc__body { display: flex; flex-direction: column; gap: 4px; }
.sp-svc__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-19);
  letter-spacing: -0.015em;
  color: var(--sumi);
  line-height: 1.15;
}
.sp-svc__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--sumi-soft);
  line-height: 1.5;
}
.sp-svc__price {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-19);
  color: var(--sumi);
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
}
.sp-svc__price sup {
  font-size: 0.55em;
  font-family: var(--mono);
  font-weight: 500;
  font-style: normal;
  color: var(--pencil);
  vertical-align: 0.6em;
  margin-right: 2px;
}
.sp-svc__hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  width: 56px;
  text-align: right;
  transition: color .2s ease;
}
.sp-svc.is-on .sp-svc__hint { color: var(--akane); }

/* Locked / auto-included refinement (e.g. Professional Assembly).
   Visually reads as "always on" but blocks all interaction so the user
   can't toggle it off. The price column uses the mono "INCLUDED FREE
   OF CHARGE" treatment instead of a dollar amount. */
.sp-svc.is-locked {
  cursor: default;
}
.sp-svc.is-locked:hover {
  background: rgba(179,36,25,0.06);
  padding-left: var(--s-16);
}
.sp-svc__price.is-included {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akane);
}

@media (max-width: 600px) {
  .sp-svc {
    grid-template-columns: 22px 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--s-12) var(--s-16);
    padding: var(--s-16) var(--s-8);
  }
  .sp-svc__check { grid-row: 1; }
  .sp-svc__body { grid-row: 1; grid-column: 2 / 4; }
  .sp-svc__price { grid-row: 2; grid-column: 2; }
  .sp-svc__hint { grid-row: 2; grid-column: 3; align-self: end; }
  .sp-svc__examples { grid-column: 1 / -1; }
}

/* "See examples" toggle — small monospace, brand-red. Sits below the
   description on rows that have an `examples` array. */
.sp-svc__examples-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 2px 0;
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akane);
  cursor: pointer;
  transition: color .2s ease;
}
.sp-svc__examples-toggle:hover { color: var(--akane-deep); }
.sp-svc__examples-toggle .chev {
  font-size: 8px;
  line-height: 1;
  transition: transform .25s ease;
}

/* Examples row — full-width row 2 of the .sp-svc grid. Smooth
   max-height transition keeps the open/close fluid. */
.sp-svc__examples {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms ease-out, opacity 200ms ease-out, margin 200ms ease-out;
  margin-top: 0;
}
.sp-svc__examples.is-open {
  max-height: 220px;
  opacity: 1;
  margin-top: 14px;
}
.sp-svc__examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  gap: var(--s-12);
  padding-bottom: 4px;
}
.sp-svc__example {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-svc__example-img {
  width: 120px;
  height: 120px;
  background: var(--bone-soft);
  border: 0.5px solid var(--rule-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sp-svc__example-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.sp-svc__example figcaption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .sp-svc__examples.is-open { max-height: none; }
  .sp-svc__examples-grid {
    grid-template-columns: 1fr;
  }
  .sp-svc__example { flex-direction: row; align-items: center; gap: var(--s-12); }
  .sp-svc__example-img { width: 96px; height: 96px; flex-shrink: 0; }
  .sp-svc__example figcaption { text-align: left; }
}

/* ===================================================================
   DESIGN BRIEF
   =================================================================== */
.sp-brief {
  max-width: var(--sp-narrow);
  margin: 0 auto;
}
.sp-brief__intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--sumi-soft);
  margin: 0 0 var(--s-64);
  max-width: 56ch;
  padding-left: var(--s-16);
  border-left: 1px solid var(--akane);
}
.sp-brief__intro em { color: var(--akane); font-style: italic; }

.sp-q {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  margin-bottom: var(--s-48);
  padding-bottom: var(--s-48);
  border-bottom: 0.5px solid var(--rule-soft);
}
.sp-q:last-child { border-bottom: none; padding-bottom: 0; }

@media (min-width: 800px) {
  .sp-q {
    grid-template-columns: 220px 1fr;
    gap: var(--s-48);
    align-items: start;
  }
}
.sp-q__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 88px;
}
@media (max-width: 799px) {
  .sp-q__label { position: static; }
}
.sp-q__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--akane);
}
.sp-q__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-24);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sumi);
}
.sp-q__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sumi-soft);
  margin-top: var(--s-8);
}
.sp-q__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  min-width: 0;
}

/* Featured Q (refs/notes — the important one) */
.sp-q--featured {
  position: relative;
  padding-top: var(--s-32);
  margin-top: var(--s-16);
}
.sp-q--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 1px;
  background: var(--akane);
}
.sp-q--featured .sp-q__title {
  font-size: clamp(28px, 2.6vw, 36px);
}
.sp-q__emph {
  font-family: var(--mincho);
  font-style: normal;
  font-weight: 500;
  color: var(--akane);
  margin-left: 6px;
  font-size: 0.46em;
  letter-spacing: 0.02em;
  display: inline-block;
  vertical-align: 0.5em;
  white-space: nowrap;
}

/* Direction cards */
.sp-direction-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
}
@media (min-width: 700px) {
  .sp-direction-grid { grid-template-columns: repeat(3, 1fr); }
}
.sp-direction {
  text-align: left;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
  padding: var(--s-24);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .25s ease, background .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  font-family: inherit;
  position: relative;
}
.sp-direction:hover {
  border-color: rgba(20,17,13,0.3);
  transform: translateY(-2px);
}
.sp-direction.is-on {
  border-color: var(--akane);
  background: linear-gradient(135deg, var(--paper) 60%, rgba(179, 36, 25, 0.04));
  box-shadow: 0 0 0 1px var(--akane);
}
.sp-direction__num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: var(--s-8);
}
.sp-direction.is-on .sp-direction__num { color: var(--akane); }
.sp-direction__label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-19);
  color: var(--sumi);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.sp-direction__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--sumi-soft);
  line-height: 1.5;
  margin-top: 4px;
}

/* ===================================================================
   PALETTE / CHIPS / HSV PICKER
   =================================================================== */
.sp-palette {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}
.sp-palette__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}
.sp-chip {
  position: relative;
  width: 56px;
  height: 56px;
  border: 0.5px solid var(--rule);
  cursor: pointer;
  background: var(--paper);
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
  overflow: visible;
  padding: 0;
  outline-offset: 4px;
}
.sp-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(20,17,13,0.32);
}
.sp-chip.is-editing {
  box-shadow: 0 0 0 1px var(--akane), 0 8px 18px -8px rgba(179,36,25,0.4);
  border-color: var(--akane);
}
.sp-chip__remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sumi);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 12px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity .15s ease, transform .15s ease;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.sp-chip:hover .sp-chip__remove,
.sp-chip.is-editing .sp-chip__remove {
  opacity: 1;
  transform: scale(1);
}
.sp-chip__remove:hover { background: var(--akane); }

.sp-chip.is-add {
  border-style: dashed;
  border-color: var(--pencil);
  color: var(--pencil);
  font-family: var(--display);
  font-size: var(--t-24);
  font-weight: 300;
  display: grid;
  place-items: center;
  background: transparent;
  transition: all .2s ease;
}
.sp-chip.is-add:hover {
  color: var(--akane);
  border-color: var(--akane);
  background: rgba(179,36,25,0.04);
}

.sp-palette__hint {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sp-palette__hint em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sumi-soft);
  margin-left: 6px;
}

/* HSV picker modal */
.sp-chip-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 15, 12, 0.5);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  display: grid;
  place-items: center;
  padding: var(--s-24);
  animation: chipFade .2s ease;
}
@keyframes chipFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sp-chip-popover {
  position: relative;
  z-index: 201;
  background: var(--paper);
  border: 0.5px solid var(--sumi);
  padding: var(--s-24);
  width: min(360px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow:
    0 1px 0 rgba(20,15,12,0.04),
    0 32px 84px rgba(20, 15, 12, 0.36),
    0 8px 16px rgba(20, 15, 12, 0.14);
  animation: chipPop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes chipPop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sp-chip-popover__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  font-size: var(--t-19);
  color: var(--pencil);
  cursor: pointer;
  font-family: var(--mono);
  line-height: 1;
  transition: color .15s ease;
}
.sp-chip-popover__close:hover { color: var(--akane); }

.sp-hsv {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.sp-hsv__head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 2px;
}
.sp-hsv__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.5px solid var(--rule-soft);
}
.sp-hsv__tab {
  background: transparent;
  border: none;
  padding: 9px 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
  cursor: pointer;
  outline: none;
  transition: background .15s ease, color .15s ease;
}
.sp-hsv__tab + .sp-hsv__tab { border-left: 0.5px solid var(--rule-soft); }
.sp-hsv__tab:hover { color: var(--sumi); }
.sp-hsv__tab.is-on {
  background: var(--sumi);
  color: var(--bone);
}
.sp-hsv__sv {
  position: relative;
  width: 100%;
  height: 200px;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}
.sp-hsv__sv-white {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, transparent);
}
.sp-hsv__sv-black {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, transparent);
}
.sp-hsv__sv-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  pointer-events: none;
}
.sp-hsv__hue {
  position: relative;
  width: 100%;
  height: 14px;
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.sp-hsv__hue.is-tall { height: 32px; }
.sp-hsv__hue.is-tall .sp-hsv__hue-cursor { height: 40px; width: 5px; }
.sp-hsv__hue-cursor {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.sp-hsv__foot {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-top: 4px;
}
.sp-hsv__hex {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bone);
  border: 0.5px solid var(--rule-soft);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  color: var(--pencil);
  transition: border-color .2s ease;
}
.sp-hsv__hex:focus-within { border-color: var(--akane); }
.sp-hsv__hex input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--sumi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 100%;
  min-width: 0;
}
.sp-hsv__done {
  padding: 9px 16px;
  background: var(--sumi);
  color: var(--bone);
  border: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.sp-hsv__done:hover { background: var(--akane); }

/* ===================================================================
   FORMS — paper feel, hairline borders, akane on focus
   =================================================================== */
.sp-input,
.sp-textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--rule);
  padding: 12px 0;
  font-family: var(--serif);
  font-size: var(--t-16);
  color: var(--sumi);
  outline: none;
  transition: border-color .25s ease;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.sp-textarea {
  border: 0.5px solid var(--rule-soft);
  border-radius: 0;
  background:
    linear-gradient(transparent, transparent 28px, var(--rule-soft) 28px, var(--rule-soft) 28.5px, transparent 28.5px) 0 0 / 100% 28px,
    var(--paper);
  padding: var(--s-16) var(--s-16);
  min-height: 140px;
  line-height: 28px;
  font-style: italic;
  font-size: var(--t-16);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.sp-textarea:focus,
.sp-input:focus {
  border-color: var(--akane);
}
.sp-textarea:focus {
  border-style: solid;
  border-color: var(--akane);
  box-shadow: 0 0 0 3px rgba(179,36,25,0.08);
}
.sp-input::placeholder,
.sp-textarea::placeholder {
  color: var(--pencil);
  font-style: italic;
  opacity: 0.85;
}

.sp-textarea--lg {
  min-height: 280px;
  font-size: var(--t-19);
  padding: var(--s-24);
  line-height: 32px;
  background:
    linear-gradient(transparent, transparent 31px, var(--rule-soft) 31px, var(--rule-soft) 31.5px, transparent 31.5px) 0 24px / 100% 32px,
    var(--paper);
}

/* File drop / attach */
.sp-drop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-16);
  border: 0.5px dashed var(--rule);
  background: var(--paper);
  padding: var(--s-16) var(--s-24);
  text-align: left;
  cursor: pointer;
  transition: all .25s ease;
}
.sp-drop:hover {
  border-color: var(--akane);
  background: rgba(179,36,25,0.04);
}
.sp-drop__icon {
  font-family: var(--mincho);
  font-size: var(--t-24);
  color: var(--pencil);
  line-height: 1;
  transition: color .25s ease;
}
.sp-drop:hover .sp-drop__icon { color: var(--akane); }
.sp-drop__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-16);
  color: var(--sumi);
  line-height: 1.3;
}
.sp-drop__hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 2px;
}
.sp-drop__cta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akane);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .sp-drop {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .sp-drop__cta { grid-column: 1 / 3; justify-self: start; }
}

/* Contact stack */
.sp-contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}
.sp-contact__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-contact__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
}

/* Phone with country picker */
.sp-phone {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px dotted var(--rule);
  transition: border-color .25s ease;
}
.sp-phone:focus-within {
  border-color: var(--akane);
  border-style: solid;
}
.sp-phone__country {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: 12px 14px 12px 0;
  border-right: 1px dotted var(--rule);
  margin-right: var(--s-12);
  font-family: var(--mono);
  font-size: var(--t-14);
  color: var(--sumi);
  cursor: pointer;
  user-select: none;
  transition: opacity .2s ease;
}
.sp-phone__country:hover { opacity: 0.75; }
.sp-phone__flag {
  font-size: var(--t-19);
  line-height: 1;
}
.sp-phone__dial {
  font-family: var(--mono);
  font-size: var(--t-14);
  color: var(--sumi);
  letter-spacing: 0.04em;
}
.sp-phone__caret {
  font-size: 10px;
  color: var(--pencil);
  margin-left: -2px;
  transition: transform .2s ease;
}
.sp-phone__country:hover .sp-phone__caret { transform: translateY(2px); }
.sp-phone__select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* prevents iOS zoom */
  border: none;
  background: transparent;
}
.sp-phone__num {
  border: none !important;
  border-bottom: none !important;
  padding-left: 0;
  padding-right: 0;
}

/* ===================================================================
   STICKY SUMMARY BAR — light, refined, unobtrusive
   =================================================================== */
.sp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 17, 13, 0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--bone);
  z-index: 70;
  padding: 12px clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  border-top: 0.5px solid rgba(239,231,214,0.12);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.sp-bar.is-hidden { transform: translateY(120%); }

.sp-bar__left {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  min-width: 0;
}
.sp-bar__seg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
}
.sp-bar__seg + .sp-bar__seg::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(10px, 1.5vw, 20px));
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(239,231,214,0.12);
}
.sp-bar__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.45);
}
.sp-bar__value {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-14);
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 24ch;
  transition: color .25s ease;
}
.sp-bar__value.empty {
  color: rgba(239,231,214,0.35);
  font-style: italic;
}

/* Empty-state single prompt — replaces the segments area before
   any selection has been made. */
.sp-bar__prompt {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.sp-bar__prompt-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-16);
  color: var(--bone);
  white-space: nowrap;
}
.sp-bar__prompt-arrow {
  font-family: var(--mono);
  font-size: var(--t-16);
  color: var(--akane);
  display: inline-block;
  animation: sp-bar-arrow-nudge 1.8s ease-in-out infinite;
}
@keyframes sp-bar-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-bar__prompt-arrow { animation: none; }
}

.sp-bar__total-seg {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
}
.sp-bar__total {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.005em;
  color: var(--bone);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
}
.sp-bar__total sup {
  font-size: 0.42em;
  font-family: var(--mono);
  font-weight: 500;
  font-style: normal;
  color: rgba(239,231,214,0.55);
  vertical-align: 0.7em;
  margin-right: 2px;
  letter-spacing: 0.04em;
}

.sp-bar__cta {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--akane);
  color: var(--bone);
  padding: 14px 22px;
  border: 1px solid var(--akane);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .2s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-bar__cta:not(:disabled) {
  box-shadow: 0 4px 16px rgba(179, 36, 25, 0.32);
}
.sp-bar__cta:hover:not(:disabled) {
  background: var(--akane-deep);
  border-color: var(--akane-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(179, 36, 25, 0.4);
}
.sp-bar__cta:disabled {
  background: transparent;
  border-color: rgba(239,231,214,0.18);
  color: rgba(239,231,214,0.55);
  cursor: not-allowed;
}
.sp-bar__cta:disabled strong {
  color: var(--akane);
  font-weight: 700;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
  margin-right: 2px;
}
.sp-bar__cta-arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.sp-bar__cta:hover:not(:disabled) .sp-bar__cta-arrow {
  transform: translateX(3px);
}
.sp-bar__cta-text-short { display: none; }
@media (max-width: 760px) {
  .sp-bar__cta-text-full { display: none; }
  .sp-bar__cta-text-short { display: inline; }
}

/* User-initiated reset link — only place state is wiped. Quiet ghost
   styling so it never competes with the primary submit CTA. */
.sp-bar__start-over {
  background: transparent;
  border: 0;
  padding: 8px 4px;
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.42);
  cursor: pointer;
  transition: color .25s ease;
  white-space: nowrap;
}
.sp-bar__start-over:hover,
.sp-bar__start-over:focus-visible {
  color: var(--bone);
  outline: none;
}

@media (max-width: 760px) {
  .sp-bar {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 10px;
    padding: 10px 16px 12px;
  }
  .sp-bar__left {
    grid-row: 1;
    grid-column: 1 / -1;
    overflow-x: auto;
    gap: var(--s-16);
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sp-bar__left::-webkit-scrollbar { display: none; }
  .sp-bar__seg + .sp-bar__seg::before { display: none; }
  .sp-bar__total-seg {
    grid-row: 2;
    grid-column: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .sp-bar__total-seg .sp-bar__label {
    font-size: 9px;
  }
  .sp-bar__start-over {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: start;
    padding: 4px 0 2px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .sp-bar__cta {
    grid-row: 2;
    grid-column: 2;
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .sp-bar__value { max-width: 14ch; font-size: 13px; }
}

/* ===================================================================
   SUBMITTED CONFIRMATION
   =================================================================== */
.sp-sent {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(64px, 12vh, 140px) var(--gutter);
}
.sp-sent__seal {
  width: 96px;
  height: 96px;
  display: inline-grid;
  place-items: center;
  background: var(--akane);
  color: var(--bone);
  font-family: var(--mincho);
  font-size: 44px;
  font-weight: 700;
  margin-bottom: var(--s-32);
  animation: sealStamp .9s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.sp-sent__seal::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 0.5px solid var(--akane);
  opacity: 0;
  animation: sealRing 1.6s 0.7s ease-out forwards;
}
@keyframes sealStamp {
  0% { transform: scale(0) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sealRing {
  0% { opacity: 0; transform: scale(0.85); }
  50% { opacity: 0.6; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.2); }
}
.sp-sent__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--akane);
  margin-bottom: var(--s-16);
}
.sp-sent__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 72px);
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-16);
  color: var(--sumi);
  line-height: 1;
}
.sp-sent__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-19);
  color: var(--sumi-soft);
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 auto var(--s-48);
}
.sp-sent__sub em { color: var(--akane); }
.sp-sent__back {
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: transparent;
  color: var(--sumi);
  border: 1px solid var(--sumi);
  padding: 14px 24px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s ease, color .25s ease;
}
.sp-sent__back:hover {
  background: var(--sumi);
  color: var(--bone);
}

/* ===================================================================
   REVEAL ANIMATIONS — failsafe pattern.
   Default state is fully VISIBLE (opacity 1, no transform). The
   animation only plays IF the IntersectionObserver adds .in.
   This guarantees content is never stuck invisible if JS fails.
   =================================================================== */
@keyframes sp-reveal-fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-section .reveal {
  opacity: 1;
  transform: none;
}
.sp-section .reveal.in {
  animation: sp-reveal-fadeup 0.7s cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sp-section .reveal,
  .sp-section .reveal.in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Page padding for sticky bar */
body.page-specify { padding-bottom: 88px; }
@media (max-width: 760px) {
  body.page-specify { padding-bottom: 132px; }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.sp-foot {
  margin-top: 0;
  padding: var(--s-48) var(--gutter) var(--s-32);
  border-top: 0.5px solid var(--rule-soft);
  background: var(--bone);
}
.sp-foot__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  align-items: start;
  padding-bottom: var(--s-32);
  border-bottom: 0.5px dotted var(--rule-soft);
}
@media (min-width: 760px) {
  .sp-foot__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--s-48);
    align-items: center;
  }
}
.sp-foot__brand {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.sp-foot__mark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.sp-foot__mark img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.sp-foot__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-19);
  color: var(--sumi);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.sp-foot__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 4px;
}
.sp-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24);
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (min-width: 760px) {
  .sp-foot__nav { justify-content: center; }
}
.sp-foot__nav a {
  color: var(--sumi);
  text-decoration: none;
  border-bottom: 0.5px dotted transparent;
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.sp-foot__nav a:hover {
  color: var(--akane);
  border-bottom-color: var(--akane);
}
.sp-foot__nav a[aria-current="page"] {
  color: var(--akane);
  border-bottom-color: var(--akane);
}
.sp-foot__social {
  display: flex;
  gap: 6px;
}
.sp-foot__social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--sumi);
  border: 0.5px solid var(--rule-soft);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.sp-foot__social a:hover {
  color: var(--bone);
  background: var(--akane);
  border-color: var(--akane);
  transform: translateY(-2px);
}
.sp-foot__base {
  max-width: var(--sp-content);
  margin: 0 auto;
  padding-top: var(--s-24);
  display: flex;
  gap: var(--s-12);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pencil);
  flex-wrap: wrap;
}

/* ===================================================================
   VERTICAL RAIL — persistent scroll nav, far left edge.
   Coexists with the horizontal stepper: stepper introduces the
   journey once, this rail is the ongoing wayfinding marker.
   =================================================================== */
.sp-vrail {
  position: fixed;
  left: clamp(16px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60; /* above horizontal stepper (z=50) and content */
  pointer-events: none;
}
.sp-vrail__steps {
  list-style: none;
  margin: 0;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  position: relative;
  pointer-events: auto;
}
/* Thin akane line connecting the four kanji */
.sp-vrail__steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--akane);
  opacity: 0.28;
  transform: translateX(-50%);
  z-index: 0;
}
.sp-vrail__step {
  position: relative;
  z-index: 1;
}
.sp-vrail__step button {
  display: block;
  background: var(--bone);
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-family: var(--jp);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--sumi);
  opacity: 0.3;
  transition: opacity 600ms ease, color 600ms ease, transform 250ms ease;
}
.sp-vrail__step button:hover {
  opacity: 0.7;
  color: var(--akane);
  transform: translateY(-1px);
}
.sp-vrail__step.is-active button {
  color: var(--akane);
  opacity: 1;
}
.sp-vrail__step.is-done button {
  color: var(--akane);
  opacity: 0.55;
}
@media (max-width: 768px) {
  .sp-vrail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-vrail__step button { transition: none; }
}

/* ===================================================================
   HORIZONTAL STEPPER — intro overview, sits below hero.
   =================================================================== */
.sp-stepper {
  position: sticky;
  top: 60px;
  z-index: 50;
  background: rgba(239, 231, 214, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block: 0.5px solid var(--rule-soft);
  padding: 0.625rem var(--gutter);
  margin-block: 1.5rem 0;
  transition: padding 400ms cubic-bezier(0.16, 1, 0.3, 1),
              top 400ms cubic-bezier(0.16, 1, 0.3, 1),
              background 400ms ease;
}
/* Collapsed pill — thin sticky bar once scrolled past hero. */
.sp-stepper.is-collapsed {
  top: 0;
  padding: 0.25rem var(--gutter);
  background: rgba(239, 231, 214, 0.96);
}
.sp-stepper.is-collapsed .sp-stepper__step button {
  grid-template-rows: auto;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  transition: padding 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-stepper.is-collapsed .sp-stepper__num { display: none; }
.sp-stepper.is-collapsed .sp-stepper__pop { display: none; }
.sp-stepper.is-collapsed .sp-stepper__k {
  font-size: 1.25rem;
  margin: 0;
  transition: font-size 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-stepper.is-collapsed .sp-stepper__label {
  margin: 0;
  font-size: 9px;
}
.sp-stepper.is-collapsed .sp-stepper__row {
  gap: 3rem;
}
.sp-stepper.is-collapsed .sp-stepper__step:not(:last-child)::after {
  width: 3rem;
}
.sp-stepper.is-collapsed .sp-stepper__step.is-active .sp-stepper__num::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .sp-stepper,
  .sp-stepper.is-collapsed,
  .sp-stepper__step button,
  .sp-stepper__k {
    transition: none !important;
  }
}
.sp-stepper__row {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  max-width: var(--content-max);
  position: relative;
}
/* Connector lines fill each gap between steps so the 4 read as one
   cohesive cluster. Steps stay centered, lines stitch them together.
   Default akane red; the segment behind the active step darkens. */
.sp-stepper__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 6rem;
  height: 1px;
  background: var(--akane);
  opacity: 0.55;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  transition: background 400ms ease, opacity 400ms ease;
}
.sp-stepper__step.is-active:not(:last-child)::after {
  background: var(--akane-deep);
  opacity: 1;
}
/* Each step — fades in from below with a 100ms cascade. */
.sp-stepper__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              transform .6s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
.sp-stepper.is-revealed .sp-stepper__step {
  opacity: 1;
  transform: none;
}
.sp-stepper.is-revealed .sp-stepper__step:nth-child(1) { transition-delay: 0ms; }
.sp-stepper.is-revealed .sp-stepper__step:nth-child(2) { transition-delay: 100ms; }
.sp-stepper.is-revealed .sp-stepper__step:nth-child(3) { transition-delay: 200ms; }
.sp-stepper.is-revealed .sp-stepper__step:nth-child(4) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .sp-stepper__step { opacity: 1; transform: none; transition: none; }
}

.sp-stepper__step button {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: 2px;
  background: var(--bone);
  border: none;
  cursor: pointer;
  padding: 4px 14px;
  color: var(--akane);
  transition: color 200ms ease;
}
.sp-stepper__step button:hover { color: var(--sumi); }
.sp-stepper__num {
  position: relative;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: inherit;
  opacity: 1;
  font-variant-numeric: lining-nums tabular-nums;
  transition: color 200ms ease;
}
.sp-stepper__k {
  font-family: var(--jp);
  font-size: 2rem;
  font-weight: 700;
  color: inherit;
  line-height: 1;
  margin-block: 2px;
  transition: transform 200ms ease, color 200ms ease;
}
.sp-stepper__step button:hover .sp-stepper__k {
  transform: translateY(-4px);
  /* color follows the parent button transition (akane → sumi) */
}
.sp-stepper__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: inherit;
  font-weight: 500;
  margin-top: 2px;
  transition: color 200ms ease;
}

/* Hover popover — romaji + micro-description appear below kanji */
.sp-stepper__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  box-shadow: 0 12px 28px -16px rgba(20,17,13,0.25);
}
.sp-stepper__step button:hover .sp-stepper__pop,
.sp-stepper__step button:focus-visible .sp-stepper__pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.sp-stepper__romaji {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--sumi);
  line-height: 1.2;
}
.sp-stepper__micro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--pencil);
  line-height: 1.4;
}

/* Active step — kanji + num + label all turn black; small red dot above
   the number remains as the active indicator. */
.sp-stepper__step.is-active button { color: var(--sumi); }
.sp-stepper__step.is-active .sp-stepper__k,
.sp-stepper__step.is-active .sp-stepper__num,
.sp-stepper__step.is-active .sp-stepper__label {
  color: var(--sumi);
}
.sp-stepper__step.is-active .sp-stepper__num::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--akane);
}
/* Completed step — softened akane (default-red is full strength) */
.sp-stepper__step.is-done button { color: var(--akane); opacity: 0.6; }
.sp-stepper__step.is-done .sp-stepper__k,
.sp-stepper__step.is-done .sp-stepper__num,
.sp-stepper__step.is-done .sp-stepper__label {
  color: var(--akane);
}

@media (max-width: 900px) {
  .sp-stepper { padding: 0.5rem var(--gutter); margin-block: 1rem 0; }
  .sp-stepper__row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 1.5rem;
  }
  .sp-stepper__row::-webkit-scrollbar { display: none; }
  .sp-stepper__pop { display: none; } /* no hover on touch */
}

/* ===================================================================
   OLD VERTICAL RAIL — replaced by horizontal stepper above
   =================================================================== */
.sp-rail { display: none !important; }
.sp-rail__placeholder_keep_below { /* keep below rules namespaced but unused */
  display: none;
}
.sp-rail__legacy_keep_unused {
  position: fixed;
  left: max(28px, calc((100vw - 1680px) / 2 + 24px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  gap: var(--s-12);
  padding: var(--s-16) 0;
  pointer-events: none;
}
.sp-rail__line {
  position: relative;
  width: 1px;
  background: var(--rule-soft);
  flex-shrink: 0;
  margin-top: 8px;
  margin-bottom: 8px;
}
.sp-rail__fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--akane);
  width: 1px;
  transition: height .3s ease;
}
.sp-rail__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-32);
  pointer-events: auto;
}
.sp-rail__step button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-family: inherit;
  text-align: left;
  opacity: 0.4;
  transition: opacity .35s ease, transform .35s ease;
}
.sp-rail__step.is-done button { opacity: 0.6; }
.sp-rail__step.is-active button {
  opacity: 1;
  transform: translateX(2px);
}
.sp-rail__step button:hover { opacity: 1; }
.sp-rail__k {
  font-family: var(--mincho);
  font-size: var(--t-19);
  color: var(--sumi);
  font-weight: 700;
  width: 22px;
  text-align: center;
  transition: color .25s ease;
}
.sp-rail__step.is-active .sp-rail__k { color: var(--akane); }
.sp-rail__step.is-done .sp-rail__k { color: var(--akane); }
.sp-rail__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .4s cubic-bezier(.2,.7,.2,1);
}
.sp-rail__step.is-active .sp-rail__label,
.sp-rail__step button:hover .sp-rail__label {
  max-width: 110px;
}
@media (max-width: 1100px) {
  .sp-rail { display: none; }
}

/* ===================================================================
   STEP COMPLETION CHIP — small floating signal when a step is done
   =================================================================== */
.sp-step-done {
  position: relative;
  margin: var(--s-32) auto 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  padding: 10px var(--s-16);
  background: var(--paper);
  border: 0.5px solid var(--akane);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--akane);
  animation: stepDoneFade .6s ease;
}
.sp-step-done .k {
  font-family: var(--mincho);
  font-size: var(--t-14);
  letter-spacing: 0;
  font-weight: 700;
}
.sp-step-done-wrap {
  text-align: center;
  margin-top: var(--s-32);
}
@keyframes stepDoneFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   FILE THUMBNAIL ROW (when refs are attached)
   =================================================================== */
.sp-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-12);
}
.sp-files__item {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
  padding: 6px 10px;
  background: var(--bone-soft);
  border: 0.5px solid var(--rule-soft);
}

/* ===================================================================
   RAIL CLEARANCE — pad page content so it never collides with the
   fixed left vertical rail (visible ≥768px). Reserve at least 80px
   of left margin so the rail (kanji ~50px wide at left ~26px) sits
   in its own gutter, then apply the larger symmetric padding on
   wider screens for editorial balance.
   =================================================================== */
@media (min-width: 768px) {
  .sp-hero,
  .sp-section,
  .sp-stepper {
    padding-left: max(var(--gutter), 90px);
  }
}
@media (min-width: 1100px) {
  .sp-hero,
  .sp-section {
    padding-left: max(var(--gutter), 160px);
    padding-right: max(var(--gutter), 160px);
  }
  .sp-stepper {
    padding-left: max(var(--gutter), 160px);
    padding-right: max(var(--gutter), 160px);
  }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-specify *,
  .page-specify *::before,
  .page-specify *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sp-base__media img,
  .sp-shead__giant {
    transform: none !important;
  }
}

/* ===================================================================
   PRINT (just in case)
   =================================================================== */
@media print {
  .sp-bar, .sp-rail, .sp-top { display: none !important; }
  body.page-specify { padding-bottom: 0; }
}

/* ===================================================================
   WOOTING-SPECIFIC COMPONENTS
   =================================================================== */

/* Continue button — unlocks the next step */
.wt-continue {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 6vh, 64px);
}
.wt-continue__btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--akane);
  border: 1px solid var(--akane);
  padding: 14px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  transition: background .25s ease, border-color .25s ease, transform .2s ease, gap .2s ease;
  font-variant-numeric: lining-nums tabular-nums;
}
.wt-continue__btn:hover {
  background: var(--akane-deep);
  border-color: var(--akane-deep);
  gap: 14px;
}
.wt-continue__btn span {
  display: inline-block;
  transition: transform .2s ease;
}
.wt-continue__btn:hover span { transform: translateX(2px); }

/* Step enter — fade up when a new step renders in */
.wt-step-enter {
  animation: wt-step-fade-up 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wt-step-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Wooting Advantage callout — between section header and switch picker */
.wt-advantage {
  max-width: var(--sp-content);
  margin: 0 auto clamp(40px, 6vh, 80px);
  padding: clamp(24px, 3vh, 40px) clamp(28px, 4vw, 48px);
  background: rgba(245, 239, 224, 0.65);
  border-left: 2px solid var(--akane);
  border-radius: 2px;
}
.wt-advantage__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: clamp(20px, 2.5vh, 32px);
  padding-bottom: clamp(16px, 2vh, 24px);
  border-bottom: 0.5px solid var(--rule-soft);
}
.wt-advantage__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--akane);
  font-weight: 500;
}
.wt-advantage__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  color: var(--sumi);
  margin: 0;
  line-height: 1.1;
}
.wt-advantage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px) clamp(20px, 3vw, 40px);
}
.wt-advantage__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wt-advantage__feat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  font-weight: 500;
}
.wt-advantage__col p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sumi-soft);
  margin: 0;
}
.wt-advantage__foot {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sumi-soft);
  margin: clamp(20px, 2.5vh, 32px) 0 0;
  padding-top: clamp(16px, 2vh, 24px);
  border-top: 0.5px solid var(--rule-soft);
}
.wt-advantage__foot strong {
  color: var(--akane);
  font-style: normal;
  font-weight: 500;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* Per-key sub-label on services */
.sp-svc__perkey {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 4px;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .wt-step-enter {
    animation: none !important;
  }
}

/* Switch row upcharge label — visible price impact for paid switches */
.sp-switch__upcharge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akane);
  margin-top: 8px;
  font-variant-numeric: lining-nums tabular-nums;
}
.sp-switch__upcharge strong {
  font-weight: 600;
  margin-right: 4px;
}
.sp-switch__upcharge span { color: var(--pencil); }
.sp-switch__upcharge--free { color: var(--pencil); letter-spacing: 0.16em; }

/* ===================================================================
   SEO CONTENT BLOCKS — FAQ, Comparison, Glossary
   These mirror the JSON-LD schema in <head>, give crawlers + AI engines
   actual quotable copy, and capture long-tail Hall Effect / Wooting search.
   =================================================================== */
.wt-faq,
.wt-compare,
.wt-glossary {
  max-width: var(--sp-content);
  margin: 0 auto;
  padding: clamp(56px, 8vh, 96px) var(--gutter);
  border-top: 0.5px solid var(--rule-soft);
}
.wt-faq__inner,
.wt-compare__inner,
.wt-glossary__inner {
  max-width: 880px;
  margin: 0 auto;
}
.wt-faq__eyebrow,
.wt-compare__eyebrow,
.wt-glossary__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--akane);
  margin: 0 0 14px;
}
.wt-faq__title,
.wt-compare__title,
.wt-glossary__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
  color: var(--sumi);
  max-width: 30ch;
}

/* FAQ — collapsible details */
.wt-faq__list {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid var(--rule-soft);
}
.wt-faq__item {
  border-bottom: 0.5px solid var(--rule-soft);
}
.wt-faq__q {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  color: var(--sumi);
  cursor: pointer;
  padding: 22px 36px 22px 0;
  list-style: none;
  position: relative;
  transition: color .2s ease;
}
.wt-faq__q::-webkit-details-marker { display: none; }
.wt-faq__q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 300;
  color: var(--akane);
  transition: transform .25s ease;
}
.wt-faq__item[open] .wt-faq__q::after {
  transform: translateY(-50%) rotate(45deg);
}
.wt-faq__q:hover { color: var(--akane); }
.wt-faq__a {
  padding: 0 0 22px 0;
}
.wt-faq__a p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--sumi-soft);
  margin: 0;
  max-width: 64ch;
}

/* Compare — three editorial cards */
.wt-compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
}
@media (min-width: 900px) {
  .wt-compare__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-24);
  }
}
.wt-compare__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background: var(--paper);
  border: 0.5px solid var(--rule-soft);
}
.wt-compare__card-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.25;
  margin: 0;
  color: var(--sumi);
}
.wt-compare__card-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--sumi-soft);
  margin: 0;
  flex: 1;
}
.wt-compare__cta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akane);
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color .2s ease;
}
.wt-compare__cta:hover { color: var(--akane-deep); }

/* Glossary — definition list */
.wt-glossary__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.wt-glossary__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 0.5px dotted var(--rule-soft);
}
@media (min-width: 720px) {
  .wt-glossary__row {
    grid-template-columns: 200px 1fr;
    gap: 28px;
    align-items: baseline;
  }
}
.wt-glossary__row:last-child { border-bottom: none; }
.wt-glossary__row dt {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: var(--akane);
  margin: 0;
}
.wt-glossary__row dd {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sumi-soft);
  margin: 0;
  max-width: 64ch;
}

/* Hero "New to Hall Effect? Read the Wooting guide" link.
   Lives inside .sp-hero__main (auto 1fr auto grid) and must be pinned
   to col 2 so it doesn't displace the cat from col 3. */
.sp-hero__guide-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0;
  grid-column: 2;
  grid-row: 2;
}
.sp-hero__guide-link a {
  color: var(--akane);
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 1px;
  transition: color .2s ease;
  margin-left: 6px;
}
.sp-hero__guide-link a:hover { color: var(--akane-deep); }
/* Pin the cat to col 3, spanning both rows so it stays vertically
   centered against the title + lede + guide-link stack. */
.sp-hero__emblem {
  grid-column: 3;
  grid-row: 1 / -1;
}
@media (max-width: 900px) {
  .sp-hero__guide-link { grid-column: 1; grid-row: auto; }
  .sp-hero__emblem    { grid-column: 1; grid-row: auto; }
}

/* =====================================================================
   MOBILE UX OVERHAUL — scoped overrides for phones / small tablets.
   All rules below live inside @media queries so desktop rendering is
   identical to pre-overhaul. Organized by Part to match the spec.
   ===================================================================== */

/* ----- PART 1a/b/d — Tap target enlargement (≤520px) ----- */
@media (max-width: 520px) {
  /* Colorway swatches — bigger hit area + more grid breathing room */
  .sp-case__swatch-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 10px;
  }
  .sp-case__swatch {
    width: 44px;
    height: 44px;
  }
  .sp-case__swatch--sm {
    width: 40px;
    height: 40px;
  }
  /* FULL SPEC ▼ expand toggle on chassis cards */
  .sp-base__expand {
    padding: 12px 16px;
    font-size: 11px;
  }
}

/* ----- PART 1b — Tone toggle dots: invisible 44px hit-area at ≤600px ----- */
@media (max-width: 600px) {
  .sp-base__tone {
    position: relative; /* anchors the hit-area pseudo */
  }
  .sp-base__tone::before {
    content: "";
    position: absolute;
    inset: -13px; /* 18px visible dot + 13px padding each side = 44px hit-area */
  }
  .sp-base__tones {
    gap: 18px; /* prevent overlapping hit-areas across adjacent tones */
  }
}

/* ----- PART 1c — Footer social icons (≤720px) ----- */
@media (max-width: 720px) {
  .sp-foot__social {
    gap: 12px;
  }
  .sp-foot__social a {
    width: 44px;
    height: 44px;
  }
}

/* ----- PART 2 — Stepper: drop sticky + signal horizontal scroll (≤900px).
   At desktop the original `position: sticky` at line 3782 stays in effect
   (no global override). At mobile we switch to `relative` which (a) drops
   the sticky behavior and (b) anchors the abs-positioned scroll-fade. ----- */
@media (max-width: 900px) {
  .sp-stepper {
    position: relative;
    top: auto;
  }
  .sp-stepper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--bone) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}

/* ----- PART 5 — Press-curve <details> collapse on mobile ----- */
@media (max-width: 999px) {
  .sp-curve-mobile-collapse summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--akane);
    user-select: none;
  }
  .sp-curve-mobile-collapse summary::-webkit-details-marker { display: none; }
  .sp-curve-mobile-collapse summary::marker { content: ""; }
}
@media (min-width: 1000px) {
  /* On desktop, neutralize the <details> wrapper so the chart always shows */
  .sp-curve-mobile-collapse summary { display: none; }
  .sp-curve-mobile-collapse { display: block !important; }
}

/* ----- PART 9 — Remove duplicate focus-visible. Standard rule lives
   in styles.css. Page-scoped page-specify variant in commission.css
   (lines ~53–59) is the only style-leakage source for this page;
   it's narrower than the global so styles.css wins by default cascade. */