/* TECHNOLOGY preview page — scoped under .tech-preview-page only.
   Aligns source layout with existing CT/QC tokens. */

.tech-preview-page {
  /* Brand tokens shared with QC / subpage-shared (do not diverge). */
  --ct-ink: #1a1a1a;
  --ct-body: #2b2b2b;
  --ct-muted: #6b6560;
  --ct-line: rgba(26, 26, 26, 0.12);
  --ct-beige: #f4f1ed;
  --ct-beige-deep: #efe9e0;
  --ct-ivory: #faf8f5;
  --ct-panel: #1a1a1a;
  --ct-metal: #9a8d78;
  --ct-max: 1240px;
  --ct-gutter: clamp(24px, 5vw, 80px);
  --ct-section: clamp(100px, 12vw, 160px);
  --ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Font stacks match quality-care.css --qc-serif / --qc-sans. */
  --tp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --tp-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --tp-dur: 0.9s;
  --tp-blur-text: 7px;
  --tp-blur-media: 8px;
  --tp-blur-card: 7px;
  /* Shared with QC compact hero (subpage-shared --lv-compact-hero-fade). */
  --lv-compact-hero-fade: linear-gradient(
    180deg,
    #c7bbb0 0%,
    #d6cbbf 34%,
    #e8e0d6 62%,
    #f3efe9 82%,
    #faf8f5 100%
  );
  color: var(--ct-ink);
  background: var(--ct-ivory);
}

.tech-preview-page .ct-wrap {
  width: min(var(--ct-max), calc(100% - (var(--ct-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.tech-preview-page .tp-eyebrow {
  margin: 0 0 14px;
  font-family: var(--tp-sans);
  font-size: 11px;
  font-weight: 500;
  /* QC care label uses 0.28em; nudge toward brand without losing TP airiness */
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ct-metal);
}

.tech-preview-page .tp-eyebrow--light {
  color: rgba(244, 241, 237, 0.68);
}

.tech-preview-page .tp-display {
  margin: 0;
  font-family: var(--tp-serif);
  /* ~11% smaller max; letter-spacing closer to QC section heads (0.10–0.14em) */
  font-size: clamp(26px, 3.8vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--ct-ink);
}

.tech-preview-page .tp-display em {
  font-style: normal;
  color: var(--ct-metal);
}

/* Breadcrumb: match QC / CT .concept-breadcrumb (subpage-shared / concept-technology). */
.tech-preview-page .concept-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-family: var(--tp-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ct-muted);
}

.tech-preview-page .concept-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.tech-preview-page .concept-breadcrumb a:hover {
  color: var(--ct-ink);
}

.tech-preview-page .concept-breadcrumb__sep {
  opacity: 0.4;
}

/* ===== 1 Hero =====
   Top padding: shared subpage rhythm + ~50px air (RUN 10). */
.tech-preview-page .tp-hero {
  padding:
    calc(var(--ct-section) + clamp(36px, 3.5vw, 50px) + 50px)
    0
    var(--ct-section);
  background: var(--ct-ivory);
}

/*
  RUN 27/28/30: compact left-aligned intro + comparison figure.
  QC paints --lv-compact-hero-fade on a short hero (~385px), so the beige
  band reads as header→title wash. Tech keeps the figure in-hero (tall),
  so the same percentage gradient must NOT stretch full height — that caused
  a stretched/double-looking wash vs QC. Mirror QC: ivory section + top band
  using the same fade token (shared with subpage-shared / QC).
*/
.tech-preview-page .tp-hero.tp-hero--compact {
  position: relative;
  isolation: isolate;
  padding-top: calc(96px + clamp(28px, 3.2vw, 44px));
  padding-bottom: clamp(28px, 3.5vw, 40px);
  background-color: var(--ct-ivory);
  background-image: none;
}

.tech-preview-page .tp-hero.tp-hero--compact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* ≈ QC compact hero height on PC (measured ~385px) */
  height: clamp(320px, 34vw, 400px);
  z-index: 0;
  pointer-events: none;
  background-color: var(--ct-ivory);
  background-image: var(--lv-compact-hero-fade);
}

.tech-preview-page .tp-hero.tp-hero--compact > .ct-wrap {
  position: relative;
  z-index: 1;
}

.tech-preview-page .tp-hero__heading {
  text-align: center;
  /* Title → comparison image: +~40px vs prior clamp(36px, 5vw, 58px) */
  margin-bottom: clamp(76px, 7vw, 100px);
}

/* RUN 33: title cluster centered; breadcrumb stays left (sibling above). */
.tech-preview-page .tp-hero--compact .tp-hero__heading {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(52px, 4.5vw, 72px);
}

.tech-preview-page .tp-hero--compact .concept-breadcrumb {
  margin-bottom: clamp(20px, 2.4vw, 28px);
  text-align: left;
  justify-content: flex-start;
}

.tech-preview-page .tp-hero--compact .tp-hero__figure {
  margin: 0;
}

.tech-preview-page .tp-hero-follow {
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 72px);
  background: var(--ct-ivory);
}

/* RUN 31/32: center the post-comparison message (heading + body). */
.tech-preview-page .tp-hero-follow .tp-hero__copy {
  /* Wide enough for PC 2-line heading; body stays narrower via > p. */
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.tech-preview-page .tp-hero-follow .tp-hero__sub {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

/* RUN 32 PC: keep each CMS line on one row (no mid-line wrap on 着け心地). */
@media (min-width: 901px) {
  .tech-preview-page .tp-hero-follow .tp-hero__sub span {
    white-space: nowrap;
  }
}

.tech-preview-page .tp-hero-follow .tp-hero__copy > p {
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
}

.tech-preview-page .tp-hero__title {
  margin: 8px 0 12px;
  font-family: var(--tp-serif);
  /* RUN 10: PC 42px (QC .ct-page-name scale); mobile shrinks via clamp */
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}

.tech-preview-page .tp-hero--compact .tp-hero__title {
  margin: 0 0 14px;
  line-height: 1.2;
}

.tech-preview-page .tp-hero__lead {
  margin: 0;
  color: var(--ct-muted);
  font-size: clamp(14px, 1.15vw, 16px);
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.tech-preview-page .tp-hero__figure {
  margin: 0;
  overflow: hidden;
  background: var(--ct-beige-deep);
  box-shadow: 0 18px 50px rgba(26, 26, 26, 0.1);
}

.tech-preview-page .tp-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
}

.tech-preview-page .tp-hero__copy {
  max-width: 920px;
  /* RUN 11: image → JA heading. PC +~40px (78→118); mobile +~16px (56→72). */
  margin: clamp(72px, 7vw, 118px) auto 0;
  text-align: center;
}

.tech-preview-page .tp-hero__sub {
  margin: 0 0 18px;
  font-family: var(--tp-serif);
  /* Keep size near QC quality heading max (34px); tracking +line only */
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.tech-preview-page .tp-hero__sub span {
  display: block;
}

.tech-preview-page .tp-hero__copy > p {
  margin: 0;
  color: var(--ct-muted);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.95;
  letter-spacing: 0.02em;
}

.tech-preview-page .tp-scroll {
  margin-top: 28px;
  font-family: var(--tp-sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ct-metal);
}

.tech-preview-page .tp-scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 44px;
  margin: 12px auto 0;
  background: var(--ct-metal);
}

/* ===== 2 Statement ===== */
.tech-preview-page .tp-statement {
  padding: var(--ct-section) 0;
  background: var(--ct-panel);
  color: #fff;
}

.tech-preview-page .tp-statement__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}

.tech-preview-page .tp-statement .tp-display {
  color: #fff;
  margin-top: 12px;
}

.tech-preview-page .tp-statement__lead {
  margin: 0 0 28px;
  font-size: clamp(17px, 1.65vw, 24px);
  line-height: 1.75;
  letter-spacing: 0.06em;
}

.tech-preview-page .tp-statement__copy > p:not(.tp-statement__lead) {
  margin: 0;
  color: rgba(244, 241, 237, 0.72);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.95;
  letter-spacing: 0.02em;
}

.tech-preview-page .tp-formula {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 48px;
  padding: 28px 0;
  border-top: 1px solid rgba(244, 241, 237, 0.16);
  border-bottom: 1px solid rgba(244, 241, 237, 0.16);
}

.tech-preview-page .tp-formula__item span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--tp-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ct-metal);
}

.tech-preview-page .tp-formula__item strong {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 400;
}

.tech-preview-page .tp-formula__plus {
  color: rgba(244, 241, 237, 0.35);
  font-size: 1.8rem;
}

/* ===== 3 Features ===== */
.tech-preview-page .tp-features {
  padding: var(--ct-section) 0;
  background: #fff;
}

.tech-preview-page .tp-section-head {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px, 5vw, 70px);
  margin-bottom: clamp(44px, 5.5vw, 68px);
  align-items: end;
}

