/* ====================================================================
   Rejuv landing — styles
   ==================================================================== */

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

:root {
  --color-orange:      #E8730C;
  --color-orange-deep: #C25E00;
  --color-cream:       #FDF4EF;
  --color-black:       #0F0F0F;
  --color-black-2:     #161616;
  --color-black-3:     #0A0A0A;
  --color-card:        #FFFFFF;
  --color-text:        #1A1A1A;
  --color-muted:       #6B6B6B;
  --color-tag-bg:      #FCE9DD;
  --color-tag-text:    #C25E00;

  /* Height reserved for the fixed .mobile-bar below 1024px. Declared here so
     the body padding and the analytics notice cannot drift apart. */
  --cta-bar-h:         84px;
  /* The bar's top padding, which is a transparent-to-cream fade so page content
     dissolves into it. Shared with the analytics notice, which must sit on the
     buttons rather than on this see-through strip. */
  --cta-bar-fade:      22px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  color: var(--color-text);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: auto-phrase;
  overflow-x: hidden;
}

/* auto-phrase keeps CJK phrases whole, which reads better at normal widths but
   makes long compounds like 進捗確認オンラインセッション unbreakable — they set a
   min-content floor that overflows narrow cards. Below 360px fall back to
   standard per-character CJK wrapping. */
@media (max-width: 360px) {
  body { word-break: normal; }
}

a { color: var(--color-orange-deep); text-decoration: none; }
a:hover { color: var(--color-orange); }
p { text-wrap: pretty; }
iframe { border: 0; }
::selection { background: var(--color-tag-bg); color: var(--color-orange-deep); }
button { font-family: inherit; }

/* ================= header ================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 72px;
  transition: background .3s ease, box-shadow .3s ease;
  background: transparent;
}
.header.scrolled {
  background: rgba(253, 244, 239, .95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.brand { font-weight: 900; font-size: 26px; letter-spacing: .02em; color: #fff; transition: color .3s; }
.header.scrolled .brand { color: var(--color-black); }

.header-right { display: flex; align-items: center; gap: 14px; }

.ig-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: #fff; transition: color .3s, background .2s;
}
.header.scrolled .ig-btn { color: var(--color-black); }
.ig-btn:hover { background: rgba(255, 255, 255, .12); color: var(--color-orange); }
.header.scrolled .ig-btn:hover { background: rgba(15, 15, 15, .06); }

.lang-pill {
  display: inline-flex; border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 700;
  transition: border-color .3s;
}
.header.scrolled .lang-pill { border-color: rgba(15, 15, 15, .25); }
.lang-pill button {
  background: transparent; color: #fff; border: none;
  padding: 6px 12px; cursor: pointer; font-weight: 700; font-size: 13px;
  transition: color .3s;
}
.header.scrolled .lang-pill button { color: var(--color-black); }
.lang-pill button.active { background: var(--color-orange); color: #fff !important; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-orange); color: #fff; font-weight: 700; font-size: 15px;
  padding: 11px 20px; border-radius: 12px;
  box-shadow: 0 6px 16px rgba(232, 115, 12, .28);
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(232, 115, 12, .36); color: #fff; }

@media (max-width: 1023px) { .nav-cta { display: none; } }

/* ================= buttons ================= */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; border-radius: 12px;
  transition: transform .2s, box-shadow .2s, background .2s;
  cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--color-orange); color: #fff; box-shadow: 0 8px 22px rgba(232, 115, 12, .4); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(232, 115, 12, .5); color: #fff; }
.btn-outline-light { background: rgba(255, 255, 255, .08); color: #fff; border: 2px solid rgba(255, 255, 255, .85); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); color: #fff; }
.btn-outline-dark { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .8); }
.btn-outline-dark:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-lg { font-size: clamp(15px, 2vw, 17px); padding: 16px 28px; }
.btn-md { font-size: 16px; padding: 14px 26px; }
.btn-xl { font-size: 17px; padding: 17px 34px; }

/* ================= hero ================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; transform: scale(1.1); will-change: transform;
  background: linear-gradient(135deg, #c9a184 0%, #a67853 100%);
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.35) 40%, rgba(15,15,15,.72) 100%);
}
.hero-content {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: 120px 20px 60px; width: 100%;
}
.hero-inner { max-width: 640px; }
.hero h1 {
  font-weight: 900; font-size: clamp(38px, 7vw, 68px); line-height: 1.12;
  color: #fff; margin: 0 0 24px; letter-spacing: .01em;
}
.hero p {
  font-size: clamp(15px, 2.2vw, 19px); line-height: 1.9;
  color: rgba(255, 255, 255, .92); margin: 0 0 14px; max-width: 560px;
}
.hero p.last { margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
}
.trust-strip .rating { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 15px; }
.trust-strip .star { color: #FFC15A; }
.trust-strip .sep { color: rgba(255, 255, 255, .55); }
.trust-strip .meta { color: rgba(255, 255, 255, .9); font-size: 14px; }

/* ================= sections common ================= */
.section { padding: clamp(72px, 10vw, 130px) 20px; }
.section-narrow { padding: clamp(64px, 9vw, 110px) 20px; }
.container { max-width: 1200px; margin: 0 auto; }
.container-md { max-width: 1100px; margin: 0 auto; }
.container-sm { max-width: 1000px; margin: 0 auto; }
.container-xs { max-width: 820px; margin: 0 auto; }

.eyebrow {
  display: inline-block; font-family: ui-monospace, monospace;
  font-size: 13px; letter-spacing: .2em; margin-bottom: 14px;
}
.eyebrow-orange { color: var(--color-orange); }
.eyebrow-light { color: rgba(255, 255, 255, .85); }

