/* NO root scroll-snap. `html { scroll-snap-type: y proximity }` was removed 2026-08-15
   (Mark: "on chrome theres a massive scrolling below the footer... looks perfect on safari").
   WHY IT BROKE: `scroll-snap-align: start` is a ONE-VALUE shorthand — it sets the block axis
   as well as the inline one. Every snap target in this file belongs to a horizontal carousel,
   but the root being a y-snap container made all of them VERTICAL snap targets for the whole
   page too. `.sh-engcar__frame` is the worst case: `.sh-engcar__stack` declares no
   scroll-snap-type of its own, so those full-width frames had NO container except the root's
   y-axis. Chrome then extends the document's scroll range far enough for each frame to reach
   the top of the viewport — that is the empty scroll after the footer. WebKit does not extend
   the scrollport this way, which is why Safari looked correct.
   There were never any intended vertical snap targets, so nothing is lost. The four horizontal
   carousels declare their own `scroll-snap-type: x mandatory` and are untouched.
   ⚠️ Do not reintroduce a root scroll-snap-type without making every scroll-snap-align
   two-value (e.g. `none start`) so it cannot bind to the block axis. */

/* Snappalm Shopify — Home page styles */

/* ── HERO ─────────────────────────────────────────────── */
.sh-home-hero {
  width: 100%;
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 24px var(--sh-pad-side);
}

.sh-home-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.sh-home-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sh-home-hero__title {
  font-size: clamp(2.1rem, 3.8vw + 0.3rem, 3.9rem);
  margin: 4px 0 0;
}

.sh-home-hero__em {
  color: var(--sp-tetsukon);
}

.sh-home-hero__cta {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 4px;
}

.sh-home-hero__figure {
  margin: 0;
  background: transparent;
  overflow: hidden;
  position: relative;
}

.sh-home-hero__figure img {
  width: 100%;
  aspect-ratio: 16/11;
  object-fit: contain;
}

.sh-home-hero__figure figcaption {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 20px;
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
  border-top: 1px solid var(--sp-tetsukon-06);
}

.sh-home-hero__cap-sep {
  opacity: 0.4;
}

/* ── COLLECTION ──────────────────────────────────────── */
.sh-shop {
  width: 100%;
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 48px var(--sh-pad-side);
}

.sh-shop__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}

.sh-shop__head .hex-cluster,
.sh-materials__head .hex-cluster,
.sh-reviews__head .hex-cluster,
.sh-origin__body .hex-cluster {
  margin-bottom: 4px;
}

.sh-shop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}

.sh-product-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.25s;
}

.sh-product-card:hover {
  transform: translateY(-3px);
}

.sh-product-card__img {
  background: var(--sp-kinari);
  border-radius: var(--sh-radius);
  overflow: hidden;
  aspect-ratio: 5/4;
}

.sh-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-product-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-tetsukon-06);
}

.sh-product-card__title {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-top: 10px;
}

.sh-product-card__tag {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--sp-fg-muted);
  margin-top: 4px;
}

.sh-product-card__price {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.035em;
  line-height: 1;
  /* offset to align baseline with .sh-product-card__title (below the eyebrow) */
  margin-top: calc(11px * 1.4 + 10px);
  /* eyebrow line-height ~1.4 at 11px + title margin-top */
}

.sh-product-card__spec {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
}

/* ── ORIGIN STORY ──────────────────────────────────── */
.sh-origin {
  background: var(--sp-kinari);
  padding: 56px var(--sh-pad-side);
}

.sh-origin__grid {
  max-width: var(--sh-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.sh-origin__img {
  border-radius: var(--sh-radius);
  overflow: hidden;
}

.sh-origin__img img {
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
}

.sh-origin__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sh-origin__body .sh-h2 {
  margin-bottom: 4px;
}



/* ── MATERIALS ─────────────────────────────────────── */
.sh-materials {
  width: 100%;
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 56px var(--sh-pad-side);
}

.sh-materials__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 44px;
}

.sh-materials__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--sp-tetsukon-06);
}

.sh-matfact {
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--sp-tetsukon-06);
  position: relative;
}

.sh-matfact__mark {
  margin-bottom: 18px;
}

.sh-matfact:last-child {
  border-right: none;
}

.sh-matfact__label {
  font-family: var(--sp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
  margin-bottom: 12px;
}

.sh-matfact__value {
  font-family: var(--sp-font-mono);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--sp-fg);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.sh-matfact__cap {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sp-fg-muted);
  max-width: 22ch;
}

/* ── REVIEWS ──────────────────────────────────────── */
.sh-reviews {
  background: var(--sp-tetsukon);
  color: var(--sp-fg-on-dark);
  padding: 56px var(--sh-pad-side);
}

.sh-reviews>* {
  max-width: var(--sh-max);
  margin-left: auto;
  margin-right: auto;
}

.sh-reviews__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}

.sh-reviews__head .sh-eyebrow {
  color: rgba(244, 240, 232, 0.55);
}

.sh-reviews__head .sh-h2 {
  color: var(--sp-fg-on-dark);
}

.sh-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.5vw, 40px);
}

.sh-review {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sh-review__stars {
  display: flex;
  gap: 2px;
  color: var(--sp-asagi);
  font-size: 12px;
  letter-spacing: 2px;
}

.sh-review__q {
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(244, 240, 232, 0.92);
  margin: 0;
  text-wrap: pretty;
  max-width: 36ch;
}

.sh-review__q::before {
  content: "“";
  margin-right: 1px;
}

.sh-review__q::after {
  content: "”";
}

.sh-review__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sh-review__name {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--sp-fg-on-dark);
}

.sh-review__meta {
  font-family: var(--sp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.55);
}

.sh-reviews__more {
  margin-top: 40px;
  color: var(--sp-fg-on-dark);
  border-color: rgba(244, 240, 232, 0.3);
}

.sh-reviews__more:hover {
  border-color: var(--sp-fg-on-dark);
}

/* ── SHIPPING STRIP ──────────────────────────────── */
.sh-shipstrip {
  padding: clamp(64px, 9vw, 128px) var(--sh-pad-side);
}

.sh-shipstrip__inner {
  max-width: var(--sh-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--sp-tetsukon-06);
  border-bottom: 1px solid var(--sp-tetsukon-06);
}

.sh-shipfact {
  padding: 40px 32px 40px 0;
  border-right: 1px solid var(--sp-tetsukon-06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sh-shipfact:last-child {
  border-right: none;
  padding-right: 0;
}

.sh-shipfact__title {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.sh-shipfact__note {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sp-fg-muted);
  max-width: 32ch;
}

/* ═════════════════════════════════════════════════════════════
   MARKETING-STYLED V2 · sections + animations
   ═════════════════════════════════════════════════════════════ */

/* ── Reveal utility (no-op visible state) ───────────────────── */
.sh-reveal {
  /* kept for potential future use; sections render visible */
}

/* ── 1 · CENTERED MARKETING HERO ───────────────────────────── */
.sh-mhero {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) var(--sh-pad-side) clamp(56px, 7vw, 96px);
  text-align: center;
}

.sh-mhero__eyebrow {
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
  margin-bottom: 20px;
}

.sh-mhero__title {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--sp-fg-on-dark);
  margin: 0 auto;
  max-width: 14ch;
  text-wrap: balance;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

.sh-mhero__word {
  display: inline-block;
}

.sh-mhero__em {
  color: var(--sp-tetsukon);
}

.sh-mhero__lede {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: clamp(0.875rem, 0.6vw + 0.55rem, 1rem);
  line-height: 1.55;
  color: var(--sp-fg-muted);
  max-width: 34ch;
  margin: 24px auto 0;
  text-wrap: pretty;
}

.sh-mhero__cta {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}

/* Hero Shop CTA (next to the Founders 100 pill) uses the same translucent
   deep-Asagi treatment as the video chip. */
.sh-mhero__cta .sh-btn--dark {
  background: rgba(46, 106, 120, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 242, 236, 0.14);
  color: var(--sp-fg-on-dark);
  transition: background 0.22s var(--sp-ease-glide), transform 0.22s var(--sp-ease-snap);
}

.sh-mhero__cta .sh-btn--dark:hover {
  background: rgba(46, 106, 120, 0.92);
  transform: translateY(-2px);
}

.sh-mhero__figure {
  margin: clamp(56px, 8vw, 112px) auto 0;
  max-width: 1100px;
  position: relative;
}

.sh-mhero__figure>img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--sh-radius);
  display: block;
}

/* ── Hero · text overlay variant ─────────────────────────────── */
.sh-mhero--overlay {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--sp-tetsukon);
}

.sh-mhero--overlay .sh-mhero__figure {
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
  height: clamp(840px, 98vh, 980px);
  position: relative;
  overflow: hidden;
  background: var(--sp-tetsukon-06);
}

@media (max-width: 860px) {
  .sh-mhero--overlay .sh-mhero__figure {
    height: calc(100svh - 110px);
    min-height: 500px;
  }
}

/* Desktop laptops/monitors — fires reliably regardless of viewport width:
   • hover: hover (mouse) — iPads report hover:none
   • OR min-width 1500 — wider than any iPad
   Image is enlarged with transform:scale, anchored toward the bottom so
   the laptop body fills more of the frame. */
@media (hover: hover) and (min-width: 1024px),
(min-width: 1500px) {
  .sh-mhero--overlay .sh-mhero__figure {
    height: clamp(780px, 89vh, 1040px);
    background: transparent;
  }

  .sh-mhero--overlay .sh-mhero__figure>img {
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    position: relative;
    object-position: center 100%;
    transform: scale(1.23);
    transform-origin: center bottom;
  }
}

/* iPad / tablet (touch device under desktop threshold) — keep tall hero + low focal */
@media (min-width: 861px) and (max-width: 1499px) {
  .sh-mhero--overlay .sh-mhero__figure>img {
    object-position: center center;
  }

  .sh-mhero--overlay .sh-mhero__video {
    object-position: center center;
  }
}

.sh-mhero--overlay .sh-mhero__figure>img {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
  border-radius: 0;
  filter: brightness(0.96);
  object-position: center center;
  object-fit: cover;
  transform: scale(1.32);
  transform-origin: center center;
  /* The still sits ON TOP of the always-visible video and fades out to reveal
     it (cross-fade driven by the image, so the video element is never hidden —
     hidden/opacity:0 video won't autoplay on mobile). */
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 500ms ease;
}

.sh-mhero--overlay .sh-mhero__figure.is-video>img {
  opacity: 0;
}

/* Breathing hero video — full-opacity base layer beneath the still image, so
   mobile WebKit treats it as visible and honours the native autoplay attribute. */
.sh-mhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.96);
  z-index: 0;
  pointer-events: none;
}

/* ── Desktop & tablet: full-bleed video banner ───────────────────
   Spans the viewport edge-to-edge and locks to the video's own ratio at every
   width (like the Peak Design hero) — the height tracks the width so the clip
   never distorts or crops awkwardly. The banner's aspect-ratio equals the
   video's *content* ratio (1509:1080, i.e. minus the baked-in side bars), so
   object-fit:cover clips those bars off precisely with no black edges.
   Mobile keeps the existing tall, cropped hero. */
@media (min-width: 861px) {
  .sh-mhero--overlay .sh-mhero__figure {
    width: 100%;
    max-width: none;
    margin: 0;
    height: auto;
    aspect-ratio: 1509 / 1080;
    /* Keep the ratio on small/medium screens, but cap the height on big
       screens so it doesn't become a giant block. When capped, the box turns
       into a wide banner strip and the fit logic re-applies just enough zoom
       to clip the side bars (center crop top/bottom). */
    max-height: clamp(760px, 92vh, 980px);
    overflow: hidden;
  }

  .sh-mhero--overlay .sh-mhero__figure>img,
  .sh-mhero--overlay .sh-mhero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.32);
    transform-origin: center center;
    object-fit: cover;
    object-position: center;
  }
}

.sh-mhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(27, 42, 52, 0.68) 0%,
      rgba(27, 42, 52, 0.30) 40%,
      rgba(27, 42, 52, 0.18) 75%,
      rgba(27, 42, 52, 0.32) 100%);
  pointer-events: none;
}

.sh-mhero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(28px, 4vw, 64px) clamp(28px, 5vw, 80px) clamp(56px, 9vw, 144px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  color: var(--sp-fg-on-dark);
}

.sh-mhero__note {
  margin: -4px 0 2px;
  z-index: 4;
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: rgba(244, 240, 232, 0.6);
  pointer-events: none;
}

/* ── Lightbox modal ─────────────────────────────────────────── */
.sh-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(13, 20, 24, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: sh-modal-fade 0.25s ease;
}

@keyframes sh-modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.sh-modal__card {
  position: relative;
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sp-bg);
  border: 1px solid var(--sp-rule);
  border-radius: var(--sh-radius);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 80px rgba(13, 20, 24, 0.35);
  animation: sh-modal-rise 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes sh-modal-rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.sh-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--sp-kinari);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.sh-modal__close:hover {
  background: var(--sp-tetsukon-06);
}

.sh-modal__close svg {
  width: 15px;
  height: 15px;
  stroke: var(--sp-fg-muted);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
}

.sh-modal__eyebrow {
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-asagi);
  margin-bottom: 8px;
}

.sh-modal__title {
  font-family: var(--sp-font-serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--sp-tetsukon);
  margin: 0 0 16px;
}

.sh-modal__body {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sp-fg-muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* offset the scrollbar from the card edge a touch */
  margin-right: -8px;
  padding-right: 8px;
}

.sh-modal__h {
  font-family: var(--sp-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-asagi);
  margin: 14px 0 -4px;
}

.sh-modal__h:first-child {
  margin-top: 0;
}

.sh-modal__lead {
  margin: 4px 0 -4px;
  color: var(--sp-fg);
  font-weight: 400;
}

.sh-modal__steps {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-modal__steps li {
  padding-left: 4px;
}

.sh-modal__steps li::marker {
  color: var(--sp-asagi);
  font-family: var(--sp-font-mono);
  font-size: 12px;
}

.sh-mhero--overlay .sh-mhero__title {
  margin: 0;
  max-width: 22ch;
  text-align: center;
  color: var(--sp-fg-on-dark);
  text-shadow: 0 1px 24px rgba(27, 42, 52, 0.35);
  font-size: clamp(1.5rem, 2.4vw + 0.6rem, 2.875rem);
  line-height: 1.04;
}

.sh-mhero__logo {
  display: block;
  width: 345px;
  max-width: 80%;
  height: auto;
  margin: 8px auto 0;
}

.sh-mhero--overlay .sh-mhero__lede {
  margin: 0;
  max-width: 48ch;
  text-align: center;
  color: rgba(244, 240, 232, 0.88);
  text-shadow: 0 1px 16px rgba(27, 42, 52, 0.45);
}

.sh-mhero--overlay .sh-mhero__cta {
  margin-top: 36px;
  justify-content: center;
}

/* Founders 100 promo pill — sits beside the Shop button. Subtle translucent
   chip with the brand asagi accent + a soft pulse, so it reads as special
   without competing with the headline. */
.sh-mhero__founders {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(244, 240, 232, 0.24);
  background: rgba(244, 240, 232, 0.09);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.22s var(--sp-ease-glide), background 0.22s var(--sp-ease-glide), transform 0.22s var(--sp-ease-snap);
}

.sh-mhero__founders:hover {
  border-color: rgba(244, 240, 232, 0.45);
  background: rgba(244, 240, 232, 0.15);
  transform: translateY(-2px);
}

@keyframes sh-text-glow {
  0% { text-shadow: 0 0 4px rgba(78, 155, 166, 0); }
  50% { text-shadow: 0 0 12px rgba(78, 155, 166, 0.8), 0 0 6px rgba(78, 155, 166, 0.5); }
  100% { text-shadow: 0 0 4px rgba(78, 155, 166, 0); }
}

.sh-mhero__founders-key {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sp-bg);
  animation: sh-text-glow 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sh-mhero__founders-key {
    animation: none;
  }
}

.sh-mhero__founders-div {
  width: 1px;
  height: 11px;
  background: rgba(244, 240, 232, 0.3);
}

.sh-mhero__founders-sub {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.62);
}



.sh-mhero--overlay figcaption {
  position: absolute;
  bottom: 16px;
  right: clamp(20px, 4vw, 48px);
  margin: 0;
  color: rgba(244, 240, 232, 0.7);
  font-size: 10px;
}

.sh-mhero--overlay figcaption .sh-mhero__sep {
  color: rgba(244, 240, 232, 0.4);
}

@media (max-width: 720px) {
  .sh-br-mobile {
    display: inline;
  }

  .sh-mhero__lede-line {
    white-space: nowrap;
  }

  .sh-mhero--overlay .sh-mhero__lede {
    font-size: clamp(14px, 4.2vw, 17px);
  }

  .sh-mhero--overlay .sh-mhero__figure {
    /* Real nav height is 70px (not the 50 this comment used to assume — measured
       live, iPhone-width), + trust strip 58px = 128, +4px safety margin so the
       trust strip's bottom edge clears the fold with room, not flush against it
       (was overflowing ~20px past 100svh before this fix, Mark 2026-07-15). */
    height: calc(100svh - 132px);
    max-width: none;
    background: transparent;
  }

  .sh-mhero--overlay .sh-mhero__figure>img {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.12);
    transform-origin: center center;
  }

  .sh-mhero--overlay .sh-mhero__video {
    object-position: center center;
  }

  .sh-mhero--overlay .sh-mhero__overlay {
    max-width: 100%;
  }

  .sh-mhero--overlay figcaption {
    display: none;
  }

  /* Mobile: headline sits in the band between the nav and the top of the
     laptop; CTA group pinned to the bottom using the standard bottom inset. */
  .sh-mhero--overlay .sh-mhero__overlay {
    justify-content: flex-start;
    padding-top: 48px;
  }
  /* Safari-specific adjustment so it doesn't sit too high */
  @supports (-webkit-touch-callout: none) {
    .sh-mhero--overlay .sh-mhero__overlay {
      padding-top: 60px;
    }
  }

  .sh-mhero--overlay .sh-mhero__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sh-bottom-inset);
    margin: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
}

.sh-mhero__figure figcaption {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: center;
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
}

.sh-mhero__sep {
  color: var(--sp-tetsukon-30);
}

/* ─── TRUST STRIP — three stationary guarantee chips under the hero ─── */
.sh-truststrip {
  /* Background is what the boxes were filled with (shironeri); the bottom
     rule separates from the section below. */
  background: var(--sp-bg);
  border-bottom: 1px solid var(--sp-rule);
  padding: 14px var(--sh-pad-side);
}

.sh-truststrip__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--sh-max);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px 16px;
}

.sh-truststrip__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.sh-truststrip__mark {
  display: inline-block;
  width: 11px;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  flex-shrink: 0;
}

.sh-truststrip__label {
  font-family: var(--sp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg);
}

@media (max-width: 860px) {
  .sh-truststrip {
    padding: 12px var(--sh-pad-side);
  }

  .sh-truststrip__list {
    gap: 6px;
  }

  .sh-truststrip__item {
    gap: 6px;
  }

  .sh-truststrip__label {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .sh-truststrip__item:nth-child(1) { order: 1; }
  .sh-truststrip__item:nth-child(2) { order: 3; }
  .sh-truststrip__item:nth-child(3) { order: 2; }
  .sh-truststrip__item:nth-child(4) { order: 4; }

  .sh-truststrip__mark {
    width: 9px;
  }

  .sh-truststrip__hide-mob {
    display: none;
  }
}

/* ── 2 · MICROGRAPHIC MARQUEE ──────────────────────────────── */
.sh-marquee {
  border-top: 1px solid var(--sp-tetsukon-15);
  border-bottom: 1px solid var(--sp-tetsukon-15);
  overflow: hidden;
  background: var(--sp-bg);
}

.sh-marquee__track {
  display: flex;
  gap: 56px;
  padding: 18px 0;
  width: max-content;
  animation: sh-marquee 64s linear infinite;
}

.sh-marquee:hover .sh-marquee__track {
  animation-play-state: paused;
}

.sh-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-family: var(--sp-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sp-fg);
  flex-shrink: 0;
}

.sh-marquee__num {
  color: var(--sp-fg);
}

.sh-marquee__rule {
  width: 48px;
  height: 1px;
  background: var(--sp-asagi);
}

.sh-marquee__lab {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
  font-size: 11px;
}

@keyframes sh-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ── 3 · TECH RIBBON ───────────────────────────────────────── */
.sh-ribbon {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 160px) var(--sh-pad-side);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sh-ribbon__head {
  grid-column: 1 / -1;
  max-width: 720px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sh-ribbon__drawing img {
  width: 100%;
  filter: saturate(0.92);
}

.sh-ribbon__rows {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sh-ribbon__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sh-ribbon__num {
  font-family: var(--sp-font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  min-width: 116px;
  color: var(--sp-fg);
}

.sh-ribbon__line {
  flex: 1;
  height: 1px;
  background: var(--sp-tetsukon-30);
}

.sh-ribbon__tick {
  width: 1px;
  height: 10px;
  background: var(--sp-tetsukon);
}

.sh-ribbon__lab {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg-muted);
  min-width: 170px;
}

/* ── 4 · FEATURE ROWS ──────────────────────────────────────── */
.sh-features {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 32px var(--sh-pad-side) clamp(96px, 10vw, 160px);
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 8vw, 128px);
}

.sh-feature {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.sh-feature.is-reverse {
  grid-template-columns: 1.1fr 1fr;
}

.sh-feature.is-reverse .sh-feature__copy {
  order: 2;
}

.sh-feature.is-reverse .sh-feature__figure {
  order: 1;
}

.sh-feature__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sh-feature__title {
  margin: 4px 0 0;
}

.sh-feature__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--sp-fg-muted);
  max-width: 38ch;
  margin: 0;
}

.sh-feature__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--sh-radius);
}

.sh-feature__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── 4b · SNAP DEMO ────────────────────────────────────────── */
.sh-snapdemo {
  background: var(--sp-kinari);
  border-radius: var(--sh-radius);
  padding: 24px 32px;
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-snapdemo__svg {
  width: 100%;
  height: 100%;
}

.sh-snapdemo__rest {
  animation: sh-snap-cycle 4.4s var(--sp-ease-snap) infinite;
}

.sh-snapdemo__arrow {
  animation: sh-snap-arrow 4.4s var(--sp-ease-snap) infinite;
  opacity: 0;
}

@keyframes sh-snap-cycle {
  0% {
    transform: translateY(0);
  }

  32% {
    transform: translateY(0);
  }

  46% {
    transform: translateY(72px);
  }

  72% {
    transform: translateY(72px);
  }

  92% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes sh-snap-arrow {

  0%,
  28% {
    opacity: 0;
  }

  35%,
  60% {
    opacity: 1;
  }

  72%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sh-snapdemo__rest,
  .sh-snapdemo__arrow {
    animation: none;
  }
}

/* ── 5 · FLOW MOMENT ───────────────────────────────────────── */
.sh-flowmoment {
  padding: clamp(96px, 10vw, 160px) var(--sh-pad-side);
  background: var(--sp-shironeri);
  text-align: center;
}

.sh-flowmoment__inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.sh-flowmoment__title {
  margin-top: 6px;
  text-wrap: balance;
}

.sh-flowmoment__body {
  margin: 8px auto 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* ── 7 · MATERIALS · counter refinements ──────────────────── */
.sh-matfact__idx {
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-asagi);
  margin-bottom: 20px;
}

.sh-matfact__value {
  font-variant-numeric: tabular-nums;
}

/* ── 8 · REVIEWS · marquee strip ───────────────────────────── */
.sh-reviews__marquee {
  margin-top: 56px;
  border-top: 1px solid rgba(244, 240, 232, 0.14);
  border-bottom: 1px solid rgba(244, 240, 232, 0.14);
  overflow: hidden;
}

.sh-marquee__track--dark {
  animation: sh-marquee 72s linear infinite;
}

.sh-marquee__item--dark {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 240, 232, 0.78);
  padding: 18px 0;
}

.sh-marquee__item--dark::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 56px;
  background: var(--sp-asagi);
  border-radius: 50%;
  vertical-align: middle;
}

/* ── 10 · RESERVE ──────────────────────────────────────────── */
.sh-reserve {
  position: relative;
  overflow: hidden;
  background: var(--sp-shironeri);
  padding: clamp(112px, 14vw, 200px) var(--sh-pad-side);
  text-align: center;
}

.sh-reserve__hex {
  position: absolute;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

.sh-reserve__hex--1 {
  top: -80px;
  left: -60px;
  width: 280px;
}

.sh-reserve__hex--2 {
  bottom: -120px;
  right: -80px;
  width: 360px;
  transform: rotate(30deg);
}

.sh-reserve__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sh-reserve__title {
  font-family: var(--sp-font-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 4.75rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 14px 0 4px;
  text-wrap: balance;
}

.sh-reserve__lede {
  max-width: 36ch;
  margin: 0 auto;
  text-align: center;
}

.sh-reserve__form {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 8px;
  margin-top: 32px;
  width: 100%;
  max-width: 580px;
}

.sh-reserve__form input,
.sh-reserve__form select {
  font-family: var(--sp-font-sans);
  font-size: 15px;
  padding: 16px 18px;
  border: 1px solid var(--sp-tetsukon-15);
  border-radius: var(--sh-radius);
  background: #fff;
  color: var(--sp-fg);
  outline: none;
  transition: border-color var(--sp-dur-2);
}

.sh-reserve__form input:focus,
.sh-reserve__form select:focus {
  border-color: var(--sp-tetsukon);
}

.sh-reserve .sh-caption {
  margin-top: 16px;
  font-size: 12px;
  color: var(--sp-fg-subtle);
}

/* ── Drop fold sizing on sections that no longer need it ──── */
.sh-shop.sh-reveal,
.sh-materials.sh-reveal,
.sh-reviews.sh-reveal {
  min-height: unset;
}

/* ═══════════════════════════════════════════════════════════════
   TWEAK · COMPACT MODE — fits each major section above the fold
   Applied via body.is-compact (toggled by the Tweaks panel).
   Cuts vertical padding ~45-50%, scales hero figure tighter,
   shrinks hero/title display sizes, tightens feature-row gaps.
   ═══════════════════════════════════════════════════════════════ */
body.is-compact .sh-mhero {
  padding: clamp(40px, 5vw, 64px) var(--sh-pad-side) clamp(32px, 4vw, 48px);
  min-height: unset;
}

body.is-compact .sh-mhero__title {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
}

body.is-compact .sh-mhero__eyebrow {
  margin-bottom: 18px;
}

body.is-compact .sh-mhero__lede {
  margin-top: 18px;
}

body.is-compact .sh-mhero__cta {
  margin-top: 22px;
}

body.is-compact .sh-mhero__figure {
  margin-top: 32px;
}

body.is-compact .sh-mhero__figure>img {
  aspect-ratio: 21 / 9;
}

body.is-compact .sh-ribbon {
  padding: clamp(40px, 5vw, 64px) var(--sh-pad-side);
  gap: 40px;
}

body.is-compact .sh-ribbon__head {
  margin-bottom: 12px;
}

body.is-compact .sh-features {
  padding: clamp(40px, 5vw, 56px) var(--sh-pad-side);
  gap: clamp(40px, 5vw, 56px);
}

body.is-compact .sh-feature {
  gap: 48px;
}

body.is-compact .sh-snapdemo {
  padding: 16px 20px;
}

body.is-compact .sh-flowmoment {
  padding: clamp(40px, 5vw, 64px) var(--sh-pad-side);
}

body.is-compact .sh-shop,
body.is-compact .sh-materials,
body.is-compact .sh-reviews,
body.is-compact .sh-shipstrip {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  min-height: unset;
}

body.is-compact .sh-shop__head,
body.is-compact .sh-materials__head,
body.is-compact .sh-reviews__head {
  margin-bottom: 20px;
}

body.is-compact .sh-reserve {
  padding: clamp(48px, 6vw, 88px) var(--sh-pad-side);
}

body.is-compact .sh-reserve__title {
  font-size: clamp(2rem, 4vw + 0.3rem, 3.25rem);
}

body.is-compact .sh-reserve__form {
  margin-top: 20px;
}

body.is-compact .sh-shipstrip__inner .sh-shipfact {
  padding: 24px 32px 24px 0;
}

body.is-compact .sh-matfact {
  padding: 20px 24px 20px 0;
}

body.is-compact .sh-product-card {
  gap: 14px;
}

body.is-compact .sh-reviews__marquee {
  margin-top: 28px;
}

/* ─── PRODUCT SHOWCASE ──────────────────────────────────────── */
.sh-showcase {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 144px) var(--sh-pad-side);
}



.sh-showcase__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  margin: 0 0 clamp(48px, 6vw, 88px);
}