.tech-preview-page .tp-section-head > p {
  margin: 0;
  max-width: 650px;
  color: var(--ct-muted);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.95;
  letter-spacing: 0.02em;
}

.tech-preview-page .tp-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ct-line);
  border-left: 1px solid var(--ct-line);
}

.tech-preview-page .tp-feature {
  position: relative;
  min-height: 300px;
  padding: clamp(32px, 3.8vw, 48px);
  border-right: 1px solid var(--ct-line);
  border-bottom: 1px solid var(--ct-line);
  box-sizing: border-box;
}

.tech-preview-page .tp-feature__tag {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--tp-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ct-metal);
}

.tech-preview-page .tp-feature__num {
  font-family: var(--tp-serif);
  /* Closer to QC .qc-index scale (max ~28–34) while keeping TP presence */
  font-size: clamp(36px, 3.6vw, 50px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(154, 141, 120, 0.35);
}

.tech-preview-page .tp-feature h3 {
  margin: 22px 0 12px;
  font-family: var(--tp-serif);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.45;
}

.tech-preview-page .tp-feature p {
  margin: 0;
  color: var(--ct-muted);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.95;
  letter-spacing: 0.02em;
}

/* ===== 4 Compare + Wear ===== */
.tech-preview-page .tp-compare {
  padding: var(--ct-section) 0;
  background: var(--ct-beige);
}

.tech-preview-page .tp-compare-table {
  margin-top: 8px;
  border-top: 1px solid var(--ct-line);
}

.tech-preview-page .tp-compare-head,
.tech-preview-page .tp-compare-row {
  display: grid;
  grid-template-columns: 160px 1fr 1.12fr;
}

.tech-preview-page .tp-compare-head {
  font-family: var(--tp-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  background: var(--ct-beige-deep);
}

.tech-preview-page .tp-compare-head > div,
.tech-preview-page .tp-compare-row > div {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ct-line);
  box-sizing: border-box;
}

.tech-preview-page .tp-compare-side--general,
.tech-preview-page .tp-compare-cell--general {
  background: #e7e5e0;
  color: #77736d;
}

.tech-preview-page .tp-compare-side--brand,
.tech-preview-page .tp-compare-cell--brand {
  background: #fffdf8;
  border-left: 1px solid rgba(154, 141, 120, 0.55);
}

.tech-preview-page .tp-compare-side--brand {
  color: var(--ct-metal);
  border-top: 2px solid var(--ct-metal);
  margin-top: -2px;
}

.tech-preview-page .tp-compare-key {
  font-family: var(--tp-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ct-metal);
  background: var(--ct-beige-deep);
}

.tech-preview-page .tp-compare-cell {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.tech-preview-page .tp-compare-cell--brand {
  color: var(--ct-ink);
}

.tech-preview-page .tp-wear {
  margin-top: clamp(56px, 7vw, 90px);
  padding: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 60px);
  background: #fff;
}

.tech-preview-page .tp-wear__head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--ct-line);
}

.tech-preview-page .tp-wear__title {
  margin: 12px 0 0;
  font-family: var(--tp-serif);
  font-size: clamp(24px, 3.1vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.06em;
}

.tech-preview-page .tp-wear__head > p {
  margin: 0;
  max-width: 500px;
  color: var(--ct-muted);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.95;
  letter-spacing: 0.02em;
}

.tech-preview-page .tp-wear__visual {
  margin: 38px 0 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tech-preview-page .tp-wear__visual-inner {
  position: relative;
  min-width: 820px;
}

.tech-preview-page .tp-wear__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.tech-preview-page .tp-wear__labels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  pointer-events: none;
}

.tech-preview-page .tp-wear__labels span {
  padding: 0 10px 18px;
  text-align: center;
  color: #fff;
  font-family: var(--tp-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}

.tech-preview-page .tp-scene-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}

.tech-preview-page .tp-scene {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #e8e4dc;
}

.tech-preview-page .tp-scene strong {
  font-weight: 400;
}

.tech-preview-page .tp-scene__status {
  font-family: var(--tp-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.tech-preview-page .tp-scene__status--ok {
  color: #55705b;
}

.tech-preview-page .tp-scene__status--care {
  color: var(--ct-metal);
}

.tech-preview-page .tp-scene__status--ng {
  color: #8b554f;
}

.tech-preview-page .tp-wear__note {
  margin: 24px 0 0;
  color: var(--ct-muted);
  font-size: 12px;
  line-height: 1.8;
}

/* ===== 5 Performance ===== */
.tech-preview-page .tp-performance {
  padding: var(--ct-section) 0;
  background: #fff;
}

.tech-preview-page .tp-performance-list {
  margin-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--ct-line);
}

.tech-preview-page .tp-performance-row {
  display: grid;
  grid-template-columns: 120px 1fr 1.1fr;
  gap: 30px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--ct-line);
}

.tech-preview-page .tp-performance__icon {
  font-family: var(--tp-serif);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--ct-metal);
}

.tech-preview-page .tp-performance-row strong {
  font-family: var(--tp-serif);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.tech-preview-page .tp-performance-row span {
  color: var(--ct-muted);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.tech-preview-page .tp-note {
  margin: 20px 0 0;
  color: #85817a;
  font-size: 12px;
  line-height: 1.8;
}

/* ===== 6 CTA =====
   Natural footer dissolve (no photo — unlike QC `.qc-final`):
   - Section base = footer greige.
   - ::before = ONE black→transparent veil (solid through button, then long soft fade).
   - ::after disabled — dual layers (mask + taupe overlay) caused the RUN13 band.
   - Inner padding-bottom = fade + black buffer so fade starts below the button. */
.tech-preview-page .tp-cta.scrollfixcontents.black.luxury {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: 0 !important;
  --ct-footer-bg: rgb(199, 187, 173);
  --tp-cta-fade: clamp(340px, 40vh, 420px);
  --tp-cta-black-pad: clamp(72px, 8vh, 96px);
  background: var(--ct-footer-bg) !important;
  background-color: var(--ct-footer-bg) !important;
}

/* Solid black above the fade band (title / copy / button + black-pad). */
.tech-preview-page .tp-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--tp-cta-fade);
  z-index: 0;
  pointer-events: none;
  background: #1a1a1a;
}

/* Long opaque black→greige ramp (full band used; alpha-over-taupe looked “short”). */
.tech-preview-page .tp-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tp-cta-fade);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #1a1a1a 0%,
    #24201c 18%,
    #3a342e 36%,
    #5c534a 52%,
    #8a7f72 68%,
    #b0a496 82%,
    #c7bbad 94%,
    var(--ct-footer-bg) 100%
  );
}

.tech-preview-page .tp-cta__inner {
  position: relative;
  z-index: 3;
  /* Bottom pad = fade length + black buffer under button (content-relative). */
  padding: clamp(100px, 14vh, 160px) 0 calc(var(--tp-cta-fade) + var(--tp-cta-black-pad));
  text-align: center;
}

.tech-preview-page .tp-cta__title {
  margin: 14px 0 22px;
  font-family: var(--tp-serif);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.tech-preview-page .tp-cta__copy {
  margin: 0 auto 0;
  max-width: 28em;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.02em;
  line-height: 1.8;
}

/* Shared `.subpage-cta` (subpage-shared.css) — same specs as QC お問い合わせ. */
.tech-preview-page .tp-cta .subpage-cta {
  margin-top: 28px;
}

/* ===== Motion staging =====
   Per-element reveal only: the node itself must have .is-tp-in.
   Parent-section cascade was removed — it unlocked whole sections at once
   and made scroll stagger invisible. Specificity still beats tone blur. */
.tech-preview-page.tp-staging [data-tp-anim] {
  opacity: 0;
  filter: blur(var(--tp-blur-text));
  transform: translateY(20px);
  transition: none;
  transition-delay: 0ms;
}

.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone="media"] {
  filter: blur(var(--tp-blur-media));
  transform: translateY(22px);
}

.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone="card"],
.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone="soft"] {
  filter: blur(var(--tp-blur-card));
  transform: translateY(18px);
}

.tech-preview-page.tp-staging.tp-motion [data-tp-anim] {
  transition:
    opacity var(--tp-dur) var(--ct-ease),
    filter var(--tp-dur) var(--ct-ease),
    transform var(--tp-dur) var(--ct-ease);
  transition-delay: var(--tp-delay, 0ms);
}

/* Self .is-tp-in only — must outrank tone-specific blur rules (FIX-01). */
.tech-preview-page.tp-staging [data-tp-anim].is-tp-in,
.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone].is-tp-in,
.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone="text"].is-tp-in,
.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone="media"].is-tp-in,
.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone="card"].is-tp-in,
.tech-preview-page.tp-staging [data-tp-anim][data-tp-tone="soft"].is-tp-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* No-JS / scripting disabled: never leave content invisible. */
@media (scripting: none) {
  .tech-preview-page.tp-staging [data-tp-anim],
  .tech-preview-page.tp-staging [data-tp-anim][data-tp-tone] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-preview-page.tp-staging [data-tp-anim],
  .tech-preview-page.tp-staging [data-tp-anim][data-tp-tone],
  .tech-preview-page.tp-motion [data-tp-anim] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .tech-preview-page {
    --ct-section: clamp(80px, 14vw, 120px);
  }

  .tech-preview-page .tp-hero {
    padding-top: calc(var(--ct-section) + 36px + 40px);
    padding-bottom: clamp(56px, 10vw, 80px);
  }

  .tech-preview-page .tp-hero.tp-hero--compact {
    padding-top: calc(88px + clamp(20px, 4vw, 32px));
    padding-bottom: clamp(28px, 5vw, 40px);
  }

  /* RUN 30: keep header wash band short on mobile (≈ QC compact hero). */
  .tech-preview-page .tp-hero.tp-hero--compact::before {
    height: clamp(280px, 72vw, 360px);
  }

  .tech-preview-page .tp-hero__heading {
    margin-bottom: clamp(68px, 8vw, 90px);
  }

  /* RUN 31: modest lead→figure gap on mobile (avoid excess). */
  .tech-preview-page .tp-hero--compact .tp-hero__heading {
    margin-bottom: clamp(16px, 4vw, 24px);
  }

  /* RUN 32 mobile: natural wrap, no horizontal scroll. */
  .tech-preview-page .tp-hero-follow .tp-hero__sub {
    width: auto;
    max-width: 100%;
  }

  .tech-preview-page .tp-hero-follow .tp-hero__sub span {
    white-space: normal;
  }

  .tech-preview-page .tp-hero-follow .tp-hero__copy > p {
    max-width: 28em;
  }

  .tech-preview-page .tp-hero--compact .tp-hero__title {
    font-size: clamp(26px, 7vw, 34px);
  }

  .tech-preview-page .tp-hero-follow {
    padding-bottom: clamp(40px, 8vw, 56px);
  }

  .tech-preview-page .tp-statement__grid,
  .tech-preview-page .tp-section-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tech-preview-page .tp-formula {
    grid-template-columns: 1fr;
  }

  .tech-preview-page .tp-formula__plus {
    display: none;
  }

  .tech-preview-page .tp-feature-grid {
    grid-template-columns: 1fr;
  }

  .tech-preview-page .tp-compare-head,
  .tech-preview-page .tp-compare-row {
    grid-template-columns: 110px 1fr 1.1fr;
  }

  .tech-preview-page .tp-wear__head {
    display: grid;
  }

  .tech-preview-page .tp-scene-grid {
    grid-template-columns: 1fr;
  }

  .tech-preview-page .tp-performance-row {
    grid-template-columns: 60px 1fr;
  }

  .tech-preview-page .tp-performance-row span {
    grid-column: 2;
  }

  .tech-preview-page .tp-hero__figure img {
    aspect-ratio: auto;
    min-height: 340px;
  }

  /* CTA: still a long soft fade on narrow screens (avoid short-band look) */
  .tech-preview-page .tp-cta.scrollfixcontents.black.luxury {
    min-height: 70vh;
    --tp-cta-fade: clamp(260px, 36vh, 340px);
    --tp-cta-black-pad: clamp(56px, 7vh, 72px);
  }

  .tech-preview-page .tp-cta__inner {
    padding: clamp(80px, 12vh, 120px) 0 calc(var(--tp-cta-fade) + var(--tp-cta-black-pad));
  }
}

@media (max-width: 560px) {
  .tech-preview-page .tp-compare-head {
    display: none;
  }

  .tech-preview-page .tp-compare-row {
    grid-template-columns: 1fr;
  }

  .tech-preview-page .tp-compare-cell {
    display: block;
  }

  .tech-preview-page .tp-compare-cell--brand {
    border-left: 0;
    border-top: 1px solid rgba(154, 141, 120, 0.45);
  }

  .tech-preview-page .tp-compare-cell--general::before,
  .tech-preview-page .tp-compare-cell--brand::before {
    display: block;
    margin-bottom: 6px;
    font-family: var(--tp-sans);
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .tech-preview-page .tp-compare-cell--general::before {
    content: "一般的なジュエリー";
    color: var(--ct-muted);
  }

  .tech-preview-page .tp-compare-cell--brand::before {
    content: "L.VERUS JOCALE";
    color: var(--ct-metal);
  }

  .tech-preview-page .tp-wear__visual-inner {
    min-width: 720px;
  }
}