/* =========================================================
   Holms Factory — BlackBird Fuzz
   Single-product page. Warm workbench / vintage-electronics look.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;

  /* TEMP: live spacing-scale slider multiplies every rule below tagged
     with calc(var(--space-scale) * ...). Remove --space-scale and the
     #hf-scale-tool block in index.html once a value is chosen, and bake
     the final numbers in directly. */
  --space-scale: 1;

  --paper: #f3ede1;
  --paper-2: #ece3d2;
  --paper-3: #e3d8c2;
  --ink: #221f1a;
  --ink-soft: #5b5348;
  --ink-faint: #8a8072;
  --walnut: #4a3928;
  --metal: #cbc9c1;
  --metal-line: #a7a49a;
  --ember: #b03a24;
  --ember-deep: #8a2c19;
  --line: rgba(34, 31, 26, 0.14);
  --line-strong: rgba(34, 31, 26, 0.28);
  --outline: #d9d2c3; /* opaque hairline for the header, reads on any backdrop */

  --display: "Jost", "Century Gothic", "Futura", var(--sans);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --nav-font: var(--display);

  --container: 1120px;
  --radius: 4px;
}

html {
  -webkit-text-size-adjust: 100%;
  /* keeps anchor-nav targets (#specs, #sound, ...) from landing under the
     sticky header, which has no reserved space in normal document flow —
     matches the header's own height so sections land flush beneath it */
  scroll-padding-top: 66px;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(
      1200px 600px at 78% -10%,
      rgba(255, 255, 255, 0.55),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 0% 100%,
      rgba(74, 57, 40, 0.08),
      transparent 55%
    );
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
}

h3 {
  font-size: 1.24rem;
  letter-spacing: 0;
}

p {
  margin: 0 0 1rem;
}

.hf-container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 72px);
}

/* Small caps eyebrow used above section titles */
.hf-eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember-deep);
  margin: 0 0 0.9rem;
}

.hf-section {
  padding: clamp(56px, 8vw, 110px) 0;
  border-top: 1px solid var(--line);
}

#faq {
  padding-top: calc(var(--space-scale) * 16px + clamp(24px, 4vw, 44px));
  padding-bottom: calc(var(--space-scale) * 46px);
  position: relative;
  border-top: 0;
}

/* same solid white seam bar marking the drop from the dark CTA band back
   into this light section, with a 1px hairline where the white bar meets
   the section's own paper background */
#faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 17px;
  background: linear-gradient(to bottom, #fff 0, #fff 16px, #b8b8b8 16px, #b8b8b8 17px);
}

#buy {
  padding-top: calc(var(--space-scale) * 52px);
  padding-bottom: calc(var(--space-scale) * 52px);
}

#video {
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
  border-top: 0;
}

/* section top-line that fades out at the left/right edges instead of
   running full-bleed */
.hf-section--fade-edges {
  position: relative;
  border-top: 0;
  padding-top: calc(var(--space-scale) * 34px);
  padding-bottom: calc(var(--space-scale) * 46px);
}

.hf-section--fade-edges::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

/* same breathing room above the heading as the "Vintage parts, honest
   materials" section gets from its card-alignment padding, but applied at
   the section level so "The germanium sound" and "Listen" move down
   together and stay aligned with each other */
.hf-section--sound {
  padding-top: calc(var(--space-scale) * 34px + clamp(24px, 4vw, 44px));
}

/* section line with a gap where the hero divider meets it */
#video::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 calc(50% - 70px),
    transparent calc(50% - 16px),
    transparent calc(50% + 16px),
    #000 calc(50% + 70px),
    #000 86%,
    transparent 100%
  );
  mask: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 calc(50% - 70px),
    transparent calc(50% - 16px),
    transparent calc(50% + 16px),
    #000 calc(50% + 70px),
    #000 86%,
    transparent 100%
  );
}

.hf-section-lead {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 1.08rem;
  margin-top: calc(var(--space-scale) * 2.6rem);
  margin-bottom: calc(var(--space-scale) * 2.6rem);
}

/* ============================ Dark section variant ============================
   Alternates the warm paper bands with a dark walnut band for contrast.
   Re-points the ink/line/accent tokens to their light-on-dark equivalents,
   so every nested component (already themed off these same variables)
   repaints itself without per-component overrides. */

.hf-section--dark {
  --ink: var(--paper);
  --ink-soft: rgba(243, 237, 225, 0.72);
  --ink-faint: rgba(243, 237, 225, 0.55);
  --line: rgba(243, 237, 225, 0.14);
  --line-strong: rgba(243, 237, 225, 0.28);
  --ember-deep: #e79a86;
  background: var(--walnut);
  color: var(--ink);
}

/* brighten the seam where a light section drops into a dark one —
   a solid white bar, edge to edge (no fade, no logo-notch gap) */
.hf-section--dark#video::before,
.hf-section--dark.hf-section--fade-edges::before {
  background: #fff;
  height: 16px;
  -webkit-mask: none;
  mask: none;
}

/* same treatment for the seam where #video drops back into the light
   "germanium sound" section right below it */
#video + .hf-section--fade-edges::before {
  background: #fff;
  height: 16px;
  -webkit-mask: none;
  mask: none;
}

/* the spec sheet reads as a light card stock laid on the workbench —
   reset its tokens back to the light palette even inside a dark section */