.sh-showcase__title {
  text-wrap: balance;
  max-width: 24ch;
}

.sh-showcase__title-em {
  color: var(--sp-fg-subtle);
  display: inline;
}

.sh-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 56px);
}

.sh-showcase__panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sh-showcase__media {
  position: relative;
  background: var(--sp-kinari);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--sh-radius);
}

.sh-showcase__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* nudge the in-frame subject a touch up so the caption tag below
     doesn't crowd it on smaller widths */
  object-position: center 48%;
  mix-blend-mode: multiply;
}

.sh-showcase__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--sp-tetsukon);
  opacity: 0.5;
  pointer-events: none;
}

.sh-showcase__corner--tl {
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
}

.sh-showcase__corner--tr {
  top: 14px;
  right: 14px;
  border-left: 0;
  border-bottom: 0;
}

.sh-showcase__corner--bl {
  bottom: 14px;
  left: 14px;
  border-right: 0;
  border-top: 0;
}

.sh-showcase__corner--br {
  bottom: 14px;
  right: 14px;
  border-left: 0;
  border-top: 0;
}

.sh-showcase__tag {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
  background: var(--sp-bg);
  padding: 6px 12px;
  white-space: nowrap;
  border: 1px solid var(--sp-rule);
}

.sh-showcase__cap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 42ch;
}

.sh-showcase__cap-eyebrow {
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-asagi);
  margin-bottom: 2px;
}

.sh-showcase__cap-title {
  font-family: var(--sp-font-serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 1vw + 0.5rem, 1.5rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--sp-fg);
}

.sh-showcase__cap-body {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sp-fg-muted);
}

@media (max-width: 800px) {
  .sh-showcase__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ── SOLUTION HERO — full-bleed product + overlay copy left ───── */
.sh-solhero {
  background: var(--sp-bg);
  /* shironeri */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* stabilize the image's multiply blend (prevents 1px seam flashing during overlay animation) */
}

.sh-solhero__figure {
  margin: 0;
  width: 100%;
  height: clamp(560px, 78vh, 820px);
  overflow: hidden;
  position: relative;
  /* Match the gif containers (kinari paper) so the multiply blend reads
     the same warm overlay as the "from every angle" showcase. */
  background: var(--sp-kinari);
}

/* Product image: white seamless backdrop multiplied into page bg, scaled
   up and slid right so the left third of the frame is empty for copy. */
.sh-solhero__figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  mix-blend-mode: multiply;
  filter: brightness(0.96) saturate(0.94);
  transform: scale(1.04);
  transform-origin: center center;
}

/* Product labels below each item in the figure.
   Positioned by JS (SolutionPlaceholder layout) from photo-space anchors so
   they track the products through every crop; the left/top here are only a
   pre-JS fallback. */
.sh-solhero__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.sh-solhero__label {
  /* Square label — matches the .sh-showcase__tag badge in the "Quietly considered" section */
  position: absolute;
  top: 80%;
  transform: translateX(-50%);
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
  background: var(--sp-bg);
  padding: 6px 12px;
  white-space: nowrap;
  border: 1px solid var(--sp-rule);
}

.sh-solhero__label--left {
  left: 38%;
}

.sh-solhero__label--right {
  left: 57%;
}

/* Desktop: restyle the Snappalm 16 / 14 badges to match the S7 color pill
   (.sh-psplit__slidepill) — translucent glass capsule, blur, light mono caps.
   No accent dot. Mobile keeps its flat transparent treatment below. */
@media (min-width: 861px) {
  .sh-solhero__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--sp-fg-on-dark, #f4f0e8);
    background: rgba(20, 18, 16, 0.30);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    padding: 8px 14px;
    border: 1px solid rgba(244, 240, 232, 0.24);
    border-radius: 999px;
  }
}

@media (max-width: 860px) {
  .sh-solhero__label {
    border: none;
    background: transparent;
    padding: 4px 0;
    /* Sit the name labels a touch lower under the products (Mark 2026-07-14);
       keeps the JS-computed left/top, just nudges the render down. The +8px X
       nudges both bottom labels (Snappalm 16 / 14) right a bit (Mark 2026-07-26). */
    transform: translateX(calc(-50% + 8px)) translateY(16px);
  }
}

/* ── ANIMATED PRODUCT ANNOTATIONS (autoplay hotspots) ───────────── */
.sp-anno {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  transform: translateZ(0);
  /* own compositing layer — animating it won't re-rasterize the blended image */
}

/* Dashed connector line — pixel-accurate, rotated to its anchor.
   Enter transition lives on .is-active; exit transition on the base. */
.sp-anno__line {
  position: absolute;
  height: 1px;
  width: 0;
  transform-origin: left center;
  transform: rotate(var(--a, 0rad));
  background: repeating-linear-gradient(90deg, var(--sp-asagi) 0 2px, transparent 2px 7px);
  opacity: 0;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.sp-anno__group.is-active .sp-anno__line {
  width: var(--len, 0);
  opacity: 1;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

/* Origin node where the line meets the label */
.sp-anno__node {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sp-asagi);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sp-anno__group.is-active .sp-anno__node {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* Hexagon tip that touches the product */
.sp-anno__hex {
  position: absolute;
  width: 9px;
  height: 8px;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sp-anno__hex svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sp-anno__hex polygon {
  fill: rgba(78, 155, 166, 0.18);
  stroke: var(--sp-asagi);
  stroke-width: 1;
  stroke-linejoin: round;
}

.sp-anno__group.is-active .sp-anno__hex {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s,
    opacity 0.4s ease 0.55s;
}

/* Soft pulse ring emanating from the hexagon while active */
.sp-anno__hex::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--sp-asagi);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  opacity: 0;
}

.sp-anno__group.is-active .sp-anno__hex::after {
  animation: sp-anno-pulse 2.4s ease-out 1.1s infinite;
}

@keyframes sp-anno-pulse {
  0% {
    opacity: 0.55;
    transform: scale(0.85);
  }

  70% {
    opacity: 0;
    transform: scale(1.7);
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

/* Label — placement via the alignment modifier, reveal via opacity only */
.sp-anno__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: min(230px, 74vw);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sp-anno__group.is-active .sp-anno__label {
  opacity: 1;
  transition: opacity 0.5s ease 0.75s;
}

.sp-anno__label--right {
  transform: translate(-100%, -50%);
  text-align: right;
  align-items: flex-end;
  padding-right: 16px;
}

.sp-anno__label--left {
  transform: translate(0, -50%);
  text-align: left;
  align-items: flex-start;
  padding-left: 16px;
}

.sp-anno__label--top {
  transform: translate(-50%, -100%);
  text-align: center;
  align-items: center;
  padding-bottom: 14px;
}

.sp-anno__label--bottom {
  transform: translate(-50%, 0);
  text-align: center;
  align-items: center;
  padding-top: 14px;
}

/* Mobile: one fixed text block at top-center; only the line + hex move.
   (Dormant — replaced by the .sp-anno__pill treatment below; kept for
   easy revert.) */
.sp-anno__mnode.is-on {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.sp-anno__mlabel {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: min(82vw, 360px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sp-anno__mlabel.is-on {
  opacity: 1;
  transition: opacity 0.45s ease 0.5s;
}

.sp-anno__mlabel .sp-anno__text {
  font-size: 16px;
}

/* Mobile: the line + side copy don't fit a phone, so the callouts collapse
   into one translucent glass pill centered over the product. Content swaps
   on the same autoplay rhythm (fade out on the gap, fade in on the hold). */
.sp-anno__pill {
  position: absolute;
  left: 50%;
  top: 71%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  /* Wide and short — max ~3 lines of text */
  width: min(83vw, 378px);
  max-width: min(83vw, 378px);
  padding: 10px 18px 11px;
  border-radius: var(--sh-radius);
  background: rgba(245, 242, 236, 0.62);
  /* shironeri glass */
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(245, 242, 236, 0.55);
  box-shadow: 0 8px 24px -12px rgba(27, 42, 52, 0.18);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sp-anno__pill.is-on {
  opacity: 1;
  transition: opacity 0.45s ease 0.25s;
}

.sp-anno__pill .sp-anno__text {
  font-size: 14px;
}

.sp-anno__kicker {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-asagi);
}

.sp-anno__text {
  font-family: var(--sp-font-sans);
  font-size: 15px;
  line-height: 1.32;
  color: var(--sp-fg);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {

  .sp-anno__line,
  .sp-anno__node,
  .sp-anno__hex,
  .sp-anno__label,
  .sp-anno__pill {
    transition-duration: 0.001s;
  }

  .sp-anno__hex::after {
    animation: none;
  }
}

.sh-solhero__overlay {
  position: absolute;
  inset: 0;
  max-width: var(--sh-max);
  margin: 0 auto;
  /* Top offset mirrors the section above (.sh-hlt top padding) */
  padding: clamp(72px, 9vw, 132px) var(--sh-pad-side) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.sh-solhero__copy {
  width: min-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  pointer-events: auto;
}

.sh-solhero__features {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 32ch;
  text-align: left;
  pointer-events: auto;
}

.sh-solhero__title-em {
  display: block;
  color: var(--sp-fg-subtle);
  font-size: 0.91em;
  letter-spacing: -0.01em;
}

.sh-solhero__title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  /* matched to .sh-psplit__title (Pro-level Upgrade) */
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--sp-fg);
  text-wrap: balance;
  white-space: nowrap;
}

/* Body mirrors .sh-hlt__body from the section above, tuned for light bg */
.sh-solhero__body {
  margin: 0;
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--sp-fg-muted);
  text-wrap: pretty;
}

/* Highlighted phrase — sumi (ink black) for strongest emphasis */
.sh-hl {
  color: var(--sp-sumi);
  font-weight: inherit;
  font-size: calc(1em + 0.5pt);
}

/* ── Selling-point chips (hex mark + mono label) ──────────────── */
.sh-solhero__points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Desktop / iPad: stack inline chips in one vertical column */
.sh-solhero__points--inline {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
}

.sh-solhero__point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sp-rule);
  background: var(--sp-bg);
  font-family: var(--sp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg);
  white-space: nowrap;
}

.sh-solhero__point-mark {
  width: 11px;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Standalone mobile strip — hidden on desktop / iPad */
.sh-solpoints {
  display: none;
}

/* iPad / tablet — slightly wider copy box */
@media (min-width: 861px) and (max-width: 1499px) {
  .sh-solhero__copy {
    max-width: 38ch;
  }
}

@media (hover: hover) and (min-width: 1024px),
(min-width: 1500px) {
  .sh-solhero__figure {
    height: clamp(780px, 89vh, 1040px);
  }

  /* Big screen: the full-bleed band forces object-fit:cover to blow the
     photo up (width-constrained), so the laptop reads "too close". Instead
     of scaling the <img> down (which exposes a top/bottom border), constrain
     the image to the right ~68% of the band — cover then zooms it ~40% less
     while STILL filling the full height (no border). The left edge is
     feathered so it dissolves into the kinari field, and the figure's own
     left mask continues to fade that field into the page. */
  .sh-solhero__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    margin-left: 0;
    transform: scale(1.02);
    transform-origin: center center;
    /* Bias the crop downward so the floor under the products (where the
       name labels sit) survives the cover crop on very wide screens. */
    object-position: center 54%;
  }
}

@media (max-width: 860px) {

  /* svh, not dvh — dvh tracks Safari's collapsing toolbar and makes the
     section (and its cover-cropped image) resize mid-scroll */
  /* A touch over 100svh so the section fills the iPhone screen above the
     fold even with Safari's toolbar collapsed (svh measures it expanded). */
  .sh-solhero {
    padding: 0;
    position: relative;
    min-height: 78vh;
    min-height: 80svh;
    display: flex;
    flex-direction: column;
    /* The photo's own studio ground, extended to the top of the fold — the
       copy zone shares the image's ambient surface, so the photo reads as
       one continuous background from the section top down to the products.
       Flattens to the img's exact top-edge color (#E0DCD3) well before the
       seam, so the join stays invisible at any copy/accordion height. */
    background: linear-gradient(to bottom, #E6E2DA 0%, #E0DCD3 340px);
  }

  /* The photo keeps its previous full-bleed box (the old 80svh section it
     filled edge-to-edge) — same rendered size + crop; the copy/accordion
     stack now sits in flow above it instead of floating over it. */
  .sh-solhero__figure {
    height: 78vh;
    height: 80svh;
    flex: none;
    aspect-ratio: auto;
    width: 100%;
    /* Pull the photo up behind the copy zone — its empty studio top slides
       under the text (same ambient ground, invisible join), closing the gap
       between the accordion and the products without touching their size. */
    margin-top: -160px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  @supports (-webkit-touch-callout: none) {
    .sh-solhero {
      min-height: 82vh;
      min-height: 85svh;
    }

    .sh-solhero__figure {
      height: 82vh;
      height: 85svh;
    }
  }

  /* On mobile the inline chip row is hidden — chips live in the strip section below */
  .sh-solhero__points--inline {
    display: none;
  }

  .sh-solpoints {
    display: block;
    padding: 14px var(--sh-pad-side) 18px;
    background: var(--sp-bg);
    border-bottom: 1px solid var(--sp-rule);
  }

  .sh-solpoints .sh-solhero__points {
    margin: 0;
    justify-content: center;
    gap: 6px;
  }

  .sh-solpoints .sh-solhero__point {
    font-size: 9px;
    padding: 6px 8px;
    letter-spacing: 0.14em;
    gap: 6px;
  }

  .sh-solpoints .sh-solhero__point-mark {
    width: 9px;
  }

  .sh-solhero__figure img {
    transform: scale(1.18) translate(5%, 15%);
    transform-origin: center bottom;
    object-position: center 60%;
    height: 100%;
  }

  /* Headline scrim removed — copy no longer overlays the image. */
  .sh-solhero__figure::after {
    display: none;
  }

  /* Copy + accordion stack in flow ABOVE the photo (never over it); the top
     padding clears the sticky nav pill when the section reaches the top. */
  .sh-solhero__overlay {
    position: static;
    inset: auto;
    order: -1;
    flex-direction: column;
    padding: clamp(72px, 9vw, 128px) var(--sh-pad-side) 0;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    z-index: 2;
    pointer-events: auto;
    text-align: center;
  }

  .sh-solhero__copy {
    width: 100%;
    max-width: 100%;
    text-align: center;
    align-items: center;
    transform: none;
  }

  /* ── Feature accordion (mobile only) — FAQ-style rows below the body copy:
     icon left, title, +/− toggle right; single-open. Mirrors the highlights
     accordion mechanics (.sh-hlt__complex-*) but keeps the brand icons. ── */
  .sh-solacc {
    width: 100%;
    max-width: 480px;
    margin: 22px auto 0;
    text-align: center;
    pointer-events: auto;
  }

  .sh-solacc__item {
  }

  .sh-solacc__item:first-child {
  }

  .sh-solacc__toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 13px 0;
    cursor: pointer;
  }

  .sh-solacc__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--sp-asagi);
    display: inline-flex;
  }

  .sh-solacc__icon svg {
    width: 100%;
    height: 100%;
  }

  .sh-solacc__title {
    font-family: var(--sp-font-sans);
    font-weight: 600;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.25;
    color: var(--sp-fg);
    padding-right: 0;
    width: auto;
  }

  /* +/− toggle — same mechanism as .sh-faq__icon: vertical bar rotates + fades,
     horizontal bar rotates, so + becomes −. */
  .sh-solacc__plus {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--sp-fg);
  }

  .sh-solacc__plus-v {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }

  .sh-solacc__item.is-open .sh-solacc__plus-v {
    transform: rotate(90deg);
    opacity: 0;
  }

  .sh-solacc__plus-h {
    transition: transform 0.3s ease;
    transform-origin: center;
  }

  .sh-solacc__item.is-open .sh-solacc__plus-h {
    transform: rotate(180deg);
  }

  .sh-solacc__desc {
    /* Plain open answer — no wash/box (Mark 2026-07-15, "cleaner"); aligns
       under the title, clear of the 22px icon + 12px gap. */
    margin: 0 0 14px;
    padding: 0;
    font-family: var(--sp-font-sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sp-fg-muted);
    text-wrap: pretty;
  }

  .sh-solhero__features {
    display: none;
  }

  .sh-solhero__title {
    font-size: clamp(32px, 7.9vw, 48px);
    text-align: center;
    width: 100%;
  }

  /* Keep the second line ("The compromise ends here.") at its previous size */
  .sh-solhero__title-em {
    font-size: 0.91em;
  }

  /* Body copy mirrors the "Design and ergonomics" line (.sh-hlt__body) from the
     section above — sans · 500 · 15px · 1.65 · 44ch. Stays centered; color is
     kept dark (--sp-fg-muted) since this body sits on the light product image,
     not the dark section's light-on-dark muted. */
  .sh-solhero__body {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.65;
    max-width: 48ch; /* closer to the headline's span (Mark 2026-07-15) */
    text-wrap: pretty;
  }

  /* Label positions come from JS (photo-space anchors) — no mobile override needed */
}

@media (min-width: 1400px) {
  .sh-solhero__title {
    font-size: 2.2rem;
  }
  .sh-solhero__copy {
    width: auto;
  }
  .sh-solhero__body {
    font-size: 16px;
    max-width: 32ch;
  }
}

body.is-compact .sh-showcase {
  padding: clamp(40px, 5vw, 64px) var(--sh-pad-side);
}

body.is-compact .sh-showcase__head {
  margin-bottom: 24px;
}

body.is-compact .sh-showcase__panel {
  gap: 16px;
}

/* ─── BENEFITS GRID (6-up) — legacy, kept for compact mode hook ─ */
.sh-benefits {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   LIFESTYLE · STICKY (reversed: scroll stack LEFT, caption RIGHT)
   - Right column is sticky at viewport height
   - Caption text sits at the top of the column
   - Hero image (the lap shot) anchored at the bottom of the column,
     stationary as the user scrolls
   - Gradient fade on the image top so headline overlays cleanly
   - Mobile: stacks vertically; image after caption + scroll below
   ═══════════════════════════════════════════════════════════════ */
.sh-stickyform {
  --sf-gap: 0px;
  /* Visual breathing room between the scrolling stack and the right
     image lives inside the caption-text padding-left and the right edge
     of the stack — not as a grid gap — so the image meets the blue
     panel with no margin between them. */
  --sf-text-inset: clamp(40px, 6vw, 96px);
  background: var(--sp-kinari);
  padding: clamp(72px, 9vw, 128px) var(--sh-pad-side) 0;
  position: relative;
}

/* Blue panel sits behind the RIGHT (scrolling-stack) column. Anchored to
   the section's right edge, full height. Sized via JS-free CSS to span
   roughly the stack column's width plus the side padding. */
.sh-stickyform::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  /* Blue panel exactly matches the right column's actual left edge in
     viewport coords. Handles BOTH cases: viewport wide enough that
     inner is centered at sh-max width, AND viewport narrow enough that
     inner is constrained by side padding (which is the case at 1440px
     since --sh-max equals 1440 but padding eats 128px). */
  width: calc(max(var(--sh-pad-side), (100% - var(--sh-max)) / 2) + min(100% - 2 * var(--sh-pad-side), var(--sh-max)) / 2.25);
  background: var(--sp-tetsukon);
  /* thin rule separating the right (stack) panel from the left caption column */
  border-left: 1px solid var(--sp-tetsukon-15);
  pointer-events: none;
  z-index: 0;
}

.sh-stickyform__inner {
  position: relative;
  z-index: 1;
}

.sh-stickyform__inner {
  max-width: var(--sh-max);
  margin: 0 auto;
  display: grid;
  /* Swapped: caption LEFT (wider, ~25% larger than right), stack RIGHT */
  grid-template-columns: 1.25fr 1fr;
  gap: var(--sf-gap);
  align-items: start;
}

/* Standalone copy of the left column only — single full-width column. */
.sh-stripsolo {
  background: var(--sp-tetsukon);
  /* Match the vertical rhythm of the sections above (.sh-stickyform) */
  padding: clamp(72px, 9vw, 128px) var(--sh-pad-side) clamp(72px, 9vw, 128px);
}

.sh-stripsolo::before {
  display: none;
}

.sh-stripsolo .sh-stickyform__inner {
  display: block;
}

.sh-stripsolo__head {
  max-width: var(--sh-max);
  margin: 0 auto;
}

.sh-stripsolo__title {
  color: var(--sp-fg-on-dark);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 0 clamp(40px, 8vw, 64px);
}

.sh-stripsolo__title-em {
  color: var(--sp-fg-on-dark-muted);
  display: inline;
}

.sh-stripsolo .sh-stickyform__stack {
  max-width: var(--sh-max);
  margin: 0 auto;
  flex-direction: row;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(32px, 4vw, 56px) 0 0;
  color: var(--sp-fg-on-dark);
}

.sh-stripsolo .sh-stickyform__frame {
  flex: 1 1 0;
  min-width: 0;
}

.sh-stripsolo .sh-stickyform__frame-media {
  background: var(--sp-kinari);
}

/* ═══ Engineered Duo — stationary headline LEFT, 2×2 image grid RIGHT
   on the Ainezu panel (same color as the Palm Comfort left column). ═══ */
.sh-leftcap {
  position: relative;
  background: var(--sp-bg);
  padding: clamp(72px, 9vw, 128px) var(--sh-pad-side);
  overflow: hidden;
}

/* Ainezu panel anchored to the RIGHT edge, sized to span the right column
   (1.25 of the 1 + 1.25 grid) plus the right side padding. */
.sh-leftcap::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: calc(max(var(--sh-pad-side), (100% - var(--sh-max)) / 2) + min(100% - 2 * var(--sh-pad-side), var(--sh-max)) * (1.25 / 2.25));
  background: var(--sp-ainezu);
  pointer-events: none;
  z-index: 0;
}

.sh-leftcap__inner {
  position: relative;
  z-index: 1;
  max-width: var(--sh-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 0;
}

.sh-leftcap__caption {
  padding-right: clamp(32px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sh-leftcap__title {
  color: var(--sp-fg);
  text-wrap: balance;
  max-width: 16ch;
  margin: 0 0 clamp(40px, 8vw, 64px);
}

.sh-leftcap__title-em {
  color: var(--sp-fg-subtle);
  display: inline;
}

.sh-leftcap__body {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw + 6px, 17px);
  line-height: 1.6;
  color: var(--sp-fg-muted);
  max-width: 40ch;
}

/* 2×2 image grid inside the Ainezu panel */
.sh-leftcap__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(32px, 4vw, 64px);
}

.sh-leftcap__tile {
  aspect-ratio: 4 / 3;
  background: rgba(244, 240, 232, 0.08);
  border: 1px dashed rgba(244, 240, 232, 0.28);
  border-radius: var(--sh-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sh-leftcap__ph {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.6);
}

.sh-leftcap__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Engineered Duo as a ONE-AT-A-TIME desktop carousel (right column) ── */
.sh-engcar__col {
  grid-column: 2;
  min-width: 0;
  padding: clamp(32px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sh-engcar__stack {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sh-engcar__stack::-webkit-scrollbar {
  display: none;
}

.sh-engcar__frame {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  gap: 0;
}

.sh-engcar__frame .sh-stickyform__frame-media {
  background: var(--sp-kinari);
}

/* position dots, bottom of the right column; active turns Asagi */
.sh-engcar__dots {
  display: flex;
  gap: 7px;
}

.sh-engcar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244, 240, 232, 0.34);
  transition: background 0.3s ease;
}

.sh-engcar__dot.is-on {
  background: var(--sp-asagi);
}

@media (max-width: 860px) {
  .sh-engcar__col {
    grid-column: 1;
    padding: clamp(20px, 5vw, 32px) 0 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   PROBLEM TRIAD — copy of the "Zero Tolerance" section, but three images
   in ONE row on desktop, each with body copy below. Navy like the
   original; images fill their containers edge to edge.
   ════════════════════════════════════════════════════════════════ */
.sh-tri {
  background: var(--sp-tetsukon);
  padding: clamp(72px, 9vw, 132px) 0;
}

@media (min-width: 861px) {
  .sh-tri {
    padding-bottom: clamp(32px, 3vw, 48px);
  }
}

.sh-tri__head {
  position: relative;
  max-width: calc(var(--sh-max) + 2 * var(--sh-pad-side));
  margin: 0 auto;
  padding: 0 var(--sh-pad-side);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
}

.sh-tri__head-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sh-tri__title {
  color: var(--sp-fg-on-dark);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.sh-tri__body-lead {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.4;
  max-width: none;
  text-wrap: pretty;
  margin: 0 0 clamp(36px, 4vw, 60px);
  color: var(--sp-fg-on-dark-muted);
}

/* Cosmetic-wear note: pinned to the right edge of the headline row,
   mirroring the "Built for the compromises" section below. */
.sh-tri__row {
  list-style: none;
  margin: 0 auto;
  max-width: calc(var(--sh-max) + 2 * var(--sh-pad-side));
  padding: 0 var(--sh-pad-side);
  display: grid;
  /* Three visible boxes on desktop. */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}

.sh-tri__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sh-tri__media {
  /* Restored to match the SAME overlay as "Design and Ergonomics" (Mark 2026-07-27):
     kinari backdrop + mix-blend-mode:multiply on the img below. Kept border-radius:
     inherit on the img (next rule) as a standing safeguard — this container renders
     at FRACTIONAL sizes (e.g. 294.8x221.09) and a mismatched child radius is what
     leaked a light rim through the antialiased edge earlier tonight, worst on the
     darkest photos. Matching radii on parent AND child removes that failure mode
     independent of which backdrop color or blend mode is used. */
  background: var(--sp-kinari);
  border-radius: var(--sh-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.sh-tri__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

.sh-tri__copy {
  padding: clamp(16px, 1.4vw, 22px) 2px 0;
}

.sh-tri__label {
  font-family: var(--sp-font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--sp-fg-on-dark);
  margin: 0 0 4px;
}

.sh-tri__body {
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sp-fg-on-dark-muted);
  margin: 0;
  text-wrap: pretty;
}


.sh-tri__body strong {
  color: var(--sp-fg-on-dark);
  font-weight: 600;
}

/* No italics on any headline emphasis. */
.sh-h2 em,
.sh-tri__title em,
.sh-record__title em {
  font-style: normal;
}

.sh-tri__body-lead strong {
  color: var(--sp-fg-on-dark);
  font-weight: 600;
}

/* Cosmetic-wear note pinned to the right edge of the headline row. */
.sh-tri__note {
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
  gap: 10px;
  max-width: 30ch;
  margin: 0 0 6px;
  font-family: var(--sp-font-sans);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.5;
  color: var(--sp-fg-on-dark-muted);
}

.sh-tri__note .sh-formstudy__note-icon {
  color: var(--sp-asagi);
  position: relative;
  top: 0.18em;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* Fixed 3-line note — never reflows responsively. */
.sh-formstudy__note-text--fixed {
  white-space: nowrap;
  max-width: none;
}

.sh-tri__note:has(.sh-formstudy__note-text--fixed) {
  max-width: none;
}

/* Bottom foot note. On DESKTOP it sits at the bottom of the section as one
   long fine-print line (the head no longer carries it). Mobile overrides
   below restyle it to a tight two-line note above the section's bottom. */
.sh-tri__foot {
  display: block;
  max-width: calc(var(--sh-max) + 2 * var(--sh-pad-side));
  margin: clamp(40px, 4.5vw, 64px) auto 0;
  padding: 0 var(--sh-pad-side);
}

.sh-tri__note--foot {
  align-items: center;
  max-width: none;
  margin: 0;
}

.sh-tri__foot-br {
  display: none;
}

/* Paddle buttons are mobile-only; hidden on desktop (3 boxes already fit). */
.sh-tri__paddles {
  display: none;
}

/* Scroll indicators — only meaningful on mobile where the row scrolls;
   hidden on desktop (all three boxes fit). */
.sh-tri__controls {
  display: none;
}

@media (max-width: 720px) {

  /* Cosmetic note row hugs the bottom; the foot's own bottom border is the
     single divider, sitting just below the button row. */
  .sh-tri {
    padding-bottom: 0;
  }

  /* Stack the head: headline + copy. On mobile the note moves to the
     bottom foot (above a divider line), so hide the in-head copy here. */
  .sh-tri__head {
    display: block;
  }

  /* Mobile-only: left-align the "Built for the Compromises" headline + lead. */
  .sh-tri__head-text {
    align-items: flex-start;
    text-align: left;
  }

  .sh-tri__head .sh-tri__note {
    display: none;
  }

  /* Foot row: cosmetic note (3 stacked lines) on the LEFT, paddle buttons
     on the RIGHT, vertically centered together. A SINGLE divider line sits
     just BELOW this row (the foot's border-bottom); the next section's
     hairline is suppressed so only one line shows. */
  .sh-tri__foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--sh-max);
    margin: clamp(20px, 5vw, 28px) auto 0;
    padding: 0 var(--sh-pad-side) clamp(28px, 7vw, 38px);
  }

  .sh-tri__note--foot {
    align-items: flex-start;
    max-width: none;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Icon aligns to the very top of the copy beside it. */
  .sh-tri__note--foot .sh-formstudy__note-icon {
    top: 0;
  }

  .sh-tri__foot-br {
    display: inline;
  }

  /* Suppress the next section's boundary hairline so the foot's
     border-bottom is the only line below the images. */
  .sh-record.sh-record {
    border-top: none;
  }

  .sh-tri__row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 24px;
    /* Left-align every card to the section's left padding (matches the
       cosmetic-wear text box); a sliver of the next card peeks at right. */
    scroll-padding-inline: var(--sh-pad-side);
    padding: 0 var(--sh-pad-side);
  }

  .sh-tri__row::-webkit-scrollbar {
    display: none;
  }

  /* Trailing runway so the LAST card can also left-align to the gutter
     (otherwise the row hits its scroll end and the 3rd card stays short). */
  .sh-tri__row::after {
    content: "";
    flex: 0 0 14%;
    align-self: stretch;
  }

  .sh-tri__card {
    /* Wider card uses more of the viewport; the next card peeks at right. */
    flex: 0 0 88%;
    scroll-snap-align: start;
  }

  /* 4:3 image keeps more of the source visible (less crop than square). */
  .sh-tri__media {
    aspect-ratio: 4 / 3;
  }

  /* Drop the forced line break on mobile so the lead flows naturally
     (no awkward gap after the em dash); it may wrap to a third line. */
  .sh-tri__lead-br {
    display: none;
  }

  /* "Screen that stains": fill the square container but keep the LEFT edge
     of the image in view. */
  .sh-tri__img--shift {
    object-fit: cover;
    object-position: 0% 50%;
  }

  /* Paddle buttons (right-aligned); the dot indicator is removed. */
  .sh-tri__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: clamp(16px, 4vw, 22px) auto 0;
    padding: 0 var(--sh-pad-side);
  }

  .sh-tri__paddles {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
  }

  .sh-tri__dots {
    display: none;
    align-items: center;
    gap: 7px;
  }

  .sh-tri__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(245, 242, 236, 0.28);
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .sh-tri__dot.is-active {
    background: rgba(245, 242, 236, 0.85);
  }

  .sh-tri__paddle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--sp-rule-on-dark);
    background: rgba(255, 255, 255, 0.55);
    color: var(--sp-fg);
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s ease, opacity 0.18s ease;
  }

  .sh-tri__paddle:active:not(:disabled) {
    background: var(--sp-white);
  }

  .sh-tri__paddle:disabled {
    opacity: 0.35;
    cursor: default;
  }
}

/* ════════════════════════════════════════════════════════════════
   HIGHLIGHTS GALLERY — horizontal-scroll cards w/ +-expand & paddles.
   Same execution at every width; first card aligns to the page gutter.
   ════════════════════════════════════════════════════════════════ */
.sh-hlt {
  background: var(--sp-shironeri);
  padding: clamp(72px, 9vw, 128px) 0;
}

.sh-hlt__head {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 0 var(--sh-pad-side);
}

.sh-hlt__title {
  color: var(--sp-fg);
  letter-spacing: -0.02em;
  margin: 0 0 clamp(40px, 8vw, 64px);
  text-wrap: balance;
}

/* Stack "Design and Ergonomics." / "Dialed to the millimeter." on big
   screens too — the shared .sh-br-laptop helper only breaks ≤1440px, so
   force it back on above that for this headline specifically (Mark 2026-07-15). */
@media (min-width: 1441px) {
  .sh-hlt__title .sh-br-laptop {
    display: inline;
  }
}

@media (max-width: 768px) {
  .sh-hlt__title {
    font-size: 1.8rem !important;
    text-wrap: balance;
  }

  /* Drop the forced break on phones so the headline wraps naturally and
     fills the width to the right edge, like .sh-record__title. */
  .sh-hlt__title .sh-br-laptop {
    display: none;
  }
}

.sh-hlt__title-em {
  color: var(--sp-fg-subtle);
}

.sh-hlt__body {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  max-width: 44ch;
  margin: 0 0 clamp(28px, 3vw, 44px);
  color: var(--sp-fg-muted);
  text-wrap: pretty;
}

.sh-hlt__gallery {
  list-style: none;
  /* Full-bleed scroll rail (like Apple's "Get the highlights"): the track
     spans edge-to-edge, the first card aligns to the page content gutter,
     and cards bleed off the right viewport edge instead of being clipped at
     an interior max-width boundary on big screens. */
  --hlt-gutter: max(var(--sh-pad-side), calc((100% - var(--sh-max)) / 2 + var(--sh-pad-side)));
  max-width: none;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  /* Locking horizontal scroll — one full-width banner at a time. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--hlt-gutter);
  scroll-padding-inline: var(--hlt-gutter);
}

.sh-hlt__gallery::-webkit-scrollbar {
  display: none;
}

.sh-hlt__slide {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Each slide = one snap position, exactly the page content width (the
     gallery's content-box already excludes the gutters). */
  flex: 0 0 calc(100% - clamp(32px, 8vw, 120px));
  scroll-snap-align: start;
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  /* Slide governs the block height; cards fill it. */
  aspect-ratio: 2 / 1;
}

.sh-hlt__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.sh-hlt__col--half {
  flex: 1 1 0;
  height: auto;
}

.sh-hlt__card {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  border-radius: var(--sh-radius);
  overflow: hidden;
  background: var(--sp-kinari);
  isolation: isolate;
  min-height: 0;
}

.sh-hlt__overlay-bullets {
  position: absolute;
  bottom: clamp(24px, 3vw, 32px);
  left: 0;
  right: 0;
  padding: 0 clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 48px);
  pointer-events: none;
  z-index: 10;
}

.sh-hlt__bullet {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sh-hlt__overlay-bullets-head {
  flex: 0 1 auto;
  max-width: 42%;
  text-align: left;
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--sp-fg);
  margin: 0;
}

.sh-hlt__overlay-bullets-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 14px);
}

.sh-hlt__bullet-icon {
  width: clamp(20px, 2.5vw, 24px);
  height: clamp(20px, 2.5vw, 24px);
  flex-shrink: 0;
  color: var(--sp-asagi);
}

.sh-hlt__bullet-text {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--sp-fg-muted);
}

.sh-hlt__overlay-head {
  display: block;
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  color: var(--sp-fg);
}

.sh-hlt__overlay-complex {
  position: absolute;
  top: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 48px);
  max-width: 40ch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 10;
  pointer-events: auto;
}

.sh-hlt__overlay-complex--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Third-image copy block ("Interference-free movement. / Improved typing angle.").
   TOP-anchored, not centered (Mark 2026-07-29, desktop). Same reasoning the mobile
   override below already carried since 2026-07-28: centering left dead space above the
   headline, and made the headline's position depend on how many bullets were open. Top
   anchoring gives the headline one fixed position and lets the bullets expand downward.
   Renamed from --center-left, which described the old behaviour and would now be a lie. */
.sh-hlt__overlay-complex--top-left {
  top: clamp(24px, 4vw, 48px);
  left: clamp(32px, 4vw, 48px);
  transform: none;
  text-align: left;
}

.sh-hlt__overlay-complex-head {
  font-size: clamp(24px, 2.5vw, 32px);
  margin-bottom: 0;
}

.sh-hlt__complex-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-hlt__complex-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.sh-hlt__overlay-complex--center .sh-hlt__complex-bullet {
  text-align: left;
  /* Keep bullets left-aligned even in centered container for readability */
  margin: 0 auto;
  max-width: 36ch;
}

.sh-hlt__complex-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--sp-asagi);
  margin-top: 2px;
}

.sh-hlt__complex-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-hlt__complex-title {
  font-family: var(--sp-font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--sp-fg);
  line-height: 1.2;
}

/* Bullet accordion toggle — base rules keep desktop/tablet pixel-identical to
   before (unstyled button wrapping the title, same flex row it always was;
   the plus icon hidden). Mobile (max-width:720px, above) adds the visible
   toggle chrome + panel; min-width:721px (below) forces content open and the
   toggle inert, so nothing outside phone widths changes. */
.sh-hlt__complex-toggle {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* FAQ-style toggle icon (mirrors .sh-faq__icon): hidden by default so desktop/
   tablet show no toggle affordance; the mobile block reveals + animates it. */
.sh-hlt__complex-icon-toggle {
  display: none;
}

/* Answer content stack — flex column at every width; the mobile block adds the
   soft kinari wash + blur on top of this. */
.sh-hlt__complex-ans-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-hlt__complex-desc {
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--sp-fg-muted);
  line-height: 1.4;
  margin: 0;
  max-width: 32ch;
  text-wrap: pretty;
}

.sh-hlt__complex-italic {
  font-family: var(--sp-font-sans);
  font-size: 14px;
  color: var(--sp-fg);
  margin: 0;
  max-width: 32ch;
  text-wrap: balance;
}

.sh-hlt__complex-italic em {
  font-style: italic;
}

.sh-hlt__complex-btn {
  align-self: flex-start;
  margin-top: -8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--sp-tetsukon-15);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: var(--sp-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg-muted);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sh-hlt__complex-btn:hover {
  border-color: var(--sp-tetsukon-30);
  color: var(--sp-fg);
  background: rgba(255, 255, 255, 0.85);
}

.sh-hlt__overlay-complex--center .sh-hlt__complex-btn {
  align-self: center;
}

.sh-hlt__overlay-text {
  position: absolute;
  max-width: 16ch;
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--sp-fg-muted);
  line-height: 1.4;
  text-wrap: pretty;
  pointer-events: none;
  z-index: 10;
}

.sh-hlt__overlay-text--top-left {
  top: clamp(20px, 2.5vw, 32px);
  left: clamp(24px, 3vw, 36px);
  text-align: left;
}

.sh-hlt__overlay-text--bottom-left {
  bottom: clamp(20px, 2.5vw, 32px);
  left: clamp(24px, 3vw, 36px);
  text-align: left;
}

.sh-hlt__caption {
  margin: clamp(16px, 2vw, 24px) 0 0 0;
  color: var(--sp-fg-muted);
  font-family: var(--sp-font-sans);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  text-wrap: pretty;
}

.sh-hlt__col--half .sh-hlt__img {
  object-fit: cover;
  object-position: 0% 50%;
}

.sh-hlt__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 100% 50%;
  display: block;
  mix-blend-mode: multiply;
}

@media (min-width: 1120px) {
  .sh-hlt__slide {
    aspect-ratio: auto;
    height: clamp(480px, 60vh, 760px);
    align-items: flex-start;
    justify-content: center;
  }

  .sh-hlt__col {
    flex: 0 0 auto;
    height: 100%;
    max-width: 100%;
  }

  .sh-hlt__col:not(.sh-hlt__col--half) {
    width: 100%;
  }

  .sh-hlt__col--half {
    aspect-ratio: auto;
    max-width: calc(50% - (clamp(16px, 2vw, 28px) / 2));
  }

  .sh-hlt__card--zoom-desktop .sh-hlt__img {
    transform: scale(1.35);
    transform-origin: right 80%;
  }
}

@media (max-width: 768px) {
  .sh-hlt__slide--split {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .sh-hlt__slide--split .sh-hlt__col--half {
    flex: 0 0 100%;
  }

  .sh-hlt__img {
    object-fit: cover;
  }
}

.sh-hlt__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--sp-tetsukon-70), var(--sp-tetsukon));
  display: grid;
  place-items: center;
}

.sh-hlt__ph {
  font-family: var(--sp-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.42);
  border: 1px solid rgba(245, 242, 236, 0.22);
  border-radius: 999px;
  padding: 6px 14px;
}

.sh-hlt__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 24, 0.55) 0%, rgba(14, 20, 24, 0) 42%);
  pointer-events: none;
}

.sh-hlt__copy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 1.6vw, 28px);
  z-index: 2;
}

.sh-hlt__eyebrow {
  font-family: var(--sp-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-usuao);
  margin: 0 0 8px;
}

.sh-hlt__card-title {
  font-family: var(--sp-font-serif);
  font-weight: 600;
  font-size: clamp(20px, 1.5vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sp-fg-on-dark);
  margin: 0;
  text-wrap: pretty;
  max-width: 16ch;
}

