/* AGENTIC-HUB-1 v0.2 (2026-11-01 ~8:45 AM ET): final copy; showcase one card / no price / one button + meta; tiles full row only >=1024; first-screen trims; theme sample D6 (full brief, Copy 44px, labelled reply); ba-note in AFTER; sticky bars <1024 (D4); no reveal (D5); h3b phone order (B4). */
/* AGENTIC-HUB-1 v0.1 (Creative, 2026-11-01). Nebula night only. Load LAST, after sell-first-1-web.css.
   Part A = site-wide alignment and spacing system (one grid, one section gap, one card padding, one grid gap).
   Part B = hub showcase + 7-tile set + equal-height Courses/Free row.
   Part C = /classes/ featured Agentic card.
   Part D = theme pages (all 7, incl. agentic.siqwes.com): no hero CTA row, centred post-sample button, flat module list.
   No new colours: every value is an existing --nn-* token or its documented fallback. */

/* ───────── A. Tokens ───────── */
:root{
  --nn-grid-max:1120px;          /* the one content width: header, hero, tiles, cards, footer */
  --nn-gutter:24px;              /* side gutter >=768 */
  --nn-section-gap:48px;         /* padding-block of every top-level section (content-to-content = 2x); page-title band: top only */
  --nn-card-pad:28px;            /* inner padding of every card (all four sides) */
  --nn-grid-gap:24px;            /* gap between cards in any row or column of cards */
  --nn-measure:68ch;             /* text measure INSIDE cards / hero (never the card edge) */
  --nn-space:#06060A; --nn-panel:#191B20; --nn-accent-hub:#2FD3EE;
  --nn-panel-border:rgba(255,255,255,.08); --nn-text-title:#FFFFFF; --nn-text-body:#CFD6E1; --nn-text-lead:#E6E9EF;
}
@media (max-width:767.98px){:root{--nn-gutter:20px;--nn-section-gap:28px}}
@media (max-width:599.98px){:root{--nn-card-pad:20px;--nn-grid-gap:16px}}

/* A1. One grid: every wrapper's content box = header content box */
.sh__inner,
.container,
.page--h3b .container,
.aud-section .container,
.sf .sf-wrap,.sf .sf-wrap--hero,.sf .sf-wrap--read,.sf .sf-wrap--ba,.sf .sf-wrap--wide,
.page--class-sell > .cl-buy > .container,.page--class-sell > .cl-proof > .container,.page--class-sell > .cl-proof--ba > .container,
.section--how .container,.section--faq .container,.section--signup .container,
.site-footer__inner{
  box-sizing:border-box;max-width:calc(var(--nn-grid-max) + 2 * var(--nn-gutter));
  margin-left:auto;margin-right:auto;padding-left:var(--nn-gutter);padding-right:var(--nn-gutter)}

/* A2. One section gap. Exception kept site-wide: the page-title band -> first section uses the live title-band rule clamp(24px,1.8vw+17px,40px). */
html body main > .page-title{padding:var(--nn-section-gap) 0 0}
html body main > :is(section,nav):not(.page-title){padding-top:var(--nn-section-gap);padding-bottom:var(--nn-section-gap)}
html body .h3b{padding:var(--nn-section-gap) 0 calc(var(--nn-section-gap) * 2)}

/* A3. One grid gap */
.aud-grid,.h3b,.cx-grid,.sf-course,.ba__grid{gap:var(--nn-grid-gap)}

/* A4. One card padding, equal-height rows, CTA pinned to the bottom */
.aud,.h3b__card,.h3b__card.glass-panel,.sf-offer,.cx-card__body,.ba__panel,.sl,.sf-free,.ah-show__card{padding:var(--nn-card-pad)}
.aud-grid,.h3b,.cx-grid{align-items:stretch}
.aud-grid__item,.h3b__item,.cx-card{display:flex}
.aud,.h3b__card,.cx-card{flex:1 1 auto}
.h3b__card,.cx-card__body{display:flex;flex-direction:column}
.h3b__btn,.cx-card__btn{margin-top:auto}
.h3b__list,.h3b__list + .h3b__btn{margin-bottom:0}
.h3b__list{margin-bottom:24px}

