/* ============================================================
 * v3-site.css — v3 design layer for pages built on style.css + site-premium.css
 * Load order: style.css → site-premium.css (→ page CSS) → rin-v3.css → v3-site.css
 * Scope: body.v3-site (added by tools/apply-v3-shell-stylecsssitepremiumcss.py)
 *
 * Design code (v3): near-black #0A0A0B / warm white #F5F5F2 / brass #C08A3E,
 * Mincho for every glyph, square corners, hairline rules, dark and warm-white
 * sections alternating, generous spacing, small wide-tracked labels.
 *
 * How it works
 *  1. Tokens: the legacy variables (--on-primary, --lp-paper, --hairline …) are
 *     re-bound to v3 values. Every legacy component that paints through those
 *     variables follows automatically, including inline style="…var(--x)…".
 *  2. Light sections: the same variables are re-bound to the warm-white set on
 *     the selectors listed in "LIGHT SECTIONS". Dark islands inside a light
 *     area re-bind the dark set again.
 *  3. Components: shape/typography overrides. Where page CSS owns state classes
 *     (.on, .ok, .ng, .recording …) the base rule is written with :where() so the
 *     page's state rules keep winning.
 *  4. rin-v3.css ships global element rules (p/h1–h3 margins and colour, a colour,
 *     .steps, .section …) meant for the new pages; they are neutralised here for
 *     legacy content with zero-specificity selectors.
 * Group CSS added later should load after this file and may use the --v3-* tokens.
 * ============================================================ */

/* ---------- 1. tokens: dark (default) ---------- */
body.v3-site,
body.v3-site :is(.meeting-hero, .meeting-end, .v3-dark) {
  --v3-bg: #0A0A0B;
  --v3-bg-2: #141412;
  --v3-bg-3: #1D1B17;
  --v3-text: #F5F5F2;
  --v3-body: #C4BFB4;
  --v3-mute: #948F85;
  --v3-rule: rgba(245, 245, 242, .16);
  --v3-rule-2: rgba(245, 245, 242, .32);
  --v3-accent: #C08A3E;
  --v3-accent-text: #DDBB84;
  --v3-accent-wash: rgba(192, 138, 62, .10);
  --v3-on-accent: #0A0A0B;
  --v3-input: #0F0F0E;
  --brass: #C08A3E;
}

/* ---------- 1b. tokens: warm white ---------- */
/* LIGHT SECTIONS: which legacy blocks become warm white.
   - .section.soft / .band           : the alternate band every article template already marks
   - main.legal                      : legal pages (single long reading column)
   - first content block after a page head that has no .soft alternation
     (phrases, free, 発音チェック, 英語力診断, gift, join)
   - meeting guides: the article body (the hero stays dark)                     */
body.v3-site :is(
  .section.soft,
  .band,
  main.legal,
  .ph-head + .section,
  .free-head + .section,
  .hc-head + .section,
  .sd-head + .section,
  .gift-head + .gift-sec,
  .gift-sec + .section:not(.gift-sec),
  .hero + .section,
  .v3-light
),
body.v3-site.meeting-page main {
  --v3-bg: #F5F5F2;
  --v3-bg-2: #EAEAE5;
  --v3-bg-3: #E1E0D8;
  --v3-text: #0A0A0B;
  --v3-body: #3E3C37;
  --v3-mute: #6A665E;
  --v3-rule: rgba(10, 10, 11, .14);
  --v3-rule-2: rgba(10, 10, 11, .30);
  --v3-accent: #C08A3E;
  --v3-accent-text: #8E6326;
  --v3-accent-wash: rgba(192, 138, 62, .13);
  --v3-on-accent: #0A0A0B;
  --v3-input: #FBFBF9;
  --brass: #8E6326;
}

