/* classes-page-v1 (CLASSES-INDEX-1, 2026-10-25): https://siqwes.com/classes/ only (scripts/classesindex.py), linked after the site bundle
   + tokens; the theme (nebula night) stays last. Nebula night only: space #06060A, header #0E0F13 @88%, panel #191B20 @96%, smoked glass
   rgba(23,24,29,.80). No navy. Pure CSS, CSP-safe, no script. Section A = the rename bundle's HEADER-LAYOUT-2 rules verbatim (scoped by
   .sh--v2, which only this page's header carries until the bundle ships them site-wide). Section B = the page. */

/* ---------- A. HEADER-LAYOUT-2 (founder 02:43 UTC; class-renames d2dd1bc sh-classes-v1.css, verbatim) ---------- */
.sh--v2 .sh__inner{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"home cta title right";column-gap:16px}
.sh--v2 .sh__cta{grid-area:cta;justify-self:start}
.sh--v2 .sh__title{grid-area:title;justify-self:stretch;min-width:0;text-align:left;font-size:1.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh--v2 .sh__right{grid-area:right;justify-self:end}
@media (max-width:1023.98px){
  .sh--v2 .sh__inner{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"home cta right" "title title title";row-gap:0;padding-top:6px;padding-bottom:8px;min-height:0}
  .sh--v2 .sh__title{text-align:center;font-size:1rem;line-height:1.4;white-space:nowrap;text-wrap:nowrap}
}
@media (max-width:419.98px){
  .sh--v2 .sh__inner{column-gap:8px}
  .sh--v2 .sh__title{font-size:.9375rem}
}
.sh--v2 .sh__blog{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}

/* ---------- B. page = Creative specs/classes-page-v1.css abe6cdd0, verbatim ---------- */
/* /classes/ page v1, Section B (Creative 2026-10-25, founder 02:52 UTC). Replaces Section B of shared/styles/page/classes-page-v1.css
   (keep Section A, HEADER-LAYOUT-2). Markup = Web SKELETON.md class names + 2 optional decorative slots (.cx-card__badge, chip dots).
   Same family as specs/hub-series-cards-v1.css (accent edge, niche glow, line icons, smoked glass). Nebula night only, no navy. No script. */
.page--classes{--cx-gutter:var(--layout-gutter,24px)}
.cx-card[data-class="business"]{--nc:#9BE8F6}.cx-card[data-class="education"]{--nc:#AAD8B6}.cx-card[data-class="realestate"]{--nc:#ECBEAC}
.cx-card[data-class="assistants"]{--nc:#C5B7E6}.cx-card[data-class="bookkeeping"]{--nc:#E4B5CF}.cx-card[data-class="hub"]{--nc:#2FD3EE}
.cx-chip[href="#cx-business-card"]{--nc:#9BE8F6}.cx-chip[href="#cx-education-card"]{--nc:#AAD8B6}.cx-chip[href="#cx-realestate-card"]{--nc:#ECBEAC}
.cx-chip[href="#cx-assistants-card"]{--nc:#C5B7E6}.cx-chip[href="#cx-bookkeeping-card"]{--nc:#E4B5CF}.cx-chip[href="#cx-hub-card"]{--nc:#2FD3EE}

/* ---------- hero: text only (LCP = H1), soft nebula behind ---------- */
.cx-hero{position:relative;isolation:isolate;padding:56px 0 8px;text-align:center}
.cx-hero::before{content:"";position:absolute;z-index:-1;inset:-40px 0 -80px;pointer-events:none;
  background:radial-gradient(40% 70% at 22% 40%,rgba(90,160,165,.12),transparent 70%),radial-gradient(38% 70% at 80% 30%,rgba(150,110,210,.16),transparent 70%),
             radial-gradient(30% 60% at 52% 100%,rgba(190,120,170,.10),transparent 70%)}
.cx-hero__copy{max-width:46rem;margin:0 auto}
.cx-hero .display{margin:0 0 14px;color:#FFFFFF}
.cx-hero .lead{margin:0 auto;max-width:40rem;color:#E6E9EF}
@media (min-width:1024px){.cx-hero{padding:80px 0 12px}}

/* ---------- chips: "Which Class is for me?" (in-page anchors, >=44px) ---------- */
.cx-chips{padding:28px 0 4px;text-align:center}
.cx-chips__title{margin:0 0 14px;font-family:var(--font-body);font-size:1rem;line-height:1.4;font-weight:700;color:#E6E9EF}
.cx-chips__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cx-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font-size:15px;line-height:1.2;font-weight:600;
  color:#FFFFFF;text-decoration:none;background:rgba(23,24,29,.80);border:1px solid color-mix(in srgb,var(--nc,#2FD3EE) 45%,rgba(255,255,255,.12));
  transition:background .2s,border-color .2s}
.cx-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nc,#2FD3EE);box-shadow:0 0 8px color-mix(in srgb,var(--nc,#2FD3EE) 60%,transparent)}
.cx-chip:hover{background:color-mix(in srgb,var(--nc,#2FD3EE) 14%,#17181D);border-color:var(--nc,#2FD3EE)}
.cx-chip:focus-visible{outline:3px solid #2FD3EE;outline-offset:3px}
@media (max-width:767.98px){.cx-chips__list{justify-content:flex-start}.cx-chips{text-align:left}}

/* ---------- proof strip: 4 facts, text in HTML, line icons ---------- */
.cx-proof{padding:24px 0 8px}
.cx-proof__list{list-style:none;margin:0 auto;padding:14px 18px;max-width:60rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;
  background:rgba(14,15,19,.88);border:1px solid rgba(255,255,255,.10);border-radius:16px}
@media (min-width:900px){.cx-proof__list{grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 24px}}
.cx-proof__item{display:flex;align-items:center;gap:10px;min-height:28px;font-size:15px;line-height:1.3;font-weight:600;color:#E6E9EF}
.cx-proof__item svg{flex:none;width:22px;height:22px;color:#2FD3EE}

/* ---------- card grid: 1 / 2 / 3 columns (390 / 768 / 1280) ---------- */
.cx-list{padding-top:32px}
.cx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (min-width:1120px){.cx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cx-card{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;scroll-margin-top:96px;
  background:radial-gradient(120% 50% at 50% 0%,color-mix(in srgb,var(--nc) 10%,transparent),transparent 70%),rgba(23,24,29,.80);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  border:1px solid color-mix(in srgb,var(--nc) 26%,rgba(255,255,255,.08));border-radius:20px;
  box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  transition:translate .2s cubic-bezier(.2,0,0,1),border-color .2s,box-shadow .2s}
.cx-card::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--nc) 0%,color-mix(in srgb,var(--nc) 40%,transparent) 55%,transparent 100%)}
.cx-card:hover{translate:0 -4px;border-color:color-mix(in srgb,var(--nc) 55%,rgba(255,255,255,.18));
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--nc) 45%,transparent),0 0 32px color-mix(in srgb,var(--nc) 18%,transparent)}
.cx-card:focus-within:has(:focus-visible){border-color:var(--nc);box-shadow:0 0 0 1px var(--nc),0 0 28px color-mix(in srgb,var(--nc) 22%,transparent)}
/* image slot: fixed 16:9 (no CLS), fades into the card */
.cx-card__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
/* optional family badge: the hub-card hero icon over the image edge (decorative, alt="") */
.cx-card{container-type:inline-size}
.cx-card__badge{position:absolute;z-index:2;left:20px;top:calc(56.25cqw - 30px);width:56px;height:56px;display:grid;place-items:center;border-radius:14px;
  background:#17181D;border:1px solid color-mix(in srgb,var(--nc) 50%,transparent);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 18px color-mix(in srgb,var(--nc) 18%,transparent)}
.cx-card__badge img{display:block;width:40px;height:40px;object-fit:contain}
.cx-card__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;gap:10px;padding:30px 20px 22px}
@media (min-width:1024px){.cx-card__body{padding:34px 26px 26px}}
.cx-card__title{margin:0;font-family:var(--font-heading);font-size:1.375rem;line-height:1.25;font-weight:800}
.cx-card__title a{display:inline-block;padding:4px 0;min-height:44px;box-sizing:border-box;color:#FFFFFF;text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--nc) 60%,transparent);text-underline-offset:4px}
.cx-card__title a:hover{text-decoration-thickness:2px;text-decoration-color:var(--nc)}
.cx-card__title a:focus-visible,.cx-card__btn:focus-visible{outline:3px solid #2FD3EE;outline-offset:3px;border-radius:8px}
@media (min-width:1024px){.cx-card__title{font-size:1.375rem}}
.cx-card__outcome{margin:0;font-size:1.0625rem;line-height:1.5;font-weight:600;color:var(--nc)}
.cx-card__who{margin:0;font-size:15px;line-height:1.5;color:#CFD6E1}
.cx-card__practice{margin:4px 0 0}
.cx-card__label{margin:0 0 6px;font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.02em;color:#B4BCC8}
.cx-card__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cx-card__list li{position:relative;padding-left:24px;font-size:15px;line-height:1.45;color:#E6E9EF}
.cx-card__list li::before{content:"";position:absolute;left:4px;top:.3em;width:5px;height:10px;border:solid var(--nc);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* meta + price + button pinned to the bottom so rows line up */
.cx-card__meta{margin:auto 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.10);font-size:14px;line-height:1.4;color:#CFD6E1}
.cx-card__price{margin:0;font-size:1.0625rem;line-height:1.4;color:#FFFFFF}
.cx-card__price strong{font-weight:800}
.cx-card__btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;margin-top:6px;padding:10px 14px !important;font-size:16px !important;letter-spacing:0;white-space:normal;text-align:center;line-height:1.25}
.cx-card__btn svg{flex:none}

/* ---------- closing band: the ONE page-level primary ---------- */
.cx-close{padding:48px 0 72px}
.cx-close__panel{position:relative;overflow:hidden;isolation:isolate;max-width:52rem;margin:0 auto;padding:36px 24px;text-align:center;border-radius:24px;
  background:radial-gradient(60% 120% at 50% 120%,rgba(47,211,238,.14),transparent 70%),radial-gradient(40% 90% at 90% 0%,rgba(150,110,210,.16),transparent 70%),rgba(23,24,29,.80);
  border:1px solid rgba(255,255,255,.12)}
.cx-close__panel .h2{margin:0 0 8px;color:#FFFFFF}
.cx-close__panel p{margin:0 auto 20px;max-width:36rem;color:#E6E9EF}
.cx-close__panel .btn{min-height:48px}
.cx-close__panel .btn:focus-visible{outline:3px solid #2FD3EE;outline-offset:3px}
@media (min-width:768px){.cx-close__panel{padding:48px 40px}}
@media (prefers-reduced-motion:reduce){.cx-card,.cx-chip{transition:none}.cx-card:hover{translate:none}}

/* ---------- C. Web: addendum ac1e5b6e parts (hero intro paragraph, explainer band, Common questions) in the closing-band panel style
   (Creative spec 8558ecb8 "Notes for Web": reuse .cx-close__panel). Card buttons below 520px stay one line for the locked labels. ---------- */
.cx-hero__intro{margin:12px auto 0;max-width:40rem;color:#CFD6E1;font-size:1rem;line-height:1.6;text-wrap:pretty}
.cx-hero__intro a{color:#9BE8F6;text-underline-offset:3px;font-weight:700}
.cx-explain,.cx-faq{padding:24px 0}
.cx-explain__grid{display:grid;gap:16px;margin:18px 0 22px;text-align:left}
@media (min-width:768px){.cx-explain__grid{grid-template-columns:1fr 1fr;gap:20px}}
.cx-explain__item,.cx-faq__item{padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.cx-explain__k,.cx-faq__q{margin:0 0 8px;font-size:1.125rem;line-height:1.35;color:#FFFFFF}
.cx-explain__item p,.cx-faq__item p{margin:0;color:#CFD6E1;font-size:1rem;line-height:1.6}
.cx-faq__list{display:grid;gap:14px;margin-top:18px;text-align:left}
@media (max-width:767.98px){.cx-close__panel .btn{width:100%;justify-content:center}}
/* Creative QA 3f004006 fixes 4-5 (verbatim) */
.cx-hero__copy p a{display:inline-block;padding-block:11px;margin-block:-11px}
.cx-hero .lead + p{margin:12px auto 0;max-width:40rem}