/* ─────────────────────────────────────────────────────────────────────────────
   Nakasendo landing page — FIELD GUIDE variant
   Forked from nakasendo-variant-a.css (itself forked from nakasendo.css): same
   design tokens, fonts and component styling. Differences from Variant A: cover
   art beside the offer, £5 half-price framing, larger What's included render,
   48px touch targets on the sticky bar and hero. See CLAUDE.md and
   design-nakasendo-field-guide/ for the decisions behind it.
   ─────────────────────────────────────────────────────────────────────────── */

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

:root {
  --ink:          #2b394e;
  --ink-dim:      rgba(43,57,78,0.70);
  --ink-faint:    rgba(43,57,78,0.45);
  --text-on-dark: #f4f4f7;
  --warm-dark:    #2a3343;
  --earth:        #b8b8bd;
  --rust:         var(--ghost-accent-color);
  --mist:         #ededf1;
  --paper:        #f4f4f7;
  --cream:        #fff;
  --moss:         #2b394e;
  --gold:         color-mix(in srgb, var(--ghost-accent-color) 70%, white);
  --steel:        #5d8aa6;
  --amber:        #e3a53f;
  --amber-ink:    #241a08;
  --bar-h:        57px; /* sticky bar height, used to offset fixed-position content below it */
}

.dark-mode {
  --ink:       #f7f9f9;
  --ink-dim:   rgba(247,249,249,0.72);
  --ink-faint: rgba(247,249,249,0.50);
  --earth:     #5b6d83;
  --mist:      #344052;
  --paper:     #2a3343;
  --cream:     #1f2833;
  --moss:      #f7f9f9;
}

@media (prefers-color-scheme: dark) {
  .auto-dark-mode {
    --ink:       #f7f9f9;
    --ink-dim:   rgba(247,249,249,0.72);
    --ink-faint: rgba(247,249,249,0.50);
    --earth:     #5b6d83;
    --mist:      #344052;
    --paper:     #2a3343;
    --cream:     #1f2833;
    --moss:      #f7f9f9;
  }
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── STICKY BAR — same bar as the live page, now truly fixed (not sticky-that-scrolls-away) ── */
.bundle-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 20px;
  background: #191d24;
  border-bottom: 1px solid #2e3038;
  font-family: inherit;
  min-height: var(--bar-h);
}
.bundle-bar-text { flex: 1; font-size: 14px; color: #c3c8d1; }
.bundle-bar-text strong { color: #f2f3f6; }
.bundle-bar-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* 48px touch target */
  font-weight: 600;
  font-size: 14px;
  background: var(--amber);
  color: var(--amber-ink);
  padding: 0 18px;
  text-decoration: none;
  white-space: nowrap;
}
.bundle-bar-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px; /* 48px touch target, glyph size unchanged */
  min-height: 48px;
  margin: 0 -14px 0 -2px; /* box runs to the screen edge; leaves an 8px gap to the buy button so a mis-tap can't dismiss the bar */
  background: none; border: none; color: #565b64; font-size: 22px; cursor: pointer; line-height: 1;
}
.bundle-bar picture { display: flex; flex: none; }
.bundle-bar-cover { flex: none; width: 26px; height: auto; aspect-ratio: 5 / 8; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
@media (max-width: 600px) {
  .bundle-bar { gap: 10px; padding: 4px 14px; }
  .bundle-bar-text { display: none; }
  .bundle-bar-text-mobile { display: flex; align-items: center; min-width: 0; font-size: 13px; line-height: 1.25; }
}
@media (min-width: 601px) {
  .bundle-bar-text-mobile { display: none; }
}

/* Offsets the fixed bar's height off the top of the page — applied to the first section */
.page-offset-top { padding-top: var(--bar-h); }

/* ── HERO + WHAT'S INCLUDED (paired row) ── */
.hero-a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.hero-left {
  background-color: var(--warm-dark);
  background-image:
    linear-gradient(rgba(42,51,67,0.65), rgba(42,51,67,0.65)),
    url('https://storage.ghost.io/c/11/df/11dfbd1c-fe62-41b4-867f-0cd991a08e6e/content/images/size/w1600/2026/08/seta-no-kakehashi-over-biwako.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 72px 64px 56px 72px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.hero-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg, transparent, transparent 3px,
      rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px
    );
  pointer-events: none;
}

.hero-kanji {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.8);
  user-select: none;
}