/* ---------- 1c. legacy variables re-bound on every token scope ---------- */
body.v3-site,
body.v3-site :is(.meeting-hero, .meeting-end, .v3-dark),
body.v3-site :is(.section.soft, .band, main.legal, .ph-head + .section, .free-head + .section, .hc-head + .section, .sd-head + .section, .gift-head + .gift-sec, .gift-sec + .section:not(.gift-sec), .hero + .section, .v3-light),
body.v3-site.meeting-page main {
  --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-jp: var(--serif);
  --font-body: var(--serif);
  --font-display: var(--serif);
  --font-heading: var(--serif);

  --canvas-night: var(--v3-bg);
  --canvas-night-soft: var(--v3-bg-2);
  --on-primary: var(--v3-text);
  --on-primary-mute: var(--v3-body);
  --hairline: var(--v3-rule);
  --hairline-light: var(--v3-rule);
  --hairline-strong: var(--v3-rule-2);
  --surface-1: transparent;
  --surface-2: var(--v3-accent-wash);
  --edge-light: transparent;
  --surface-border: var(--v3-rule);
  --surface-shadow: 0 0 0 transparent;
  --glass-bg: var(--v3-bg);
  --glass-border: var(--v3-rule);
  --input-fill: var(--v3-input);
  --focus-ring: rgba(192, 138, 62, .28);
  --btn-fill: transparent;
  --btn-border: var(--v3-accent);

  --lp-canvas: var(--v3-bg);
  --lp-canvas-2: var(--v3-bg-2);
  --lp-surface: var(--v3-bg-3);
  --lp-paper: var(--v3-text);
  --lp-body: var(--v3-body);
  --lp-mute: var(--v3-mute);
  --lp-hair: var(--v3-rule);
  --lp-hair-2: var(--v3-rule-2);

  --rin-bg: var(--v3-bg);
  --rin-surface: var(--v3-bg-2);
  --rin-surface-raised: var(--v3-bg-3);
  --rin-text: var(--v3-text);
  --rin-text-muted: var(--v3-body);
  --rin-border: var(--v3-rule);
  --rin-brass: var(--v3-accent);
  --rin-brass-light: var(--v3-accent-text);

  --r-xs: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 0px;
  --r-full: 0px;

  color: var(--v3-text);
}