.sh-hlt__detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(14, 20, 24, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: clamp(20px, 1.6vw, 28px);
  padding-bottom: 76px;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(8%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sh-hlt__card.is-open .sh-hlt__detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sh-hlt__detail p {
  font-family: var(--sp-font-sans);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: var(--sp-fg-on-dark-muted);
  margin: 0;
}

.sh-hlt__plus {
  position: absolute;
  left: clamp(16px, 1.4vw, 24px);
  bottom: clamp(16px, 1.4vw, 24px);
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 236, 0.3);
  background: rgba(27, 42, 52, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.sh-hlt__plus:hover {
  background: rgba(27, 42, 52, 0.62);
}

.sh-hlt__plus-icon {
  position: relative;
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}

.sh-hlt__plus-icon::before,
.sh-hlt__plus-icon::after {
  content: "";
  position: absolute;
  background: var(--sp-fg-on-dark);
  border-radius: 2px;
}

.sh-hlt__plus-icon::before {
  left: 50%;
  top: 0;
  width: 1.6px;
  height: 100%;
  transform: translateX(-50%);
}

.sh-hlt__plus-icon::after {
  top: 50%;
  left: 0;
  height: 1.6px;
  width: 100%;
  transform: translateY(-50%);
}

.sh-hlt__card.is-open .sh-hlt__plus-icon {
  transform: rotate(45deg);
}

/* Controls row — paddle arrows only (indicator line removed). */
.sh-hlt__controls {
  max-width: var(--sh-max);
  margin: clamp(22px, 2.4vw, 36px) auto 0;
  padding: 0 var(--sh-pad-side);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.sh-hlt__progress {
  display: none;
  position: relative;
  flex: 1 1 auto;
  max-width: 220px;
  height: 4px;
  border-radius: 999px;
  background: rgba(27, 42, 52, 0.12);
  overflow: hidden;
}

.sh-hlt__progress-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--sp-fg);
  transition: left 0.2s ease;
}

.sh-hlt__paddles {
  display: flex;
  gap: 12px;
}

.sh-hlt__paddle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sp-tetsukon-15);
  /* Constant soft/light-white fill — no hover color change. */
  background: rgba(255, 255, 255, 0.55);
  color: var(--sp-fg);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

/* Brighten to solid white only while pressed. */
.sh-hlt__paddle:active:not(:disabled) {
  background: var(--sp-white);
  border-color: var(--sp-tetsukon-30);
}

.sh-hlt__paddle:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Desktop: float the paddle arrows up so they overlay the bottom-right of
   the gallery (like Apple's "Get the highlights") instead of sitting in a
   separate row beneath the images. */
@media (min-width: 721px) {
  .sh-hlt {
    position: relative;
  }

  .sh-hlt__controls {
    position: sticky;
    bottom: clamp(20px, 4vh, 44px);
    z-index: 6;
    /* Sit in the band BELOW the images (not overlapping them). */
    margin-top: clamp(18px, 2vw, 30px);
    pointer-events: none;
    /* Hidden until the section is scrolled past its midpoint, then fade in. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .sh-hlt__controls.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .sh-hlt__controls.is-revealed .sh-hlt__paddles {
    pointer-events: auto;
  }

  .sh-hlt__paddle {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(14, 20, 24, 0.24);
  }

  .sh-hlt__paddle:active:not(:disabled) {
    background: var(--sp-white);
  }
}

/* Mobile: still a locking horizontal scroller, but each banner becomes a
   PORTRAIT tile (instead of the wide desktop landscape), with the overlay
   copy dialed down to fit. */
@media (max-width: 720px) {

  /* Slide governs height. Portrait tiles (taller than square) fill the spare
     vertical space and give the overlaid copy room to sit inside the image;
     still short enough to keep the paddle controls above the fold. */
  .sh-hlt__slide {
    aspect-ratio: 3 / 4;
  }

  /* Split slide flattens: each half becomes its OWN full-width portrait
     slide (identical to the single banners), shown one at a time. */
  .sh-hlt__slide--split {
    display: contents;
  }

  /* Uniform tile width on mobile: the single-card slide (third image) matches
     the split half-cards' full-width basis, so all three tiles are equal. */
  .sh-hlt__slide:not(.sh-hlt__slide--split) {
    flex: 0 0 100%;
  }

  /* FIX: this rule previously targeted `.sh-hlt__card--half` — a class that
     doesn't exist in the DOM (the element is `.sh-hlt__col--half`), so its
     `scroll-snap-align: start` never applied. With `scroll-snap-type: x
     mandatory` on the rail, the third image was then the ONLY valid snap stop,
     so the rail was forced to rest on it ("stuck on 3rd image"). Correcting the
     class makes images 1 & 2 real snap stops; all three settle cleanly. */
  .sh-hlt__slide--split .sh-hlt__col--half {
    flex: 0 0 100%;
    scroll-snap-align: start;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  /* Third image (eng-side2): a 2000×2000 studio shot on pure white, product in
     the lower portion. Keep the card's --sp-kinari ground (do NOT override to
     #fff) so the image's mix-blend-mode:multiply drops the white out into the
     warm kinari — the same "color overlay" the sibling tiles get; that also
     makes the contain letterbox seamless (white blends to kinari either way).
     Contain it (whole frame visible) and pin to the bottom so the product sits
     low and the kinari opens up above it for the overlay copy.
     (.sh-hlt__card--zoom-desktop is the third card's stable hook; its scale()
     zoom is scoped to min-width:1120, so desktop is untouched.) */
  .sh-hlt__card--zoom-desktop .sh-hlt__img {
    object-fit: contain;
    object-position: 0% 100%;
  }

  /* Headline over the third image ("Interference-free movement. / Improved
     typing angle."): at the desktop clamp (24-32px) the first sentence alone
     wrapped to a second line on phones, pushing the whole two-line headline
     to three lines. Sized (via real Roca metrics, measured against the
     card's actual mobile width) so BOTH sentences — same element, same
     clamp — each hold a single line from a 375px phone up through the top of
     this breakpoint. */
  .sh-hlt__overlay-complex-head {
    font-size: clamp(19px, 5.2vw, 24px);
  }

  /* Anchor the third-image copy to the TOP so the headline holds one fixed
     position and the bullets expand downward (was vertically centered, which
     left dead space above on the tall tile). Symmetric left/right insets so the
     accordion rows follow the container padding instead of bleeding to the
     right edge. gap tightened; italic/btn now live inside a bullet, so the
     flex children here are just head + bullets. */
  .sh-hlt__overlay-complex--top-left {
    top: clamp(18px, 4.5vw, 26px);
    left: clamp(18px, 5vw, 24px);
    right: clamp(18px, 5vw, 24px);
    bottom: auto;
    transform: none;
    max-width: none;
    gap: 12px;
  }

  /* Bullet accordion — FAQ styling (Mark: "follow the same style as faq").
     No filled box: each row is just a hairline divider like .sh-faq__item, so
     titles read straight over the kinari ground ("looks like there's no box at
     all"). Only the EXPANDED answer gets a soft kinari wash (same hue as the
     ground) so its copy stays legible where it runs down over the product
     photo. Desktop/tablet (min-width:721px) forces answers open + toggle inert,
     so this is phone-only.
     EVERY selector is scoped under .sh-hlt__complex-bullets (unique to this
     card's accordion) because .sh-hlt__complex-{bullet,icon,title,desc} are
     ALSO used by the SolutionPlaceholder feature list — scoping guarantees
     these mobile rules can never bleed into that section. */
  .sh-hlt__complex-bullets {
    gap: 0;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-bullet {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    border-bottom: 1px solid var(--sp-tetsukon-15);
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-bullet:first-child {
    border-top: 1px solid var(--sp-tetsukon-15);
  }

  /* Leading brand icon dropped on mobile for the clean FAQ row (title left,
     +/- right); it stays on desktop. */
  .sh-hlt__complex-bullets .sh-hlt__complex-icon {
    display: none;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-toggle {
    cursor: pointer;
    align-items: center;
    padding: 12px 0;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-title {
    font-size: clamp(13px, 3.6vw, 15px); /* reduced per Mark */
    font-weight: 600;
    padding-right: 14px;
  }

  /* +/- icon: identical mechanism to .sh-faq__icon — vertical bar rotates +
     fades on open, horizontal bar rotates, so + becomes −. */
  .sh-hlt__complex-bullets .sh-hlt__complex-icon-toggle {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--sp-fg);
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-icon-v {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-bullet.is-open .sh-hlt__complex-icon-v {
    transform: rotate(90deg);
    opacity: 0;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-icon-h {
    transition: transform 0.3s ease;
    transform-origin: center;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-bullet.is-open .sh-hlt__complex-icon-h {
    transform: rotate(180deg);
  }

  /* Expanded answer: soft kinari wash + blur for legibility over the photo;
     copy runs full width inside the row. */
  .sh-hlt__complex-bullets .sh-hlt__complex-ans-inner {
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(236, 231, 221, 0.7); /* --sp-kinari @ 70% */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 8px;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-desc {
    max-width: none;
    font-size: 13px;
    line-height: 1.5;
  }

  .sh-hlt__complex-bullets .sh-hlt__complex-italic {
    max-width: none;
    font-size: 12.5px;
    font-weight: 700; /* Mark: bold "Learn why…" */
  }

  /* Override the base pill's negative margin-top (-8px, meant for the old
     below-bullets placement) and add clear space between the italic line and
     the button beneath it. */
  .sh-hlt__complex-bullets .sh-hlt__complex-btn {
    margin-top: 8px;
  }

  .sh-hlt__copy {
    padding: 16px 14px;
  }

  .sh-hlt__card-title {
    font-size: clamp(15px, 4vw, 19px);
    max-width: 18ch;
  }

  .sh-hlt__eyebrow {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .sh-hlt__detail {
    padding: 16px 14px 64px;
  }

  .sh-hlt__detail p {
    font-size: 13px;
    line-height: 1.5;
  }

  .sh-hlt__plus {
    left: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
  }
}

/* Neutralize the bullet accordion above 720px (tablet + desktop): the
   underlying React state defaults to closed for the mobile plus/minus UX, so
   without this the description would render collapsed everywhere. Force it
   open and drop the (mobile-only) toggle affordance — this is what keeps
   every width above the phone breakpoint pixel-identical to the pre-accordion
   layout, which is the point: this feature is mobile-only by design. */
@media (min-width: 721px) {
  .sh-hlt__complex-ans {
    display: block !important;
  }

  .sh-hlt__complex-toggle {
    cursor: default;
    pointer-events: none;
  }
}

@media (max-width: 860px) {
  .sh-leftcap::before {
    inset: auto 0 0 0;
    width: 100%;
    height: 62%;
  }

  .sh-leftcap__inner {
    grid-template-columns: 1fr;
  }

  .sh-leftcap__caption {
    padding-right: 0;
    margin-bottom: 8px;
  }

  .sh-leftcap__grid {
    padding: clamp(24px, 5vw, 40px) 0 0;
  }
}

/* ── LEFT: scrolling stack ── */
.sh-stickyform__stack {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  gap: clamp(48px, 5.5vw, 88px);
  /* Left padding gives the scroll content breathing room from the caption
     column on the left now that the grid gap is 0. */
  padding: 24px 0 clamp(96px, 12vw, 200px) var(--sf-text-inset);
  color: var(--sp-fg-on-dark);
}

.sh-stickyform__stack-head {
  margin: 0 0 clamp(16px, 2vw, 32px);
}

.sh-stickyform__stack-title {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--sp-fg-on-dark);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}

.sh-stickyform__stack .sh-stickyform__frame-title {
  font-family: var(--sp-font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--sp-fg-on-dark);
  margin: 0 0 4px;
}

.sh-stickyform__stack .sh-stickyform__frame-body {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.4;
  color: var(--sp-fg-on-dark-muted);
  max-width: 40ch;
  text-wrap: pretty;
  margin: 0;
}

.sh-stickyform__stack .sh-stickyform__frame-body strong {
  font-weight: 600;
  color: var(--sp-fg-on-dark);
}

.sh-stickyform__stack .sh-stickyform__frame-copy {
  gap: 0;
}

.sh-stickyform__stack .sh-stickyform__frame-label,
.sh-stickyform__stack .sh-stickyform__frame-placeholder {
  color: rgba(244, 240, 232, 0.55);
}

/* Keep media background as kinari (default) so the multiply-blended gif
   reads the same warm tone as the "from every angle" showcase. The faint
   overlay version is only used when there is NO image (empty state). */
.sh-stickyform__stack .sh-stickyform__frame-media:not(:has(img)) {
  background: rgba(244, 240, 232, 0.05);
  border-color: rgba(244, 240, 232, 0.12);
}

.sh-stickyform__frame {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sh-stickyform__frame-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sh-stickyform__frame-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--sp-kinari);
  border-radius: var(--sh-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  margin: auto 0;
  /* center vertically if frame is taller than content */
}

.sh-stickyform__frame-media:not(:has(img)) {
  border: 1px dashed var(--sp-rule);
}

/* Place the showcase-style tag at the TOP of the lifestyle gif frame
   instead of the bottom (default in .sh-showcase__tag is bottom: 14px). */
.sh-stickyform__frame-media .sh-showcase__tag {
  top: 14px;
  bottom: auto;
}

/* ── Palm-rest pointer annotation (first lifestyle frame) ─────────── */
.sh-pa {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translateZ(0);
}

/* dashed connector line, node → active hex (width-animated; rotation fixed) */
.sh-pa__line {
  position: absolute;
  height: 1px;
  width: 0;
  transform-origin: left center;
  transform: rotate(var(--a, 0rad));
  background: repeating-linear-gradient(90deg, var(--sp-asagi) 0 2px, transparent 2px 7px);
  opacity: 0;
  transition: opacity 0.3s ease, width 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sh-pa__line.is-on {
  width: var(--len, 0);
  opacity: 1;
  /* point AFTER the copy has appeared */
  transition: opacity 0.3s ease 0.55s, width 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s;
}

/* hexagon tip — only the active one shows */
.sh-pa__hex {
  position: absolute;
  width: 11px;
  height: 10px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sh-pa__hex svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sh-pa__hex polygon {
  fill: rgba(78, 155, 166, 0.18);
  stroke: var(--sp-asagi);
  stroke-width: 1;
  stroke-linejoin: round;
}

.sh-pa__hex.is-on {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s,
    opacity 0.4s ease 1.15s;
}

/* fixed copy anchor, bottom-left white area — fades in/out with each spot */
.sh-pa__label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sh-pa__label--left {
  transform: translateY(-50%);
  flex-direction: row;
}

.sh-pa__label--center {
  transform: translate(-50%, -50%);
  flex-direction: row;
  text-align: left;
}

.sh-pa__label--center .sh-pa__label-text {
  white-space: normal;
  max-width: 26ch;
}

.sh-pa__label--right {
  transform: translate(-100%, -50%);
  flex-direction: row-reverse;
  text-align: right;
}

.sh-pa__label--right .sh-pa__label-text {
  white-space: normal;
  max-width: 15ch;
}

.sh-pa__label--wrap .sh-pa__label-text {
  white-space: normal;
  max-width: 22ch;
}

.sh-pa__label.is-on {
  opacity: 1;
  transition: opacity 0.5s ease 0.05s;
}

.sh-pa__node {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sp-asagi);
  flex: 0 0 auto;
}

.sh-pa__label-text {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
  color: var(--sp-fg);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

  .sh-pa__line,
  .sh-pa__hex {
    transition: none;
  }
}

/* ── Gap annotation · static single callout (vertical line, right side) ── */
.sh-ga {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.sh-ga__line {
  position: absolute;
  width: 1px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  background: repeating-linear-gradient(180deg, var(--sp-asagi) 0 2px, transparent 2px 7px);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sh-ga.is-in .sh-ga__line {
  transform: translateX(-50%) scaleY(1);
  transition-delay: 0.55s;
}

.sh-ga__node {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sp-asagi);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sh-ga.is-in .sh-ga__node {
  opacity: 1;
  transition-delay: 0.05s;
}

.sh-ga__hex {
  position: absolute;
  width: 11px;
  height: 10px;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.sh-ga.is-in .sh-ga__hex {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition-delay: 1.2s;
}

.sh-ga__hex svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sh-ga__hex polygon {
  fill: rgba(78, 155, 166, 0.18);
  stroke: var(--sp-asagi);
  stroke-width: 1;
  stroke-linejoin: round;
}

.sh-ga__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  padding-right: 14px;
  color: var(--sp-fg);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.sh-ga__label-text {
  white-space: nowrap;
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
}

.sh-ga.is-in .sh-ga__label {
  opacity: 1;
  transition-delay: 0.05s;
  pointer-events: auto;
}

.sh-ga__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.sh-ga__cta-head {
  font-family: var(--sp-font-sans);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--sp-fg-subtle);
}

.sh-ga__disclaimer {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--sp-tetsukon-15);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: var(--sp-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg-muted);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sh-ga__disclaimer:hover {
  border-color: var(--sp-tetsukon-30);
  color: var(--sp-fg);
  background: rgba(255, 255, 255, 0.85);
}

/* Desktop: drop the gap line marker ~8% so it lands on the mark (mobile is
   handled separately in the max-width:860px block). */
@media (min-width: 861px) {
  .sh-stickyform__stack .sh-ga {
    transform: translateY(9%);
  }

  /* Center the bullet (node at 12%) on the 2-line gap copy (~40px tall). */
  .sh-stickyform__stack .sh-ga__label {
    top: 12% !important;
    transform: translateY(-20px);
  }

  /* Drop the "Surface so fresh" frame's marker 2% (2nd frame in the stack). */
  .sh-stickyform__stack .sh-stickyform__frame:nth-of-type(2) .sh-pa {
    transform: translateY(2%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-ga__line {
    transform: translateX(-50%) scaleY(1);
  }

  .sh-ga__node,
  .sh-ga__label,
  .sh-ga__hex {
    opacity: 1;
  }

  .sh-ga__hex {
    transform: translate(-50%, -50%) scale(1);
  }
}

.sh-stickyform__frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* match the showcase gif treatment for visual continuity */
  mix-blend-mode: multiply;
}

.sh-stickyform__frame-label {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--sp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
}

.sh-stickyform__frame-placeholder {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
}

.sh-stickyform__frame-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

/* Match SmallTile ("02 · Locate / One click. No adhesive.") style on the
   scrolling stack: small serif title + 13.5px sans body. */
.sh-stickyform__frame-title {
  font-family: var(--sp-font-serif);
  font-weight: 600;
  font-size: clamp(24px, 1.9vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: var(--sp-fg);
}

.sh-stickyform__frame-body {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sp-fg-muted);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ── RIGHT: sticky caption with stationary bottom image ── */
/* Left caption column bleeds to the viewport's left edge so the hero
   image extends past the section's normal side padding. */
.sh-stickyform__caption {
  position: sticky;
  top: var(--sh-nav-h, 64px);
  height: calc(100vh - var(--sh-nav-h, 64px));
  grid-column: 1;
  display: block;
  overflow: visible;
  /* let the hero bleed rightward into the column gap */
  /* Bleed to the viewport's left edge. Below the centering threshold this
     equals the side padding; on large screens (inner capped at --sh-max and
     centered) it grows to the centered margin so the hero image still reaches
     the left edge instead of stopping short. overflow-x is clipped on
     html/body, so 100vw can't introduce a horizontal scrollbar. */
  margin-left: calc(-1 * max(var(--sh-pad-side), (100vw - var(--sh-max)) / 2));
}

.sh-stickyform__caption-text {
  position: relative;
  z-index: 2;
  /* Pull text back from the bled left edge so the headline aligns with the
     page's content margin (mirror of the old right-column inset). */
  padding: clamp(44px, 6vh, 80px) 0 0 calc(max(var(--sh-pad-side), (100vw - var(--sh-max)) / 2));
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: calc(42ch + var(--sf-text-inset));
}

.sh-stickyform__caption-text .sh-eyebrow {
  color: var(--sp-fg-subtle);
}

.sh-stickyform__title {
  color: var(--sp-fg);
  text-wrap: pretty;
  max-width: 18ch;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  /* enlarged for prominence */
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.sh-stickyform__title-em {
  color: var(--sp-fg-subtle);
  display: inline;
}

/* Desktop caption headline: force the intended line breaks and size the
   box to its content so wrapping is identical at every viewport width
   (prevents the big-screen reflow that stacked each word). */
.sh-stickyform__caption-text .sh-stickyform__title {
  max-width: none;
  width: max-content;
  font-size: clamp(1.44rem, 2.34vw, 1.94rem);
  text-wrap: nowrap;
}

.sh-stickyform__caption-text .sh-stickyform__title-em {
  display: block;
}

/* Brand mark above the headline (desktop only — caption-text is hidden on
   mobile). Width ≈ the word "Palm"; balanced spacing below. */
/* Brand mark above the headline (desktop only — caption-text is hidden on
   mobile). Width ≈ the word "Palm"; balanced spacing below. */
.sh-stickyform__mark {
  display: block;
  width: 84px;
  height: auto;
  margin: 0 0 16px;
}

/* iPad / tablet: headline + mark inherit the base desktop sizing
   (clamp(1.2rem, 2.4vw, 1.8rem) / 84px). An earlier per-range bump here
   oversized them on smaller desktops and pushed the headline over the
   image, so it was removed. */
.sh-stickyform__body {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6;
  color: var(--sp-fg-muted);
  margin: 0;
  max-width: 36ch;
}

/* Hero image anchored to the bottom of the sticky column.
   It bleeds LEFT into the column gap so it touches the blue panel,
   but the caption text above keeps its own left margin (no shift). */
/* Hero image anchored to the bottom of the sticky column.
   With sf-gap = 0, the right column's left edge sits flush against the
   left column — and against the blue panel — so the image meets blue
   with no seam by construction. */
.sh-stickyform__hero {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  z-index: 1;
  overflow: visible;
}

.sh-stickyform__hero img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* Vertical fade — reduced height (~20% shorter than before).
   IMPORTANT: end-stop uses rgba(236,231,221,0) instead of `transparent`
   so the interpolation stays in the kinari color family (matches the
   section background, same as the "Built for the compromises" section).
   Plain `transparent` is `rgba(0,0,0,0)`, which causes the mid-fade to dip
   through gray and read as a faint horizontal band over the image. */
.sh-stickyform__hero-scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 26%;
  background: linear-gradient(to bottom,
      rgba(236, 231, 221, 1) 0%,
      rgba(236, 231, 221, 0.7) 38%,
      rgba(236, 231, 221, 0.28) 68%,
      rgba(236, 231, 221, 0) 100%);
  pointer-events: none;
  z-index: 6;
}

/* ── Lifestyle video hero: play chip + expanding player ──────── */
/* Media wrapper — anchors the scrim + player to the IMAGE box (not the
   whole figure), so flow siblings like the mobile chip stay clear. */
.sh-lvh__media {
  position: relative;
  display: block;
  line-height: 0;
}

.sh-lvh__chip {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 40px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 18px 8px 8px;
  /* Muted — follows the inactive paddle-arrow look: soft white fill + hairline. */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--sp-tetsukon-15);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.22s var(--sp-ease-glide), transform 0.22s var(--sp-ease-snap), opacity 0.45s var(--sp-ease-glide), visibility 0.45s;
  max-width: calc(100% - 32px);
}

.sh-lvh__chip:hover {
  background: var(--sp-white);
  border-color: var(--sp-tetsukon-30);
  transform: translateX(-50%) translateY(-2px);
}
@media (hover: hover) and (min-width: 1024px),
(min-width: 1500px) {
  .sh-lvh__chip {
    background: rgba(46, 106, 120, 0.82);
    border-color: rgba(245, 242, 236, 0.14);
    color: #ffffff;
  }
  .sh-lvh__chip .sh-lvh__label {
    color: #ffffff;
  }
  .sh-lvh__chip:hover {
    background: rgba(46, 106, 120, 0.92);
    border-color: rgba(245, 242, 236, 0.14);
  }
}


/* While the video plays, the chip stays MOUNTED but invisible — it keeps its
   layout box (mobile flow) so the section height never shifts. Fades out as
   the video opens and back in when it closes. */
.sh-lvh__chip.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sh-lvh__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
}

.sh-lvh__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.sh-lvh__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 42, 52, 0.32);
}

.sh-lvh__play svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.sh-lvh__label {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sp-fg);
  white-space: nowrap;
}

/* Expanded player — fills the image area */
.sh-lvh__player {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--sp-kinari);
  border-radius: inherit;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.95s var(--sp-ease-glide);
}

.sh-lvh__player.is-fading {
  opacity: 0;
}

/* Always mounted (so iOS can play() within the user gesture); it carries no
   src until tapped, so it never paints a black box — kept out of sight behind
   the play chip until playback actually starts. */
.sh-lvh__player:not(.is-playing) {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.sh-stickyform__hero.is-playing .sh-stickyform__hero-scrim {
  display: block;
}

.sh-lvh__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--sp-kinari);
}

.sh-lvh__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 42, 52, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 7;
  transition: background 0.2s ease;
}

.sh-lvh__close:hover {
  background: rgba(27, 42, 52, 0.85);
}

.sh-lvh__close svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}

/* Mobile-only play button overlaid on the lifestyle image — hidden on desktop. */
.sh-lvh__cornerplay {
  display: none;
}

/* New mobile-only elements — hidden on desktop */
.sh-stickyform__mhead {
  display: none;
}

.sh-stickyform__dots {
  display: none;
}

.sh-stickyform__controls {
  display: none;
}

/* ── Mobile: headline → swipeable feature carousel → hand-typing photo,
   all on one screen with a single seamless background ── */
@media (max-width: 860px) {
  .sh-stickyform {
    padding: 0 var(--sh-pad-side);
    --sf-gap: 0px;
    --sf-text-inset: 0px;
    background: var(--sp-shironeri);
  }

  .sh-stickyform::before {
    display: none;
  }

  .sh-stickyform__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100vh;
    min-height: 100svh;
    /* svh, not dvh — stable while Safari's toolbar collapses */
  }

  /* 1 · Headline at the very top */
  .sh-stickyform__mhead {
    display: block;
    order: 0;
    padding: clamp(64px, 6.5vw, 96px) 0 clamp(20px, 5vw, 32px);
  }

  .sh-stickyform__mhead .sh-stickyform__title {
    max-width: none;
    font-size: clamp(2rem, 4vw, 3rem);
    text-wrap: pretty;
    letter-spacing: -0.03em;
    line-height: 1.02;
  }

  .sh-stickyform__mhead .sh-stickyform__title-em {
    display: block;
  }

  /* 2 · Features — horizontal swipe carousel, transparent so the section's
     shironeri shows through and blends into the photo below */
  .sh-stickyform__stack {
    order: 1;
    background: transparent;
    color: var(--sp-fg);
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    box-sizing: border-box;
    width: 100vw;
    margin: 0 0 0 calc(-1 * var(--sh-pad-side));
    padding: 0 var(--sh-pad-side);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    margin-top: clamp(24px, 7vw, 44px);
    margin-bottom: 0;
    scroll-padding-left: var(--sh-pad-side);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sh-stickyform__stack::-webkit-scrollbar {
    display: none;
  }

  .sh-stickyform__frame {
    flex: 0 0 min(93%, 400px); /* Adjusted width to reduce peaking */
    scroll-snap-align: start;
    gap: 8px;
  }

  .sh-stickyform__frame-media {
    aspect-ratio: 1 / 1;
  }

  /* Lower the gap line marker 10% on mobile so it sits better on the photo. */
  .sh-stickyform__stack .sh-ga {
    transform: translateY(8%);
  }

  /* Lift the gap copy ~5% (top 12%→7%); the bottom hex marker stays locked. */
  .sh-stickyform__stack .sh-ga__label {
    top: 7% !important;
    transform: translateY(-20px);
  }

  /* Re-center the bullet on the copy (~7%) and extend the line to the hex. */
  .sh-stickyform__stack .sh-ga__node {
    top: 7% !important;
  }

  .sh-stickyform__stack .sh-ga__line {
    top: 8% !important;
    height: 65% !important;
  }

  /* "Surface so fresh" frame (2nd): copy sits just above the node center;
     hex markers stay put (the line redraws to the node). */
  .sh-stickyform__stack .sh-stickyform__frame:nth-of-type(2) .sh-pa__label--left {
    transform: translateY(calc(-50% - 6px));
    margin-top: 7%;
  }

  /* Carousel images are clean — no overlaid tag/label */
  .sh-stickyform__stack .sh-showcase__tag {
    display: none;
  }

  /* Copy below each image uses the same body style as the "Built for…" section */
  .sh-stickyform__stack .sh-stickyform__frame-title {
    font-family: var(--sp-font-sans);
    font-weight: 600;
    font-size: 15px; /* Reduced from 17px */
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: rgba(41, 38, 27, 0.9);
    text-wrap: pretty;
    max-width: 50%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .sh-stickyform__stack .sh-stickyform__frame-body {
    color: var(--sp-fg-muted);
  }

  /* Circle paddle buttons (same style as the Zero Tolerance section) —
     right-aligned, tucked close under the carousel. Generous space below
     gives the lifestyle photo room to breathe. */
  .sh-stickyform__controls {
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    order: 2;
    padding: 12px 0 0;
    margin-bottom: clamp(48px, 13vw, 88px);
  }

  .sh-stickyform__paddles {
    display: flex;
    gap: 12px;
  }

  .sh-stickyform__paddle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--sp-tetsukon-15);
    background: rgba(255, 255, 255, 0.55);
    color: var(--sp-fg);
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  }

  .sh-stickyform__paddle:active:not(:disabled) {
    background: var(--sp-white);
    border-color: var(--sp-tetsukon-30);
  }

  .sh-stickyform__paddle:disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* 4 · Caption now carries only the hand-typing photo, anchored at the bottom */
  .sh-stickyform__caption {
    order: 3;
    position: static;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    border: 0;
  }

  .sh-stickyform__caption-text {
    display: none;
  }

  .sh-stickyform__hero {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: auto;
    margin: 0 calc(-1 * var(--sh-pad-side));
    width: auto;
    border: 0;
    display: flex;
    flex-direction: column;
    line-height: 0;
    flex: 0 0 auto;
    /* reset global flex: 1 to prevent 0-height collapse */
  }

  .sh-stickyform__hero img {
    display: block;
    border: 0;
    max-height: 50vh;
    object-fit: contain;
    object-position: center bottom;
  }

  /* Reserve the still's box (3000×2187) up front so it doesn't jolt the
     layout when the image loads as you scroll into the section. */
  .sh-lvh__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 3000 / 2187;
  }

  .sh-stickyform__hero-scrim {
    height: 80px;
    display: block;
    /* Match the lighter shironeri mobile background so the image top edge
       (and the video poster) blends in with no seam. */
    background: linear-gradient(to bottom,
        rgba(245, 242, 236, 1) 0%,
        rgba(245, 242, 236, 0.7) 38%,
        rgba(245, 242, 236, 0.28) 68%,
        rgba(245, 242, 236, 0) 100%);
  }

  /* "Watch Snappalm in action" becomes a section-style HEADLINE sitting
     above the image — the pill chrome (background, border, thumbnail) is
     stripped so it reads as a heading, essentially its own little section. */
  .sh-lvh__chip {
    position: static;
    order: -1;
    left: auto;
    bottom: auto;
    transform: none;
    align-self: stretch;
    display: block;
    text-align: center;
    /* image bleeds full-width via the hero's negative margins, so inset the
       headline back to the section's content edge */
    margin: 0 0 clamp(18px, 5vw, 28px);
    padding: 0 var(--sh-pad-side);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    max-width: none;
    line-height: 1;
  }

  .sh-lvh__chip:hover {
    background: none;
    transform: none;
  }

  /* Drop the little video thumbnail — the headline carries the meaning now. */
  .sh-lvh__chip .sh-lvh__thumb {
    display: none;
  }

  .sh-lvh__chip .sh-lvh__label {
    font-family: var(--sp-font-display);
    font-weight: 700;
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: none;
    white-space: normal;
    text-wrap: balance;
    color: var(--sp-fg);
  }

  /* Simple round play button on the image's bottom-right, in the Buy-button
     teal. Triggers playback; fades out while the video runs. */
  .sh-lvh__cornerplay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: clamp(16px, 5vw, 28px);
    bottom: clamp(16px, 5vw, 28px);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(46, 106, 120, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 242, 236, 0.14);
    color: #fff;
    cursor: pointer;
    z-index: 5;
    line-height: 0;
    transition: background 0.22s var(--sp-ease-glide), transform 0.22s var(--sp-ease-snap);
  }

  .sh-lvh__cornerplay svg {
    width: 24px;
    height: 24px;
    fill: #fff;
    margin-left: 3px;
    /* optical-center the triangle */
  }

  .sh-lvh__cornerplay:active {
    background: rgba(46, 106, 120, 0.92);
    transform: scale(0.96);
  }

  .sh-lvh__cornerplay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Give the headline room: trim the image a touch so the headline + image
     pair sits as one screen-filling block (only this section above the fold). */
  .sh-stickyform__hero img {
    max-height: 44vh;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT BENEFITS · Apple-style 3×2 dark card grid
   - Dark navy (tetsukon) background section
   - Eyebrow + .sh-h2 header (matches surrounding sections)
   - 6 square cards with mixed presentation patterns:
       • text-top + bleeding photo below
       • large stat (text-only)
       • full-bleed photo + text overlay on top
       • icon + text label
   - Mobile: 2 columns
   ═══════════════════════════════════════════════════════════════ */
.sh-bgrid {
  background: var(--sp-tetsukon);
  color: var(--sp-fg-on-dark);
  padding: clamp(72px, 9vw, 144px) var(--sh-pad-side);
}

.sh-bgrid__inner {
  max-width: var(--sh-max);
  margin: 0 auto;
}

.sh-bgrid__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  margin: 0 0 clamp(40px, 5vw, 72px);
}

.sh-bgrid__head .sh-eyebrow {
  color: rgba(244, 240, 232, 0.55);
}

.sh-bgrid__title {
  color: var(--sp-fg-on-dark);
  text-wrap: balance;
  max-width: 24ch;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
}

.sh-bgrid__title-em {
  color: rgba(244, 240, 232, 0.55);
  display: inline;
}

.sh-bgrid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}

/* 3-card strip: landscape ratio + remove the full-viewport height stretch */
#benefits-grid .sh-bcard {
  aspect-ratio: 4 / 3;
}

@media (min-width: 861px) {
  #benefits-grid {
    min-height: 0;
    display: block;
  }

  #benefits-grid .sh-bgrid__inner {
    flex: unset;
    display: block;
  }

  #benefits-grid .sh-bgrid__grid {
    flex: unset;
    grid-template-rows: auto;
  }

  #benefits-grid .sh-bcard {
    height: auto;
  }
}

/* ─── Card base ─── */
.sh-bcard {
  position: relative;
  background: rgba(244, 240, 232, 0.035);
  border: 1px solid rgba(244, 240, 232, 0.06);
  border-radius: var(--sh-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  padding: clamp(20px, 1.8vw, 32px);
  color: var(--sp-fg-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.sh-bcard__title {
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-fg-on-dark);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}

.sh-bcard__lede {
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(244, 240, 232, 0.62);
  letter-spacing: 0;
}

.sh-bcard__stat {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(48px, 5.8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--sp-fg-on-dark);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-wrap: balance;
}

.sh-bcard__stat-unit {
  font-family: var(--sp-font-display);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(244, 240, 232, 0.75);
}

.sh-bcard__stat-glyph {
  display: inline-block;
  width: 0.55em;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline-light);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 6px;
}

.sh-bcard__caption {
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: clamp(12.5px, 0.95vw, 14px);
  line-height: 1.5;
  color: rgba(244, 240, 232, 0.7);
  max-width: 22ch;
  margin: 0;
}

/* Media placeholder block — fills remaining space */
.sh-bcard__media {
  width: 100%;
  flex: 1;
  background: rgba(244, 240, 232, 0.045);
  border: 1px dashed rgba(244, 240, 232, 0.10);
  border-radius: var(--sh-radius);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 80px;
}

.sh-bcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sh-bcard__placeholder {
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.4);
}

/* ─── Variant: text top, media bleeds to card edges ─── */
.sh-bcard--text-top {
  justify-content: flex-start;
  padding-bottom: 0;
}

.sh-bcard--text-top .sh-bcard__media {
  align-self: stretch;
  margin: 4px calc(-1 * clamp(20px, 1.8vw, 32px)) 0;
  border-radius: 0 0 var(--sh-radius) var(--sh-radius);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* ─── Variant: large stat centered ─── */
.sh-bcard--stat {
  justify-content: center;
  gap: 14px;
}

/* ─── Variant: full-bleed image with overlay text ─── */
.sh-bcard--image-overlay {
  padding: 0;
  justify-content: flex-start;
  gap: 0;
}

.sh-bcard--image-overlay .sh-bcard__media--fill {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  z-index: 0;
}

.sh-bcard--image-overlay .sh-bcard__overlay {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 1.8vw, 32px) clamp(20px, 1.8vw, 32px) 0;
  width: 100%;
}

/* ─── Variant: icon + label, no media ─── */
.sh-bcard--icon {
  justify-content: center;
  gap: 22px;
}

.sh-bcard__icon {
  display: block;
  width: 56px;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline-light);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
}

/* ─── Modifier: light surface (paper bg, ink text) ─── */
.sh-bgrid--light {
  background: var(--sp-bg);
  color: var(--sp-fg);
}

.sh-bgrid--light .sh-bgrid__head .sh-eyebrow {
  color: var(--sp-fg-subtle);
}

.sh-bgrid--light .sh-bgrid__title {
  color: var(--sp-fg);
}

.sh-bgrid--light .sh-bgrid__title-em {
  color: var(--sp-fg-subtle);
}

.sh-bgrid--light .sh-bcard {
  background: var(--sp-bg-elevated);
  border-color: var(--sp-tetsukon-15);
  color: var(--sp-fg);
}

.sh-bgrid--light .sh-bcard__title {
  color: var(--sp-fg);
}

.sh-bgrid--light .sh-bcard__lede {
  color: var(--sp-fg-subtle);
}