.hero-title {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.14;
  color: var(--text-on-dark);
  margin-bottom: 8px;
}

.hero-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}


.hero-desc {
  font-family: 'Lora', serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  margin-bottom: 22px;
}

.hero-desc strong { color: rgba(255,255,255,0.95); }
.hero-byline-sub { font-family: 'DM Sans', sans-serif; font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.64); margin: -14px 0 22px; }



/* ── Offer strip (new) — the merged £10 badge/price/summary, one CTA only ── */
.hero-offer {
  background: rgba(227,165,63,0.08);
  border: 1px solid rgba(227,165,63,0.35);
  border-left: 3px solid var(--amber);
  padding: 18px 22px;
  max-width: 440px;
  margin-bottom: 20px;
}

.hero-offer-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}

.hero-offer-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.hero-offer-price {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--text-on-dark);
}

.hero-offer-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.hero-offer-summary {
  font-family: 'Lora', serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,1);
}

.hero-offer-summary .hl { color: #f2d9a3; }

/* ── Field-guide additions: cover beside the offer, sale price, note, trip-length pills ── */
.hero-cover-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 0; }
.hero-cover-row .hero-offer { flex: 1; min-width: 0; padding: 14px 16px; margin-bottom: 0; }
.hero-cover { flex: none; display: block; width: 140px; height: auto; aspect-ratio: 5 / 8; box-shadow: 0 10px 26px -8px rgba(0,0,0,.65); }
.hero-offer-badge--sale { background: rgba(227,165,63,.16); color: #ffe9c2; padding: 4px 8px; display: inline-block; line-height: 1.35; }
.hero-offer-price-was {
  font-family: 'Shippori Mincho', serif; font-weight: 700; font-size: 1.1rem;
  color: rgba(255,255,255,.4); text-decoration: line-through; text-decoration-thickness: 1.5px;
  margin-right: 10px;
}
.hero-offer-price-note { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.64); margin: 2px 0 8px; }
/* Appended inline at the end of .hero-offer-price-note (see the hero-offer-fx script's
   comment for why) — not its own block, so no margin/line-height of its own. Slightly
   dimmer than the note text around it, to read as secondary/approximate. */
.hero-offer-fx { color: rgba(255,255,255,.48); }
.hero-journal-status { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.64); margin: 14px 0 0; }
.hero-trip-lengths { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.64); margin: 8px 0 20px; }
.hero-trust-line { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.64); margin: -6px 0 4px; }
@media (min-width: 601px) { .hero-cover { width: 170px; } .hero-cover-row .hero-offer { padding: 18px 22px; } }

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero-cta-row .tier-cta { margin-top: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }

.hero-free-link {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  min-height: 48px; /* 48px touch target */
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.hero-free-link:hover { color: rgba(255,255,255,0.9); }

.hero-form { margin-top: 4px; }

.form-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,1);
  margin-bottom: 12px;
  display: block;
}

.form-row { display: flex; gap: 10px; }

.form-input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-on-dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.2s;
}

.form-input::placeholder { color: rgba(255,255,255,0.8); }
.form-input:focus { border-color: var(--gold); color: var(--text-on-dark); }

.form-btn {
  background: var(--warm-dark);
  color: var(--text-on-dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,0.15);
  text-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}

.form-btn:hover { background: color-mix(in srgb, var(--warm-dark) 80%, white); transform: translateY(-1px); }

