/* mode A — the landing alone. The functional flow is styled by style.css and shares its tokens. */

#landing { max-width: none; margin: 0; padding: 0; }

#landing section { padding: var(--s-8) var(--s-5); }
#landing .inner { max-width: 27rem; margin: 0 auto; }

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid transparent;
  transition: background 300ms var(--ease), border-color 300ms var(--ease);
}

body.scrolled .lp-nav {
  background: oklch(97.7% 0.007 79 / .9);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: .02em;
}

.brand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-lit);
}

/* ---- hero ---- */

.hero { padding: var(--s-5) 0 var(--s-8); }
.hero .inner { display: flex; flex-direction: column; gap: var(--s-5); padding: 0 var(--s-5); }
.hero .copy, .hero .acts { display: flex; flex-direction: column; gap: var(--s-5); }

.hero h1 {
  margin: 0;
  font-size: var(--t-hero);
  line-height: 1.62;
  letter-spacing: -.01em;
}

.hero .lead { margin: 0; color: var(--muted); }

.reassure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-top: var(--s-1);
  color: var(--muted);
  font-size: var(--t-cap);
}

.reassure span { display: inline-flex; align-items: center; gap: var(--s-2); }

.reassure span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wood-light);
}

/* the faces sit high in the frame, and the crop keeps them there at every width */
.art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 430;
  margin: var(--s-6) 0;
  object-fit: cover;
  object-position: 50% 34%;
  background: var(--raised);
}

/* ---- bands ---- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  color: var(--muted);
  font-size: var(--t-cap);
  letter-spacing: .08em;
}

.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wood-light);
}

#landing h2 {
  margin: 0 0 var(--s-4);
  font-size: var(--t-lg);
  line-height: 1.68;
  letter-spacing: -.005em;
}

#landing .sub { margin: 0 0 var(--s-6); color: var(--muted); }

.cards { display: flex; flex-direction: column; gap: var(--s-4); }
.cards .card { padding: var(--s-6) var(--s-5); }
.cards h3 { margin: var(--s-3) 0; font-size: var(--t-md); }
.cards p { color: var(--muted); font-size: var(--t-sm); }

.cards .n {
  font-family: var(--mono);
  font-size: var(--t-cap);
  letter-spacing: .08em;
  color: var(--wood-light);
}

.steps { display: flex; flex-direction: column; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: var(--s-4); }
.steps h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); }
.steps p { color: var(--muted); font-size: var(--t-sm); }

.steps .n {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--raised);
  color: var(--wood);
  font-size: var(--t-base);
  font-weight: 500;
}

.philo { display: flex; flex-direction: column; gap: var(--s-5); background: var(--raised); }

.philo::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--wood-light);
}

.quote {
  font-family: var(--mincho);
  font-size: var(--t-md);
  line-height: 2.2;
  letter-spacing: .04em;
}

.philo p:last-child { color: var(--muted); font-size: var(--t-sm); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chips span {
  padding: .7rem var(--s-4);
  border-radius: var(--r-pill);
  background: var(--raised);
  color: var(--muted);
  font-size: var(--t-cap);
}

.safelist { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.safelist > div { padding: var(--s-5); border-top: 1px solid var(--line); }
.safelist > div:first-child { border-top: 0; }
.safelist h3 { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); }
.safelist p { color: var(--muted); font-size: var(--t-bs); }

.safelist h3::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-lit);
}

/* the one list that says no — a glyph as well as a colour, so it survives without colour vision */
.pact { margin-top: var(--s-5); padding: var(--s-5); }
.pact h3 { margin: 0 0 var(--s-3); }
.pact ul { margin: 0; padding: 0; list-style: none; }

.pact li {
  position: relative;
  margin: var(--s-3) 0;
  padding-left: var(--s-6);
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.8;
}

.pact li::before { content: "○"; position: absolute; left: 0; color: var(--brand); }
.pact li.no::before { content: "×"; color: var(--danger); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.72;
  list-style: none;
  cursor: pointer;
}

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

.faq summary { transition: color 160ms var(--ease); }
.faq summary:active { color: var(--brand); }

.faq summary::after {
  content: "＋";
  flex: none;
  color: var(--muted);
  font-weight: 400;
  transition: rotate 200ms var(--ease), color 160ms var(--ease);
}

.faq details[open] summary::after { rotate: 45deg; }