.hf-section--dark .hf-spec-card {
  --ink: #221f1a;
  --ink-soft: #5b5348;
  --ink-faint: #8a8072;
  --line: rgba(34, 31, 26, 0.14);
  --line-strong: rgba(34, 31, 26, 0.28);
  --ember-deep: #8a2c19;
  color: var(--ink);
}

/* ============================ Header ============================ */

.hf-header {
  --notch-w: 520px; /* span of the dip that routes around the logo */
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  overflow: visible; /* let the oversized logo spill past the bar */
}

/* one continuous bottom line, full width — the SVG arc (drawn above it)
   dips below it to route around the logo, so there's no seam to align */
.hf-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #b8b8b8;
}

/* the hairline curves down and around the logo */
.hf-header-notch {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  transform-origin: top center;
  width: var(--notch-w);
  height: auto;
  overflow: visible;
  color: #b8b8b8;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.55s ease, width 0.55s ease;
}

/* fill the pocket under the arc so content can't show through — matches the header bg */
.hf-header-notch path {
  fill: #fff;
}

.hf-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 96px; /* taller at rest — shrinks on scroll */
  transition: height 0.55s ease;
}

.hf-header.is-scrolled .hf-header-inner {
  height: 66px;
}

.hf-brand {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.hf-brand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px rgba(176, 58, 36, 0.22);
}

/* Image logo variant — centered horizontally, overhangs the bar DOWNWARD only
   (a sticky bar sits at viewport top, so any upward overhang gets clipped) */
.hf-brand--logo {
  gap: 0;
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  z-index: 3;
  line-height: 0;
  transition: top 0.55s ease, transform 0.55s ease;
}

.hf-brand--logo::before {
  display: none;
}

.hf-brand--logo img {
  display: block;
  height: 168px;
  width: auto;
  transform-origin: top center;
  transition: transform 0.55s ease, opacity 0.45s ease; /* transform, not height — avoids layout thrashing so the resize stays smooth */
}

/* hover swaps to the colour logo (3.png); it stays stacked *below* the walnut
   mask (z-index 1) at all times, so there's no z-index to snap back when the
   opacity fade runs on unhover — a brief window with the unmasked photo on
   top, before it had a chance to fade, was reading as a flash of black */
.hf-brand--logo .hf-logo-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}

.hf-brand--logo:hover .hf-logo-base {
  opacity: 0;
}

.hf-brand--logo:hover .hf-logo-hover {
  opacity: 1;
}

/* default logo treatment — a flat-colour cutout of the same artwork (1.png used
   purely as an alpha mask); swaps out for the full-colour photo once scrolled.
   Stays above the colour photo (z-index 1) at all times — solid walnut where
   the mask is fully opaque, the photo's colour showing through only at the
   mask's softer, anti-aliased edges — same combined look on hover as scrolled */
.hf-logo-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: top center;
  background-color: #4b3927;
  -webkit-mask-image: url("assets/images/1.png");
  mask-image: url("assets/images/1.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 1;
  transition: opacity 0.45s ease, transform 0.55s ease;
}

/* --- collapsed state: shrinks ~50% as the page scrolls, still overhanging --- */
.hf-header.is-scrolled {
  --notch-w: 200px; /* keeps the dip hugging the smaller logo like it does full size */
}

.hf-header.is-scrolled .hf-brand--logo img,
.hf-header.is-scrolled .hf-brand--logo .hf-logo-tint {
  transform: scale(0.5); /* 84px / 168px base — was animating height directly */
}

@media (max-width: 900px) {
  .hf-header {
    --notch-w: 420px;
  }
  .hf-brand--logo img {
    height: 132px;
  }
  .hf-header.is-scrolled .hf-brand--logo img,
  .hf-header.is-scrolled .hf-brand--logo .hf-logo-tint {
    transform: scale(0.6364); /* 84px / 132px base at this breakpoint */
  }
}

@media (max-width: 560px) {
  .hf-header {
    --notch-w: 340px;
    position: relative;
  }
  .hf-brand--logo img {
    height: 104px;
  }
  .hf-header.is-scrolled .hf-brand--logo img,
  .hf-header.is-scrolled .hf-brand--logo .hf-logo-tint {
    transform: scale(0.8077); /* 84px / 104px base at this breakpoint */
  }
}

.hf-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 36px;
  flex: 1;
  transition: gap 0.55s ease;
}

.hf-header.is-scrolled .hf-nav {
  gap: 30px;
}

.hf-nav--left {
  justify-content: flex-start;
}

.hf-nav--right {
  justify-content: flex-end;
}

.hf-nav a {
  position: relative;
  z-index: 2;
  text-decoration: none;
  font-family: var(--nav-font);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--walnut);
  transition: color 0.4s ease, border-color 0.4s ease, background 0.15s ease,
    font-size 0.55s ease;
}

.hf-nav a:not(.hf-nav-buy) {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.hf-nav a:hover {
  color: var(--ember-deep);
}

.hf-nav a:not(.hf-nav-buy)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ember-deep);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.hf-nav a:not(.hf-nav-buy):hover::after {
  transform: scaleX(1);
}

/* collapsed navbar — slightly smaller, same dark-on-white text */
.hf-header.is-scrolled .hf-nav a {
  color: var(--walnut);
  font-size: 1rem;
}

.hf-header.is-scrolled .hf-nav a:hover {
  color: var(--ember-deep);
}

.hf-header.is-scrolled .hf-nav-buy {
  font-size: 0.88rem !important;
  padding: 10px 18px;
}

.hf-header.is-scrolled .hf-nav-buy:hover {
  background: #c94a33;
  border-color: #c94a33;
}

.hf-nav-buy {
  font-family: var(--mono);
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff !important;
  background: var(--ember);
  border: 1px solid var(--ember);
  border-radius: var(--radius);
  padding: 13px 22px;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.15s ease,
    font-size 0.55s ease, padding 0.55s ease;
}

.hf-nav-buy:hover {
  background: #c94a33;
  border-color: #c94a33;
  color: #fff !important;
}

/* collapse to just the Buy button early, so the big centered logo has room */
@media (max-width: 1080px) {
  .hf-nav a:not(.hf-nav-buy) {
    display: none;
  }
}

/* mobile: drop the nav Buy button too — the hero already has its own */
@media (max-width: 640px) {
  .hf-nav-buy {
    display: none;
  }
}

/* ============================ Buttons ============================ */

.hf-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.12s ease, background 0.15s ease;
  text-decoration: none;
  display: inline-block;
}

.hf-btn:hover {
  background: var(--ember-deep);
  transform: translateY(-1px);
}

.hf-btn:active {
  transform: translateY(0);
}

.hf-btn-large {
  padding: 19px 40px;
  font-size: 0.95rem;
}

.hf-buy-form {
  margin: 0;
}

/* same ember/hover treatment as the "Ready to plug in?" CTA button */
.hf-hero-buy .hf-btn {
  background: var(--ember);
  color: #fff;
  font-weight: 600;
}

.hf-hero-buy .hf-btn:hover {
  background: #c94a33;
}

/* ============================ Hero ============================ */

.hf-hero {
  padding: 50px 0 20px;
}

.hf-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: stretch; /* viewer matches the text column height */
}

.hf-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* spread the copy to fill the stretched column */
}

.hf-hero h1 {
  font-size: clamp(2.9rem, 1.8rem + 4.6vw, 4.7rem);
  letter-spacing: -0.02em;
}

.hf-hero .hf-eyebrow {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  margin-bottom: 1.1rem;
}

.hf-hero-sub {
  font-size: 1.16rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: calc(var(--space-scale) * 1.5rem) 0 calc(var(--space-scale) * 2rem);
}

.hf-hero-buy {
  display: flex;
  align-items: center;
  justify-content: space-between; /* price pinned left, button pinned right — scales with the column instead of a fixed gap */
  gap: calc(var(--space-scale) * 24px); /* fallback spacing once it wraps on narrow screens */
  flex-wrap: wrap;
  margin-top: calc(var(--space-scale) * 0.5rem);
}

.hf-price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.hf-price-main {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
}

.hf-price-sub {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.hf-hero-note {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-deep);
  margin-top: calc(var(--space-scale) * 1.4rem);
  transform: translateY(10px); /* nudge down to sit level with ⏸ Pause */
}

@media (max-width: 640px) {
  .hf-hero-text > .hf-eyebrow,
  .hf-hero-text > h1 {
    text-align: center;
  }

  .hf-hero-text > .hf-hero-sub {
    max-width: none;
    text-align: left;
  }

  .hf-hero-buy {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hf-price {
    align-items: center;
  }
}

/* ============================ Mobile: center short headings ============================
   Below 640px every multi-column section has already collapsed to one
   column (see the 680/760/780/820/900px breakpoints above), so center
   each section's (short, 1-2 line) heading instead of leaving it flush
   left. Body copy — lead paragraphs, the dial list, spec table, FAQ
   answers, sample players — stays left-aligned; it's what reads best
   on a narrow column and matches every other paragraph on the page. */
@media (max-width: 640px) {
  #video .hf-video-body h2 {
    text-align: center;
  }

  .hf-quad-heading {
    text-align: center;
  }

  #sound .hf-split-col > h2 {
    text-align: center;
  }

  #specs .hf-collapse-heading h2,
  #specs .hf-spec-card > h2 {
    text-align: center;
  }

  #buy .hf-cta-inner > div:first-child h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #faq > .hf-container > h2 {
    text-align: center;
  }
}

/* animatable so the separator's start slides in sync with the collapse */
@property --sep-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* 3D model — right column of the hero */
.hf-stage {
  position: relative;
  width: 100%;
  min-height: 460px; /* the badge/hint sit on this box; it stretches to the copy */
  line-height: 0;
}

/* divider between the copy and the model — same fading-hairline treatment
   used beside "View it" / "The germanium sound", spanning the full box */
.hf-stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(32px, 5vw, 68px) / -2);
  width: 1px;
  background: var(--line-strong);
  /* --sep-cut is set on .hf-stage by JS: px erased from the top as you scroll */
  -webkit-mask: linear-gradient(
    180deg,
    transparent 0,
    transparent var(--sep-cut, 0px),
    #000 calc(var(--sep-cut, 0px) + 120px),
    #000 calc(100% - 44px),
    transparent 100%
  );
  mask: linear-gradient(
    180deg,
    transparent 0,
    transparent var(--sep-cut, 0px),
    #000 calc(var(--sep-cut, 0px) + 120px),
    #000 calc(100% - 44px),
    transparent 100%
  );
}

model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-40px); /* nudge the model up within its frame */
  --poster-color: transparent;
  background: transparent;
}

/* plain mono labels, pulled in toward the model */
.hf-stage-badge,
.hf-stage-hint {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-deep);
  pointer-events: none;
}

.hf-stage-badge {
  top: 2px; /* lines up with the hero eyebrow on the left */
  right: 0;
  line-height: normal; /* override the stage's line-height:0 so the glyphs sit like normal text, not glued to the box top */
}

.hf-stage-hint {
  top: 22px; /* sits just under the badge, same right edge */
  right: 0;
  padding-top: 10px;
  transition: opacity 0.4s ease;
}

.hf-stage.is-interacting .hf-stage-hint {
  opacity: 0;
}

.hf-stage-controls {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0; /* tucked into the corner, by the divider */
  padding: 0 0 6px 4px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hf-stage-controls .hf-stage-pause,
.hf-stage-controls .hf-stage-reset {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ember-deep);
  transition: opacity 0.3s ease, color 0.2s ease;
  /* the visible label is much smaller than a comfortable touch target;
     pad the hit area out to ~44px and claw the padding back with a
     matching negative margin so the visual size/position don't change */
  padding: 12px;
  margin: -12px;
}

.hf-stage-pause:hover,
.hf-stage-pause[aria-pressed="true"] {
  color: var(--ember);
}

.hf-stage-reset {
  opacity: 0;
  pointer-events: none;
}

.hf-stage-reset:hover {
  color: var(--ember);
}

.hf-stage.is-changed .hf-stage-reset {
  opacity: 1;
  pointer-events: auto;
}

.hf-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: transparent;
}

.hf-progress .bar {
  height: 100%;
  width: 0%;
  background: var(--ember);
  transition: width 0.25s ease;
}

.hf-progress.is-done {
  opacity: 0;
}

@media (max-width: 900px) {
  .hf-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* dissolve the text column so its children can be reordered as plain
     grid items, splitting the hero across the 3D model: heading first,
     model, then the rest of the copy */
  .hf-hero-text {
    display: contents;
  }

  .hf-hero-text > .hf-eyebrow {
    order: 1;
  }

  .hf-hero-text > h1 {
    order: 2;
    /* the heading's rendered glyph box (Jost, line-height 1.1) runs taller
       than the line-height alone suggests, so the 10-20px gap the stage
       used to rely on wasn't enough — it was letting the 3D model's box
       visually touch/overlap the bottom of the letters. Give the heading
       its own bottom margin instead of depending on the next element's
       top margin for clearance. */
    margin-bottom: clamp(18px, 4vw, 28px);
  }

  .hf-stage {
    order: 3;
    height: 46vh;
    min-height: 300px;
    max-height: 420px;
    margin: 0 0 clamp(10px, 3vw, 20px);
  }

  .hf-stage-badge,
  .hf-stage-hint {
    display: none;
  }

  /* wider gap so the two buttons' enlarged (padded) touch targets don't
     overlap each other */
  .hf-stage-controls {
    gap: 28px;
  }

  .hf-hero-text > .hf-hero-sub {
    order: 4;
  }

  .hf-hero-text > .hf-hero-buy {
    order: 5;
  }

  .hf-hero-text > .hf-hero-note {
    order: 6;
  }

  .hf-stage::before {
    display: none;
  }
}

/* ============================ Germanium / build features ============================ */

.hf-features {
  padding-top: calc(var(--space-scale) * 34px);
  padding-bottom: calc(var(--space-scale) * 46px);
}

.hf-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: calc(var(--space-scale) * clamp(32px, 4.5vw, 50px)) 0;
}

.hf-feature-row + .hf-feature-row {
  border-top: 1px solid var(--line);
}

.hf-feature-row:nth-child(even) .hf-feature-media {
  order: 2;
}

.hf-feature-media {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper-3);
  aspect-ratio: 4 / 3;
}

.hf-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hf-feature-body h3 {
  margin-bottom: calc(var(--space-scale) * 0.85rem);
}

.hf-feature-body p {
  color: var(--ink-soft);
  margin-bottom: 0;
}

.hf-feature-tag {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-deep);
  display: block;
  margin-bottom: calc(var(--space-scale) * 0.95rem);
}

@media (max-width: 760px) {
  .hf-feature-row,
  .hf-feature-row:nth-child(even) .hf-feature-media {
    grid-template-columns: 1fr;
    order: 0;
  }
}

/* "How it's made" — always-open block sitting in the left half of the
   build/specs row (previously a collapsed <details> disclosure) */
.hf-collapse-heading {
  padding-top: clamp(24px, 4vw, 44px);
}

.hf-collapse-heading h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem);
}

.hf-collapse-body {
  margin-top: calc(var(--space-scale) * 1.4rem);
}

.hf-collapse-body .hf-feature-row {
  grid-template-columns: 1fr;
}

.hf-collapse-body .hf-feature-row:first-child {
  border-top: 0;
  padding-top: calc(var(--space-scale) * 20px);
  padding-bottom: calc(var(--space-scale) * 20px);
}

.hf-collapse-body .hf-feature-row:nth-child(even) .hf-feature-media {
  order: 0;
}

/* ============================ Listen + Sound split ============================ */

.hf-split-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* grid items default to a content-based minimum width, so a long
   unbreakable run in a column (dial descriptions, etc.) can force the
   column past its track and overflow the container's padding — most
   visible once the mobile pass justified this text. Let it shrink to
   the track instead. */
.hf-split-col {
  min-width: 0;
}

/* vertical divider between Listen and The germanium sound, same
   fading-hairline treatment used beside the 3D model / video row.
   --sep-cut is set by JS: px erased from the top as the row scrolls
   past the top of the viewport, so its visible top stays pinned in
   place, matching the divider beside the 3D model */
.hf-split-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  background: var(--line-strong);
  /* fixed-length fade (not a %) so it reliably vanishes before the top/
     bottom edge even when the two columns are very different heights */
  -webkit-mask: linear-gradient(
    180deg,
    transparent 0,
    transparent var(--sep-cut, 0px),
    #000 calc(var(--sep-cut, 0px) + 260px),
    #000 calc(100% - 36px),
    transparent 100%
  );
  mask: linear-gradient(
    180deg,
    transparent 0,
    transparent var(--sep-cut, 0px),
    #000 calc(var(--sep-cut, 0px) + 260px),
    #000 calc(100% - 36px),
    transparent 100%
  );
}

/* stretch this divider up through the section's own top padding so it
   meets the fading hairline above the row instead of stopping at the
   headings — fully transparent through that whole stretched-up region
   (so it never reaches a visible edge near the hairline above), then
   ramps in right where the headings start */
.hf-split-row--sound {
  --sound-ext: calc(var(--space-scale) * 34px + clamp(24px, 4vw, 44px));
}

.hf-split-row--sound::before {
  top: calc(-1 * var(--sound-ext));
  /* below ~170px the divider's pinned position would sit under the header's
     logo notch once this row scrolls above the viewport top, so once
     --sep-cut is pinning it, floor it at that clearance instead of the
     tight static offset used next to the heading */
  -webkit-mask: linear-gradient(
    180deg,
    transparent 0,
    transparent calc(var(--sound-ext) + max(-15px, 146px + var(--top-cut, -9999px))),
    #000 calc(var(--sound-ext) + max(9px, 170px + var(--top-cut, -9999px))),
    #000 calc(100% - 36px),
    transparent 100%
  );
  mask: linear-gradient(
    180deg,
    transparent 0,
    transparent calc(var(--sound-ext) + max(-15px, 146px + var(--top-cut, -9999px))),
    #000 calc(var(--sound-ext) + max(9px, 170px + var(--top-cut, -9999px))),
    #000 calc(100% - 36px),
    transparent 100%
  );
}

/* same "stretch up through the section's own top padding, staying
   invisible near the seam above" treatment for the Build/Specs divider */
.hf-split-row--build {
  --sound-ext: calc(var(--space-scale) * 34px);
}

.hf-split-row--build::before {
  top: calc(-1 * var(--sound-ext));
  -webkit-mask: linear-gradient(
    180deg,
    transparent 0,
    transparent calc(var(--sound-ext) + max(30px, 146px + var(--top-cut, -9999px))),
    #000 calc(var(--sound-ext) + max(54px, 170px + var(--top-cut, -9999px))),
    #000 calc(100% - 36px),
    transparent 100%
  );
  mask: linear-gradient(
    180deg,
    transparent 0,
    transparent calc(var(--sound-ext) + max(30px, 146px + var(--top-cut, -9999px))),
    #000 calc(var(--sound-ext) + max(54px, 170px + var(--top-cut, -9999px))),
    #000 calc(100% - 36px),
    transparent 100%
  );
}

@media (max-width: 820px) {
  .hf-split-row {
    grid-template-columns: 1fr;
  }
  .hf-split-row::before {
    display: none;
  }
  .hf-section-lead {
    max-width: none;
  }
}

/* ============================ Controls ============================ */

.hf-controls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hf-dial-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hf-dial-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--space-scale) * 22px);
  padding: calc(var(--space-scale) * clamp(16px, 2.4vw, 24px)) 0;
  border-top: 1px solid var(--line);
}

.hf-dial-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.hf-dial-name {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 3px;
  color: var(--ember-deep);
  white-space: nowrap;
  min-width: 9ch;
}

.hf-dial-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.hf-dial-list strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 820px) {
  .hf-controls-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================ Watch & listen ============================ */

/* Real 2x2 grid: row 1 = text (col 2 only), row 2 = video (col 2).
   The quad block (col 1) spans both rows, so its height is simply the
   sum of the two row tracks — filling everything from the top of the
   text down to the bottom of the video, no stretch/aspect-ratio math
   needed since a row-spanning item just gets the spanned tracks' size. */
.hf-video-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 5vw, 64px);
  row-gap: calc(var(--space-scale) * 1.7rem);
}

.hf-video-body {
  grid-column: 2;
  grid-row: 1;
}

.hf-heading-caps {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.hf-video-side {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-scale) * 10px);
  min-height: 0;
}

.hf-quad-heading {
  margin: 0 0 calc(var(--space-scale) * 1.2rem);
}

.hf-quad-grid {
  display: flex;
  gap: calc(var(--space-scale) * 16px);
  flex: 1;
  min-height: 0;
}

/* each column sizes its own two cells, so the left column can stay
   top-tall/bottom-short while the right column runs the opposite way */
.hf-quad-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(var(--space-scale) * 16px);
  min-height: 0;
}

.hf-quad-col > .hf-quad-cell:first-child {
  flex: 1.35;
}

.hf-quad-col > .hf-quad-cell:last-child {
  flex: 1;
}

.hf-quad-col--reverse > .hf-quad-cell:first-child {
  flex: 1;
}

.hf-quad-col--reverse > .hf-quad-cell:last-child {
  flex: 1.35;
}

.hf-demo-video {
  grid-column: 2;
  grid-row: 2;
}

/* vertical divider spanning the whole grid (text row + media row), same
   fading-hairline treatment as the one beside the 3D model — top and
   bottom fade-gaps match since it now runs edge to edge. --sep-cut is
   set by JS: px erased from the top as the grid scrolls past the top
   of the viewport, so its visible top stays pinned in place */
.hf-video-grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  background: var(--line-strong);
  /* below ~170px the pinned position would sit under the header's logo
     notch once this grid scrolls above the viewport top, so floor it at
     that clearance instead of the tight static 12%-of-height offset */
  -webkit-mask: linear-gradient(
    180deg,
    transparent 0,
    transparent max(0px, 146px + var(--top-cut, -9999px)),
    #000 max(12%, 170px + var(--top-cut, -9999px)),
    #000 88%,
    transparent 100%
  );
  mask: linear-gradient(
    180deg,
    transparent 0,
    transparent max(0px, 146px + var(--top-cut, -9999px)),
    #000 max(12%, 170px + var(--top-cut, -9999px)),
    #000 88%,
    transparent 100%
  );
}

@media (max-width: 820px) {
  .hf-video-grid {
    grid-template-columns: 1fr;
  }
  .hf-video-body {
    grid-column: 1;
    grid-row: 1;
  }
  .hf-demo-video {
    grid-column: 1;
    grid-row: 2;
  }
  .hf-video-grid::before {
    display: none;
  }

  /* was hidden outright on mobile; now shown as its own row below the
     video (was the desktop's height-matched left column, spanning both
     grid rows — that trick doesn't apply once it's a single column) */
  .hf-video-side {
    display: block;
    grid-column: 1;
    grid-row: 3;
    margin-top: calc(var(--space-scale) * 1.7rem);
  }

  /* desktop sizes each photo by matching the video's height via
     flex-grow (1.35 vs 1) on a full-height column; on a phone there's no
     video height to match against, so lay the 4 photos out as a plain
     2x2 grid of square tiles instead */
  .hf-quad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space-scale) * 14px);
  }

  .hf-quad-col,
  .hf-quad-col--reverse {
    display: contents;
  }

  .hf-quad-cell {
    aspect-ratio: 1;
  }
}

.hf-quad-cell {
  position: relative;
  margin: 0;
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper-3);
}

.hf-quad-cell img {
  /* absolutely positioned so the photo's own intrinsic aspect ratio
     never contributes to the grid's sizing (it stays purely decorative,
     filling whatever box the grid tracks give the cell) — this is what
     keeps the video from being dragged taller by a tall portrait photo */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .hf-quad-cell:hover img,
  .hf-quad-cell:focus-within img {
    transform: scale(1.08);
  }
}

/* shows the full photo, uncropped and centered, instead of cover-cropping it */
.hf-quad-cell--contain img {
  object-fit: contain;
}

.hf-quad-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.hf-quad-link:focus-visible {
  outline: 2px solid var(--ember-deep);
  outline-offset: -2px;
}

/* ============================ Lightbox ============================ */

.hf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 6vw, 64px);
  background: rgba(20, 16, 10, 0.92);
  cursor: zoom-out;
}

.hf-lightbox[hidden] {
  display: none;
}

.hf-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.hf-lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 40px;
  height: 40px;
  border: 1px solid rgba(250, 246, 238, 0.35);
  border-radius: 50%;
  background: rgba(250, 246, 238, 0.08);
  color: #faf6ee;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.hf-lightbox-close:hover {
  background: rgba(250, 246, 238, 0.18);
}

.hf-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 1px solid rgba(250, 246, 238, 0.35);
  border-radius: 50%;
  background: rgba(250, 246, 238, 0.08);
  color: #faf6ee;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hf-lightbox-nav:hover {
  background: rgba(250, 246, 238, 0.18);
}

.hf-lightbox-prev {
  left: clamp(10px, 3vw, 28px);
}

.hf-lightbox-next {
  right: clamp(10px, 3vw, 28px);
}

@media (max-width: 640px) {
  .hf-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}

.hf-demo-video {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: #14110d;
  box-shadow: 0 30px 60px -34px rgba(43, 32, 20, 0.42);
}

.hf-video-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(20, 17, 13, 0.45);
  cursor: not-allowed;
}

.hf-video-lock-badge {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e79a86;
  border: 1px solid rgba(231, 154, 134, 0.5);
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(20, 17, 13, 0.6);
}

.hf-demo-video video,
.hf-demo-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  object-fit: cover;
  background: #14110d;
}

.hf-samples {
  display: grid;
  gap: calc(var(--space-scale) * 16px);
  max-width: 720px;
  margin-top: calc(var(--space-scale) * 32px);
}