.form-note { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 12px; }
.form-alert { font-size: 12px; margin-top: 10px; padding: 8px 12px; }
.alert-success { display: none; color: #aaef52; }
.alert-error   { display: none; color: #ff6c78; }
form.error .alert-error   { display: block; }
form.success              { display: none; }
form.success + .alert-success { display: block; }

/* ── What's included — label + condensed icon-row list (new component) ── */
.hero-inc-col {
  background-color: var(--warm-dark);
  background-image: linear-gradient(rgba(20,24,32,0.35), rgba(20,24,32,0.35));
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: flex-start;
  padding: 72px 64px 56px 56px;
}

.inc-wrap { width: 100%; max-width: 420px; }

.inc-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

/* The render has ~40% transparent padding, so the image is drawn larger than its column and the empty
   margins are pulled back with negative margins (percentages are relative to the column width). Visible
   book bounds in the source: x 12.5–72.7%, y 8.8–97.7%. --k = image width as a multiple of the column. */
.included-cover { --k: 1.6; padding: 0 0 14px; }
.included-cover img {
  display: block; width: calc(var(--k) * 90%); max-width: none; height: auto;
  margin-left: calc((0.5 - 0.426 * var(--k)) * 90%);
  margin-top: calc(-0.0762 * var(--k) * 90%);
  margin-bottom: calc(-0.02 * var(--k) * 90%);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
@media (max-width: 600px) { .included-cover { --k: 1.75; } }

.inc-note { font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.inc-note strong { color: #f2d9a3; font-weight: 600; }

.inc-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.inc-row { display: flex; gap: 14px; align-items: flex-start; }

.inc-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.inc-text strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-on-dark);
  margin-bottom: 3px;
}

.inc-text span {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.inc-row.new-row .inc-text strong { color: #f2d9a3; }

.new-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--amber);
  color: var(--amber-ink);
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
}

/* ── Look inside strip + sample stay (new) ── */
.look-inside { padding: 72px 64px; background: var(--cream); text-align: center; }
.look-inside-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--earth); margin-bottom: 28px; }
.look-inside-strip {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  max-width: 900px; margin: 0 auto; padding-bottom: 6px; justify-content: center;
}
.look-inside-item { flex: 0 0 200px; scroll-snap-align: start; text-align: left; }
.look-inside-item img { width: 100%; height: auto; display: block; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); border: 1px solid var(--mist); cursor: zoom-in; }

/* Full page is tall/portrait, so this sizes by max-height against the real fixed-position
   viewport (works correctly with mobile browser toolbars) rather than a JS-computed scale
   factor, which is what clipped the image on phones. */
.look-inside-zoom {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,24,32,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
}
.look-inside-zoom[hidden] { display: none; }
.look-inside-zoom img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 20px 60px -10px rgba(0,0,0,.6); }
.look-inside-zoom-close {
  position: absolute; top: env(safe-area-inset-top, 16px); right: 20px;
  background: none; border: none; color: #fff; font-size: 32px; line-height: 1;
  cursor: pointer; padding: 8px;
}
.look-inside-caption { display: block; font-size: 11.5px; color: var(--ink-dim); margin-top: 8px; line-height: 1.4; }
.look-inside-intro {
  font-family: 'Lora', serif; font-size: 15px; line-height: 1.7; color: var(--ink-dim);
  max-width: 560px; margin: 32px auto 0; text-align: left;
}
.look-inside-more { font-size: 13px; color: var(--ink-dim); margin: 20px 0 0; }
.look-inside-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* "See the full contents →" stat line (partials/nakasendo/whats-inside-stats.hbs,
   shared markup with the product/free-preview pages — see
   documentation-whats-inside/nakasendo-whats-inside-plan.md). Styled here with
   THIS file's own tokens (--ink/--ink-dim), not nakasendo-sales.css's
   --color-font-one — this page doesn't load that stylesheet, and loading it
   just for one small stat line would add unrelated CSS weight (zoom overlay,
   FAQ, nk-cta styling) to the highest-traffic page. Deliberately duplicated,
   same reasoning as the day-list trade-off inside whats-inside.hbs itself.
   Left-aligned, 560px max-width, matching .look-inside-more/-intro exactly —
   the surrounding .look-inside section is otherwise text-align:center. */
