/* ============================================================================
   site.css — DevKoe marketing site LAYOUT (plan §5). tokens.css carries everything
   visual (colour/type/space/radius/shadow + the prefers-color-scheme dark block);
   this sheet invents no new colours, fonts, radii or shadows — every value pulls a
   var(--token). It is linked AFTER tokens.css so the cascade is tokens -> layout.

   The connector's own style.css is a centred single-card layout — wrong shape for a
   long scrolling page — so this is new, but the shared COMPONENT rules it defines
   (.eyebrow, h1/.accent, .sub, the navy-pill button, button.secondary, the focus
   ring) are PORTED here verbatim-in-spirit so the two surfaces read as one product.

   AUTHORED MOBILE-FIRST (plan principle): base rules are the phone layout; the only
   @media blocks are `min-width` queries that ENHANCE for wider screens. Tap targets
   stay >=44px. Japanese opts in via :lang(ja) — system CJK gothic + generous leading,
   no JP webfont, zero added weight.
   ============================================================================ */

/* ── Manual theme override (light/dark toggle) ──────────────────────────────────
   tokens.css is a READ-ONLY vendored mirror and ships prefers-color-scheme only (the
   connector's default). The nav toggle needs an explicit, persisted choice that can beat
   the OS preference, so theme.js sets html[data-theme="dark|light"] and these two blocks
   mirror the token VALUES from tokens.css for that case. They are deliberate duplicates:
   if the connector's palette ever changes, re-sync these from tokens.css alongside the
   re-copy. Only the surface/role/elevation tokens flip — type/space/radius/motion are
   theme-agnostic and stay inherited from tokens.css. */
html[data-theme="light"] {
  --bg: #f4f7fa; --bg-tint: #e9eff5; --surface: #ffffff; --surface-2: #eef2f6;
  --line: #d9e1e9; --line-soft: #e6ecf2;
  --text-primary: #14202b; --text-secondary: #495764; --text-label: #6b7885;
  --ink: #0b3c5d; --ink-deep: #08304a; --on-ink: #ffffff; --ink-heading: #08304a;
  --neutral: #66737f; --ready: #1f8a73; --accent: #2c8c86; --teal: #3aafa9;
  --teal-light: #6fd3cd; --accent-soft: #e3f2f0; --warn: #b5740a; --error: #d14343; --live: #e5484d;
  --shadow-sm: 0 1px 2px rgba(11, 60, 93, 0.05), 0 2px 6px rgba(11, 60, 93, 0.06);
  --shadow-md: 0 2px 4px rgba(11, 60, 93, 0.06), 0 10px 22px -8px rgba(11, 60, 93, 0.16);
  --shadow-hero: 0 2px 8px rgba(11, 60, 93, 0.08), 0 20px 44px -18px rgba(11, 60, 93, 0.26);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(11, 60, 93, 0.2), 0 8px 18px -6px rgba(11, 60, 93, 0.34);
  --ring: 0 0 0 3px color-mix(in srgb, var(--teal) 38%, transparent);
}
html[data-theme="dark"] {
  --bg: #0a141d; --bg-tint: #0d1925; --surface: #122231; --surface-2: #1a2d3e;
  --line: #284055; --line-soft: #1f3346;
  --text-primary: #eaf1f7; --text-secondary: #a7b6c4; --text-label: #758999;
  --ink: #103a57; --ink-deep: #0c2f48; --on-ink: #eaf1f7; --ink-heading: #eaf1f7;
  --neutral: #93a3b3; --ready: #4cc7a8; --accent: #58c6bf; --teal: #5fd0c9;
  --teal-light: #8fe2dc; --accent-soft: #123a3a; --warn: #e0a93f; --error: #ff7a7a; --live: #ff5c61;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45), 0 10px 28px -10px rgba(0, 0, 0, 0.6);
  --shadow-hero: 0 12px 34px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 3px color-mix(in srgb, var(--teal) 46%, transparent);
}

/* ── Globals ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;            /* in-page anchors glide (plan §8) ... */
  scroll-padding-top: 5rem;           /* ...clear of the sticky nav */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: var(--text-md)/var(--leading-normal) var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* visible, consistent keyboard focus everywhere (a11y) — ported from the connector */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* skip link — keyboard users jump past the nav (a11y) */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-sm);
  font-weight: 650;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: var(--space-3); }

/* ── Shared components (ported from the connector's style.css, token-driven) ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  margin: 0 0 var(--space-3);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--ink-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;                 /* even heading line lengths, no orphan word (progressive enhancement) */
}
h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  font-weight: 560;
  letter-spacing: -0.022em;
}
h2 { margin: 0 0 var(--space-4); font-size: var(--text-2xl); font-weight: 540; }
h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; }
/* a single italic, teal accent word — the connector's display flourish */
.accent { font-style: italic; color: var(--accent); }