/* A5. Reading measure lives inside the card, not on the card edge */
.sf .sl,.sf .sf-free,.sf .sf-free-faq,.sf .sf-free-faq .faq,.sf .ba,.sf .ba__grid,.sf .sf-course,.page--class-sell .sl,.page--class-sell .modules,.page--class-sell .ba,.page--class-sell .ba__grid{max-width:none;margin-left:0;margin-right:0}
.sl > *,.sf-free > *{max-width:var(--nn-measure)}
.sf-hero .sf-wrap > *{max-width:var(--nn-measure);margin-left:auto;margin-right:auto}
@media (max-width:767.98px){.sf-hero .sf-wrap > *{margin-left:0;margin-right:0}}

/* ───────── B. Hub ───────── */
/* B1. Showcase (pinned copy hub-agentic-showcase 74a69da6): ONE full-width card on the grid, NO price, ONE button.
   Text column max 640px on desktop + optional people-free icon art on the right (>=1024); full width on phones. */
.ah-show__card{position:relative;display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);column-gap:calc(var(--nn-grid-gap) * 2);align-items:center;
  background:var(--nn-panel);border:1px solid rgba(47,211,238,.35);border-radius:24px;overflow:hidden}
.ah-show__card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--nn-accent-hub)}
.ah-show__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ah-show__top{margin:0 0 14px}
.ah-show__name{margin:0 0 12px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:2.25rem;line-height:1.15;color:var(--nn-text-title)}
.ah-show__promise{margin:0 0 8px;font-size:1.1875rem;line-height:1.5;color:var(--nn-text-lead)}
.ah-show__line2{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--nn-text-body)}
.ah-show__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ah-show__list li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.45;color:var(--nn-text-body)}
.ah-show__list svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--nn-accent-hub)}
.ah-show__cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:24px}
.ah-show__cta .btn{justify-content:center;gap:8px;white-space:nowrap}
.ah-show__cta .btn:focus-visible{outline:3px solid var(--nn-accent-hub);outline-offset:3px}
.ah-show__meta{margin:0;font-size:.9375rem;line-height:1.4;color:#B4BCC8}   /* small muted line under the one button (8.4:1 on #191B20) */
.ah-show__art{justify-self:center;display:flex;align-items:center;justify-content:center;width:200px;height:200px;border-radius:32px;
  background:rgba(47,211,238,.08);border:1px solid rgba(47,211,238,.25);color:var(--nn-accent-hub)}
.ah-show__art svg{width:112px;height:112px}
@media (max-width:1023.98px){
  .ah-show__card{grid-template-columns:minmax(0,1fr)}
  .ah-show__art{display:none}          /* icon is optional: desktop only, so the CTA stays in the first screen */
  .ah-show__name{font-size:1.75rem}
  .ah-show__promise{font-size:1.0625rem}
  .ah-show__line2{font-size:1rem}
}
@media (max-width:599.98px){
  .ah-show__card{border-radius:20px}
  .ah-show__top{margin-bottom:10px}
  .ah-show__name{font-size:1.5rem;margin-bottom:8px}
  .ah-show__promise{margin-bottom:6px}
  .ah-show__list{display:none}   /* reviewer #3a: bullets hidden under 600 (they stay on /class/ and the theme page) */
  .ah-show__cta{align-self:stretch;align-items:center;margin-top:16px}
  .ah-show__cta .btn{width:100%;padding:0 16px;font-size:1.125rem}
}
@media (min-width:1024px){   /* reviewer #3c: tighter showcase so the 2nd tile row shows at 1440x900 */
  .ah-show__card{padding-block:24px}
  .ah-show__name{font-size:2rem;margin-bottom:8px}
  .ah-show__top{margin-bottom:10px}
  .ah-show__list{margin-top:14px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px}
  .ah-show__list li{font-size:.9375rem}
  .ah-show__cta{flex-direction:row;align-items:center;gap:20px;margin-top:20px}
  .ah-show__card{grid-template-columns:minmax(0,1fr) 160px}
  .ah-show__text{max-width:none}
  .ah-show__promise,.ah-show__line2{max-width:640px}
  .ah-show__art{width:160px;height:160px}
  .ah-show__art svg{width:88px;height:88px}
}
/* B1b. Hub H1 (SEO R3): "Learn Agentic AI and Practical AI for Work and Everyday Life" (60). Fitted (headless Chromium): see spec §1. */
@media (max-width:599.98px){.page--h3b .page-title__h{font-size:1.75rem;line-height:1.15}}

/* B2. 7 tiles, Agentic first. v0.2 (reviewer #3d): the Agentic tile spans the row ONLY at >=1024 and uses the
   SAME icon size as the other tiles (no 72px icon). Under 1024 it is a normal tile, same size as the rest. */
.aud-grid > .aud-grid__item:last-child:nth-child(odd),.aud-grid > .aud-grid__item:last-child:nth-child(3n+1){grid-column:auto}
@media (min-width:1024px){
  .aud-grid > .aud-grid__item--feature{grid-column:1 / -1}
  .aud-section--sell .aud-grid__item--feature .aud,.aud-grid__item--feature .aud{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;
    grid-template-areas:"icon name" "icon result";column-gap:16px;align-items:center}
  .aud-grid__item--feature .aud__icon{margin-bottom:0}
}
.aud-grid__item--feature .aud{border-color:rgba(47,211,238,.35)}
/* the old "last odd tile spans the row" layout is retired: with 7 tiles the last tile is a normal tile */
@media (min-width:600px){
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(odd):not(.aud-grid__item--feature) .aud,
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(3n+1):not(.aud-grid__item--feature) .aud{
    grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"icon name" "icon result";column-gap:16px;align-items:start}
}
@media (min-width:1024px){
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(odd):not(.aud-grid__item--feature) .aud,
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(3n+1):not(.aud-grid__item--feature) .aud{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"icon" "name" "result";align-items:start}
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(3n+1):not(.aud-grid__item--feature) .aud__icon{margin-bottom:16px}
}

/* B3. Courses + Free row: equal height, same padding, CTAs on one baseline, outer edges on the grid */
@media (min-width:900px){.h3b.h3b--sell{grid-template-columns:repeat(2,minmax(0,1fr))}}
.h3b--sell .h3b__item{max-width:none}
.h3b--sell .h3b__card{justify-content:flex-start}

/* B4. Hub h3b row on phones (reviewer #6a): Online Courses -> Blog -> Free series, so the free card never sits right under Online Courses */
@media (max-width:599.98px){
  .h3b--sell .h3b__item--classes{order:1}.h3b--sell .h3b__item--blog{order:2}.h3b--sell .h3b__item--free{order:3}
}

/* ───────── C. /classes/ ───────── */
.cx-card__chipline{margin:0}
.cx-card--feature{grid-column:1 / -1}
@media (min-width:768px){
  .cx-card--feature{flex-direction:row}
  .cx-card--feature .cx-card__img,.cx-card--feature .cx-card__art{width:calc((100% - var(--nn-grid-gap)) / 2);flex:none;aspect-ratio:auto;align-self:stretch}
}
@media (min-width:1120px){
  .cx-card--feature .cx-card__img,.cx-card--feature .cx-card__art{width:calc((100% - 2 * var(--nn-grid-gap)) / 3 * 2 + var(--nn-grid-gap))}
}
.cx-card__art{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#101115;color:var(--nn-accent-hub)}
.cx-card__art svg{width:96px;height:96px;opacity:.9}

/* ───────── D. Theme pages (all 7) ───────── */
.sf-hero__actions,.sf-jump,.sf-sec:not(.sf-sec--ba) .sf-cta__line,.sf-modules__total{display:none}   /* safety net only; Web removes the markup. The See-all <details> must be removed in markup (CSS can't open it). */
.sf-cta{justify-content:center;text-align:center}
@media (max-width:599.98px){.sf-cta{align-items:center}.sf-cta .btn{width:100%}}
.sf-modules{display:grid;gap:12px;margin:0 0 32px}
.sf-modules + .sf-modules{margin-top:-20px}   /* only if the build still splits the list in two */

/* Mockup-only: placeholder slot marker (Web: do not ship) */


/* A6. No nested background panels inside a card unless intentional, padded (>=8px) and rounded (>=4px), like .prompt.
   Fix for the "Not convinced?" card: the inline form sits on the card fill. (Web is shipping the same fix.) */
.sf-free .signup,.sf-free .signup-panel,.sf .sf-free .signup-panel .signup,.sf .sf-free .signup-panel{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* NB the dark square rectangle is NOT a background-color: it is .signup-panel backdrop-filter:blur(22px) brightness(.7) (glass). background:transparent alone does not remove it. */

/* D2. Before/after (founder 8:04 AM ET): BEFORE is a neutral panel like AFTER; only the amber BEFORE pill stays.
   (The AFTER cyan top line stays: it marks the result. BEFORE gets the neutral hairline only.) */
.ba__panel--before{background:var(--nn-panel,#191B20);border-color:var(--nn-panel-border,rgba(255,255,255,.08));box-shadow:none}
.ba__panel--before .ba__label{color:var(--nn-warning,#F5D38E);background:rgba(245,211,142,.10);border-color:rgba(245,211,142,.40)}

/* D3. Every "View the Online Course" button = the same solid cyan primary .btn--primary.btn--lg, centred.
   Web switches the post-before/after button from .btn--secondary to .btn--primary in markup; this is the safety net. */
.sf-cta{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.sf-sec--ba .sf-cta__line{margin:0;max-width:44ch;text-align:center}   /* "Module N covers…" (after the before/after only), centred above the button */
.sf-cta .btn--secondary{background:var(--dk-action-bg,#2FD3EE);color:var(--dk-action-text,#06060A);border-color:transparent}
.sf-cta .btn--secondary:hover,.sf-cta .btn--secondary:focus-visible{background:var(--dk-action-bg-hover,#67E0F3);color:var(--dk-action-text,#06060A)}
@media (max-width:599.98px){.sf-cta .btn{width:100%;padding:0 20px;font-size:1.125rem}}
.sf-offer .price,.cl-buy .price{background:transparent;border:0;padding:0;border-radius:0}   /* A6: the price block sits on the offer card fill */
.h3b.h3b--sell .h3b__card,.h3b.h3b--sell .h3b__card.glass-panel{padding:var(--nn-card-pad)}
.cx-proof__list{max-width:none;margin-left:0;margin-right:0}

/* D4. Sticky bars, one breakpoint: shown under 1024px on theme pages AND on /class/ (was <768 on theme pages).
   Theme bar: "View the Online Course" -> /class/. /class/ bar: "Buy the Course" (no price) -> the course's /offer/ page (sf-buybar style). */
@media (min-width:768px) and (max-width:1023.98px){html body .sf-buybar:not([hidden]){display:block !important}}
@media (min-width:1024px){html body .sf-buybar{display:none !important}}

/* D5. Theme page: no fade-in reveal on the sample, the form and the FAQ (reviewer #6b). Visible by default, no JS needed. */
.sf-sec .sl,.sf-free .signup-panel,.sf-free-faq,.sf-free-faq *{animation:none !important;opacity:1 !important;translate:none !important}
@media (prefers-reduced-motion:reduce){.signup-panel,.blog-card,.blog-cta,.blog-try{animation:none !important;opacity:1 !important;translate:none !important}}

/* D6. Theme sample block, Lesson 1.1 (Lead file 41612471 + theme-page-sellfirst.md 8529e5b7).
   The starter brief shows IN FULL (CLO condition b): no max-height, no fade mask, no expander, at every width. */
.sl .prompt + .prompt,.sl .prompt + .sl-out{margin-top:20px}
.sl .prompt__text{max-height:none !important;overflow:visible !important;-webkit-mask-image:none !important;mask-image:none !important;padding-right:0;
  white-space:normal;overflow-wrap:anywhere}
.sl .prompt__text > p{margin:0}.sl .prompt__text > p + p{margin-top:.9em}
.prompt__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.prompt__head .prompt__label{margin:0}
/* Copy button: existing secondary style, visible at every width (always on mobile), 44px min tap target */
.prompt__copy{flex:none;min-height:44px;min-width:88px;padding:0 18px;font-size:1rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.prompt__copy:focus-visible{outline:3px solid var(--nn-accent-hub);outline-offset:3px}
/* Reply: label + up to 3 blocks, each with an OPTIONAL small uppercase muted tag (pending CLO; hide the <p> if unused) */
.sl-out{margin-top:24px;padding:var(--nn-card-pad);border:1px solid rgba(230,233,239,.14);border-radius:16px;background:transparent}
.sl-out__label{margin:0 0 14px;font-weight:700;color:var(--nn-text-title)}
.sl-out__blk + .sl-out__blk{margin-top:18px}
.sl-out__tag{margin:0 0 6px;font-size:.75rem;line-height:1.3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9AA3B2}
.sl-out__tag:empty{display:none}
.sl-out__text{font-size:1rem;line-height:1.55;color:var(--nn-text-body);overflow-wrap:anywhere}
.sl-out__table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.45;color:var(--nn-text-body)}
.sl-out__table th{text-align:left;font-weight:700;color:var(--nn-text-title);padding:0 12px 6px 0;border-bottom:1px solid rgba(230,233,239,.14)}
.sl-out__table td{vertical-align:top;padding:8px 12px 0 0}
.sl-out__table td:first-child{white-space:nowrap}
@media (max-width:599.98px){            /* table stacks on phones: no sideways scroll, no truncation */
  .sl-out__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sl-out__table,.sl-out__table tbody,.sl-out__table tr,.sl-out__table td{display:block;width:auto}
  .sl-out__table td{padding:4px 0 0;white-space:normal !important}
  .sl-out__table td::before{content:attr(data-th);display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9AA3B2}
}
/* B/A Before panel holds a heading + prompt + note (Lead §S2) */
.ba__panel--before .ba__after h4,.ba__panel--after .ba__after h4{margin:0 0 10px}
.ba__panel--before .ba__before{white-space:pre-wrap;margin:0 0 10px}
.ba__panel--before .ba__after > p{margin:0}
.sl__hook{margin:0 0 12px;font-size:1.125rem;font-weight:700;line-height:1.45;color:var(--nn-text-title)}
.cx-card__chipline{display:flex;flex-wrap:wrap;gap:8px}
/* ba-module-line (slot widened to 60): centred, may wrap to 2 lines on phones, balanced */
.sf-sec--ba .sf-cta__line{text-align:center;text-wrap:balance;max-width:40ch;margin-inline:auto}
/* ba-note sits INSIDE the After panel, directly under the After brief (Compliance condition) */
.ba__panel--after .ba__note--in{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(47,211,238,.25);text-align:left;font-weight:700;color:var(--nn-text-title)}

/* v0.2 first-screen pass at >=1024 (reviewer #3c): Everyday Life (2nd tile) inside the 1440x900 first screen */
@media (min-width:1024px){
  html body main > section.ah-show{padding-bottom:0 !important}               /* the tiles section's own 48px top gap separates them */
  .ah-show__text{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start}
  .ah-show__text > *{grid-column:1 / -1}
  .ah-show__text > .ah-show__top{grid-column:1;margin:0 12px 8px 0}
  .ah-show__text > .ah-show__name{grid-column:2}   /* pill "New" sits left of the H2 on one line */
  .aud-section--sell .aud-section__lead{max-width:none}
  .aud-section--sell .aud-grid{margin-top:24px}
  /* feature tile: icon | name | result on one row */
  .aud-section--sell .aud-grid__item--feature .aud,.aud-grid__item--feature .aud{grid-template-columns:56px max-content minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"icon name result";column-gap:20px;align-items:center}
  .aud-grid__item--feature .aud__name,.aud-grid__item--feature .aud__result{margin:0}
}
/* v0.2 sample fit at >=1024: the long Lesson 1.1 block (starter brief in full) uses the card width instead of one 544px column */
@media (min-width:1024px){
  .sl .sl__body{max-width:none}
  .sl .sl__body > p,.sl .sl__steps{max-width:var(--nn-measure)}
  .sl__boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--nn-grid-gap);align-items:stretch;margin-top:20px}
  .sl__boxes .prompt + .prompt{margin-top:0}
  .sl-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--nn-grid-gap);align-items:start}
  .sl-out__label{grid-column:1 / -1}
  .sl-out__blk + .sl-out__blk{margin-top:0}
}
.sl__boxes{margin-top:20px}
.sl__boxes .prompt + .prompt{margin-top:20px}
@media (min-width:1024px){
  html body .aud-section--sell .aud-section__lead{margin-bottom:0}
  html body .aud-section--sell .aud-grid{margin-top:24px}
  html body .aud-section--sell .aud-grid__item--feature .aud{padding-block:18px}
  html body .aud-grid__item--feature .aud__icon{width:48px;height:48px}
  html body .aud-section--sell .aud-grid__item--feature .aud{grid-template-columns:48px max-content minmax(0,1fr)}
}
/* v0.2 final: showcase CTA centred in the text column with the meta line under it (founder 8:04: every
   "View the Online Course" centred), art chip 96px (an icon chip, not a nested panel), and the height trims that
   keep Everyday Life at <=820 at 1440x900 */
.ah-show__art{width:96px;height:96px;border-radius:24px}
.ah-show__art svg{width:56px;height:56px}
@media (min-width:1024px){
  .ah-show__card{grid-template-columns:minmax(0,1fr) 96px;padding-block:20px}
  .ah-show__art{width:96px;height:96px}
  .ah-show__art svg{width:56px;height:56px}
  .ah-show__name{margin-bottom:6px}
  .ah-show__list{margin-top:12px}
  .ah-show__cta{flex-direction:column;align-items:center;justify-self:stretch;gap:6px;margin-top:16px}
  html body .aud-section--sell .aud-grid__item--feature .aud{padding-block:14px}
  html body .aud-section--sell .aud-grid{margin-top:20px}
}