/* QTUSKI — shared design system: ivory, forest, moonlight. */

:root {
  --ink:#202d25; --ink2:#38473d; --muted:#586359;
  --paper:#f6f3eb; --surface:#fffdf8; --subtle:#eaece2; --border:#dce0d3;
  --brand:#385443; --brand-dark:#253e30; --brand-bg:#e9eee4;
  --teal:var(--brand); --teal-bg:var(--brand-bg); --orange:#8b7953; --orange-bg:#f0eadb;
  --coral:#83594f; --coral-bg:#f1e8df; --blue:#667968; --blue-bg:#e7ece4;
  --gold:var(--brand); --gold-bg:var(--brand-bg); --gold-bd:var(--border);
  --font-serif:'Noto Serif JP',serif;
  --font-display:'Cormorant Garamond','Noto Serif JP',serif;
  --font-sans:'Noto Sans JP',sans-serif;
  --r-sm:6px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --max-w:820px; --side:1.5rem;
  --shadow-sm:0 2px 12px rgba(38,53,45,.03);
  --shadow-md:0 8px 28px rgba(38,53,45,.05);
  --shadow-lg:0 18px 48px rgba(38,53,45,.07);
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }

/* ── Layout ── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--side);
}

/* ── Site Header ── */
[data-beta-only][hidden], [data-beta-service][hidden], #betaAgeGate[hidden] { display:none !important; }
.beta-badge { font-size:.625rem; letter-spacing:.12em; color:var(--muted); margin-left:.55rem; margin-right:auto; }
.beta-footer { font-size:.75rem; color:var(--muted); margin-left:.5rem; }
.beta-age-gate { max-width:820px; margin:1.5rem auto; }
.beta-age-gate h2 { font-size:1.1rem; margin-bottom:1rem; }
.beta-age-check { display:flex; align-items:center; gap:.65rem; margin-bottom:1.25rem; }
.beta-age-check input { width:18px; height:18px; accent-color:var(--brand); }
.beta-age-gate .err { display:block; margin-top:.75rem; }
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
}
.site-logo span { color: var(--brand); }
.site-nav { display:flex; gap:1.75rem; align-items:center; }
.site-nav a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink2);
  transition: color .2s;
}
.site-nav a:hover { color: var(--brand); }
.site-nav .nav-cta {
  background: var(--brand);
  color: #fff;
  padding: .55rem 1.25rem;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.site-nav .nav-cta:hover { background: var(--brand-dark); color:#fff; }

/* ── Site Footer ── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 3rem var(--side);
  text-align: center;
  margin-top: 5rem;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .75rem;
  display: block;
}
.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-bottom: 1rem;
}
.footer-nav a { font-size: .875rem; color: var(--muted); font-weight: 500; }
.footer-nav a:hover { color: var(--brand); }
.footer-copy { font-size: .875rem; color: var(--muted); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 2rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .2s;
  text-align: center;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-outline {
  background: #fff;
  border: 2px solid var(--border);
  color: var(--ink2);
  font-size: .875rem;
  font-weight: 600;
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }

/* ── Card ── */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

/* ── Dark / Feature Card ── */
.card-dark {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-md);
}
.card-tag {
  font-size: .875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .85; margin-bottom: .75rem; display: block;
}
.card-body { font-size: 1rem; line-height: 1.9; }

/* ── Banner ── */
.banner-gold {
  background: var(--orange-bg);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.banner-label {
  font-size: .875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .5rem; display: block;
}
.banner-text { font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.8; }

/* ── CTA Card ── */
.cta-card {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  color: #fff;
  margin-top: 2rem;
}
.cta-eyebrow {
  font-size: .875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); opacity: .9;
  margin-bottom: .75rem; display: block;
}
.cta-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700; margin-bottom: .75rem; line-height: 1.5;
}
.cta-card p {
  font-size: .9rem; color: rgba(255,255,255,.65);
  line-height: 1.9; margin-bottom: 1.75rem;
}

/* ── Ad slot ── */
.ad-slot {
  min-height: 90px;
  background: var(--subtle);
  border: 2px dashed var(--border);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .875rem; margin: 1.5rem 0;
}

/* ── Section heading ── */
.sec-head {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  margin-bottom: 1.1rem;
}

/* ── Keyword chips (16p風カラフルタグ) ── */
.kw-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.kw-chip {
  padding: .4rem 1rem; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600;
}
.kw-chip:nth-child(5n+1) { background: var(--brand-bg);  color: var(--brand-dark); }
.kw-chip:nth-child(5n+2) { background: var(--teal-bg);   color: var(--brand-dark); }
.kw-chip:nth-child(5n+3) { background: var(--orange-bg); color: #79623f; }
.kw-chip:nth-child(5n+4) { background: var(--coral-bg);  color: #83594f; }
.kw-chip:nth-child(5n+5) { background: var(--blue-bg);   color: #4b6252; }

/* ── Strength / Weakness list ── */
.str-item {
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--brand-bg);
  margin-bottom: .85rem;
}
.str-item:last-child { margin-bottom: 0; }
.str-item.weak { background: var(--coral-bg); }
.str-title {
  font-size: .95rem; font-weight: 700; color: var(--ink);
  margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem;
}
.str-title::before {
  content: '★'; font-size: .875rem; color: var(--brand);
}
.wk-title::before { content: '!'; color: var(--coral); font-weight:700; }
.str-body { font-size: .875rem; line-height: 1.85; color: var(--ink2); }

/* ── Section body text ── */
.sec-body { font-size: .92rem; line-height: 1.95; color: var(--ink2); }

/* ── Trait bars（16p風の軸バー：PCは2カラム表示）── */
#rTraits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.75rem;
}
.trait-row { margin-bottom: 0; }
.trait-labels { display:flex; justify-content:space-between; font-size:.875rem; font-weight:600; color:var(--ink2); margin-bottom:.5rem; }
.trait-track { height:10px; background:var(--subtle); border-radius:var(--r-pill); overflow:hidden; }
.trait-fill  { height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--brand), var(--blue)); }

/* ── Phase grid ── */
.phase-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.85rem; }
.phase-card {
  background: var(--subtle); border-radius: var(--r-md);
  padding: 1.1rem; text-align: center;
}
.ph-label { font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; display:block; margin-bottom:.5rem; }
.ph-title { font-family:var(--font-display); font-size:.92rem; font-weight:700; color:var(--brand-dark); margin-bottom:.4rem; }
.ph-desc  { font-size:.875rem; color:var(--ink2); line-height:1.75; }

