/* GENERATED by src/build.py from src/css/features.css — edit the source, not this file. */
/* CEEZ AI — the detailed feature lists (Ceez Ground, Ceez Crew) on the Platform page. Loaded after inner.css.

   One card per stage: number badge, title, one-line description, a small illustrative panel, and the
   full feature list. One accent throughout — the site's violet — with the muted sage the home page already
   uses reserved for success states (Passed, Certified, Live, ✓). The card, badge, bullets and panel all
   follow --tone, which defaults to the accent. */

/* ═══ FLOW HEADLINE: Discover → Understand → … → Re-ground ═══ */
.flow{margin-top:22px;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.5vw,52px);line-height:1.12;letter-spacing:-.02em;color:var(--text)}
.flow .lt{white-space:nowrap}   /* never split "Re-ground" at its hyphen */
.flow .fw{white-space:nowrap}   /* a word and its arrow travel together; lines break between pairs */
.flow i{font-style:normal;font-family:var(--sans);font-weight:300;color:var(--soft);margin-left:.3em}
.flow+.lede{margin-top:22px;max-width:64ch}

/* ═══ GRID: three across; the five-stage list ends on two wider cards ═══ */
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4vw,56px)}
.fgrid>.fcard{grid-column:span 2}
.fgrid.is-five>.fcard:nth-child(n+4){grid-column:span 3}
@media(max-width:1100px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid>.fcard,.fgrid.is-five>.fcard:nth-child(n+4){grid-column:span 1}
  .fgrid>.fcard:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:680px){.fgrid{grid-template-columns:minmax(0,1fr)}}

/* ═══ CARD ═══ */
.fcard{--tone:var(--acc2);--tone-tint:rgb(var(--acc-rgb) / .1);--tone-border:rgb(var(--acc-rgb) / .34);
  display:flex;flex-direction:column;padding:24px 22px 26px;border:1px solid var(--tone-border);border-radius:var(--r-lg);
  background:linear-gradient(175deg,var(--tone-tint),rgba(12,13,19,.88) 46%);transition:border-color .3s,transform .3s var(--ease)}
.fcard:hover{transform:translateY(-3px);border-color:var(--tone)}

.fhd{display:flex;gap:14px;align-items:flex-start}
.fnum{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--tone-border);background:var(--tone-tint);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tone)}
.fhd h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.4vw,34px);line-height:1.05;letter-spacing:-.01em;color:var(--text)}
.fhd p{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--muted);font-weight:300;min-height:3em}

/* the feature list */
.flist{display:grid;gap:10px;margin-top:auto}
.flist li{position:relative;padding-left:17px;font-size:14px;line-height:1.4;color:var(--ink-strong)}
.flist li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--tone)}

.fnote{margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ═══ ILLUSTRATIVE PANEL ═══ */
.fviz{margin:20px 0 22px;padding:14px;min-height:204px;display:flex;flex-direction:column;gap:10px;justify-content:center;
  border:1px solid var(--line2);border-radius:12px;background:rgba(7,8,11,.55);font-size:12.5px;color:var(--ink-strong)}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--text)}
.fpill{padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--tone-border);background:var(--tone-tint);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--tone);white-space:nowrap}
.fpill.is-ok{--tone:var(--sage);--tone-tint:rgba(156,187,170,.08);--tone-border:rgba(156,187,170,.3)}
.fsvg{display:block;width:100%;height:auto;max-height:150px}
.fsvg .fl{stroke:var(--tone-border);stroke-width:1;fill:none}
.fsvg .fc{fill:var(--tone-tint);stroke:var(--tone);stroke-width:1.2}
.fsvg .fic{stroke:var(--tone);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fsvg .fn{fill:#0B0D13;stroke:var(--tone);stroke-width:1;stroke-opacity:.7}
.fsvg .fb{fill:var(--tone-tint);stroke:var(--tone);stroke-width:1}
.fsvg .fb2{fill:rgb(var(--acc-rgb) / .14);stroke:var(--acc2);stroke-width:1}

.fstack{display:grid;gap:4px}
.fstack li{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);color:var(--muted)}
.fstack li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--faint)}
.fstack li.is-hl{border-color:var(--tone-border);background:var(--tone-tint);color:var(--text)}
.fstack li.is-hl::before{background:var(--tone)}
.fstack.is-sm{gap:3px}
.fstack.is-sm li{padding:5px 9px;font-size:12px}