.hf-sample {
  display: flex;
  align-items: center;
  gap: calc(var(--space-scale) * 18px);
  padding: calc(var(--space-scale) * 16px) calc(var(--space-scale) * 20px);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: linear-gradient(180deg, #faf6ee, #efe6d3);
}

.hf-sample.is-empty {
  opacity: 0.6;
}

.hf-sample-play {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, transform 0.1s ease;
}

.hf-sample-play:hover:not(:disabled) {
  background: var(--ember-deep);
}

.hf-sample-play:active:not(:disabled) {
  transform: scale(0.94);
}

.hf-sample-play:disabled {
  cursor: not-allowed;
}

/* play / pause glyphs drawn in CSS */
.hf-icon-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}

.hf-sample.is-playing .hf-icon-play {
  border: 0;
  width: 10px;
  height: 11px;
  margin-left: 0;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}

.hf-sample-body {
  flex: 1;
  min-width: 0;
}

.hf-sample-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  margin-bottom: calc(var(--space-scale) * 12px);
}

.hf-sample-title {
  font-size: 0.86rem;
  color: var(--ember-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-sample-time {
  color: var(--ink-faint);
  flex-shrink: 0;
}

.hf-sample-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(34, 31, 26, 0.14);
  overflow: hidden;
  cursor: pointer;
}

.hf-sample.is-empty .hf-sample-track {
  cursor: default;
}

.hf-sample-fill {
  height: 100%;
  width: 0%;
  background: var(--ember);
}

/* on narrow phones the title was truncating with an ellipsis (e.g.
   "Sample 03 — full…") because it shared a row with the fixed-width
   time label — stack them instead so the full title always shows */
@media (max-width: 480px) {
  .hf-sample-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hf-sample-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ============================ Spec sheet ============================ */

.hf-split-row--stretch {
  align-items: stretch;
}

.hf-split-row--stretch .hf-spec-card {
  height: 100%;
}

.hf-spec-card {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: linear-gradient(180deg, #faf6ee, #efe6d3);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 20px 50px -34px rgba(43, 32, 20, 0.45);
}

.hf-spec-card h2 {
  margin-bottom: calc(var(--space-scale) * 1.6rem);
}

.hf-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.hf-spec-table th,
.hf-spec-table td {
  text-align: left;
  padding: calc(var(--space-scale) * 17px) 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.hf-spec-table tr:first-child th,
.hf-spec-table tr:first-child td {
  border-top: 0;
}

.hf-spec-table td {
  color: var(--ink-soft);
}

.hf-spec-table th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember-deep);
  width: 38%;
  padding-right: calc(var(--space-scale) * 20px);
}

/* the 38%/62% label-value split leaves too little room for the value
   column on a phone — several rows wrap onto 3+ lines. Stack label above
   value instead of running them side by side. */
@media (max-width: 560px) {
  .hf-spec-table th,
  .hf-spec-table td {
    display: block;
    width: auto;
  }

  .hf-spec-table th {
    padding: calc(var(--space-scale) * 17px) 0 4px;
  }

  .hf-spec-table td {
    padding: 0 0 calc(var(--space-scale) * 17px);
    border-top: 0;
  }

  .hf-spec-table tr:first-child th {
    padding-top: 0;
  }
}

/* ============================ Buy CTA ============================ */

.hf-cta {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
  position: relative;
}

/* same solid white seam bar used between the other sections, here marking
   the drop from the walnut "Vintage parts" band into this near-black one */
.hf-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: #fff;
}

.hf-cta .hf-eyebrow {
  color: #e79a86;
}

.hf-cta h2 {
  max-width: 20ch;
}

.hf-cta-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.hf-cta p {
  color: rgba(243, 237, 225, 0.72);
  max-width: none;
  margin-top: calc(var(--space-scale) * 1rem);
}

.hf-cta-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--space-scale) * 0.9rem);
  text-align: right;
}

.hf-cta-buy .hf-price-main {
  font-size: 2.6rem;
}

.hf-cta-buy .hf-price-sub {
  color: rgba(243, 237, 225, 0.6);
}

.hf-cta .hf-btn {
  background: var(--ember);
  color: #fff;
  font-weight: 600;
}

.hf-cta .hf-btn:hover {
  background: #c94a33;
}

.hf-cta-fine {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(243, 237, 225, 0.55);
  white-space: nowrap;
}

@media (max-width: 780px) {
  .hf-cta-inner {
    grid-template-columns: 1fr;
  }
  .hf-cta-buy {
    text-align: left;
  }
}

/* centers the price/buy block once the CTA copy above it is also centered
   (see the mobile heading-centering pass) — placed after the base rule
   above so it actually wins the cascade instead of being silently
   shadowed by it */
@media (max-width: 640px) {
  .hf-cta-buy {
    align-items: center;
    text-align: center;
  }
}

/* ============================ FAQ ============================ */

#faq h2 {
  margin-bottom: calc(var(--space-scale) * clamp(1.8rem, 1.2rem + 2vw, 2.6rem));
}

.hf-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-scale) * clamp(32px, 5vw, 60px))
    calc(var(--space-scale) * clamp(28px, 5vw, 64px));
}

.hf-faq-item h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  margin-bottom: calc(var(--space-scale) * 0.6rem);
}

.hf-faq-item p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: 0;
}

@media (max-width: 680px) {
  .hf-faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================ Footer ============================ */

.hf-footer {
  position: relative;
  border-top: 0;
  padding: calc(var(--space-scale) * 20px) 0;
  /* iOS Safari floats its tab/URL bar over the bottom of the page, so
     without this the last row of footer text sits underneath it */
  padding-bottom: calc(calc(var(--space-scale) * 20px) + env(safe-area-inset-bottom, 0px));
  background: var(--paper-2);
}

/* solid hairline, edge to edge — same treatment as the seam above #faq */
.hf-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #b8b8b8;
}

