/* GENERATED by src/build.py from src/css/why.css — edit the source, not this file. */
/* CEEZ AI — the Why CEEZ page. Loaded after inner.css.
   Vertical rhythm follows the window height, as on the home page, rather than a fixed 160px per section. */

.why .section{padding-block:clamp(56px,min(9vh,10vw),96px)}
.why .page-hero{padding-block:calc(68px + clamp(32px,min(6vh,8vw),72px)) clamp(36px,min(6vh,8vw),64px)}
.why .section-head{margin-bottom:clamp(22px,4vh,44px)}
.why .section-head .tag{margin-bottom:clamp(12px,2vh,22px)}
.why .trust.plain{margin-top:0}

/* where AI stalls: four numbered observations */
.stalls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.stalls li{padding-top:22px;border-top:1px solid var(--line2)}
.stalls h3{margin:14px 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.stalls p{font-size:15px;line-height:1.55;font-weight:300;color:var(--muted)}
.stalls .link{margin-top:16px}
.stalls-note{max-width:64ch;margin-top:clamp(24px,4vh,40px);font-size:17px;line-height:1.55;color:var(--ink-strong)}

/* the comparison: approach / good at / where it stops; the Ceez row is the one accent */
.cmp{border:1px solid var(--border-strong);border-radius:var(--r-panel);overflow:hidden;background:rgba(255,255,255,.015)}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.5fr);gap:clamp(16px,3vw,40px);padding:clamp(14px,2.2vh,22px) clamp(18px,2.4vw,32px);align-items:baseline}
.cmp-row+.cmp-row{border-top:1px solid var(--line)}
.cmp-head{padding-block:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);background:rgba(255,255,255,.02)}
.cmp-row b{font-size:16px;font-weight:500;color:var(--text)}
.cmp-row span{font-size:15px;line-height:1.5;font-weight:300;color:var(--muted)}
.cmp-row.is-ceez{background:var(--acc-tint);box-shadow:inset 3px 0 0 var(--acc)}
.cmp-row.is-ceez b{color:var(--acc-italic)}
.cmp-row.is-ceez span{color:var(--ink-strong)}

/* three design choices */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.choice{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px)}
.choice h3{margin:14px 0 12px;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.choice>p:not(.eyebrow){font-size:15.5px;line-height:1.6;font-weight:300;color:var(--muted)}

/* what stays yours / what Ceez adds */
.keepadd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ka,.keepadd>.glass{padding:clamp(22px,2.6vw,36px)}          /* every keep/add panel gets its padding, whether or not the markup says .ka */
.ka .ticks,.keepadd>.glass .ticks{margin-top:16px;padding-top:0;border-top:0}
.ka.is-add,.keepadd>.glass.is-add{border-color:var(--acc-border);background:var(--acc-tint)}
.fit-note{margin-top:clamp(18px,3vh,28px);font-size:15px;color:var(--muted)}

/* motion: the Ceez row lights up as the table arrives */
.js-motion .cmp.is-in .is-ceez{animation:whyGlow 1.4s var(--ease) .5s both}
@keyframes whyGlow{from{background:transparent;box-shadow:inset 0 0 0 var(--acc)}to{background:var(--acc-tint);box-shadow:inset 3px 0 0 var(--acc)}}
@media(prefers-reduced-motion:reduce){.js-motion .cmp.is-in .is-ceez{animation:none}}

@media(max-width:1100px){.stalls{grid-template-columns:repeat(2,minmax(0,1fr))}.choices{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .cmp-row span:nth-of-type(1)::before{content:"Good at  ";font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .cmp-row span:nth-of-type(2)::before{content:"Where it stops  ";font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .keepadd{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){.stalls{grid-template-columns:minmax(0,1fr)}}

/* Ground alongside the data stack: reads from / decides / publishes to */
.stackflow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(16px,3vw,44px);align-items:start}
.sf-col .ticks{margin-top:14px;padding-top:0;border-top:0}
.sf-card{padding:clamp(20px,2.4vw,30px)}
.sf-term{margin:12px 0 4px;font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:var(--text)}
.sf-term span{margin-left:10px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.sf-card dl{display:grid;gap:12px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.sf-card dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
.sf-card dt{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.sf-card dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media(max-width:980px){.stackflow{grid-template-columns:minmax(0,1fr)}}
.sf-note{margin-top:16px;font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* check it yourself: five ways to test the claims, and an invitation */
.verify{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vf{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,28px)}
.vf h3{margin:12px 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.vf p:not(.eyebrow){flex:1;font-size:15px;line-height:1.55;font-weight:300;color:var(--muted)}
.vf .link{margin-top:18px;align-self:flex-start}
.vf.is-cta{border-color:var(--acc-border);background:var(--acc-tint)}
@media(max-width:1000px){.verify{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.verify{grid-template-columns:minmax(0,1fr)}}
.cmp.is-two .cmp-row{grid-template-columns:minmax(0,.8fr) minmax(0,2fr)}


/* Ground page: the sources that don't join up, and the three kinds of understanding */
.gr-sources{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.gr-sources li{padding:18px 18px 20px;border:1px dashed var(--border-strong);border-radius:12px;background:rgba(255,255,255,.02)}
.gr-sources b{display:block;font-size:17px;font-weight:500;color:var(--text)}
.gr-sources span{display:block;margin-top:6px;font-size:15px;font-weight:300;color:var(--muted)}
.gr-join{position:relative;display:flex;align-items:center;justify-content:center;margin-top:26px;padding:15px 22px;border:1px solid var(--acc-border);border-radius:12px;background:linear-gradient(180deg,rgb(var(--acc-rgb) / .16),rgb(var(--acc-rgb) / .06));font-size:17px;color:var(--ink-strong);text-align:center}
.gr-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(24px,4vh,40px);border-block:1px solid var(--border-strong)}
.gr-kinds li{padding:20px 22px}
.gr-kinds li+li{border-left:1px solid var(--line)}
.gr-kinds .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.gr-kinds b{display:block;margin-top:10px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;color:var(--text)}
.gr-kinds p{margin-top:6px;font-size:15px;line-height:1.5;font-weight:300;color:var(--muted)}
.gr-note{max-width:76ch;margin-top:22px;font-size:15px;line-height:1.6;font-weight:300;color:var(--muted)}
.gr-note .link{margin:8px 20px 0 0}
@media(max-width:1000px){.gr-sources{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.gr-kinds{grid-template-columns:minmax(0,1fr)}.gr-kinds li+li{border-left:0;border-top:1px solid var(--line)}}


/* Security page: six controls in a hairline grid, and a small "updated" note */
.sx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden}
.sx-grid li{padding:clamp(18px,2.4vh,26px) clamp(18px,1.8vw,26px)}
.sx-grid li:nth-child(n+4){border-top:1px solid var(--line)}
.sx-grid li:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
.sx-grid .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.sx-grid b{display:block;margin-top:10px;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;color:var(--text)}
.sx-grid p{margin-top:8px;font-size:15px;line-height:1.55;font-weight:300;color:var(--muted)}
.sx-covered{margin-top:22px}
.gr-kinds p .link{display:flex;width:fit-content;margin-top:12px}
.sx-note a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(var(--acc2-rgb) / .4)}
.sx-note a:hover{color:var(--text)}
.sx-updated{display:block;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media(max-width:1000px){.sx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-grid li:nth-child(n+3){border-top:1px solid var(--line)}.sx-grid li:not(:nth-child(3n+1)){border-left:0}.sx-grid li:nth-child(2n){border-left:1px solid var(--line)}}
@media(max-width:640px){.sx-grid{grid-template-columns:minmax(0,1fr)}.sx-grid li+li{border-top:1px solid var(--line)!important;border-left:0!important}}