/* layout widths shared with the header/footer partials */
body.v3-site {
  --content-width: min(81.8vw, 1440px);
  --wrap: calc(var(--content-width) + 64px);
  margin: 0;
  background: #0A0A0B;
  font-family: var(--serif);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
@media (width < 1200px) { body.v3-site { --content-width: calc(100vw - 80px); } }
@media (width < 768px) { body.v3-site { --content-width: calc(100vw - 40px); --wrap: calc(100vw + 24px); } }
@media (max-width: 720px) { body.v3-site { --wrap: 100vw; } }

body.v3-site .section-inner { width: var(--content-width); margin-inline: auto; box-sizing: border-box; }
body.v3-site ::selection { background: #C08A3E; color: #0A0A0B; }

/* every glyph in Mincho, including form controls and legacy display faces */
body.v3-site :is(select, textarea, option, optgroup, label, legend, code, kbd, samp, pre, small, time) { font-family: var(--serif); }

/* ---------- 2. neutralise rin-v3.css element rules for legacy content ---------- */
:where(body.v3-site) :where(p):not(:where(.header *, .mega *, .footer *, dialog *)) { margin: 0 0 1em; color: inherit; }
:where(body.v3-site) :where(h1, h2, h3, h4):not(:where(.header *, .mega *, .footer *, dialog *)) { margin: 0 0 .5em; color: var(--on-primary); }
:where(body.v3-site) :where(h1):not(:where(.header *, .mega *, .footer *, dialog *)) { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.35; font-weight: 600; letter-spacing: 0; }
:where(body.v3-site) :where(h2):not(:where(.header *, .mega *, .footer *, dialog *)) { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.5; font-weight: 600; letter-spacing: 0; }
:where(body.v3-site) :where(h3):not(:where(.header *, .mega *, .footer *, dialog *)) { font-size: 19px; line-height: 1.6; font-weight: 600; letter-spacing: 0; }
:where(body.v3-site) :where(a):not(:where(.header *, .mega *, .footer *, dialog *)) { color: var(--on-primary); }

/* ---------- 3. sections: rhythm and backgrounds ---------- */
body.v3-site .section { padding: 104px 0; border-bottom: 0; background: var(--v3-bg); }
body.v3-site .band { padding: 104px 0; border-bottom: 0; background: var(--v3-bg); }
body.v3-site :is(.section.soft, .band, main.legal, .ph-head + .section, .free-head + .section, .hc-head + .section, .sd-head + .section, .gift-head + .gift-sec, .gift-sec + .section:not(.gift-sec), .hero + .section, .v3-light) {
  background: var(--v3-bg) !important; /* beats inline style="background:var(--canvas-night-soft)" */
  color: var(--v3-text);
}
/* light blocks that follow a page head carry inline padding-top:0 (they used to continue the dark head) */
body.v3-site :is(.ph-head + .section, .free-head + .section, .hc-head + .section, .sd-head + .section, .gift-head + .gift-sec, .gift-sec + .section:not(.gift-sec)) { padding-top: 88px !important; }
/* the second gift section returns to dark and needs its own top space */
body.v3-site .gift-sec + .gift-sec { padding-top: 88px !important; }

/* page heads (dark): breadcrumb, label, title, lead */
body.v3-site :is(.tk-hero, .ph-head, .free-head, .gift-head, .sd-head, .hc-head) { padding: 72px 0 40px; background: var(--v3-bg); }
body.v3-site :is(.ph-head, .free-head, .gift-head, .sd-head, .hc-head) { padding-bottom: 88px; }
body.v3-site .tk-hero + .section { padding-top: 48px; }

/* wrap follows the v3 content width (site-premium keeps its 32px side padding) */
body.v3-site .wrap { max-width: var(--wrap); }

/* ---------- 4. type ---------- */
body.v3-site :is(.display-xxl, .display-xl, .display-lg, .lp-h2, .jp-head) {
  font-family: var(--serif);
  text-transform: none;
  color: var(--v3-text);
  letter-spacing: .01em;
}
/* page titles */
body.v3-site :is(main, .hero, .legal) h1,
body.v3-site :is(main, .hero) :is(h1.display-lg, h1.display-xxl, h1.lp-h2) {
  font-family: var(--serif);
  font-size: clamp(34px, 4.1vw, 62px);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  max-width: 22em;
  margin: 0 0 28px;
  color: var(--v3-text);
}
/* section headings */
body.v3-site :is(.section, .band) h2.display-lg,
body.v3-site .band-head h2 {
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 20px;
  text-align: left;
}
body.v3-site .band-head { margin-bottom: 48px; max-width: 900px; }
body.v3-site .section .sub,
body.v3-site .band-head .sub { font-size: 16px; line-height: 2; color: var(--v3-body); opacity: 1; max-width: 42em; margin: 0; }

/* small wide-tracked label */
body.v3-site .eyebrow,
body.v3-site :is(.hc-kicker, .sd-progress, .momentum-label) {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v3-accent-text);
  opacity: 1;
  margin: 0 0 20px;
}

/* breadcrumbs */
body.v3-site :is(.crumbs, .meeting-crumbs) { font-size: 12.5px; letter-spacing: .06em; color: var(--v3-mute); opacity: 1; margin: 0 0 36px; gap: 8px; }
body.v3-site :is(.crumbs, .meeting-crumbs) a { color: var(--v3-mute); text-decoration: underline; text-decoration-color: var(--v3-rule-2); text-underline-offset: 4px; }
body.v3-site :is(.crumbs, .meeting-crumbs) :is(.cur, [aria-current]) { color: var(--v3-text); }

/* lead paragraphs */
body.v3-site :is(.tk-lead, .ph-lead, .free-lead, .gift-lead, .sd-lead, .hc-lead, .meeting-lead, .lede),
body.v3-site .legal .lead {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2;
  color: var(--v3-body);
  opacity: 1;
  max-width: 40em;
}
body.v3-site :is(.tk-lead, .ph-lead, .free-lead, .gift-lead, .sd-lead, .hc-lead) strong,
body.v3-site :is(.tk-lead, .hc-lead) b { color: var(--v3-text); }

/* running text */
body.v3-site .prose { font-size: 16.5px; line-height: 2.05; color: var(--v3-body); max-width: 40em; }
body.v3-site :is(.prose, .faq-body, .ai-answer, .lock-callout, .profile-box, .meeting-prose, .guide-section, .legal) strong { color: var(--v3-text); }
body.v3-site :is(.prose, .tk-lead, .ph-lead, .free-lead, .gift-lead, .faq-body, .updated, .ai-answer, .lock-callout, .profile-box, .legal, .meeting-prose, .meeting-byline, .guide-section, .guide-byline, .free-more, .ph-cta, .gift-cta, .hc-note, .sd-lead, .plans-link, .consult, .cta-band, .v3-page-note) a:not([class*="btn"]):not(.v3-plain) {
  color: var(--v3-text);
  text-decoration: underline;
  text-decoration-color: var(--v3-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
body.v3-site :is(.updated, .date, .post-card .date) { font-size: 12.5px; letter-spacing: .04em; color: var(--v3-mute); opacity: 1; }
body.v3-site .muted { color: var(--v3-mute); opacity: 1; }
body.v3-site .ja { word-break: normal; }

/* ---------- 5. buttons ---------- */
body.v3-site .btn,
body.v3-site .btn.solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 28px;
  border: 1px solid var(--v3-accent);
  border-radius: 0;
  background: var(--v3-accent);
  background-image: none;
  box-shadow: none;
  color: var(--v3-on-accent);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transform: none;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
}
body.v3-site .btn:hover,
body.v3-site .btn.solid:hover { background: var(--v3-accent); color: var(--v3-on-accent); border-color: var(--v3-accent); filter: brightness(1.08); transform: none; text-decoration: none; }
body.v3-site .btn:active { background: var(--v3-accent); color: var(--v3-on-accent); transform: none; filter: brightness(.95); }
body.v3-site :is(.btn.ghost, .btn.teal) { background: transparent; color: var(--v3-text); border-color: var(--v3-accent); box-shadow: none; }
body.v3-site :is(.btn.ghost, .btn.teal):hover { background: var(--v3-accent-wash); color: var(--v3-text); border-color: var(--v3-accent); filter: none; }
body.v3-site .btn.sm { min-height: 42px; padding: 8px 18px; font-size: 13.5px; letter-spacing: .04em; }
body.v3-site .btn.block { display: flex; width: 100%; }
body.v3-site .btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
body.v3-site .cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 32px; }

/* page tools that paint their own buttons (states stay with the page CSS) */
:where(body.v3-site) :is(.hc-btn, .sd-audio, .sd-share-top) { border-radius: 0; font-family: var(--serif); letter-spacing: .03em; }
:where(body.v3-site) .hc-btn { background: var(--v3-accent); border-color: var(--v3-accent); color: var(--v3-on-accent); min-height: 46px; }
:where(body.v3-site) .hc-btn.ghost { background: transparent; color: var(--v3-text); border-color: var(--v3-rule-2); }
:where(body.v3-site) .hc-btn.ghost:hover { border-color: var(--v3-accent); }
:where(body.v3-site) .sd-audio { background: var(--v3-accent); border-color: var(--v3-accent); color: var(--v3-on-accent); }

/* ---------- 6. callouts and CTA boxes ---------- */
body.v3-site :is(.ai-answer, .lock-callout, .profile-box) {
  background: var(--v3-accent-wash);
  border: 0;
  border-left: 2px solid var(--v3-accent);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 26px;
  max-width: 820px;
  color: var(--v3-body);
  opacity: 1;
}
body.v3-site :is(.ai-answer, .profile-box) p { color: var(--v3-body); font-size: 16px; line-height: 2; }
body.v3-site .tk-hero .ai-answer { margin-top: 32px; }
body.v3-site :is(.free-more, .ph-cta, .gift-cta) {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--v3-text);
  border-radius: 0;
  box-shadow: none;
  padding: 36px 0 0;
  margin-top: 72px;
}
body.v3-site :is(.free-more, .ph-cta, .gift-cta) h2 { font-size: clamp(24px, 2.3vw, 34px); font-weight: 400; line-height: 1.5; margin: 0 0 16px; }
body.v3-site :is(.free-more, .ph-cta, .gift-cta) p { color: var(--v3-body); max-width: 40em; line-height: 2; }
body.v3-site :is(.sd-line, .sd-why, .hc-banner) { border-radius: 0; box-shadow: none; }

/* closing CTA band */
body.v3-site .cta-band { background: transparent; padding: 0; text-align: left; max-width: 900px; }
body.v3-site .cta-band h2 { color: var(--v3-text); }
body.v3-site .cta-band p { color: var(--v3-body); opacity: 1; max-width: 40em; margin: 0 0 8px; line-height: 2; }
body.v3-site .cta-band .cta-row { justify-content: flex-start !important; }
body.v3-site .cta-band .btn { margin-top: 20px; }

/* ---------- 7. cards, lists, rows ---------- */
/* site-premium styles these through a list that includes ".faq details" (0,2,2); "html" lifts ours to match and win by order */
html body.v3-site :is(.free-card, .cat-card, .cert, .sd-card, .card) { border-radius: 0; box-shadow: none; }
html body.v3-site .free-card {
  background: var(--v3-bg);
  border: 0;
  border-top: 2px solid var(--v3-text);
  padding: 32px 0 0;
}
body.v3-site .free-card h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.5; margin: 12px 0 10px; }
body.v3-site .free-card .meta { font-size: 12px; letter-spacing: .12em; color: var(--v3-mute); opacity: 1; }
body.v3-site .free-card li { color: var(--v3-body); border-top: 1px solid var(--v3-rule); margin: 0; padding: 12px 0 12px 22px; }
body.v3-site .free-card li:before { top: 12px; color: var(--v3-accent); opacity: 1; }
body.v3-site .free-grid { gap: 56px; }

