/* hub-class-band-v1 (OFFER-LINK-INTERIM-1, 2026-10-25): the Online Class band on the hub home. Rules copied verbatim from the niche
   shared/styles/page/hub-layout-v2.css (Creative hub-layout-v2, nebula night) so the hub band matches the live niche bands. Pure CSS, CSP-safe. */
.section--class .container,.section--popular .container,.section--free-start .container{max-width:calc(46rem + 2 * var(--layout-gutter,24px))}

/* ---------- NEW paid band: "For more advanced training, try our online class" ---------- */
.class-band{position:relative;display:grid;gap:20px;justify-items:center;text-align:center;
  padding:32px 24px;border-radius:var(--glass-radius,24px);border:1px solid var(--glass-border,rgba(255,255,255,.14));
  background:var(--glass-fill,rgba(23,24,29,.85));-webkit-backdrop-filter:var(--glass-blur,blur(22px));backdrop-filter:var(--glass-blur,blur(22px));
  box-shadow:var(--glass-highlight,inset 0 1px 0 rgba(255,255,255,.22)),var(--glass-glow,inset 0 0 28px rgba(155,232,246,.05)),var(--glass-shadow,0 20px 50px -12px rgba(0,0,0,.55))}
/* paid = the one gold-free "premium" cue we allow: a 2px electric->cyan hairline on the top edge, inside the radius (no seam, no glow) */
.class-band::before{content:"";position:absolute;inset:0 24px auto;height:2px;border-radius:2px;background:var(--glass-accent-bar)}
.class-band__chip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;margin:0;border-radius:999px;
  font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:#2FD3EE;background:rgba(47,211,238,.12);border:1.5px solid #2FD3EE}