.sh-bgrid--light .sh-bcard__stat {
  color: var(--sp-fg);
}

.sh-bgrid--light .sh-bcard__stat-unit {
  color: var(--sp-fg-muted);
}

.sh-bgrid--light .sh-bcard__caption {
  color: var(--sp-fg-muted);
}

.sh-bgrid--light .sh-bcard__placeholder {
  color: var(--sp-fg-subtle);
}

.sh-bgrid--light .sh-bcard__media {
  background: var(--sp-shironeri);
  border-color: var(--sp-tetsukon-15);
}

.sh-bgrid--light .sh-bcard__stat-glyph {
  background-image: var(--hex-outline);
}

.sh-bgrid--light .sh-bcard__icon {
  background-image: var(--hex-outline);
  opacity: 0.6;
}

/* Photo cards need the warm kinari backing so the image's multiply blend
   reads the same warm overlay as the showcase — override the light-card
   white background (which would neutralize the multiply). */
.sh-bgrid--light .sh-bcard--photo {
  background: var(--sp-kinari);
}

/* ─── Variant: full-bleed photo with a positioned label plaque ─── */
.sh-bcard--photo {
  padding: 0;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  aspect-ratio: 4 / 5;
  /* corner radius follows the lifestyle frames directly above */
  border-radius: var(--sh-radius);
  /* warm paper backing so the photo's multiply blend reads the same
     tone as the "from every angle" showcase */
  background: var(--sp-kinari);
}

.sh-bcard__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
  filter: brightness(0.99) saturate(0.96);
}

/* ── Caption: node + straight dashed line (draws in) + left-aligned copy,
   matching the lifestyle FrameAnno (.sh-pa) vocabulary. ── */
.sh-bcard__cap {
  position: absolute;
  left: clamp(16px, 1.8vw, 26px);
  right: clamp(16px, 1.8vw, 26px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(9px, 0.9vw, 13px);
  text-align: left;
}

.sh-bcard__cap--top {
  top: clamp(16px, 2vw, 30px);
}

.sh-bcard__cap--bottom {
  bottom: clamp(16px, 2vw, 30px);
}

/* node + straight horizontal dashed line — same asagi ink + dash pattern as
   .sh-pa__line / .sh-pa__node, but the line stays straight (never angled). */
.sh-bcard__cap-pointer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-bcard__cap-node {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sp-asagi);
  flex: 0 0 auto;
}

/* dashed connector — same width-transition reveal as sp-anno's .sp-anno__line,
   but kept straight/horizontal. Hidden (width 0) until .is-on. */
.sh-bcard__cap-rule {
  display: block;
  flex: 0 0 auto;
  width: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sp-asagi) 0 2px, transparent 2px 7px);
  transition: width 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* draw the line AFTER the copy has appeared — same timing as .sh-pa__line.is-on */
.sh-bcard__cap.is-on .sh-bcard__cap-rule {
  width: clamp(34px, 4vw, 54px);
  transition: width 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}

/* copy: same face / weight / metrics as .sh-pa__label-text. Reveal via opacity
   like sp-anno's .sp-anno__label. */
.sh-bcard__cap-copy {
  margin: 0;
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: 0;
  color: var(--sp-fg);
  max-width: 22ch;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sh-bcard__cap.is-on .sh-bcard__cap-copy {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .sh-bcard__cap-rule,
  .sh-bcard__cap-copy {
    transition: none;
  }

  .sh-bcard__cap.is-on .sh-bcard__cap-rule {
    width: clamp(34px, 4vw, 54px);
  }

  .sh-bcard__cap.is-on .sh-bcard__cap-copy {
    opacity: 1;
    transform: none;
  }
}

/* ── Bag tag: showcase pill style, set above, in the Care & Use (mono) face ── */
.sh-bcard__tag {
  top: clamp(14px, 1.4vw, 22px);
  bottom: auto;
  font-family: var(--sp-font-mono);
}

.sh-bcard__label {
  position: absolute;
  z-index: 2;
  background: var(--sp-bg-elevated);
  border: 1px solid var(--sp-tetsukon-15);
  border-radius: var(--sh-radius);
  padding: clamp(10px, 0.9vw, 15px) clamp(13px, 1.1vw, 18px);
  box-shadow: 0 6px 22px rgba(27, 42, 52, 0.12);
  max-width: 70%;
  text-align: left;
}

.sh-bcard__label-title {
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sp-fg);
  margin: 0;
  text-wrap: balance;
}

/* placement — sits in each photo's white negative space */
.sh-bcard__label--tl {
  top: clamp(12px, 1vw, 18px);
  left: clamp(12px, 1vw, 18px);
}

.sh-bcard__label--tr {
  top: clamp(12px, 1vw, 18px);
  right: clamp(12px, 1vw, 18px);
}

.sh-bcard__label--bl {
  bottom: clamp(12px, 1vw, 18px);
  left: clamp(12px, 1vw, 18px);
}

.sh-bcard__label--br {
  bottom: clamp(12px, 1vw, 18px);
  right: clamp(12px, 1vw, 18px);
}

.sh-bcard__label--tc {
  top: clamp(12px, 1vw, 18px);
  left: clamp(12px, 1vw, 18px);
  right: clamp(12px, 1vw, 18px);
  max-width: none;
  text-align: center;
}

/* ─── Tablet/iPad: keep 3 columns but tighter ─── */
@media (min-width: 861px) and (max-width: 1180px) {
  .sh-bgrid__grid {
    gap: 12px;
  }

  .sh-bcard {
    padding: 18px;
    border-radius: var(--sh-radius);
  }

  .sh-bcard__title {
    font-size: clamp(15px, 1.7vw, 20px);
  }

  .sh-bcard__stat {
    font-size: clamp(40px, 6vw, 60px);
  }
}

/* ─── Desktop & iPad: fit entire section (header + 3×2 grid) to viewport ─── */
@media (min-width: 861px) {
  .sh-bgrid {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: clamp(48px, 5vw, 88px) var(--sh-pad-side);
  }

  .sh-bgrid__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .sh-bgrid__head {
    margin-bottom: clamp(24px, 2.6vw, 40px);
  }

  .sh-bgrid__grid {
    flex: 1;
    grid-template-rows: 1fr 1fr;
    gap: clamp(10px, 1vw, 18px);
    min-height: 0;
  }

  .sh-bcard {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
    padding: clamp(16px, 1.4vw, 26px);
    border-radius: var(--sh-radius);
    gap: 12px;
  }

  .sh-bcard__title {
    font-size: clamp(15px, 1.4vw, 22px);
    max-width: 16ch;
  }

  .sh-bcard__stat {
    font-size: clamp(38px, 4.8vw, 72px);
  }

  .sh-bcard__caption {
    font-size: clamp(11.5px, 0.8vw, 13px);
  }

  .sh-bcard__lede {
    font-size: clamp(11.5px, 0.85vw, 13.5px);
  }

  .sh-bcard__icon {
    width: 44px;
  }

  .sh-bcard--text-top .sh-bcard__media {
    margin: 2px calc(-1 * clamp(16px, 1.4vw, 26px)) 0;
    border-radius: 0 0 var(--sh-radius) var(--sh-radius);
  }

  .sh-bcard--image-overlay .sh-bcard__overlay {
    padding: clamp(16px, 1.4vw, 26px) clamp(16px, 1.4vw, 26px) 0;
  }
}

/* ─── Variant: 4-up single row (mini "at a glance") ─── */
@media (min-width: 861px) {
  .sh-bgrid--four {
    min-height: 0;
    display: block;
    padding-top: clamp(72px, 8vw, 128px);
    padding-bottom: clamp(72px, 8vw, 128px);
  }

  .sh-bgrid--four .sh-bgrid__inner {
    display: block;
  }

  .sh-bgrid--four .sh-bgrid__grid {
    flex: 0 0 auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
  }

  .sh-bcard--photo {
    border-radius: var(--sh-radius);
  }

  .sh-bgrid--four .sh-bcard {
    aspect-ratio: 4 / 5;
    height: auto;
  }
}

@media (max-width: 860px) {
  .sh-bgrid--four .sh-bgrid__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .sh-bgrid {
    padding: clamp(56px, 8vw, 88px) var(--sh-pad-side);
  }

  .sh-bgrid__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .sh-bcard {
    padding: 16px;
    border-radius: var(--sh-radius);
    gap: 12px;
  }

  .sh-bcard__title {
    font-size: clamp(14px, 4.2vw, 19px);
    max-width: 100%;
  }

  .sh-bcard__stat {
    font-size: clamp(30px, 9vw, 48px);
  }

  .sh-bcard__lede,
  .sh-bcard__caption {
    font-size: 11.5px;
  }

  .sh-bcard__icon {
    width: 38px;
  }

  .sh-bcard--text-top .sh-bcard__media {
    margin: 2px -16px 0;
    border-radius: 0 0 var(--sh-radius) var(--sh-radius);
  }

  .sh-bcard--image-overlay .sh-bcard__overlay {
    padding: 16px 16px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURES EDITORIAL · dynamic, multi-block layout
   Mixes asymmetric rows, triptychs, cinema, and offset duos.
   ═══════════════════════════════════════════════════════════════ */
.sh-feat {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 144px) var(--sh-pad-side);
  border-top: 1px solid var(--sp-tetsukon-15);
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 8vw, 128px);
}

.sh-feat__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
}

.sh-feat__title {
  text-wrap: balance;
  max-width: 28ch;
}

.sh-feat__title-em {
  color: var(--sp-fg-subtle);
  display: inline;
}

/* ── Shared media tile (corners + tag) ───────────────────────── */
.sh-feat__media {
  position: relative;
  background: var(--sp-kinari);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--sh-radius);
}

.sh-feat__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* ── Shared copy block ──────────────────────────────────────── */
.sh-feat__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 48ch;
  align-self: center;
}

.sh-feat__copy--big {
  gap: 22px;
}

.sh-feat__big-title {
  font-family: var(--sp-font-serif);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.2vw + 0.6rem, 2.625rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--sp-fg);
  text-wrap: balance;
  margin: 0;
}

.sh-feat__med-title {
  font-family: var(--sp-font-serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.1vw + 0.55rem, 1.5rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--sp-fg);
  margin: 0;
}

.sh-feat__med-title--sm {
  font-size: clamp(1rem, 0.6vw + 0.6rem, 1.25rem);
}

.sh-feat__body {
  font-family: var(--sp-font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sp-fg-muted);
  margin: 0;
}

.sh-feat__body--wide {
  max-width: 56ch;
}

.sh-feat__body--small {
  font-size: 13.5px;
  line-height: 1.55;
}

/* ── Bullets w/ asagi pip ────────────────────────────────────── */
.sh-feat__bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--sp-tetsukon-15);
  padding-top: 18px;
}

.sh-feat__bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--sp-fg-muted);
}

.sh-feat__pip {
  width: 6px;
  height: 6px;
  background: var(--sp-asagi);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Mini-specs row (under "the surface") ────────────────────── */
.sh-feat__minispecs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--sp-tetsukon-15);
}

.sh-feat__minispecs>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-feat__mini-n {
  font-family: var(--sp-font-mono);
  font-size: 13px;
  color: var(--sp-fg);
  letter-spacing: -0.005em;
}

.sh-feat__mini-l {
  font-family: var(--sp-font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-fg-subtle);
}

/* ── Row variants ────────────────────────────────────────────── */
.sh-feat__row {
  margin: 0;
}

/* 7/5 split — large hero feature (img left, copy right) */
.sh-feat__row--75 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}

.sh-feat__row--75 .sh-feat__media {
  aspect-ratio: 4 / 5;
}

/* 5/7 split — reversed feature (copy left, img right) */
.sh-feat__row--57 {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}

.sh-feat__row--57 .sh-feat__media {
  aspect-ratio: 4 / 5;
}

/* 3-up triptych — engineering details */
.sh-feat__row--triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.5vw, 40px);
}

.sh-feat__tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-feat__tile .sh-feat__media {
  aspect-ratio: 1 / 1;
}

.sh-feat__tile-cap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-feat__tile-title {
  font-family: var(--sp-font-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--sp-fg);
}

/* 2-up duo — side + 14in hero */
.sh-feat__row--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
}

.sh-feat__row--duo .sh-feat__duo-panel:nth-child(2) {
  margin-top: clamp(32px, 5vw, 72px);
}

.sh-feat__duo-panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sh-feat__duo-cap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 38ch;
}

/* Cinema — full-bleed image with copy beside it */
.sh-feat__row--cinema {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
}

.sh-feat__row--cinema .sh-feat__media {
  aspect-ratio: 16 / 11;
}

.sh-feat__cinema-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: clamp(16px, 3vw, 40px);
}

/* Travel duo — offset 2-up */
.sh-feat__row--travel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
}

.sh-feat__travel-panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sh-feat__travel-panel--b {
  margin-top: clamp(48px, 6vw, 96px);
}

