/* ==========================================================================
   Kotsukotsu Nihongo landing page
   Night-mountain visual spine. Accent #0ea5e9. Mobile-first.
   ========================================================================== */

:root {
  --night: #050a14;          /* page base */
  --night-deep: #020409;     /* おやすみ section, forced dark */
  --ink: #e8e6df;            /* main text on dark */
  --ink-dim: #a8a89f;        /* secondary text */
  --warm-dim: #cfc6b4;       /* dim warm text for the sleep section */
  --accent: #0ea5e9;
  --accent-soft: rgba(14, 165, 233, 0.14);
  --card: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.09);
  --display: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--night);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[lang="ja"] { font-family: var(--jp); }

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.25; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin-bottom: 1rem; letter-spacing: 0.01em; }
h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }

.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.lead {
  font-size: 1.08rem;
  color: var(--ink-dim);
  max-width: 42rem;
  margin-bottom: 2.2rem;
}

.micro-note { font-size: 0.9rem; color: var(--ink-dim); margin-top: 1.2rem; }

.section { padding: clamp(4rem, 9vw, 7rem) 1.25rem; position: relative; }
.section-inner { max-width: 1060px; margin: 0 auto; }
.section-narrow { max-width: 700px; }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0;
  background-image: url("../assets/img/hero-fuji-milkyway.jpg");
  background-size: cover;
  background-position: center 20%;
}

/* pre-darkened scrim so type always reads; no runtime blur */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(5, 10, 20, 0.96) 0%, rgba(5, 10, 20, 0.72) 32%, rgba(5, 10, 20, 0.18) 62%, rgba(5, 10, 20, 0.35) 100%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 9rem) 1.25rem clamp(2.5rem, 6vh, 4.5rem);
}

.hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 230, 223, 0.75);
  margin-bottom: 1.1rem;
}
.hero-eyebrow [lang="ja"] { letter-spacing: 0.35em; }

.hero-title {
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  max-width: 21ch;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 24px rgba(2, 4, 9, 0.8);
}

.hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: rgba(232, 230, 223, 0.88);
  max-width: 38rem;
  margin-bottom: 2rem;
  text-shadow: 0 1px 12px rgba(2, 4, 9, 0.8);
}

.hero-mio {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 2.2rem;
  color: rgba(232, 230, 223, 0.66);
  font-size: 0.9rem;
}
.hero-mio img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 14px rgba(2, 4, 9, 0.6);
}

/* ==========================================================================
   Waitlist form (shared)
   ========================================================================== */

.waitlist-form { max-width: 34rem; }

.waitlist-row { display: flex; flex-direction: column; gap: 0.6rem; }

.waitlist-email {
  flex: 1;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(2, 4, 9, 0.55);
  color: var(--ink);
  min-width: 0;
}
.waitlist-email::placeholder { color: rgba(232, 230, 223, 0.45); }
.waitlist-email:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.waitlist-btn {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: 0.7rem;
  border: none;
  background: var(--accent);
  color: #04121c;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.waitlist-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(14, 165, 233, 0.35); }
.waitlist-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

.waitlist-consent {
  display: flex; gap: 0.55rem; align-items: flex-start;
  margin-top: 0.8rem;
  font-size: 0.84rem;
  color: rgba(232, 230, 223, 0.7);
  cursor: pointer;
  max-width: 32rem;
}
.waitlist-consent input { margin-top: 0.25rem; accent-color: var(--accent); flex-shrink: 0; }

.waitlist-note { margin-top: 0.7rem; font-size: 0.86rem; color: var(--accent); }

.waitlist-error { margin-top: 0.7rem; font-size: 0.88rem; color: #f2b8b5; }

.waitlist-success {
  border: 1px solid rgba(14, 165, 233, 0.4);
  background: var(--accent-soft);
  border-radius: 0.9rem;
  padding: 1.3rem 1.4rem;
  max-width: 34rem;
}
.waitlist-success h3 { font-family: var(--display); font-size: 1.25rem; margin-bottom: 0.35rem; }
.waitlist-success p { font-size: 0.92rem; color: var(--ink-dim); margin-bottom: 0.75rem; }
.referral-row { display: flex; gap: 0.5rem; }
.referral-link {
  flex: 1; font: inherit; font-size: 0.86rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.55rem;
  border: 1px solid var(--card-border);
  background: rgba(2, 4, 9, 0.5);
  color: var(--ink);
  min-width: 0;
}
.referral-copy {
  font: inherit; font-size: 0.86rem; font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(14, 165, 233, 0.5);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.referral-copy:hover { background: var(--accent-soft); }

@media (min-width: 560px) {
  .waitlist-row { flex-direction: row; }
}

/* ==========================================================================
   2. Sentence builder demo
   ========================================================================== */

.builder-demo {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1.1rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  max-width: 44rem;
}

.builder-slots {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.chip {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 0.1rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--jp);
  font-size: 1.15rem;
  font-weight: 500;
  box-shadow: 0 3px 10px rgba(2, 4, 9, 0.45);
}
.chip small {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: 0.03em;
}
.chip-particle { background: var(--accent-soft); border-color: rgba(14, 165, 233, 0.45); }
.chip-particle [lang="ja"] { color: #7dd0f7; }
.chip-engine { border-color: rgba(255, 255, 255, 0.3); }

.chip-place { animation: chip-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; animation-delay: calc(var(--i) * 0.55s + 0.3s); }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.builder-result {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  color: var(--ink);
  animation: fade-in 0.6s ease both;
  animation-delay: 3.4s;
}
.builder-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: #04121c;
  font-size: 0.85rem;
  font-weight: 700;
  margin-right: 0.5rem;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   3. Story strip
   ========================================================================== */

.story-strip {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .story-strip { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }

.story-frame {
  border-radius: 1rem;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-border);
}
.story-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.story-frame figcaption {
  padding: 0.9rem 1.05rem 1.05rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
}
.story-frame strong { color: var(--ink); font-weight: 600; }

.story-tagline {
  margin-top: 2.4rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  text-align: center;
  color: var(--warm-dim);
}

/* ==========================================================================
   3b. The living mountain
   ========================================================================== */

.sky-row {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2rem;
}
@media (min-width: 640px) { .sky-row { grid-template-columns: repeat(4, 1fr); } }
.sky-row figure {
  border-radius: 0.9rem; overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card);
}
.sky-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sky-row figcaption {
  padding: 0.5rem 0.75rem 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  text-align: center;
}

.alive-list { list-style: none; max-width: 44rem; }
.alive-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.6rem;
  color: var(--ink-dim);
  font-size: 0.98rem;
}
.alive-list li::before {
  content: "";
  position: absolute; left: 0.2rem; top: 1.05rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.7);
}

/* ==========================================================================
   3c. Screens gallery (Play-Store style)
   ========================================================================== */

.section-screens { padding-bottom: clamp(3rem, 7vw, 5rem); }
.section-screens .lead { margin-bottom: 0; }

.gallery {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 1.8rem max(1.25rem, calc((100vw - 1060px) / 2)) 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 165, 233, 0.4) transparent;
}
.gallery:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.g-shot { flex: 0 0 auto; width: min(236px, 62vw); scroll-snap-align: center; margin: 0; }
.g-shot figcaption {
  margin-top: 0.7rem;
  font-size: 0.84rem;
  color: var(--ink-dim);
  text-align: center;
  padding: 0 0.4rem;
}