.class-band__title{margin:0;max-width:22ch;text-wrap:balance}
.class-band__line{margin:0;max-width:52ch;color:#CFD6E1;font-size:18px;line-height:1.55;text-wrap:pretty}
.class-band__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;text-align:left;max-width:30rem;width:100%}
.class-band__list li{position:relative;padding-left:32px;color:#E6E9EF;font-size:17px;line-height:1.5}
.class-band__list li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:#2FD3EE;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23000'/%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm4.3 6.6l-5.6 6.6-3.2-3.1 1.1-1.1 2 2 4.5-5.4z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}
.class-band__actions{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center;align-items:center;width:100%}
.class-band__link{color:#9BE8F6;font-weight:700;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.class-band__link:hover{color:#fff}
@media (min-width:768px){.class-band{padding:48px 32px}}
@media (max-width:767px){.class-band__actions .btn{width:100%;justify-content:center}}
/* HUB-HOME-BLOCK-1 (CLASS-RENAMES-2026-10-25): price line under the band line/detail (same type scale as the line, bold, white) */
.class-band__price{margin:0;max-width:52ch;color:#FFFFFF;font-weight:700;font-size:18px;line-height:1.55}

/* HOUSE-RULE-FIX-1 (CLO 02:58 UTC 2026-10-25): band H2 'Ready for more? See the <Class name>.' links the site's /class/ (blog-band__title a pattern) */
.class-band__title{max-width:30ch}
.class-band__title a{color:inherit;text-decoration:none;border-radius:6px}
.class-band__title a:hover{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.class-band__title a:focus-visible{outline:none;color:inherit;box-shadow:var(--dk-focus-ring,0 0 0 2px #06060A,0 0 0 5px #2FD3EE)}

/* + hub-series-cards-v1.css 651d47cd (HUB-CHOOSER-2) */
/* Hub "Choose your free series" cards v1 (Creative, 2026-10-25; founder 02:47 UTC "the background is too blah... add the icons from the online classes pages").
   Nebula night only (space #06060A, smoked glass rgba(23,24,29,.80)); no navy, no underwater blue. Load AFTER theme-nebula-night-v1.css.
   Markup: add class "hsc hsc-a" (Option A) or "hsc hsc-b" (Option B, RECOMMENDED) to ul.niche-grid and one .hsc-art block per card
   (see hub-series-cards-v1.md §3). Icons: /assets/hub-series-cards/<niche>-<icon>.svg = brand/web/hub-series-cards-v1/icons/.
   Shared by the /classes/ page cards (classes-page-v1.css) so free cards and class cards are one family. */
.niche-grid.hsc{--hsc-pad:24px;position:relative;isolation:isolate}
@media (min-width:768px){.niche-grid.hsc{--hsc-pad:32px}}
.niche-card--business{--nc:#9BE8F6}.niche-card--education{--nc:#AAD8B6}.niche-card--realestate{--nc:#ECBEAC}
.niche-card--assistants{--nc:#C5B7E6}.niche-card--bookkeeping{--nc:#E4B5CF}.niche-card--hub{--nc:#2FD3EE}
/* section depth: one soft violet/teal/rose nebula behind the grid (no navy) */
.niche-grid.hsc::before{content:"";position:absolute;z-index:-1;inset:-48px -72px;pointer-events:none;
  background:radial-gradient(38% 46% at 16% 30%,rgba(90,160,165,.10),transparent 70%),
             radial-gradient(34% 42% at 84% 22%,rgba(150,110,210,.13),transparent 70%),
             radial-gradient(30% 40% at 55% 92%,rgba(190,120,170,.09),transparent 70%)}
/* card shell (both options) */
.niche-grid.hsc .niche-card{position:relative;overflow:hidden;isolation:isolate;padding:var(--hsc-pad);
  --hsc-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160'%3E%3Cg fill='%23E6E7EA'%3E%3Ccircle cx='18' cy='22' r='.7' opacity='.5'/%3E%3Ccircle cx='71' cy='9' r='.5' opacity='.35'/%3E%3Ccircle cx='132' cy='31' r='.8' opacity='.45'/%3E%3Ccircle cx='190' cy='14' r='.55' opacity='.4'/%3E%3Ccircle cx='47' cy='78' r='.5' opacity='.3'/%3E%3Ccircle cx='160' cy='88' r='.7' opacity='.4'/%3E%3Ccircle cx='96' cy='121' r='.6' opacity='.3'/%3E%3Ccircle cx='205' cy='133' r='.5' opacity='.35'/%3E%3Ccircle cx='12' cy='146' r='.6' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  transition:translate .2s cubic-bezier(.2,0,0,1),box-shadow .2s,border-color .2s,background .2s}
.niche-grid.hsc .niche-card > :not(.hsc-art){position:relative;z-index:1}
.niche-grid.hsc .niche-card::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:2px;   /* top accent edge */
  background:linear-gradient(90deg,var(--nc) 0%,color-mix(in srgb,var(--nc) 40%,transparent) 55%,transparent 100%)}
.niche-grid.hsc .niche-card:hover{translate:0 -4px}            /* theme sets transform:none !important; translate is free */
.niche-grid.hsc .niche-card .card__body{color:#CFD6E1}
.hsc-art{position:absolute;pointer-events:none}
.hsc-art img{position:absolute;display:block;height:auto;transition:translate .25s cubic-bezier(.2,0,0,1)}

/* ---------- Option A: calm icon cluster top-right + hue glow ---------- */
.niche-grid.hsc-a .niche-card{
  background:radial-gradient(240px 190px at 100% 0%,color-mix(in srgb,var(--nc) 20%,transparent),transparent 72%),
             var(--hsc-stars) right top/220px 160px no-repeat,
             rgba(23,24,29,.80) !important}
.niche-grid.hsc-a .hsc-art{top:12px;right:10px;width:116px;height:96px;opacity:.95}
.niche-grid.hsc-a .hsc-art img{width:auto}
.niche-grid.hsc-a .hsc-art__hero{height:58px;left:30px;top:14px}
.niche-grid.hsc-a .hsc-art__a{height:28px;left:2px;top:6px;opacity:.8}
.niche-grid.hsc-a .hsc-art__b{height:34px;right:2px;top:56px}
.niche-grid.hsc-a .niche-card__name{max-width:calc(100% - 112px)}
.niche-grid.hsc-a .card__title{max-width:calc(100% - 84px)}
.niche-grid.hsc-a .niche-card:hover .hsc-art__hero{translate:0 -3px}

/* ---------- Option B (RECOMMENDED): illustrated header band, icons over a niche-hue nebula ---------- */
.niche-grid.hsc-b .niche-card{padding-top:calc(var(--hsc-pad) + 124px);
  background:linear-gradient(180deg,rgba(25,27,32,.0) 0,rgba(25,27,32,.0) 124px,rgba(25,27,32,.50) 125px),rgba(23,24,29,.80) !important}
.niche-grid.hsc-b .hsc-art{left:0;right:0;top:0;height:124px;
  background:radial-gradient(60% 90% at 50% 105%,color-mix(in srgb,var(--nc) 30%,transparent),transparent 72%),
             radial-gradient(40% 70% at 88% 10%,rgba(150,110,210,.16),transparent 70%),
             radial-gradient(36% 70% at 8% 20%,rgba(90,160,165,.12),transparent 70%),
             var(--hsc-stars) center/220px 160px repeat,#0B0C10;
  border-bottom:1px solid color-mix(in srgb,var(--nc) 30%,transparent)}
.niche-grid.hsc-b .hsc-art img{width:auto}
.niche-grid.hsc-b .hsc-art__hero{height:84px;left:50%;transform:translateX(-50%);top:18px}
.niche-grid.hsc-b .hsc-art__a{height:34px;left:calc(50% - 118px);top:48px;opacity:.85}
.niche-grid.hsc-b .hsc-art__b{height:42px;left:calc(50% + 70px);top:52px}
.niche-grid.hsc-b .niche-card:hover .hsc-art__hero{translate:0 -4px}
.niche-grid.hsc-b .niche-card:hover .hsc-art__a{translate:-3px -2px}
.niche-grid.hsc-b .niche-card:hover .hsc-art__b{translate:3px -2px}

@media (prefers-reduced-motion:reduce){.niche-grid.hsc .niche-card,.hsc-art img{transition:none}
  .niche-grid.hsc .niche-card:hover,.niche-grid.hsc .niche-card:hover .hsc-art img{translate:none}}

/* ---------- grid: 6 cards, 1 / 2 / 3 columns (390 / 768 / 1280); replaces the 3+2 rules for 5 cards ---------- */
.niche-grid.hsc{display:grid;grid-template-columns:1fr !important;gap:20px;grid-auto-rows:auto}
@media (min-width:640px){.niche-grid.hsc{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:24px}}
@media (min-width:1024px){.niche-grid.hsc{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
.niche-grid.hsc > li,.niche-grid.hsc > li:nth-child(n){grid-column:auto !important}
/* soft text link to the audience's paid Online Class (secondary; under the primary button) */
.niche-grid.hsc .niche-card__cta{margin-top:auto;min-height:44px}
.niche-grid.hsc .niche-card__class{display:inline-flex;align-items:center;min-height:44px;margin:-4px 0 -10px;align-self:flex-start;
  font-size:15px;line-height:1.3;color:#CFD6E1;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--nc) 55%,transparent);
  text-decoration-thickness:1px;text-underline-offset:3px}
.niche-grid.hsc .niche-card__class:hover{color:#FFFFFF;text-decoration-color:var(--nc);text-decoration-thickness:2px}
/* focus: visible ring on every link/button + the card edge lights up in its accent */
.niche-grid.hsc .niche-card a:focus-visible{outline:3px solid #2FD3EE;outline-offset:3px;border-radius:8px}
.niche-grid.hsc .niche-card:focus-within:has(:focus-visible){border-color:var(--nc) !important;
  box-shadow:0 0 0 1px var(--nc),0 0 28px color-mix(in srgb,var(--nc) 22%,transparent) !important}
/* hover: lift 4px (translate, above) + accent edge + glow */
.niche-grid.hsc .niche-card:hover{border-color:color-mix(in srgb,var(--nc) 55%,rgba(255,255,255,.18)) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--nc) 55%,transparent),0 0 32px color-mix(in srgb,var(--nc) 20%,transparent) !important}

/* CLO v2 fields (copy-v2.md 1e09e1f3): subline under the heading, who-it's-for line, 3 "inside" bullets with accent ticks */
.hsc-subline{margin:-8px 0 0;max-width:46rem;font-size:1.0625rem;line-height:1.55;color:#CFD6E1}
.niche-grid.hsc .niche-card__who{margin:0;font-size:15px;line-height:1.45;color:#B4BCC8}
.niche-grid.hsc .niche-card__inside{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:6px}
.niche-grid.hsc .niche-card__inside li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:#E6E9EF}
.niche-grid.hsc .niche-card__inside li::before{content:"";position:absolute;left:3px;top:.32em;width:5px;height:10px;
  border:solid var(--nc);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Compliance/SEO 02:59: "Free 5-day educational series" label (text, hub = 3-day), the Day 1 note next to every button, "See all Online Classes" after the grid */
.niche-grid.hsc .niche-card__tag{align-self:flex-start;margin:-4px 0 0;padding:3px 10px;border-radius:999px;font-size:13px;line-height:1.4;font-weight:600;
  color:#E6E9EF;background:color-mix(in srgb,var(--nc) 12%,#17181D);border:1px solid color-mix(in srgb,var(--nc) 45%,transparent)}
.niche-grid.hsc .niche-card__note{margin:-6px 0 0;font-size:14px;line-height:1.4;color:#B4BCC8}
.hsc-all{margin:28px 0 0;text-align:center}
.hsc-all a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-weight:700;color:#9BE8F6;text-decoration:underline;text-underline-offset:4px}
.hsc-all a:hover{color:#FFFFFF}
.hsc-all a:focus-visible{outline:3px solid #2FD3EE;outline-offset:3px;border-radius:8px}

/* btn-wrap: per-audience labels ("Start the free Small Business series") may wrap to 2 lines at 390; stay >=44px, left-aligned, buttons line up per row (margin-top:auto) */
.niche-grid.hsc .niche-card__cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;white-space:normal;text-align:left;line-height:1.25;padding-top:10px;padding-bottom:10px}
.niche-grid.hsc .niche-card__cta svg{flex:none}

/* Web: the grid nebula (::before inset -72px) must not widen the page below 1280 (scrollWidth 442 at 390 in preview 3735fa45) */
main#main{overflow-x:clip}
/* Creative fix 1 + CLO item 4 (03:20/03:24 UTC): equal chooser button heights per row at 1280/768/390, text centred, pinned to the card bottom */
.niche-grid.hsc{align-items:stretch}.niche-grid.hsc .niche-card{display:flex;flex-direction:column}
.niche-grid.hsc .niche-card__cta{margin-top:auto;justify-content:center;text-align:center;width:100%}
@media (min-width:768px){.niche-grid.hsc .niche-card__cta{min-height:67px}}
#free-series{scroll-margin-top:96px}