.fpair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.fbox{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(255,255,255,.03)}
.fbox b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;font-weight:500;color:var(--text)}
.fbox span{font-size:11.5px;color:var(--soft)}
.fbox code{font-family:var(--mono);font-size:11.5px;color:var(--tone)}
.fswap{color:var(--faint)}
.fresolved{display:grid;gap:2px;padding:9px 11px;border:1px solid var(--tone-border);border-radius:9px;background:var(--tone-tint)}
.fresolved b{font-weight:500;color:var(--text)}
.fresolved span{font-size:11.5px;color:var(--muted)}

.fkv li{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-top:1px solid var(--line);color:var(--muted)}
.fkv li:first-child{border-top:0}
.fkv em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--tone)}

/* sparklines stretch to the panel; non-scaling strokes keep the line weight and the round end-dot true at any width */
.fspark{display:block;width:100%;height:46px;overflow:visible}
.fspark.tall{height:84px}
.fspark .fl2,.fspark .fdash,.fspark .fend{vector-effect:non-scaling-stroke}
.fspark .fl2{fill:none;stroke:var(--tone);stroke-width:1.6;stroke-linecap:round}
.fspark .fdash{stroke:var(--tone-border);stroke-width:1;stroke-dasharray:3 3}
.fspark .fend{stroke:var(--tone);stroke-width:6;stroke-linecap:round}
.fchg{display:grid;gap:6px}
.fchg li{display:flex;align-items:center;gap:9px;color:var(--muted)}
.fchg li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--dot,var(--tone))}
.fchg li span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint)}

.floop{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". a ." "b c d" ". e .";gap:10px 8px;align-items:center;justify-items:center}
.fchip{padding:6px 11px;border:1px solid var(--tone-border);border-radius:8px;background:var(--tone-tint);font-size:11.5px;white-space:nowrap;color:var(--text)}
.fchip.a{grid-area:a}.fchip.b{grid-area:b}.fchip.d{grid-area:d}.fchip.e{grid-area:e}
.fdb{grid-area:c;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--tone);background:var(--tone-tint);color:var(--tone)}
.fdb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.fbuild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;align-items:center}
.fask{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line2);border-radius:9px;background:rgba(255,255,255,.03);color:var(--soft)}
.fsend{margin-left:auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tone);color:#0A0A0F;font-style:normal;font-size:12px}
.frun{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px}
.fbars{display:flex;align-items:flex-end;gap:5px;height:68px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02)}
.fbars i{flex:1;height:var(--h);border-radius:2px;background:linear-gradient(180deg,var(--tone),rgb(var(--acc-rgb) / .25))}
.flines{display:grid;gap:6px;align-content:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02)}
.flines li{display:flex;align-items:center;gap:8px}
.flines i{flex:none;width:9px;height:9px;border-radius:50%;border:1px solid var(--tone)}
.flines b{flex:1;height:4px;border-radius:2px;background:var(--line2)}

.fpol{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line2);border-radius:9px;background:rgba(255,255,255,.03)}
.fpol svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--tone);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fpol em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.fpol em.is-ok{color:var(--sage)}
.ftoggle{margin-left:auto;position:relative;width:34px;height:20px;border-radius:var(--r-pill);background:var(--tone)}
.ftoggle::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#0A0A0F}

.ftime{position:relative;display:grid;gap:2px;padding-left:4px}
.ftime::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:1px;background:var(--tone-border)}
.ftime li{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:7px 0 7px 22px;color:var(--ink-strong)}
.ftime li::before{content:"";position:absolute;left:4px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--tone)}
.ftime em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)}
.ftime b{font-weight:500;color:var(--sage)}
.fperf{align-self:flex-end}

/* ═══ DESKTOP: one row per list, like the infographics ═══════════════════════════════════════════
   Six (Ground) or five (Crew) cards side by side, so everything is set smaller: the comfortable sizes
   above still apply below 1280px, where the cards stack two across. */
