/* ------------------------------------------------------------------
   Agentic development page — light theme, uses brand.css tokens.
------------------------------------------------------------------ */
.a-hero{text-align:center; padding:56px 0 8px}
.a-hero h1{font-size:clamp(28px,4.4vw,46px); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px}
.a-hero h1 .g{background:linear-gradient(90deg,var(--accent),var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent}
.a-hero .sub{color:var(--muted); max-width:700px; margin:0 auto; font-size:16px; line-height:1.6}

/* WHY the old process breaks */
.why{max-width:940px; margin:38px auto 0; border:1px solid var(--line); border-radius:20px; padding:30px 26px 26px; background:var(--amber-soft)}
.why .eyebrow{display:block; text-align:center; color:var(--amber); margin-bottom:12px}
.why h2{text-align:center; font-size:clamp(20px,2.8vw,28px); line-height:1.2; margin:0 auto 12px; max-width:680px; letter-spacing:-.01em}
.why .lead{text-align:center; color:var(--ink-2); max-width:680px; margin:0 auto 22px; font-size:15.5px; line-height:1.6}
.shift{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch}
.shift .box{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:#fff}
.shift .old{opacity:.75}
.shift .lab{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.shift .new .lab{color:var(--amber)}
.shift .flow{font-size:16px; font-weight:600; color:var(--ink)}
.shift .old .flow{color:var(--muted)}
.shift .note{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.45}
.shift .arrow{display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:24px}
.kaderlink{display:block; text-align:center; margin:16px auto 0; color:var(--accent); font-size:13.5px; cursor:pointer; font-weight:500}

/* HARNESS + loop */
.harness{position:relative; width:min(94vw,640px); margin:40px auto 0; border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); border-radius:24px; padding:44px 22px 26px; background:linear-gradient(180deg,var(--accent-soft),#fff); box-shadow:var(--shadow-lg)}
.hlabel{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; padding:6px 18px; border-radius:20px}
.loopwrap{width:min(76vw,340px); aspect-ratio:1/1; margin:0 auto}
.loopwrap svg{width:100%; height:100%; overflow:visible}
.spin{transform-origin:170px 170px; animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.arc{fill:none; stroke:var(--accent); stroke-opacity:.55; stroke-width:2.5}
.nodec{fill:var(--accent)}
.noden{fill:#fff; font-size:13px; font-weight:800}
.stg{fill:var(--ink); font-size:14px; font-weight:700}
.stgd{fill:var(--muted); font-size:10.5px}
.core{fill:var(--amber); font-size:13px; font-weight:700; letter-spacing:.03em}
.cored{fill:var(--muted); font-size:10px}
.loopcap{text-align:center; color:var(--ink-2); font-size:13.5px; line-height:1.5; max-width:440px; margin:12px auto 0}
.loopcap b{color:var(--ink)}

/* CONVICTIONS */
.convhead{max-width:var(--maxw); margin:44px auto 0; text-align:center; padding:0 24px}
.convhead .eyebrow{display:block; color:var(--accent); margin-bottom:10px}
.convhead h2{font-size:clamp(20px,2.8vw,28px); margin:0 0 8px; letter-spacing:-.01em}
.convhead p{color:var(--muted); font-size:14.5px; margin:0 auto; max-width:580px; line-height:1.55}
.phases{max-width:var(--maxw); margin:22px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.phase{border:1px solid var(--line); border-radius:16px; padding:14px 12px; background:var(--bg-soft)}
.phase>.ph-h{display:flex; align-items:baseline; gap:8px; margin:0 4px 12px}
.ph-n{font-size:11px; color:var(--amber); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.ph-d{font-size:11px; color:var(--muted)}
.ph-cards{display:flex; flex-direction:column; gap:10px}
.mens{max-width:var(--maxw); margin:16px auto 0; padding:0 24px}
.mens .ph-h{margin:0 2px 10px; display:flex; gap:8px; align-items:baseline}
.mens .ph-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.card{position:relative; border:1px solid var(--line); border-radius:14px; padding:14px 14px 13px 18px; cursor:pointer; background:#fff; transition:transform .13s, border-color .15s, box-shadow .15s}
.card:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:var(--shadow)}
.card .edge{position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--accent),var(--amber))}
.card .c-title{font-size:11.5px; font-weight:700; color:var(--accent); letter-spacing:.01em}
.card .c-claim{font-size:13.5px; line-height:1.35; font-weight:600; color:var(--ink); margin:5px 0 0}
.card .c-more{margin-top:10px; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}

.proof{max-width:var(--maxw); margin:26px auto 0; padding:0 24px}
.proof .inner{border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--radius); padding:16px 20px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--accent-soft)}
.proof .pt{font-size:14px; color:var(--ink-2); max-width:680px}
.proof .pt b{color:var(--ink)}

/* Reader overlay — full-screen, light, own scroll */
#reader{position:fixed; inset:0; z-index:80; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .22s; background:var(--bg)}
#reader.on{opacity:1; visibility:visible}
#reader .rbar{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(10px)}
#reader .rback{background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:8px 13px; cursor:pointer; font-size:13px; font-family:inherit}
#reader .rback:hover{border-color:#c9cfdb}
#reader .rt{font-size:13px; color:var(--muted)}
#reader .article{max-width:720px; margin:0 auto; padding:46px 24px 110px}
#reader .a-eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:10px}
#reader .a-title{font-size:clamp(27px,4.2vw,40px); line-height:1.13; margin:0 0 18px; letter-spacing:-.015em}
#reader .a-lead{font-size:20px; line-height:1.5; color:var(--ink); border-left:3px solid color-mix(in srgb,var(--amber) 55%,transparent); padding-left:18px; margin:0 0 30px}
#reader .body h2{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:30px 0 12px}
#reader .body h3{font-size:18px; margin:26px 0 10px; letter-spacing:-.01em}
#reader .body p{font-size:16.5px; line-height:1.72; color:var(--ink-2); margin:0 0 14px}
#reader .body ul{margin:0 0 14px; padding-left:22px}
#reader .body li{font-size:16px; line-height:1.65; color:var(--ink-2); margin-bottom:9px}
#reader .body a{color:var(--accent)}
#reader .a-repo{display:inline-flex; gap:8px; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding:10px 15px; border-radius:10px; font-size:14.5px; margin-top:6px}
#reader .a-repo:hover{text-decoration:none; background:var(--accent-soft)}

@media(max-width:820px){.phases{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.phases{grid-template-columns:1fr}.shift{grid-template-columns:1fr}.shift .arrow{transform:rotate(90deg)}}