/* SophiaReal — Phase 10 Step 10-4
   Extracted from V118_phase7_working.html.
   Responsibility: global tokens, reset, typography and layout primitives only.
   Do not add page-specific selectors here. */
:root{--white:#FFFFFF;
  --cream:#F4F7F8;
  --warm:#F5F1EA;
  --warm-line:#E6DED3;
  --cyan:#6CDDF5;
  --cyan-deep:#0B7C93;
  --ink:#111111;
  --muted:#63676A;
  --line:#E1E6E8;
  --line-strong:#C8D0D3;
  --r:8px;
  --max:1280px;
  --sans:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9;font-feature-settings:"palt" 1;letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block;max-width:100%}
::selection{background:var(--cyan);color:var(--ink)}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
main{min-height:60vh}
.s{padding:104px 0;border-top:1px solid var(--line)}
.s-white{background:var(--white)}
.s-cream{background:var(--cream);border-top-color:var(--cream)}
.s-ink{background:var(--ink);color:#F2F2F0;border-top-color:var(--ink)}
.s-ink .num,.s-ink .lead,.s-ink p{color:#B4B8B5}
.s-ink .sec-title,.s-ink h3,.s-ink strong{color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:940px}
.num{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--muted);display:block;margin-bottom:22px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
h1.hero{font-size:clamp(33px,4.9vw,64px);font-weight:900;line-height:1.26;letter-spacing:-.03em;text-wrap:balance;word-break:auto-phrase}
h1.page{font-size:clamp(28px,4vw,52px);font-weight:900;line-height:1.3;letter-spacing:-.028em;text-wrap:balance;word-break:auto-phrase}
.sec-title{font-size:clamp(22px,2.8vw,38px);font-weight:700;line-height:1.46;letter-spacing:-.024em;margin-bottom:18px;text-wrap:balance;word-break:auto-phrase}
.lead{font-size:clamp(15px,1.35vw,18px);line-height:1.95;color:var(--muted);max-width:720px;word-break:auto-phrase}
h3{font-size:19px;font-weight:700;line-height:1.62;letter-spacing:-.016em;word-break:auto-phrase}
p{font-size:15px;line-height:1.95;color:var(--muted);word-break:auto-phrase}
.sec-head{margin-bottom:52px;max-width:820px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
}
@media (max-width:700px){
br.w{display:none}
}
@media (max-width:1000px){
.grid3{grid-template-columns:1fr!important}
.grid3,.grid2{grid-template-columns:1fr;gap:16px}
.s{padding:72px 0}
.wrap{padding:0 22px}
}
@media (min-width:701px) and (max-width:1000px){
.grid3,.grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px}
}

/* Phase 10 QA: V118 responsive diagram switch */
.d-wide{display:block;max-width:560px;margin-left:auto;margin-right:auto}.d-narrow{display:none}
@media (max-width:700px){.d-wide{display:none}.d-narrow{display:block}br.w{display:none}}

/* Phase 10 QA: V118 common reveal behavior */
.reveal-ready{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}
.reveal-ready.is-visible{opacity:1;transform:translateY(0);will-change:auto}
@media (prefers-reduced-motion: reduce){
  .reveal-ready{transition:none!important;opacity:1;transform:none;will-change:auto}
}