.sub {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  max-width: 46ch;
  text-wrap: pretty;                  /* avoid short widow lines in body copy (progressive enhancement) */
}

p { line-height: var(--leading-normal); text-wrap: pretty; }

/* primary action — a deep-navy pill that lifts off the page (the brand "ink" CTA) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;                   /* >=44px tap target */
  padding: 0 1.6rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, #fff 12%), var(--ink));
  color: var(--on-ink);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: 650;
  font-family: inherit;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn:hover { filter: brightness(1.07); box-shadow: var(--shadow-btn), 0 10px 26px -8px color-mix(in srgb, var(--ink) 50%, transparent); }
.btn:active { transform: translateY(1px) scale(0.997); }

/* secondary — quiet outline pill */
.btn.secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn.secondary:hover { filter: none; box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); color: var(--accent); }

.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cta-note { color: var(--text-secondary); font-size: var(--text-base); }
.cta-note a { font-weight: 600; }

/* ── Layout primitives ───────────────────────────────────────────────────────*/
.container { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--space-4); }

.section { padding-block: var(--space-7); border-top: 1px solid var(--line-soft); }
.section:first-of-type { border-top: 0; }
/* alternating bands — quiet rhythm down the page */
.section--surface { background: var(--surface); }
/* dense band (offer / FAQ): more DETAIL, not tighter type — comfortable leading kept
   (the Japanese density-as-trust finding is about information completeness). */
.section--dense { padding-block: var(--space-8); }

.section-head { max-width: 52ch; margin-bottom: var(--space-6); }
.section-head .sub { margin-bottom: 0; }
/* keep flowing body copy at a comfortable reading measure on wide screens */
.section > .container > p { max-width: 66ch; }

/* ── Nav (sticky bar -> mobile toggle) ───────────────────────────────────────*/
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 4rem;
}
.brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink-heading);
  text-decoration: none;
  margin-right: auto;            /* push the rest right */
  letter-spacing: -0.01em;
}
.brand .accent { font-style: italic; }

/* mobile: links + CTA live in a panel toggled open; lang-toggle + hamburger stay visible */
.nav-links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.nav-links.open { display: flex; }
.nav-links a:not(.btn) {
  display: block;
  padding: 0.7rem 0.4rem;          /* >=44px row */
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.nav-links a:not(.btn):hover { color: var(--accent); }
.nav-links .btn { margin-top: var(--space-2); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.lang-toggle:hover { border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); color: var(--accent); }

/* light/dark toggle — quiet icon button that matches the lang pill + hamburger */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { width: 20px; height: 20px; }
/* aria-pressed is authoritative (set by theme.js, OS-aware): pressed = dark active -> show
   the sun (the action is "go light"); otherwise show the moon. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── Hero ────────────────────────────────────────────────────────────────────*/
.hero {
  padding-block: var(--space-7) var(--space-8);
  /* a calm layered backdrop echoing the connector's hero (teal + navy whispers) */
  background:
    radial-gradient(70% 55% at 8% -10%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%),
    radial-gradient(80% 60% at 100% -14%, color-mix(in srgb, var(--ink) 11%, transparent), transparent 72%),
    var(--bg);
}
.hero h1 { max-width: 18ch; }
.hero .sub { font-size: var(--text-lg); max-width: 52ch; }
.hero .cta-group { margin-top: var(--space-6); }

/* hero composition — single column now; the portrait moved to the About section so the
   founder photo sits beside the verifiable credentials (the page's trust spine). */
.hero-inner { display: grid; gap: var(--space-7); align-items: center; }
.hero-copy { min-width: 0; max-width: 60ch; }
.trust-strip {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  color: var(--text-label);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* media placeholders — stand in for the founder photo / OG / video until produced */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  min-height: 14rem;
  background:
    repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 12px,
      color-mix(in srgb, var(--line) 40%, var(--surface-2)) 12px, color-mix(in srgb, var(--line) 40%, var(--surface-2)) 24px);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-label);
  font-size: var(--text-sm);
  font-weight: 650;
}
.media-placeholder--video { min-height: 18rem; }

/* ── Pillars (How it works) ──────────────────────────────────────────────────*/
.pillars { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.pillar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.pillar-card h3 { color: var(--ink-heading); }
.pillar-card p { margin: 0; color: var(--text-secondary); }

/* ── Who it's for (two avatar cards) ───────────────────────────────────────────*/
.avatars { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.avatar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.avatar-card .avatar-tag {
  display: inline-block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.avatar-card h3 { color: var(--ink-heading); margin-bottom: var(--space-2); }
.avatar-card p { margin: 0; color: var(--text-secondary); }
.who-note { margin-top: var(--space-5); color: var(--text-secondary); }

/* ── About (founder photo + credential list) ───────────────────────────────────*/
.about-grid { display: grid; gap: var(--space-6); margin-top: var(--space-5); }
.about-portrait { margin: 0; align-self: start; }
.about-portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%;          /* keep the face centred when cropped */
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-hero);
}
.cred-list { list-style: none; margin: 0; padding: 0; max-width: 62ch; display: grid; gap: var(--space-4); }
.cred-list li { padding-left: 1.6rem; position: relative; color: var(--text-secondary); }
.cred-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.cred-list strong { color: var(--text-primary); }

/* ── Offer (Thrive) ───────────────────────────────────────────────────────────*/
.offer-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  padding: var(--space-6);
  margin-top: var(--space-5);
}
.offer-includes { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-3); }
.offer-includes li { padding-left: 1.6rem; position: relative; color: var(--text-secondary); }
.offer-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ready);
  font-weight: 800;
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6ch;
  margin: var(--space-5) 0 var(--space-2);
}
.price .amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 560;
  color: var(--ink-heading);
}
.price .terms { color: var(--text-secondary); font-size: var(--text-base); }
.offer-card .cta-group { margin-top: var(--space-5); }

/* explicit "what you get" lead-in above the inclusions */
.offer-lead { margin: 0 0 var(--space-4); color: var(--text-primary); font-size: var(--text-lg); line-height: var(--leading-normal); }

/* ── Session timeline (the 12-week program, week by week) ───────────────────────*/
.timeline-head { margin-top: var(--space-6); }
.timeline-head h3 { margin-bottom: var(--space-1); }
.timeline-note { margin: 0; color: var(--text-label); font-size: var(--text-base); }
.timeline { list-style: none; margin: var(--space-5) 0 0; padding: 0; position: relative; }
.timeline-item { position: relative; padding-left: 3rem; padding-bottom: var(--space-5); }
.timeline-item:last-child { padding-bottom: 0; }
/* the connecting rail — runs through the numbered markers; hidden on the last item */
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(1.05rem - 1px);
  top: 0.3rem;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline-item:last-child::before { display: none; }
.timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.timeline-item h4 { margin: 0.25rem 0 var(--space-1); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink-heading); }
.timeline-content p { margin: 0; color: var(--text-secondary); font-size: var(--text-base); }
.timeline-tags { margin-top: var(--space-2) !important; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.timeline-tags span {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
}

/* ── Member portal block (proprietary tooling — included for every participant) ──*/
.portal {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.portal h3 { color: var(--ink-heading); margin-bottom: var(--space-1); }
.portal-intro { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-base); }
.portal-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.portal-features li { padding-left: 1.7rem; position: relative; color: var(--text-secondary); font-size: var(--text-base); }
.portal-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}
.portal-features strong { color: var(--text-primary); }

/* assistive-tech support note — a participant benefit, on hand when it helps (not a per-session crutch) */
.offer-support {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.included-tag {
  display: inline-block;
  margin-right: 0.6ch;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.todo-flag {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ── The method (three trained areas + the nine challenges) ──────────────────────
   The "meat" of the program brought onto the page: WHAT is measured/trained, the
   ORDER it's worked in (fluency → grammar → phonology, fastest-moving first), and a
   per-challenge justification grounded in second-language acquisition research. The
   framing is deliberate and load-bearing: errors are PREDICTABLE first-language
   transfer, not carelessness — both honest and the page's trust spine. The full
   citations live on /research/. */
.method-callout {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
}
.method-callout p { margin: 0; max-width: 64ch; }
.method-callout strong { color: var(--text-primary); }

/* the three areas — each card states the domain AND where it sits in the sequence */
.area-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.area-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.area-order {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.area-card h3 { color: var(--ink-heading); margin-bottom: var(--space-2); }
.area-card p { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: var(--text-base); }
.area-card p:last-child { margin-bottom: 0; }
.area-card .area-why { color: var(--text-secondary); }
.area-card .area-why strong { color: var(--text-primary); }

/* the nine challenges, grouped under their area */
.challenge-head { margin-top: var(--space-8); }
.challenge-head h3 { margin-bottom: var(--space-1); }
.challenge-head p { margin: 0; color: var(--text-label); font-size: var(--text-base); max-width: 60ch; }
.challenge-group { margin-top: var(--space-6); }
.challenge-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8ch;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
}
.challenge-group-title h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink-heading); }
.challenge-group-title span { color: var(--text-label); font-size: var(--text-sm); font-weight: 600; }
.challenge-cards { display: grid; gap: var(--space-4); }
.challenge-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.challenge-code {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-label);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.challenge-card h5 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink-heading); }
.challenge-what { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: var(--text-base); }
.challenge-why { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-base); }
.challenge-why strong { color: var(--text-primary); }
.challenge-eg {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.challenge-eg .eg-said { color: var(--text-secondary); }
.challenge-eg .eg-said::before { content: "✗ "; color: var(--error); font-weight: 800; }
.challenge-eg .eg-fix { color: var(--text-primary); font-weight: 600; }
.challenge-eg .eg-fix::before { content: "✓ "; color: var(--ready); font-weight: 800; }
.method-appendix-note { margin-top: var(--space-7); color: var(--text-secondary); }
.method-appendix-note a { font-weight: 600; }

/* About credentials — quiet, factual chips beneath the intro line */
.cred-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
}
.cred-badges li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ── Research appendix page (/research/) ─────────────────────────────────────────*/
.ref-method {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.ref-method h3 { color: var(--ink-heading); }
.ref-method p { margin: 0 0 var(--space-3); color: var(--text-secondary); }
.ref-method p:last-child { margin-bottom: 0; }
.ref-area { margin-top: var(--space-8); }
.ref-area > h2 { margin-bottom: var(--space-2); }
.ref-area > .sub { margin-bottom: var(--space-5); }
.ref-metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.ref-metric h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8ch;
  margin-bottom: var(--space-3);
  color: var(--ink-heading);
}
.ref-metric h3 .challenge-code { margin: 0; }
.ref-metric > p { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-base); }
.ref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.ref-list li { padding-left: 1.4rem; position: relative; }
.ref-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.ref-cite { display: block; color: var(--text-primary); font-weight: 650; font-size: var(--text-base); margin-bottom: 0.2rem; }
.ref-summary { margin: 0; color: var(--text-secondary); font-size: var(--text-base); }
.ref-back { margin-top: var(--space-7); }