.sh-feat__travel-panel .sh-feat__media {
  aspect-ratio: 1 / 1;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {

  .sh-feat__row--75,
  .sh-feat__row--57 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sh-feat__row--cinema {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sh-feat__row--triptych {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {

  .sh-feat__row--duo,
  .sh-feat__row--travel {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sh-feat__row--duo .sh-feat__duo-panel:nth-child(2),
  .sh-feat__travel-panel--b {
    margin-top: 0;
  }

  .sh-feat__row--triptych {
    grid-template-columns: 1fr;
  }

  .sh-feat__minispecs {
    grid-template-columns: 1fr 1fr;
  }
}

body.is-compact .sh-feat {
  padding: clamp(40px, 5vw, 64px) var(--sh-pad-side);
  gap: clamp(40px, 5vw, 64px);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .sh-ribbon {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sh-feature,
  .sh-feature.is-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sh-feature.is-reverse .sh-feature__copy,
  .sh-feature.is-reverse .sh-feature__figure {
    order: 0;
  }

  .sh-reserve__form {
    grid-template-columns: 1fr;
  }

  .sh-mhero__cta {
    flex-direction: column;
    gap: 16px;
  }

  .sh-materials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile-only line break helper (use <br className="sh-br-mobile"/>) */
.sh-br-mobile {
  display: none;
}

@media (max-width: 720px) {
  .sh-br-mobile {
    display: inline;
  }
}

/* Desktop-only nowrap helper (use <span className="sh-nowrap-desktop">) */
@media (min-width: 721px) {
  .sh-nowrap-desktop {
    white-space: nowrap;
  }
}

/* Laptop/Mobile line break helper (use <br className="sh-br-laptop"/>) */
.sh-br-laptop {
  display: none;
}

@media (max-width: 1440px) {
  .sh-br-laptop {
    display: inline;
  }
}

/* Desktop-only line break helper (use <br className="sh-br-desktop"/>) */
.sh-br-desktop {
  display: inline;
}

@media (max-width: 640px) {
  .sh-br-desktop {
    display: none;
  }
}

@media (max-width: 640px) {
  .sh-hide-desk {
    display: none;
  }
}

/* Force a child <span> onto its own line on tablet+ widths (>640px). */
.sh-block-md-up {
  display: inline;
}

@media (min-width: 641px) {
  .sh-block-md-up {
    display: block;
  }
}

/* ── PROBLEM / SOLUTION placeholders (v2 sticky layout) ─────── */
.sh-formstudy {
  padding: clamp(80px, 10vw, 140px) var(--sh-pad-side);
  position: relative;
  /* note: NO overflow:hidden — would break position:sticky inside */
}

.sh-formstudy--problem {
  background: var(--sp-tetsukon);
  color: var(--sp-fg-on-dark);
}

.sh-formstudy--solution {
  background: var(--sp-tetsukon);
  color: var(--sp-fg-on-dark);
}

.sh-formstudy__inner {
  position: relative;
  max-width: var(--sh-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}

.sh-formstudy__caption {
  position: sticky;
  top: calc(var(--sh-nav-h) + 48px);
  align-self: start;
}

.sh-formstudy__eyebrow {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-asagi);
  margin-bottom: 20px;
}

.sh-formstudy__title {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: inherit;
  text-wrap: pretty;
}

.sh-formstudy__title em {
  font-style: normal;
}

.sh-formstudy__body {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  max-width: 44ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.sh-formstudy--problem .sh-formstudy__body {
  color: rgba(244, 240, 232, 0.78);
}

.sh-formstudy--solution .sh-formstudy__body {
  color: rgba(244, 240, 232, 0.78);
}

.sh-formstudy__note {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  display: block;
  margin-top: 14px;
  max-width: 46ch;
}

.sh-formstudy--problem .sh-formstudy__note {
  color: rgba(244, 240, 232, 0.6);
}

.sh-formstudy--solution .sh-formstudy__note {
  color: rgba(244, 240, 232, 0.42);
}

.sh-formstudy__stack {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 8px 0 80px;
}

.sh-formstudy__frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sh-formstudy__frame-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--sh-radius);
  position: relative;
  overflow: hidden;
}

.sh-formstudy--problem .sh-formstudy__frame-media {
  background: var(--sp-kinari);
  border: 1px solid rgba(41, 38, 27, 0.10);
}

/* "Built for the compromises" frames get the same warm multiply color overlay
   as the showcase / solution / lifestyle imagery, for visual consistency. */
.sh-formstudy--problem .sh-formstudy__frame-img {
  mix-blend-mode: multiply;
}

.sh-formstudy--solution .sh-formstudy__frame-media {
  background: rgba(244, 240, 232, 0.05);
  border: 1px solid rgba(244, 240, 232, 0.10);
}

/* Grid only for empty (no image) state */
.sh-formstudy__frame-media:has(.sh-formstudy__frame-empty)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 48px 48px;
  pointer-events: none;
}

.sh-formstudy--problem .sh-formstudy__frame-media:has(.sh-formstudy__frame-empty)::before {
  background-image:
    linear-gradient(to right, rgba(41, 38, 27, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(41, 38, 27, 0.05) 1px, transparent 1px);
}

.sh-formstudy--solution .sh-formstudy__frame-media:has(.sh-formstudy__frame-empty)::before {
  background-image:
    linear-gradient(to right, rgba(244, 240, 232, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 240, 232, 0.05) 1px, transparent 1px);
}

.sh-formstudy__frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sh-formstudy__frame-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.4;
}

.sh-formstudy__frame-caption {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sh-formstudy__frame-label {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-asagi);
}

.sh-formstudy--solution .sh-formstudy__frame-label {
  color: var(--sp-asagi);
  opacity: 0.85;
}

.sh-formstudy__frame-desc {
  margin: 0;
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 16px);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 56ch;
}

.sh-formstudy--problem .sh-formstudy__frame-desc {
  color: rgba(244, 240, 232, 0.78);
}

/* Emphasis inside the (now navy) problem section reads light, not ink-black. */
.sh-formstudy--problem .sh-hl {
  color: var(--sp-fg-on-dark);
}

.sh-formstudy--solution .sh-formstudy__frame-desc {
  color: rgba(244, 240, 232, 0.78);
}

@media (max-width: 860px) {
  .sh-formstudy__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sh-formstudy__caption {
    position: static;
  }

  .sh-formstudy__stack {
    gap: 24px;
    padding: 0 0 24px;
  }
}

/* ── Friction reveal-in animation (used by both layouts) ────── */
.sh-formstudy__frame[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.sh-formstudy__frame[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sh-formstudy__frame[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── STATEMENT BAND — bold dark interstitial after the pain points ──── */
.sh-statement {
  background: var(--sp-tetsukon);
  color: var(--sp-fg-on-dark);
  padding: clamp(96px, 13vw, 200px) var(--sh-pad-side);
  text-align: center;
}

.sh-statement__inner {
  max-width: var(--sh-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.sh-statement__text {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--sp-fg-on-dark);
  margin: 0;
  text-wrap: balance;
}

.sh-statement__em {
  color: var(--sp-asagi);
  font-style: normal;
}

.sh-statement__logo {
  display: block;
  width: clamp(180px, 22vw, 300px);
  height: auto;
  /* Brand lockup is dark ink — invert to the cream on-dark color */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Reveal animation — reuses the friction section's pattern */
.sh-statement [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.sh-statement [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sh-statement__logo[data-reveal].is-visible {
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  .sh-statement [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sh-statement__logo[data-reveal] {
    opacity: 0.92;
  }
}

@media (max-width: 860px) {
  .sh-statement__text {
    font-size: clamp(1.9rem, 8.5vw, 3rem);
    letter-spacing: -0.03em;
  }
}

/* ── COMPLAINTS RECORD — boxed product gif beside auto-scrolling quotes,
   on the ainezu blue panel; margins follow "Built for the compromises" ── */
.sh-record {
  /* Soft asagi glow emerging from the bottom-right, fading seamlessly back
     to solid navy toward the top — gives the column lift without a seam. */
  background:
    radial-gradient(135% 110% at 100% 100%,
      rgba(78, 155, 166, 0.66) 0%,
      rgba(78, 155, 166, 0.38) 30%,
      rgba(78, 155, 166, 0.16) 52%,
      transparent 74%),
    var(--sp-tetsukon);
  padding: clamp(64px, 6.5vw, 96px) var(--sh-pad-side) clamp(96px, 10vw, 144px);
}

.sh-record__inner {
  max-width: var(--sh-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 624px) minmax(0, 1fr);
  /* Row 1 hugs the headline; row 2 (the scrolling marquee column) absorbs all
     the slack from the taller gif column beside it, so the scroll viewport
     grows up toward the headline instead of leaving a dead gap below it. */
  grid-template-rows: max-content 1fr;
  column-gap: clamp(36px, 4vw, 72px);
  row-gap: clamp(26px, 3.2vw, 42px);
}

.sh-record__cols {
  display: contents;
}

/* GIF boxed in a warm frame (like the lifestyle cards below) — contained,
   not zoomed, with corner ticks. */
.sh-record__media {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  grid-column: 2;
  grid-row: 1 / 3;
}

.sh-record__head {
  display: block;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.sh-record__head .sh-record__title {
  margin: 0;
}

/* Snappalm horizontal mark + wordmark lockup (white, tight-cropped),
   centered over the gif column. */
.sh-record__logo {
  display: block;
  height: auto;
}

.sh-record__logo--head {
  display: none;
}

/* The media-column logo is mobile-only; on desktop the head logo is used. */
.sh-record__logo--media {
  display: none;
}

/* Two benefits below the gif, each with a micrographic line icon (thin strokes,
   hexagon/datum motif) — matching the technical-drawing vocabulary. */
.sh-record__benefits {
  margin: 22px 0 0;
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  justify-content: center;
  flex-wrap: wrap;
}

.sh-record__benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 240px;
}

.sh-record__benefit-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: #9FD4DB;
}

.sh-record__benefit-text {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--sp-fg-on-dark);
  text-wrap: pretty;
}

.sh-record__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: clamp(400px, 38vw, 480px);
  /* Centered in its column — even space on both sides, no dead zone. */
  margin: 0 auto;
  background: var(--sp-kinari);
  border-radius: var(--sh-radius);
  overflow: hidden;
  /* clip-path rounds descendants (incl. the mix-blend-mode gif) on iOS Safari,
     where border-radius + overflow:hidden alone won't clip a blend-mode child. */
  clip-path: inset(0 round var(--sh-radius));
}

.sh-record__frame img,
.sh-record__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Same warm multiply color overlay as the other product imagery */
  mix-blend-mode: multiply;
}

/* ── "Introduce Snappalm" sequenced reveal inside the record frame ──────
   Driven by [data-stage] on .sh-record__frame--seq:
   stage 1 "It ends here." blurs into focus → stage 2 the wordmark fades up
   → stage 3 the product gif wipes in. Layers are stacked + cross-faded. */
/* Intro + logo float over the blue section — the cream container only
   materialises (fades in) with the product at the final beat. */
.sh-record__frame--seq {
  isolation: isolate;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-record__frame--seq[data-stage="4"] {
  background: var(--sp-kinari);
}

.sh-record__seq {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 6%, 48px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

/* Beat 1 — "Enter..." typed out. JS fills `typed` char-by-char; the ghost
   reserves the full width so the centered block doesn't shift while it types. */
.sh-record__seq--text {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.75vw, 3.13rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--sp-fg-on-dark);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-record__type {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.sh-record__type-ghost {
  visibility: hidden;
}

.sh-record__type-fill {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.sh-record__type2 {
  position: relative;
  display: inline-block;
  text-align: center;
}

.sh-record__type2-ghost {
  visibility: hidden;
}

.sh-record__type2-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
}

.sh-record__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.06em;
  animation: sh-record-caret 0.7s step-end infinite;
}

@keyframes sh-record-caret {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.sh-record__frame--seq[data-stage="1"] .sh-record__seq--text {
  opacity: 1;
}

.sh-record__frame--seq[data-stage="2"] .sh-record__seq--text,
.sh-record__frame--seq[data-stage="3"] .sh-record__seq--text,
.sh-record__frame--seq[data-stage="4"] .sh-record__seq--text {
  opacity: 0;
}

/* Beat 2 — the brand logo */
.sh-record__seq--logo {
  transform: scale(0.9) translateY(12px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-record__seq--logo img {
  position: static;
  inset: auto;
  width: min(95%, 430px);
  height: auto;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
  /* dark stacked PNG -> pure white, to float on the blue */
}

/* Stage 2: ONE smooth, continuous motion — the logo fades in (separate track)
   while the scale grows steadily in a single segment (no middle keyframe, so it
   never settles/pauses before enlarging). */
.sh-record__frame--seq[data-stage="2"] .sh-record__seq--logo {
  animation:
    sh-record-logo-fade 0.7s cubic-bezier(0.16, 1, 0.3, 1) both,
    sh-record-logo-zoom 1.9s linear both;
}

@keyframes sh-record-logo-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sh-record-logo-zoom {
  from {
    transform: scale(0.94);
  }

  to {
    transform: scale(1.12);
  }
}

/* Stage 3 & 4: scale already at 1.12 from the zoom, so the handoff is a pure fade —
   the enlarge carries straight through into the product with no jump. */
.sh-record__frame--seq[data-stage="3"] .sh-record__seq--logo,
.sh-record__frame--seq[data-stage="4"] .sh-record__seq--logo {
  opacity: 0;
  transform: scale(1.12);
}

/* Beat 3 — the product. The gif is always mounted (loaded/decoded long before
   its beat), then revealed with a soft, slow opacity fade driven by data-stage.
   A transition (not a mount-time animation) fires reliably on the stage change,
   so it can't pop in on a cold mobile decode. Keeps the .sh-record__frame img base. */
.sh-record__seq--text2 {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--sp-fg-on-dark);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9) translateY(12px);
  will-change: opacity, transform;
}

.sh-record__frame--seq[data-stage="3"] .sh-record__seq--text2 {
  animation:
    sh-record-logo-fade 0.7s cubic-bezier(0.16, 1, 0.3, 1) both,
    sh-record-logo-zoom 2.5s linear both;
}
.sh-record__frame--seq[data-stage="4"] .sh-record__seq--text2 {
  opacity: 0;
  transform: scale(1.12);
}

.sh-record__seq--product {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
}

.sh-record__frame--seq[data-stage="4"] .sh-record__seq--product {
  opacity: 1;
}

/* Placeholder mark — pulses softly with a teal glow, breathing in and out,
   until the user reaches the bottom (stage 0); then fades out as the sequence
   begins. White paths only (the SVG circle background is omitted in markup). */
.sh-record__seq--mark {
  flex-direction: column;
  transition: opacity 0.6s ease;
}

.sh-record__seq--mark svg {
  width: min(32%, 138px);
  height: auto;
  display: block;
}

.sh-record__frame--seq[data-stage="0"] .sh-record__seq--mark {
  animation: sh-record-markpulse 3s ease-in-out infinite;
}

@keyframes sh-record-markpulse {

  0%,
  100% {
    opacity: 0.3;
    filter: drop-shadow(0 0 6px rgba(159, 212, 219, 0.18));
  }

  50% {
    opacity: 0.95;
    filter: drop-shadow(0 0 24px rgba(159, 212, 219, 0.6));
  }
}

/* Thin indeterminate loading line beneath the pulsing mark */
.sh-record__loader {
  position: relative;
  width: clamp(72px, 24%, 120px);
  height: 2px;
  margin-top: clamp(16px, 4%, 26px);
  border-radius: 2px;
  background: rgba(245, 242, 236, 0.16);
  overflow: hidden;
}

.sh-record__loader-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(159, 212, 219, 0.95), transparent);
  animation: sh-record-loader 1.6s ease-in-out infinite;
}

@keyframes sh-record-loader {
  0% {
    transform: translateX(-130%);
  }

  100% {
    transform: translateX(360%);
  }
}

/* Benefits hold until the product is in, then rise */
.sh-record__benefits {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.sh-record__benefits.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* NOTE (Mark's call 2026-07-13): the .sh-record staged reveal intentionally does
   NOT suppress under prefers-reduced-motion. It is a brand centerpiece using gentle
   opacity crossfades; Windows "Animation effects: off" was reporting reduce-motion,
   which skipped the preloader + popped the GIF in. Do not re-add a reduce-motion
   block for .sh-record__seq / __seq--gif / __loader-bar / __benefits. Pairs with the
   matching JS note in components/Home.jsx. (ledger 2026-07-13) */

.sh-record__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 624px;
  grid-column: 1;
  grid-row: 2;
}

/* Left column fills the right column's height: the marquee flexes to absorb
   the slack (clipped — it's a scroll viewport, so NEVER height:auto) and the
   video link sits beneath it at the bottom. */
.sh-record__cols .sh-record__marquee {
  flex: 1 1 0;
  min-height: 0;
}

.sh-record__eyebrow {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.7);
}

.sh-record__title {
  color: var(--sp-fg-on-dark);
  margin: 0 0 clamp(32px, 4vw, 56px);
}

.sh-record__title em {
  font-style: normal;
  color: #9FD4DB;
}

/* Auto-scrolling vertical marquee of all quotes */
.sh-record__marquee {
  position: relative;
  width: 100%;
  height: clamp(260px, 32vh, 380px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  /* fade the top + bottom edges so cards stream in/out softly */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.sh-record__marquee::-webkit-scrollbar {
  display: none;
}

.sh-record__track {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@keyframes sh-record-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }

  /* list is doubled → seamless loop */
}

@media (prefers-reduced-motion: reduce) {
  .sh-record__track {
    animation: none;
  }

  .sh-record__marquee {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.sh-record__quote {
  margin: 0;
  padding: 18px 22px;
  background: rgba(245, 242, 236, 0.05);
  border: 1px solid rgba(245, 242, 236, 0.18);
  border-radius: var(--sh-radius);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.sh-record__quote-text {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  color: rgba(245, 242, 236, 0.92);
  margin: 0 0 12px;
  text-wrap: pretty;
}

.sh-record__quote-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(245, 242, 236, 0.5);
}

.sh-record__quote-handle {
  color: rgba(245, 242, 236, 0.72);
  font-weight: 500;
  white-space: nowrap;
}

.sh-record__quote-dot {
  opacity: 0.5;
}

.sh-record__quote-date {
  margin-left: auto;
  white-space: nowrap;
}

/* Quiet archival video link — deliberately small */
.sh-record__video {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 8px;
  border-radius: var(--sh-radius);
  text-decoration: none;
  transition: background 0.2s ease;
}

.sh-record__video:hover {
  background: rgba(245, 242, 236, 0.1);
}

.sh-record__video-thumb {
  position: relative;
  flex: 0 0 128px;
  width: 128px;
  height: 76px;
  border-radius: var(--sh-radius);
  overflow: hidden;
  background-image:
    linear-gradient(rgba(27, 42, 52, 0.28), rgba(27, 42, 52, 0.28)),
    url("../../assets/product/complaint-video-thumb.png");
  background-size: cover;
  background-position: center;
}

.sh-record__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-record__play::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(27, 42, 52, 0.55);
  border: 1px solid rgba(245, 242, 236, 0.7);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.sh-record__video:hover .sh-record__play::before {
  background: rgba(27, 42, 52, 0.75);
  transform: scale(1.08);
}

.sh-record__play svg {
  position: relative;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  fill: #fff;
}

.sh-record__video-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sh-record__video-kicker {
  font-family: var(--sp-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.6);
}

.sh-record__video-title {
  font-family: var(--sp-font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--sp-fg-on-dark);
  text-wrap: pretty;
}

.sh-record__video-sub {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(245, 242, 236, 0.6);
  text-wrap: pretty;
}

.sh-record__video:hover .sh-record__video-title {
  color: var(--sp-fg-on-dark);
}

/* Reveal */
.sh-record [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.sh-record [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sh-record [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Preload the section content globally (no fade/rise):
   having it wait for the intersection observer causes an abrupt pop-in. */
.sh-record__title[data-reveal],
.sh-record__title[data-reveal].is-visible,
.sh-record__marquee[data-reveal],
.sh-record__marquee[data-reveal].is-visible,
.sh-record__video[data-reveal],
.sh-record__video[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Mobile: content first, boxed gif below */
@media (max-width: 860px) {

  .sh-record__title {
    font-size: clamp(2rem, 4vw, 3rem);
  }



  .sh-record__inner {
    display: block;
  }

  .sh-record__cols {
    display: block;
  }

  /* Head: headline spans full width on mobile, left-aligned. */
  .sh-record__head {
    display: block;
    margin-bottom: clamp(20px, 5vw, 32px);
    text-align: center;
  }

  .sh-record__body {
    max-width: 100%;
    grid-column: unset;
    grid-row: unset;
  }

  .sh-record__media {
    grid-column: unset;
    grid-row: unset;
    justify-content: center;
  }

  .sh-record__frame {
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }

  /* On mobile the logo moves above the gif (head logo hidden); give the
     logo + gif block extra breathing room above so it isn't locked to the
     video/marquee elements above it. */
  .sh-record__logo--head {
    display: none;
  }

  /* Mobile: no logo above the gif — the reveal sequence has its own logo beat. */
  .sh-record__logo--media {
    display: none;
  }

  /* Media stays below the content with a clean gap; logo + gif at natural
     size so the pair fits comfortably on a phone screen. */
  .sh-record__media {
    margin-top: clamp(128px, 13vw, 192px);
    margin-bottom: clamp(64px, 6.5vw, 96px);
  }

  /* Head collapses to just the headline on mobile. */
  .sh-record__head {
    margin-bottom: clamp(24px, 6vw, 36px);
  }

  /* Order on mobile: title → complaints marquee → video → gif → icons.
     (No reorder — natural DOM order: body[marquee, video] then media[gif].) */
  .sh-record__body {
    gap: clamp(14px, 4vw, 20px);
  }

  /* Benefits sit BELOW the gif, centered. One shows at a time and they
     cross-fade with a top-down slide (driven by the is-active class). */
  .sh-record__benefits {
    position: relative;
    margin: clamp(16px, 4vw, 24px) auto 0;
    width: 100%;
    max-width: 420px;
    height: 34px;
    padding: 0;
    display: block;
  }

  .sh-record__benefit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    max-width: none;
    justify-content: center;
    align-items: center;
    gap: 11px;
    padding: 0;
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .sh-record__benefit.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  .sh-record__benefit-icon {
    width: 28px;
    height: 28px;
  }

  .sh-record__benefit-text {
    font-size: 13.5px;
  }

  /* Marquee kept just tall enough that it + the video thumbnail clear the
     fold; the gif + icons follow below. Reset the desktop `flex:1 1 0`
     (flex-basis:0 would collapse the height in this column flex). */
  .sh-record__cols .sh-record__marquee {
    flex: 0 0 auto;
    height: clamp(320px, 52vh, 460px);
    overflow-y: hidden;
    pointer-events: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   .sh-fit — REUSABLE FIT-TO-FOLD SECTION CONTAINER
   ──────────────────────────────────────────────────────────────
   Designed for sections like The Friction: centered caption above,
   3-column content row below, no overflow past the fold on desktop.

   Usage:
     <section class="sh-fit  sh-fit--problem">      ← bg variant
       <div class="sh-fit__inner">
         <div class="sh-fit__caption">…title + lede…</div>
         <div class="sh-fit__stack">…3 columns…</div>
       </div>
     </section>

   On mobile (<= 860px) the min-height + flex-center release so
   content can stack naturally. Tune --sh-fit-gap on the section to
   override the caption→stack distance for one-offs.
   ────────────────────────────────────────────────────────────── */
.sh-fit {
  --sh-fit-gap: clamp(24px, 3vw, 44px);
  --sh-fit-cols: 3;
  --sh-fit-stack-gap: clamp(28px, 3.5vw, 56px);
  padding: clamp(72px, 9vw, 128px) var(--sh-pad-side);
  min-height: calc(100vh - var(--sh-nav-h));
  display: flex;
  align-items: center;
  position: relative;
}

.sh-fit__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--sh-max);
  margin: 0 auto;
  gap: var(--sh-fit-gap);
}

.sh-fit__caption {
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.sh-fit__stack {
  display: grid;
  grid-template-columns: repeat(var(--sh-fit-cols), 1fr);
  gap: var(--sh-fit-stack-gap);
}

@media (max-width: 860px) {
  .sh-fit {
    min-height: 0;
    display: block;
    padding: clamp(56px, 8vw, 88px) var(--sh-pad-side);
  }

  .sh-fit__inner {
    gap: 40px;
  }

  .sh-fit__stack {
    grid-template-columns: 1fr;
  }
}

/* ── Friction · COLUMNS layout (composes .sh-fit) ───────────── */
.sh-formstudy--layout-columns {
  padding: clamp(72px, 9vw, 128px) var(--sh-pad-side);
  position: relative;
}

.sh-formstudy--layout-columns .sh-formstudy__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--sh-max);
  margin: 0 auto;
  align-items: stretch;
  gap: clamp(32px, 3vw, 44px);
  /* caption → image row */
}

/* Desktop: the fine print becomes a narrow PRECAUTION CALLOUT pinned to the
   top-right of the section, aligned with the headline — warning icon on the
   left, copy wrapping to 3–4 lines in a slim container. */
@media (min-width: 861px) {
  .sh-formstudy--layout-columns .sh-formstudy__note {
    position: absolute;
    top: clamp(72px, 9vw, 128px);
    right: max(var(--sh-pad-side), calc((100% - var(--sh-max)) / 2));
    left: auto;
    bottom: auto;
    margin: 0;
    max-width: 250px;
    white-space: normal;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }
}

.sh-formstudy__note-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0;
  color: var(--sp-asagi);
}

.sh-formstudy__note-text {
  display: block;
}

.sh-formstudy--layout-columns .sh-formstudy__caption {
  position: static;
  max-width: 68ch;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.sh-formstudy--layout-columns .sh-formstudy__eyebrow {
  margin: 0;
}

.sh-formstudy--layout-columns .sh-formstudy__title {
  font-size: clamp(32px, 3.6vw, 52px);
  margin: 0;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .sh-formstudy--layout-columns .sh-formstudy__title {
    font-size: clamp(32px, 7.9vw, 48px);
  }

  .sh-mobile-break {
    display: block;
  }
}

.sh-formstudy--layout-columns .sh-formstudy__body {
  margin: 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.5;
}

.sh-formstudy--layout-columns .sh-formstudy__note {
  margin-top: 4px;
}

/* iPad / tablet: the intro body has a hard <br /> after the em-dash, but at
   this width the first line wraps on its own, pushing it to 3 lines. Nudge the
   size + tracking down so each half stays on one line → 2 lines like desktop. */
@media (min-width: 861px) and (max-width: 1499px) {
  .sh-formstudy--layout-columns .sh-formstudy__body {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    max-width: none;
    width: 100%;
  }
}

.sh-formstudy--layout-columns .sh-formstudy__stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  padding: 0;
  justify-items: center;
}

.sh-formstudy--layout-columns .sh-formstudy__frame {
  gap: 20px;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 320px;
}

/* ── Columns mode media frames ─────────────────────────────── */
.sh-formstudy--layout-columns .sh-formstudy__frame-media {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--sh-radius);
}

.sh-formstudy--layout-columns .sh-formstudy__frame-caption {
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  max-width: 100%;
}

.sh-formstudy--layout-columns .sh-formstudy__frame-label {
  font-family: var(--sp-font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--sp-fg);
}

/* On the navy problem section the ink label is invisible — use light text. */
.sh-formstudy--problem.sh-formstudy--layout-columns .sh-formstudy__frame-label {
  color: var(--sp-fg);
}

.sh-formstudy--layout-columns .sh-formstudy__frame-desc {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
  text-align: left;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .sh-formstudy--layout-columns {
    padding: clamp(56px, 8vw, 88px) var(--sh-pad-side) 28px;
  }

  .sh-formstudy--layout-columns .sh-formstudy__inner {
    gap: 36px;
  }

  .sh-formstudy--layout-columns .sh-formstudy__stack {
    grid-template-columns: 1fr;
  }

  .sh-formstudy--layout-columns .sh-formstudy__frame {
    max-width: 360px;
  }

  .sh-formstudy--layout-columns .sh-formstudy__frame-desc {
    max-width: 96%;
  }

  .sh-formstudy--layout-columns .sh-formstudy__note {
    margin-top: clamp(40px, 8vw, 64px);
  }
}

/* iPad / tablet + desktop range: let the frames fill their column so the
   rightmost image extends to the section's right edge */
@media (min-width: 861px) {
  .sh-formstudy--layout-columns .sh-formstudy__frame {
    max-width: none;
  }

  .sh-formstudy--layout-columns .sh-formstudy__stack {
    gap: 28px;
  }
}

/* ── Friction · TEXT-LED layout ─────────────────────────────
   Same fit-to-fold container as columns, but flips the
   hierarchy: large display-weight pain point as headline,
   description below, and a small thumbnail accent on top. */
.sh-formstudy--layout-text-led {
  padding: clamp(72px, 9vw, 128px) var(--sh-pad-side);
  min-height: calc(100vh - var(--sh-nav-h));
  display: flex;
  align-items: center;
  position: relative;
}

.sh-formstudy--layout-text-led .sh-formstudy__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: clamp(40px, 5vw, 64px);
}

.sh-formstudy--layout-text-led .sh-formstudy__caption {
  position: static;
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.sh-formstudy--layout-text-led .sh-formstudy__eyebrow {
  margin: 0;
}

.sh-formstudy--layout-text-led .sh-formstudy__title {
  font-size: clamp(36px, 4.2vw, 56px);
  margin: 0;
}

.sh-formstudy--layout-text-led .sh-formstudy__body {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(14px, 1vw, 16px);
}

.sh-formstudy--layout-text-led .sh-formstudy__stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 64px);
  padding: 0;
  position: relative;
}

/* Thin divider rule between columns */
.sh-formstudy--layout-text-led .sh-formstudy__frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 18px;
  padding-left: clamp(20px, 2vw, 32px);
  border-left: 1px solid;
}

.sh-formstudy--problem.sh-formstudy--layout-text-led .sh-formstudy__frame {
  border-left-color: rgba(244, 240, 232, 0.16);
}

.sh-formstudy--solution.sh-formstudy--layout-text-led .sh-formstudy__frame {
  border-left-color: rgba(244, 240, 232, 0.16);
}

/* Small thumbnail accent — square, top-left of each cell */
.sh-formstudy--layout-text-led .sh-formstudy__frame-media {
  aspect-ratio: 1 / 1;
  width: 88px;
  border-radius: var(--sh-radius);
  background: rgba(41, 38, 27, 0.05);
  border: 1px solid rgba(41, 38, 27, 0.10);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.sh-formstudy--solution.sh-formstudy--layout-text-led .sh-formstudy__frame-media {
  background: rgba(244, 240, 232, 0.05);
  border-color: rgba(244, 240, 232, 0.12);
}

.sh-formstudy--layout-text-led .sh-formstudy__frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sh-formstudy--layout-text-led .sh-formstudy__frame-caption {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}

/* The LABEL becomes the headline — display weight */
.sh-formstudy--layout-text-led .sh-formstudy__frame-label {
  font-family: var(--sp-font-display-alt);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: none;
  color: inherit;
  max-width: 14ch;
  text-wrap: balance;
}

.sh-formstudy--layout-text-led .sh-formstudy__frame-desc {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  max-width: 38ch;
  margin: 0;
  text-align: left;
}

.sh-formstudy--problem.sh-formstudy--layout-text-led .sh-formstudy__frame-desc {
  color: rgba(244, 240, 232, 0.72);
}

.sh-formstudy--solution.sh-formstudy--layout-text-led .sh-formstudy__frame-desc {
  color: rgba(244, 240, 232, 0.78);
}

@media (max-width: 860px) {
  .sh-formstudy--layout-text-led {
    min-height: 0;
    display: block;
    padding: clamp(56px, 8vw, 88px) var(--sh-pad-side);
  }

  .sh-formstudy--layout-text-led .sh-formstudy__inner {
    gap: 40px;
  }

  .sh-formstudy--layout-text-led .sh-formstudy__stack {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sh-formstudy--layout-text-led .sh-formstudy__frame {
    padding-left: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — unify all narrative body copy to one consistent style,
   matching the "Built for the compromises" lead (.sh-tri__body-lead):
   sans · weight 500 · 15px · line-height 1.65. Color is left to each
   section so light/dark contexts stay legible.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  .sh-mhero__lede,
  .sh-tri__body-lead,
  .sh-tri__body,
  .sh-hlt__body,
  .sh-leftcap__body,
  .sh-solhero__body,
  .sh-feat__body,
  .sh-feature__body,
  .sh-flowmoment__body,
  .sh-reserve__lede {
    font-family: var(--sp-font-sans);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.65;
  }
}

/* ── PAPER SPLIT — light editorial: copy left, square image right ───────
   Sits between the solution hero and the benefits grid. Kinari paper bg,
   body copy mirrors .sh-hlt__body, image square with the corner-tick motif. */
.sh-psplit {
  background: var(--sp-tetsukon);
  /* iron-indigo blue — matches benefits / lifestyle panel */
  color: var(--sp-fg-on-dark);
  /* Normal-flow section sized like the complaints record (.sh-record): no forced
     100svh and no flex-centering — generous top/bottom padding gives the
     breathing room (headline clears the sticky nav; bottom row clears the next
     section). Padding values copied from .sh-record. */
  padding: clamp(120px, 10vw, 160px) var(--sh-pad-side) clamp(96px, 10vw, 144px);
}

.sh-psplit__inner {
  max-width: var(--sh-max);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "head media"
    "rows media";
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(24px, 4vh, 48px);
  align-items: start;
}

.sh-psplit__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vw, 12px);
}

.sh-psplit__media {
  grid-area: media;
}

.sh-psplit__rows {
  grid-area: rows;
}

.sh-psplit__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* headline top, boxes right under it */
  gap: clamp(20px, 3vh, 36px);
  min-height: 0;
}

.sh-psplit__title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--sp-fg-on-dark);
  text-wrap: balance;
}

.sh-psplit__body {
  margin: 0;
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--sp-fg-on-dark-muted);
  max-width: 100%;
}

.sh-psplit__media {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--sh-radius);
  background: var(--sp-kinari);
  justify-self: stretch;
  width: 100%;
}

.sh-psplit__media img {
  width: 100%;
  height: calc(100% + 2px);
  display: block;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: brightness(0.97) saturate(0.95);
}

/* Desktop: the square image spans all three left-column rows but is shorter
   than that stack (align-items: start pins it to the top). Nudge it down a
   touch so it reads as vertically centered against the left column. A
   transform keeps the section's height untouched (no reflow). */
@media (min-width: 861px) {
  .sh-psplit__media-wrap {
    align-self: end;
  }
  .sh-psplit__media {
    aspect-ratio: 1 / 0.88;
  }
}

@media (max-width: 860px) {

  /* Match the neighboring sections' mobile rhythm (e.g. .sh-bgrid) — the
     desktop vh-based padding is far too tall on phones. */
  .sh-psplit {
    padding: clamp(56px, 8vw, 88px) var(--sh-pad-side) clamp(56px, 8vw, 88px);
  }

  .sh-psplit__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: 
      "head"
      "media"
      "rows";
    /* stack: head, image, then boxes */
    gap: 28px;
    text-align: center;
  }

  .sh-psplit__head {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 24px;
  }
  
  .sh-psplit__row {
    align-items: center;
    text-align: center;
  }

  .sh-psplit__title {
    font-size: var(--sp-size-h2) !important;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .sh-psplit__media {
    justify-self: center;
    max-width: 420px;
  }

  .sh-psplit__media-wrap .sh-psplit__rowbody {
    font-size: 15px !important;
  }

  .sh-psplit__rowmedia {
    aspect-ratio: 1 / 1 !important;
  }

  .sh-psplit__row:nth-child(3) .sh-psplit__rowmedia img {
    object-position: left center;
  }
}

/* ═══ "Lifestyle" section built out (June 2026) — above-the-fold composition:
   LEFT column = headline (top) + two boxes side-by-side under it, each a
   larger image with a short description stacked beneath; RIGHT column = the
   lifestyle image, filling the full column height. ═══ */
.sh-psplit__media {
  /* Removed align-self: stretch and aspect-ratio: auto so it returns to a square. */
}

/* Looping slideshow inside the image container — a flex track of full-width
   frames that translateX to slide; images themselves keep the .sh-psplit__media
   img treatment (cover + warm multiply). */
.sh-psplit__media-title {
  position: absolute;
  bottom: clamp(24px, 3vw, 36px);
  left: clamp(24px, 3vw, 36px);
  z-index: 5;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  max-width: 80%;
}

.sh-psplit__media-title strong {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(25px, 2.3vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sp-fg-on-dark, #fff);
}

.sh-psplit__media-title span {
  font-family: var(--sp-font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--sp-fg-on-dark-muted, rgba(255,255,255,0.8));
  max-width: 40ch;
  line-height: 1.4;
}

.sh-hide-desk {
  display: none;
}

.sh-psplit__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sh-psplit__slides-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.sh-psplit__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background: var(--sp-kinari);
}

/* Color pill over the slideshow — lifts the Founders-100 hero pill style
   (translucent glass, blur, pulsing accent dot). Lives OUTSIDE the sliding
   track so it can reveal itself once each frame has settled instead of riding
   in with the image. Fill is darkened vs. the hero pill so the light caps stay
   legible over bright lifestyle photos. */
.sh-psplit__slidepill {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(244, 240, 232, 0.24);
  background: rgba(20, 18, 16, 0.30);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  pointer-events: none;
  /* resting/exit state — sink + shrink + blur out (mirrors the reveal) so the
     label animates away instead of blinking off. The entrance keyframe owns the
     in-animation; this transition only governs the out. */
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  filter: blur(4px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
}

.sh-psplit__slidepill.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), filter 0.62s ease;
}

.sh-psplit__slidepill-key {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-fg-on-dark, #f4f0e8);
}

@media (prefers-reduced-motion: reduce) {
  .sh-psplit__slidepill {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .sh-psplit__slidepill.is-on {
    animation: none;
  }
}

/* Mouse-over scroll arrows (desktop pointers only) — the Zero-Tolerance paddle
   button, restyled translucent-glass to match the color pill, pinned bottom-
   right and faded in only while the image is hovered. Clicking one hands the
   slideshow to manual control (see LifestyleSlides). */
.sh-psplit__slidenav {
  display: none;
}

@media (hover: hover) and (min-width: 861px) {
  .sh-psplit__slidenav {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 4;
    display: flex;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .sh-psplit__media:hover .sh-psplit__slidenav,
  .sh-psplit__slidenav:focus-within {
    opacity: 1;
    pointer-events: auto;
  }
}

.sh-psplit__navbtn {
  width: 40px;
  height: 40px;
  border-radius: 999px; /* matches the color pill's radius */
  border: 1px solid rgba(244, 240, 232, 0.24);
  background: rgba(20, 18, 16, 0.30);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  color: var(--sp-fg-on-dark, #f4f0e8);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.sh-psplit__navbtn:hover:not(:disabled) {
  background: rgba(20, 18, 16, 0.46);
  border-color: rgba(244, 240, 232, 0.42);
}

.sh-psplit__navbtn:active:not(:disabled) {
  background: rgba(20, 18, 16, 0.58);
}

.sh-psplit__navbtn:disabled {
  opacity: 0.3;
  cursor: default;
}

.sh-psplit__rows {
  grid-area: rows;
  max-width: 600px; /* widened for better text fit */
  justify-self: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  width: 100%;
  margin-top: clamp(16px, 2vw, 28px); /* breathing space between the body copy and the box grid */
}

.sh-psplit__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.sh-psplit__rowmedia {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--sh-radius);
  overflow: hidden;
  background: rgba(244, 240, 232, 0.045);
  border: 1px dashed rgba(244, 240, 232, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Once a real photo is in the box, drop the dashed-placeholder treatment. */
.sh-psplit__rowmedia:has(img) {
  background: var(--sp-kinari);
  border: 0;
}

.sh-psplit__rowmedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
  filter: brightness(0.97) saturate(0.95);
}

.sh-psplit__rowph {
  font-family: var(--sp-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.42);
}

.sh-psplit__rowbody {
  margin: 0;
  font-family: var(--sp-font-sans);
  /* Feature copy matched to the ProblemTriad body (.sh-tri__body) — 400 · 15px
     · 1.4; the bold lead-in stays 600 in the on-dark color (Mark 2026-07-17). */
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sp-fg-on-dark-muted);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .sh-psplit {
    min-height: 0;
  }

  .sh-psplit__rows {
    grid-template-columns: 1fr 1fr;
  }

  .sh-psplit__rowbody {
    font-size: 15px;
  }

  .sh-psplit__media {
    align-self: center;
    justify-self: center;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 420px;
  }

  .sh-psplit__slidepill {
    top: auto;
    bottom: 18px;
    right: auto;
    left: 18px;
  }

  .sh-hide-mob {
    display: none !important;
  }

  .sh-hide-desk {
    display: block !important;
  }


}

/* ── FOUNDERS STORY — simplified chaptered carousel ────────────────────
   (ref: deltahub about-us, in Snappalm dress.) Kinari fold-height section:
   photo plate left, chapter copy right, prev/next arrows + mono indices
   below. Chapter swap: corner ticks unpin (staggered) → asagi scan-line
   wipes the new plate in (clip-path, 420ms) while it settles from
   scale(1.04) → ticks re-pin → copy rises in. Direction-aware. */
.sh-fstory {
  --shf-tap: 40px;
  --shf-strip-gap: 16px;
  background: var(--sp-kinari);
  scroll-margin-top: calc(var(--sh-nav-h, 64px) / 2);
  /* Size to content (min-height keeps it ~full-screen without clipping), and
     pack from the top so the nav sits just below the photo — no dead space. */
  min-height: clamp(640px, 96vh, 860px);
  min-height: clamp(640px, 96svh, 860px);
  padding: clamp(120px, 10vw, 160px) var(--sh-pad-side) clamp(96px, 10vw, 144px);
  display: flex;
  overflow: hidden;
}

.sh-fstory__inner {
  max-width: var(--sh-max);
  margin: 0 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 44px);
}

.sh-fstory__head {
  grid-area: title;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sh-fstory__title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  /* matches .sh-solhero__title and .sh-psplit__title */
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--sp-fg);
  text-wrap: balance;
}

.sh-fstory__intro {
  margin: 0;
  font-family: var(--sp-font-sans);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--sp-fg-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.sh-fstory__grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "plate title"
    "plate copy";
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: clamp(18px, 2.6vh, 30px);
  align-items: center;
}

/* Plate — shironeri well, multiply photos, corner ticks */
.sh-fstory__plate {
  grid-area: plate;
  margin: 0;
  width: 100%;
  min-width: 0;
}

.sh-fstory__well {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--sh-radius) - 8px);
  aspect-ratio: 4 / 3;
  max-height: min(62vh, 540px);
  width: 100%;
  margin: 0 auto;
  background: var(--sp-shironeri);
  border: 1px solid rgba(27, 42, 52, 0.08);
}

/* Desktop: headline moved into the right column, so the plate grows taller
   to use the freed height on the left. (Mobile keeps its own max-height.) */
@media (min-width: 861px) {
  .sh-fstory__well {
    aspect-ratio: 5 / 4;
  }

  /* Headline pinned to the top of the right column, chapter copy below it */
  .sh-fstory__copy {
    align-self: start;
  }
}

.sh-fstory__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  /* Promote to its own compositor layer so the crossfade/scale runs on the
     GPU (the old clip-path wipe on a blended image repainted every frame). */
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Chapter swap = GPU-only crossfade + scale settle, with a small directional
   slide. Incoming fades in over the outgoing (which dims away quickly). */
.sh-fstory:not(.is-entered) .sh-fstory__img--in {
  opacity: 0;
}

.sh-fstory.is-entered .sh-fstory__img--in {
  animation: shf-in-fwd 540ms var(--sp-ease-glide) both;
}

.sh-fstory.is-entered .sh-fstory__well[data-dir='bwd'] .sh-fstory__img--in {
  animation-name: shf-in-bwd;
}

@keyframes shf-in-fwd {
  from {
    opacity: 0;
    transform: translate3d(2.5%, 0, 0) scale(1.045);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes shf-in-bwd {
  from {
    opacity: 0;
    transform: translate3d(-2.5%, 0, 0) scale(1.045);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.sh-fstory__img--out {
  animation: shf-out 300ms var(--sp-ease-glide) both;
}

@keyframes shf-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Corner ticks — two 1px arms anchored at each corner; unpin/re-pin beats */
.sh-fstory__tick {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.sh-fstory__tick--tl {
  top: 10px;
  left: 10px;
}

.sh-fstory__tick--tr {
  top: 10px;
  right: 10px;
}

.sh-fstory__tick--br {
  bottom: 10px;
  right: 10px;
}

.sh-fstory__tick--bl {
  bottom: 10px;
  left: 10px;
}

.sh-fstory__tick::before,
.sh-fstory__tick::after {
  content: '';
  position: absolute;
  background: var(--sp-tetsukon-30);
}

.sh-fstory__tick::before {
  width: 100%;
  height: 1px;
}

.sh-fstory__tick::after {
  width: 1px;
  height: 100%;
}

.sh-fstory__tick--tl::before {
  top: 0;
  left: 0;
  transform-origin: left center;
}

.sh-fstory__tick--tl::after {
  top: 0;
  left: 0;
  transform-origin: center top;
}

.sh-fstory__tick--tr::before {
  top: 0;
  right: 0;
  transform-origin: right center;
}

.sh-fstory__tick--tr::after {
  top: 0;
  right: 0;
  transform-origin: center top;
}

.sh-fstory__tick--br::before {
  bottom: 0;
  right: 0;
  transform-origin: right center;
}

.sh-fstory__tick--br::after {
  bottom: 0;
  right: 0;
  transform-origin: center bottom;
}

.sh-fstory__tick--bl::before {
  bottom: 0;
  left: 0;
  transform-origin: left center;
}

.sh-fstory__tick--bl::after {
  bottom: 0;
  left: 0;
  transform-origin: center bottom;
}

.sh-fstory__bug {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  font-family: var(--sp-font-sans);
  font-size: 13px;
  line-height: 1.3;
  color: var(--sp-fg-on-dark, #f4f0e8);
  background: rgba(20, 18, 16, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(244, 240, 232, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sh-fstory__bug.is-visible {
  opacity: 1;
}

.sh-fstory__bug strong {
  font-weight: 600;
  font-size: 14px;
}

.sh-fstory__bug span {
  font-weight: 400;
  color: rgba(244, 240, 232, 0.8);
}

.sh-fstory:not(.is-entered) .sh-fstory__tick::before {
  transform: scaleX(0);
}

.sh-fstory:not(.is-entered) .sh-fstory__tick::after {
  transform: scaleY(0);
}

/* Re-pin: arms grow back after the wipe lands, TL→TR→BR→BL */
.sh-fstory.is-entered .sh-fstory__tick::before {
  animation: shf-armx-in 160ms var(--sp-ease-snap) both;
}

.sh-fstory.is-entered .sh-fstory__tick::after {
  animation: shf-army-in 160ms var(--sp-ease-snap) both;
}

.sh-fstory__tick--tl::before,
.sh-fstory__tick--tl::after {
  animation-delay: 460ms !important;
}

.sh-fstory__tick--tr::before,
.sh-fstory__tick--tr::after {
  animation-delay: 500ms !important;
}

.sh-fstory__tick--br::before,
.sh-fstory__tick--br::after {
  animation-delay: 540ms !important;
}

.sh-fstory__tick--bl::before,
.sh-fstory__tick--bl::after {
  animation-delay: 580ms !important;
}

/* Unpin: the outgoing set collapses immediately, same order */
.sh-fstory.is-entered .sh-fstory__tick--unpin::before {
  animation: shf-armx-out 140ms var(--sp-ease-snap) both;
}

.sh-fstory.is-entered .sh-fstory__tick--unpin::after {
  animation: shf-army-out 140ms var(--sp-ease-snap) both;
}

.sh-fstory__tick--unpin.sh-fstory__tick--tl::before,
.sh-fstory__tick--unpin.sh-fstory__tick--tl::after {
  animation-delay: 0ms !important;
}

.sh-fstory__tick--unpin.sh-fstory__tick--tr::before,
.sh-fstory__tick--unpin.sh-fstory__tick--tr::after {
  animation-delay: 30ms !important;
}

.sh-fstory__tick--unpin.sh-fstory__tick--br::before,
.sh-fstory__tick--unpin.sh-fstory__tick--br::after {
  animation-delay: 60ms !important;
}

.sh-fstory__tick--unpin.sh-fstory__tick--bl::before,
.sh-fstory__tick--unpin.sh-fstory__tick--bl::after {
  animation-delay: 90ms !important;
}

@keyframes shf-armx-in {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes shf-army-in {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes shf-armx-out {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@keyframes shf-army-out {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0);
  }
}

/* Chapter copy — staggered rise on each swap */
.sh-fstory__copy {
  grid-area: copy;
  align-self: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 30px);
}

.sh-fstory__copyIn {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 62ch;
  transition: opacity 160ms var(--sp-ease-glide), transform 160ms var(--sp-ease-glide);
}

.sh-fstory__copyIn.is-out {
  opacity: 0;
  transform: translateY(-8px);
}

.sh-fstory__chapEyebrow {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-asagi);
}

.sh-fstory__chapTitle {
  margin: 0;
  font-family: var(--sp-font-sans);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sp-fg);
  text-wrap: balance;
}

.sh-fstory__p {
  margin: 0;
  font-family: var(--sp-font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--sp-fg-muted);
  text-wrap: pretty;
}

.sh-fstory__p + .sh-fstory__p {
  margin-top: 14px;
}

.sh-fstory:not(.is-entered) .sh-fstory__copyIn>* {
  opacity: 0;
}

.sh-fstory.is-entered .sh-fstory__copyIn>* {
  animation: shf-rise 420ms var(--sp-ease-glide) both;
}

.sh-fstory.is-entered .sh-fstory__copyIn> :nth-child(1) {
  animation-delay: 0.08s;
}

.sh-fstory.is-entered .sh-fstory__copyIn> :nth-child(2) {
  animation-delay: 0.13s;
}

.sh-fstory.is-entered .sh-fstory__copyIn> :nth-child(3) {
  animation-delay: 0.18s;
}

.sh-fstory.is-entered .sh-fstory__copyIn> :nth-child(4) {
  animation-delay: 0.23s;
}

@keyframes shf-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Controls — chapter-name timeline (line + nodes) + Zero-Tolerance paddles.
   The dots-and-line row sits at the top; labels hang below absolutely so the
   row's box height = the dot, letting the paddles centre on the line. */
.sh-fstory__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-bottom: clamp(20px, 2.6vw, 30px);
  /* reserve room for the hanging labels */
}

.sh-fstory__timeline {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  height: 9px;
  /* just the dot row */
}

.sh-fstory__track,
.sh-fstory__fill {
  position: absolute;
  top: 4px;
  left: 4.5px;
  height: 1px;
}

.sh-fstory__track {
  right: 0;
  background: rgba(27, 42, 52, 0.18);
}

.sh-fstory__fill {
  background: var(--sp-asagi);
  width: 0;
  transition: width 360ms var(--sp-ease-snap);
}

.sh-fstory__node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 9px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.sh-fstory__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--sp-tetsukon-30);
  background: var(--sp-kinari);
  box-sizing: border-box;
  transition: background 200ms var(--sp-ease-glide), border-color 200ms var(--sp-ease-glide), transform 200ms var(--sp-ease-snap);
  z-index: 1;
}

.sh-fstory__node.is-done .sh-fstory__dot,
.sh-fstory__node.is-active .sh-fstory__dot {
  background: var(--sp-asagi);
  border-color: var(--sp-asagi);
}

.sh-fstory__node.is-active .sh-fstory__dot {
  transform: scale(1.25);
}

.sh-fstory__nodeLabel {
  position: absolute;
  top: 18px;
  left: 0;
  display: block;
  font-family: var(--sp-font-sans);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--sp-fg-subtle);
  transition: color 200ms var(--sp-ease-glide);
}

.sh-fstory__node:hover .sh-fstory__nodeLabel {
  color: var(--sp-fg-muted);
}

.sh-fstory__node.is-active .sh-fstory__nodeLabel {
  color: var(--sp-fg);
  font-weight: 500;
}

/* Paddles — copied from the Zero-Tolerance (.sh-hlt__paddle) setup */
.sh-fstory__paddles {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.sh-fstory__paddle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sp-tetsukon-15);
  background: rgba(255, 255, 255, 0.55);
  color: var(--sp-fg);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.sh-fstory__paddle:active:not(:disabled) {
  background: var(--sp-white);
  border-color: var(--sp-tetsukon-30);
}

.sh-fstory__paddle:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 860px) {

  /* Size to content (no forced full-screen fill) so the nav sits just below
     the copy with no dead space beneath it. */
  .sh-fstory {
    height: auto;
    min-height: 0;
    padding: clamp(56px, 8vw, 88px) var(--sh-pad-side) clamp(56px, 8vw, 88px);
  }

  .sh-fstory__inner {
    gap: 18px;
    justify-content: flex-start;
  }

  .sh-fstory__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .sh-fstory__well {
    max-height: 44svh;
  }

  /* Reserve the copy area at the tallest chapter's height so the nav lands in
     the same spot every chapter — no jump — while sitting right under the copy. */
  .sh-fstory__copy {
    min-height: auto;
  }

  .sh-fstory__tick {
    width: 12px;
    height: 12px;
  }

  /* Replaced .sh-fstory__p--optional with line-clamp wrapper */
  .sh-fstory__body-wrap:not(.is-expanded) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  }
  .sh-fstory__readmore-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
  }

  .sh-fstory__readmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    background: transparent;
    border: 1px solid var(--sp-tetsukon-15);
    border-radius: 100px;
    color: var(--sp-fg);
    font-family: var(--sp-font-sans);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 24px;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  .sh-fstory__readmore-icon {
    width: 16px;
    height: 16px;
    color: var(--sp-fg-dim);
  }

  .sh-fstory__title {
    font-size: var(--sp-size-h2) !important;
  }

  .sh-fstory__chapTitle {
    font-size: 18px;
  }

  /* No room for 4 chapter names on a phone — show dots + paddles only
     (the active chapter name already sits in the copy eyebrow above) */
  .sh-fstory__nav {
    margin-bottom: 0;
  }

  .sh-fstory__nodeLabel {
    display: none;
  }
}

/* Compact-mode hook (Tweaks panel "Compact layout") */
body.is-compact .sh-fstory {
  min-height: clamp(520px, 82vh, 680px);
  padding: clamp(24px, 3.5vh, 40px) var(--sh-pad-side) clamp(20px, 2.5vh, 32px);
}

/* Very short mobile viewports (landscape phones): drop the full-screen
   minimum and let content size the section naturally */
@media (max-width: 860px) and (max-height: 500px) {
  .sh-fstory {
    min-height: auto;
  }

  .sh-fstory__well {
    max-height: 60vh;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sh-fstory *,
  .sh-fstory *::before,
  .sh-fstory *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }
}

/* ── FAQ ─────────────────────────────────────────────── */
.sh-faq {
  width: 100%;
  background: var(--sp-bg);
  padding: clamp(64px, 9vw, 128px) var(--sh-pad-side);
}

.sh-faq__inner {
  max-width: var(--sh-max);
  margin: 0 auto;
}

.sh-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 8vw, 80px);
}

.sh-faq__pagination {
  display: flex;
  gap: 8px;
  margin-top: 48px;
  justify-content: flex-end;
}

@media (min-width: 861px) {
  .sh-faq__grid {
    grid-template-columns: 1fr 0.8fr;
  }
  .sh-faq__pagination {
    justify-content: flex-end;
  }
}

.sh-faq__left {
  max-width: 680px;
}

.sh-faq__head {
  margin-bottom: clamp(32px, 5vw, 48px);
  text-align: left;
}

.sh-faq__right {
  display: flex;
  flex-direction: column;
  /* 24px flat (Mark 2026-07-27): the old clamp ran to 48px AND the vote row carried its
     own inline 24px margin, so desktop paid twice and left a canyon between the two rows.
     Inline margin removed; this gap is now the single source of that spacing. */
  gap: 24px;
  padding-top: 0; /* top-align with left column */
}

.sh-faq__right-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 861px) {
  .sh-faq__right-top {
    grid-template-columns: 1fr 1fr;
  }
}