/* ── Trust badges ── */
.trust-row { display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.tbadge {
  padding:.4rem 1rem; border-radius:var(--r-pill); font-size:.875rem; font-weight:600;
  background:var(--surface); color:var(--ink2); box-shadow:var(--shadow-sm);
}

/* ── Loading ── */
.loading { display:none; text-align:center; padding:4rem 0; }
.loading.on { display:block; }
.spin-ring {
  width:52px; height:52px; margin:0 auto 1.5rem;
  border:4px solid var(--subtle); border-top-color:var(--brand);
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.load-msg  { font-size:.9rem; font-weight:600; color:var(--ink2); }
.load-sub  { font-size:.875rem; color:var(--muted); margin-top:.4rem; }

/* ── Result ── */
.result { display:none; }
.result.on { display:block; animation:rise .6s ease both; }
@keyframes rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

.result-hero { text-align:center; padding:1.5rem 0 1.5rem; }
.r-emoji   {
  font-size:3.5rem; display:inline-flex; align-items:center; justify-content:center;
  width:96px; height:96px; border-radius:50%; background:var(--brand-bg);
  margin-bottom:1rem; box-shadow: var(--shadow-sm);
}
.r-archetype {
  font-family:var(--font-display); font-size:1.7rem; font-weight:700;
  color: var(--ink); margin-bottom:.5rem;
}
.r-tagline { font-size:.95rem; color:var(--ink2); line-height:1.9; max-width:520px; margin:0 auto; }

/* ── Error ── */
.err {
  display:none; font-size:.875rem; font-weight:600; color:#d63447;
  text-align:center; margin-bottom:.75rem; padding:.75rem;
  background:var(--coral-bg); border-radius:var(--r-sm);
}
.err.on { display:block; }
.diagnosis-page #errMsg { white-space:pre-line; }

/* ── Form ── */
.form-lead { font-size:.88rem; color:var(--muted); line-height:1.8; margin-bottom:1.5rem; text-align:left; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.field label { display:block; font-size:.875rem; font-weight:600; color:var(--ink2); margin-bottom:.5rem; }
.field input, .field select {
  width:100%; padding:.85rem 1.1rem;
  background:var(--paper); border:2px solid var(--border);
  border-radius:var(--r-sm); font-family:var(--font-sans);
  font-size:.95rem; color:var(--ink); outline:none;
  transition:border-color .2s; appearance:none;
}
.field input:focus, .field select:focus { border-color:var(--brand); }
.g-row { display:flex; gap:.6rem; }
.g-btn {
  flex:1; padding:.75rem; border:2px solid var(--border);
  border-radius:var(--r-sm); background:var(--paper);
  font-family:var(--font-sans); font-size:.88rem; font-weight:600;
  color:var(--muted); cursor:pointer; transition:all .2s;
}
.g-btn.on { background:var(--brand-bg); border-color:var(--brand); color:var(--brand-dark); }
.privacy-note { font-size:.875rem; color:var(--muted); text-align:left; margin-top:1rem; line-height:1.8; }

/* ── Page hero ── */
.page-hero { text-align:left; padding:4rem 0 2rem; }
.page-hero h1 {
  font-family:var(--font-display); font-size:2rem;
  font-weight:700; color:var(--ink); margin-bottom:.6rem;
}
.page-hero p { font-size:.92rem; color:var(--muted); line-height:1.85; }

/* ── Prose ── */
.prose h2 {
  font-family:var(--font-display); font-size:1.2rem;
  font-weight:700; color:var(--ink); margin:2rem 0 .85rem;
}
.prose p { font-size:.92rem; line-height:2; color:var(--ink2); margin-bottom:1rem; }
.prose ul { padding-left:1.5rem; margin-bottom:1rem; }
.prose li { font-size:.92rem; line-height:1.9; color:var(--ink2); margin-bottom:.35rem; }

/* ── Chat UI（有料相談用）── */
.chat-shell {
  display: flex; flex-direction: column;
  height: calc(100vh - 140px);
  max-height: 720px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.chat-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.chat-header-title { font-family:var(--font-display); font-weight:700; font-size:1rem; }
.chat-credit {
  font-size: .875rem; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-bg); padding: .35rem .85rem; border-radius: var(--r-pill);
}
.chat-body {
  flex: 1; overflow-y: auto; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.msg { max-width: 78%; padding: .8rem 1.1rem; border-radius: var(--r-md); font-size: .9rem; line-height: 1.7; }
.msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai   { align-self: flex-start; background: var(--subtle); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.system {
  align-self: center; background: var(--orange-bg); color: #79623f;
  font-size: .875rem; font-weight: 600; padding: .6rem 1rem;
}
.chat-input-row {
  display: flex; gap: .75rem; padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}
.chat-input-row input {
  flex: 1; padding: .85rem 1.1rem; border: 2px solid var(--border);
  border-radius: var(--r-pill); font-family: var(--font-sans); font-size: .9rem; outline: none;
}
.chat-input-row input:focus { border-color: var(--brand); }
.chat-send-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--brand); color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-send-btn:disabled { opacity: .4; cursor: not-allowed; }
.chat-typing { align-self: flex-start; display:flex; gap:.3rem; padding:.9rem 1.1rem; }
.chat-typing span {
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation: typing 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay:.2s; }
.chat-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes typing { 0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);} }

.paywall-card {
  text-align: center; padding: 2rem 1.5rem;
  background: var(--brand-bg); border-radius: var(--r-lg); margin: 1rem 1.5rem;
}
.paywall-card h3 { font-family:var(--font-display); font-weight:700; margin-bottom:.5rem; color: var(--ink); }
.paywall-card p { font-size:.875rem; color:var(--ink2); margin-bottom:1.25rem; line-height:1.8; }
.credit-plans { display:grid; gap:.6rem; margin-bottom:1rem; }
.credit-plan {
  display:flex; justify-content:space-between; align-items:center;
  background:#fff; padding:.9rem 1.1rem; border-radius:var(--r-md);
  border:2px solid var(--border); cursor:pointer; transition:border-color .2s;
}
.credit-plan:hover { border-color: var(--brand); }
.credit-plan-name { font-weight:700; font-size:.88rem; }
.credit-plan-sub { font-size:.875rem; color:var(--muted); }
.credit-plan-price { font-weight:700; color:var(--brand-dark); }

/* ── Responsive ── */
@media (max-width: 540px) {
  #rTraits     { grid-template-columns: 1fr; gap: 1rem; }
  .form-grid   { grid-template-columns: 1fr; }
  .phase-grid  { grid-template-columns: 1fr; }
  .site-nav a:not(.nav-cta) { display: none; }
  .site-nav .nav-cta { padding: .45rem 1rem; font-size: .875rem; }
  .r-archetype { font-size: 1.4rem; }
  .chat-shell  { height: calc(100vh - 110px); border-radius: 0; }
}


/* ── Chat accessibility and responsive controls ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.chat-notice { max-width:760px; margin:1rem auto 0; color:var(--muted); text-align:center; font-size:.875rem; line-height:1.8; }
.chat-demo-note { font-size:.875rem !important; margin-bottom:0 !important; }
.credit-plan { width:100%; text-align:left; font-family:var(--font-sans); cursor:pointer; }
.credit-plan:focus-visible, .chat-send-btn:focus-visible, .chat-input-row input:focus-visible { outline:3px solid rgba(56,84,67,.35); outline-offset:2px; }
.cta-card .btn-outline { width:auto; color:#fff; border-color:rgba(255,255,255,.35); background:transparent; }
.cta-card .btn-outline:hover { color:#fff; border-color:#fff; }
#traitCard[hidden] { display:none; }
@media (max-width: 540px) { .chat-notice { padding:0 .75rem; } .chat-input-row { padding:.75rem; gap:.5rem; } .chat-body { padding:1rem; } }

/* ── Shared legacy markup, restyled with the refreshed palette ── */
.btn-gold {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover { background: var(--brand-dark); transform: translateY(-1px); }
.logo-dots { display:flex; align-items:center; gap:.35rem; margin-bottom:.75rem; }
.ldot { width:.45rem; height:.45rem; border-radius:50%; background:var(--brand); }
.ldot:nth-child(2) { background:var(--teal); }
.ldot:nth-child(3) { background:var(--orange); }
.rule { display:flex; align-items:center; gap:.75rem; margin:1.5rem 0; }
.rule::before, .rule::after { content:''; flex:1; height:1px; background:var(--border); }
.rule span { color:var(--brand); font-size:.875rem; }


/* ── V2: 認証カード・5問・配信設定（チャット内のフォーム用）── */
.auth-card { align-self:stretch; max-width:100%; background:var(--brand-bg); color:var(--ink); border-radius:var(--r-md);
  padding:1.1rem 1.25rem; font-size:.9rem; line-height:1.75; font-weight:400; text-align:left; }
.auth-card h3 { font-family:var(--font-display); font-size:1rem; margin-bottom:.4rem; }
.auth-card p { margin:.4rem 0; }
.auth-card legend { font-weight:700; padding:0 .25rem 0 0; }
.auth-card fieldset label { display:block; margin:.55rem 0; cursor:pointer; }
.auth-input { display:block; width:100%; max-width:360px; margin:.6rem 0; padding:.75rem 1rem; border:2px solid var(--border);
  border-radius:var(--r-sm); font-family:var(--font-sans); font-size:.95rem; background:#fff; color:var(--ink); }
.auth-input:focus { outline:none; border-color:var(--brand); }
.auth-check { display:block; margin:.75rem 0; font-size:.875rem; color:var(--ink2); }
.auth-btn { width:auto; padding:.7rem 1.5rem; font-size:.9rem; margin:.25rem .5rem .25rem 0; box-shadow:none; }
.auth-legal { font-size:.875rem; color:var(--muted); }
.auth-legal a { text-decoration:underline; color:var(--brand-dark); }
.auth-card [role="alert"] { color:#d63447; font-weight:600; font-size:.875rem; }
#accountBadge { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--muted); flex-wrap:wrap; }
#accountBadge button { border:1px solid var(--border); background:#fff; border-radius:var(--r-pill); padding:.15rem .6rem; cursor:pointer; color:var(--ink2); }

/* Brand layout shared by every page. */
body { line-height:1.9; }
h1,h2,h3 { font-weight:500; }
p { overflow-wrap:anywhere; }
:focus-visible { outline:3px solid #8c9b77; outline-offset:4px; }
.skip-link { position:fixed; top:-100px; left:1rem; z-index:300; padding:.5rem 1rem; background:var(--surface); }
.skip-link:focus { top:.5rem; }
.site-header { background:rgba(246,243,235,.96); }
.site-header .inner { max-width:1240px; min-height:84px; padding:1rem 2rem; }
.site-logo { display:flex; align-items:center; gap:.7rem; font-size:2rem; letter-spacing:.08em; font-weight:500; }
.logo-moon { width:15px; height:15px; border-radius:50%; box-shadow:inset 5px -1px 0 #a69b6a; transform:rotate(-20deg); }
.site-nav { gap:1.6rem; }
.site-nav a { font-size:.875rem; }
.site-nav .nav-cta { padding:.65rem 1.25rem; font-weight:500; }
.mobile-nav { display:none; }
.btn { font-weight:500; gap:1.5rem; padding:1rem 1.7rem; font-size:.9rem; box-shadow:none; }
.btn-primary,.btn-gold { background:var(--brand); box-shadow:none; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-outline { background:transparent; border:1px solid var(--brand); color:var(--brand); }
.card { padding:2rem; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.wide-wrap { max-width:1240px; margin:auto; padding:0 2rem; }
.home-hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:5rem; padding:5.5rem 0 6rem; }
.eyebrow,.section-number { font-family:var(--font-sans); font-size:.875rem; letter-spacing:.18em; color:var(--muted); }
.hero-wordmark { font-family:var(--font-display); font-size:clamp(3.3rem,6vw,5.3rem); line-height:1.1; letter-spacing:.08em; margin:1.7rem 0 .3rem; }
.hero-tagline { font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--muted); margin-bottom:2.1rem; }
.hero-copy h1 { font-family:var(--font-serif); font-size:clamp(1.55rem,2.7vw,2.2rem); letter-spacing:.07em; margin-bottom:1.8rem; }
.hero-description { max-width:510px; font-size:.875rem; color:var(--ink2); line-height:2.1; margin-bottom:2rem; }
.hero-description p { margin:.75rem 0; }
.cta-caption { font-family:var(--font-display); font-size:1.08rem; margin-top:.6rem; color:var(--muted); }
.cta-caption span { font-family:var(--font-sans); font-size:.875rem; margin-left:1rem; }
.moon-landscape { max-width:450px; justify-self:end; position:relative; width:100%; }
.moon-landscape svg { width:100%; display:block; }
.landscape-caption { display:block; text-align:center; font-size:.875rem; letter-spacing:.17em; color:var(--muted); margin-top:1.5rem; }
.home-section { padding:5rem 0; border-top:1px solid var(--border); }
.section-heading { margin-bottom:2.7rem; }
.home-section h2 { font-family:var(--font-serif); font-size:clamp(1.35rem,2.8vw,2rem); line-height:1.65; margin:.8rem 0 1rem; }
.section-heading p:not(.eyebrow),.home-section>p:not(.eyebrow):not(.cta-caption) { color:var(--ink2); font-size:.88rem; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.feature-panel { display:block; padding:2.8rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); }
a.feature-panel { transition:background .2s,border-color .2s; }
a.feature-panel:hover { background:var(--brand-bg); border-color:#a7b89b; }
.feature-panel h3,.feature-panel h2 { font-family:var(--font-serif); font-size:1.35rem; margin:1.4rem 0 1.1rem; }
.feature-panel p { font-size:.875rem; color:var(--ink2); line-height:2; }
.text-link { display:inline-block; font-size:.875rem; font-weight:500; color:var(--brand); border-bottom:1px solid #a9b69d; margin-top:1.5rem; padding-bottom:.25rem; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.step-index { font-family:var(--font-display); color:#8a966f; font-size:2.5rem; }
.steps-grid h3 { font-family:var(--font-serif); font-size:1.1rem; margin:.6rem 0; }
.steps-grid p { font-size:.875rem; color:var(--ink2); }
.insight-section { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.insight-section>div>p:not(.eyebrow) { font-size:.875rem; color:var(--ink2); }
.insight-example { padding:2.5rem; background:var(--brand-bg); border-radius:var(--r-lg); }
.insight-example h3 { font-family:var(--font-serif); font-size:1.2rem; margin:1rem 0; }
.example-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0; }
.example-tags span { font-size:.875rem; border:1px solid #c3cdb9; border-radius:30px; padding:.25rem .7rem; }
.small-note { font-size:.875rem!important; color:var(--muted); line-height:1.9; margin-top:1.1rem; }
.dialogue-section { text-align:left; }
.story-teaser { padding-left:7%; background:radial-gradient(ellipse at 88% 50%,#e8e7d5 0,transparent 52%); }
.story-teaser h2 { font-size:3rem; }
.final-cta { text-align:center; padding:6rem 0; }
.final-cta .btn { margin-top:1.5rem; }
.site-footer { padding:3.5rem 2rem 1.5rem; margin-top:2rem; background:#eaece2; }
.footer-inner { max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr 1.3fr; gap:4rem; text-align:left; }
.footer-logo { font-size:2.1rem; letter-spacing:.07em; font-weight:500; }
.footer-tagline { font-family:var(--font-display); font-style:italic; font-size:1.15rem; }
.footer-description { color:var(--muted); font-size:.875rem; margin-top:.8rem; }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); align-content:start; gap:.8rem 1.2rem; }
.footer-nav a { color:var(--ink2); font-size:.875rem; }
.footer-copy { padding-top:2rem; margin-top:2.5rem; border-top:1px solid #d4d9ca; font-size:.875rem; letter-spacing:.08em; }
.page-content { padding-top:4rem; padding-bottom:5rem; }
.page-hero { padding:1.5rem 0 3rem; }
.page-hero h1 { font-family:var(--font-serif); font-size:clamp(1.7rem,4vw,2.5rem); font-weight:500; letter-spacing:.06em; margin:1rem 0; }
.page-hero>p:not(.eyebrow) { color:var(--muted); font-size:.88rem; }
.prose { max-width:720px; margin:auto; }
.prose h2 { font-family:var(--font-serif); font-size:1.15rem; margin:2.7rem 0 1rem; }
.prose p,.prose li { font-size:.875rem; line-height:2.15; margin:.9rem 0; color:var(--ink2); }
.prose a:not(.text-link) { text-decoration:underline; text-underline-offset:3px; }
.page-actions { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; margin-top:3rem; }
.page-actions .text-link { margin:0; }
.story-prose { max-width:620px; margin:auto; }
.story-prose p { font-family:var(--font-serif); font-size:.95rem; line-height:2.3; margin:2rem 0; }
.story-prose strong { font-weight:500; }
.story-source { max-width:620px; margin:3rem auto; border-top:1px solid var(--border); padding-top:1.5rem; font-size:.875rem; color:var(--muted); }
.story-source a { text-decoration:underline; }
.plans-grid .feature-panel { padding:2rem; }
.plan-price { font-family:var(--font-serif); font-size:1.7rem!important; color:var(--brand)!important; margin:.8rem 0; }
.plans-grid .btn { margin-top:1.5rem; }
.faq-list details { border-top:1px solid var(--border); }
.faq-list details:last-child { border-bottom:1px solid var(--border); }
.faq-list summary { font-size:.93rem; padding:1.3rem .5rem; cursor:pointer; }
.faq-list p { padding:0 1.5rem 1.5rem; font-size:.875rem; color:var(--ink2); }
.kw-chip,.kw-chip:nth-child(n) { background:var(--brand-bg); color:var(--brand-dark); font-weight:400; }
.sec-head { font-family:var(--font-serif); font-size:1.05rem; font-weight:500; }
.result-hero { background:var(--brand-bg); border:1px solid var(--border); padding:2rem 1.5rem; border-radius:var(--r-lg); margin-bottom:1.5rem; }
.r-archetype { font-family:var(--font-serif); font-weight:500; }
.result-subheading { font-size:.875rem; margin:1.5rem 0 .75rem; }
.field-hint { font-size:.875rem; color:var(--muted); margin-bottom:.5rem; }
#rTraits { display:grid; grid-template-columns:1fr; gap:1.7rem; }
.trait-labels { font-size:.875rem; margin-bottom:.65rem; }
.trait-labels strong { font-weight:500; font-size:1.05rem; }
.trait-scale { height:18px; display:flex; gap:6px; }
.trait-band { height:100%; flex:1; border-radius:6px; position:relative; }
.trait-band.low { background:#dedbce; }
.trait-band.standard { background:#aebd9f; }
.trait-band.high { background:#688164; }
.trait-band.neutral { background:var(--border); border-radius:6px; }
.trait-scale-labels { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:.6rem; font-size:.875rem; text-align:center; color:var(--muted); }
.trait-scale-labels .is-active { color:var(--ink); font-weight:600; }
.trait-band.is-active { outline:2px solid var(--brand-dark); outline-offset:2px; }
.trait-band.is-active::after { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--surface); }
.trait-score { font-variant-numeric:tabular-nums; white-space:nowrap; }
.trait-score strong { font-size:1.5rem; font-weight:600; }
.trait-score-unit { font-size:.875rem; color:var(--muted); }
.chat-shell { box-shadow:var(--shadow-md); height:680px; max-height:calc(100dvh - 130px); }
.chat-header { background:var(--surface); }
.chat-header-title { font-family:var(--font-serif); font-size:1rem; font-weight:500; }
.msg.ai { background:var(--brand-bg); }
.auth-card { padding:1.5rem; }
.auth-card h3 { font-family:var(--font-serif); }
.g-btn.on { background:var(--brand); border-color:var(--brand); color:#fff; }
@media(max-width:900px) {
  .site-nav { display:none; }
  .mobile-nav { display:block; position:relative; font-size:.875rem; }
  .mobile-nav summary { cursor:pointer; padding:.4rem .7rem; }
  .mobile-nav nav { position:absolute; top:3rem; right:0; min-width:230px; padding:1.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-md); }
  .mobile-nav nav a { display:block; margin:.6rem 0; }
  .home-hero { gap:2.5rem; padding:3.5rem 0 4rem; }
  .hero-description { font-size:.875rem; }
  .feature-panel { padding:2rem; }
  .insight-section { gap:2rem; }
}
@media(max-width:600px) {
  :root { --side:1.2rem; }
  .site-header .inner { min-height:70px; padding:.8rem 1.2rem; }
  .site-logo { font-size:1.7rem; }
  .wide-wrap { padding:0 1.4rem; }
  .home-hero { grid-template-columns:1fr; gap:2.5rem; padding-top:2.5rem; }
  .hero-copy .eyebrow { font-size:.875rem; }
  .hero-wordmark { font-size:4rem; }
  .hero-description { font-size:.875rem; }
  .moon-landscape { max-width:300px; justify-self:center; }
  .moon-landscape svg { max-height:320px; }
  .feature-grid,.steps-grid,.insight-section,.footer-inner { grid-template-columns:1fr; }
  .home-section { padding:3rem 0; }
  .steps-grid { gap:1.8rem; }
  .feature-panel { padding:1.8rem; }
  .feature-panel h3 { font-size:1.15rem; }
  .insight-example { padding:1.8rem; }
  .story-teaser { padding-left:0; }
  .footer-inner { gap:2rem; }
  .footer-nav { grid-template-columns:1fr 1fr; }
  .site-footer { padding:2.5rem 1.4rem 1.5rem; }
  .card { padding:1.5rem; }
  .chat-shell { height:680px; max-height:calc(100dvh - 115px); border-radius:var(--r-md); }
  .chat-notice { text-align:left; font-size:.875rem; }
  .page-content { padding-top:2rem; }
  .page-hero h1 { font-size:1.75rem; }
}
/* Readable body copy; centered alignment is reserved for short display headings. */
h1,h2,h3,.sec-head,.r-archetype,.prose h2,.feature-panel h2,.feature-panel h3,
.home-section h2,.hero-copy h1,.page-hero h1,.steps-grid h3,.insight-example h3 { font-family:var(--font-sans); font-weight:600; }
.hero-description,.section-heading p:not(.eyebrow),.home-section>p:not(.eyebrow):not(.cta-caption),
.feature-panel p,.steps-grid p,.insight-section>div>p:not(.eyebrow),.prose p,.prose li,
.story-prose p,.faq-list p,.sec-body,.str-body,.r-tagline,.form-lead,.msg,.auth-card { font-size:1.0625rem; line-height:1.9; }
.hero-description { max-width:560px; }
.small-note,.field-hint,.privacy-note,.chat-notice,.auth-legal,.cta-note { font-size:.9375rem!important; line-height:1.8; }
.btn,.g-btn,.auth-input,.field input,.field select,.chat-input-row input { font-size:1rem; }
.site-nav a,.footer-nav a { font-size:.9375rem; }
.page-hero>p:not(.eyebrow) { font-size:1.0625rem; }
.prose,.story-prose { max-width:740px; }
.story-prose p { font-family:var(--font-sans); }
.final-cta>p:not(.eyebrow),.cta-card>p { text-align:left; max-width:620px; margin-left:auto; margin-right:auto; }
.cta-card p { color:#f0f2eb; }
.cta-eyebrow { color:#d6dece; opacity:1; }
.banner-gold,.r-tagline,.chat-notice { text-align:left; }
.chat-notice p { margin:.75rem 0; }
.diagnosis-hero { text-align:center; margin-bottom:2.5rem; }
.diagnosis-title { font-size:2.25rem; letter-spacing:.06em; margin-bottom:.5rem; }
.diagnosis-description { text-align:left; font-size:1.0625rem; line-height:1.9; color:var(--ink2); max-width:620px; margin:auto; }
.form-grid { gap:1.25rem; align-items:start; margin-bottom:.75rem; }
.field { min-width:0; }
.field label { font-size:1rem; }
.field input,.field select,.g-btn { height:56px; padding:.75rem .85rem; }
.field input[type=date] { display:block; min-width:0; line-height:1.5; }
.g-row { gap:.5rem; }
.g-btn { min-width:0; color:var(--ink2); }
.field-hint { margin:0 0 1.25rem; }
.sec-head { font-size:1.25rem; }
.result-subheading,.str-title { font-size:1.0625rem; }
.trait-labels { font-size:1.0625rem; align-items:baseline; }
#accountBadge,#accountBadge button { font-size:.875rem!important; }
#accountBadge button { padding:.3rem .7rem; }
.chat-header { flex-wrap:wrap; gap:.5rem; }
.auth-card button:not(.btn) { font:inherit; padding:.5rem 1rem; }
.auth-card input[type=checkbox],.auth-card input[type=radio] { width:18px; height:18px; vertical-align:middle; margin-right:.35rem; accent-color:var(--brand); }
@media(max-width:600px) {
  body { font-size:16px; }
  .hero-description,.section-heading p:not(.eyebrow),.home-section>p:not(.eyebrow):not(.cta-caption),
  .feature-panel p,.steps-grid p,.insight-section>div>p:not(.eyebrow),.prose p,.prose li,
  .story-prose p,.faq-list p,.sec-body,.str-body,.r-tagline,.form-lead,.msg,.auth-card { font-size:1rem; }
  .trait-scale-labels { font-size:.8125rem; }
  .g-btn { padding:.75rem .5rem; }
  .form-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Current secondary-page copy and shared navigation, unchanged for phase 1. */
.page-actions .btn { width:auto; max-width:100%; }
.copy-section+.copy-section { margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--border); }
.copy-section h2:first-child,.copy-section .eyebrow+h2 { margin-top:.7rem; }
.prose h2 { line-height:1.65; }
.about-prose h3 { margin:2.5rem 0 .8rem; font-size:.9375rem; letter-spacing:.13em; color:var(--muted); }
.service-notes { margin-top:2rem; }
.service-notes p { font-size:.9375rem; color:var(--muted); }
.diagnosis-subtitle { font-size:clamp(1.2rem,3vw,1.5rem); margin:0 0 1.5rem; }
.diagnosis-description p { margin:1rem 0; }
.result-label { font-size:.9375rem; color:var(--muted); font-weight:500; margin:0 0 .65rem; text-align:left; }
.result-hero .r-emoji { text-align:center; }
.result-hero .r-archetype { text-align:left; margin-bottom:1.7rem; }
.result-keywords { margin-bottom:2rem; }
.r-tagline,.sec-body,.str-body,.banner-text { white-space:pre-line; }
.trait-explanation { margin-bottom:2rem; }
.trait-explanation p { font-size:1rem; line-height:1.9; margin:.85rem 0; color:var(--ink2); }
.faq-category { margin-bottom:3rem; }
.faq-category>h2 { font-size:1.25rem; margin-bottom:1rem; }
.faq-list summary { font-weight:500; line-height:1.8; }
.faq-answer { padding:.25rem 1.5rem 1.5rem; }
.faq-list .faq-answer p { padding:0; margin:.85rem 0; }
.faq-answer .text-link { margin-top:.25rem; }
.footer-inner { grid-template-columns:minmax(200px,1fr) minmax(0,2fr); gap:3rem; }
.footer-nav { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.footer-heading { font-size:.875rem; font-weight:600; margin:0 0 1rem; color:var(--ink); }
.footer-group a { display:block; margin:.7rem 0; }
@media(max-width:900px) {
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
}
@media(max-width:600px) {
  .copy-section+.copy-section { margin-top:2.5rem; padding-top:1.5rem; }
  .page-actions { flex-direction:column; align-items:flex-start; gap:1rem; }
  .faq-answer { padding:.25rem .5rem 1rem; }
  .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-group:last-child { grid-column:1 / -1; }
}

/* Five-section home: A HERO and closing, with B cards and steps. */
.home .hero-copy { min-width:0; text-align:center; }
.home .hero-copy h1 { font-size:clamp(1.4rem,2.5vw,2rem); letter-spacing:.035em; }
.home .hero-description { margin:0 auto; text-align:center; text-wrap:pretty; }
.home .hero-description p { margin:1.2rem 0; text-wrap:balance; }
.home .hero-emphasis { margin:2rem 0 2.7rem; font-size:clamp(1.0625rem,1.6vw,1.25rem); line-height:1.9; text-wrap:pretty; }
.home .hero-emphasis strong { display:block; font-weight:600; }
.home .hero-copy .btn { width:auto; max-width:100%; }
.home .hero-copy .cta-caption span { display:block; margin:.25rem 0 0; }
.home .story-teaser .section-copy { max-width:740px; }
.home .story-teaser .section-copy p:not(.eyebrow) { font-size:1.0625rem; line-height:1.9; color:var(--ink2); margin:1.1rem 0; text-wrap:pretty; }
.home .story-teaser .section-copy .eyebrow { margin-bottom:1rem; }
.home .final-cta .btn { width:auto; max-width:100%; }
.home .final-cta>p:not(.eyebrow) { text-align:center; }
@media(max-width:900px) {
  .home .home-hero { gap:2rem; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
}
@media(max-width:600px) {
  .home .home-hero { grid-template-columns:1fr; }
  .home .hero-emphasis { font-size:1.0625rem; margin:1.75rem 0 2.25rem; }
  .home .story-teaser .section-copy p:not(.eyebrow) { font-size:1rem; }
  .home .story-teaser h2 { font-size:1.35rem; }
}

/* Diagnosis only: restore the earlier result hero's title/body hierarchy. */
.diagnosis-page .diagnosis-description { text-align:center; text-wrap:balance; }
.diagnosis-page #result { scroll-margin-top:100px; }
.diagnosis-page .result-hero .r-emoji { width:64px; height:64px; font-size:2.25rem; margin-bottom:.75rem; }
.diagnosis-page .result-hero .r-archetype { text-align:center; max-width:36rem; margin:0 auto .75rem; line-height:1.5; text-wrap:balance; }
.diagnosis-page .result-hero .r-tagline { max-width:36rem; }
.diagnosis-page .result-keywords { margin-bottom:1.5rem; }
.diagnosis-page .preview-note { text-align:center; margin:0 0 1rem; }
@media(max-width:600px) {
  .diagnosis-page .diagnosis-description { font-size:1rem; }
  .diagnosis-page #result { scroll-margin-top:80px; }
  .diagnosis-page .result-hero { padding:1.5rem 1.25rem; }
  .diagnosis-page .result-hero .r-emoji { width:56px; height:56px; font-size:1.875rem; }
  .diagnosis-page .result-hero .r-archetype { font-size:1.5rem; }
}

/* Scoped page hierarchy: keep the home HERO, story and plans unchanged. */
.content-page .page-hero h1,
.contact-page .page-hero h1 { line-height:1.5; text-wrap:balance; }
.content-page .prose h2 { font-size:1.375rem; line-height:1.6; text-wrap:balance; }
.content-page .faq-list summary { font-size:1.0625rem; }
.home .feature-panel h3 { text-wrap:balance; }
@media(max-width:600px) {
  .content-page .prose h2 { font-size:1.25rem; }
  .content-page .faq-list summary { font-size:1rem; }
}
@media(max-width:380px) {
  .home .feature-panel { padding:1.5rem; }
}
.diagnosis-page .gender-label-row { display: flex; align-items: baseline; gap: .4rem; }
.diagnosis-page .gender-info { display: inline-block; position: relative; }
.diagnosis-page .gender-info summary { display: inline-block; cursor: pointer; padding: .2rem .4rem; list-style: none; }
.diagnosis-page .gender-info summary::-webkit-details-marker { display: none; }
.diagnosis-page .gender-info p { position: absolute; z-index: 3; left: 0; width: min(270px, 70vw); padding: .8rem; margin: .2rem 0; background: #faf8f0; color: #263d34; border: 1px solid #d2d8d0; border-radius: .5rem; box-shadow: 0 4px 12px #0001; font-size: .875rem; line-height: 1.7; }
.diagnosis-page .trait-labels { position: relative; }
.diagnosis-page .trait-name { display: inline-flex; align-items: baseline; gap: .25rem; }
.diagnosis-page .trait-info { position: static; }
.diagnosis-page .trait-info p { top: 100%; width: min(270px, 100%); font-weight: 400; }
/* Inline links remain recognizable without relying on color alone. */
main p a:not(.btn), main dd a:not(.btn), .faq-answer a {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
main a:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 4px; }