/* ── Risk reversal (guarantee) — accent edge, like the connector's navy link-card ──*/
.guarantee {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  margin-top: var(--space-4);
}
.guarantee p:last-child { margin-bottom: 0; }

/* ── FAQ (native <details>/<summary> accordion — zero JS, plan §8) ────────────*/
.faq { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 650;
  color: var(--ink-heading);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: var(--text-xl);
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-body { padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); }
.faq-item .faq-body p { margin: 0; }

/* ── Final CTA ─────────────────────────────────────────────────────────────────*/
.final-cta { text-align: center; }
.final-cta .section-head, .final-cta .sub { margin-inline: auto; }
.final-cta .cta-group { justify-content: center; margin-top: var(--space-5); }
.final-cta .media-placeholder { max-width: 16rem; margin: var(--space-6) auto 0; min-height: 10rem; }

/* ── Footer (ink band) ─────────────────────────────────────────────────────────*/
.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--space-7);
}
.site-footer a { color: var(--teal-light); }
.footer-inner { display: grid; gap: var(--space-5); }
.footer-brand { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.footer-links a { text-decoration: none; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; }
.footer-fine { color: color-mix(in srgb, var(--on-ink) 70%, transparent); font-size: var(--text-sm); margin: 0; }

/* ── Japanese type (opt-in) — system CJK gothic + generous leading, no webfont ──*/
:lang(ja) { font-family: var(--font-cjk); line-height: var(--leading-cjk); }
/* JP heading RUNS use the CJK gothic face (plan §5) — not a serif fallback from Fraunces;
   tight Latin tracking is relaxed and the line-height loosened a touch for kana/kanji. */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 {
  font-family: var(--font-cjk);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
/* JP accent: keep the teal emphasis but drop italic (not idiomatic for CJK) + use the gothic face */
:lang(ja) .accent { font-family: var(--font-cjk); font-style: normal; font-weight: 700; }
/* the "DevKoe" wordmark is Latin — it stays Fraunces, and its "Koe" accent stays italic Fraunces */
:lang(ja) .brand { font-family: var(--font-display); font-style: normal; }
:lang(ja) .brand .accent { font-family: var(--font-display); font-style: italic; font-weight: 600; }

/* delivery-language notice — the JP page must state plainly that coaching is in English */
.delivery-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 650;
}

/* ── Responsive: min-width queries ENHANCE the mobile base ──────────────────────*/
@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-links a:not(.btn) { padding: 0.5rem 0.7rem; }
  .nav-links .btn { margin-top: 0; min-height: 44px; padding: 0 1.2rem; }
  /* desktop grouping: brand + utilities (日本語, theme) cluster left; nav + CTA pushed right */
  .brand { margin-right: var(--space-4); }
  .nav-links { margin-left: auto; }

  .section { padding-block: var(--space-8); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .avatars { grid-template-columns: 1fr 1fr; }
  .portal-features { grid-template-columns: 1fr 1fr; }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .challenge-cards { grid-template-columns: repeat(3, 1fr); }
  /* About: founder photo left (narrower), credentials right */
  .about-grid { grid-template-columns: 0.8fr 1.4fr; align-items: start; }
  .final-cta .media-placeholder { min-height: 12rem; }
  .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 64rem) {
  .hero h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3rem); }
}

/* ── Motion: respect the user's preference ──────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}