.look-inside .nk-wi-stats { list-style: none; margin: 20px auto 0; padding: 0; max-width: 560px; text-align: left; font-size: 13px; color: var(--ink-dim); }
.look-inside .nk-wi-stats li { display: inline; }
.look-inside .nk-wi-stats li:not(:last-child)::after { content: " \00b7 "; }
.look-inside .nk-wi-stats strong { font-weight: 700; color: var(--ink); }
.look-inside .nk-wi-stats-note { font-size: 13px; color: var(--ink-dim); margin: 6px auto 0; max-width: 560px; text-align: left; }
.look-inside .nk-wi-stats-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.sample-stay { max-width: 560px; margin: 48px auto 0; border-top: 1px solid var(--mist); padding-top: 32px; }
.sample-stay-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--earth); margin-bottom: 16px; }
.sample-stay-card { background: var(--paper); padding: 24px 28px; text-align: left; }
.sample-stay-name { font-family: 'Shippori Mincho', serif; font-size: 19px; color: var(--ink); margin-bottom: 16px; }
.sample-stay-name span { font-weight: 400; color: var(--ink-dim); font-size: 15px; }
.sample-stay-basics { display: flex; flex-direction: column; gap: 8px; }
.sample-stay-basics > div { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.sample-stay-basics dt { flex: 0 0 130px; color: var(--ink-faint); }
.sample-stay-basics dd { color: var(--ink); }

@media (max-width: 960px) { .look-inside { padding: 64px 40px; } }
@media (max-width: 600px) {
  .look-inside { padding: 48px 24px; }
  .look-inside-strip { justify-content: flex-start; margin: 0 -24px; padding: 0 24px 6px; max-width: none; }
  .look-inside-item { flex-basis: 150px; }
  .sample-stay-basics dt { flex-basis: 100px; }
}

/* ── About the bundle + Route (paired row) ── */
.about-route-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

.about-panel {
  background: var(--cream);
  padding: 100px 64px;
}

.about-panel .section-title { max-width: none; }

.route-panel {
  background: var(--paper);
  padding: 100px 64px;
  display: flex;
  align-items: flex-start;
}

.section-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 24px;
  max-width: 560px;
}

.story-body {
  font-family: 'Lora', serif;
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 16px;
  color: var(--ink-dim);
}

.youtube-video {
  width: 100%;
  max-width: 560px;
  margin: 28px 0 0;
  aspect-ratio: 16 / 9;
}

.youtube-video iframe { width: 100%; height: 100%; display: block; border: 0; }

/* route card — reused verbatim from the live page's hero-right component */
.route-card { position: relative; width: 100%; max-width: 420px; }

.route-card-header {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mist);
}

.route-list { list-style: none; position: relative; }

.route-list::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--rust), var(--moss));
}

.route-item { display: flex; align-items: center; gap: 16px; padding: 7px 0; }

.route-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; }
.route-dot.start  { background: var(--rust); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust) 20%, transparent); }
.route-dot.end    { background: var(--moss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 20%, transparent); }
.route-dot.mid    { background: var(--mist); border: 2px solid var(--earth); }
.route-dot.active { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }

.route-text { flex: 1; display: flex; justify-content: space-between; align-items: baseline; }
.route-name { font-family: 'Lora', serif; font-size: 14px; color: var(--ink); }
.route-name span { font-family: 'Shippori Mincho', serif; font-size: 11px; color: var(--earth); margin-left: 6px; }
.route-km { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.route-km-walked { display: block; font-size: 9px; font-weight: 400; color: var(--ink-faint); white-space: nowrap; }

.route-prefecture-tag {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  margin-top: 2px;
}

.tag-kyoto  { color: var(--rust); }
.tag-gifu   { color: var(--moss); }
.tag-multi  { color: var(--gold); }
.tag-gunma  { color: #8a4a6b; }
.tag-tokyo  { color: var(--ink); }

.route-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mist); }
.route-total { font-family: 'Shippori Mincho', serif; font-size: 13px; color: var(--ink); letter-spacing: 0.05em; }

/* ── FAQ — reused verbatim from the live page ── */
.section-faq { background: var(--cream); padding: 100px 72px 60px; }
.faq { max-width: 760px; margin: 0 auto; }
.faq-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--earth); margin-bottom: 24px; }
.faq-item { border-bottom: 1px solid var(--mist); }
.faq-item:first-of-type { border-top: 1px solid var(--mist); }

.faq-question {
  font-family: 'Shippori Mincho', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
  content: '+';
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--rust);
  flex-shrink: 0;
  margin-left: 24px;
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-question::after { transform: rotate(45deg); }

.faq-answer {
  font-family: 'Lora', serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-dim);
  padding-bottom: 24px;
  max-width: 720px;
}

.faq-answer a { color: var(--rust); }

/* FAQ expand toggle (new) */
.faq-expand-row { max-width: 760px; margin: 28px auto 0; }
.faq-contact { max-width: 760px; margin: 20px auto 0; text-align: center; font-size: 13px; color: var(--ink-dim); }
.faq-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.faq-expand-btn {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  background: var(--mist);
  border: none;
  padding: 15px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}