body.v3-site .cat-cards { gap: 0 40px; }
html body.v3-site .cat-card { background: transparent; border: 0; border-top: 1px solid var(--v3-rule-2); padding: 26px 0 30px; }
html body.v3-site .cat-card:hover { background: transparent; border-top-color: var(--v3-accent); }
body.v3-site .cat-card h2 { font-size: 20px; font-weight: 600; line-height: 1.55; margin: 0 0 8px; }
body.v3-site .cat-card:hover h2 { text-decoration: underline; text-decoration-color: var(--v3-accent); text-underline-offset: 5px; }
body.v3-site .cat-card p { color: var(--v3-body); font-size: 14.5px; line-height: 1.9; }

body.v3-site .post-list { gap: 0; max-width: 900px; border-bottom: 1px solid var(--v3-rule); }
:where(body.v3-site) .post-card { background: transparent; border-top: 1px solid var(--v3-rule); border-radius: 0; box-shadow: none; padding: 30px 0; }
:where(body.v3-site) .post-card:hover { outline: 0; }
:where(body.v3-site) .post-card .cat { font-size: 12px; letter-spacing: .2em; color: var(--v3-accent-text); opacity: 1; }
:where(body.v3-site) .post-card h2 { font-size: clamp(20px, 1.7vw, 25px); font-weight: 600; line-height: 1.55; margin: 10px 0 12px; color: var(--v3-text); }
:where(body.v3-site) .post-card:hover h2 { text-decoration: underline; text-decoration-color: var(--v3-accent); text-underline-offset: 6px; }
:where(body.v3-site) .post-card p { color: var(--v3-body); font-size: 15px; line-height: 1.95; }

body.v3-site :is(.ph-item, .item) { margin: 0; border: 0; border-top: 1px solid var(--v3-rule); border-radius: 0; background: transparent; box-shadow: none; padding: 22px 0; }
body.v3-site :is(.ph-item, .item) .en { font-size: 18px; line-height: 1.65; font-weight: 600; color: var(--v3-text); }
body.v3-site :is(.ph-item, .item) :is(.jp, .note) { color: var(--v3-body); opacity: 1; }
body.v3-site .ph-item .ex { border-left: 2px solid var(--v3-accent); color: var(--v3-body); padding-left: 14px; }
body.v3-site .item .no { font-family: var(--serif); font-weight: 400; color: var(--v3-accent-text); opacity: 1; font-size: 20px; min-width: 2em; }
body.v3-site.v3-site .item .cat { border-radius: 0; border-color: var(--v3-rule-2); color: var(--v3-body); }
body.v3-site .item summary { color: var(--v3-text); text-decoration: underline; text-decoration-color: var(--v3-accent); text-underline-offset: 4px; }
body.v3-site .gift-sec h2 { font-size: clamp(24px, 2.3vw, 34px); font-weight: 400; line-height: 1.5; margin: 0 0 12px; }
body.v3-site .gift-sec .how { color: var(--v3-body); opacity: 1; margin-bottom: 32px; }

body.v3-site :is(.phrase-card, .meeting-phrase, .meeting-scenario) { background: var(--v3-bg-2); border: 0; border-left: 2px solid var(--v3-accent); border-radius: 0; padding: 20px 24px; }
body.v3-site .phrase-card .en { font-size: 18px; line-height: 1.7; color: var(--v3-text); }
body.v3-site .guide-example { border-left: 2px solid var(--v3-accent); }
body.v3-site .ph-quick div { background: var(--v3-bg-2); border-radius: 0; border-left-color: var(--v3-accent); }
body.v3-site .tag { font-family: var(--serif); font-size: 12px; font-weight: 400; letter-spacing: .18em; color: var(--v3-accent-text); opacity: 1; }

/* numbered steps (rin-v3.css turns .steps into a wrapping flex row; restore the grid) */
body.v3-site .steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; counter-reset: st; background: transparent; border: 0; }
@media (min-width: 800px) { body.v3-site .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.v3-site .step { background: transparent; border: 0; border-top: 1px solid var(--v3-rule-2); border-radius: 0; box-shadow: none; padding: 30px 0 36px; }
body.v3-site .step:before { font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--v3-accent-text); opacity: 1; margin-bottom: 18px; }
body.v3-site .step h3 { font-size: 20px; font-weight: 600; line-height: 1.55; margin: 0 0 10px; }
body.v3-site .step p { color: var(--v3-body); opacity: 1; font-size: 15.5px; line-height: 1.95; }
body.v3-site .step:hover { transform: none; background: transparent; }

/* link chips (were pills) */
body.v3-site :is(.free-links, .ph-links) { gap: 10px; }
/* site-premium: :is(.tag,.item .cat,.ph-links a,.free-links a) is (0,3,1) */
body.v3-site.v3-site :is(.free-links a, .ph-links a) {
  border: 1px solid var(--v3-rule-2);
  border-radius: 0;
  background: transparent;
  color: var(--v3-text);
  padding: 11px 18px;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  box-shadow: none;
}
body.v3-site.v3-site :is(.free-links a, .ph-links a):hover { border-color: var(--v3-accent); background: var(--v3-accent-wash); }
body.v3-site :is(.free-h, .ph-other h2, .rel-guide h2, .tk-other h2) { font-size: 13px; font-weight: 400; letter-spacing: .2em; color: var(--v3-accent-text); margin: 56px 0 18px; }

/* ---------- 8. tables ---------- */
body.v3-site :is(.tk-table-wrap, .cmp-wrap) { border: 0; border-top: 1px solid var(--v3-text); border-radius: 0; background: transparent; box-shadow: none; }
body.v3-site :is(.tk-table, .cmp-table) { color: var(--v3-text); font-size: 15px; }
body.v3-site :is(.tk-table, .cmp-table) :is(th, td) { border-color: var(--v3-rule); padding: 16px 20px 16px 0; }
body.v3-site :is(.tk-table, .cmp-table) thead th { background: transparent; color: var(--v3-mute); font-family: var(--serif); font-size: 12px; font-weight: 400; letter-spacing: .16em; border-bottom: 1px solid var(--v3-rule-2); }
body.v3-site :is(.tk-table, .cmp-table) td { color: var(--v3-body); }
body.v3-site :is(.tk-table, .cmp-table) tr.tot td { color: var(--v3-text); font-weight: 600; border-top: 1px solid var(--v3-rule-2); }
body.v3-site .tk-table tbody tr:last-child td { border-bottom: 1px solid var(--v3-rule); }

/* ---------- 9. FAQ / disclosures ---------- */
body.v3-site .faq { gap: 0; border-top: 1px solid var(--v3-rule-2); max-width: 900px; }
body.v3-site .faq details { background: transparent; border: 0; border-bottom: 1px solid var(--v3-rule); border-radius: 0; box-shadow: none; }
body.v3-site .faq summary { padding: 24px 56px 24px 0; font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--v3-text); }
body.v3-site .faq summary:after { right: 4px; top: 22px; font-size: 24px; font-weight: 400; color: var(--v3-accent); }
body.v3-site .faq details[open] summary { border-bottom: 0; }
body.v3-site .faq .faq-body { padding: 0 56px 28px 0; color: var(--v3-body); opacity: 1; }
body.v3-site .faq .faq-body p { line-height: 2; }
body.v3-site :is(.meeting-detail, .guide-faq) { border-radius: 0; border-color: var(--v3-rule); }

/* ---------- 10. forms ---------- */
body.v3-site :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-family: var(--serif);
  border: 1px solid var(--v3-rule-2);
  border-radius: 0;
  background: var(--v3-input);
  box-shadow: none;
  color: var(--v3-text);
}
body.v3-site :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: var(--v3-accent); box-shadow: 0 0 0 3px var(--focus-ring); }
body.v3-site :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: #C08A3E; }
body.v3-site :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #C08A3E; outline-offset: 3px; }

/* ---------- 11. page families ---------- */
/* legal (特商法・プライバシー): one warm-white reading column */
body.v3-site main.legal { padding: 88px 0 112px; }
body.v3-site .legal .wrap > * { max-width: 760px; }
body.v3-site .legal h1 { font-size: clamp(32px, 3.4vw, 50px); }
body.v3-site .legal .note { background: var(--v3-accent-wash); border-left: 2px solid var(--v3-accent); border-radius: 0; color: var(--v3-body); opacity: 1; }
body.v3-site .legal dt { font-family: var(--serif); font-size: 12px; font-weight: 400; letter-spacing: .16em; color: var(--v3-accent-text); opacity: 1; margin-top: 0; padding-top: 22px; border-top: 1px solid var(--v3-rule); }
body.v3-site .legal dd { color: var(--v3-text); opacity: 1; margin: 6px 0 22px; line-height: 2; }
body.v3-site .legal h2 { font-size: 20px; font-weight: 600; border-top: 1px solid var(--v3-rule-2); padding-top: 22px; margin-top: 44px; }
body.v3-site .legal :is(p, li) { color: var(--v3-body); opacity: 1; line-height: 2; }
body.v3-site .legal .date { color: var(--v3-mute); opacity: 1; }

/* meeting guides: dark head, warm-white article body, dark closing block */
body.v3-site.meeting-page main { background: var(--v3-bg); color: var(--v3-text); padding-bottom: 32px; }
body.v3-site.meeting-page .meeting-hero {
  background: var(--v3-bg);
  border-image: linear-gradient(#0A0A0B, #0A0A0B) fill 0 / 0 / 0 100vmax; /* full-bleed dark band without widening the page */
  padding-top: 72px;
  padding-bottom: 72px;
  margin-bottom: 88px;
  color: var(--v3-text);
}
body.v3-site.meeting-page .meeting-hero h1 { font-size: clamp(34px, 4.1vw, 62px); font-weight: 600; line-height: 1.32; letter-spacing: 0; max-width: 20em; }
body.v3-site.meeting-page .meeting-answer { border-top: 1px solid var(--v3-accent); border-bottom: 1px solid var(--v3-rule-2); color: var(--v3-body); }
body.v3-site.meeting-page .meeting-toc { top: 32px; }
body.v3-site.meeting-page .meeting-toc > p { font-size: 12px; letter-spacing: .16em; color: var(--v3-accent-text); }
body.v3-site.meeting-page .meeting-prose { font-size: 16.5px; line-height: 2.05; }
body.v3-site.meeting-page .meeting-prose h2 { font-size: clamp(24px, 2.3vw, 34px); font-weight: 400; line-height: 1.5; }
body.v3-site.meeting-page .meeting-section { border-bottom-color: var(--v3-rule); }
body.v3-site.meeting-page .meeting-table-wrap { border: 0; border-top: 1px solid var(--v3-text); }
body.v3-site.meeting-page .meeting-table-wrap :is(caption, thead th) { background: transparent; }
body.v3-site.meeting-page .meeting-table-wrap caption { border-bottom-color: var(--v3-rule); padding-left: 0; }
body.v3-site.meeting-page .meeting-table-wrap :is(th, td) { border-bottom-color: var(--v3-rule); padding-left: 0; }
body.v3-site.meeting-page .meeting-end { background: var(--v3-bg); color: var(--v3-text); padding: 48px 44px 52px; margin-bottom: 72px; }
body.v3-site.meeting-page .meeting-end h2 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 400; color: var(--v3-text); }
body.v3-site.meeting-page .meeting-end p:not(.eyebrow) { color: var(--v3-body); }
body.v3-site.meeting-page .meeting-page-link { color: inherit; }