/* the answer would otherwise snap open; browsers without the property keep that instant behaviour */
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }

  .faq details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 260ms var(--ease), content-visibility 260ms;
    transition-behavior: allow-discrete;
  }

  .faq details[open]::details-content { height: auto; }
}
.faq p { padding-bottom: var(--s-5); color: var(--muted); font-size: var(--t-sm); }

.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  background: var(--night);
  color: var(--on-brand);
  text-align: center;
}

.final .pill { background: var(--night-soft); color: var(--on-brand); }
.final p { color: var(--faint); font-size: var(--t-sm); }
.final .cta-wrap { width: 100%; max-width: 22rem; }
.final button { background: var(--bg); color: var(--ink); }
.final :focus-visible { outline-color: var(--on-brand); }

@media (hover: hover) and (pointer: fine) {
  .final button:hover { background: var(--raised); }
  .faq summary:hover, .faq summary:hover::after { color: var(--brand); }

  /* transform, not translate: the reveal owns translate and the two compose instead of fighting */
  .cards .card { transition: transform 180ms var(--ease), border-color 180ms var(--ease); }
  .cards .card:hover { transform: translateY(-2px); border-color: var(--field); }

  .chips span { transition: background 180ms var(--ease), color 180ms var(--ease); }
  .chips span:hover { background: var(--brand-soft); color: var(--brand); }
}

.foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-cap);
}

.js [data-reveal] { translate: 0 12px; }
.js [data-reveal].in { translate: 0; }
[data-reveal] { transition: translate 500ms var(--ease); }

/* the items inside a section arrive in sequence rather than as one slab */
.js [data-reveal] :is(.cards, .steps, .safelist, .chips) > * { translate: 0 10px; }
.js [data-reveal].in :is(.cards, .steps, .safelist, .chips) > * { translate: 0; }
:is(.cards, .steps, .safelist, .chips) > * { transition: translate 420ms var(--ease); }

:is(.cards, .steps, .safelist) > :nth-child(2) { transition-delay: 70ms; }
:is(.cards, .steps, .safelist) > :nth-child(3) { transition-delay: 140ms; }
.safelist > :nth-child(4) { transition-delay: 210ms; }

/* nine chips ramp in threes, or the tail of the wave lands a half second late */
.chips > :nth-child(n+2) { transition-delay: 40ms; }
.chips > :nth-child(n+4) { transition-delay: 80ms; }
.chips > :nth-child(n+7) { transition-delay: 120ms; }

@media (min-width: 60rem) {
  #landing section { padding: var(--s-8) var(--s-7); }
  #landing .inner { max-width: 72rem; }
  .lp-nav { padding: var(--s-5) var(--s-7); }
  .brand { font-size: var(--t-md); }

  .hero .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy art" "acts art";
    align-content: center;
    gap: var(--s-5) var(--s-8);
    padding: 0;
  }

  .hero .copy { grid-area: copy; }
  .hero .acts { grid-area: acts; max-width: 20rem; }
  .hero .art { grid-area: art; align-self: center; margin: 0; aspect-ratio: 5 / 6; border-radius: 28px; }

  .cards { flex-direction: row; }
  .cards .card { flex: 1; padding: var(--s-7) var(--s-6); }
  .steps { flex-direction: row; gap: var(--s-6); }
  .steps li { flex: 1; flex-direction: column; gap: var(--s-4); }
  .philo { align-items: center; text-align: center; }
  .philo .quote { font-size: var(--t-lg); }
  .safelist { display: grid; grid-template-columns: repeat(2, 1fr); border: 0; background: none; }

  .safelist > div {
    padding: var(--s-6);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
  }

  .foot { padding: var(--s-7); }

  /* a full-width column runs to 70+ Japanese characters; prose is capped, structure is not */
  #landing .sub { max-width: var(--measure); }
  .philo p:last-child { max-width: var(--measure); margin-inline: auto; }
  .pact ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); }

  .faq-band .inner {
    display: grid;
    grid-template-columns: 22rem minmax(0, 38em);
    gap: 0 var(--s-8);
    align-items: start;
  }

  .faq-band .eyebrow { grid-column: 1; grid-row: 1; }
  .faq-band h2 { grid-column: 1; grid-row: 2; }
  .faq-band .faq { grid-column: 2; grid-row: 1 / 4; }
}