/* RIVET course page — composition layer (AIWS). Layout, rhythm and type only: no content lives here.
   Scoped to the page through body[data-product] so it can be switched on for CRGA with one attribute. */

/* 1 · one vertical rhythm: content sections breathe, the FAQ interludes sit tighter */
body[data-product="aiws"] #main > .section:not(.phero){ padding-block:clamp(64px,7vw,104px) !important; }
body[data-product="aiws"] #main > .section.miniq{ padding-block:clamp(44px,4.6vw,68px) !important; }
body[data-product="aiws"] #main > .section.tcta{ padding-block:clamp(72px,8vw,112px) !important; }
body[data-product="aiws"] #main > .section--tight{ padding-block:clamp(24px,2.6vw,36px) !important; }
body[data-product="aiws"] #main > section{ scroll-margin-top:88px; }

/* 2 · one grid: every section shares the same left edge */
body[data-product="aiws"] #main .miniq .wrap{ max-width:var(--maxw,1200px) !important; }

/* 3 · section heads: eyebrow → headline → lead, spaced by the type, not by stacked gaps */
body[data-product="aiws"] #main .sec-head{ gap:0 !important; max-width:780px; margin-bottom:clamp(32px,3.6vw,52px); }
body[data-product="aiws"] #main .sec-head.center{ margin-inline:auto; }
body[data-product="aiws"] #main .sec-head .eyebrow{ margin:0 0 14px !important; font-size:.76rem; line-height:1.3; }
body[data-product="aiws"] #main .sec-head :is(h2,.h2){ margin:0 !important; font-size:clamp(1.9rem,1.25rem + 2.1vw,2.75rem) !important; line-height:1.08 !important; letter-spacing:-.03em !important; text-wrap:balance; }
body[data-product="aiws"] #main .sec-head .lead{ margin:16px 0 0 !important; max-width:58ch; font-size:clamp(1.02rem,.96rem + .3vw,1.14rem); line-height:1.6; text-wrap:pretty; }
body[data-product="aiws"] #main .miniq .sec-head{ margin-bottom:clamp(20px,2.4vw,28px); }
body[data-product="aiws"] #main .miniq .sec-head :is(h2,.h2){ font-size:clamp(1.5rem,1.15rem + 1.2vw,2rem) !important; }

/* 4 · reading measure and wrapping everywhere text runs long */
body[data-product="aiws"] #main p{ text-wrap:pretty; }
body[data-product="aiws"] #main :is(h3,h4){ text-wrap:balance; }
body[data-product="aiws"] #main .lead{ line-height:1.6; }
body[data-product="aiws"] #main :is(.audcard,.plan,.cohc,.vquote) p{ max-width:62ch; }

/* 5 · one corner, one hairline: cards 16px, the big stages 20px */
body[data-product="aiws"] #main :is(.audcard,.plan,.cohc,.cstage__mod,.cstage__tcard){ border-radius:16px !important; }
body[data-product="aiws"] #main .cstage__panel{ border-radius:20px !important; }

/* 6 · actions: one height for every primary and secondary button */
body[data-product="aiws"] #main :is(.btn--magenta,.btn--primary,.btn--ghost){ min-height:48px; }
body[data-product="aiws"] #main .btn--lg{ min-height:52px; }

/* 7 · numbers line up */
body[data-product="aiws"] #main :is([data-cprice],[data-usd],[data-claunch],[data-seats-left],.cohc__date,.cjour__count){ font-variant-numeric:tabular-nums; }

/* 8 · focus stays the system's Vivid Purple */
body[data-product="aiws"] #main :is(a,button,summary,[tabindex]):focus-visible{ outline:2px solid #3B06D4; outline-offset:3px; }

@media (max-width:720px){
  body[data-product="aiws"] #main > .section:not(.phero){ padding-block:clamp(48px,12vw,64px) !important; }
  body[data-product="aiws"] #main > .section.miniq{ padding-block:40px !important; }
  body[data-product="aiws"] #main .sec-head{ margin-bottom:28px; }
}

/* 9 · what you'll need: five dated steps, one card language with the cohorts */
body[data-product="aiws"] #needs .need{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:14px; }
body[data-product="aiws"] #needs .need__i{ display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:16px; border:1px solid rgba(255,255,255,.13); background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); }
body[data-product="aiws"] #needs .need__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
body[data-product="aiws"] #needs .need__n{ font:600 .78rem/1 'IBM Plex Mono',monospace; letter-spacing:.06em; color:rgba(255,255,255,.62); }
body[data-product="aiws"] #needs .need__w{ padding:6px 10px; border-radius:999px; border:1px solid rgba(76,243,254,.45); background:rgba(76,243,254,.08); font:600 .72rem/1 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:#4CF3FE !important; white-space:nowrap; }
body[data-product="aiws"] #needs .need__ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#4CF3FE; }
body[data-product="aiws"] #needs .need__i b{ font-size:1.04rem; line-height:1.3; }
body[data-product="aiws"] #needs .need__i small{ display:block; font-size:.92rem; line-height:1.55; }
body[data-product="aiws"] #needs .need__i .ailogos{ margin-top:auto; }
/* 10 · cohorts: three cards across wherever three fit */
@media (min-width:840px){
  body[data-product="aiws"] #cohorts .cohtrack{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; overflow:visible !important; scroll-snap-type:none; }
  body[data-product="aiws"] #cohorts .cohtrack > .cohc{ flex:none; min-width:0; width:auto; }
  body[data-product="aiws"] #cohorts .cohnav, body[data-product="aiws"] #cohorts [data-coh-prev], body[data-product="aiws"] #cohorts [data-coh-next]{ display:none !important; }
}
/* below 840px: a swipe row, the next card peeking, with the arrows and progress bar */
@media (max-width:839px){
  body[data-product="aiws"] #cohorts .cohtrack{ display:flex !important; overflow-x:auto !important; scroll-snap-type:x mandatory; gap:12px; padding:8px 2px 18px; }
  body[data-product="aiws"] #cohorts .cohtrack > .cohc{ flex:0 0 min(86%,380px); min-width:0; width:auto; scroll-snap-align:start; }
  body[data-product="aiws"] #cohorts .cohtrack > .cohc[hidden]{ display:none !important; }
}
/* 9b · needs: balanced rows at every width (5 across · 3+2 · 2+2+1 · 1) */
body[data-product="aiws"] #needs .need{ grid-template-columns:minmax(0,1fr) !important; }
@media (min-width:560px){ body[data-product="aiws"] #needs .need{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } body[data-product="aiws"] #needs .need__i:nth-child(5){ grid-column:1 / -1; } }
@media (min-width:760px){ body[data-product="aiws"] #needs .need{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } body[data-product="aiws"] #needs .need__i{ grid-column:span 2; } body[data-product="aiws"] #needs .need__i:nth-child(n+4){ grid-column:span 3; } }
@media (min-width:1100px){ body[data-product="aiws"] #needs .need{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } body[data-product="aiws"] #needs .need__i, body[data-product="aiws"] #needs .need__i:nth-child(n+4){ grid-column:auto; } }