/* 発音チェック / 英語力診断: tool panels sit on warm white */
html body.v3-site :is(.hc-card, .sd-card) { background: var(--v3-bg); border: 1px solid var(--v3-rule-2); border-radius: 0; box-shadow: none; padding: 36px; }
:where(body.v3-site) .hc-filter { border-radius: 0; font-family: var(--serif); }
:where(body.v3-site) .hc-s { border-radius: 0; }
body.v3-site .hc-s .en { font-size: 17px; font-weight: 600; }
:where(body.v3-site) .hc-tag { font-family: var(--serif); border-radius: 0; letter-spacing: .08em; }
body.v3-site .hc-target { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.5; }
body.v3-site :is(.hc-score, .sd-score) { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
:where(body.v3-site) :is(.hc-verdict, .sd-lv) { border-radius: 0; font-family: var(--serif); }
:where(body.v3-site) :is(.sd-opt, .hc-w, .hc-ph, .hc-fbi, .hc-phdetail, .sd-gift, .sd-share, .sd-cta) { border-radius: 0; font-family: var(--serif); }
:where(body.v3-site) .sd-q { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.75; }
body.v3-site .sd-cta .btn { font-size: 16px; }

/* join (相談): hero keeps its structure, drops the photo wash for the v3 dark ground */
body.v3-site .hero {
  min-height: 0;
  padding: 88px 0 104px;
  background: radial-gradient(60% 80% at 85% 20%, rgba(192, 138, 62, .16), transparent 70%), #0A0A0B;
  border-bottom: 0;
}
body.v3-site .hero:before { display: none; }
body.v3-site .hero .wrap { width: 100%; }
body.v3-site .hero .display-xxl { font-size: clamp(44px, 6.2vw, 96px); line-height: 1.12; letter-spacing: 0; }
body.v3-site .hero .jp-head { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.6; }
body.v3-site :is(.consult-builder h2) { font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; }
body.v3-site :is(.consult-fields label, .consult-message-label) { color: var(--v3-text); font-size: 14px; letter-spacing: .04em; }
body.v3-site .consult-outcomes { padding-left: 0; }
body.v3-site .consult-outcomes li { border-bottom-color: var(--v3-rule); color: var(--v3-body); font-size: 15px; }

/* ---------- 12. page note (copy kept from the old footer) ---------- */
body.v3-site .v3-page-note { background: #0A0A0B; border-top: 1px solid rgba(245, 245, 242, .16); padding: 30px 0; color: #C4BFB4; font-size: 14px; line-height: 1.9; }
body.v3-site .v3-page-note .section-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
body.v3-site .v3-page-note p { margin: 0; color: #C4BFB4; }
body.v3-site .v3-page-note a { color: #F5F5F2; text-decoration: underline; text-decoration-color: #C08A3E; text-underline-offset: 5px; }

/* ---------- 13. responsive ---------- */
@media (max-width: 720px) {
  body.v3-site .section,
  body.v3-site .band { padding: 72px 0; }
  body.v3-site :is(.ph-head + .section, .free-head + .section, .hc-head + .section, .sd-head + .section, .gift-head + .gift-sec, .gift-sec + .section:not(.gift-sec), .gift-sec + .gift-sec) { padding-top: 64px !important; }
  body.v3-site :is(.tk-hero, .ph-head, .free-head, .gift-head, .sd-head, .hc-head) { padding: 40px 0 28px; }
  body.v3-site :is(.ph-head, .free-head, .gift-head, .sd-head, .hc-head) { padding-bottom: 64px; }
  body.v3-site .band-head { margin-bottom: 36px; }
  body.v3-site :is(.hc-card, .sd-card) { padding: 24px 20px; }
  body.v3-site .faq summary { font-size: 16.5px; padding-right: 44px; }
  body.v3-site .faq .faq-body { padding-right: 0; }
  body.v3-site :is(.free-more, .ph-cta, .gift-cta) { margin-top: 56px; }
  body.v3-site main.legal { padding: 56px 0 80px; }
  body.v3-site.meeting-page .meeting-hero { padding-top: 40px; padding-bottom: 48px; margin-bottom: 56px; }
  body.v3-site.meeting-page .meeting-end { padding: 36px 22px 40px; }
  body.v3-site .hero { padding: 56px 0 72px; }
  body.v3-site .cta-row .btn { width: 100%; }
}

/* 発音チェック on warm white: the page's error red (#d98b89) was tuned for a dark ground */
body.v3-site .hc-head + .section :is(.hc-w.bad, .hc-ph.low) { color: #A23A37; }
body.v3-site .hc-head + .section .hc-fb h3.imp::before { color: #A23A37; }
body.v3-site .hc-head + .section .hc-phlegend [style*="#d98b89"] { color: #A23A37 !important; }

/* ---------- 14. print (gift.html is printed as a handout; guides also print) ---------- */
@media print {
  body.v3-site,
  body.v3-site :is(.meeting-hero, .meeting-end, .v3-dark),
  body.v3-site :is(.section.soft, .band, main.legal, .ph-head + .section, .free-head + .section, .hc-head + .section, .sd-head + .section, .gift-head + .gift-sec, .gift-sec + .section:not(.gift-sec), .hero + .section, .v3-light),
  body.v3-site.meeting-page main {
    --v3-bg: #FFFFFF;
    --v3-bg-2: #FFFFFF;
    --v3-bg-3: #FFFFFF;
    --v3-text: #000000;
    --v3-body: #333333;
    --v3-mute: #555555;
    --v3-rule: #CCCCCC;
    --v3-rule-2: #999999;
    --v3-accent-text: #000000;
    --v3-accent-wash: transparent;
    --brass: #000000;
  }
  body.v3-site { background: #FFFFFF; color: #000000; }
  body.v3-site :is(.section, .band, .tk-hero, .ph-head, .free-head, .gift-head, .sd-head, .hc-head, .meeting-hero) { background: #FFFFFF !important; border-image: none; padding-top: 24px !important; padding-bottom: 24px; }
  body.v3-site :is(.skip, .header, .mega, .footer, .v3-page-note, dialog, .gift-cta) { display: none !important; }
}