.faq-expand-btn:hover { background: color-mix(in srgb, var(--mist) 80%, black); }

.faq-expand-btn .chev {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s;
}

.faq-expand-btn.expanded .chev { transform: rotate(180deg); }

#nkv-a-more, #nkv-a-more-sections { display: none; }
#nkv-a-more.open, #nkv-a-more-sections.open { display: block; }

/* ── STORY STRIP ("About the journey") — reused verbatim from the live page ── */
.story-strip {
  background: var(--warm-dark);
  padding: 100px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.story-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg, transparent, transparent 60px,
      rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px
    );
  pointer-events: none;
}

.story-eyebrow { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }

.story-title {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1.25;
  margin-bottom: 28px;
}

.story-strip .story-body { color: rgba(255,255,255,0.65); }
.story-strip .story-body em { color: rgba(255,255,255,0.85); font-style: italic; }

.story-strip .story-body a { color: rgba(255,255,255,0.85); }

.story-upsell {
  margin-top: 40px;
  padding: 28px 32px;
  border-left: 3px solid var(--rust);
  background: rgba(255,255,255,0.05);
}

.story-upsell-title { font-family: 'Shippori Mincho', serif; font-size: 18px; font-weight: 600; color: var(--text-on-dark); margin-bottom: 8px; }
.story-upsell-body { font-family: 'Lora', serif; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.55); }

.story-upsell-btn {
  background: var(--warm-dark);
  color: var(--text-on-dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-top: 24px;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.2s;
}

.story-upsell-btn:hover { background: color-mix(in srgb, var(--warm-dark) 80%, white); }

.day-snippets { display: flex; flex-direction: column; gap: 20px; }

.snippet {
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--rust);
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}

.snippet:nth-child(2) { border-color: var(--gold); }
.snippet:nth-child(3) { border-color: var(--moss); }
.snippet:hover { background: rgba(255,255,255,0.08); }

.snippet-img { display: block; width: 100%; max-height: 200px; object-fit: cover; object-position: center; }

.snippet-day { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); padding: 12px 24px 0; margin: 0; }
.snippet-route { font-family: 'Shippori Mincho', serif; font-size: 16px; font-weight: 600; color: var(--text-on-dark); padding: 12px 24px 0; margin: 0; }
.snippet-detail { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; padding: 6px 24px 20px; margin: 0; }

/* ── MEMBER UPSELL (pricing + testimonials + budget tracker) — reused verbatim ── */
.section-member { background: var(--cream); padding: 120px 72px; }
.member-intro { max-width: 640px; margin-bottom: 56px; }
.member-intro .section-title { margin-bottom: 20px; }
.member-body { font-family: 'Lora', serif; font-size: 16px; line-height: 1.8; color: var(--ink-dim); }

.tier-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; margin-bottom: 80px; max-width: 720px; margin-left: auto; margin-right: auto; }
.tier { padding: 28px 32px; position: relative; display: flex; flex-direction: column; }
.tier-free { background: var(--mist); }
.tier-bundle {
  background: var(--cream);
  border: 1.5px solid var(--amber);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 18%, transparent), 0 16px 34px -16px color-mix(in srgb, var(--amber) 45%, transparent);
  padding: 34px 36px;
  transform: translateY(-10px);
  z-index: 1;
}
.tier-paid { background: var(--warm-dark); color: var(--text-on-dark); border: 1px solid rgba(255,255,255,0.12); }

.tier-badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--amber); color: var(--amber-ink);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px;
}

.tier-label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 12px; }
.tier-free .tier-label   { color: var(--earth); }
.tier-bundle .tier-label { color: color-mix(in srgb, var(--amber) 70%, black); }
.tier-paid .tier-label   { color: var(--gold); }

.tier-price { font-family: 'Shippori Mincho', serif; font-weight: 700; font-size: 28px; margin-bottom: 6px; }
.tier-free .tier-price   { color: var(--ink); }
.tier-bundle .tier-price { font-size: 42px; color: var(--ink); }
.tier-price-was { font-size: 22px; color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: 6px; }
.tier-note { font-size: 12px; line-height: 1.45; color: var(--ink-dim); margin-top: 16px; }
.tier-paid .tier-price   { color: var(--text-on-dark); }

.tier-name { font-family: 'Shippori Mincho', serif; font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.tier-free .tier-name   { color: var(--ink); }
.tier-bundle .tier-name { color: var(--ink); }
.tier-paid .tier-name   { color: var(--text-on-dark); }

.tier-features { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tier-feature { font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }
.tier-free .tier-feature   { color: var(--ink-dim); }
.tier-bundle .tier-feature { color: var(--ink-dim); }
.tier-paid .tier-feature   { color: rgba(255,255,255,0.75); }

.tier-check { flex-shrink: 0; margin-top: 1px; }
.tier-free .tier-check   { color: var(--moss); }
.tier-bundle .tier-check { color: var(--amber); }
.tier-paid .tier-check   { color: var(--gold); }

/* new field-guide bullet on the bundle card — distinct marker, matches the "NEW" accent used elsewhere */
.tier-feature--new { color: color-mix(in srgb, var(--amber) 60%, var(--ink)); }
.tier-feature--new .tier-check { color: var(--amber); font-weight: 700; }

.tier-cta {
  display: inline-block; margin-top: 24px; padding: 13px 28px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  text-decoration: none; text-shadow: none; cursor: pointer; border: none; transition: all 0.2s;
}
.tier-free .tier-cta { background: var(--warm-dark); color: var(--text-on-dark); border: 1px solid rgba(255,255,255,0.15); }
.tier-free .tier-cta:hover { background: color-mix(in srgb, var(--warm-dark) 80%, white); }
.tier-cta-bundle { background: var(--amber); color: var(--amber-ink); }
.tier-cta-bundle:hover { background: color-mix(in srgb, var(--amber) 85%, black); }
.tier-paid .tier-cta { background: var(--gold); color: var(--warm-dark); }
.tier-paid .tier-cta:hover { background: color-mix(in srgb, var(--ghost-accent-color) 80%, white); }

.member-secondary { max-width: 560px; margin: 0 auto; }

.pull-quote { background: var(--cream); border: 1px solid var(--mist); padding: 48px; position: relative; }
.pq-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--earth); margin-bottom: 20px; }
.pull-quote::before {
  content: '\201C'; font-family: 'Shippori Mincho', serif; font-size: 100px; color: var(--rust); opacity: 0.3;
  position: absolute; top: 10px; left: 28px; line-height: 1;
}
.pq-body { font-family: 'Lora', serif; font-size: 18px; font-style: italic; line-height: 1.75; color: var(--ink); margin-bottom: 24px; }
.pq-attr { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--earth); }
.pq-slides { display: grid; }
.pq-slide { grid-area: 1 / 1; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.pq-slide.active { opacity: 1; pointer-events: auto; }
.pq-dots { display: flex; gap: 8px; margin-top: 24px; }
.pq-dot { width: 6px; height: 6px; border-radius: 50%; border: none; background: var(--mist); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.pq-dot.active { background: var(--rust); transform: scale(1.4); }

.pack-preview { margin-top: 32px; background: var(--warm-dark); padding: 28px 32px; }
.pack-label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.pack-items { display: flex; flex-direction: column; gap: 10px; }
.pack-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,0.7); }
.pack-item-icon { color: var(--gold); font-size: 16px; flex-shrink: 0; }

/* ── FINAL CTA — reused verbatim from the live page ── */
.section-cta {
  background-color: var(--warm-dark);
  background-image:
    linear-gradient(rgba(42,51,67,0.75), rgba(42,51,67,0.75)),
    url('https://storage.ghost.io/c/11/df/11dfbd1c-fe62-41b4-867f-0cd991a08e6e/content/images/size/w1600/2026/02/20250321_152056.jpg');
  background-size: cover;
  background-position: center;
  padding: 100px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cta-title { font-family: 'Shippori Mincho', serif; font-size: clamp(28px, 3.5vw, 50px); font-weight: 700; color: var(--text-on-dark); line-height: 1.2; margin-bottom: 20px; }
.cta-sub { font-family: 'Lora', serif; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.95); }
.cta-form-wrap { position: relative; z-index: 1; }
.cta-card { background: rgba(15,18,26,0.55); border: 1px solid rgba(255,255,255,0.14); padding: 28px 28px 30px; }
.cta-form-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.80); margin-bottom: 14px; display: block; }
.cta-form-row { display: flex; flex-direction: column; gap: 10px; }

.cta-input {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: var(--text-on-dark);
  font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 15px 20px; outline: none; transition: border-color 0.2s; width: 100%;
}
.cta-input::placeholder { color: rgba(255,255,255,0.65); }
.cta-input:focus { border-color: rgba(255,255,255,0.8); color: var(--text-on-dark); }

.cta-btn {
  background: transparent; color: var(--text-on-dark); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; padding: 16px 28px; border: 1px solid rgba(255,255,255,0.35); cursor: pointer; width: 100%;
  transition: background 0.2s, border-color 0.2s;
}
.cta-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.cta-btn.tier-cta-bundle { background: var(--amber); color: var(--amber-ink); border-color: transparent; }
.cta-btn.tier-cta-bundle:hover { background: color-mix(in srgb, var(--amber) 85%, black); }
a.cta-btn { display: block; text-align: center; text-decoration: none; }

.cta-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.cta-or::before, .cta-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.2); }
.cta-note { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 14px; }

/* ── DARK MODE STRUCTURAL OVERRIDES ── */
.dark-mode .hero-left {
  background-color: #1f2833;
  background-image: linear-gradient(rgba(31,40,51,0.70), rgba(31,40,51,0.70)), url('https://storage.ghost.io/c/11/df/11dfbd1c-fe62-41b4-867f-0cd991a08e6e/content/images/size/w1600/2026/08/seta-no-kakehashi-over-biwako.jpg');
}
.dark-mode .hero-inc-col { background-color: #1f2833; }
.dark-mode .section-cta {
  background-color: #1f2833;
  background-image: linear-gradient(rgba(31,40,51,0.80), rgba(31,40,51,0.80)), url('https://storage.ghost.io/c/11/df/11dfbd1c-fe62-41b4-867f-0cd991a08e6e/content/images/size/w1600/2026/02/20250321_152056.jpg');
}

@media (prefers-color-scheme: dark) {
  .auto-dark-mode .hero-left {
    background-color: #1f2833;
    background-image: linear-gradient(rgba(31,40,51,0.70), rgba(31,40,51,0.70)), url('https://storage.ghost.io/c/11/df/11dfbd1c-fe62-41b4-867f-0cd991a08e6e/content/images/size/w1600/2026/08/seta-no-kakehashi-over-biwako.jpg');
  }
  .auto-dark-mode .hero-inc-col { background-color: #1f2833; }
  .auto-dark-mode .section-cta {
    background-color: #1f2833;
    background-image: linear-gradient(rgba(31,40,51,0.80), rgba(31,40,51,0.80)), url('https://storage.ghost.io/c/11/df/11dfbd1c-fe62-41b4-867f-0cd991a08e6e/content/images/size/w1600/2026/02/20250321_152056.jpg');
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hero-a { grid-template-columns: 1fr; }
  /* stacked: the fixed bar's offset (.page-offset-top) already spaces the hero from the top, so no extra vertical padding */
  .hero-left { padding: 1px 40px 1px; }
  .hero-title { margin-top: 0; }
  .hero-inc-col { padding: 40px; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
  .inc-wrap { max-width: none; }

  .about-route-row { grid-template-columns: 1fr; }
  .about-panel, .route-panel { padding: 64px 40px; }

  .section-faq { padding: 64px 40px 48px; }
  .story-strip { grid-template-columns: 1fr; gap: 48px; padding: 64px 40px; }
  .section-member { padding: 64px 40px; }
  .tier-row { grid-template-columns: 1fr; margin-bottom: 48px; }
  .tier-bundle { transform: none; order: -1; }
  .section-cta { grid-template-columns: 1fr; gap: 40px; padding: 64px 40px; }
}

@media (max-width: 600px) {
  .hero-left { padding: 1px 24px 1px; }
  .hero-inc-col { padding: 32px 24px; }
  .hero-title {margin-top: 0px;}
  .about-panel, .route-panel { padding: 48px 24px; }
  .section-faq { padding: 48px 24px 40px; }
  .story-strip { padding: 48px 24px; }
  .section-member { padding: 48px 24px; }
  .section-cta { padding: 48px 24px; }
  .form-row { flex-direction: column; }
  .hero-kanji { display: none; }
}

/* ── ANIMATIONS (kept minimal — the live page's entrance fades are omitted here
   since the hero now stacks with the offer strip and shouldn't feel delayed) ── */