@media(min-width:1280px){
  .fgrid{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:10px;margin-top:clamp(28px,3vw,44px)}
  .fgrid.is-five{--n:5}
  .fgrid>.fcard,.fgrid.is-five>.fcard:nth-child(n+4){grid-column:auto}

  .fcard{padding:16px 14px 18px;border-radius:14px}
  .fcard:hover{transform:translateY(-2px)}
  .fhd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center}
  .fhd>div{display:contents}
  .fnum{width:28px;height:28px;border-radius:8px;font-size:11px}
  .fhd h3{grid-column:2;font-size:22px}
  .fhd p{grid-column:1/-1;margin-top:2px;font-size:12.5px;line-height:1.45;min-height:5.8em}
  .fviz{margin:10px 0 14px;padding:10px;min-height:226px;gap:7px;font-size:11px;border-radius:10px}
  .flist{gap:8px;margin-top:0}   /* directly under the panel, as in the infographic */
  .flist li{padding-left:13px;font-size:12.5px;line-height:1.35}
  .flist li::before{top:.5em;width:4px;height:4px}

  /* the panels, scaled to a ~150px-wide card */
  .fhead{flex-wrap:wrap;gap:6px;font-size:11.5px}
  .fpill{padding:2px 7px;font-size:9px}
  .fstack li{gap:7px;padding:5px 8px}
  .fstack.is-sm li{padding:4px 7px;font-size:11px}
  .fpair{position:relative;grid-template-columns:minmax(0,1fr);gap:4px}
  .fswap{position:absolute;left:50%;top:50%;z-index:1;padding:0 3px;font-size:11px;line-height:1.3;background:#0A0B10;border-radius:4px;transform:translate(-50%,-50%) rotate(90deg)}   /* the ↔ joins the two boxes without taking a row of its own */
  .fbox{padding:5px 8px}
  .fbox b{font-size:10px}
  .fbox span,.fbox code,.fresolved span{font-size:10.5px}
  .fresolved{padding:6px 8px}
  .fkv li{padding:5px 2px;font-size:11px}
  .fchg li{gap:7px;font-size:10.5px}
  .fchg li span{font-size:9.5px}
  .floop{grid-template-columns:auto auto auto;justify-content:center;gap:8px 4px}
  .fchip{padding:4px 5px;font-size:9.5px}
  .fdb{width:26px;height:26px}
  .fdb svg{width:14px;height:14px}
  .fbuild{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:6px}
  .fask{padding:6px 8px;font-size:11px}
  .fsend{width:20px;height:20px;font-size:11px}
  .fbars{height:56px;padding:8px}
  .flines{padding:6px 8px}
  .fpol{gap:8px;padding:7px 9px;font-size:11.5px}
  .fpol svg{width:14px;height:14px}
  .fpol em{font-size:10.5px}
  .ftoggle{width:30px;height:17px}
  .ftoggle::after{top:3px;right:3px;width:11px;height:11px}
  .ftime li{gap:8px;padding:5px 0 5px 20px;font-size:11.5px}
  .ftime em{font-size:10px}
  .fspark.tall{height:66px}
}

/* ═══ FIT THE SCREEN (desktop): type, panels and spacing follow the window height ═══ */
@media(min-width:1280px) and (min-height:600px){
  .flow{margin-top:clamp(8px,1.8vh,22px);font-size:clamp(24px,min(3.4vw,6vh),52px)}
  .flow+.lede{margin-top:clamp(8px,1.6vh,20px);max-width:110ch;font-size:clamp(13.5px,2vh,17px)}
  .fgrid{margin-top:clamp(12px,2.5vh,44px)}
  .fcard{padding:clamp(12px,1.9vh,16px) 14px clamp(14px,2.2vh,18px)}
  .fhd h3{font-size:clamp(19px,3.1vh,22px)}
  .fhd p{font-size:clamp(11.5px,1.65vh,12.5px);min-height:4.4em}
  .fviz{margin:clamp(6px,1.2vh,10px) 0 clamp(8px,1.6vh,14px);min-height:clamp(120px,22vh,226px)}
  .flist{gap:clamp(3px,.7vh,8px)}
  .flist li{padding-left:11px;font-size:clamp(10.8px,1.45vh,12.5px)}
  .flist li::before{top:.52em}
  .fnote{margin-top:clamp(4px,.9vh,22px)}
}

/* shorter windows (a laptop with browser chrome is ~770–900px tall): the illustrative panels go denser so the
   tallest of them fits ~150px and the row of cards fits the screen */
@media(min-width:1280px) and (min-height:600px) and (max-height:940px){
  .fviz{min-height:clamp(112px,17.5vh,226px);padding:8px 10px;gap:5px;line-height:1.3}
  .fstack li{padding:3px 8px}
  .fstack.is-sm li{padding:2px 7px}
  .fbox{padding:4px 8px}
  .fbox span{display:none}                      /* the caption ("Customer ID") goes; the id itself stays */
  .fresolved{padding:5px 8px}
  .fkv li{padding:2.5px 2px}
  .fhead{flex-wrap:nowrap}
  .fpill{padding:1px 6px;font-size:8.5px}
  .fspark{height:30px}
  .fspark.tall{height:52px}
  .fchg{gap:3px}
  .fchg li{white-space:nowrap;font-size:10px}
  .fchg li span{font-size:9px}
  .floop{gap:5px 3px}
  .fpol{padding:5px 8px}
  .ftime li{padding:3px 0 3px 18px}
  .fask{padding:5px 8px}
  .fbars{height:48px;padding:6px}
}

@media(prefers-reduced-motion:reduce){.fcard{transition:none}.fcard:hover{transform:none}}