.g-phone {
  border-radius: 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.45rem;
  background: #0a0f18;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.g-screen {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: #0b1322;
}
.g-screen > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.g-screen-dark { background: linear-gradient(to bottom, #0b1322, #020409); }
.g-coach {
  object-fit: contain !important;
  object-position: center 22%;
  padding: 1.4rem 1rem 5.5rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.ui-chip {
  position: absolute;
  padding: 0.28rem 0.65rem;
  border-radius: 1rem;
  background: rgba(2, 4, 9, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  backdrop-filter: none;
}
.ui-top-left { top: 0.8rem; left: 0.8rem; }
.ui-top-right { top: 0.8rem; right: 0.8rem; }

.ui-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 0.8rem 1rem;
  background: linear-gradient(to top, rgba(2, 4, 9, 0.9), transparent);
  display: flex; flex-direction: column; gap: 0.55rem; align-items: center;
}
.ui-stamina { font-size: 0.7rem; letter-spacing: 0.1em; }
.ui-btn {
  display: block; width: 100%;
  text-align: center;
  padding: 0.55rem 0.6rem;
  border-radius: 0.6rem;
  background: var(--accent);
  color: #04121c;
  font-size: 0.74rem;
  font-weight: 600;
}
.ui-card {
  width: 100%;
  border-radius: 0.7rem;
  background: rgba(10, 15, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.6rem 0.7rem;
  text-align: left;
}
.ui-card-night { background: rgba(2, 4, 9, 0.82); }
.ui-jp { font-family: var(--jp); font-size: 0.98rem; font-weight: 500; color: #efe9dc; }
.ui-sub { font-size: 0.68rem; color: var(--ink-dim); margin-top: 0.15rem; }
.ui-input {
  margin-top: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(14, 165, 233, 0.5);
  font-size: 0.8rem;
  color: var(--ink);
}
.ui-caret { color: var(--accent); animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

.g-builder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1rem 0.8rem 3.2rem;
  gap: 0.9rem;
}
.g-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.g-chip {
  padding: 0.32rem 0.55rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--jp);
  font-size: 0.82rem;
}
.g-chip-p { background: var(--accent-soft); border-color: rgba(14, 165, 233, 0.45); color: #7dd0f7; }
.g-check { text-align: center; font-size: 0.78rem; color: var(--ink); }
.g-check .builder-check { width: 1.1rem; height: 1.1rem; font-size: 0.7rem; margin-right: 0.35rem; }

/* ==========================================================================
   4. Meet Mio
   ========================================================================== */

.mio-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.2rem;
}
@media (min-width: 780px) { .mio-grid { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; } }

.mio-portrait {
  border-radius: 1.1rem; overflow: hidden;
  border: 1px solid var(--card-border);
}
.mio-portrait img { width: 100%; height: 100%; object-fit: cover; }

.mio-cards { display: flex; flex-direction: column; gap: 1.2rem; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1.1rem;
  padding: 1.3rem 1.4rem;
}

.card-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.bubble {
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.7rem 1rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  max-width: 34rem;
}
.bubble:last-child { margin-bottom: 0; }
.bubble small { display: block; color: var(--ink-dim); font-size: 0.8rem; margin-top: 0.15rem; }

.alarm-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.alarm-row img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.alarm-title { font-weight: 600; font-size: 0.95rem; }
.alarm-sub { font-size: 0.88rem; color: var(--ink-dim); margin-top: 0.2rem; }

.wardrobe { margin-top: 1.2rem; }
.wardrobe-row {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .wardrobe-row { grid-template-columns: repeat(4, 1fr); } }
.wardrobe-row figure {
  border-radius: 0.9rem; overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card);
}
.wardrobe-row img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.wardrobe-row figcaption {
  padding: 0.5rem 0.75rem 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  text-align: center;
}

.mio-closer {
  margin-top: 2.2rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--warm-dim);
  max-width: 34rem;
}

/* ==========================================================================
   5. おやすみ放送 (forced dark, quieter, slower)
   ========================================================================== */

.section-night {
  background: var(--night-deep);
  /* two cheap star layers, no images */
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 12%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 38%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 64%, rgba(255, 255, 255, 0.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 74%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(255, 255, 255, 0.32) 50%, transparent 51%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kicker-night { color: #8ab8d0; }
.night-title { color: var(--warm-dim); }
.lead-night { color: rgba(207, 198, 180, 0.75); }

.night-grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 780px) { .night-grid { grid-template-columns: minmax(260px, 340px) 1fr; gap: 3.5rem; } }

.phone {
  width: min(300px, 78vw);
  margin: 0 auto;
  border-radius: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.55rem;
  background: #0a0f18;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.75), 0 0 90px rgba(14, 165, 233, 0.07);
}

.phone-screen {
  position: relative;
  border-radius: 1.9rem;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
}
.phone-screen > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.82);
}

.phone-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.2rem 1.1rem 1.4rem;
  background: linear-gradient(to top, rgba(2, 4, 9, 0.92) 0%, rgba(2, 4, 9, 0.4) 42%, rgba(2, 4, 9, 0.25) 100%);
}

.phone-coach {
  position: absolute; top: 1.1rem; left: 1.1rem;
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem;
  color: rgba(207, 198, 180, 0.85);
}
.phone-coach img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.25);
  filter: brightness(0.85);
}