.sh-faq__box {
  border: 1px solid var(--sp-tetsukon-15);
  border-radius: 12px;
  padding: 32px;
  background: var(--sp-bg);
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 860px) {
  .sh-faq__box {
    padding: 24px 20px;
  }
  /* Balance the vertical rhythm between boxes (Mark 2026-07-26): one 24px
     beat everywhere. The column's 32px flex gap PLUS the vote box's inline
     24px margin-top made some gaps 56px while the right-top grid used 24px. */
  .sh-faq__right {
    gap: 24px;
  }
  .sh-faq__vote {
    margin-top: 0 !important; /* overrides the element's inline style */
  }
}

/* Base styles for the new right column blocks */
.sh-faq__newsletter,
.sh-faq__socials,
.sh-faq__vote {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 861px) {
  .sh-faq__newsletter {
    width: 100%;
    max-width: 100%;
  }
}

.sh-faq__h3 {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--sp-fg);
}

.sh-faq__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sp-fg-muted);
  text-wrap: balance;
}

/* Tighten the gap between a block title and its body copy (overrides the 16px column gap) */
.sh-faq__h3 + .sh-faq__desc {
  margin-top: -8px;
}

.sh-faq__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  max-width: 420px;
}



.sh-faq__input {
  width: 100%;
  padding: 9px 16px;
  border: 1px solid var(--sp-rule);
  background: transparent;
  border-radius: var(--sh-radius);
  font-family: var(--sp-font-sans);
  font-size: 14px;
  color: var(--sp-fg);
}

.sh-faq__input::placeholder {
  color: var(--sp-fg-subtle);
}

.sh-faq__input:focus {
  outline: none;
  border-color: var(--sp-fg);
}

.sh-faq__btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .sh-faq__btn {
    width: auto;
    flex-shrink: 0;
    align-self: flex-start;
  }
}

.sh-faq__social-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (min-width: 861px) {
  .sh-faq__social-links {
    flex-wrap: nowrap;
  }
}

.sh-faq__social-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--sp-fg);
  text-decoration: none;
  padding: 12px;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sh-radius);
  transition: border-color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-faq__social-link:hover {
  border-color: var(--sp-fg-muted);
}

.sh-faq__title {
  margin: 0;
}

.sh-faq__list {
  display: flex;
  flex-direction: column;
}

.sh-faq__item {
  border-bottom: 1px solid var(--sp-tetsukon-15);
}

.sh-faq__item:first-child {
  border-top: 1px solid var(--sp-tetsukon-15);
}

.sh-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--sp-fg);
  text-align: left;
}

.sh-faq__q-text {
  font-family: var(--sp-font-sans);
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 500;
  padding-right: 24px;
}

.sh-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--sp-tetsukon);
}

.sh-faq__icon-v {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.sh-faq__item.is-open .sh-faq__icon-v {
  transform: rotate(90deg);
  opacity: 0;
}

.sh-faq__icon-h {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.sh-faq__item.is-open .sh-faq__icon-h {
  transform: rotate(180deg);
}

.sh-faq__a {
  color: var(--sp-fg-muted);
}

.sh-faq__a-inner {
  padding-bottom: 24px;
  font-family: var(--sp-font-sans);
  font-size: 15px;
  line-height: 1.6;
}

/* --- START: COLOR OVERRIDES FOR DISCLAIMERS AND ARROWS --- */
.sh-hlt__paddle,
.sh-stickyform__paddle,
.sh-fstory__paddle {
  color: var(--sp-asagi-dark) !important;
  border-color: var(--sp-asagi-dark) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

/* :active is safe everywhere — it clears the instant the finger lifts. :hover is NOT:
   on touch, WebKit latches :hover after a tap and only drops it when something else is
   tapped, so the filled state stayed stuck on the carousel arrows (Mark 2026-07-28).
   Splitting them and gating :hover behind a real hover-capable pointer fixes it without
   losing the tap feedback or changing anything on desktop. */
.sh-hlt__paddle:active:not(:disabled),
.sh-stickyform__paddle:active:not(:disabled),
.sh-fstory__paddle:active:not(:disabled) {
  background: var(--sp-asagi-dark) !important;
  border-color: var(--sp-asagi-dark) !important;
  color: var(--sp-fg-on-dark) !important;
}

@media (hover: hover) and (pointer: fine) {
  .sh-hlt__paddle:hover:not(:disabled),
  .sh-stickyform__paddle:hover:not(:disabled),
  .sh-fstory__paddle:hover:not(:disabled) {
    background: var(--sp-asagi-dark) !important;
    border-color: var(--sp-asagi-dark) !important;
    color: var(--sp-fg-on-dark) !important;
  }
}

.sh-ga__disclaimer {
  background: var(--sp-asagi-dark) !important;
  border-color: var(--sp-asagi-dark) !important;
  color: var(--sp-fg-on-dark) !important;
}

.sh-ga__disclaimer:hover {
  color: var(--sp-asagi-dark) !important;
  border-color: var(--sp-asagi-dark) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}
/* --- END: COLOR OVERRIDES --- */

/* --- START: VOTING WIDGET --- */
.sh-faq__vote-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}


.sh-faq__vote-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tightened 16px -> 11px side padding + 12px -> 8px gap (Mark 2026-07-27) so the two
     MacBook options fit one line beside the colour box, and the colour pills stop leaving
     a dead gutter on the right at desktop. */
  padding: 8px 7px;
  white-space: nowrap;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sh-radius);
  font-family: var(--sp-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-fg);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sh-faq__vote-label:hover {
  border-color: var(--sp-fg-muted);
}

.sh-faq__vote-input {
  display: none;
}

.sh-faq__vote-input:checked + .sh-faq__vote-label {
  background: var(--sp-fg);
  color: var(--sp-bg);
  border-color: var(--sp-fg);
}

.sh-faq__vote-custom {
  margin-top: 8px;
}

.sh-faq__vote-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px 0;
}

.sh-faq__vote-success svg {
  color: var(--sp-tetsukon);
}

.sh-faq__form--vote {
  display: flex;
  flex-direction: column;
}
.sh-faq__vote-btn {
  order: 3;
}
.sh-faq__vote-custom {
  order: 2;
}

@media (min-width: 861px) {
  .sh-faq__form--vote {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: none;
  }
  .sh-faq__form--vote .sh-faq__vote-options {
    margin-top: 0;
  }
  .sh-faq__vote-btn {
    order: 2;
    margin-top: 0 !important;
  }
  .sh-faq__vote-custom {
    order: 3;
    flex-basis: 100%;
  }
}

@media (max-width: 860px) {
  .sh-faq__vote-options {
    gap: 8px;
  }
  .sh-faq__vote-label {
    padding: 7px 12px;
    font-size: 13px;
  }
}
/* --- END: VOTING WIDGET --- */

/* Vote boxes carry tighter inner padding + slightly smaller control text than the other
   FAQ boxes (Mark 2026-07-27). Measured: at 274px box width the two MacBook pills needed
   235px but only had 208px of inner room, so they wrapped to a second line and the colour
   pills left a dead gutter. 32px -> 24px padding and 14px -> 13px labels buys ~40px. */
/* Uniform inner padding on EVERY faq box — the two on top and both vote boxes
   (Mark 2026-07-27). MEASURED: at 24px the two vote boxes needed 565px against a
   548px row and both wrapped; 20px is the largest uniform value where "MacBook Air /
   MacBook Neo" and all four colour pills each sit on ONE line at desktop. */
.sh-faq__box,
.sh-faq__box.sh-faq__vote {
  padding: 20px;
}
.sh-faq__vote-label {
  font-size: 12.5px;
}

/* ---- vote widgets: click-to-vote, undo, gated custom field (2026-07-27) ---------------- */
.sh-faq__vote-check {
  color: #2E6A78;
  vertical-align: -3px;
  margin-right: 5px;
}
.sh-faq__vote-thanks {
  margin: 12px 0 0;
  font-family: var(--sp-font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-fg-muted);
}
.sh-faq__undo {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--sp-fg);
  text-decoration: underline;
  cursor: pointer;
}
.sh-faq__undo:disabled { opacity: 0.5; cursor: default; }
/* A voted option stays visually selected but must not read as clickable. */
.sh-faq__vote-input:disabled + .sh-faq__vote-label { cursor: default; opacity: 0.55; }
.sh-faq__vote-input:disabled:checked + .sh-faq__vote-label { opacity: 1; }
/* Custom field + its submit — only rendered while Custom is selected. */
.sh-faq__vote-custom-wrap {
  display: flex;
  flex-wrap: nowrap;          /* keep Submit on the RIGHT of the field, never below */
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
/* Neutralise the legacy form-layout rules (.sh-faq__vote-btn{order:2} and
   .sh-faq__vote-custom{order:3;flex-basis:100%} at >=861px) — those predate this wrapper
   and were putting Submit BEFORE the field and forcing the field to full width. Inside
   this wrapper the order is always: field left, Submit right. */
.sh-faq__vote-custom-wrap .sh-faq__vote-custom {
  order: 1 !important;
  flex: 1 1 auto !important;
  flex-basis: auto !important;
  min-width: 0;
  margin-top: 0 !important;
}
.sh-faq__vote-custom-wrap .sh-faq__vote-btn {
  order: 2 !important;
  flex: 0 0 auto !important;
  padding: 9px 12px;
  margin-top: 0 !important;
  white-space: nowrap;
  font-size: 13px;
}

/* ---- "Stay Connected" latest-post row -------------------------------------------------- */
.sh-faq__post {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-rule);
  text-decoration: none;
  color: inherit;
}
.sh-faq__post-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sp-rule);
  line-height: 0;
}
.sh-faq__post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-faq__post-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(27, 42, 52, 0.28);
}
.sh-faq__post-play svg { width: 18px; height: 18px; fill: #fff; }
.sh-faq__post-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-faq__post-kicker {
  font-family: var(--sp-font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-fg-muted);
}
.sh-faq__post-title {
  font-family: var(--sp-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sp-fg);
}
.sh-faq__post:hover .sh-faq__post-title { text-decoration: underline; }

@media (max-width: 860px) {
  .sh-faq__post { margin-top: 14px; padding-top: 14px; }
  .sh-faq__post-thumb { width: 64px; height: 42px; }
  .sh-faq__vote-custom-wrap { flex-wrap: nowrap; }
  .sh-faq__vote-custom-wrap .sh-faq__vote-btn { width: auto; }
}

/* The vote row's two boxes hold different amounts: "MacBook Air / MacBook Neo" needs
   ~250px, the four colour pills need ~291px. An even 1fr/1fr split forced the colours
   onto a second line while the fit box sat with a dead gutter. Measured 2026-07-27 @1440:
   row = 572px, so 0.86fr/1fr lands both on ONE line with a few px of slack. */
@media (min-width: 861px) {
  .sh-faq__right-top.sh-faq__vote-row {
    grid-template-columns: 0.86fr 1fr;
  }
}

/* ---- triad photos: equalised brightness on top of the restored overlay (2026-07-27) ----
   The overlay itself (kinari + multiply, above at line ~2916) now matches "Design and
   Ergonomics" exactly — no sepia/saturate here, since Highlights applies no filter either.
   Brightness-only, still per-card: MEASURED mean luminance of the three source photos —
   palm-pain 127.9, chassis-scratches 88.3, screen-etching 79.1 — normalised toward their
   shared average (98.5) so the row reads as one shoot instead of three exposures. filter
   and mix-blend-mode compose fine on one element (filter runs first, multiply after). */
.sh-tri__card:nth-child(1) .sh-tri__img { filter: brightness(0.88); }
.sh-tri__card:nth-child(2) .sh-tri__img { filter: brightness(1.06); }
.sh-tri__card:nth-child(3) .sh-tri__img { filter: brightness(1.12); }

/* ---- Closer: "Work Without Friction" — dusk photograph (2026-07-27) -------------------
   The woman working sits bottom-RIGHT of the frame and must stay readable, so the copy
   takes the open left third and the scrim is a HORIZONTAL tetsukon gradient: dense at the
   left edge for type contrast, clearing to nothing across her. background-position keeps
   the right side anchored as the viewport narrows. Falls back to solid tetsukon if the
   photo is missing, so the section can never render as a broken box. */
.sh-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Pull up 1px so this section OVERLAPS .sh-psplit above it. Two adjacent block
     backgrounds can render a hairline seam at fractional page offsets even when both
     are the same colour — the overlap removes that gap entirely. Safe because the
     scrim's top edge is now opaque tetsukon, identical to the section above. */
  margin-top: -1px;
  background-color: var(--sp-tetsukon);
  background-image: url('../../assets/product/closer-cabin-dusk.jpg?v=2');
  background-size: cover;
  background-position: 68% center;
  background-repeat: no-repeat;
  padding: clamp(104px, 13vw, 180px) var(--sh-pad-side);
  /* The photo band keeps its proportions regardless of how long the copy is — without
     this, trimming a sentence shrank the whole section (Mark 2026-07-27). Content is
     centred vertically inside the reserved height. */
  min-height: 800px;
  display: flex;
  align-items: center;
}
/* ---- Wide screens: stop `cover` from eating the woman (Mark 2026-07-29) ----------------
   BUG: min-height was a FIXED 800px while the width is fluid, so the box got wider and
   wider at a constant height and `background-size: cover` paid for it by cropping
   VERTICALLY — and `background-position-y: center` split that loss top AND bottom. She
   sits bottom-right, so the bottom half of the crop beheaded her. MEASURED loss of photo
   height: 1512px -> 29%, 1920px -> 44%, 2560px -> 58% (at 2560 only her head cleared the
   section's bottom edge; laptop, hands and table were all gone).

   FIX, two parts:
   1. Hold the frame's PROPORTIONS instead of its height. 53vw is the aspect the box has
      at 1512px (1512x800), so the crop stops degrading as the viewport widens. Capped at
      1100px so the section can't become an absurd scroll on a large display.
   2. Bias the vertical anchor DOWN to 82%. The top third of this photograph is empty dusk
      sky — that is the disposable region; she is not. Past the 1100px cap the crop starts
      tightening again, and the bias is what keeps her whole when it does.

   Threshold is 1550px so this is a strict NO-OP on Mark's 16" (1496 logical) and on a 14"
   (1512) — he confirmed those render correctly and they must not move. The clamp floor
   would already no-op below ~1512; the query also holds background-position steady there.

   MEASURED with the rule live (source-pixel band visible, photo is 2000x1493, her head
   top is y~880 and the table runs to y~1300):
     1512 -> 800px tall,  y 217-1276  (unchanged, query does not apply)
     1920 -> 1018px tall, y 355-1415
     2560 -> 1100px tall, y 520-1379
     3440 -> 1100px tall, y 700-1339
   She is fully in frame at every width tested, including ultrawide. */
@media (min-width: 1550px) {
  .sh-close {
    min-height: clamp(800px, 53vw, 1100px);
    background-position: 68% 82%;
  }
}
.sh-close__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(27, 42, 52, 0.94) 0%,
      rgba(27, 42, 52, 0.88) 26%,
      rgba(27, 42, 52, 0.62) 48%,
      rgba(27, 42, 52, 0.26) 68%,
      rgba(27, 42, 52, 0.10) 86%,
      rgba(27, 42, 52, 0.04) 100%),
    linear-gradient(180deg,
      rgba(27, 42, 52, 1) 0%,
      rgba(27, 42, 52, 1) 2%,
      rgba(27, 42, 52, 0.62) 9%,
      rgba(27, 42, 52, 0.30) 18%,
      transparent 34%,
      transparent 70%,
      rgba(27, 42, 52, 0.30) 100%);
}
.sh-close__inner {
  position: relative;
  z-index: 2;
  max-width: var(--sh-max);
  margin: 0 auto;
  width: 100%;
}
.sh-close__body { max-width: 22rem; }   /* body only: 30 -> 26 -> 22rem (Mark 2026-07-27) */
/* .sh-close__note deliberately NOT in this group — its width is owned solely by its own
   rule below (it tracks the button, not the copy column). Two rules setting the same
   property on one selector is how the Submit-button bug hid earlier today. */
/* Headline sits on ONE line AND flush to the same 30rem column as the copy (Mark).
   MEASURED @1440: the text ran 525px at 52.8px against a 480px copy column, so the cap
   comes down to 48px — the largest size where "Work Without Friction" ends level with the
   paragraph beneath it. white-space:nowrap keeps it one line; the clamp shrinks it on
   narrow screens instead of wrapping. */
.sh-close__title { max-width: none; white-space: nowrap; }
.sh-close__title {
  font-family: var(--sp-font-display);
  font-weight: 700;
  /* Reduced ~10% (Mark 2026-07-27) so the headline's visual weight lines up with the
     subhead beneath it instead of dominating it. Was clamp(1.6rem, 4.05vw, 3rem). */
  font-size: clamp(1.55rem, 3.95vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #F5F2EC;
  margin: 0;
}
.sh-close__body {
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(245, 242, 236, 0.7);
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  text-wrap: pretty;
}
/* CTA + note as a genuinely centred pair (rebuilt 2026-07-27 — the previous approach
   tried to match the note's max-width to the button's rendered width so two flush-LEFT
   boxes would happen to line up; Mark reported the note still sitting off to the right,
   so this replaces that with real centring instead of width-matching:
   - .sh-close__actions gets text-align:center, which centres the CTA (an inline-level
     inline-flex box responds to a parent's text-align like any inline element).
   - .sh-close__note is block-level, so text-align:center only centres its TEXT, not the
     box — margin:auto centres the box itself. Both are now centred independently of the
     other's width, so they can never drift apart again. */
.sh-close__actions {
  /* inline-block so the wrapper SHRINKS to the button's width and sits flush LEFT with
     the copy above it (Mark 2026-07-27). text-align:center then centres the note inside
     that shrunk box — i.e. on the button's own centre line — rather than across the
     section. Button left, note centred under it, no width-matching required. */
  display: inline-block;
  max-width: 100%;
  margin-top: clamp(26px, 3.4vw, 36px);
  text-align: left;
}
.sh-close__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; font-size: 15px; text-decoration: none;
}
.sh-close__note {
  font-family: var(--sp-font-sans);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(245, 242, 236, 0.52);
  margin: 14px 0 0;
  text-align: left;
  max-width: 21rem;
}
@media (max-width: 860px) {
  /* Narrow: a left/right split collapses, so the scrim becomes VERTICAL — dark at the top
     under the copy, clearing at the bottom where she sits — and the frame anchors right so
     she stays in shot. */
  .sh-close {
    /* Taller than .sh-fstory below it now (Mark 2026-07-28): the copy + button block
       needs breathing room, and the whole block should clear the fold on a phone.
       100svh floor = exactly one viewport of the SMALL viewport (toolbar expanded), so
       headline through note is guaranteed above the fold on first paint; svh not vh so
       Safari's collapsing toolbar can't push the button under it. */
    min-height: clamp(680px, 104vh, 940px);
    min-height: clamp(680px, 104svh, 940px);
    background-position: 78% center;
    /* Content TOP-aligned so the lower half of the frame is left clear for the woman. */
    align-items: flex-start;
    padding: clamp(64px, 12vw, 96px) var(--sh-pad-side) clamp(150px, 34vw, 240px);
  }
  .sh-close__scrim {
    /* Top edge is FULLY OPAQUE tetsukon — the same colour as .sh-psplit above — so the
       seam between the two sections disappears, then it fades from there to reveal the
       photograph. */
    background:
      linear-gradient(180deg,
        rgba(27, 42, 52, 1) 0%,
        rgba(27, 42, 52, 1) 8%,
        rgba(27, 42, 52, 0.88) 24%,
        rgba(27, 42, 52, 0.6) 46%,
        rgba(27, 42, 52, 0.24) 70%,
        rgba(27, 42, 52, 0.08) 88%,
        rgba(27, 42, 52, 0.04) 100%);
  }
  /* Headline matched to .sh-psplit__title's mobile size (the section above). */
  .sh-close__title {
    font-size: var(--sp-size-h2);
    white-space: normal;
  }
  .sh-close__title, .sh-close__body { max-width: none; }
  /* Everything centred on mobile (Mark 2026-07-28) — the left-column composition is a
     desktop idea; on a phone the copy sits over the sky with nothing to align to. */
  .sh-close__inner { text-align: center; }
  /* Body matched to .sh-psplit__rowbody — 15px / 1.4 — so the two sections read as one
     voice (the base rule here is 15px/1.8, too airy beside it). */
  .sh-close__body {
    font-size: 15px;
    line-height: 1.4;
    margin-left: auto;
    margin-right: auto;
  }
  /* Button hugs its own text instead of stretching to 22rem; inline-block wrapper is
     centred by the parent's text-align. */
  /* More air above the button so the copy/CTA group breathes (Mark 2026-07-28). */
  .sh-close__actions { display: inline-block; width: auto; max-width: 100%; text-align: center; margin-top: clamp(30px, 7vw, 46px); }
  .sh-close__cta { width: auto; max-width: none; }
  .sh-close__note { max-width: none; text-align: center; }
}

/* ---- Lock the page to vertical panning only (Mark 2026-07-28) -------------------------
   MEASURED at 375px: the document does NOT overflow horizontally (scrollWidth == clientWidth
   == 375), so this was not a stray wide element — it was overscroll CHAINING. The page has
   four horizontal carousels (.sh-tri__row, .sh-hlt__gallery, .sh-stickyform__stack,
   .sh-engcar__stack); swiping one past its end passed the gesture up to the document, which
   then panned/rubber-banded sideways and took the whole page off screen.
   - overscroll-behavior-x: none on the root stops the document itself panning sideways.
   - contain on each carousel stops the gesture chaining out of it in the first place.
   - overflow-x: clip on body is the belt-and-braces guard; `clip` (not `hidden`) because
     hidden would create a scroll container and break position:sticky on the nav. */
html {
  overscroll-behavior-x: none;
  /* Safari-specific (Mark 2026-07-28: slight horizontal wiggle in Safari, fine in Chrome).
     WebKit does not reliably clip horizontally from a rule on <body> alone — the clip has
     to be on the root element too. Chrome honours the body rule, which is why it was
     already fine there. `clip` not `hidden`: hidden would make these scroll containers
     and break position:sticky on the nav. */
  overflow-x: clip;
}
body {
  overscroll-behavior-x: none;
  overflow-x: clip;
  position: relative;
  /* max-width:100% removed from html/body (2026-07-28): at fractional device-pixel
     widths it produced a box a hair under the viewport, letting body's own shironeri
     background show as a white hairline at the right edge of the DARK sections — what
     Mark saw in Safari mobile. Body's background is left ALONE on purpose; recolouring
     it would just move the same hairline onto the light sections. overflow-x:clip still
     contains the pan, and the JS gesture guard is what stops iOS rubber-banding. */
}
.sh-tri__row,
.sh-hlt__gallery,
.sh-stickyform__stack,
.sh-engcar__stack {
  overscroll-behavior-x: contain;
}

/* ---- Stop iOS long-press hijacking images (Mark 2026-07-28) --------------------------
   On a phone, holding anywhere near a photo pops WebKit's "Save Image / Copy" callout and
   lifts a drag preview — distracting on a page this photo-heavy, and easy to trigger by
   accident mid-scroll. -webkit-touch-callout:none is the iOS analogue of suppressing the
   desktop right-click menu.
   Scoped to MEDIA ONLY on purpose: text stays fully selectable and copyable, which a blanket
   user-select:none would have destroyed. The two existing @supports(-webkit-touch-callout)
   blocks elsewhere in this file are iOS feature-DETECTION, unrelated to this. */
img,
picture,
video,
svg {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Pro-level Upgrade top padding matched to Industrial-grade (0) — Mark 2026-07-29, desktop */
@media (min-width: 861px) {
  .sh-psplit {
    padding-top: 132px;
  }
}

/* Cross-browser font consistency (Mark 2026-07-29): 16 buttons and 6 inputs had no
   font declared, so each engine applied its own UA default — Chrome 13.3333px (inputs in
   Arial), Safari 11px (inputs in system-ui). Every element WITH an explicit size already
   matched. Inheriting removes the divergence. Elements with their own font rules are
   unaffected (higher specificity than a bare element selector). */
button, input, select, textarea {
  font-size: inherit;
  font-family: inherit;
}

/* Industrial-grade body copy slightly narrower on the BIG SCREEN only (Mark 2026-07-29).
   Inherited 32ch from the min-width:1400px block; 29ch is ~9% narrower. Scoped >=1500 so
   the 14-inch (1496) keeps 32ch. */
@media (min-width: 1500px) {
  .sh-solhero__body {
    max-width: 29ch;
  }
}

/* Blueprint body copy reduced so the right column shortens and the headline can sit level
   with the photo top (Mark 2026-07-29). .sh-fstory__p was 15px/1.65 -> 14px/1.55.
   Scoped 861-1499. */
@media (min-width: 861px) and (max-width: 1499px) {
  .sh-fstory__p {
    font-size: 14px;
    line-height: 1.55;
  }

  .sh-fstory__intro {
    font-size: 14px;
  }
}

/* FAQ on the 14-inch (Mark 2026-07-29): headline matched to the Blueprint section above
   (2.2rem = 35.2px), and the two columns made even. */
@media (min-width: 861px) and (max-width: 1499px) {
  .sh-faq__title {
    font-size: 2.2rem;
  }

  .sh-faq__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Work Without Friction body copy: same spread on tablet-wide as on the 14-inch (22rem)
   — Mark 2026-07-29. Uses the existing tablet-landscape band. */
/* iPad landscape + 14-inch MacBook. NOTE 2026-07-30: Marks 14-inch runs 1512x982 at its
   DEFAULT resolution, and reported 1496 earlier only because it was on a scaled mode while
   plugged in. Every band capped at 1499 therefore missed his laptop entirely. 1600 ceiling
   covers 1496 and 1512 while staying below any external display. */
@media (min-width: 861px) and (max-width: 1600px) {
  .sh-close__body {
    max-width: 30rem;
  }
}

/* Work Without Friction photo zoomed slightly on iPad only (Mark 2026-07-29): at the iPad
   ratio too much dusk sky reads as a continuation of the blue section above. 115% width
   crops more sky. Band 861-1400 covers every iPad landscape width (1080/1133/1180/1194/1366)
   and stops short of the 14-inch at 1496. */
@media (min-width: 861px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .sh-close {
    background-size: 115% auto;
    background-position: 68% bottom;
  }
}

/* Watch-Snappalm-in-action chip: give touch tablets the same teal treatment as desktop
   (Mark 2026-07-30, iPad). The teal lives behind (hover:hover)+1024 OR min-width:1500 — an
   iPad has no hover and sits under 1500, so neither arm matched and it fell back to the base
   soft-white chip. Values copied verbatim from that block. :hover repeated with the same
   values because WebKit latches :hover after a tap, which would otherwise flip it to white
   the moment it is pressed. Floor of 861px keeps phones untouched. */
@media (hover: none) and (min-width: 861px) {
  .sh-lvh__chip,
  .sh-lvh__chip:hover {
    background: rgba(46, 106, 120, 0.82);
    border-color: rgba(245, 242, 236, 0.14);
    color: #ffffff;
  }

  .sh-lvh__chip .sh-lvh__label {
    color: #ffffff;
  }
}

/* Founder's-notes link to seedro.com. Originally a standalone closing line under the
   Phase 3 signature; moved 2026-08-06 (Mark) to sit inline on "more ideas to life" in the
   "It is a vehicle…" line, and the standalone line was removed. It renders inside a
   .sh-fstory__p, so it inherits that paragraph's size/leading; these rules only give it
   link affordance in the brand accent instead of browser blue.

   The old `.sh-fstory__p:has(.sh-fstory__link) { margin-top: 22px }` rule was deleted with
   that move. It existed to put breathing room between the "- Mark" signature and the
   closing link; now that the link lives mid-list, it would have injected 22px above the
   "vehicle" line and broken the even rhythm of the five "It is a…" lines. */
.sh-fstory__link {
  color: var(--sp-asagi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s var(--sp-ease-glide);
}

.sh-fstory__link:hover {
  opacity: 0.72;
}

/* Blueprint intro on phones: let it fill the column (Mark 2026-08-02).
   The base rule sets `text-wrap: pretty`, which shortens lines to avoid a ragged tail — the
   side effect is the paragraph reads NARROWER than the body copy beneath it. On mobile we
   want the opposite: same measure as the body copy, so plain `wrap` overrides the inherited
   `pretty` and the text runs the full column width.

   Scoped to <=640px — the same breakpoint where `.sh-br-desktop` turns off, so the desktop
   break Mark placed (after "their") keeps `pretty` and is untouched. */
@media (max-width: 640px) {
  .sh-fstory__intro {
    text-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Founder story — COLLAPSED, diagonal split photo        (Leonardo 2026-09-11)

   Mark retired the three-chapter timeline for one copy block and one photo box.
   The chapter nav, paddles, read-more clamp and per-chapter swap markup are gone
   from components/Home.js; their rules ABOVE are now dead and are left in place
   deliberately — .sh-fstory__paddle is REUSED by the FAQ pagination arrows
   (.sh-faq__pagination), so deleting "dead" .sh-fstory__* rules would silently
   un-style a different section. Grep before you prune.
   ═════════════════════════════════════════════════════════════════════════ */

/* One block of copy no longer justifies a near-full-screen minimum. */
@media (min-width: 861px) {
  .sh-fstory--solo {
    min-height: clamp(560px, 74vh, 740px);
    min-height: clamp(560px, 74svh, 740px);
  }

  /* No separate "title" area — the h2 lives inside .sh-fstory__copyIn so the
     heading and its paragraphs move and centre as ONE block.
     Why: the base .sh-fstory__copy{align-self:center} near the bottom of this
     sheet overrides the @media(min-width:861px){align-self:start} above it
     (equal specificity, later source order wins). Invisible with three chapters;
     with one short block it opened a ~190px void under the h2. Restructuring to
     one area removes the collision instead of adding a third competing rule. */
  .sh-fstory--solo .sh-fstory__grid {
    grid-template-areas: "plate copy";
    grid-template-rows: auto;
    align-items: center;
  }
}

.sh-fstory--solo .sh-fstory__copyIn > .sh-fstory__title {
  margin-bottom: 4px;
}

/* ── The diagonal split ──────────────────────────────────────────────────────
   Cut runs top-left -> bottom-right, i.e. the line y = x.
   Points BELOW that line (y > x) are the lower-left triangle: the portrait.
   Points above it are the upper-right triangle: the prototypes.            */
.sh-fstory__split {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sh-fstory__half {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sh-fstory__half img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same multiply treatment the chapter photos carried, so both halves sit INTO
     the shironeri well rather than on top of it. */
  mix-blend-mode: multiply;
  backface-visibility: hidden;
}

.sh-fstory__half--portrait {
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.sh-fstory__half--protos {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Reverted to the original top-left -> bottom-right cut, so the portrait is back in
   the LOWER-left triangle and needs a crop again. This is the MINIMUM viable zoom,
   derived rather than eyeballed.

   Push the image as far down and left as it can go while still covering the box:
     ty_max = 0.5 - 0.5/S,  tx_min = 0.5/S - 0.5
   At those limits the head's top edge lands at 0.031*S and its right edge at
   1 - 0.554*S. The whole head clears the y = x cut only when 0.031S > 1 - 0.554S,
   i.e. S > 1.71. Below that the diagonal slices his face. 1.8 is that floor plus a
   small margin: head top 0.054 vs head right 0.025.

   So on THIS diagonal he cannot be made much smaller — 1.8 is the floor, not a taste
   choice. Going smaller requires the other diagonal or a photo with headroom. */

/* Pull the prototype flat-lay in slightly so the grid of parts reads as texture
   rather than as identifiable individual objects fighting the portrait. */
.sh-fstory__half--protos img {
  transform: scale(1.12);
  object-position: 60% 35%;
}

/* The cut itself — a thin band traced along the same diagonal, filled with the
   section background so it reads as a slice through to the page beneath. */
.sh-fstory__seam {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--sp-kinari);
  clip-path: polygon(
    0 0,
    3px 0,
    100% calc(100% - 3px),
    100% 100%,
    calc(100% - 3px) 100%,
    0 3px
  );
}

/* Prototype label — top-right, mirroring .sh-fstory__bug bottom-left. */
.sh-fstory__protolabel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 14px;
  border-radius: 8px;
  text-align: right;
  background: rgba(27, 42, 52, 0.42);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 420ms var(--sp-ease-glide) 220ms;
}

.sh-fstory--solo.is-entered .sh-fstory__protolabel {
  opacity: 1;
}

.sh-fstory__protolabel strong {
  font-family: var(--sp-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.sh-fstory__protolabel span {
  font-family: var(--sp-font-sans);
  font-size: 11px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.78);
}

/* Plate reveal. The old reveal was bound to .sh-fstory__img--in, which this
   markup does not use; without it the photo popped in with no entrance while
   the copy beside it still rose. */
.sh-fstory--solo:not(.is-entered) .sh-fstory__well {
  opacity: 0;
  transform: translateY(14px);
}

.sh-fstory--solo.is-entered .sh-fstory__well {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 520ms var(--sp-ease-glide),
    transform 520ms var(--sp-ease-glide);
}

/* seedro.com — the only link in this section. Underline stays on at rest: an
   unstyled inline link inside muted body copy is invisible. */
.sh-fstory__link {
  color: var(--sp-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sp-tetsukon-15);
  transition:
    color 160ms var(--sp-ease-glide),
    text-decoration-color 160ms var(--sp-ease-glide);
}

@media (hover: hover) {
  .sh-fstory__link:hover {
    color: var(--sp-asagi);
    text-decoration-color: currentColor;
  }
}

/* Phone: the well is ~350x263, so both labels shrink or they eat the frame. */
@media (max-width: 860px) {
  .sh-fstory__protolabel {
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 7px;
  }

  .sh-fstory__protolabel strong {
    font-size: 11px;
  }

  .sh-fstory__protolabel span {
    font-size: 10px;
  }
}


/* Paragraph rhythm. .sh-fstory__copyIn is a flex column with gap:12px AND the
   sheet above carries .sh-fstory__p + .sh-fstory__p{margin-top:14px} — the two
   STACK, so the real gap between paragraphs was 26px, roughly double the rest of
   the page. That rule was written when each chapter held one or two paragraphs;
   three paragraphs in one block made it obvious. Zero the margin and let the
   flex gap be the single source of the rhythm. */
.sh-fstory--solo .sh-fstory__p + .sh-fstory__p {
  margin-top: 0;
}

.sh-fstory--solo .sh-fstory__copyIn {
  gap: 16px;
}



/* NO ZOOM. Portrait3_headroom.jpg is framed for this cut: the subject's head sits at
   0.44 down / 0.24 across, so the whole head clears the y = x diagonal at the photo's
   natural size. Earlier versions of this rule carried scale(2) because the original
   Portrait3_web.jpg had his head ~3% from the top of the frame and the only way into
   the lower-left triangle was a hard zoom — which Mark rejected as too big. Adding a
   zoom back here would undo the reason the photo was reframed.

   PROVENANCE: the lower-left of that file is the ORIGINAL photograph, pixel for pixel —
   his likeness, the desk, the laptop, every object. Only the empty room above and to the
   right (ceiling, wall, window blinds) is a generative extension, composited UNDER the
   original so nothing real was repainted. If it is ever regenerated, keep that order. */
.sh-fstory__half--portrait img {
  /* +25% (Mark, 2026-09-11). Safe on this asset in a way it never was on the original:
     scaling about the centre moves the head UP-LEFT, and the head's top edge (0.439)
     recedes from the diagonal faster than its right edge (0.235) does, so the cut is
     cleared by a WIDER margin as the zoom grows — the opposite of the old photo, where
     zoom was the only thing keeping him below the line.
     TWO limits govern this, and they pull against each other:

       coverage:  tx <= 0.5 - 0.5/S   and   ty >= -(0.5 - 0.5/S)
       the cut:   margin = S * (0.204 + ty - tx)  must stay > 0

     Moving him RIGHT (tx up) and UP (ty down) BOTH shrink the margin — he is being
     pushed toward the diagonal from two sides at once. At scale(1.25) coverage capped
     tx at 10%, so "more to the right" was only worth 2.5% of the box: invisible. The
     zoom had to rise to buy the room, which is why S went 1.25 -> 1.45. ty eased from
     -6% to -3% to pay for the extra tx.

     ZOOM IS PINNED AT 1.25 (Mark, 2026-09-11: "stop zooming in"). That fixes the
     rightward travel, because coverage caps tx at 0.5 - 0.5/S = 10% — and on PHONE that
     bound is exact, since the 4:3 well matches the asset's aspect and there is no spare
     width to borrow. 9.5% is the practical ceiling with a hair of safety.

     So the rightward slide is capped at ~0.12 of the box at this size. It cannot go
     further without raising S. Earlier revisions reached 1.45 and 1.7 chasing more
     travel; that was the wrong trade and was reverted.

     Second bound, independent of zoom: margin = S * (0.204 + ty - tx) must stay > 0, so
     tx < 0.204 + ty. At ty = -4% that allows tx up to 16.4%, so coverage is what binds
     here, not the cut. Current head 0.42 down / 0.29 across, margin ~0.13. Measured. */
  object-position: center;
  transform: scale(1.25) translate(9.5%, -4%);
}


/* Founder plate on the RIGHT of the photo box (Mark, 2026-09-11).
   NOT the bottom-right corner — that placement is unavailable on this cut. The portrait
   side is y > x, so near the right edge the usable strip is only a few percent tall (at
   x = 0.97 the plate would have to sit above y = 0.97); every corner anchor there lands
   on the prototypes half. Holding the RIGHT EDGE at 75% keeps all four corners on the
   portrait side, and with the subject now pushed to ~0.34 across there is no collision
   with his face. The TOP-RIGHT corner is the binding one for this anchor — re-check it
   if the plate is ever widened or the type size grows. */
.sh-fstory--solo .sh-fstory__bug {
  left: auto;
  right: 25%;
}

/* Phone needs the plate further left than desktop. The plate is a much larger fraction
   of a 350px well, so at right:20% its TOP-RIGHT corner landed at (0.80, 0.72) — y < x,
   i.e. over on the prototypes half. Holding the right edge at 66% puts that corner at
   (0.66, 0.72), back on the portrait side with ~0.06 to spare. Measured on the live
   page; the desktop value is NOT safe to reuse here. */
@media (max-width: 860px) {
  .sh-fstory--solo .sh-fstory__bug {
    right: 34%;
  }
}