:root {
  --ink:#0b0b0c;
  --paper:#f2f2f0;
  --white:#fff;
  --gray:#6f7074;
  --line:#d9d9d5;
  --ember:#e0a32e;
  --violet:#6b5bd2;
  --solo:#1f5fc9;
  --moss:#1e8e6e;
  --max:1280px;
  --pad:clamp(20px,5vw,72px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#deded9; font-family:"IBM Plex Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif; -webkit-font-smoothing:antialiased; line-break:strict; word-break:normal; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
:where(h1,h2,h3) { text-wrap:balance; word-break:auto-phrase; overflow-wrap:break-word; }
:where(p,li,figcaption) { text-wrap:pretty; }
:focus-visible { outline:3px solid var(--ember); outline-offset:4px; }
::selection { color:var(--white); background:var(--solo); }
.page { max-width:var(--max); margin:auto; overflow:hidden; background:var(--paper); border-inline:1px solid var(--line); }
.mono,.eyebrow,.tag,.metric-label,.footer { font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; }
.nav { position:sticky; top:0; z-index:50; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:0 var(--pad); border-bottom:1px solid var(--line); background:rgba(242,242,240,.95); backdrop-filter:blur(18px); }
.nav img { width:180px; }
.nav-actions { display:flex; align-items:center; gap:26px; color:var(--gray); font-size:12px; font-weight:700; }
.nav-actions a:hover { color:var(--ink); }
.hero { min-height:760px; display:grid; grid-template-columns:.62fr 1.38fr; gap:60px; align-items:center; padding:clamp(78px,10vw,132px) var(--pad); border-bottom:1px solid var(--line); }
.hero-aside { align-self:start; padding-top:10px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--gray); font-size:10px; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--solo); flex:none; }
.hero h1 { margin:0; font-size:clamp(49px,7.1vw,98px); line-height:.98; letter-spacing:-.065em; font-weight:640; }
.hero-lead { max-width:830px; margin:50px 0 0; color:#343438; font-size:clamp(18px,1.8vw,24px); line-height:1.8; letter-spacing:-.02em; }
.hero-note { display:inline-flex; margin-top:34px; padding:11px 14px; border:1px solid var(--line); color:var(--gray); font-size:11px; }
.section { padding:clamp(82px,10vw,138px) var(--pad); border-bottom:1px solid var(--line); }
.section.white { background:var(--white); }
.section.dark { color:var(--paper); background:var(--ink); }
.section-head { display:grid; grid-template-columns:.62fr 1.38fr; gap:60px; margin-bottom:72px; }
.section h2 { margin:0; font-size:clamp(40px,5.6vw,76px); line-height:1; letter-spacing:-.058em; font-weight:620; }
.section-copy { max-width:740px; margin:34px 0 0; color:var(--gray); font-size:17px; line-height:1.8; }
.dark .section-copy { color:#aaa; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-inline:calc(-1 * var(--pad)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric { min-height:220px; padding:28px var(--pad); border-right:1px solid var(--line); }
.metric:last-child { border-right:0; }
.metric-label { color:var(--gray); font-size:10px; }
.metric strong { display:block; margin-top:58px; color:var(--solo); font-size:clamp(37px,4.7vw,66px); line-height:1; letter-spacing:-.055em; }
.metric span:last-child { display:block; margin-top:12px; color:var(--gray); font-size:13px; line-height:1.5; }
.comparison { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.comparison article { min-height:390px; padding:36px; }
.comparison article + article { border-left:1px solid var(--line); }
.comparison .ai { color:var(--paper); background:var(--ink); }
.tag { color:var(--gray); font-size:10px; letter-spacing:.07em; }
.ai .tag { color:#94949b; }
.comparison h3 { margin:86px 0 24px; font-size:clamp(31px,4vw,52px); line-height:1; letter-spacing:-.05em; }
.comparison p { margin:0; color:var(--gray); font-size:15px; line-height:1.8; }
.ai p { color:#aaa; }
.comparison ul { margin:26px 0 0; padding-left:1.2em; color:var(--gray); font-size:14px; line-height:1.8; }
.ai ul { color:#aaa; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-inline:calc(-1 * var(--pad)); border-top:1px solid var(--line); }
.feature { min-height:320px; padding:30px var(--pad); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature:last-child { border-right:0; }
.feature .tag { color:var(--solo); }
.feature h3 { margin:78px 0 18px; font-size:clamp(24px,2.7vw,36px); line-height:1.14; letter-spacing:-.04em; }
.feature p { margin:0; color:var(--gray); font-size:14px; line-height:1.8; }
.flow { border-top:1px solid #303034; }
.flow-row { display:grid; grid-template-columns:110px .75fr 1.25fr; gap:28px; padding:31px 0; border-bottom:1px solid #303034; }
.flow-row .tag { color:#85858c; }
.flow-row h3 { margin:0; font-size:clamp(21px,2.4vw,31px); letter-spacing:-.035em; }
.flow-row p { margin:0; color:#aaa; font-size:14px; line-height:1.75; }
.guardrail { display:grid; grid-template-columns:.92fr 1.08fr; background:var(--white); border:1px solid var(--line); }
.guardrail-copy { padding:clamp(48px,6vw,78px); }
.guardrail-copy h3 { margin:32px 0 24px; font-size:clamp(34px,4.6vw,62px); line-height:1.02; letter-spacing:-.055em; }
.guardrail-copy p { margin:0; color:var(--gray); font-size:16px; line-height:1.8; }
.permission { display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,6vw,78px); color:var(--paper); background:var(--ink); }
.permission-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid #303034; }
.permission-row:first-child { border-top:1px solid #303034; }
.permission-row span { color:#aaa; font-size:14px; }
.permission-row b { font-size:13px; }
.allow { color:#79d497; }
.deny { color:#f0b23f; }
.evidence { padding:clamp(28px,4vw,54px); background:var(--white); border:1px solid var(--line); }
.evidence img { width:100%; height:auto; }
.evidence figcaption { margin-top:22px; color:var(--gray); font-size:12px; line-height:1.7; }
.role-shift { display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch; }
.role-box { min-height:330px; padding:34px; border:1px solid var(--line); background:var(--white); }
.role-box.future { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.role-box h3 { margin:82px 0 22px; font-size:clamp(29px,3.7vw,48px); line-height:1.05; letter-spacing:-.048em; }
.role-box p { margin:0; color:var(--gray); font-size:15px; line-height:1.8; }
.role-box.future p { color:#aaa; }
.shift-arrow { align-self:center; font-size:32px; }
.strengths { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
.strength { min-height:255px; padding:30px 0; border-bottom:1px solid var(--line); }
.strength:nth-child(odd) { padding-right:40px; border-right:1px solid var(--line); }
.strength:nth-child(even) { padding-left:40px; }
.strength .tag { color:var(--ember); }
.strength h3 { margin:60px 0 14px; font-size:clamp(24px,2.8vw,36px); letter-spacing:-.04em; }
.strength p { margin:0; color:var(--gray); font-size:14px; line-height:1.75; }
.steps { counter-reset:step; border-top:1px solid var(--line); }
.step { display:grid; grid-template-columns:90px .7fr 1.3fr; gap:28px; padding:31px 0; border-bottom:1px solid var(--line); }
.step .tag { color:var(--solo); }
.step h3 { margin:0; font-size:clamp(21px,2.4vw,31px); letter-spacing:-.035em; }
.step p { margin:0; color:var(--gray); font-size:14px; line-height:1.75; }
.disclaimer { padding:24px 28px; color:var(--gray); background:#e9e9e6; font-size:12px; line-height:1.75; }
.cta { min-height:560px; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(88px,11vw,145px) var(--pad) 34px; background:var(--white); }
.cta h2 { max-width:1020px; margin:0; font-size:clamp(48px,7.3vw,96px); line-height:.98; letter-spacing:-.064em; }
.cta-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:80px; }
.cta-bottom p { max-width:590px; margin:0; font-size:17px; line-height:1.75; }
.button { flex:none; min-width:260px; display:flex; justify-content:space-between; gap:30px; padding:18px 20px; border:1px solid var(--ink); font-size:12px; font-weight:750; transition:.2s; }
.button:hover { color:var(--white); background:var(--ink); }
.footer { display:grid; grid-template-columns:1fr auto; gap:30px; padding:28px var(--pad); color:#999; background:var(--ink); font-size:10px; line-height:1.6; }
.footer-links { display:flex; gap:22px; }
.trademark { grid-column:1/-1; color:#73737b; }

/* Dark-surface accessibility: body copy stays prominent; metadata remains secondary. */
.dark .section-copy,
.ai p,
.ai ul,
.flow-row p,
.permission-row span,
.role-box.future p { color:#d8dbe2; }
.ai .tag,
.flow-row .tag,
.footer .trademark { color:#b2b6bf; }
.footer { color:#c5c9d1; }
@media(min-width:981px) {
  :where(h1,h2,h3) br { display:none; }
}
@media(max-width:980px) {
  .hero,.section-head { grid-template-columns:1fr; }
  .hero { min-height:auto; }
  .hero-aside { padding:0; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(2) { border-right:0; }
  .metric:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .feature-grid { grid-template-columns:1fr; }
  .feature { border-right:0; }
  .guardrail { grid-template-columns:1fr; }
  .role-shift { grid-template-columns:1fr; }
  .shift-arrow { transform:rotate(90deg); justify-self:center; }
}
@media(max-width:680px) {
  .nav img { width:148px; }
  .nav-actions a:first-child { display:none; }
  .hero h1 { font-size:clamp(46px,13vw,70px); }
  .comparison { grid-template-columns:1fr; }
  .comparison article + article { border-left:0; border-top:1px solid var(--line); }
  .flow-row,.step { grid-template-columns:54px 1fr; }
  .flow-row p,.step p { grid-column:2; }
  .strengths { grid-template-columns:1fr; }
  .strength:nth-child(odd),.strength:nth-child(even) { padding-inline:0; border-right:0; }
  .cta-bottom { align-items:stretch; flex-direction:column; }
  .button { width:100%; }
  .footer { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }