/* GENERATED by src/build.py from src/css/inner.css — edit the source, not this file. */
/* CEEZ AI — content pages (Platform, Use Cases, Resources). Loaded after site.css.

   The home page's design language at reading pace: the same tokens, type, glass panels and hairlines,
   but ordinary scrolling sections in place of the home's one-screen stack. Nothing here restyles a
   shared component — it only adds the ones these pages need. */
/* ═══ PAGE HERO ════════════════════════════════════════════════ */
.page-hero{position:relative;overflow:hidden;padding-block:calc(68px + clamp(48px,9vw,120px)) clamp(56px,7vw,96px);border-bottom:1px solid var(--line)}
.page-hero .scene{--gx:78%;--gy:22%;--hx:12%;--hy:88%}
.page-hero .orb{left:80%;top:44%;width:min(80vw,760px);opacity:.28}
.page-hero .inner{position:relative;z-index:2}
.page-hero .display{font-size:clamp(44px,5.6vw,84px);line-height:1;max-width:16ch;margin-top:24px}
.page-hero .lede{margin-top:26px;max-width:60ch}
.page-hero .lede+.lede{margin-top:14px;font-size:clamp(15px,1.15vw,17px);color:var(--soft)}
.page-hero .lede strong{color:var(--text);font-weight:500}
/* ═══ CONSTELLATION: a drifting node graph on the right of a hero, with labels that float in and out ═══
   Decorative (aria-hidden). The canvas and labels are positioned by src/js/constellation.js. It fades out
   toward the text column and toward the stat strip so neither is ever read through the graph. */
.constellation{position:absolute;top:68px;right:0;bottom:0;width:min(56%,880px);z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,#000 0,#000 66%,transparent 90%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,#000 0,#000 66%,transparent 90%);
  mask-composite:intersect}
.constellation canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-label{position:absolute;left:0;top:0;will-change:transform}
.c-chip{--tone:var(--acc2);--tone-border:var(--acc-border);display:block;white-space:nowrap;padding:8px 12px 9px;border:1px solid var(--tone-border);border-radius:10px;
  background:rgba(14,15,22,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13.5px;line-height:1.3;color:var(--ink-strong);
  box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);filter:blur(4px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.c-chip i{display:block;margin-bottom:3px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tone)}
.c-label.is-on .c-chip{opacity:1;transform:none;filter:none}
@media(max-width:980px){
  .constellation{width:100%;opacity:.4;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 80%)}
  .c-label{display:none}
}
@media(prefers-reduced-motion:reduce){.c-label{display:none}}

/* balanced lines: no orphaned last word in a headline (scoped here so the home page is untouched) */
.page-hero .display,.section .h2,.layer .h3{text-wrap:balance}
@media(max-width:980px){.page-hero .orb{left:50%;top:62%;width:min(110vw,600px)}}

/* ═══ FEATURE CALLOUTS: a hairline strip of four short features under a hero (no figures) ═══ */
.callouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.callouts li{padding:22px 28px 0 0}
.callouts b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.callouts b::before{content:"";display:block;width:7px;height:7px;margin-bottom:14px;background:var(--acc)}   /* the site's square marker, as on .tag */
.callouts span{display:block;max-width:30ch;margin-top:10px;font-size:14px;line-height:1.5;font-weight:300;color:var(--soft)}
@media(max-width:900px){.callouts{grid-template-columns:repeat(2,minmax(0,1fr))}.callouts li{padding-bottom:6px}}
@media(max-width:520px){.callouts{grid-template-columns:minmax(0,1fr)}.callouts li{padding-right:0}}

/* ═══ SECTION LEDES ════════════════════════════════════════════ */
.band{background:var(--bg2);border-block:1px solid var(--line)}
.intro{max-width:64ch;margin-top:20px;color:var(--muted);font-weight:300;font-size:clamp(16px,1.3vw,19px)}

/* ═══ USE CASES ════════════════════════════════════════════════ */
.cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.case{display:flex;flex-direction:column;padding:26px 24px}
.case h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.08;letter-spacing:-.01em;margin:16px 0 12px}
.case .ask{flex:1;color:var(--muted);font-weight:300;font-size:15.5px}
.case .metric{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--sage)}
@media(max-width:1100px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cases{grid-template-columns:minmax(0,1fr)}}

/* ═══ RESOURCES ════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,48px)}
.step{display:flex;flex-direction:column;padding:28px 26px 30px}
.step h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.06;letter-spacing:-.01em;margin:16px 0 10px}
.step p:not(.eyebrow){flex:1;color:var(--muted);font-weight:300;font-size:16px}
.step .link{margin-top:22px;align-self:flex-start}
@media(max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}}

.trust.plain{margin-top:clamp(28px,4vw,48px)}
.trust.plain>div{padding-top:22px;border-top:1px solid var(--line2)}
.trust.plain h3{margin-top:0}

/* ═══ FIT THE SCREEN (desktop): the hero's type and spacing follow the window height, as on the home page (only heroes marked .screen, i.e. the Platform page) ═══ */
@media(min-width:901px) and (min-height:600px){
  .page-hero.screen .display{margin-top:clamp(12px,2.6vh,24px);font-size:clamp(38px,min(5.6vw,9.4vh),84px)}
  .page-hero.screen .lede{margin-top:clamp(12px,2.6vh,26px);font-size:clamp(14.5px,min(1.4vw,2.3vh),20px)}
  .page-hero.screen .lede+.lede{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(13px,1.9vh,17px)}
  .callouts{margin-top:clamp(18px,4vh,64px)}
  .callouts li{padding-top:clamp(12px,2.4vh,22px)}
  .callouts b{font-size:clamp(20px,min(2.4vw,4.2vh),34px)}
  .callouts b::before{margin-bottom:clamp(8px,1.6vh,14px)}
  .callouts span{margin-top:clamp(6px,1.1vh,10px);font-size:clamp(12.5px,1.75vh,14px)}
}