.phone-captions { margin-bottom: 0.8rem; }
.cap-jp { font-family: var(--jp); font-size: 1.25rem; font-weight: 500; color: #efe9dc; }
.cap-romaji { font-size: 0.85rem; color: rgba(207, 198, 180, 0.8); margin-top: 0.15rem; }
.cap-en { font-size: 0.85rem; color: rgba(207, 198, 180, 0.45); margin-top: 0.1rem; }

.phone-progress {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(207, 198, 180, 0.5);
}

.night-copy p {
  color: var(--warm-dim);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  max-width: 34rem;
}

.night-reading {
  margin-top: 1.8rem;
  max-width: 260px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 214, 150, 0.14), rgba(255, 214, 150, 0.03) 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  transform: rotate(-1.2deg);
}
.night-reading img { border-radius: 0.6rem; }
.night-reading figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: rgba(207, 198, 180, 0.7);
  text-align: center;
}

/* ==========================================================================
   6. Depth strip
   ========================================================================== */

.depth-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
  margin-top: 2.2rem;
}
@media (min-width: 640px) { .depth-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .depth-grid { grid-template-columns: repeat(3, 1fr); } }

.depth-card p { font-size: 0.92rem; color: var(--ink-dim); }
.depth-card em { color: var(--ink); font-style: normal; font-weight: 500; }
.depth-jp {
  font-family: var(--jp);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

/* ==========================================================================
   6b. Also in your pack
   ========================================================================== */

.section-pack { padding-top: 0; }
.pack-grid {
  list-style: none;
  display: grid; gap: 0.35rem 2.2rem;
  grid-template-columns: 1fr;
  max-width: 52rem;
  margin-top: 1.6rem;
}
@media (min-width: 680px) { .pack-grid { grid-template-columns: 1fr 1fr; } }
.pack-grid li {
  position: relative;
  padding: 0.32rem 0 0.32rem 1.5rem;
  color: var(--ink-dim);
  font-size: 0.93rem;
}
.pack-grid li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0.32rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

/* ==========================================================================
   7. CTA repeat
   ========================================================================== */

.section-cta {
  background:
    linear-gradient(to bottom, rgba(5, 10, 20, 0.9), rgba(5, 10, 20, 0.96)),
    url("../assets/img/night-fuji.jpg") center 30% / cover no-repeat;
  text-align: left;
}
.section-cta .section-inner { max-width: 700px; }

/* ==========================================================================
   8. FAQ
   ========================================================================== */

#faq details {
  border-bottom: 1px solid var(--card-border);
  padding: 1rem 0;
}
#faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after {
  content: "+";
  position: absolute; right: 0.2rem; top: 0;
  color: var(--accent);
  font-weight: 400;
  font-size: 1.2rem;
}
#faq details[open] summary::after { content: "\2212"; }
#faq details p { margin-top: 0.7rem; color: var(--ink-dim); font-size: 0.95rem; max-width: 40rem; }

/* ==========================================================================
   9. Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--card-border);
  padding: 2.5rem 1.25rem 3rem;
}
.footer-inner { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-brand { font-size: 0.9rem; color: var(--ink-dim); }
.footer-links { display: flex; gap: 1.4rem; font-size: 0.9rem; }
.footer-copy { font-size: 0.82rem; color: rgba(168, 168, 159, 0.6); }

/* ==========================================================================
   Privacy page
   ========================================================================== */

.legal { max-width: 700px; margin: 0 auto; padding: 5rem 1.25rem; }
.legal h1 { font-size: 2rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
.legal p, .legal li { color: var(--ink-dim); font-size: 0.95rem; }
.legal ul { padding-left: 1.3rem; margin: 0.5rem 0; }
.legal .back { display: inline-block; margin-bottom: 2rem; font-size: 0.9rem; }
.legal .legal-imprint { margin-top: 3rem; font-size: 0.82rem; color: rgba(168, 168, 159, 0.6); }

/* ==========================================================================
   Motion discipline
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chip-place, .builder-result, .ui-caret { animation: none; }
  .waitlist-btn { transition: none; }
  .waitlist-btn:hover { transform: none; }
}