/* META · direção 22/09: vermelho do losango e neutros.
   CSS nativo, mobile-first. Tokens comuns às quatro rotas. */
@font-face {
  font-family:'META Helvetica Neue';
  src:url('/assets/fonts/helvetica-neue-roman.woff') format('woff');
  font-style:normal; font-weight:100 500; font-display:swap;
}
@font-face {
  font-family:'META Helvetica Neue';
  src:url('/assets/fonts/helvetica-neue-black.woff') format('woff');
  font-style:normal; font-weight:600 900; font-display:swap;
}
:root {
  color-scheme: light;
  --sans:'META Helvetica Neue','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:var(--sans);
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f0f0f0; --violet-bg:#f9e9e9;
  --text:#191919; --muted:#505050; --subtle:#606060; --accent:#b71d35;
  --button:#b71d35; --button-hover:#99152a; --line:#d3d3d3; --focus:#b71d35;
  --easy:#24623d; --medium:#755000; --hard:#b71d35;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#111111; --surface:#191919; --surface-2:#222222; --violet-bg:#2c191d;
  --text:#f5f5f5; --muted:#bdbdbd; --subtle:#aaaaaa; --accent:#ff7d8d;
  --button:#b71d35; --button-hover:#99152a; --line:#3c3c3c; --focus:#ff7d8d;
  --easy:#8ed5a7; --medium:#edce88; --hard:#ff9aa7;
}
body { -webkit-font-smoothing:antialiased; font-synthesis:style }
.header { background:var(--bg); border-bottom:1px solid var(--line) }
.wrap { width:min(1248px,calc(100% - 40px)) }
.nav { height:72px; gap:16px }
.nav nav { margin-left:auto; gap:28px }
.brand { letter-spacing:-.025em }
.diamond { color:#bf1a32 }
.theme-toggle { display:flex; align-items:center; border:1px solid var(--line); padding:3px; border-radius:4px; background:var(--surface); font:500 10px var(--mono); min-height:40px }
.theme-toggle span { display:block; padding:7px 8px; border-radius:2px; color:var(--muted) }
:root:not([data-theme="dark"]) .theme-light,:root[data-theme="dark"] .theme-dark { background:var(--text); color:var(--bg) }
.button.primary { background:var(--button); border-color:var(--button); color:#ffffff }
.button.primary:hover { background:var(--button-hover); border-color:var(--button-hover) }
.button { border-radius:4px; min-height:54px; font-size:12px; white-space:normal }
.consent { border-color:var(--line); box-shadow:0 20px 80px #0004 }
.consent::backdrop,dialog::backdrop { background:#000b }
.copy-v4 .opening { display:grid; gap:36px; padding-block:38px 60px }
.opening-copy .eyebrow { margin-bottom:20px; font-size:11px; letter-spacing:.12em }
.opening h1 { font-size:clamp(32px,8vw,46px); line-height:1.08; letter-spacing:-.035em; font-weight:900; text-wrap:initial }
.opening h1 span { color:var(--accent) }
.opening .lead { font-size:16px; line-height:1.6; max-width:54ch; margin-top:24px }
.opening-buy { margin-top:26px; display:grid; gap:18px }
.opening-buy p { display:flex; align-items:center; gap:16px }
.opening-buy strong { font:600 24px var(--mono); color:var(--text); white-space:nowrap }
.opening-buy p>span { max-width:16ch; font-size:12px; line-height:1.45 }
.opening-buy .button { width:100%; justify-content:space-between }
.copy-v4 .hero-proof { margin:0; min-width:0; align-self:center; grid-area:auto }
.copy-v4 .print-button { background:#191919; border-radius:4px; box-shadow:none; border-color:var(--line) }
.copy-v4 .print-button img { height:auto; width:100%; object-fit:contain }
.copy-v4 .hero-proof .print-button img { height:210px; object-fit:cover; object-position:50% 42% }
.copy-v4 figcaption { font-size:12px; color:var(--subtle); padding-top:12px; line-height:1.6 }
.copy-v4 .hero-proof figcaption { display:flex; gap:12px; justify-content:space-between; align-items:center }
.copy-v4 .hero-proof .text-button { white-space:nowrap }
.chapter { padding-block:60px; border-top:1px solid var(--line); scroll-margin-top:85px }
.chapter>h2 { max-width:26ch; font-size:clamp(27px,5.8vw,43px); line-height:1.2; margin-bottom:28px }
.chapter>p { max-width:66ch; margin-top:18px }
.chapter p,.story-body { font-size:16px; line-height:1.75 }
.chapter strong { color:var(--text) }
.chapter .eyebrow { font:500 11px var(--mono); color:var(--accent); margin:0 0 18px }
.chapter .statement { font:500 22px/1.5 var(--mono); color:var(--text); border-left:3px solid var(--accent); padding:12px 0 12px 24px; margin-top:36px; max-width:49ch }
.story-body p { margin:0 0 20px; break-inside:avoid }
.reminder { border:1px solid var(--line); border-left:3px solid var(--accent); padding:22px; background:var(--surface); margin:26px 0; break-inside:avoid }
.reminder small { display:block; color:var(--subtle); font:11px var(--mono); margin-bottom:8px }
.reminder strong { font:600 19px var(--mono) }
.steps { list-style:none; padding:0; margin:34px 0; display:grid; counter-reset:step; border-top:1px solid var(--line) }
.steps li { counter-increment:step; padding:28px 0 28px 46px; position:relative; border-bottom:1px solid var(--line) }
.steps li::before { content:counter(step,decimal-leading-zero); position:absolute; top:29px; left:0; font:500 13px var(--mono); color:var(--accent) }
.steps h3 { font-size:19px; line-height:1.45; max-width:30ch; margin-bottom:14px }
.steps p { max-width:48ch; font-size:15px }
.example { margin:40px auto 30px; border:1px solid var(--line); background:var(--surface); border-radius:4px; overflow:hidden; max-width:790px }
.example-top { padding:22px; background:var(--surface-2); border-bottom:1px solid var(--line) }
.example-top small { display:block; font:11px var(--mono); color:var(--subtle); margin-bottom:6px }
.example-top strong { font:600 22px var(--mono) }
.example-body { padding:22px }
.example-label { color:var(--accent); font:500 11px var(--mono)!important; margin-bottom:18px }
.task { display:flex; gap:16px; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line) }
.task-title { display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.6 }
.checkbox { width:16px; height:16px; border:1px solid var(--accent); flex:none; margin-top:5px }
.duration { font:11px var(--mono); white-space:nowrap; color:var(--subtle); padding-top:6px }
.example .total { margin-top:18px; font:500 14px var(--mono); color:var(--text) }
.example>.caption { padding:0 22px 22px }
.chapter .caption { font-size:12px; color:var(--subtle) }
.wide-proof { margin-top:36px }
.technical-demos { padding:32px 0 0; margin:0 }
.cycle-layout { gap:32px }
.cycle-board { max-width:450px; width:100%; margin:auto }
.cycle-node { width:120px; padding:10px 6px; background:var(--bg) }
.cycle-node h3 { font-size:11px }
.cycle-node p { font-size:10px; line-height:1.4 }
.cycle-example { border-radius:4px }
.cycle-example p { font-size:13px }
.cycle-example .difficulty,.xp-ranges { font-size:11px }
.task-demo p { font-size:14px }
.spectrum { background:transparent; border:0; padding:48px 0 0 }
.spectrum>.wrap { width:100% }
.spectrum .section-heading h2 { font-size:24px }
.radar-web polygon,.radar-web line { stroke:var(--line) }
#radar-polygon { fill:var(--accent); fill-opacity:.2; stroke:var(--accent) }
.radar-controls p,.radar-tip { font-size:12px }
.rank-ladder li { background:var(--surface); border-color:var(--accent) }
.ranks p { font-size:12px }
.deliverables { padding:0; list-style:none; margin:32px 0; display:grid }
.deliverables>li { padding:26px 0; border-top:1px solid var(--line) }
.deliverables h3 { font-size:19px; margin-bottom:14px }
.deliverables p { font-size:15px; max-width:50ch }
.deliverables p+p { margin-top:14px }
.access-note { border:1px solid var(--line); padding:24px; display:grid; gap:18px; background:var(--surface) }
.access-note p { font-size:14px }
.fit-list { list-style:none; padding:0; display:grid; gap:18px; margin:28px 0 }
.fit-list li { padding-left:28px; position:relative; color:var(--muted); max-width:55ch }
.fit-list li::before { content:'↳'; position:absolute; left:0; color:var(--accent) }
.offer { display:grid; gap:32px }
.offer-intro h2 { max-width:14ch; font-size:clamp(32px,7vw,52px); line-height:1.15; margin-bottom:26px }
.offer-purchase { border:1px solid var(--accent); padding:26px; border-radius:4px; background:var(--surface) }
.offer-purchase .offer-line { font:12px var(--mono); color:var(--subtle) }
.offer-purchase .price { font:600 clamp(36px,9vw,56px)/1.2 var(--mono); color:var(--text); margin:12px 0 20px; letter-spacing:-.07em }
.offer-purchase p { font-size:14px }
.offer-purchase .button { width:100%; margin:24px 0 12px; justify-content:space-between }
.offer-purchase .conditions { font-size:12px; margin-top:12px }
#faq .qa { border-color:var(--line) }
#faq .qa summary { font:500 15px/1.5 var(--mono); padding-block:24px }
#faq .qa-answer { max-width:65ch; font-size:16px; padding-bottom:24px }
.closing { padding-block:64px 76px }
.closing h2 { max-width:22ch; font-size:clamp(30px,7vw,54px) }
.closing .button { margin-top:28px }
.footer { border-top:1px solid var(--line) }
@media(min-width:700px) {
 .wrap { width:min(1248px,calc(100% - 80px)) }
 .theme-toggle { font-size:11px }
 .copy-v4 .opening { padding-block:60px 80px; gap:42px }
 .opening h1 { font-size:48px; max-width:23ch }
 .opening-buy { max-width:400px }
 .copy-v4 .hero-proof .print-button img { height:auto }
 .chapter { padding-block:80px }
 .story-body { columns:2; column-gap:56px }
 .steps { grid-template-columns:1fr 1fr; gap:0 48px }
 .deliverables { grid-template-columns:1fr 1fr; gap:0 56px }
 .deliverables>li:nth-child(4) { grid-row:span 2 }
 .access-note { grid-template-columns:1fr 1fr; gap:48px }
 .offer { grid-template-columns:1fr 1fr; gap:64px }
 .offer-purchase { padding:32px }
 .cycle-node { width:130px }
 .cycle-layout { padding:0; gap:48px }
 .radar-layout { gap:60px }
 #faq { display:grid; grid-template-columns:.85fr 1.15fr; column-gap:80px }
 #faq>h2 { grid-column:1; grid-row:1/9 }
 #faq>.qa { grid-column:2 }
}
@media(min-width:1050px) {
 .nav { height:80px }
 .copy-v4 .opening { grid-template-columns:1.07fr 1fr; gap:54px; padding-block:60px 80px; align-items:center }
 .opening h1 { font-size:clamp(44px,4.1vw,59px) }
 .opening .lead { font-size:16px }
 .opening-buy { margin-top:28px }
 .copy-v4 .hero-proof { padding:22px 19px 8px; border:1px solid var(--line); border-top:3px solid var(--accent) }
 .copy-v4 .hero-proof .print-button img { min-height:340px; object-fit:cover; object-position:left center }
 .chapter { padding-block:100px }
 .chapter>h2 { margin-bottom:34px }
 .cycle-node { width:155px; padding:16px 10px }
 .cycle-node h3 { font-size:13px }
 .cycle-node p { font-size:11px }
 .spectrum { padding-top:70px }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important }
}