.section-heading {
  font-weight: 900; font-size: clamp(28px, 4.5vw, 44px);
  color: var(--color-text); margin: 0; line-height: 1.3;
}
.section-heading.light { color: #fff; }
.section-heading.md { font-size: clamp(26px, 4.5vw, 42px); }
.section-head-center { text-align: center; margin-bottom: clamp(44px, 6vw, 68px); }

/* ================= pain / concerns ================= */
.pain-section { background: var(--color-orange); padding: clamp(64px, 9vw, 110px) 20px; }
.pain-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.pain-card {
  background: #fff; border-radius: 14px; padding: 26px 24px;
  display: flex; align-items: flex-start; gap: 14px;
  box-shadow: 0 10px 30px rgba(120, 50, 0, .14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pain-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(120, 50, 0, .22); }
.pain-check {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-tag-bg); color: var(--color-orange-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px;
}
.pain-card p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--color-text); }
.pain-emphasis {
  max-width: 820px; margin: clamp(36px, 5vw, 52px) auto 0;
  text-align: center; font-size: clamp(16px, 2.4vw, 21px);
  font-weight: 700; line-height: 1.9; color: #fff;
}

/* ================= dark sections (concept, philosophy) ================= */
.dark-section {
  background: var(--color-black); padding: clamp(72px, 10vw, 130px) 20px;
  clip-path: polygon(0 58px, 100% 0, 100% 100%, 0 100%);
  /* The clip cuts a 58px wedge out of this section, exposing whatever sits
     behind it. Pulling the section up by exactly that much lands the wedge on
     the orange Concerns section above, so the triangle reads orange instead of
     the cream page background. */
  margin-top: -58px;
}
.dark-section.no-wedge { clip-path: none; background: var(--color-black-2); margin-top: 0; }
.dark-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.concept-images { position: relative; min-height: 360px; }
.concept-img-1, .concept-img-2 {
  position: absolute; border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.concept-img-1 {
  top: 0; left: 0; width: 72%; height: 300px;
  background: linear-gradient(135deg, #2a2a2a, #444);
}
.concept-img-2 {
  bottom: 0; right: 0; width: 60%; height: 230px;
  background: linear-gradient(135deg, #3a2a1e, #5a4029);
  border: 4px solid var(--color-black);
}
.concept-img-1 img, .concept-img-2 img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.concept-img-label {
  font-family: ui-monospace, monospace; font-size: 12px; color: #888;
  background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 999px;
}

.dark-copy h2 {
  font-weight: 900; font-size: clamp(26px, 4vw, 40px);
  color: #fff; margin: 0 0 22px; line-height: 1.35;
}
.dark-copy p {
  font-size: clamp(15px, 1.8vw, 17px); line-height: 2;
  color: rgba(255, 255, 255, .8); margin: 0 0 18px;
}
.dark-copy p.emphasis { color: #fff; font-weight: 700; margin-bottom: 30px; }
.dark-copy .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }

.philosophy-img {
  /* aspect-ratio rather than min-height: .dark-grid centres its items instead
     of stretching them, so `img { height: 100% }` had no height to resolve
     against. A 4/3 box also matches the asset, so nothing gets cropped, and it
     stays ~420px tall at desktop as the original min-height intended. */
  aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #2a2a2a, #444);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.philosophy-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ================= reasons ================= */
.reasons-section { background: var(--color-cream); padding: clamp(72px, 10vw, 130px) 20px; }
.reasons-list { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.reason-row {
  display: flex; gap: clamp(24px, 4vw, 52px); align-items: center;
}
.reason-row.reverse { flex-direction: row-reverse; }
.reason-image {
  flex: 1 1 0; width: 100%; aspect-ratio: 16 / 11;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #efd9c9, #f6e6da);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(120, 50, 0, .1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.reason-image:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(120, 50, 0, .18); }
.reason-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-tag {
  font-family: ui-monospace, monospace; font-size: 12px; color: #a06a3c;
  background: rgba(255, 255, 255, .7); padding: 5px 12px; border-radius: 999px;
}
.reason-body { flex: 1 1 0; min-width: 0; }
.reason-no {
  display: inline-block; font-family: ui-monospace, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .1em;
  color: var(--color-orange); margin-bottom: 12px;
}
.reason-body h3 {
  font-weight: 900; font-size: clamp(21px, 3vw, 28px);
  color: var(--color-text); margin: 0 0 14px; line-height: 1.4;
}
.reason-body p { font-size: 16px; line-height: 1.95; color: var(--color-muted); margin: 0; }

@media (max-width: 767px) {
  .reason-row, .reason-row.reverse { flex-direction: column; align-items: stretch; }
  /* the row is a column here, so `flex: 1 1 0` sets a HEIGHT basis of 0 and the
     image collapses to 335x0 — aspect-ratio never gets to size it. Hand sizing
     back to aspect-ratio. */
  .reason-image { flex: 0 0 auto; }
}

/* ================= steps ================= */
.steps-section { background: #fff; padding: clamp(72px, 10vw, 130px) 20px; }
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
}
.step-card {
  background: var(--color-cream); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(120, 50, 0, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(120, 50, 0, .16); }
.step-image {
  position: relative; height: 150px;
  background: linear-gradient(135deg, #efd9c9, #f6e6da);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.step-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.step-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--color-orange); color: #fff;
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 8px;
}
.step-body { padding: 20px 18px 24px; }
.step-body h3 { font-weight: 700; font-size: 17px; color: var(--color-text); margin: 0 0 10px; }
.step-body p { font-size: 14px; line-height: 1.8; color: var(--color-muted); margin: 0; }

/* ================= transformations (testimonials) ================= */
.tx-section { background: var(--color-cream); padding: clamp(72px, 10vw, 130px) 20px; }
.tx-shell {
  background: var(--color-cream);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 20px 50px rgba(120, 50, 0, .1);
}
.tx-head { text-align: center; margin-bottom: 40px; }
.tx-heading {
  font-weight: 900; font-size: clamp(26px, 4vw, 40px);
  color: var(--color-text); margin: 0;
}
.tx-sub { color: var(--color-muted); font-size: 15px; margin: 12px 0 0; }

/* Masonry wall.
   Default (no JS / mobile): single vertical column.
   JS switches to horizontal columns and distributes cards round-robin. */
.masonry-wall {
  display: flex; flex-direction: column; gap: 18px;
}
.masonry-wall.laid-out {
  flex-direction: row; align-items: flex-start; gap: 18px;
}
.masonry-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
}

.tx-card {
  position: relative; margin: 0;
  border-radius: 16px; overflow: hidden;
  background: #f4ece6;
  box-shadow: 0 14px 34px rgba(120, 50, 0, .16);
}
/* Beats the site-wide [data-reveal] transition so box-shadow animates on hover too. */
.tx-card[data-reveal] {
  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease;
}
.tx-card img {
  display: block; width: 100%; height: auto;
  transform-origin: center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
@media (hover: hover) {
  /* Compound selector beats [data-reveal].revealed { transform:none } which comes later in the sheet. */
  .tx-card[data-reveal]:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(120, 50, 0, .26);
  }
  .tx-card:hover img { transform: scale(1.06); }
}
.tx-chip {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--color-orange); color: #fff;
  font-weight: 900; font-size: 14px;
  padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.google-pill-wrap { text-align: center; margin-top: 40px; }
.google-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--color-orange-deep);
  font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(120, 50, 0, .15);
  transition: transform .2s;
}
.google-pill:hover { color: var(--color-orange-deep); transform: translateY(-2px); }
.google-pill .star { color: #FFC15A; }

@media (prefers-reduced-motion: reduce) {
  .tx-card, .tx-card img, .google-pill { transition: none; }
  .tx-card:hover, .tx-card:hover img { transform: none; }
}

/* Caption below the image, used where the photo already carries burned-in
   before/after labels in the bottom corners and an overlay .tx-chip would collide. */
.tx-caption {
  display: block;
  padding: 14px 16px 16px;
  background: #f4ece6;
}
.tx-caption-label {
  display: block;
  font-weight: 900; font-size: 15px; line-height: 1.5;
  color: var(--color-orange-deep);
}
.tx-caption-text {
  display: block; margin-top: 4px;
  font-size: 13px; line-height: 1.7;
  color: var(--color-muted);
}

/* ================= reviews (Google 口コミ screenshots) ================= */
/* Sits directly under .tx-section, which already carries the vertical gap. */
.rv-section { background: var(--color-cream); padding: 0 20px clamp(8px, 2vw, 24px); }
.rv-grid {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards in two columns leaves an orphan — centre it across the row. */
  .rv-card:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center;
    width: calc(50% - 9px);
  }
}
@media (min-width: 900px) {
  .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}
.rv-card {
  margin: 0; background: #fff;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(120, 50, 0, .16);
}
.rv-card[data-reveal] {
  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease;
}
/* No hover zoom here — these are text screenshots and scaling blurs the review copy. */
.rv-card img { display: block; width: 100%; height: auto; }
@media (hover: hover) {
  .rv-card[data-reveal]:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(120, 50, 0, .26);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-card { transition: none; }
  .rv-card:hover { transform: none; }
}

/* ================= trainer ================= */
.trainer-section { background: var(--color-cream); padding: clamp(72px, 10vw, 130px) 20px; }
.trainer-card {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(120, 50, 0, .12);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.trainer-image {
  /* definite height, not min-height: a single-column grid row sizes to content,
     and `img { height: 100% }` against an indefinite height falls back to the
     photo's intrinsic height (956px at this width) */
  height: clamp(420px, 62vw, 560px);
  background: linear-gradient(135deg, #e8cbb4, #f0d8c4);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* object-position biased upward: the head sits in the portrait's top third, so
   a centred crop cuts into it wherever the slot is wider than 3:4 — which is
   every single-column width. */
.trainer-image img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 28%;
}
/* Two columns only from 1024px. The old auto-fit split at ~620px, which left
   the photo in a ~360px column stretched to the text column's ~1000px height —
   a 0.35 ratio against a 3:4 portrait, cropping away everything but the face. */
@media (min-width: 1024px) {
  .trainer-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* auto height hands sizing back to the grid row, so the photo stretches to
     the text column as the two-column design intends */
  .trainer-image { height: auto; }
}
.trainer-body { padding: clamp(28px, 4vw, 48px); }
.trainer-badge {
  display: inline-block; background: var(--color-orange); color: #fff;
  font-weight: 700; font-size: 13px;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.trainer-body h2 {
  font-weight: 900; font-size: clamp(24px, 3.4vw, 34px);
  color: var(--color-text); margin: 0 0 20px;
}
.trainer-body > p { font-size: 15px; line-height: 1.95; color: #4a4a4a; margin: 0 0 18px; }
/* Core message, promoted out of the bio prose so it reads at a glance on mobile.
   One tinted panel with the steps flowing as inline text: pills laid out as flex rows
   left an arrow stranded in whitespace whenever the chain wrapped, which it does both
   below ~680px and again at 1024-1120px where the trainer card splits to two columns. */
.trainer-chain {
  list-style: none;
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--color-tag-bg);
  border-radius: 14px;
  font-size: 13.5px; font-weight: 700; line-height: 1.9;
  color: var(--color-orange-deep);
}
.trainer-chain li { display: inline; }
.trainer-chain li:not(:last-child)::after {
  content: ' \2192 ';
  color: var(--color-orange);
  font-weight: 900;
  padding: 0 2px;
}

.trainer-details {
  background: #F5EDE7; border-radius: 14px; padding: 22px 24px; margin-top: 6px;
}
.trainer-details h3 {
  font-weight: 700; font-size: 14px; letter-spacing: .05em;
  color: var(--color-orange-deep); margin: 0 0 12px;
}
.trainer-details ul {
  margin: 0 0 20px; padding-left: 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.trainer-details ul:last-child { margin-bottom: 0; }
.trainer-details li { font-size: 14px; line-height: 1.7; color: #4a4a4a; }

/* ================= bonuses ================= */
.bonus-section { background: var(--color-cream); padding: clamp(64px, 9vw, 110px) 20px 0; }
.bonus-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.bonus-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(120, 50, 0, .1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bonus-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(120, 50, 0, .18); }
.bonus-image {
  position: relative;
  height: 150px;
  background: linear-gradient(135deg, #efd9c9, #f6e6da);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 11px; color: #a06a3c;
  overflow: hidden;
}
.bonus-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bonus-body { padding: 22px 20px; }
.bonus-label {
  display: block; font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 700; color: var(--color-orange); margin-bottom: 8px;
}
.bonus-body p { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--color-text); margin: 0; }

/* ================= LINE banner ================= */
.line-section { background: var(--color-cream); padding: clamp(48px, 7vw, 80px) 20px clamp(64px, 9vw, 110px); }
.line-banner {
  max-width: 1000px; margin: 0 auto;
  background: var(--color-black); border-radius: 24px;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
  text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.line-banner h2, .line-banner h3 {
  font-weight: 900; font-size: clamp(24px, 3.6vw, 38px);
  color: #fff; margin: 0 0 18px; line-height: 1.4;
}
.line-banner p {
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.9;
  color: rgba(255, 255, 255, .78); margin: 0 auto 32px; max-width: 640px;
}
.line-banner .btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ================= pricing (90-day programs + secondary) ================= */
.pricing-section {
  background: var(--color-cream);
  padding: clamp(72px, 10vw, 130px) 20px;
}
.pricing-sub {
  color: var(--color-muted); font-size: 15px; line-height: 1.9;
  max-width: 640px; margin: 16px auto 0;
}

/* Why 90 days — rationale card, sits between the pricing head and the plan cards. */
.why90 {
  max-width: 840px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  background: var(--color-card);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 48px);
  text-align: center;
  box-shadow: 0 14px 40px rgba(120, 50, 0, .1);
}
.why90-title {
  font-weight: 900;
  font-size: clamp(21px, 2.8vw, 28px);
  color: var(--color-text);
  margin: 0;
}
.why90-rule {
  width: 52px; height: 4px; border-radius: 3px;
  background: var(--color-orange);
  margin: 16px auto 22px;
}
.why90 p {
  font-size: 15px; line-height: 1.95;
  color: #4a4a4a;
  margin: 0 0 12px;
}
.why90 p:last-child { margin-bottom: 0; }
/* The closing line is the actual promise — give it weight. */
.why90 .why90-lead {
  margin-top: 20px;
  font-weight: 700;
  color: var(--color-text);
}

/* Two hero cards */
.plans {
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1120px; margin: 0 auto;
}
@media (min-width: 900px) {
  .plans { grid-template-columns: 1fr 1.06fr; align-items: start; gap: 28px; }
}

.plan {
  background: var(--color-card);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 14px 36px rgba(120, 50, 0, .12);
  display: flex; flex-direction: column;
  position: relative;
}
.plan-featured {
  box-shadow: 0 22px 52px rgba(232, 115, 12, .22);
}
.plan[data-reveal] {
  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease;
}
@media (hover: hover) {
  .plan[data-reveal]:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(120, 50, 0, .18);
  }
  .plan-featured[data-reveal]:hover {
    box-shadow: 0 30px 64px rgba(232, 115, 12, .32);
  }
}

/* Top band — tier + wordmark + tagline */
.plan-band {
  position: relative;
  padding: 32px clamp(24px, 4vw, 40px) 28px;
  color: #fff;
}
.plan-band-basic {
  background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
}
.plan-band-premium {
  background:
    radial-gradient(ellipse at top right, rgba(255, 200, 130, .28), transparent 60%),
    linear-gradient(180deg, var(--color-orange) 0%, var(--color-orange-deep) 100%);
}

.plan-tier {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.plan-tier-jp {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .95);
}
.plan-tier-en {
  font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: .24em;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
}

.plan-name {
  font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1;
  margin: 0 0 12px;
  letter-spacing: .01em;
  color: #fff;
}
.plan-tagline {
  font-size: 14.5px; font-weight: 500;
  color: rgba(255, 255, 255, .85);
  margin: 0; letter-spacing: .02em;
}

.plan-rec {
  position: absolute; top: 22px; right: 22px;
  background: #FFC15A; color: #7A4A00;
  font-weight: 900; font-size: 11px; letter-spacing: .16em;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* Price row */
.plan-price {
  padding: 26px clamp(24px, 4vw, 40px) 22px;
  display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(15, 15, 15, .08);
}
.plan-price-label {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--color-orange-deep);
  background: var(--color-tag-bg);
  padding: 4px 12px; border-radius: 999px;
  align-self: center;
}
.plan-price-num {
  font-weight: 900;
  font-size: clamp(38px, 5.5vw, 54px);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-left: auto;
}
.plan-price-tax {
  font-size: 13px; color: var(--color-muted); font-weight: 500;
}

/* Features */
.plan-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-tag-bg); color: var(--color-orange-deep);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.plan-icon svg { width: 22px; height: 22px; }
/* Fit list */
.plan-fit {
  background: #F5EDE7;
  padding: 24px clamp(24px, 4vw, 40px);
  margin-top: 0;
}
.plan-fit-label {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: .2em;
  color: var(--color-orange-deep);
  text-transform: uppercase;
  margin-bottom: 12px; font-weight: 700;
}
.plan-fit ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.plan-fit li {
  font-size: 14px; font-weight: 500; color: var(--color-text);
  line-height: 1.6;
  display: flex; gap: 10px; align-items: flex-start;
}
.plan-fit li::before {
  content: '';
  width: 18px; height: 18px; flex: none;
  margin-top: 3px; border-radius: 50%;
  background: var(--color-orange)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 8'/%3E%3C/svg%3E")
    center / 62% 62% no-repeat;
  box-shadow: 0 2px 6px rgba(232, 115, 12, .3);
}

/* Executive: 5-step onboarding row */
.plan-flow {
  padding: 24px clamp(24px, 4vw, 40px);
  background: var(--color-cream);
  border-top: 1px solid rgba(15, 15, 15, .08);
}
.plan-flow-title {
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: .2em;
  color: var(--color-orange-deep);
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 18px;
}
.plan-flow-steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  align-items: start;
}
.pf-step { text-align: center; position: relative; }
.pf-step + .pf-step::before {
  content: '›';
  position: absolute; left: -6px; top: 6px;
  color: var(--color-orange); font-weight: 700; font-size: 16px;
}
.pf-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-orange); color: #fff;
  font-weight: 900; font-size: 13px;
  margin: 0 auto 8px;
  box-shadow: 0 4px 10px rgba(232, 115, 12, .3);
}
.pf-label {
  font-size: 11px; line-height: 1.5;
  color: var(--color-text); font-weight: 500;
  letter-spacing: .02em;
}

/* Five fixed columns cannot shrink below the CJK labels' min-content (364px),
   so the row spilled out of the card. Two separate narrow contexts hit this:
   phones, and the 900–1023px band where .plans splits into two columns and
   halves the card to a ~356px inner width. (Session 9 fixed the first and
   missed the second — its sweep went 834 → 1024 and never sampled 900.)
   In both, the row becomes a vertical list: number left, label beside it, the
   '›' separator repurposed as a connector rail. */
@media (max-width: 480px), (min-width: 900px) and (max-width: 1023px) {
  .plan-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-step {
    display: grid; grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px; align-items: center; text-align: left;
    padding: 6px 0;
  }
  .pf-num { margin: 0; }
  .pf-label { font-size: 12px; }
  .pf-step + .pf-step::before {
    content: ''; left: 13px; top: -8px;
    width: 2px; height: 16px; border-radius: 1px;
    background: rgba(232, 115, 12, .35);
  }
}

/* Plan CTA */
.plan-cta {
  padding: 24px clamp(24px, 4vw, 40px) 32px;
  display: flex; justify-content: center;
  background: var(--color-card);
}
.plan-featured .plan-cta { background: var(--color-cream); }
.plan-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border-radius: 12px;
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.plan-btn-outline {
  background: transparent;
  border: 2px solid var(--color-orange);
  color: var(--color-orange-deep);
}
.plan-btn-outline:hover {
  background: var(--color-orange); color: #fff; transform: translateY(-2px);
}
.plan-btn-primary {
  background: var(--color-orange); color: #fff;
  box-shadow: 0 8px 22px rgba(232, 115, 12, .38);
}
.plan-btn-primary:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(232, 115, 12, .48);
}

/* Divider between hero plans and secondary grid */
/* ================= plan comparison =================
   One DOM, two layouts. Each .pc-row is its own grid: three columns ≥900px
   (matching .plans), a stacked self-labelling block below. Every track is
   minmax(0, …) — bare 1fr is minmax(auto,1fr) and its CJK min-content floor is
   what caused the Session 9 overflows. */
.pc-intro { max-width: 1120px; margin: clamp(48px, 6vw, 72px) auto 18px; text-align: center; }
.pc-intro h3 {
  font-weight: 900; font-size: clamp(20px, 2.6vw, 26px);
  color: var(--color-text); margin: 0 0 8px;
}
.pc-intro p { font-size: 14px; color: var(--color-muted); margin: 0; line-height: 1.8; }

.pc-table {
  max-width: 1120px; margin: 0 auto;
  background: var(--color-card);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(120, 50, 0, .08);
}
.pc-row { display: grid; grid-template-columns: minmax(0, 1fr); }
.pc-row + .pc-row { border-top: 1px solid rgba(15, 15, 15, .08); }

.pc-feature, .pc-cell { padding: 14px clamp(14px, 1.6vw, 22px); min-width: 0; }

.pc-feature {
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px; align-items: center;
}
.plan-icon-sm { width: 28px; height: 28px; border-radius: 8px; }
.plan-icon-sm svg { width: 16px; height: 16px; }
.pc-feature-label { font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--color-text); }

.pc-val { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.pc-mark {
  width: 18px; height: 18px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px; font-weight: 900; line-height: 1;
}
.pc-mark-two { background: var(--color-tag-bg); color: var(--color-orange-deep); }
.pc-mark-one { background: rgba(15, 15, 15, .06); color: var(--color-muted); }
.pc-mark-tri { background: rgba(15, 15, 15, .06); color: var(--color-muted); }
.pc-text { font-size: 13px; line-height: 1.7; color: var(--color-text); }
.pc-cell-sig .pc-text { color: var(--color-muted); }

/* Executive reads richer via a wash — not white-on-orange, which the contrast
   rule reserves for headings ≥32px (these taglines are 12px). */
.pc-cell-exec { background: rgba(232, 115, 12, .05); }

.pc-th { padding-top: 18px; padding-bottom: 16px; }
/* the header's feature cell has no icon, so its lone label would be placed in
   the 28px icon track and wrap one character per line */
.pc-headrow .pc-feature { grid-template-columns: minmax(0, 1fr); }
.pc-th-label {
  font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: .2em; font-weight: 700;
  color: var(--color-orange-deep); text-transform: uppercase;
}
.pc-plan-name {
  display: block;
  font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: .01em;
}
.pc-cell-sig  .pc-plan-name { color: var(--color-text); }
.pc-cell-exec .pc-plan-name { color: var(--color-orange-deep); }
.pc-plan-tag { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--color-muted); }
.pc-headrow .pc-cell-sig  { box-shadow: inset 0 3px 0 var(--color-black); }
.pc-headrow .pc-cell-exec { box-shadow: inset 0 3px 0 var(--color-orange); }

.pc-cell-plan { display: none; }
.pc-legend { margin-top: 14px; }
.pc-closing {
  max-width: 1120px; margin: 10px auto 0; text-align: center;
  font-size: 14px; font-weight: 700; line-height: 1.9; color: var(--color-text);
}

/* CTA closing the 90-day programs, before the a-la-carte menus.
   Reuses .line-banner; only the spacing differs (it sits inside .container). */
.pricing-cta { margin: clamp(48px, 7vw, 76px) auto 0; }

@media (min-width: 900px) {
  .pc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.45fr); }
  /* explicit corner radii instead of overflow:hidden — a clip here would mask
     exactly the kind of overflow the responsive audit looks for */
  .pc-headrow .pc-cell-exec { border-radius: 0 16px 0 0; }
  .pc-row:last-child .pc-cell-exec { border-radius: 0 0 16px 0; }
}

/* Below 900px: stacked per-feature blocks. The feature label is the heading;
   each value carries its own plan wordmark, so every sub-row is self-labelling. */
@media (max-width: 899px) {
  .pc-row { padding: 4px 0; }
  .pc-feature { padding-bottom: 6px; }
  .pc-cell {
    display: grid; grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px; align-items: start;
    padding-top: 8px; padding-bottom: 8px;
    margin: 0 clamp(10px, 2.4vw, 16px) 6px;
    border-radius: 8px;
  }
  .pc-cell-plan {
    display: block;
    font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
    font-weight: 700; font-size: 13px; line-height: 1.5; letter-spacing: .01em;
  }
  .pc-cell-sig  .pc-cell-plan { color: var(--color-text); }
  .pc-cell-exec .pc-cell-plan { color: var(--color-orange-deep); }
  .pc-headrow { display: block; padding: 16px clamp(14px, 3vw, 22px) 4px; }
  .pc-headrow .pc-cell { display: none; }
  .pc-headrow .pc-feature { grid-template-columns: minmax(0, 1fr); padding: 0 0 8px; }
}

/* ≤400px: 76px of label chrome plus the mark leaves too little for the longest
   Executive strings, so the wordmark moves onto its own line. The global
   word-break relaxation only starts at 360px, so repeat it here for 360–400. */
@media (max-width: 400px) {
  .pc-cell { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pc-cell-plan {
    /* Sans here too — the client asked for Signature / Executive to read as one
       typeface everywhere. Sized down rather than switched to a mono label so
       the strings still clear the narrow 76px column. */
    font-size: 12px; letter-spacing: .01em;
  }
  .pc-text { word-break: normal; }
}

.pricing-divider {
  max-width: 1120px;
  margin: clamp(56px, 8vw, 88px) auto clamp(24px, 3vw, 36px);
  display: flex; align-items: center; gap: 20px;
}
.pricing-divider hr {
  flex: 1; border: 0;
  border-top: 1px solid rgba(15, 15, 15, .12);
  margin: 0;
}
.pricing-divider span {
  font-family: ui-monospace, monospace;
  font-size: 12px; letter-spacing: .2em;
  color: var(--color-orange-deep);
  text-transform: uppercase; font-weight: 700;
}

.other-head {
  max-width: 1120px;
  margin: 0 auto 24px;
  text-align: center;
}
.other-head h3 {
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--color-text);
  margin: 0 0 8px;
}
.other-head p { color: var(--color-muted); font-size: 13px; margin: 0; }

/* Menu-style subsection cards — 60分 / 90分 / その他 */
.courses-columns {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 720px) {
  .courses-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .courses-columns { grid-template-columns: repeat(3, 1fr); }
}

.course-block {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(120, 50, 0, .08);
  display: flex; flex-direction: column;
}
.cb-head {
  background: var(--color-black);
  color: #fff;
  padding: 14px 20px;
  text-align: center;
  border-bottom: 3px solid var(--color-orange);
}
.cb-head-jp {
  font-weight: 700; font-size: 14.5px;
  letter-spacing: .06em;
}

.cb-rows {
  list-style: none; margin: 0;
  padding: 6px 22px 14px;
  display: flex; flex-direction: column;
}
.cb-rows li {
  border-top: 1px dashed rgba(15, 15, 15, .1);
}
.cb-rows li:first-child { border-top: 0; }
.cb-row {
  display: flex; align-items: baseline;
  gap: 10px;
  padding: 12px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .cb-row:hover {
    background: var(--color-tag-bg);
    color: inherit;
    transform: translateX(2px);
  }
  .cb-row:hover .cb-price { color: var(--color-orange-deep); }
  .cb-row:hover .cb-dots { border-bottom-color: rgba(232, 115, 12, .5); }
}
.cb-label {
  font-size: 13.5px; font-weight: 500;
  color: var(--color-text);
  letter-spacing: .02em;
  flex: none;
  max-width: 60%;
  line-height: 1.4;
}
.cb-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(15, 15, 15, .18);
  transform: translateY(-3px);
  min-width: 12px;
}
.cb-price {
  font-weight: 900; font-size: 17px;
  color: var(--color-orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  flex: none;
  text-align: right;
  line-height: 1.2;
}
/* Pack rows carry a per-session line under the total. It lives INSIDE .cb-price
   so the flex row's shared baseline is still the total's first line box —
   .cb-label and .cb-dots (translateY(-3px)) do not move and single-price rows
   stay pixel-identical; the row just grows downward. Never give .cb-price an
   overflow or align-self: either forces baseline synthesis from the bottom
   margin edge and drops the dotted leader out of alignment. */
.cb-per {
  display: block;
  margin-top: 3px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.courses-taxnote {
  max-width: 1120px; margin: 20px auto 0;
  text-align: center;
  font-size: 12px; color: var(--color-muted);
  letter-spacing: .04em;
}

/* ================= trial ================= */
.trial-section { background: var(--color-cream); padding: clamp(56px, 8vw, 96px) 20px; }
.trial-card {
  max-width: 820px; margin: 0 auto;
  background: #fff; border-radius: 20px;
  padding: clamp(32px, 5vw, 52px); text-align: center;
  box-shadow: 0 16px 40px rgba(120, 50, 0, .12);
  border: 2px solid var(--color-tag-bg);
}
.trial-badge {
  display: inline-block; background: var(--color-tag-bg); color: var(--color-orange-deep);
  font-weight: 700; font-size: 13px;
  padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
}
.trial-offer {
  font-weight: 900; font-size: clamp(24px, 4vw, 34px);
  color: var(--color-text); margin: 0 0 26px; line-height: 1.4;
}

/* ================= access ================= */
.access-section { background: #fff; padding: clamp(72px, 10vw, 130px) 20px; }
.access-head { text-align: center; margin-bottom: clamp(36px, 5vw, 52px); }
.map-wrap {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .1); margin-bottom: 28px;
}
.map-wrap iframe { display: block; width: 100%; height: 360px; }
.access-rows { display: grid; gap: 12px; }
.access-row {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  background: var(--color-cream); border-radius: 12px; padding: 16px 20px;
}
.access-label {
  flex: none; min-width: 88px;
  background: var(--color-tag-bg); color: var(--color-orange-deep);
  font-weight: 700; font-size: 14px;
  padding: 6px 14px; border-radius: 999px; text-align: center;
}
.access-value { flex: 1; min-width: 0; font-size: 16px; color: var(--color-text); line-height: 1.6; }

/* ================= FAQ ================= */
.faq-section { background: var(--color-cream); padding: clamp(72px, 10vw, 130px) 20px; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: #fff; border-radius: 14px;
  box-shadow: 0 8px 22px rgba(120, 50, 0, .08); overflow: hidden;
}
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px;
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq-q { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: var(--color-text); }
.faq-q .q-mark { color: var(--color-orange); font-weight: 900; }
.faq-plus {
  flex: none; font-size: 22px; color: var(--color-orange);
  transition: transform .3s;
}
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 24px;
  font-size: 15px; line-height: 1.9; color: #4a4a4a;
}
.faq-item.open .faq-body { max-height: 400px; padding: 0 24px 22px; }

/* ================= final CTA ================= */
.final-cta {
  background: var(--color-black); padding: clamp(72px, 10vw, 120px) 20px; text-align: center;
}
.final-cta-inner { max-width: 760px; margin: 0 auto; }
.final-cta h2 {
  font-weight: 900; font-size: clamp(28px, 5vw, 48px);
  color: #fff; margin: 0 0 22px; line-height: 1.25;
}
.final-cta p {
  font-size: clamp(15px, 2vw, 18px); line-height: 1.9;
  color: rgba(255, 255, 255, .78); margin: 0 auto 34px; max-width: 560px;
}
.final-cta .btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ================= footer ================= */
.footer { background: var(--color-black-3); padding: clamp(52px, 7vw, 80px) 20px 40px; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-brand { font-weight: 900; font-size: 28px; color: #fff; margin-bottom: 12px; }
.footer-tagline { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .6); margin: 0; max-width: 280px; }
.footer-heading {
  font-weight: 700; font-size: 13px; letter-spacing: .08em;
  color: var(--color-orange); margin: 0 0 14px;
}
.footer-info p { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .7); margin: 0; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-size: 14px; color: rgba(255, 255, 255, .7); transition: color .2s; }
.footer-links a:hover { color: var(--color-orange); }
.copy { text-align: center; font-size: 13px; color: rgba(255, 255, 255, .4); margin: 28px 0 0; }

/* ================= sticky mobile bar ================= */
.mobile-bar { display: none; }
@media (max-width: 1023px) {
  .mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: linear-gradient(
      to bottom,
      rgba(253, 244, 239, 0) 0,
      rgba(253, 244, 239, .92) 18px,
      rgba(253, 244, 239, .98) 100%
    );
    backdrop-filter: blur(10px);
    padding: var(--cta-bar-fade) 12px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  /* Only reserve room where the fixed bar actually exists. The legal pages share this
     stylesheet but have no .mobile-bar, so an unscoped rule left 84px of bare background
     below their footers. */
  body.has-cta-bar { padding-bottom: var(--cta-bar-h); }
}
.mobile-bar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: 14px; padding: 14px 8px; border-radius: 12px;
  line-height: 1.3; text-align: center;
}
.mobile-bar .bar-line {
  background: var(--color-orange); color: #fff;
  box-shadow: 0 6px 16px rgba(232, 115, 12, .35);
}
.mobile-bar .bar-line:hover { color: #fff; }
.mobile-bar .bar-trial {
  background: #fff; color: var(--color-orange-deep); border: 2px solid var(--color-orange);
}

/* ================= reveal animation ================= */
[data-reveal] {
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero-bg { transform: none !important; }
  .consent-note.is-visible { animation: none; }
}

/* ================= legal pages ================= */
.legal-header { background: var(--color-black); padding: 22px 20px; }
.legal-header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legal-lang-pill button { color: #fff; }
.legal-lang-pill button.active { color: #fff !important; }
.legal-header-inner {
  max-width: 820px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.legal-header-inner a.brand { color: #fff; font-size: 24px; }
.legal-back { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.legal-back:hover { color: var(--color-orange); }
.legal-main { max-width: 820px; margin: 0 auto; padding: clamp(48px, 8vw, 88px) 20px; }
.legal-main h1 {
  font-weight: 900; font-size: clamp(28px, 5vw, 42px);
  color: var(--color-text); margin: 0 0 12px;
}
.legal-main h1.md { font-size: clamp(24px, 4.5vw, 38px); }
.legal-sub { font-size: 15px; color: var(--color-muted); margin: 0 0 40px; }
.legal-dl {
  background: #fff; border-radius: 16px;
  padding: clamp(24px, 3.5vw, 40px) clamp(20px, 3vw, 32px);
  box-shadow: 0 12px 30px rgba(120, 50, 0, .1);
  margin: 0;
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  column-gap: clamp(20px, 3vw, 36px);
  row-gap: 0;
}
.legal-dl dt {
  font-weight: 700; font-size: 15px; color: var(--color-orange-deep);
  padding: 18px 0;
  border-top: 1px solid rgba(15, 15, 15, .08);
}
.legal-dl dd {
  margin: 0; padding: 18px 0;
  font-size: 15px; line-height: 1.85; color: var(--color-text);
  border-top: 1px solid rgba(15, 15, 15, .08);
}
.legal-dl dt:first-of-type, .legal-dl dd:first-of-type { border-top: 0; }
/* the third-party policy URLs are long unbreakable strings and overflowed the
   definition list on narrow screens */
.legal-dl a { color: var(--color-orange-deep); text-decoration: underline; overflow-wrap: anywhere; }
.legal-dl a:hover { color: var(--color-orange); }
.legal-note {
  display: inline-block; margin-top: 4px;
  font-size: 13px; color: var(--color-muted);
}

@media (max-width: 640px) {
  .legal-dl {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .legal-dl dt { padding-bottom: 4px; }
  .legal-dl dd { padding-top: 0; border-top: 0; }
  .legal-dl dd + dt { border-top: 1px solid rgba(15, 15, 15, .08); padding-top: 18px; }
}
.legal-footer { background: var(--color-black-3); padding: 32px 20px; }
.legal-footer p { text-align: center; font-size: 13px; color: rgba(255, 255, 255, .4); margin: 0; }

/* ================= skip link ================= */
/* Off-screen until keyboard-focused, then pinned over the sticky header. */
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 200;
  background: var(--color-orange); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 10px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible { top: 0; outline: 3px solid var(--color-black); outline-offset: 2px; }
/* The skip targets take focus programmatically; never show a ring on them. */
#top:focus, #main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}


/* ================= mobile-only line breaks ================= */
/* <br class="sp-br"> reads as a break on phones only; on tablet and up the
   heading flows naturally. Client-requested JP line-break tuning. */
.sp-br { display: none; }
@media (max-width: 767px) {
  .sp-br { display: inline; }
}

/* ================= analytics notice (note-only, not an opt-in gate) =================
   Hidden by default and revealed by main.js, so a visitor who already dismissed it
   never sees a flash. Deliberately NOT [data-reveal]: those start at opacity:0 and
   are switched on by the observer, which would delay a disclosure notice. */
.consent-note {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--color-black);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .28);
}
.consent-note.is-visible {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 16px;
  animation: consentIn .24s cubic-bezier(.22, .61, .36, 1) both;
}
.consent-note-text {
  margin: 0; flex: 1 1 240px; max-width: 720px;
  font-size: 12px; line-height: 1.7; color: #fff;
}
/* The global a{} colour is --color-orange-deep, only ~3.5:1 on --color-black.
   --color-orange is ~5.9:1 and passes for this size. */
.consent-note a.consent-note-link { color: var(--color-orange); text-decoration: underline; }
.consent-note a.consent-note-link:hover { color: #fff; }
.consent-note-btn {
  flex: 0 0 auto; min-height: 44px; padding: 10px 22px;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.3;
  color: #fff; background: transparent;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px;
  cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.consent-note-btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.consent-note-btn:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }

@keyframes consentIn {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

/* Sit above the sticky CTA bar. --consent-offset is measured by main.js rather
   than hardcoded, because the bar grows from 84px to 96px at 320px when its two
   buttons wrap.
   Scoped to body.has-cta-bar for the same reason the body padding is (S14b): only
   index.html has a .mobile-bar. Unscoped, the var() fallback lifted the notice 84px
   off the bottom of both legal pages, leaving it floating mid-page.
   The offset stops at the top of the bar's BUTTONS, not its box: the box's top
   --cta-bar-fade is transparent, and sitting on it left a strip of page content
   showing between the notice and the buttons (client-reported on a real phone). */
@media (max-width: 1023px) {
  .consent-note { padding-bottom: 12px; }
  body.has-cta-bar .consent-note {
    bottom: var(--consent-offset, calc(var(--cta-bar-h) - var(--cta-bar-fade)));
  }
}
@media (min-width: 768px) {
  .consent-note-text { font-size: 14px; }
  .consent-note-btn  { font-size: 14px; }
}