.hf-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--space-scale) * 28px);
  flex-wrap: wrap;
}

.hf-footer .hf-brand {
  margin-bottom: 0.4rem;
}

.hf-footer-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--space-scale) * 18px);
}

.hf-footer .hf-footer-brand p {
  margin: 0;
  color: var(--ink-soft);
}

.hf-footer-logo {
  display: inline-block;
  flex-shrink: 0;
}

.hf-footer-logo img {
  display: block;
  height: 64px;
  width: auto;
}

.hf-footer p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-faint);
}

.hf-footer-meta > p:not(.hf-footer-links) {
  color: var(--ink-soft);
}

.hf-footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--space-scale) * 18px);
}

.hf-footer-links {
  display: flex;
  gap: calc(var(--space-scale) * 18px);
}

.hf-footer-links a {
  color: var(--ink-soft);
  text-decoration: underline;
}

.hf-footer-links a + a {
  position: relative;
}

.hf-footer-links a + a::before {
  content: "|";
  position: absolute;
  right: calc(100% + calc(var(--space-scale) * 9px));
  color: var(--ink-faint);
  text-decoration: none;
}

.hf-footer-links a:hover {
  color: var(--ink);
}

/* ============================ Checkout ============================ */

.hf-checkout-body {
  background: #fff;
}

.hf-checkout-shell {
  min-height: 100vh;
  display: grid;
  grid-template-areas: "form summary";
  grid-template-columns: 1.15fr 1fr;
}

.hf-checkout-col--form {
  background: #fff;
  grid-area: form;
  display: flex;
  justify-content: flex-end;
}

.hf-checkout-col--summary {
  background: #f8f4ec;
  border-left: 1px solid var(--line);
  grid-area: summary;
  display: flex;
  justify-content: flex-start;
}

.hf-checkout-col-inner {
  width: 100%;
  max-width: 600px;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
}

.hf-checkout-col--summary .hf-checkout-col-inner {
  max-width: 420px;
  position: sticky;
  top: 0;
}

.hf-checkout-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: clamp(28px, 5vw, 48px);
}

.hf-checkout-logo img {
  height: 28px;
  width: auto;
}

.hf-checkout-heading {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.hf-checkout-heading:not(:first-child) {
  margin-top: 1.8rem;
}

.hf-field {
  margin-bottom: 1rem;
}

.hf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hf-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.hf-field input,
.hf-field select {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.hf-field input:focus,
.hf-field select:focus {
  outline: 2px solid var(--ember);
  outline-offset: 1px;
}

/* ---- floating-label fields: bigger boxes, label rides inside the field ---- */

.hf-field--float {
  position: relative;
}

.hf-field--float input {
  height: 46px;
  padding: 16px 14px 4px;
  font-size: 0.92rem;
}

.hf-field--float label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-faint);
  pointer-events: none;
  transition: top 0.12s ease, font-size 0.12s ease, color 0.12s ease;
}

.hf-field--float input:focus ~ label,
.hf-field--float input:not(:placeholder-shown) ~ label {
  top: 9px;
  transform: none;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* selects always show a value, so the label sits permanently in the
   "floated" position rather than animating like the text inputs above */
.hf-field--select {
  padding-top: 0;
}

.hf-field--select label {
  position: absolute;
  left: 15px;
  top: 6px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0;
  pointer-events: none;
}

.hf-field--select select {
  height: 46px;
  padding: 18px 14px 4px;
  font-size: 0.92rem;
}

.hf-checkout-payment-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hf-checkout-payment-note svg {
  flex: none;
  margin-top: 2px;
  color: var(--ink-faint);
}

.hf-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 1.4rem 0;
  cursor: pointer;
}

.hf-checkbox-field input {
  margin-top: 3px;
}

.hf-checkout-submit {
  width: 100%;
  text-align: center;
  border-radius: 10px;
}

.hf-checkout-back {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ---- order summary column ---- */

.hf-checkout-product {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.hf-checkout-thumb {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
}

.hf-checkout-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hf-checkout-qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hf-checkout-product-info {
  flex: 1;
  min-width: 0;
}

.hf-checkout-product-name {
  font-weight: 600;
  margin: 0 0 2px;
}

.hf-checkout-product-sub {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.hf-checkout-product-price {
  font-family: var(--mono);
  font-size: 0.95rem;
}

.hf-checkout-totals {
  padding-top: 6px;
}

.hf-checkout-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.95rem;
}

.hf-checkout-row span:last-child {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.hf-checkout-row:first-child {
  border-top: 0;
}

.hf-checkout-total {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

.hf-checkout-secure {
  margin-top: 1.6rem;
  font-size: 0.84rem;
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .hf-checkout-shell {
    grid-template-areas: "summary" "form";
    grid-template-columns: 1fr;
  }

  .hf-checkout-col--form,
  .hf-checkout-col--summary {
    justify-content: center;
  }

  .hf-checkout-col--summary {
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .hf-checkout-col--summary .hf-checkout-col-inner {
    position: static;
  }
}

@media (max-width: 560px) {
  .hf-field-row {
    grid-template-columns: 1fr;
  }
}

/* ============================ Utility ============================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}