/* site.css bundle: ONE shared bundle for all 6 sites (scripts/cssbundle.py; Creative parity ruling 2026-10-21). Per-site accent
   tokens load after it from /assets/tokens.<hash>.css. Generated by scripts/build.py; edit shared/styles/. */
/* Siqwes design tokens v0.1.0 - DRAFT, pending founder sign-off via Orion.
   Generated from brand/scripts/tokens.py (source of truth: design-tokens.json). Do not hand-edit values here. */
:root {
  /* Core palette */
  --color-night: #050B18;
  --color-navy-900: #0B1F45;
  --color-navy-800: #13306B;
  --color-electric-500: #1677FF;
  --color-cyan-400: #2FD3EE;
  --color-cyan-200: #9BE8F6;
  --color-blue-700: #1450C8;
  --color-blue-800: #0F3E9E;
  --color-cyan-700: #0A7894;
  --color-blue-100: #E3EDFF;
  --color-blue-50: #F1F6FF;
  --color-amber-500: #F2B544;
  --color-amber-100: #FDF1D8;
  --color-amber-800: #8A5300;
  --color-ink: #18202E;
  --color-slate: #475166;
  --color-stone: #5E6677;
  --color-line: #E4DCCF;
  --color-sand: #F3EDE3;
  --color-cream: #FBF8F2;
  --color-white: #FFFFFF;
  --color-success-700: #1F6F46;
  --color-success-100: #DFF1E6;
  --color-warning-700: #8A5300;
  --color-warning-100: #FDF0D5;
  --color-error-700: #B3261E;
  --color-error-100: #FBE4E1;
  /* Semantic roles */
  --bg-page: var(--color-cream);
  --bg-surface: var(--color-white);
  --bg-subtle: var(--color-sand);
  --bg-inverse: var(--color-night);
  --bg-inverse-soft: var(--color-navy-900);
  --bg-tint: var(--color-blue-50);
  --bg-highlight: var(--color-amber-100);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-slate);
  --text-muted: var(--color-stone);
  --text-heading: var(--color-navy-900);
  --text-link: var(--color-blue-700);
  --text-link-hover: var(--color-blue-800);
  --text-inverse: var(--color-white);
  --text-inverse-muted: var(--color-cyan-200);
  --text-eyebrow: var(--color-blue-700);
  --border-default: var(--color-line);
  --border-input: var(--color-stone);
  --border-strong: var(--color-slate);
  --focus-ring: var(--color-electric-500);
  --focus-ring-inverse: var(--color-cyan-400);
  --action-primary-bg: var(--color-blue-700);
  --action-primary-bg-hover: var(--color-blue-800);
  --action-primary-text: var(--color-white);
  --action-secondary-bg: var(--color-white);
  --action-secondary-text: var(--color-blue-700);
  --action-secondary-border: var(--color-blue-700);
  --action-secondary-bg-hover: var(--color-blue-50);
  --action-disabled-bg: var(--color-sand);
  --action-disabled-text: var(--color-stone);
  --action-disabled-border: var(--color-line);
  --accent: var(--color-amber-500);
  --glow-blue: var(--color-electric-500);
  --glow-cyan: var(--color-cyan-400);
  --success-text: var(--color-success-700);
  --success-bg: var(--color-success-100);
  --warning-text: var(--color-warning-700);
  --warning-bg: var(--color-warning-100);
  --error-text: var(--color-error-700);
  --error-bg: var(--color-error-100);
  /* Typography */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-email-heading: Georgia, 'Times New Roman', serif;
  --font-email-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gradient-logo-si-dark: linear-gradient(60deg, #1677FF 15%, #2FD3EE 100%);
  --gradient-logo-si-light: linear-gradient(60deg, #1450C8 15%, #0A7894 100%);
  --gradient-hero-night: radial-gradient(120% 140% at 20% 20%, #0B2154 0%, #07122B 45%, #050B18 100%);
  --font-heading-variation: 'SOFT' 100, 'WONK' 0;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-display-size: 2.5rem;
  --text-display-line: 1.1;
  --text-display-weight: 600;
  --text-display-tracking: -0.01em;
  --text-h1-size: 2.125rem;
  --text-h1-line: 1.15;
  --text-h1-weight: 600;
  --text-h1-tracking: -0.01em;
  --text-h2-size: 1.75rem;
  --text-h2-line: 1.2;
  --text-h2-weight: 600;
  --text-h2-tracking: 0;
  --text-h3-size: 1.375rem;
  --text-h3-line: 1.25;
  --text-h3-weight: 600;
  --text-h3-tracking: 0;
  --text-h4-size: 1.25rem;
  --text-h4-line: 1.3;
  --text-h4-weight: 700;
  --text-h4-tracking: 0;
  --text-body-lg-size: 1.188rem;
  --text-body-lg-line: 1.6;
  --text-body-lg-weight: 400;
  --text-body-lg-tracking: 0;
  --text-body-size: 1.062rem;
  --text-body-line: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: 0;
  --text-small-size: 0.9375rem;
  --text-small-line: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0;
  --text-eyebrow-size: 0.8125rem;
  --text-eyebrow-line: 1.4;
  --text-eyebrow-weight: 700;
  --text-eyebrow-tracking: 0.08em;
  --text-caption-size: 0.8125rem;
  --text-caption-line: 1.4;
  --text-caption-weight: 400;
  --text-caption-tracking: 0.01em;
  /* Spacing (4px base) */
  --space-0: 0rem; /* 0px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */
  --space-9: 6rem; /* 96px */
  --space-10: 8rem; /* 128px */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11,31,69,0.08);
  --shadow-md: 0 1px 3px rgba(11,31,69,0.06), 0 4px 12px rgba(11,31,69,0.08);
  --shadow-lg: 0 2px 6px rgba(11,31,69,0.06), 0 12px 32px rgba(11,31,69,0.12);
  --shadow-glow: 0 0 24px rgba(22,119,255,0.45);
  --border-width-default: 1px;
  --border-width-input: 1.5px;
  --border-width-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-electric-500);
  --layout-container-max: 1120px;
  --layout-container-narrow: 720px;
  --layout-gutter: 24px;
  --layout-gutter-mobile: 20px;
  --layout-columns: 12;
  --control-height-md: 48px;
  --control-height-lg: 56px;
  --control-height-sm: 40px;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  /* Breakpoints (reference only; CSS vars can't be used in @media): sm 480px, md 768px, lg 1024px, xl 1280px */
}

/* Desktop type sizes (min-width: 768px) */
@media (min-width: 768px) {
  :root {
    --text-display-size: 3.5rem; /* 56px */
    --text-h1-size: 2.75rem; /* 44px */
    --text-h2-size: 2.125rem; /* 34px */
    --text-h3-size: 1.625rem; /* 26px */
    --text-h4-size: 1.312rem; /* 21px */
    --text-body-lg-size: 1.25rem; /* 20px */
    --text-body-size: 1.125rem; /* 18px */
    --text-small-size: 0.9375rem; /* 15px */
    --text-eyebrow-size: 0.875rem; /* 14px */
    --text-caption-size: 0.8125rem; /* 13px */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration-fast: 0ms; --motion-duration-base: 0ms; }
}

/* Siqwes components v3 - DRAFT. Requires tokens.css. Button, card, form field, signup form, motif hover. v3 (2026-10-19): constellation retired by the founder; motif hover = soft star glow + slight lift only (no nodes, no lines, nothing drawn or animated). Supersedes components.css (kept for reference). */

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-height-md);padding:0 var(--space-5);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:1.0625rem;font-weight:var(--font-weight-bold);line-height:1.2;letter-spacing:.005em;
  text-decoration:none;border:var(--border-width-strong) solid transparent;cursor:pointer;
  transition:background-color var(--motion-duration-fast) var(--motion-easing),box-shadow var(--motion-duration-fast) var(--motion-easing),transform var(--motion-duration-fast) var(--motion-easing)}
.btn--lg{min-height:var(--control-height-lg);padding:0 var(--space-6);font-size:1.1875rem;border-radius:var(--radius-md)}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-text);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--action-primary-bg-hover);box-shadow:var(--shadow-md)}
.btn--primary:active{transform:translateY(1px);box-shadow:var(--shadow-sm)}
.btn--secondary{background:var(--action-secondary-bg);color:var(--action-secondary-text);border-color:var(--action-secondary-border)}
.btn--secondary:hover{background:var(--action-secondary-bg-hover)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn[disabled],.btn[aria-disabled="true"],.btn.is-disabled{background:var(--action-disabled-bg);color:var(--action-disabled-text);border-color:var(--action-disabled-border);box-shadow:none;cursor:not-allowed;transform:none}
.on-dark .btn--primary{background:var(--color-white);color:var(--color-navy-900)}
.on-dark .btn--primary:hover{background:var(--color-cyan-200)}
.on-dark .btn:focus-visible{box-shadow:0 0 0 2px var(--color-night),0 0 0 5px var(--color-cyan-400)}

/* ---------- Cards ---------- */
.card{background:var(--bg-surface);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-sm)}
@media (min-width:768px){.card{padding:var(--space-6)}}
.card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.card--tint{background:var(--bg-tint);border-color:var(--color-blue-100);box-shadow:none}
.card--night{background:var(--gradient-hero-night);color:var(--text-inverse);border:0;box-shadow:var(--shadow-lg)}
.card__title{font-family:var(--font-body);font-size:var(--text-h4-size);line-height:var(--text-h4-line);font-weight:700;color:var(--text-heading);margin:0 0 var(--space-2)}
.card__body{margin:0;color:var(--text-secondary);font-size:var(--text-body-size);line-height:var(--text-body-line)}
.card__icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-blue-50);display:grid;place-items:center;margin-bottom:var(--space-4)}

/* ---------- Form fields ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}
.field__label{font-weight:700;font-size:1.0625rem;color:var(--text-primary)}
.field__label .opt{font-weight:400;color:var(--text-muted)}
.field__help{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--text-muted);margin:0}
.input,.select{appearance:none;width:100%;box-sizing:border-box;min-height:var(--control-height-md);padding:0 var(--space-4);
  font:inherit;font-size:1.0625rem;color:var(--text-primary);background:var(--color-white);
  border:var(--border-width-input) solid var(--border-input);border-radius:var(--radius-md);
  transition:border-color var(--motion-duration-fast),box-shadow var(--motion-duration-fast)}
.select{padding-right:var(--space-7);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23475166' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.input::placeholder{color:var(--text-muted)}
.input:hover,.select:hover{border-color:var(--border-strong)}
.input:focus,.select:focus{outline:none;border-color:var(--color-blue-700);box-shadow:0 0 0 3px rgba(22,119,255,.35)}
.field.is-error .input,.field.is-error .select,.input[aria-invalid="true"]{border-color:var(--error-text);border-width:var(--border-width-strong)}
.field.is-error .input:focus{box-shadow:0 0 0 3px rgba(179,38,30,.25)}
.field__error{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--text-small-size);color:var(--error-text);font-weight:600;margin:0}
.input:disabled{background:var(--bg-subtle);color:var(--text-muted);border-color:var(--border-default)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-small-size)}
.check input{width:22px;height:22px;accent-color:var(--color-blue-700);margin:2px 0 0}

/* ---------- Alerts ---------- */
.alert{border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);font-size:var(--text-small-size);line-height:var(--text-small-line);border-left:4px solid}
.alert--success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-text)}
.alert--warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-text)}
.alert--error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-text)}

/* ---------- Signup form ---------- */
.signup{background:var(--bg-surface);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-lg);border:1px solid var(--border-default)}
@media (min-width:768px){.signup{padding:var(--space-7)}}
.signup__title{font-family:var(--font-heading);font-variation-settings:var(--font-heading-variation);font-weight:600;font-size:var(--text-h2-size);line-height:var(--text-h2-line);color:var(--text-heading);margin:0 0 var(--space-5)}
.signup__what{background:var(--bg-highlight);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:0 0 var(--space-5);font-size:1.0625rem;line-height:1.55;color:var(--text-primary)}
.signup__consent{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--text-secondary);margin:var(--space-4) 0 0}
.signup__privacy{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--text-secondary);margin:var(--space-4) 0 0;padding-top:var(--space-4);border-top:1px solid var(--border-default)}
.placeholder{background:var(--color-amber-100);color:var(--color-amber-800);border:1px dashed var(--color-amber-800);border-radius:4px;padding:0 4px;font-size:.92em}

/* ---------- Motif panel + hover (v3, 2026-10-19) ----------
   The constellation is retired (founder, 2026-10-19). Hover/rollover must NEVER draw, reveal or animate dots,
   nodes, lines, links or paths. The only allowed motif hover is:
   - a slight lift of the night motif panel (max 2px) with a deeper shadow, and
   - a soft cyan glow on the Siqwes star (inline-SVG use: give the star path/group class="siq-star").
   No looping or ambient animation. prefers-reduced-motion: no transform, no transition; the glow simply appears. */
.motif-panel{display:block;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  transition:transform var(--motion-duration-base) var(--motion-easing),box-shadow var(--motion-duration-base) var(--motion-easing)}
.motif-panel img,.motif-panel svg{display:block;width:100%;height:auto;border-radius:inherit}
.siq-star{transition:filter var(--motion-duration-base) var(--motion-easing)}
@media (hover:hover){
  .motif-panel:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 28px rgba(47,211,238,.22)}  /* glow = cyan-400 at 22% */
  .motif-panel:hover .siq-star,.has-star-hover:hover .siq-star{filter:drop-shadow(0 0 6px rgba(47,211,238,.6))}
}
.has-star-hover:focus-visible .siq-star,.has-star-hover:focus-within .siq-star{filter:drop-shadow(0 0 6px rgba(47,211,238,.6))}

/* Interactive card (whole card is one link): lift 2px + shadow-md; focus ring as buttons */
.card--link{display:block;color:inherit;text-decoration:none;
  transition:transform var(--motion-duration-base) var(--motion-easing),box-shadow var(--motion-duration-base) var(--motion-easing),border-color var(--motion-duration-base) var(--motion-easing)}
@media (hover:hover){.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-blue-100)}}
.card--link:focus-visible{outline:none;box-shadow:var(--focus-ring)}

@media (prefers-reduced-motion:reduce){
  .motif-panel,.siq-star,.card--link{transition:none}
  .motif-panel:hover,.card--link:hover{transform:none}
}
/* Landing page layout v0.1 - uses tokens.css + components.css */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--text-body-line);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text-link);text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
/* Audit 2026-10-19: a:hover / a:focus-visible must not override button text colour or radius (component-spec.md:18) */
.btn--primary:hover,.btn--primary:focus-visible{color:var(--action-primary-text)}
.btn--secondary:hover,.btn--secondary:focus-visible{color:var(--action-secondary-text)}
.on-dark .btn--primary:hover,.on-dark .btn--primary:focus-visible{color:var(--color-navy-900)}
a.btn:focus-visible{border-radius:var(--radius-md)}
.skip{position:absolute;left:-999px;top:8px;background:var(--color-white);padding:8px 12px;border-radius:var(--radius-sm);z-index:10}
.skip:focus{left:8px}
.container{max-width:var(--layout-container-max);margin:0 auto;padding:0 var(--layout-gutter-mobile)}
.container--narrow{max-width:var(--layout-container-narrow)}
@media (min-width:768px){.container{padding:0 var(--layout-gutter)}}

.display,.h2{font-family:var(--font-heading);font-variation-settings:var(--font-heading-variation);font-weight:600;color:var(--text-heading);margin:0}
.display{font-size:var(--text-display-size);line-height:var(--text-display-line);letter-spacing:var(--text-display-tracking)}
.h2{font-size:var(--text-h2-size);line-height:var(--text-h2-line)}
.eyebrow{font-size:var(--text-eyebrow-size);line-height:var(--text-eyebrow-line);font-weight:700;letter-spacing:var(--text-eyebrow-tracking);text-transform:uppercase;color:var(--text-eyebrow);margin:0 0 var(--space-4)}
.lead{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);color:var(--text-secondary);margin:var(--space-5) 0 0;max-width:38em}
.micro{font-size:var(--text-small-size);color:var(--text-muted);margin:var(--space-3) 0 0}

.site-header{border-bottom:1px solid var(--border-default);background:var(--bg-page)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.brand img{height:44px;width:auto}
.header-cta{min-height:44px;padding:0 var(--space-4);font-size:1rem}
@media (max-width:479px){.header-cta{display:none}}

.hero{padding:var(--space-7) 0 var(--space-8)}
.hero__grid{display:grid;gap:var(--space-7);align-items:center}
.hero__cta{margin-top:var(--space-6)}
@media (min-width:1024px){.hero{padding:var(--space-9) 0}.hero__grid{gap:var(--space-8)}}

.section{position:relative}   /* padding: section-rhythm-v1.css (96/72/56) */
.section--sand{background:var(--bg-subtle)}
.benefits{display:grid;gap:var(--space-5);list-style:none;padding-left:0;margin:0}
@media (min-width:768px){.benefits{grid-template-columns:1fr 1fr}}
.card__icon{color:var(--color-blue-700)}

.who{display:grid;gap:var(--space-5)}
/* Orion (permanent): Who it's for = ONE positive card, centred single column max 46rem (Creative), title on the same column */
.who--single{max-width:46rem;margin:0 auto}
.section:has(.who--single) .section__title{max-width:46rem;margin-left:auto;margin-right:auto}
.ticks{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-4)}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:var(--space-2);color:var(--text-secondary)}
.ticks svg{margin-top:4px;color:var(--success-text)}

/* ---- Shared card layout tokens: the ONE How-it-works partial (.steps) and the ONE FAQ partial (.faq) on all five landings
   (scripts/sharedsections.py). Every spacing / height / alignment value of those cards comes from these custom properties, so
   Creative's spacing spec is folded in by changing tokens only. Values today = the existing spacing scale (no visual change).
   Dark mode: colours are semantic tokens (--bg-surface, --border-default, --text-*) and follow the theme. */
:root{
  --steps-gap:var(--space-5);              /* grid gap between step cards (mobile stack + columns) */
  --steps-cols-md:2;                       /* columns >=768px */
  --steps-cols-lg:4;                       /* columns >=1024px, 4 steps */
  --steps-cols-lg-closed:3;                /* columns >=1024px, 3 steps (.steps--closed) */
  --steps-align:normal;                    /* normal = stretch for grid items: equal card height per row */
  --card-step-pad:var(--space-5);          /* step card padding */
  --card-step-inner-gap:var(--space-4);    /* number badge -> heading block */
  --card-step-accent-w:3px;                /* top accent bar */
  --card-step-accent:var(--color-blue-700);/* kit niches override via niche-landing.css (--border-accent) */
  --card-step-radius:0 0 var(--radius-lg) var(--radius-lg);
  --card-step-shadow:var(--shadow-sm);
  --card-step-bg:var(--bg-surface);
  --card-step-min-h:auto;                  /* fixed minimum card height, if the spec sets one */
  --faq-gap:var(--space-3);                /* gap between FAQ items */
  --faq-item-pad-x:var(--space-5);
  --faq-item-radius:var(--radius-lg);
  --faq-item-bg:var(--bg-surface);
  --faq-item-border:1px solid var(--border-default);
  --faq-summary-pad-y:var(--space-4);
  --faq-summary-min-h:44px;                /* tap target */
  --faq-answer-gap:var(--space-4);         /* answer bottom spacing */
}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--steps-gap);align-items:var(--steps-align);counter-reset:s}
@media (min-width:768px){.steps{grid-template-columns:repeat(var(--steps-cols-md),1fr)}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(var(--steps-cols-lg),1fr)}}
/* signup-closed state only (business, 3 steps; Creative 2026-10-19 hotfix): 3 columns from 1024px; 390/768 unchanged */
@media (min-width:1024px){.steps--closed{grid-template-columns:repeat(var(--steps-cols-lg-closed),minmax(0,1fr))}}
/* 2026-10-19 fix: step-card styling is scoped to the direct children (.steps > li). It used to be .steps li, which also turned
   education's nested ul.steps__days > li rows into cards (1529px-tall step cards with 1000+px empty bottoms). */
.steps > li{display:flex;flex-direction:column;gap:var(--card-step-inner-gap);padding:var(--card-step-pad);min-height:var(--card-step-min-h);border-top:var(--card-step-accent-w) solid var(--card-step-accent);background:var(--card-step-bg);border-radius:var(--card-step-radius);box-shadow:var(--card-step-shadow)}
.steps p{margin:0;color:var(--text-secondary)}
.steps__n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--color-navy-900);color:var(--color-white);font-weight:700;font-size:1.125rem}

.section--signup{background:linear-gradient(180deg,var(--bg-tint) 0%,var(--bg-page) 100%)}   /* overflow:hidden removed: phone seam (hero-cleanup v1 §6.5) */
.signup{position:relative}

.faq{display:grid;gap:var(--faq-gap)}
.faq details{background:var(--faq-item-bg);border:var(--faq-item-border);border-radius:var(--faq-item-radius);padding:var(--faq-summary-pad-y) var(--faq-item-pad-x)}
.faq summary{cursor:pointer;font-weight:700;font-size:var(--text-h4-size);line-height:var(--text-h4-line);color:var(--text-heading);list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* v6: the marker is a flex item, not float:right (Chrome does not balance lines next to a float; Creative v5 FIX) */
.faq summary::after{content:"+";flex:none;margin-left:auto;color:var(--color-blue-700);font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
.faq p{margin:var(--space-3) 0 0;color:var(--text-secondary)}

.site-footer{border-top:1px solid var(--border-default);padding:var(--space-7) 0;background:var(--bg-subtle)}
.site-footer__inner{display:flex;flex-direction:column;gap:var(--space-4)}
.site-footer p{margin:0;font-size:var(--text-small-size);color:var(--text-secondary)}
.site-footer img{height:38px;width:auto}
@media (min-width:768px){.site-footer__inner{flex-direction:row;align-items:center;justify-content:space-between}}
[hidden]{display:none !important}

/* v3 hero art + light motif (brand implementation-spec v0.3 sections 1, 5; no constellation). Shadow lives on .motif-panel (components-v3). */
@media (min-width:1024px){.hero__grid{grid-template-columns:7fr 5fr}}
@media (max-width:1023px){.hero__art{max-width:520px}.hero__art img{aspect-ratio:16/9;object-fit:cover;object-position:60% 70%}}
.section--signup{position:relative}

/* ---- ONE spacing scale (Creative spacing PASS item, 2026-10-19), tokens only:
   section padding  .section / .page  space-8 (64) mobile, space-9 (96) >=768; hero space-7/space-8, space-9 >=1024
   heading -> body  .section__title and .signup__title  space-6 (32); card title -> body space-2 (8)
   card padding     .card space-5 (24) mobile, space-6 (32) >=768; grid gaps (.benefits/.who/.steps) space-5 (24)
   signup block     .signup space-6 (32) mobile, space-7 (48) >=768; .field gap space-2 (8), field -> field space-5 (24);
                    what line -> button space-5; button -> consent space-4; consent -> privacy space-4 (+ rule)
   footer nav gap   space-4 (16) */
.signup__title{margin-bottom:var(--space-6)}
/* Form-full state (FINAL "FORM FULL STATE"): the card replaces the fields in place (fields kept for size, not shown), neutral
   kit-50 background + kit-800 text (business: master blue-50 / navy-900), no error styling, no disabled button on screen */
.signup__fields{position:relative}
.signup--full .signup__fields > :not(.signup__full){visibility:hidden}
.signup__full{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;padding:var(--space-6);
  border-radius:var(--radius-md);background:var(--accent-subtle);color:var(--accent-text)}
.signup__full p{margin:0;font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);font-weight:600;max-width:28ch}
/* Creative v4: balanced headlines and card/step titles on every host (no lone last-line words) */
h1,h2,h3,.display,.card__title,.steps h3{text-wrap:balance}
/* Creative v5 FIX (/workspace/landing-qa-v5/report.md): the FAQ h3 is display:inline inside a block <summary>, so the
   summary does the line breaking: balance it (and the h3) so no question ends on one word. Paragraphs and the eyebrow
   above the headline get text-wrap:pretty (no lone last-line word). */
.faq summary,.faq summary h3{text-wrap:balance}
/* Creative v6 polish (v7): "five-day" never splits in the signup heading (span added at render time, sitelib.nowrap_fiveday).
   The FAQ marker centring (align-items:center) is on the .faq summary flex rule in site.css, which loads after this file. */
.nowrap{white-space:nowrap}
p,.eyebrow{text-wrap:pretty}
/* Creative v4 (education): a disabled button keeps its disabled look on hover/focus; plain cursor */
.btn[disabled],.btn[disabled]:hover,.btn[disabled]:focus-visible,.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover,.btn.is-disabled:hover{
  background:var(--action-disabled-bg);color:var(--action-disabled-text);border-color:var(--action-disabled-border);box-shadow:none;cursor:default;transform:none}
/* Master accent roles for the business host (no kit). Kit token files load after this and override them. Creative v4:
   form-full card text navy-800 #13306B on blue-50; surfaces/borders keep the business look (bg-subtle, blue-700). */
:root{--accent-subtle:var(--color-blue-50);--accent-text:var(--color-navy-800);--surface-accent:var(--bg-subtle);--border-accent:var(--color-blue-700)}
/* Shared small muted note (Creative 18:40): body-sm, kit-800 text (--accent-text; master falls back to navy-900), no heading.
   Used under the FAQ for required disclaimer lines (realestate today); any site may use .note. */
.note{margin-top:var(--space-6)}
.note p{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--accent-text);margin:0}
.note p + p{margin-top:var(--space-3)}

/* Siqwes site.css: Web-owned additions on top of tokens/components/landing (brand v0.1). */
@font-face{font-family:'Source Sans 3';src:url('/fonts/SourceSans3-VariableFont.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/SourceSans3-Italic-VariableFont.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap}

/* Draft banner: delete from every page at launch (README "Launch gate"). */
.draft-banner{background:var(--warning-bg);color:var(--warning-text);font-size:var(--text-small-size);text-align:center;padding:var(--space-2) var(--space-4);margin:0}
.skip:focus{outline:none;box-shadow:var(--focus-ring)}
.brand{display:inline-block;border-radius:4px}
.brand:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* FAQ: SEO needs <h3> questions; brand uses <details>. The h3 sits inside <summary>. */
.faq summary h3{display:inline;font:inherit;color:inherit;margin:0}

/* "Other" free-text: shown only when "Other" is selected (CSS :has, no JS). Without :has support it is always shown. */
@supports selector(:has(*)){
  .field--other{display:none}
  form:has(#role option[value="other"]:checked) .field--other{display:flex}
}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.field__error[hidden]{display:none}
.signup__checkbox{margin:var(--space-4) 0 0}

/* Generic content pages (home, offer, legal, thanks, 404) */
.page{padding:var(--space-8) 0}
@media (min-width:768px){.page{padding:var(--space-9) 0}}
.prose{max-width:var(--layout-container-narrow)}
.prose h1{font-family:var(--font-heading);font-variation-settings:var(--font-heading-variation);font-weight:600;color:var(--text-heading);font-size:var(--text-h1-size);line-height:var(--text-h1-line);margin:0 0 var(--space-5)}
.prose h2{font-family:var(--font-heading);font-variation-settings:var(--font-heading-variation);font-weight:600;color:var(--text-heading);font-size:var(--text-h3-size);line-height:var(--text-h3-line);margin:var(--space-7) 0 var(--space-3)}
.prose h3{font-size:var(--text-h4-size);line-height:var(--text-h4-line);color:var(--text-heading);margin:var(--space-5) 0 var(--space-2)}
.prose p,.prose ul,.prose ol{margin:0 0 var(--space-4)}
.prose li{margin-bottom:var(--space-2)}
.updated{color:var(--text-muted);font-size:var(--text-small-size)}
.home-card{margin-top:var(--space-7)}
.home-card .btn{margin-top:var(--space-5)}
.offer-cta{margin-top:var(--space-6)}
.site-footer nav a{white-space:nowrap}

/* Hub (siqwes.com): one card per entry in shared/niches.json */
.niche-grid{list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;gap:var(--space-5);grid-template-columns:1fr}
@media (min-width:768px){.niche-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.niche-card{display:flex;flex-direction:column;gap:var(--space-3)}
.niche-card .card__title{margin:0}
.niche-card .btn{margin-top:auto;align-self:flex-start}
.niche-card__host{color:var(--text-muted);font-size:var(--text-small-size);margin:0}
.notice{border-left:4px solid var(--warning-text);background:var(--warning-bg);color:var(--warning-text);padding:var(--space-3) var(--space-4);margin:var(--space-5) 0}
/* Info variant (Creative review P3, 2026-10-19): Blue-50 background, Blue-700 rule, Ink text */
.notice--info{border-left-color:var(--color-blue-700);background:var(--color-blue-50);color:var(--color-ink)}

/* Hero without art (D-36): copy keeps a readable measure */
.hero__grid--solo .hero__copy{max-width:46rem}

/* Opens-soon niche pages (Creative nits 2026-10-19): footer pinned to the bottom on short pages; mobile footer wordmark left-aligned */
.opens-soon{min-height:100vh;display:flex;flex-direction:column}
.opens-soon main{flex:1}
.opens-soon .site-footer img{align-self:flex-start}
@media (min-width:768px){.opens-soon .site-footer img{align-self:center}}

/* Hub niche cards (2026-10-19, founder via Orion): eyebrow = short site name, status tag. No motif art, no hover drawing (D-36). */
.niche-card__name{font-size:var(--text-eyebrow-size);line-height:var(--text-eyebrow-line);font-weight:700;letter-spacing:var(--text-eyebrow-tracking);text-transform:uppercase;color:var(--text-eyebrow);margin:0}
.niche-card .card__body{margin:0}
.niche-card__status{margin:auto 0 0;padding-top:var(--space-2)}
.niche-card__cta{margin-top:auto}
.status-tag{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:999px;border:1px solid var(--border-default);background:var(--bg-subtle);color:var(--text-secondary);font-size:var(--text-small-size);line-height:1.4;font-weight:600}
.niche-card .card__title a{text-decoration-thickness:1px;text-underline-offset:3px}
.niche-card .card__title a:hover{text-decoration-thickness:2px}
.footer-courses{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--text-small-size)}
.footer-courses + p{white-space:nowrap}
/* Hub footer: course links on their own full-width row under the wordmark + contact line (Creative polish 6) */
@media (min-width:768px){.site-footer__inner{flex-wrap:wrap}.footer-courses{order:3;flex:1 1 100%}}

/* Signup forms v2 (Creative form QA 2026-10-19), all 5 niche hosts */
/* Item 2: input focus = the button ring token (4.10:1 on white); error fields keep a red ring (6.54:1) */
.input:focus,.select:focus,.input:focus-visible,.select:focus-visible{outline:none;border-color:var(--color-blue-700);box-shadow:0 0 0 2px var(--color-white),0 0 0 5px var(--color-electric-500)}
.field.is-error .input:focus,.field.is-error .select:focus{box-shadow:0 0 0 2px var(--color-white),0 0 0 5px var(--color-error-700)}
/* Item 6: error message = icon + text (not colour-only), error-700 on white 6.54:1 */
.field__error-icon{flex:none;width:20px;height:20px;margin-top:1px}
/* Item 3: niche lockup in the header. Creative ruling 13:04 UTC: horizontal lockup 56px tall on desktop (~275-345px wide),
   40px at 390px and below; one image, so the descriptor always scales with the wordmark. Header padding unchanged.
   Mobile is 44px, not 40px: at 40px the 'for X' cap height measured 9.25-9.75px (< the 10px minimum in the same ruling);
   44px is the smallest height that gives >= 10px on all five lockups (10.17-10.73px). No header nav, so no collision. */
.site-header .brand--lockup img{height:56px;width:auto;display:block}
@media (max-width:390px){.site-header .brand--lockup img{height:44px}}
/* Item 9 (visual only): business consent checkbox in one row with its label, 24x24 box, ~44px hit area via label padding */
.field--check{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:var(--space-3)}
.field--check label{flex:1 1 0;min-width:0}
.field--check .field__error{flex:1 1 100%;margin:0 0 0 calc(24px + var(--space-3))}
.field--check input{flex:none;width:24px;height:24px;margin:10px 0 0;accent-color:var(--color-blue-700)}
.field--check label{padding:8px 0;font-size:1.0625rem;line-height:1.5;color:var(--text-primary)}
.field--check input:hover{outline:2px solid var(--color-electric-500);outline-offset:1px;border-radius:4px}   /* Creative v4: same hover on every site */
.field--check input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-white),0 0 0 5px var(--color-electric-500);border-radius:4px}
/* Polish: stronger link hover */
a:hover{text-decoration-thickness:2px}

/* Creative QA 2026-10-19 (hub + forms v2), shared by every host (moved here from niche-landing.css where noted) */
.input:hover,.select:hover{border-color:var(--color-blue-700)}
/* S1 (moved): FAQ toggle 44px tap target + hover */
.faq details{padding:0 var(--faq-item-pad-x)}
.faq summary{display:flex;align-items:center;gap:var(--space-4);padding:var(--faq-summary-pad-y) 0;min-height:var(--faq-summary-min-h);box-sizing:border-box}   /* v6 flex (see landing.css .faq summary::after); v7 Creative: marker centred on 2-line rows */
.faq details > p{margin:0 0 var(--faq-answer-gap)}
.faq summary:hover{color:var(--color-blue-700)}
.faq details:hover{border-color:var(--color-blue-100)}
/* S3 (moved): footer tap targets */
.site-footer a{display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box}
/* P5 (moved): skip link 44px */
.skip{min-height:44px;box-sizing:border-box}
/* S4 (moved): single-column hero when there is no art */
.hero__grid--solo{grid-template-columns:minmax(0,46rem)}
/* Logo link hover (artwork untouched); kit hosts override the tint in niche-landing.css */
.brand{border-radius:6px;transition:background .15s}
.brand:hover{background:var(--color-blue-50)}
@media (prefers-reduced-motion:reduce){.brand{transition:none}}
/* Hub cards: kit -800 for each niche name (kit token names; values from brand/subbrands/*-tokens.css), business core blue */
.niche-grid{--color-sage-800:#2E5446;--color-terracotta-800:#6B3723;--color-heather-800:#402F62;--color-mulberry-800:#602E4C;grid-auto-rows:1fr}
.niche-card--business .niche-card__name{color:var(--color-blue-700)}
.niche-card--education .niche-card__name{color:var(--color-sage-800)}
.niche-card--realestate .niche-card__name{color:var(--color-terracotta-800)}
.niche-card--assistants .niche-card__name{color:var(--color-heather-800)}
.niche-card--bookkeeping .niche-card__name{color:var(--color-mulberry-800)}
/* single column (no CTA pinned to the card bottom since the 'Coming soon' pill was removed): each card sizes to its own content */
@media (max-width:767px){.niche-grid{grid-auto-rows:auto}}
/* 3+2 with the second row centred, all rows equal height (6-col grid, each card spans 2) */
@media (min-width:1024px){
  .niche-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .niche-grid > li{grid-column:span 2}
  .niche-grid > li:nth-child(4):nth-last-child(2){grid-column:2 / span 2}
  .niche-grid > li:nth-child(5):last-child{grid-column:4 / span 2}
}
.niche-card .card__title a{display:inline-block;padding:8px 0;min-height:44px;box-sizing:border-box}

/* kit roles (Web): eyebrow + descriptor text = kit-800, signup section = kit-50 tint; four kit hosts only */
:where(body[data-niche="education"]:not(.blog),body[data-niche="realestate"]:not(.blog),body[data-niche="assistants"]:not(.blog),body[data-niche="bookkeeping"]:not(.blog)) .eyebrow,:where(body[data-niche="education"]:not(.blog),body[data-niche="realestate"]:not(.blog),body[data-niche="assistants"]:not(.blog),body[data-niche="bookkeeping"]:not(.blog)) .niche-descriptor{color:var(--accent-text)}
:where(body[data-niche="education"]:not(.blog),body[data-niche="realestate"]:not(.blog),body[data-niche="assistants"]:not(.blog),body[data-niche="bookkeeping"]:not(.blog)) .section--signup{background:linear-gradient(180deg,var(--accent-subtle) 0%,var(--bg-page) 100%)}
:where(body[data-niche="bookkeeping"]:not(.blog)) .signup__what{background:var(--color-mulberry-50)}

/* shared/styles/niche-landing.css (shared landing layer, the five landing hosts: scoped :where(body[data-niche])) */
/* Niche landing QA (Creative, /workspace/landing-qa-2026-10-19/report.md, 2026-10-19). Appended by scripts/build.py AFTER
   the kit tokens, on the four kit hosts only (education, realestate, assistants, bookkeeping). Snippets as given by Creative.
   2026-10-19 13:3x: S1 (FAQ), S3 (footer links), P5 (skip) and the --solo hero moved to site.css so business and the hub get them. */
/* K1: kit surfaces (CTA, links and focus ring stay master blue/electric) */
:where(body[data-niche]:not(.blog)) .section--sand{background:var(--surface-accent)}
:where(body[data-niche]:not(.blog)) .section--signup{background:linear-gradient(180deg,var(--accent-subtle) 0%,var(--bg-page) 100%)}
/* D1 (five-day 3+2 / one-column .steps overrides) REMOVED 2026-10-19: the five-days block is gone; How it works uses the
   business grid (2 cols >=768, 4 cols >=1024) on every niche (spacing scale, Creative PASS item) */
/* P1 + P2: card paragraph spacing, kit accent top border */
:where(body[data-niche]:not(.blog)) .steps li > div > p + p{margin-top:var(--space-3)}
:where(body[data-niche]:not(.blog)) .steps > li{border-top-color:var(--border-accent)}
/* S2: link rollover */
:where(body[data-niche]:not(.blog)) a{text-underline-offset:3px;transition:color .15s,text-decoration-thickness .15s}
:where(body[data-niche]:not(.blog)) a:hover{text-decoration-thickness:2px}
/* S4: balanced headings (the single-column --solo hero rule moved to site.css) */
:where(body[data-niche]:not(.blog)) h1,:where(body[data-niche]:not(.blog)) h2,:where(body[data-niche]:not(.blog)) .display{text-wrap:balance}
/* P3: logo link hover tint in the kit colour (overrides the blue-50 base in site.css) */
:where(body[data-niche]:not(.blog)) .brand:hover{background:var(--accent-subtle)}
@media (prefers-reduced-motion:reduce){:where(body[data-niche]:not(.blog)) a,:where(body[data-niche]:not(.blog)) .brand{transition:none}}
/* Landing structure (business order, 2026-10-19 15:3x; Creative structure QA /workspace/landing-structure-qa-2026-10-19/report.md) */
:where(body[data-niche]:not(.blog)) .hero h1{max-width:16ch}
:where(body[data-niche]:not(.blog)) p.micro{max-width:70ch}
:where(body[data-niche]:not(.blog)) .card__icon{background:var(--accent-subtle);color:var(--accent-text)}
:where(body[data-niche]:not(.blog)) .signup__what{background:var(--accent-subtle)}
:where(body[data-niche]:not(.blog)) .get__callout{margin-top:var(--space-5);max-width:70ch}
:where(body[data-niche]:not(.blog)) .steps__days{margin:var(--space-3) 0 0;padding-left:1.1rem;display:grid;gap:var(--space-2);color:var(--text-secondary)}
:where(body[data-niche]:not(.blog)) .hero .notice{margin-top:var(--space-3)}
:where(body[data-niche]:not(.blog)) .site-footer__inner > p + p,:where(body[data-niche]:not(.blog)) .site-footer__inner > .site-footer__contact + p{flex-basis:100%}
:where(body[data-niche]:not(.blog)) .site-footer nav{display:flex;flex-wrap:wrap;gap:0 var(--space-4)}

/* shared/styles/dark.css (dark theme v1, all hosts; then Creative polish-v1) */
/* Siqwes dark theme v1 (founder order via Orion, 2026-10-19). Web-owned shared layer, appended LAST to every site bundle
   (hub + business, education, realestate, assistants, bookkeeping) by scripts/build.py, so it remaps the variables that
   tokens.css / components.css / landing.css / site.css / kits / niche-landing.css already use.
   Source: Creative FINAL handoff brand/web/dark-theme-v1/ (DARK-SPEC.md, dark-tokens.css, dark-site.css, contrast-table.md),
   Option B (founder final): titles WHITE, niche colour only via --niche-accent (labels, icons, step badges, rules).
   Overrides from Orion: headings Nunito 800 (h1/h2) / 700 (h3), self-hosted woff2; theme-color #212735; emails untouched.
   Every colour and the heading font come from the custom properties below; only the niche accents/gradients differ per host.
   Scope: <body data-niche="<slug>"> on the five landings; hub = no body data-niche (core slate-blue + cyan), each hub course
   card carries its own data-niche. */

@font-face{font-family:'Nunito';src:url('/fonts/Nunito-Latin-VariableFont.woff2') format('woff2');font-weight:200 1000;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* ---- Dark neutrals (Creative dark-tokens.css) ---- */
  --dk-page:#212735; --dk-sunken:#1B202C; --dk-surface:#29303E; --dk-surface-2:#30384A;
  --dk-hairline:#3A4254; --dk-hairline-card:rgba(255,255,255,.10); --dk-border-input:#8A94A8;
  --dk-border-card:rgba(255,255,255,.06); --dk-border-panel:rgba(255,255,255,.08);
  --dk-wash:rgba(255,255,255,.05); --dk-wash-faint:rgba(255,255,255,.025);
  /* ---- Dark text ---- */
  --dk-text-title:#FFFFFF; --dk-text-strong:#E6E9EF; --dk-text-body:#BAC2CF; --dk-text-meta:#A9B1C1;
  --dk-text-disabled:#C9D0DB; --dk-border-disabled:#4A5468;
  /* ---- Blue / cyan lead ---- */
  --dk-link:var(--color-cyan-200); --dk-link-hover:#FFFFFF;
  --dk-action-bg:var(--color-cyan-400); --dk-action-bg-hover:var(--color-cyan-200); --dk-action-text:var(--color-navy-900);
  --dk-blue-250:#9CC8FF;
  --dk-focus:var(--color-cyan-400);
  --dk-focus-ring:0 0 0 2px #0A1838, 0 0 0 5px var(--color-cyan-400);  /* = brand/web/dark-theme-v1/dark-tokens.css (Creative 2026-10-20: inner #0A1838 on all sites) */
  --dk-focus-ring-well:0 0 0 2px var(--dk-sunken),0 0 0 5px var(--dk-focus);
  --dk-glow-cyan:rgba(47,211,238,.30); --dk-glow-cyan-soft:rgba(47,211,238,.18); --dk-secondary-hover:rgba(47,211,238,.12);
  --dk-on-accent:var(--dk-sunken);   /* text on accent fills (step numbers, .btn--accent) */
  /* ---- Niche card gradients + header bands ---- */
  --grad-business:linear-gradient(90deg,#2A3445 0%,#2F3A4C 50%,#354356 100%);
  --grad-education:linear-gradient(90deg,#29323A 0%,#2D373C 50%,#323E3F 100%);
  --grad-realestate:linear-gradient(90deg,#323138 0%,#383539 50%,#423C3C 100%);
  --grad-assistants:linear-gradient(90deg,#2A2839 0%,#2E2A3F 50%,#342D47 100%);
  --grad-bookkeeping:linear-gradient(90deg,#2C2734 0%,#332836 50%,#3C2A3B 100%);
  --band-business:linear-gradient(100deg,#2B3A55 0%,#2E4466 60%,#2F4E78 100%);
  --band-education:linear-gradient(100deg,#2A3A3B 0%,#2F4642 60%,#335148 100%);
  --band-realestate:linear-gradient(100deg,#3A3438 0%,#463B3A 60%,#55443F 100%);
  --band-assistants:linear-gradient(100deg,#2D2A42 0%,#352F52 60%,#3E3563 100%);
  --band-bookkeeping:linear-gradient(100deg,#32293A 0%,#3E2D43 60%,#4A3150 100%);
  /* ---- Niche light accents ---- */
  --dk-accent-business:var(--color-cyan-200); --dk-accent-education:#AAD8B6; --dk-accent-realestate:#ECBEAC;
  --dk-accent-assistants:#C5B7E6; --dk-accent-bookkeeping:#E4B5CF;
  /* ---- Status on dark ---- */
  --dk-error:#FFA59B; --dk-success:#8FDDB0; --dk-warning:#F5D38E;
  --dk-error-bg:#3A2429; --dk-success-bg:#1E3A30; --dk-warning-bg:#3A3222;
  --dk-notice-bg:#1E2E4C; --dk-notice-border:var(--color-cyan-400);
  /* ---- Remap the master semantic roles (tokens.css) ---- */
  --bg-page:var(--dk-page); --bg-surface:var(--dk-surface); --bg-subtle:var(--dk-sunken); --bg-tint:var(--dk-sunken);
  --bg-highlight:var(--dk-wash);
  --text-primary:var(--dk-text-body); --text-secondary:var(--dk-text-body); --text-muted:var(--dk-text-meta);
  --text-heading:var(--dk-text-title); --text-link:var(--dk-link); --text-link-hover:var(--dk-link-hover);
  --text-inverse:var(--dk-text-title); --text-inverse-muted:var(--color-cyan-200);
  --border-default:var(--dk-hairline); --border-input:var(--dk-border-input); --border-strong:var(--dk-blue-250);
  --focus-ring:var(--dk-focus-ring); --focus-ring-inverse:var(--dk-focus);
  --action-primary-bg:var(--dk-action-bg); --action-primary-bg-hover:var(--dk-action-bg-hover); --action-primary-text:var(--dk-action-text);
  --action-secondary-bg:transparent; --action-secondary-text:var(--dk-text-title); --action-secondary-border:var(--dk-focus);
  --action-secondary-bg-hover:var(--dk-secondary-hover);
  --action-disabled-bg:var(--dk-surface-2); --action-disabled-text:var(--dk-text-disabled); --action-disabled-border:var(--dk-border-disabled);
  --success-text:var(--dk-success); --success-bg:var(--dk-success-bg); --warning-text:var(--dk-warning); --warning-bg:var(--dk-warning-bg);
  --error-text:var(--dk-error); --error-bg:var(--dk-error-bg);
  --shadow-sm:0 1px 2px rgba(0,0,0,.25); --shadow-md:0 2px 6px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.25); --shadow-lg:0 4px 12px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.35);
  /* ---- Type: ONE heading swap point (Orion: Nunito, 800 h1/h2, 700 h3; body stays Source Sans 3) ---- */
  --font-heading:'Nunito','Source Sans 3',system-ui,sans-serif; --font-heading-variation:normal;
  --font-weight-heading:800; --font-weight-subheading:700;
  --text-display-size:2.375rem; --text-display-line:1.1; --text-display-weight:800; --text-display-tracking:-0.02em;   /* 38 mobile (spec) */
  --text-h1-size:2.25rem; --text-h1-line:1.12; --text-h1-weight:800; --text-h1-tracking:-0.015em;
  --text-h2-size:1.75rem; --text-h2-line:1.18; --text-h2-weight:800; --text-h2-tracking:-0.01em;
  --text-h3-size:1.25rem; --text-h3-line:1.28; --text-h3-weight:700;
  --text-h4-size:1.1875rem; --text-h4-line:1.3; --text-h4-weight:700;
  --text-label-size:0.875rem; --text-label-line:1.35; --text-label-weight:650; --text-label-tracking:0.02em;
  --text-body-size:1.0625rem; --text-body-line:1.65; --text-body-lg-size:1.1875rem; --text-body-lg-line:1.6; --text-small-size:0.9375rem;
  --radius-card:12px; --radius-band:12px;
  /* ---- Header lockup (DARK-SPEC 4: 48px; mobile see .brand--lockup below) ---- */
  --header-logo-h:48px; --header-logo-h-sm:44px;
  /* ---- Shared How it works + FAQ partials (scripts/sharedsections.py): one column, card spacing + heights ---- */
  --layout-container-mid:46rem;   /* = polish-v1 (Creative): Who it's for, How it works, Signup, FAQ share one column */
  --steps-gap:var(--space-4); --card-step-pad:var(--space-5); --card-step-inner-gap:var(--space-4); --card-step-badge:40px; --card-step-accent-w:3px;
  --card-step-radius:4px 4px var(--radius-card) var(--radius-card); --card-step-shadow:var(--shadow-sm);
  --faq-summary-pad-y:var(--space-4); --faq-item-pad-x:var(--space-5); --faq-answer-gap:var(--space-4);
  --faq-marker:28px;
  /* ---- Hub default scope (no data-niche): core slate-blue gradient + cyan labels, white titles ---- */
  --niche-grad:var(--grad-business); --niche-band:var(--band-business); --niche-accent:var(--dk-accent-business); --niche-title:var(--dk-text-title);
}
@media (min-width:768px){:root{
  --text-display-size:3.75rem; --text-h1-size:3rem; --text-h2-size:2.25rem; --text-h3-size:1.5rem; --text-h4-size:1.3125rem;
  --text-label-size:0.9375rem; --text-body-size:1.125rem; --text-body-lg-size:1.25rem;
}}
/* Niche scopes (Creative dark-tokens.css; Option B: --niche-title white on all five) */
[data-niche="business"]   {--niche-grad:var(--grad-business);   --niche-band:var(--band-business);   --niche-accent:var(--dk-accent-business)}
[data-niche="education"]  {--niche-grad:var(--grad-education);  --niche-band:var(--band-education);  --niche-accent:var(--dk-accent-education)}
[data-niche="realestate"] {--niche-grad:var(--grad-realestate); --niche-band:var(--band-realestate); --niche-accent:var(--dk-accent-realestate)}
[data-niche="assistants"] {--niche-grad:var(--grad-assistants); --niche-band:var(--band-assistants); --niche-accent:var(--dk-accent-assistants)}
[data-niche="bookkeeping"]{--niche-grad:var(--grad-bookkeeping);--niche-band:var(--band-bookkeeping);--niche-accent:var(--dk-accent-bookkeeping)}
/* Kit / accent roles re-derived wherever the niche is set (custom properties resolve where they are declared, so these
   are declared on :root AND on every [data-niche] scope). Overrides the kit -50/-800 light roles. */
:root,[data-niche]{
  --niche-title:var(--dk-text-title);
  --accent:var(--niche-accent); --text-eyebrow:var(--niche-accent); --accent-text:var(--niche-accent); --accent-on-dark:var(--niche-accent);
  --accent-subtle:color-mix(in srgb,var(--niche-accent) 14%,transparent); --accent-tint:color-mix(in srgb,var(--niche-accent) 16%,transparent);
  --surface-accent:var(--dk-sunken); --border-accent:var(--niche-accent);
  --card-step-bg:var(--niche-grad); --card-step-accent:var(--niche-accent);
}
.titles-white{--niche-title:var(--dk-text-title)}   /* harmless alias (Option B is the default) */

/* ---------- Base (no flash of light: the page colour is on html too) ---------- */
html{background:var(--bg-page);color-scheme:dark}
body{background:var(--bg-page);color:var(--dk-text-body);font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--text-body-line);-moz-osx-font-smoothing:grayscale}

/* Links: cyan-200, underlined; hover white + 2px; focus = ring */
a{color:var(--dk-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--dk-link-hover);text-decoration-thickness:2px}
a:focus-visible,.brand:focus-visible,summary:focus-visible,.btn:focus-visible,.skip:focus{outline:none;box-shadow:var(--dk-focus-ring)}
a:focus-visible,summary:focus-visible{border-radius:6px}
.skip{background:var(--dk-action-bg);color:var(--dk-action-text);font-weight:700;border-radius:6px;padding:10px 14px}

/* Headings: all on --font-heading; h1/h2 800, h3 700 */
.display,.h1,.h2,.h3,.signup__title,.card__title,.faq summary,.steps h3,.prose h1,.prose h2,.prose h3{font-family:var(--font-heading);font-variation-settings:var(--font-heading-variation)}
.display{font-size:var(--text-display-size);line-height:var(--text-display-line);font-weight:var(--font-weight-heading);letter-spacing:var(--text-display-tracking);color:var(--dk-text-title)}
.h1,.prose h1{font-size:var(--text-h1-size);line-height:var(--text-h1-line);font-weight:var(--font-weight-heading);letter-spacing:var(--text-h1-tracking);color:var(--dk-text-title)}
.prose h1.display{font-size:var(--text-display-size);line-height:var(--text-display-line);letter-spacing:var(--text-display-tracking)}
.h2{font-size:var(--text-h2-size);line-height:var(--text-h2-line);font-weight:var(--font-weight-heading);letter-spacing:var(--text-h2-tracking);color:var(--niche-title)}
.prose h2{font-weight:var(--font-weight-heading);color:var(--dk-text-title)}
.h3,.prose h3{font-weight:var(--font-weight-subheading);color:var(--dk-text-title)}
.h3{font-size:var(--text-h3-size);line-height:var(--text-h3-line)}
/* Section labels: sentence case (DARK-SPEC 3), niche accent */
.eyebrow,.label,.niche-card__name{font-family:var(--font-body);font-size:var(--text-label-size);line-height:var(--text-label-line);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking);text-transform:none;color:var(--niche-accent)}
.eyebrow{margin:0 0 var(--space-4)}
.lead{color:var(--dk-text-strong)}
.micro,.updated,.niche-card__host{color:var(--dk-text-meta)}

/* ---------- Header ---------- */
.site-header{background:var(--bg-page);border-bottom:1px solid var(--dk-hairline);position:relative}
.site-header::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:linear-gradient(90deg,transparent,var(--niche-accent) 50%,transparent);opacity:.35;pointer-events:none}
.brand{border-radius:8px;padding:4px 6px;margin-left:-6px;transition:background .15s}
.brand:hover{background:var(--dk-wash)}
.site-header .brand img,.site-header .brand--lockup img{height:var(--header-logo-h);width:auto}
/* Mobile lockup: DARK-SPEC says 38px at <=390, but Creative's lockup ruling (13:04 UTC) needs the 'for X' descriptor cap
   height >= 10px, which these lockups only reach at 44px; 44px kept (resolved ambiguity, see report). */
@media (max-width:390px){.site-header .brand img,.site-header .brand--lockup img{height:var(--header-logo-h-sm)}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 20%,color-mix(in srgb,var(--niche-accent) 9%,transparent),transparent 70%);pointer-events:none}
.hero__grid{position:relative}
.motif-panel{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--dk-border-card)}
@media (hover:hover){.motif-panel:hover{box-shadow:var(--shadow-lg),0 0 28px var(--dk-glow-cyan-soft)}}

/* ---------- Buttons: cyan leads ---------- */
.btn--primary{background:var(--dk-action-bg);color:var(--dk-action-text)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--dk-action-bg-hover);color:var(--dk-action-text)}
.btn--primary:hover{box-shadow:0 0 20px var(--dk-glow-cyan)}
.btn--primary:focus-visible{box-shadow:var(--dk-focus-ring)}
.btn--secondary{background:transparent;color:var(--dk-text-title);border-color:var(--dk-focus)}
.btn--secondary:hover,.btn--secondary:focus-visible{background:var(--dk-secondary-hover);color:var(--dk-text-title)}
.btn--accent{background:var(--niche-accent);color:var(--dk-on-accent)}
.btn--accent:hover{background:color-mix(in srgb,var(--niche-accent) 80%,#fff)}
.on-dark .btn--primary,.on-dark .btn--primary:hover,.on-dark .btn--primary:focus-visible{background:var(--dk-action-bg);color:var(--dk-action-text)}
.on-dark .btn:focus-visible{box-shadow:var(--dk-focus-ring)}
/* Disabled 'Signups open soon': readable text, 1.5px dashed outline, no hover change */
.btn[disabled],.btn[disabled]:hover,.btn[disabled]:focus-visible,.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover,.btn.is-disabled,.btn.is-disabled:hover{
  background:var(--action-disabled-bg);color:var(--action-disabled-text);border:1.5px dashed var(--action-disabled-border);box-shadow:none;cursor:default;transform:none}

/* ---------- Notices / alerts ---------- */
.notice{border-left:4px solid var(--dk-warning);background:var(--dk-warning-bg);color:var(--dk-warning)}
.notice--info{border-left-color:var(--dk-notice-border);background:var(--dk-notice-bg);color:var(--dk-text-strong);border-radius:0 8px 8px 0}
.notice--info strong{color:var(--dk-text-title)}
.alert--success{background:var(--dk-success-bg);color:var(--dk-success);border-color:var(--dk-success)}
.alert--warning{background:var(--dk-warning-bg);color:var(--dk-warning);border-color:var(--dk-warning)}
.alert--error{background:var(--dk-error-bg);color:var(--dk-error);border-color:var(--dk-error)}
.draft-banner{background:var(--dk-warning-bg);color:var(--dk-warning)}
.placeholder{background:var(--dk-warning-bg);color:var(--dk-warning);border-color:var(--dk-warning)}

/* ---------- Sections ---------- */
.section--sand{background:var(--dk-sunken);border-top:1px solid var(--dk-hairline);border-bottom:1px solid var(--dk-hairline)}
.section--signup{background:linear-gradient(180deg,var(--dk-sunken) 0%,var(--bg-page) 100%)}

/* ---------- Cards: niche gradient, 12px ---------- */
.card{background:var(--niche-grad);border:1px solid var(--dk-border-card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);transition:transform .2s var(--motion-easing),border-color .2s,box-shadow .2s}
@media (hover:hover){.benefits .card:hover,.niche-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--niche-accent) 35%,transparent);box-shadow:var(--shadow-md)}}
.card--tint,.card--raised{background:var(--niche-grad);border-color:var(--dk-border-card)}
.card__title{font-size:var(--text-h4-size);line-height:var(--text-h4-line);font-weight:var(--font-weight-subheading);color:var(--dk-text-title)}
.card__body{color:var(--dk-text-body)}
.card__icon{background:var(--accent-subtle);color:var(--niche-accent);border-radius:10px}
.card--link:focus-visible{box-shadow:var(--dk-focus-ring)}
@media (hover:hover){.card--link:hover{border-color:color-mix(in srgb,var(--niche-accent) 35%,transparent)}}

/* Who it's for: one card, divider rows */
.who__yes > .card__title{color:var(--niche-accent);font-size:var(--text-label-size);font-family:var(--font-body);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking);margin-bottom:var(--space-2)}
.ticks{gap:0;margin-top:0}
.ticks li{gap:var(--space-3);padding:var(--space-4) 0;color:var(--dk-text-strong);border-top:1px solid var(--dk-hairline-card)}
.ticks li:first-child{border-top:0}
.ticks svg{color:var(--niche-accent)}

/* ---------- How it works (legacy grid + shared partial) ---------- */
.steps > li{background:var(--card-step-bg);border:1px solid var(--dk-border-card);border-top:var(--card-step-accent-w) solid var(--card-step-accent);border-radius:var(--card-step-radius);box-shadow:var(--card-step-shadow)}
.steps h3,.steps .card__title{color:var(--dk-text-title);font-weight:var(--font-weight-subheading)}
.steps p{color:var(--dk-text-body)}
.steps__n{width:var(--card-step-badge);height:var(--card-step-badge);background:var(--niche-accent);color:var(--dk-on-accent);font-weight:800;font-family:var(--font-heading)}
.steps__days li{padding:var(--space-3) 0;border-top:1px solid var(--dk-hairline-card);color:var(--dk-text-body)}
.steps__days strong{color:var(--dk-text-strong)}
/* Shared partial layout (stacked full-width cards, equal heights >=768, 46rem shared column, padding) is Creative's
   polish-v1.css (P1, P5, P6), loaded after this file; nothing here competes with it. */

/* ---------- Signup panel (closed block + open form) ---------- */
.signup{background:var(--niche-grad);border:1px solid var(--dk-border-panel);border-radius:16px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.signup::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--color-electric-500),var(--color-cyan-400))}
.signup__title{font-size:var(--text-h2-size);line-height:var(--text-h2-line);font-weight:var(--font-weight-heading);color:var(--dk-text-title)}
.signup > p{color:var(--dk-text-strong)}
.signup__consent{color:var(--dk-text-body)}
.signup__privacy{color:var(--dk-text-meta);border-top:1px solid var(--dk-hairline-card)}
.signup > .signup__privacy{max-width:none}   /* divider spans the card's full inner width (Creative QA: education signup card) */
.signup__what{background:var(--dk-wash);border:1px solid var(--dk-hairline-card);border-radius:10px;color:var(--dk-text-strong)}
/* Form-full card (replaces the light kit-50 / kit-800 card): niche band, accent-tinted border, white 700 message */
.signup__full{background:var(--niche-band);border:1px solid color-mix(in srgb,var(--niche-accent) 35%,transparent);border-radius:12px;color:var(--dk-text-title)}
.signup__full p{font-weight:var(--font-weight-subheading);font-family:var(--font-heading)}
/* Spots-full state (Creative ruling 22:28 UTC): the whole form is removed from layout (display:none, so it takes no space and no
   error styling can show), and ONE compact notice panel sits in the same card under the h2: auto height (~115-130px), 32px padding (Creative F1 spec),
   text centred both ways. Same hook for every path: the server rewrite (subscribe.js adds .signup--full and unhides the card,
   works without JS), the server-only fallback page (.signup.signup--full > .signup__full) and the ?formfull=1 preview toggle. */
.signup--full .signup__fields > :not(.signup__full){display:none}
.signup--full .signup__full{position:static;inset:auto;padding:var(--space-6)}

/* ---------- Form fields (open signup; components-1280.png) ---------- */
.field__label{color:var(--dk-text-strong);font-weight:700}
.field__label .opt,.field__help{color:var(--dk-text-meta)}
.input,.select{color:var(--dk-text-title);background-color:var(--dk-sunken);border:1.5px solid var(--dk-border-input);border-radius:10px}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23BAC2CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}   /* chevron = --dk-text-body (data URIs cannot read custom properties) */
.select option{background:var(--dk-sunken);color:var(--dk-text-title)}
.input::placeholder{color:var(--dk-text-meta)}
.input:hover,.select:hover{border-color:var(--dk-blue-250)}
.input:focus,.select:focus,.input:focus-visible,.select:focus-visible{outline:none;border-color:var(--dk-focus);box-shadow:var(--dk-focus-ring-well)}
.field.is-error .input,.field.is-error .select,.input[aria-invalid="true"],.select[aria-invalid="true"]{border:2px solid var(--dk-error)}
.field.is-error .input:focus,.field.is-error .select:focus{box-shadow:0 0 0 2px var(--dk-sunken),0 0 0 5px var(--dk-error)}
.field__error{color:var(--dk-error);font-weight:600}
.input:disabled{background:var(--dk-surface-2);color:var(--dk-text-meta);border-color:var(--dk-hairline)}
.field--check label,.check{color:var(--dk-text-strong)}
.field--check input,.check input{accent-color:var(--dk-focus)}
.field--check input:hover{outline:2px solid var(--dk-focus);outline-offset:1px}
.field--check input:focus-visible{outline:none;box-shadow:var(--dk-focus-ring)}

/* ---------- FAQ: one gradient panel, hairline rows, collapsed by default ---------- */
.faq{gap:0;border-radius:var(--radius-card);background:var(--niche-grad);border:1px solid var(--dk-border-card);overflow:hidden}
.faq details,.faq details:hover{background:transparent;border:0;border-top:1px solid var(--dk-hairline-card);border-radius:0;padding:0 var(--faq-item-pad-x)}
.faq details:first-child{border-top:0}
.faq details:hover{background:var(--dk-wash-faint)}
.faq summary{padding:var(--faq-summary-pad-y) 0;font-size:1.125rem;line-height:1.35;font-weight:var(--font-weight-subheading);color:var(--dk-text-title)}
.faq summary::after{content:"+";width:var(--faq-marker);height:var(--faq-marker);border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--niche-accent) 16%,transparent);color:var(--niche-accent);font-weight:800}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--niche-accent)}
.faq summary:focus-visible{box-shadow:var(--dk-focus-ring)}
.faq details > p{margin:0 0 var(--faq-answer-gap);color:var(--dk-text-body)}
.note p{color:var(--dk-text-meta)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--dk-hairline);background:var(--dk-sunken)}
.site-footer a{color:var(--dk-text-strong);text-decoration-color:color-mix(in srgb,var(--dk-text-strong) 40%,transparent)}
.site-footer a:hover{color:var(--dk-link);text-decoration-color:currentColor}
.site-footer p{color:var(--dk-text-meta)}

/* ---------- Hub ---------- */
.status-tag{background:var(--dk-surface-2);border-color:var(--dk-hairline);color:var(--dk-text-strong)}
.niche-card .card__title a{color:var(--dk-text-title)}
.niche-card .card__title a:hover{color:var(--dk-link)}
.niche-card--business .niche-card__name,.niche-card--education .niche-card__name,.niche-card--realestate .niche-card__name,
.niche-card--assistants .niche-card__name,.niche-card--bookkeeping .niche-card__name{color:var(--niche-accent)}

@media (prefers-reduced-motion:reduce){.card,.brand,a,.btn,.motif-panel{transition:none!important}.motif-panel:hover,.card:hover{transform:none!important}}

/* Footer X link v1 (brand/specs/footer-x-link-v1.md, Creative PASS 2026-10-20 00:30 UTC). The mark stays white; hover changes only the circle. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media (min-width:768px){.site-footer__contact{flex-direction:row-reverse;align-items:center}}
.site-footer .footer-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;box-sizing:border-box;border-radius:999px;color:#FFFFFF;background:transparent;border:1px solid #3A4252;text-decoration:none;transition:background-color .15s ease,border-color .15s ease}
.site-footer .footer-social:hover{background:#29303E;border-color:#9BE8F6;color:#FFFFFF}
.site-footer .footer-social:focus-visible{outline:none;border-radius:999px;box-shadow:0 0 0 2px #212735,0 0 0 5px #2FD3EE}
.footer-social__icon{width:20px;height:20px;display:block}

/* shared/styles/polish-v1.css (Creative polish layer, verbatim; loads last) */
/* Siqwes polish-v1.css — shared visual polish layer for the DARK B theme.
   Load order: tokens.css → dark-tokens.css → dark-site.css → polish-v1.css. Uses existing tokens only.
   Spec: brand/specs/polish-v1.md · Step card: brand/specs/how-it-works-v1.md
   Fixes drift measured on live v7 (shared-drift-v1/report.md). */

:root{--layout-container-mid:46rem} /* = .who--single, so Who it's for, How it works and FAQ share one column */

/* P1. Card padding: steps match .card (24 mobile, 32 from 768). Was 24 at every width. */
.steps > li{padding:var(--space-5)}
@media (min-width:768px){.steps > li{padding:var(--space-6)}}
/* Signup panel follows the same scale: 24 mobile (was 32), 48 from 768 (dark-site, unchanged). */
@media (max-width:767px){.signup{padding:var(--space-5)}}

/* P2. Benefit cards ("What you'll get"): equal heights per row, and the body starts on the same line
       in every card (live: bodies 27-28px out of line when one title wraps to 2 lines).
       Rule 1 equal height: the grid stretches each card to its row (no fixed heights).
       Rule 2 heading slot: from 768 the title reserves 2 lines (min-height:2lh); no line clamp, text is never hidden.
       Rule 3 subgrid: where supported, a 3-line title still keeps bodies aligned across the row. */
.benefits{align-items:stretch;grid-auto-rows:auto}
@media (min-width:768px){
  .benefits .card__title{min-height:2lh}
  @supports (grid-template-rows:subgrid){
    .benefits > li.card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
    .benefits > li.card > *{align-self:start}
  }
}

/* P3. Line lengths. Lead was 38em (72 characters at 768). */
.lead,.hero .lead{max-width:min(38em,60ch)}
.section__intro,.ticks li,.signup > p,.notice,.card__body,.faq details > p{max-width:68ch}

/* P4. No orphans at 375. Headings balance (Chrome balances up to 6 lines); paragraphs pretty.
       Signup title: "plan" was left alone at 375 because the signup panel used 32px padding on
       mobile; with the card padding (24px, P1) "five-day starter plan" fits on one line. */
h1,h2,h3,.display,.h2,.signup__title,.card__title,.faq summary,.faq summary h3,.steps h3{text-wrap:balance}
p,li,.lead,.eyebrow,.label{text-wrap:pretty}

/* P5. One centred column: Who it's for, How it works, Signup and FAQ share one 46rem (736px) content column. */
.section--how .container,.section--faq .container,.section--signup .container{max-width:calc(var(--layout-container-mid) + 2 * var(--layout-gutter))}  /* content edge = .who--single edge */

/* P6. How it works: shared step card (how-it-works-v1). Stacked full-width rows, equal heights. */
.steps.steps--shared{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:var(--space-4)}
.steps--shared > li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--space-4);align-items:start;
  background:var(--niche-grad);border:1px solid rgba(255,255,255,.06);border-top:3px solid var(--niche-accent);
  border-radius:4px 4px var(--radius-card) var(--radius-card);box-shadow:var(--shadow-sm)}
.steps--shared > li > div{display:grid;gap:var(--space-2);min-width:0}
.steps--shared .card__title{margin:0;color:var(--dk-text-title);font-weight:700;min-height:1lh} /* heading slot: 1 line; titles ≤24 characters */
.steps--shared p{margin:0;max-width:none}
@media (min-width:768px){
  .steps.steps--shared{grid-auto-rows:1fr}   /* equal heights: every row = the tallest row; content centred, so no empty bottom */
  .steps--shared > li{align-items:center;column-gap:var(--space-5)}
}

/* P7. FAQ: one panel, rows ≥64px, holds for 5 or 6 items, collapsed by default. */
.faq summary{min-height:64px}
.faq details > p{padding-right:calc(28px + var(--space-4))}

/* P8. Rhythm: one heading-to-content gap everywhere. */

/* shared/styles/flow-v2.css (niche-flow-v2 shared page flow) */
/* niche-flow-v2 (founder 2026-10-20 00:07 UTC): one page flow on all five landings (scripts/flowv2.py). Dark B, existing tokens
   only (dark.css --dk-* / --niche-* roles, tokens.css spacing). Loaded LAST on the five landing hosts (not the hub). */

/* 1. Hero: the task subheading reads as the subtitle under "AI for <Niche>" */
.hero--flow .hero__tasks{color:var(--dk-text-strong);font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);font-weight:600;margin-top:var(--space-4)}

/* 2. Try it free: the free part. Niche band background, accent top rule, badge; the signup card sits inside unchanged */
.section--free{background:var(--niche-band);border-top:4px solid var(--niche-accent);border-bottom:1px solid var(--dk-hairline)}
.free__intro{margin:0 0 var(--space-6)}
.free__badge{display:inline-flex;align-items:center;margin:0 0 var(--space-4);padding:var(--space-1) var(--space-4);border-radius:999px;
  background:color-mix(in srgb,var(--niche-accent) 18%,var(--dk-sunken));border:1px solid color-mix(in srgb,var(--niche-accent) 55%,transparent);
  color:var(--niche-accent);font-family:var(--font-heading);font-weight:800;font-size:var(--text-label-size);letter-spacing:.04em;text-transform:uppercase}
.free__statement{margin:0 0 var(--space-3);font-family:var(--font-heading);font-weight:var(--font-weight-heading);color:var(--dk-text-title);
  font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem);line-height:1.2;text-wrap:balance;max-width:none}
.free__lead{margin:0;color:var(--dk-text-strong);max-width:68ch}
.free__micro{margin:var(--space-3) 0 0;color:var(--dk-text-body)}
.section--free .signup{box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--niche-accent) 30%,transparent)}

/* 4. Second CTA (scroll-to-form button; open state only) */
.section--cta2{padding:var(--space-7) 0}
.cta2{background:var(--niche-grad);border:1px solid var(--dk-border-panel);border-radius:16px;padding:var(--space-6) var(--space-5);text-align:center;box-shadow:var(--shadow-md)}
.cta2__title{margin:0 0 var(--space-5);text-wrap:balance}
.cta2__btn{display:inline-flex;align-items:center;gap:var(--space-2)}
@media (max-width:767px){.cta2__btn{display:flex;width:100%;justify-content:center}}
@media (min-width:768px){.cta2{padding:var(--space-7) var(--space-6)}}

/* 6. Coming soon: neutral, quiet (no accent fill, no button) */
/* v2 glass (Orion 20:30 UTC): same float tokens as space-scroll-v2's boxes (--sp-float, blur, --sp-float-hair hairline); was a dashed outline on all 5 niches */
.soon{border:1px solid var(--sp-float-hair,rgba(47,211,238,.16));border-radius:16px;padding:var(--space-6) var(--space-5);text-align:center;
  background:var(--sp-float,rgba(16,28,58,.72));-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
.soon__badge{display:inline-block;margin:0 0 var(--space-3);padding:var(--space-1) var(--space-3);border-radius:999px;border:1px solid var(--dk-hairline);
  color:var(--dk-text-strong);font-size:var(--text-label-size);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.soon__title{margin:0 0 var(--space-3)}
.soon__text{margin:0 auto;color:var(--dk-text-body);max-width:52ch}

/* one column: the second CTA and Coming soon share the 46rem column of How it works / Signup / FAQ (polish-v1 P5) */
.section--cta2 .container,.section--soon .container{max-width:calc(var(--layout-container-mid) + 2 * var(--layout-gutter))}

/* shared/styles/lockup-text.css (niche lockup descriptor in Nunito 700, Creative 12:18 UTC) */
/* Niche header lockup as text (Creative 2026-10-20 12:18 UTC): the 'for <Niche>' descriptor renders in the self-hosted Nunito 700
   (/fonts/Nunito-Latin-VariableFont.woff2, preloaded in <head>), next to the unchanged wordmark SVG. Geometry follows the
   -horizontal-dark lockup artwork (viewBox height 212): rule at y 96-192 (x 556, 3 wide, descriptor colour at .45), descriptor
   baseline at y 176.8. Everything scales with the logo height --lk-h (48px; 44px at <=390px). No serif anywhere in the stack.
   Five landing hosts only (scripts/build.py); the hub header has no lockup. */
.site-header .brand--lockup{--lk-h:var(--header-logo-h,48px);display:inline-flex;align-items:flex-start;text-decoration:none;color:var(--lk-c,#9BE8F6)}
.site-header .brand--lockup img{height:var(--lk-h);width:auto;display:block;flex:none}
.brand--lockup .brand__rule{display:block;flex:none;width:1px;height:calc(var(--lk-h) * .453);margin:calc(var(--lk-h) * .415) calc(var(--lk-h) * .126) 0 calc(var(--lk-h) * .094);
  background:currentColor;opacity:.45;border-radius:1px}
/* Nunito: ascent 1.011em, descent .353em; with line-height 1 the baseline sits .829em below the line-box top.
   Baseline target = .796 * --lk-h, font-size = .33 * --lk-h (cap height .705em -> 10.2px at 44px, Creative >= 10px rule) */
.brand--lockup .brand__for{display:block;flex:none;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-weight:700;
  font-style:normal;font-size:calc(var(--lk-h) * .33);line-height:1;letter-spacing:0;white-space:nowrap;color:currentColor;
  margin-top:calc(var(--lk-h) * .796 - var(--lk-h) * .33 * .829);font-synthesis:none}
@media (max-width:390px){.site-header .brand--lockup{--lk-h:var(--header-logo-h-sm,44px)}}
/* descriptor colours = the fill of each -horizontal-dark lockup's descriptor */
[data-niche="business"]   {--lk-c:#9BE8F6}
[data-niche="education"]  {--lk-c:#A9C4B0}
[data-niche="realestate"] {--lk-c:#DDB6A6}
[data-niche="assistants"] {--lk-c:#BDB2D6}
[data-niche="bookkeeping"]{--lk-c:#D4B1C4}

/* shared/styles/hub-signup.css (hub signup layer) */
/* Hub signup layer (Web, 2026-10-20; NEEDS Creative PASS): appended LAST to the siqwes.com bundle ONLY when the hub signup
   is built (SIQWES_SIGNUP_NICHES has "hub"), so niche bundles and the static hub are unchanged. Dark B tokens only. */
.hub-banner{position:relative;background:var(--niche-grad);border-bottom:1px solid var(--dk-border-panel);color:var(--dk-text-title)}
.hub-banner::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--color-electric-500),var(--color-cyan-400))}
.hub-banner__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);padding-top:var(--space-5);padding-bottom:var(--space-5)}
.hub-banner__text{margin:0;max-width:60ch;font-size:var(--text-body-size);line-height:1.5;color:var(--dk-text-strong)}
.hub-banner__title{display:block;font-family:var(--font-heading);font-weight:var(--font-weight-heading);font-size:var(--text-h3-size);line-height:var(--text-h3-line);color:var(--dk-text-title);margin-bottom:var(--space-1)}
.hub-banner__cta{flex:0 0 auto;min-height:44px}
@media (max-width:599px){.hub-banner__cta{width:100%;justify-content:center}}
#start{scroll-margin-top:var(--space-4)}
/* banner sits flush under the header (cancels .page top padding) and the hero keeps its usual top space below it */
.page>.hub-banner:first-child{margin-top:calc(-1*var(--space-8));margin-bottom:var(--space-8)}
@media (min-width:768px){.page>.hub-banner:first-child{margin-top:calc(-1*var(--space-9));margin-bottom:var(--space-9)}}
/* space-v2 (Creative 12:46 UTC): no top banner; the hero button (submit label, -> #start) is the first CTA above the fold */
/* Creative 21:14 UTC: 24px above the hero button (under the intro line) */
.prose .hero-cta,.prose>.hero-cta:last-child{margin:var(--space-5) 0 var(--space-8)}
@media (min-width:768px){.prose .hero-cta,.prose>.hero-cta:last-child{margin-bottom:var(--space-9)}}
.hero-cta__btn{min-height:48px}
@media (max-width:599px){.hero-cta__btn{width:100%;justify-content:center}}

/* shared/styles/space-scroll-v2.css (Creative space-scroll v2, verbatim; loads last) */
/* Siqwes space-scroll v2: the X-banner galaxy behind every page.
   Deep-navy sky, electric-blue nebula, sparse stars and flowing light ribbons drift with the scroll.
   Sections float in space with no bands. Load last: tokens > dark-tokens > dark-site > polish-v1 > space-scroll-v2.
   Assets served at /brand/space/ (stars-far.svg, stars-near.svg, waves.svg). Pure CSS, CSP-safe (no JS, no inline style).
   The sky never uses lines between stars: stars are single dots and the ribbons are free curves. */

:root{
  /* X-banner / avatar navy */
  --sp-navy-hi:#13306B;   /* avatar centre */
  --sp-navy-1:#0B2154;    /* banner glow core */
  --sp-navy-2:#0A1838;    /* page top */
  --sp-navy-3:#07122B;
  --sp-navy-4:#050B18;    /* page bottom / deepest */
  --sp-blue:#1677FF;      /* electric blue nebula */
  --sp-cyan:#2FD3EE;
  --sp-cyan-lt:#9BE8F6;
  --sp-float:rgba(16,28,58,.72);
  --sp-float-hair:rgba(47,211,238,.16);
  --sp-float-shadow:0 18px 48px rgba(2,6,16,.55),0 2px 8px rgba(2,6,16,.35);
  --sp-hover-shadow:0 24px 60px rgba(2,6,16,.6),0 0 0 1px rgba(47,211,238,.5),0 0 28px rgba(47,211,238,.18);
  /* retune the dark theme's page colour so header, focus ring etc. sit on navy */
  --dk-page:#0A1838;
  --bg-page:#0A1838;
}

/* ---------- 1. The base sky (static, always visible) ----------
   Painted on <html> so nothing inside body can hide it. Body itself goes transparent. */
html{
  background-color:var(--sp-navy-4);
  background-image:
    radial-gradient(70vmax 55vmax at 8% 0%,rgba(22,119,255,.24),rgba(22,119,255,0) 62%),
    linear-gradient(180deg,var(--sp-navy-2) 0%,var(--sp-navy-3) 55%,var(--sp-navy-4) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100%;
}
body{background:transparent !important;position:relative;isolation:isolate;overflow-x:clip}

/* ---------- 2. The moving sky: two fixed layers at z-index 0 ----------
   Content (header, main, footer) is lifted to z-index 1 below, so these layers can never be covered by,
   or cover, the page. (v1 bug: z-index:-1 layers sat under any opaque html/body/section paint.) */
body::before,body::after{
  content:"";position:fixed;left:0;right:0;top:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;
}
/* far layer: nebula glows + far stars, slow */
body::before{
  height:130vh;
  background-image:
    radial-gradient(48vmax 34vmax at 10% 12%,rgba(22,119,255,.27),rgba(22,119,255,.09) 45%,rgba(22,119,255,0) 72%),
    radial-gradient(22vmax 16vmax at 6% 8%,rgba(127,243,255,.04),rgba(127,243,255,0) 70%),
    radial-gradient(42vmax 30vmax at 92% 62%,rgba(47,211,238,.16),rgba(47,211,238,0) 70%),
    radial-gradient(40vmax 26vmax at 30% 118%,rgba(22,119,255,.16),rgba(22,119,255,0) 70%),
    url("/brand/space/stars-far.svg");
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,700px 700px;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;
}
/* near layer: flowing light ribbons + near stars, faster */
body::after{
  height:150vh;
  background-image:url("/brand/space/waves.svg"),url("/brand/space/stars-near.svg");
  background-size:cover,1000px 1000px;
  background-position:center top,0 0;
  background-repeat:no-repeat,repeat;
  opacity:.9;
}

/* phones: text spans the full width, so the ribbons sit quieter */
@media (max-width:600px){body::after{opacity:.6}}

/* lift the page above the sky */
body>header,body>main,body>footer,body>nav,body>section,body>aside,body>.draft-banner{position:relative;z-index:1}
/* .skip keeps its own absolute positioning and z-index:10 */

/* ---------- 3. No bands or breaks: every section is open sky ---------- */
main,.page,.hero,main section,.section,.section--sand,.section--signup,.section--faq,.section--how{
  background:transparent !important;border-top:0 !important;border-bottom:0 !important;
}
.section+.section{border-top:0 !important}

/* header: translucent navy glass */
.site-header{
  background:rgba(7,18,43,.62) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(155,232,246,.10) !important;
}
/* footer: fades out of the sky, no band */
.site-footer{
  background:linear-gradient(180deg,rgba(5,11,24,0) 0%,rgba(5,11,24,.78) 45%,rgba(5,11,24,.92) 100%) !important;
  border-top:0 !important;
}

/* ---------- 4. Boxes float in space ---------- */
.card,.signup,.faq,.steps>li{
  background:var(--sp-float) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  border-radius:16px;
  box-shadow:var(--sp-float-shadow),inset 0 0 0 1px var(--sp-float-hair);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card,.signup,.faq{border:0}
.notice{box-shadow:var(--sp-float-shadow);border-radius:12px}
.signup__what,.signup__full{background:rgba(255,255,255,.04)}

/* hub course cards keep their niche tint over the navy glass */
.niche-card--realestate {--nc:#ECBEAC}
.niche-card--bookkeeping{--nc:#E4B5CF}
.niche-card--education  {--nc:#AAD8B6}
.niche-card--assistants {--nc:#C5B7E6}
.niche-card--business   {--nc:#9BE8F6}
.niche-card{
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--nc,#9BE8F6) 11%,transparent) 0%,transparent 62%),
    var(--sp-float) !important;
  box-shadow:var(--sp-float-shadow),inset 0 0 0 1px color-mix(in srgb,var(--nc,#9BE8F6) 24%,transparent);
}
.niche-card .niche-card__name{color:var(--nc,var(--niche-accent))}

/* hover: lift 3px, cyan edge glow (niche cards glow in their own accent) */
.card:hover,.benefits .card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sp-hover-shadow);
}
.niche-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(2,6,16,.6),0 0 0 1px color-mix(in srgb,var(--nc,#9BE8F6) 60%,transparent),0 0 28px color-mix(in srgb,var(--nc,#9BE8F6) 20%,transparent);
}
.btn--primary:hover{box-shadow:0 0 22px rgba(47,211,238,.45)}

/* ---------- 5. Scroll-driven motion (Chrome/Edge 115+, Safari 26+). Elsewhere: static sky, boxes shown at once. ---------- */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body::before{animation:sp-far linear both;animation-timeline:scroll(root block)}
    body::after {animation:sp-near linear both;animation-timeline:scroll(root block)}
    /* rise-in uses the `translate` property so it never fights the hover `transform` */
    .card,.signup,.faq,.steps>li{
      animation:sp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%;
    }
  }
}
@keyframes sp-far {from{translate:0 0}to{translate:0 -12vh}}
@keyframes sp-near{from{translate:0 0}to{translate:0 -40vh}}
@keyframes sp-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}

/* ---------- 6. Reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  body::before,body::after,.card,.signup,.faq,.steps>li{animation:none !important;translate:none !important;opacity:1}
  body::after{opacity:.9}
  .card:hover,.niche-card:hover{transform:none}
  .card,.signup,.faq,.steps>li{transition:box-shadow .2s ease}
}

/* shared/styles/cancel-footer-v1.css (Creative cancel-footer fixes) */
/* Creative cancel-footer review (PASS with 2 fixes, 2026-10-20 ~16:50 UTC). All hosts, loads after space-scroll-v2.
   1. Short pages (e.g. the cancel page at 1280) showed sky below the footer panel: pin the footer to the bottom.
      The footer keeps the space-scroll v2 top fade to transparent (no hard edge); the sky stays on <html> (fixed) and
      body::before/::after stay position:fixed, so they are out of the flex flow. */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
/* 2. Footer below 768: everything centred (link rows, contact line, wordmark, X circle). */
@media (max-width:767px){
  .site-footer,.site-footer__inner,.site-footer p{text-align:center}
  .site-footer__inner{align-items:center}
  .site-footer nav,.footer-courses{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-4)}
  .site-footer__contact{align-items:center}
  .site-footer img,.opens-soon .site-footer img{align-self:center}
  .site-footer .footer-social{margin-inline:auto}
}
/* 3. Cancel page, once Compliance's text is published (scripts/render-cancel-page.py): the body renders as normal body
      copy in one glass panel. The amber placeholder (.cancel-page__placeholder) is unchanged until then. */
.cancel-page__panel{max-width:680px;background:rgba(16,28,58,.72);border-radius:16px;padding:clamp(24px,4vw,32px);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:var(--sp-float-shadow),inset 0 0 0 1px var(--sp-float-hair)}
.cancel-page__panel > :last-child{margin-bottom:0}
.cancel-page__panel h2{font-family:'Nunito','Source Sans 3',system-ui,sans-serif;font-variation-settings:normal;font-weight:700;color:#FFFFFF}

/* shared/styles/blog-v1.css (Creative blog v1, verbatim) */
/* Siqwes blog-v1.css v1.3 (Creative, 2026-10-20; clean index 21:36 UTC: card = image only, tighter head, 16/20/24 gutters;
   v1.3 22:13 UTC: section 6 reading surface = one neutral navy panel under all long-form text, niche colour for accents only). Free /blog/ index + post template, all 6 sites (hub + 5 niches).
   Spec: brand/specs/blog-v1.md. DRAFT for Web. Not deployed.
   Load order: tokens.css > dark-tokens.css > dark-site.css > polish-v1.css > space-scroll-v2.css > blog-v1.css > site-header-v1.css > blog-chips-v1.css.
   Pure CSS, CSP-safe (script-src 'none'; style-src 'self'): no inline styles, no JS. Uses existing tokens only.
   Set data-niche on <body> (niche sites) or on each card (hub index mixes niches). Hub = cyan #2FD3EE. */

:root{
  /* Liquid glass (founder 21:45 UTC). Shared tokens: brand/specs/glass-v3.css (landed 2026-10-20; load it after this file, see glass-v3.md section 4).
     Names match glass v3 (--glass-border/-border-hover are colours). glass-v3.css also re-skins .blog-try/.blog-cta (still on --blog-glass here). */
  --blog-lg-border:var(--glass-border,rgba(255,255,255,.14));
  --blog-lg-border-hover:var(--glass-border-hover,rgba(255,255,255,.30));
  --blog-lg-highlight:var(--glass-highlight,inset 0 1px 0 rgba(255,255,255,.22));
  --blog-lg-shadow:var(--glass-shadow,0 20px 50px -12px rgba(0,0,0,.55));
  --blog-lg-shadow-hover:var(--glass-shadow-hover,0 28px 60px -12px rgba(0,0,0,.6));
  --blog-lg-fill:var(--glass-fill,rgba(255,255,255,.06));
  --blog-lg-blur:var(--glass-blur,blur(16px) saturate(1.4));
  --blog-glass:var(--sp-float,rgba(16,28,58,.72));
  --blog-glass-hair:var(--sp-float-hair,rgba(47,211,238,.16));
  --blog-blur:blur(10px) saturate(1.15);
  --blog-shadow:var(--sp-float-shadow,0 18px 48px rgba(2,6,16,.55),0 2px 8px rgba(2,6,16,.35));
  --blog-radius:16px;
  --blog-radius-img:12px;
  --blog-ease:.18s ease;
  --blog-measure:68ch;                       /* post column = 68 characters of body text */
  --blog-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;  /* system mono only */
}
/* hub accent (dark-tokens has no hub entry) */
[data-niche="hub"]{--niche-accent:#2FD3EE}

/* ---------- 0. Page shell (clean-up 2026-10-20 21:36 UTC: one rhythm, 64px above the footer at every width) ---------- */
.blog-page{padding:var(--space-5) 0 var(--space-8)}
@media (min-width:768px){.blog-page{padding:var(--space-6) 0 var(--space-8)}}
.blog-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Reading pages: quieter ribbons. v2's near layer (ribbons + near stars) runs at .9; a fully lit ribbon core behind
   meta text measured 2.9:1 at 375. On /blog/ pages it runs at .4 (.3 on phones), so every text line stays AA in any scroll position.
   Add class="blog" on <body> for every /blog/ page; :has() is the fallback hook. */
body.blog::after,body:has(.blog-page)::after{opacity:.4}
@media (max-width:600px){body.blog::after,body:has(.blog-page)::after{opacity:.3}}
@media (prefers-reduced-motion:reduce){body.blog::after,body:has(.blog-page)::after{opacity:.4}}

/* Optional header nav "Blog" link (add to every site header) */
.blog-headnav{display:flex;align-items:center;gap:var(--space-1)}
.blog-headnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-3);border-radius:8px;color:var(--dk-text-strong);font-weight:600;text-decoration:none;transition:background-color var(--blog-ease),color var(--blog-ease)}
.blog-headnav a:hover{background:rgba(255,255,255,.06);color:#FFFFFF}
.blog-headnav a[aria-current="page"]{color:#FFFFFF;box-shadow:inset 0 -2px 0 var(--niche-accent,#2FD3EE);border-radius:8px 8px 0 0}
.blog-headnav a:focus-visible{outline:none;box-shadow:var(--dk-focus-ring);border-radius:8px}

/* ---------- 1. Pill (niche / category) ---------- */
.blog-pill{display:inline-flex;align-items:center;min-height:28px;padding:2px 12px;border-radius:999px;
  font-family:var(--font-body);font-size:.8125rem;line-height:1.2;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--niche-accent,#2FD3EE);background:color-mix(in srgb,var(--niche-accent,#2FD3EE) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--niche-accent,#2FD3EE) 35%,transparent);text-decoration:none}
a.blog-pill{min-height:44px;padding:0 16px;transition:background-color var(--blog-ease),color var(--blog-ease)}   /* only when the pill links to a category page */
a.blog-pill:hover{background:color-mix(in srgb,var(--niche-accent,#2FD3EE) 26%,transparent);color:#FFFFFF}
a.blog-pill:focus-visible{outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--niche-accent,#2FD3EE) 35%,transparent),var(--dk-focus-ring);border-radius:999px}

/* ---------- 2. Index head: crumbs > eyebrow > H1 > one-line intro, 8px apart; 24px to the chip row ---------- */
.blog-page > .container > nav[aria-label="Breadcrumb"] .blog-crumbs{margin:0 0 var(--space-2)}
.blog-head{display:grid;gap:var(--space-2);margin:0 0 var(--space-5);max-width:none}
.blog-head .eyebrow{margin:0}
.blog-title{font-family:var(--font-heading);font-weight:800;font-size:var(--text-h1-size);line-height:var(--text-h1-line);letter-spacing:var(--text-h1-tracking);color:#FFFFFF;margin:0;text-wrap:balance}
.blog-intro{margin:0;max-width:72ch;font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);color:var(--dk-text-strong);text-wrap:pretty}

/* ---------- 3. Card grid: 1 col < 768 (gap 16), 2 cols 768-1279 (gap 20), 3 cols >= 1280 (gap 24) ---------- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:768px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1280px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.blog-grid > li{display:flex;min-width:0;margin:0}

/* Card = the featured image ONLY, one link (founder 2026-10-20 21:36 UTC). The image carries the big niche pill and the title.
   <li data-niche><a class="blog-card" href><img class="blog-card__img" alt="{title}"><span class="blog-sr"> · {date} · {n} min read</span></a></li>
   Liquid glass frame (founder 21:45 UTC): 1px white 14% border + top inner highlight drawn ABOVE the image (::after, crisp on the
   16px corners), floating shadow 0 20px 50px -12px. Hover: lift 4px, border to white 30%. The image is opaque, so the frame is the glass. */
.blog-card{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--blog-radius);background:#050B18;
  color:inherit;text-decoration:none;box-shadow:var(--blog-lg-shadow);
  transition:transform var(--blog-ease),box-shadow var(--blog-ease)}
.blog-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--blog-lg-border),var(--blog-lg-highlight);transition:box-shadow var(--blog-ease)}
.blog-card__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#050B18;border-radius:inherit}
.blog-card:hover,.blog-card:visited{color:inherit;text-decoration:none}
@media (hover:hover){
  .blog-card:hover{transform:translateY(-4px);box-shadow:var(--blog-lg-shadow-hover)}
  .blog-card:hover::after{box-shadow:inset 0 0 0 1px var(--blog-lg-border-hover),var(--blog-lg-highlight)}
}
.blog-card:active{transform:translateY(-1px)}
/* focus: the shared ring on the whole card (beats dark-site's a:focus-visible radius 6) */
.blog-card:focus-visible{outline:none;border-radius:var(--blog-radius);box-shadow:var(--blog-lg-shadow),var(--dk-focus-ring)}
.blog-card:focus-visible::after{box-shadow:inset 0 0 0 1px var(--blog-lg-border-hover),var(--blog-lg-highlight)}

/* Index pager (Newer posts / Older posts) */
.blog-pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin:var(--space-6) 0 0;padding:0;list-style:none}
.blog-pager a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-5);border-radius:999px;
  color:#FFFFFF;font-weight:700;text-decoration:none;background:var(--blog-lg-fill);-webkit-backdrop-filter:var(--blog-lg-blur);backdrop-filter:var(--blog-lg-blur);
  box-shadow:inset 0 0 0 1px var(--blog-lg-border),var(--blog-lg-highlight),var(--blog-lg-shadow);transition:background-color var(--blog-ease),box-shadow var(--blog-ease)}
.blog-pager a:hover{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px var(--blog-lg-border-hover),var(--blog-lg-highlight),var(--blog-lg-shadow)}
.blog-pager a:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--blog-lg-border-hover),var(--blog-lg-highlight),var(--dk-focus-ring)}
.blog-pager__next{margin-left:auto}

/* ---------- 4. Post template ---------- */
.blog-post{max-width:var(--blog-measure);margin:0 auto;font-size:var(--text-body-size)}   /* ch resolves against the body size */
.blog-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-2);margin:0 0 var(--space-4);padding:0;list-style:none;font-size:var(--text-small-size);color:var(--dk-text-meta)}
.blog-crumbs li{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}
.blog-crumbs li+li::before{content:"/";color:var(--dk-text-meta)}
.blog-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--dk-link)}
.blog-crumbs a:hover{color:#FFFFFF}
.blog-crumbs [aria-current="page"]{color:var(--dk-text-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
.blog-post__head{display:grid;justify-items:start;gap:var(--space-3);margin:0 0 var(--space-5)}   /* H1 + meta ABOVE the image; the image (alt="") repeats the title visually, so the HTML H1 stays for SEO/a11y */
.blog-post__title{font-family:var(--font-heading);font-weight:800;font-size:var(--text-h1-size);line-height:var(--text-h1-line);letter-spacing:var(--text-h1-tracking);color:#FFFFFF;margin:0;text-wrap:balance}
.blog-meta{margin:0;font-size:var(--text-small-size);line-height:1.45;color:var(--dk-text-meta)}
.blog-post__hero{margin:0 0 var(--space-6)}
.blog-post__hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--blog-radius);background:#050B18;
  box-shadow:var(--blog-lg-shadow),0 0 0 1px var(--blog-lg-border)}   /* same glass edge + float as the cards */

/* Body typography */
.blog-prose{color:var(--dk-text-body);font-size:var(--text-body-size);line-height:1.7}
.blog-prose > *{max-width:var(--blog-measure)}
.blog-prose > :first-child{margin-top:0}
.blog-prose > :last-child{margin-bottom:0}   /* page bottom = .blog-page 64px, no extra 24px gap above the footer */
.blog-prose p{margin:0 0 var(--space-5)}
.blog-prose .blog-lead{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);color:var(--dk-text-strong)}
.blog-prose h2{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;color:#FFFFFF;margin:var(--space-7) 0 var(--space-4);text-wrap:balance}
.blog-prose h3{font-family:var(--font-heading);font-weight:700;font-size:1.25rem;line-height:1.3;color:#FFFFFF;margin:var(--space-6) 0 var(--space-3);text-wrap:balance}
@media (min-width:768px){.blog-prose h2{font-size:1.75rem}.blog-prose h3{font-size:1.375rem}}
.blog-prose strong{color:var(--dk-text-strong);font-weight:700}
.blog-prose ul,.blog-prose ol{margin:0 0 var(--space-5);padding-left:1.5em}
.blog-prose li{margin:0 0 var(--space-2);padding-left:.25em}
.blog-prose li::marker{color:var(--niche-accent,#2FD3EE);font-weight:700}
.blog-prose li > ul,.blog-prose li > ol{margin:var(--space-2) 0 0}
.blog-prose a{color:var(--dk-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.blog-prose a:hover{color:#FFFFFF;text-decoration-thickness:2px}
.blog-prose a:focus-visible{outline:none;box-shadow:var(--dk-focus-ring);border-radius:4px}
.blog-prose blockquote{margin:var(--space-6) 0;padding:var(--space-2) 0 var(--space-2) var(--space-5);
  box-shadow:inset 4px 0 0 var(--niche-accent,#2FD3EE);color:var(--dk-text-strong);font-size:var(--text-body-lg-size);line-height:1.6}
.blog-prose blockquote p{margin:0 0 var(--space-3)}
.blog-prose blockquote p:last-child{margin:0}
.blog-prose blockquote cite{display:block;margin-top:var(--space-2);font-style:normal;font-size:var(--text-small-size);color:var(--dk-text-meta)}
.blog-prose code{font-family:var(--blog-mono);font-size:.9em;padding:.1em .4em;border-radius:6px;background:rgba(255,255,255,.08);color:#E6E9EF}
.blog-prose pre{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);border-radius:var(--blog-radius-img);overflow-x:auto;
  background:rgba(5,11,24,.72);box-shadow:inset 0 0 0 1px var(--blog-glass-hair);font-size:.9375rem;line-height:1.6}
.blog-prose pre code{padding:0;background:none;font-size:inherit;color:#E6E9EF}
.blog-prose pre:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--blog-glass-hair),var(--dk-focus-ring)}   /* give scrollable pre tabindex="0" */
.blog-prose hr{border:0;height:1px;margin:var(--space-7) 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--niche-accent,#2FD3EE) 45%,transparent),transparent)}
.blog-prose figure,.blog-figure{margin:var(--space-6) 0}
.blog-prose img{display:block;width:100%;height:auto;border-radius:var(--blog-radius-img);background:#050B18;box-shadow:0 0 0 1px var(--blog-glass-hair)}
.blog-prose figcaption,.blog-figure figcaption{margin-top:var(--space-3);font-size:var(--text-small-size);line-height:1.5;color:var(--dk-text-meta)}

/* "Try it" prompt box: glass + niche bar */
.blog-try{margin:var(--space-6) 0;padding:var(--space-5);border-radius:var(--blog-radius);
  background:var(--blog-glass);-webkit-backdrop-filter:var(--blog-blur);backdrop-filter:var(--blog-blur);
  box-shadow:var(--blog-shadow),inset 0 0 0 1px var(--blog-glass-hair),inset 4px 0 0 var(--niche-accent,#2FD3EE)}
.blog-try__head{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-3);font-family:var(--font-heading);font-weight:700;font-size:1.125rem;line-height:1.3;color:#FFFFFF}
.blog-try__head svg{width:22px;height:22px;flex:none;color:var(--niche-accent,#2FD3EE)}
.blog-try__prompt{display:block;margin:0;padding:var(--space-4);border-radius:10px;background:rgba(5,11,24,.55);box-shadow:inset 0 0 0 1px rgba(47,211,238,.28);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:#FFFFFF;white-space:pre-wrap;word-break:break-word;
  -webkit-user-select:all;user-select:all;cursor:text;transition:background-color var(--blog-ease),box-shadow var(--blog-ease)}
.blog-try__prompt:hover{background:rgba(47,211,238,.08);box-shadow:inset 0 0 0 1px rgba(47,211,238,.55)}
.blog-try__prompt:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(47,211,238,.55),var(--dk-focus-ring)}
.blog-try__help{margin:var(--space-3) 0 0;font-size:var(--text-small-size);line-height:1.45;color:var(--dk-text-meta)}
.blog-prose .blog-try p{margin-bottom:0}
.blog-prose .blog-try .blog-try__head{margin-bottom:var(--space-3)}
.blog-prose .blog-try .blog-try__help{margin-top:var(--space-3)}

/* End-of-post CTA: retired 2026-10-20 (founder rule: education first). Rules kept so older builds still render; Web can delete .blog-cta together with its markup. */
.blog-cta{margin:var(--space-8) 0 0;padding:var(--space-5);border-radius:var(--blog-radius);position:relative;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--niche-accent,#2FD3EE) 14%,transparent) 0%,transparent 65%),var(--blog-glass);
  -webkit-backdrop-filter:var(--blog-blur);backdrop-filter:var(--blog-blur);
  box-shadow:var(--blog-shadow),inset 0 0 0 1px color-mix(in srgb,var(--niche-accent,#2FD3EE) 30%,transparent)}
.blog-cta::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--color-electric-500,#1677FF),var(--color-cyan-400,#2FD3EE))}
@media (min-width:768px){.blog-cta{padding:var(--space-6) var(--space-7)}}
.blog-cta .eyebrow{margin:0 0 var(--space-2)}
.blog-cta__title{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;line-height:1.25;color:#FFFFFF;margin:0 0 var(--space-3);text-wrap:balance}
@media (min-width:768px){.blog-cta__title{font-size:1.75rem}}
.blog-cta p{margin:0 0 var(--space-5);color:var(--dk-text-body);max-width:56ch}
.blog-cta .btn{margin:0}
.blog-cta p.blog-cta__micro{margin:var(--space-3) 0 0;font-size:var(--text-small-size);color:var(--dk-text-meta)}

/* Related posts row (same card, 1/2/3 columns) */
.blog-related{margin:var(--space-8) 0 0}
.blog-related__title{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;line-height:1.25;color:#FFFFFF;margin:0 0 var(--space-5)}
@media (min-width:768px){.blog-related__title{font-size:1.75rem}}

/* ---------- 5. Motion: rise-in on scroll (same as v2 boxes), reduced motion = still ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .blog-card,.blog-cta,.blog-try{animation:sp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@media (prefers-reduced-motion:reduce){
  .blog-card,.blog-cta,.blog-try{animation:none!important;translate:none!important;opacity:1}
  .blog-card,.blog-card::after,.blog-try__prompt,.blog-pager a,a.blog-pill,.blog-headnav a{transition:none!important}
  .blog-card:hover,.blog-card:active{transform:none!important}
}

/* ---------- 6. Reading surface v1.3 (founder 22:13 UTC: "the blogs are hard to read... a box around them... the generic background
   colour, not the colour of the subdomain theme... all blogs look the same, then use the colours where applicable") ----------
   ONE neutral navy panel under all long-form text. Identical on every niche and the hub label: the fill never takes a niche tint.
   Niche colour = accents only: label pill, Try-it left edge + icon, list markers, blockquote bar, hr fade, index eyebrow.
   Links stay cyan #9BE8F6 on every niche (one recognisable link colour; 10.7:1 worst case vs 7.7–9.2 for the pastel accents).
   Markup (blog.py): <main class="blog-page"><div class="container"><div class="blog-read"> <article class="blog-post">…</article>
   <section class="blog-related">…</section> </div></div></main>. Index/label pages: no markup change (.blog-head takes the surface).
   Contrast (WCAG 2.x, fill #0E1A36 @ 94% composited over PURE WHITE = #1C2842, i.e. the brightest star/ribbon pixel possible):
   body #CFD6E1 10.04 · meta #B4BCCB 7.69 · link #9BE8F6 10.68 · lead/strong #E6E9EF 12.08 · white 14.69 (all AAA).
   This file loads BEFORE glass-v3.css, so the rules that glass-v3 also sets carry the extra .blog-read class + !important. */
:root{
  --read-fill:rgba(14,26,54,.94);            /* #0E1A36 @ 94%: neutral navy, same on every site */
  --read-blur:blur(12px);                    /* light frost: the galaxy stays a faint, soft glow behind the panel */
  --read-border:var(--glass-border,rgba(255,255,255,.14));
  --read-highlight:var(--glass-highlight,inset 0 1px 0 rgba(255,255,255,.22));
  --read-shadow:var(--glass-shadow,0 20px 50px -12px rgba(0,0,0,.55),0 0 0 1px rgba(47,211,238,.06));
  --read-radius:24px;
  --read-content:720px;                      /* reading measure inside the panel */
  --read-pad-x:48px;                         /* desktop 48 (40 at 768–1023), phone 20 */
  --read-text:#CFD6E1;                       /* body text on the panel (bumped from #BAC2CF) */
  --read-meta:#B4BCCB;                       /* meta, crumbs, captions, help text on the panel (bumped from #A9B1C1) */
  --read-well:#08122A;                       /* Try-it box + code block: darker inset well */
  --read-well-deep:#040A1A;                  /* the prompt well inside a Try-it box */
  --read-well-hair:rgba(255,255,255,.10);
}
/* Fallback: no backdrop-filter or "reduce transparency" -> fully solid (the 6% sky glimpse is the only thing lost) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--read-fill:#0E1A36}}
@media (prefers-reduced-transparency:reduce){:root{--read-fill:#0E1A36;--read-blur:none}}

/* 6a. The panel (post pages) */
/* .read-surface = the same panel for every other long-form page (Privacy, Terms, Cancellation and refunds, …):
   <article class="prose read-surface">. Brand rule: brand-guidelines.md section 9a. */
.blog-read,.read-surface{box-sizing:border-box;position:relative;max-width:calc(var(--read-content) + 2 * var(--read-pad-x));margin:0 auto;
  padding:var(--space-5,24px) var(--read-pad-x) var(--read-pad-x);
  background:var(--read-fill);-webkit-backdrop-filter:var(--read-blur);backdrop-filter:var(--read-blur);
  border:1px solid var(--read-border);border-radius:var(--read-radius);
  box-shadow:var(--read-shadow),var(--read-highlight);color:var(--read-text)}
@media (min-width:768px) and (max-width:1023.98px){:root{--read-pad-x:40px}}
@media (max-width:767.98px){
  :root{--read-pad-x:20px}
  .blog-read,.read-surface{margin-inline:-8px;padding-top:var(--space-3,12px);border-radius:20px}   /* panel 8px wider each side: 12px of sky at the phone edge */
}
.blog-read .blog-post{max-width:none;margin:0}
.blog-read .blog-prose > *{max-width:none}
.blog-read .blog-prose,.blog-read .blog-prose li{color:var(--read-text)}
.blog-read .blog-meta,.blog-read .blog-crumbs,.blog-read .blog-crumbs li+li::before,.blog-read .blog-crumbs [aria-current="page"],
.blog-read .blog-prose figcaption,.blog-read .blog-prose blockquote cite,.blog-read .blog-try__help{color:var(--read-meta)}
.blog-read .blog-crumbs{margin-bottom:var(--space-2,8px)}
.blog-read .blog-prose a{color:var(--dk-link,#9BE8F6)}                 /* cyan on every niche (decision v1.3) */
.blog-read .blog-prose a:hover{color:#FFFFFF}
/* niche label pill above the H1 (label_link(p, " blog-post__label")): accent text on a 12% accent tint, 44px hit area */
.blog-post__label{position:relative;min-height:28px;text-decoration:none;background:transparent}   /* outline pill: accent text straight on the navy = AAA on every niche */
.blog-post__label::after{content:"";position:absolute;inset:-8px -4px}
.blog-post__label:hover{background:color-mix(in srgb,var(--c,var(--niche-accent,#2FD3EE)) 24%,transparent);color:#FFFFFF}
.blog-post__label:focus-visible{outline:none;box-shadow:var(--dk-focus-ring);border-radius:999px}
/* hero image: hairline only inside the panel (the panel already floats) */
.blog-read .blog-post__hero{margin-bottom:var(--space-6,32px)}
.blog-read .blog-post__hero img{box-shadow:0 0 0 1px var(--read-well-hair)}

/* 6b. Try it box + code wells: darker inset wells INSIDE the panel (no glass-in-glass), niche colour on the left edge + icon only */
.blog-read .blog-try{background:var(--read-well) !important;-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--read-well-hair);border-left:4px solid var(--niche-accent,#2FD3EE);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;padding:var(--space-5,24px);animation:none}
@media (max-width:767.98px){.blog-read .blog-try{padding:var(--space-4,16px)}}
.blog-read .blog-try__prompt{background:var(--read-well-deep);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.blog-read .blog-try__prompt:hover{background:#0B1733;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.blog-read .blog-try__prompt:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),var(--dk-focus-ring)}
.blog-read .blog-prose pre:not(.blog-try__prompt){background:var(--read-well);box-shadow:inset 0 0 0 1px var(--read-well-hair)}
.blog-read .blog-prose pre:not(.blog-try__prompt):focus-visible{box-shadow:inset 0 0 0 1px var(--read-well-hair),var(--dk-focus-ring)}
.blog-read .blog-prose :not(pre) > code{background:rgba(255,255,255,.08)}
/* the Copy prompt button keeps .btn--secondary (transparent, cyan edge, white text): on #08122A it reads 18.6:1 */

/* 6c. Keep reading: inside the same panel, under a quiet rule; 2 cards (spec v2 §8: 1–2 related) */
.blog-read .blog-related{margin:var(--space-7,48px) 0 0;padding-top:var(--space-6,32px);border-top:1px solid var(--read-well-hair)}
.blog-read .blog-related .blog-grid{grid-template-columns:1fr;gap:16px}
@media (min-width:600px){.blog-read .blog-related .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}

/* 6d. Index + label pages: the head (eyebrow, H1, intro + "More from" links) sits on the same surface. Chips and image cards stay on the sky. */
.blog-head{box-sizing:border-box;max-width:calc(var(--read-content) + 2 * var(--read-pad-x));
  padding:var(--space-5,24px) var(--read-pad-x);margin-bottom:var(--space-5,24px);
  background:var(--read-fill);-webkit-backdrop-filter:var(--read-blur);backdrop-filter:var(--read-blur);
  border:1px solid var(--read-border);border-radius:var(--read-radius);box-shadow:var(--read-shadow),var(--read-highlight)}
@media (max-width:767.98px){.blog-head{margin-inline:-8px;border-radius:20px}}
.blog-head .blog-crumbs{margin:-8px 0 0}                                  /* blog.py v1.3: the breadcrumb moves INSIDE <header class="blog-head"> */
.blog-head .blog-crumbs,.blog-head .blog-crumbs li+li::before,.blog-head .blog-crumbs [aria-current="page"]{color:var(--read-meta)}
.blog-head .blog-intro{max-width:none;color:var(--dk-text-strong,#E6E9EF)}
.blog-head .blog-intro a{color:var(--dk-link,#9BE8F6)}
/* the empty-state line stays one plain line on the sky (founder 19:18 UTC: no card/box/button); it is short and measured AA */

/* 6e. Motion: the panel itself never rises in or moves; the galaxy scrolls behind it as before */
@media (prefers-reduced-motion:reduce){.blog-read,.read-surface,.blog-head{transition:none}}
.read-surface{padding-top:var(--read-pad-x)}
.read-surface :is(p,li){color:var(--read-text)}
.read-surface a{color:var(--dk-link,#9BE8F6)}
.read-surface > :first-child{margin-top:0}
.read-surface > :last-child{margin-bottom:0}

/* shared/styles/blog-v1-web.css (Web additions) */
/* Web additions to Creative's blog-v1.css (loads right after it). Header Blog nav fit at 375px (preview notes removed from the blog index, t227u; .blog-preview-note kept for preview builds),
   the no-tracking Copy prompt button (progressive enhancement), the hub's links to the niche blogs. Existing tokens only. */
.site-header__inner{gap:var(--space-3)}
.site-header .brand{min-width:0}
.blog-headnav{margin-left:auto}
.site-header .header-cta{margin-left:0}
@media (max-width:479px){.blog-headnav a{padding:0 6px}.site-header__inner{gap:var(--space-2)}}
.blog-preview-note{margin:0 0 var(--space-5);padding:var(--space-3) var(--space-4);border-radius:12px;background:var(--dk-warning-bg);
  box-shadow:inset 0 0 0 1px var(--dk-warning);color:var(--dk-warning);font-size:var(--text-small-size)}
.blog-try__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:var(--space-3) 0 0}
.blog-try__actions:has(button[hidden]){display:none}
.blog-try__copy{min-height:44px}
.blog-try__status{font-size:var(--text-small-size);color:var(--dk-success)}
.blog-prose .blog-try p.blog-try__actions{margin-top:var(--space-3)}
.blog-hosts{margin:var(--space-8) 0 0}
.blog-hosts ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-2) var(--space-5);margin:0;padding:0;list-style:none}
.blog-hosts a{display:inline-flex;align-items:center;min-height:44px;color:var(--dk-link)}
.blog-hosts a:hover{color:#FFFFFF}
.blog-hosts a:focus-visible{outline:none;box-shadow:var(--dk-focus-ring);border-radius:4px}

/* founder 19:18 UTC: empty index = one plain line (no card, box or button) */
.blog-empty{margin:var(--space-6,32px) 0 0;font-size:1.125rem;color:var(--dk-text-2,#C9D3E6)}

/* Hub footer fix (Orion 19:36 UTC): the hub bundle has no dark-site footer-nav rule, so the legal links ran together at >=768.
   Same rule and gap as the niche footers (business): 16px (--space-4). The course row (.footer-courses) already uses 16px. */
.site-footer nav:not(.footer-courses){display:flex;flex-wrap:wrap;gap:0 var(--space-4)}
/* Web 23:4x (design F scroll check): no sideways scroll at 375 on legal pages. The hub-intro halo (section-rhythm-v1 0b,
   main.page > .container > .prose::before) also matched <article class="prose read-surface"> and overflowed 7-11px; the panel needs no halo.
   Long policy URLs in list items wrap instead of widening the page. */
main.page > .container > .prose.read-surface::before{content:none}
.read-surface :is(p,li,a){overflow-wrap:anywhere}

/* shared/styles/site-header-v1.css */
/* Siqwes site-header-v1.css (Creative, 2026-10-20). ONE shared top banner on all 6 sites:
   siqwes.com (hub) + business., education., realestate., assistants., bookkeeping.siqwes.com.
   Spec: brand/specs/site-header-v1.md. DRAFT for Web. Not deployed.
   Load order: tokens.css > dark-tokens.css > dark-site.css > polish-v1.css > space-scroll-v2.css > blog-v1.css > site-header-v1.css
               (> blog-chips-v1.css on /blog/ pages; > members-area-v1.css on members routes).
   Pure HTML/CSS, CSP-safe (script-src 'none'; style-src 'self'): no inline style, no JS, no <details> needed.
   Layout: 3-column grid (1fr auto 1fr) so the title sits in the TRUE centre of the header.
     [wordmark -> https://siqwes.com/]   [AI for {niche} / Everyday AI, accent]   [Blog (text link)  16px  Members log in (cyan outline)]
   Below 880px: row 1 = wordmark + Blog + Members log in, row 2 = the full title, centred (text-wrap:balance).
   Titles are never shortened or truncated. Below 330px only, the button's visible words become "Log in" (name stays "Members log in").
   Footer: unchanged from live (Privacy, Terms, Canceling your membership, support@, X + LinkedIn); no blog link (founder 20:05 UTC). */

/* ---------- 0. Per-site variables (data-site on <header class="site-header sh">) ---------- */
.sh{
  --sh-accent:#2FD3EE;                 /* title colour + bottom hairline; set per site below */
  --sh-cta:#2FD3EE;                    /* Members log in = cyan secondary outline button on every site */
  --sh-cta-text:#FFFFFF;
  --sh-navy:#0B1F45;
  --sh-h:64px;                         /* one-row height */
  --sh-logo-h:40px;                    /* wordmark height in the header (106px wide) */
  --sh-gap:24px;
  --sh-ease:.18s ease;
}
.sh[data-site="hub"]        {--sh-accent:#2FD3EE}
.sh[data-site="business"]   {--sh-accent:#9BE8F6}
.sh[data-site="education"]  {--sh-accent:#AAD8B6}
.sh[data-site="realestate"] {--sh-accent:#ECBEAC}
.sh[data-site="assistants"] {--sh-accent:#C5B7E6}
.sh[data-site="bookkeeping"]{--sh-accent:#E4B5CF}

/* ---------- 1. Bar: space-scroll v2 glass (unchanged values) + niche hairline ---------- */
.site-header.sh{
  position:relative;
  background:rgba(7,18,43,.62) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(155,232,246,.10) !important;
}
.site-header.sh::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;pointer-events:none;opacity:.45;
  background:linear-gradient(90deg,transparent,var(--sh-accent) 50%,transparent)}

.sh__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);   /* equal side columns = true centre */
  grid-template-areas:"home title right";
  align-items:center;
  column-gap:var(--sh-gap);
  min-height:var(--sh-h);
  padding-top:6px;padding-bottom:6px;   /* the 44px targets sit inside the 64px row */
}

/* ---------- 2. Wordmark (home link, always https://siqwes.com/) ---------- */
.sh__home{
  grid-area:home;justify-self:start;
  display:inline-flex;align-items:center;min-height:44px;
  padding:2px 6px;margin-left:-6px;border-radius:8px;
  text-decoration:none;transition:background-color var(--sh-ease),box-shadow var(--sh-ease);
}
.sh__home img{display:block;height:var(--sh-logo-h);width:auto;flex:none}
.sh__home:hover{background:rgba(255,255,255,.06)}
.sh__home:focus-visible{outline:none;box-shadow:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
/* current page = siqwes.com/ itself (hub home only): 2px accent bar under the wordmark */
.sh__home[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--sh-accent);border-radius:8px 8px 2px 2px}
.sh__home[aria-current="page"]:focus-visible{box-shadow:inset 0 -2px 0 var(--sh-accent),var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE);border-radius:8px}

/* ---------- 3. Title: "AI for {niche}" / "Everyday AI", Nunito 800 in the site accent ---------- */
.sh__title{
  grid-area:title;justify-self:center;
  margin:0;text-align:center;
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-weight:800;font-size:1.25rem;line-height:1.2;letter-spacing:-.005em;
  color:var(--sh-accent);
  white-space:nowrap;                 /* one row from 880px: the longest title fits (measured, spec §4) */
  font-synthesis:none;
}
@media (min-width:1024px){.sh__title{font-size:1.375rem}}   /* 22px */

/* ---------- 4. Right group: Blog (text link) + Members log in (cyan outline button), 16px apart ---------- */
.sh__right{grid-area:right;justify-self:end;display:flex;align-items:center;gap:16px;margin:0;padding:0;list-style:none}
.sh__right > li{display:flex}
.sh__blog{
  display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border-radius:6px;
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,Arial,sans-serif;font-weight:700;font-size:1rem;line-height:1;
  color:#FFFFFF;white-space:nowrap;text-decoration:none;
  text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--sh-accent);
  transition:text-decoration-color var(--sh-ease),color var(--sh-ease);
}
.sh__blog:hover{text-decoration-line:underline;color:#FFFFFF}
.sh__blog[aria-current="page"]{text-decoration-line:underline}
.sh__blog:focus-visible{outline:none;box-shadow:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
.sh__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:10px;box-sizing:border-box;
  border:1px solid var(--sh-cta);background:transparent;color:var(--sh-cta-text);
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,Arial,sans-serif;font-weight:700;font-size:1rem;line-height:1;
  white-space:nowrap;text-decoration:none;
  transition:background-color var(--sh-ease),border-color var(--sh-ease),color var(--sh-ease),box-shadow var(--sh-ease);
}
.sh__cta:hover{background:rgba(47,211,238,.10);border-color:#9BE8F6;color:#FFFFFF}
.sh__cta:active{background:rgba(47,211,238,.18)}
.sh__cta:focus-visible{outline:none;box-shadow:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
.sh__cta[aria-current="page"]{background:var(--sh-cta);border-color:var(--sh-cta);color:var(--sh-navy)}   /* on the members login page */
.sh__cta[aria-current="page"]:hover{background:#9BE8F6;border-color:#9BE8F6;color:var(--sh-navy)}
.sh__cta-short{display:none}

/* ---------- 5. Small screens (< 880px): two rows, title never shortened ----------
   Row 1: wordmark (left) + Members log in (right). Row 2: the FULL title, centred across the bar.
   The title may wrap to 2 balanced lines only if it is wider than the bar (only the Assistants title at <= 359px). */
@media (max-width:879.98px){
  .sh__inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"home right" "title title";
    row-gap:2px;padding-top:6px;padding-bottom:10px;min-height:0;
  }
  .sh__title{justify-self:stretch;white-space:normal;text-wrap:balance;overflow-wrap:normal;font-size:1.1875rem}  /* 19px */
}
/* < 420px: tighter row 1 so wordmark + Blog + Members log in fit from 330px (measured, spec §4). */
@media (max-width:419.98px){
  .sh{--sh-logo-h:37px}                         /* 98px wide: brand minimum is 96px */
  .sh__inner{column-gap:8px;padding-left:16px;padding-right:16px}
  .sh__home{margin-left:-4px;padding:2px 4px}
  .sh__blog{padding:0 4px;font-size:.9375rem}    /* 15px */
  .sh__cta{padding:0 10px;font-size:.9375rem}
  .sh__title{font-size:1.125rem}                 /* 18px */
}
/* < 330px only (measured fit point 329px): the button shows "Log in" (accessible name stays "Members log in" via aria-label). */
@media (max-width:329.98px){
  .sh__cta-full{display:none}
  .sh__cta-short{display:inline}
}

/* ---------- 6. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){.sh__home,.sh__cta{transition:none}}

/* ---------- 7. Footer ----------
   Unchanged from live (founder 20:05 UTC): Privacy, Terms, Canceling your membership, support@siqwes.com, X + LinkedIn
   (cancel-footer-v1.css + footer-linkedin-link-v1.md). No blog link in the footer: Blog lives in the header only. */

/* shared/styles/blog-chips-v1.css */
/* Siqwes blog-chips-v1.css (Creative, 2026-10-20). Niche label chips for the ONE blog at https://siqwes.com/blog/.
   Spec: brand/specs/blog-niche-chips-v1.md. DRAFT for Web. Not deployed.
   Load after blog-v1.css and site-header-v1.css. Pure links (no JS): each chip opens a /blog/<niche>/ filter page.
   Two components:
   1. .chips  = interactive filter row (nav > ul > li > a.chip), 44px targets, wraps at every width (no sideways scroll, no cut text).
   2. .npill  = small non-interactive label on cards and post meta (span), same colours, 26px tall. */

/* ---------- 0. Accent per chip (data-niche on every chip incl. "all"; pills may inherit it from their card) ----------
   Fallback when nothing sets --c: neutral #E6E9EF. */
[data-niche="hub"]        {--c:#2FD3EE}           /* Everyday AI */
[data-niche="business"]   {--c:#9BE8F6}
[data-niche="education"]  {--c:#AAD8B6}
[data-niche="realestate"] {--c:#ECBEAC}
[data-niche="assistants"] {--c:#C5B7E6}
[data-niche="bookkeeping"]{--c:#E4B5CF}
.chip[data-niche="all"],.npill[data-niche="all"]{--c:#E6E9EF}

/* ---------- 1. Filter row ---------- */
.chips{margin:0 0 var(--space-6,32px)}                         /* 32px to the grid (index clean-up 21:36 UTC) */
.chips__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips__list > li{display:flex;min-width:0}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:999px;
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,Arial,sans-serif;font-weight:700;font-size:.9375rem;line-height:1.1;
  white-space:nowrap;text-decoration:none;
  color:var(--c,#E6E9EF);
  /* liquid glass (founder 21:45 UTC, same edge as the cards): see-through accent-tinted frost, blurred, 1px white 14% edge + top highlight,
     a soft float shadow. The accent lives in the text and a 12% tint. */
  background:color-mix(in srgb,var(--c,#E6E9EF) 12%,var(--glass-fill,rgba(255,255,255,.05)));
  -webkit-backdrop-filter:var(--glass-blur,blur(16px) saturate(1.4));backdrop-filter:var(--glass-blur,blur(16px) saturate(1.4));
  border:1px solid var(--glass-border,rgba(255,255,255,.14));
  box-shadow:var(--glass-highlight,inset 0 1px 0 rgba(255,255,255,.22)),0 10px 24px -12px rgba(0,0,0,.55);
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.chip:hover{background:color-mix(in srgb,var(--c,#E6E9EF) 24%,var(--glass-fill,rgba(255,255,255,.05)));color:#FFFFFF;border-color:var(--glass-border-hover,rgba(255,255,255,.30))}
@media (hover:hover){.chip:hover{transform:translateY(-1px)}}
.chip:focus-visible{outline:none;box-shadow:var(--glass-highlight,inset 0 1px 0 rgba(255,255,255,.22)),var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
/* current filter: filled accent, navy text */
.chip[aria-current="page"]{background:var(--c,#E6E9EF);color:#0B1F45;border-color:var(--c,#E6E9EF)}
.chip[aria-current="page"]:hover{background:color-mix(in srgb,var(--c,#E6E9EF) 82%,#FFFFFF);color:#0B1F45}
.chip__dot{display:none}
@media (max-width:419.98px){.chip{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.chip{transition:none}.chip:hover{transform:none}}

/* ---------- 2. Small non-interactive pill (cards, post meta) ----------
   Replaces .blog-pill on the hub /blog/ index and posts when the label is a niche. */
.npill{
  display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:999px;
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,Arial,sans-serif;font-weight:800;font-size:.8125rem;line-height:1.15;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--c,#E6E9EF);
  background:color-mix(in srgb,var(--c,#E6E9EF) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#E6E9EF) 70%,transparent);
}

/* shared/styles/site-header-web.css */
/* Web additions after Creative site-header-v1.css + blog-chips-v1.css (both VERBATIM). The header itself needs none (Creative FINAL
   20:10 covers Blog, the 330px 'Log in' rule and every breakpoint).
   FOUNDER 20:03 UTC (overrides blog-niche-chips-v1.md §2 'never a link'): every label pill is a plain <a href> to its label page. */
/* Label pill = plain link to the label page, above the card's stretched title link; 44px tap area without changing the 26px look */
a.npill{position:relative;z-index:2;text-decoration:none;transition:background-color .18s ease,color .18s ease}
a.npill::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
a.npill:hover{background:color-mix(in srgb,var(--c,#E6E9EF) 26%,transparent);color:#FFFFFF}
a.npill:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--c,#E6E9EF),var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
.blog-card__body > a.npill{align-self:flex-start}
.blog-post__head > a.npill{margin-bottom:var(--space-3,12px)}
@media (prefers-reduced-motion:reduce){a.npill{transition:none}}
/* /members/ placeholder */
.members-placeholder{padding:var(--space-8,64px) 0}

/* shared/styles/footer-social-v2.css */
/* brand/specs/footer-linkedin-link-v1.md (Creative PASS 2026-10-20 19:13 UTC), CSS verbatim */
/* already live with footer X v1 (unchanged) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media (min-width:768px){.site-footer__contact{flex-direction:row-reverse;align-items:center}}
/* footer social v2: X + LinkedIn */
.site-footer .footer-social-group{display:flex;align-items:center;gap:12px;margin:0;padding:0}
.site-footer .footer-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;box-sizing:border-box;border-radius:999px;color:#FFFFFF;background:transparent;border:1px solid rgba(47,211,238,.50);text-decoration:none;transition:background-color .15s ease,border-color .15s ease}
.site-footer .footer-social:hover{background:rgba(47,211,238,.10);border-color:#9BE8F6;color:#FFFFFF}
.site-footer .footer-social:focus-visible{outline:none;border-radius:999px;box-shadow:var(--dk-focus-ring)}
.footer-social__icon{width:20px;height:20px;display:block;flex:none}
.footer-social__icon--linkedin{width:21px;height:21px}
@media (max-width:767px){
  .site-footer .footer-social-group{justify-content:center;margin-inline:auto}
  .site-footer .footer-social-group .footer-social{margin-inline:0}
}

/* shared/styles/glass-v3.css (Creative glass v3, verbatim) */
/* Siqwes glass v3: "liquid glass" panels floating over the space-scroll v2 galaxy (Creative, 2026-10-20). DRAFT for Web. Not deployed.
   Spec: brand/specs/glass-v3.md. Founder 21:45 UTC: "hovering bubbles/clouds on top of the galaxy... almost see-through but blurry".
   Replaces the v2 float (rgba(16,28,58,.72), blur 10px, 1px cyan hairline) on every panel, card and box of all 6 sites,
   the blog and the members area. Pure CSS, CSP-safe (no JS, no inline style). Existing tokens only, plus the --glass-* set below.
   Load order: tokens > dark-tokens > dark-site > polish-v1 > flow-v2 > space-scroll-v2 > cancel-footer-v1 > blog-v1 (+web)
               > site-header-v1 > blog-chips-v1 > members-area-v1 (members routes) > glass-v3.css
               > signup-hero-panel-v1.css > blog-band-v1.css (both read the --glass-* tokens).
   Readability: the glass dims what it blurs (backdrop-filter brightness(.65)), so bright ribbon peaks and stars behind a panel
   never pull text under AA. Measured numbers: glass-v3.md section 5. */

:root{
  /* ---- fill: a white sheen over a thin navy tint; the galaxy shows through, blurred ---- */
  --glass-tint:rgba(14,26,56,.40);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  --glass-fill:var(--glass-sheen),var(--glass-tint);                       /* use with background: */
  --glass-fill-hover:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)),var(--glass-tint);
  /* ---- the frost: blur + saturation, and a dim so ribbon peaks behind a panel stay quiet ---- */
  --glass-blur:blur(22px) saturate(160%) brightness(.65);
  /* ---- edge: hairline (a COLOUR: use as 1px solid var(--glass-border)), top highlight, faint inner glow ---- */
  --glass-border:rgba(255,255,255,.14);
  --glass-border-hover:rgba(255,255,255,.24);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.22);
  --glass-glow:inset 0 0 28px rgba(155,232,246,.05);
  /* ---- floating depth ---- */
  --glass-shadow:0 20px 50px -12px rgba(0,0,0,.55),0 0 0 1px rgba(47,211,238,.06);
  --glass-shadow-hover:0 28px 60px -12px rgba(0,0,0,.60),0 0 0 1px rgba(47,211,238,.12);
  --glass-radius:24px;          /* big panels: signup, hero panel, FAQ, coming soon, CTA2, blog band, members panels */
  --glass-radius-card:16px;     /* cards: features, who, steps, niche cards, blog cards, members cards */
  --glass-lift:-4px;
  --glass-ease:200ms ease;
  /* ---- fallbacks: no backdrop-filter, or the user asks for less transparency ---- */
  --glass-solid:rgba(14,26,56,.85);
  /* ---- header: same recipe, thinner ---- */
  --glass-header-fill:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(14,26,56,.30);
  --glass-header-blur:blur(18px) saturate(160%) brightness(.75);
  /* ---- fields inside glass ---- */
  --glass-input-bg:rgba(5,11,24,.55);
  --glass-input-border:rgba(255,255,255,.18);   /* a COLOUR: 1px solid var(--glass-input-border) */
  /* ---- unchanged accents, restated for one place ---- */
  --glass-accent-bar:linear-gradient(90deg,var(--color-electric-500,#1677FF),var(--color-cyan-400,#2FD3EE));
  --glass-focus-ring:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE);
  /* v2 names now point at v3, so any rule still reading them gets the new glass edge and depth */
  --sp-float-hair:var(--glass-border);
  --sp-float-shadow:var(--glass-shadow);
  --m-glass-hair:var(--glass-border);
  --m-float-shadow:var(--glass-shadow);
}

/* ================= 1. The utility ================= */
.glass{
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow);
}
.glass--card{border-radius:var(--glass-radius-card)}
.glass--interactive{transition:transform var(--glass-ease),background var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease)}
@media (hover:hover){
  .glass--interactive:hover{transform:translateY(var(--glass-lift));background:var(--glass-fill-hover);border-color:var(--glass-border-hover);
    box-shadow:var(--glass-shadow-hover),var(--glass-highlight),var(--glass-glow)}
}
.glass--interactive:focus-visible,.glass--interactive:focus-within:has(:focus-visible){outline:none;
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-focus-ring)}

/* ================= 2. Site mapping: existing classes take the glass (no markup change) =================
   space-scroll-v2 sets .card/.signup/.faq backgrounds with !important, so the fill does too. */

/* 2a. Big panels, radius 24 */
.signup,.faq,.soon,.cta2,.blog-try,.blog-cta,
.m-glass,.m-module,.m-preview__cta,.m-codes{
  background:var(--glass-fill) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow) !important;
}
/* 2b. Cards, radius 16 */
.card,.steps>li,.notice,.m-card,.m-next,.m-pager a{
  background:var(--glass-fill) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius-card);
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow);
}
/* cards with an opaque image inside only take the frame (border + highlight + depth); the image is the fill */
.hero__art.motif-panel,.m-hero__art{border:1px solid var(--glass-border);border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow),var(--glass-highlight)}

/* 2c. Kept accents */
/* signup card: 6px electric->cyan top bar (::before, unchanged) + the Try-it-free accent edge on niche landings */
.section--free .signup{box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow),0 0 0 1px color-mix(in srgb,var(--niche-accent,#2FD3EE) 30%,transparent) !important}
.signup::before{background:var(--glass-accent-bar)}
/* How it works: keep the 3px niche top accent */
.steps>li{border-top:var(--card-step-accent-w,3px) solid var(--card-step-accent,var(--niche-accent,#2FD3EE))}
/* callouts: keep the 4px left accent */
.notice{border-left:4px solid var(--dk-notice-border,#2FD3EE)}
/* blog "Try it" box: keep the 4px niche bar */
.blog-try{box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow),inset 4px 0 0 var(--niche-accent,#2FD3EE) !important}
/* hub niche cards, members course cards, CTA panels keep their niche wash over the glass */
.niche-card,.m-card{
  background:linear-gradient(150deg,color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 11%,transparent) 0%,transparent 62%),var(--glass-fill) !important;
  border-color:color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 26%,rgba(255,255,255,.10));
}
.m-preview__cta,.blog-cta{
  background:linear-gradient(160deg,color-mix(in srgb,var(--niche-accent,#2FD3EE) 14%,transparent),transparent 70%),var(--glass-fill) !important}
/* FAQ rows sit inside one glass panel: transparent rows, light hairlines, a soft wash on hover */
.faq details,.faq details:hover{background:transparent}
.faq details{border-top-color:rgba(255,255,255,.10)}
.faq details:hover{background:rgba(255,255,255,.04)}
/* inner wells inside the signup card */
.signup__what,.signup__full{background:rgba(5,11,24,.30);border-radius:12px}
/* coming-soon pill stays a hairline pill */
.soon__badge{border-color:rgba(255,255,255,.22)}

/* 2d. Interactive cards: lift 4px, brighter fill + edge, 200ms. Static cards (features, who, steps, FAQ) no longer lift. */
.card,.signup,.faq,.steps>li,.soon,.cta2,.m-card,.m-module,.m-pager a{
  transition:transform var(--glass-ease),background var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease)}
.card:hover,.benefits .card:hover{transform:none;box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow)}
@media (hover:hover){
  .niche-card:hover,.m-card:hover,.m-pager a:hover{
    transform:translateY(var(--glass-lift));
    border-color:color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 45%,rgba(255,255,255,.18));
    box-shadow:var(--glass-shadow-hover),var(--glass-highlight),var(--glass-glow),0 0 28px color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 16%,transparent)}
  .niche-card:hover,.m-card:hover{
    background:linear-gradient(150deg,color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 14%,transparent) 0%,transparent 62%),var(--glass-fill-hover) !important}
  .m-pager a:hover{background:var(--glass-fill-hover) !important}
  .m-module:hover{border-color:var(--glass-border-hover)}
}
/* keyboard: the shared ring on the card that holds focus (niche card CTA, members card link) */
.niche-card:focus-within:has(:focus-visible),.m-card:focus-within:has(:focus-visible){border-color:var(--glass-border-hover)}

/* 2e. Header: same recipe, thinner (blur 18, tint lighter); niche hairline from site-header-v1 stays */
.site-header,.site-header.sh{
  background:var(--glass-header-fill) !important;
  -webkit-backdrop-filter:var(--glass-header-blur);backdrop-filter:var(--glass-header-blur);
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px -18px rgba(0,0,0,.6);
}

/* 2f. Fields inside glass: darker translucent wells with a light edge; hover/focus/error keep the dark-theme rules */
:is(.glass,.signup,.m-glass,.m-login__panel,.m-panel) :is(.input,.select,textarea,input[type="email"],input[type="text"],input[type="password"]){
  background-color:var(--glass-input-bg);border:1px solid var(--glass-input-border)}
:is(.glass,.signup,.m-glass,.m-login__panel,.m-panel) :is(.input,.select):hover{border-color:var(--dk-blue-250,#9CC8FF)}
:is(.glass,.signup,.m-glass,.m-login__panel,.m-panel) :is(.input,.select):focus-visible{outline:none;border-color:var(--dk-focus,#2FD3EE);box-shadow:var(--glass-focus-ring)}
:is(.glass,.signup) .field.is-error :is(.input,.select),:is(.glass,.signup) [aria-invalid="true"]{border:2px solid var(--dk-error,#FFA59B)}
:is(.glass,.signup) .select option{background:#0E1A38;color:#FFFFFF}

/* ================= 3. No backdrop-filter: the see-through fill would show crisp ribbons, so go solid ================= */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-fill:var(--glass-solid);--glass-fill-hover:rgba(18,32,66,.88);--glass-header-fill:rgba(7,18,43,.92)}
}

/* ================= 4. Less transparency (macOS/iOS "Reduce transparency", Windows "Transparency effects" off) ================= */
@media (prefers-reduced-transparency:reduce){
  :root{--glass-fill:var(--glass-solid);--glass-fill-hover:rgba(18,32,66,.88);--glass-header-fill:rgba(7,18,43,.94);
    --glass-blur:none;--glass-header-blur:none}
}

/* ================= 5. Reduced motion: no lift, no transition on transform ================= */
@media (prefers-reduced-motion:reduce){
  .glass--interactive,.card,.signup,.faq,.steps>li,.soon,.cta2,.m-card,.m-module,.m-pager a{transition:background var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease)}
  .glass--interactive:hover,.niche-card:hover,.m-card:hover,.m-pager a:hover{transform:none !important}
}

/* shared/styles/blog-band-v1.css (Creative blog band v1, verbatim) */
/* Siqwes blog-band-v1.css (Creative, 2026-10-20). Spec: brand/specs/blog-band-v1.md. DRAFT for Web. Not deployed.
   Panel = glass v3 (liquid glass): reads the shared --glass-* tokens from brand/specs/glass-v3.css (landed 2026-10-20; load it before this file).
   Replaces the bare line <p class="blog-tip">AI tips for … on the Siqwes blog.</p> with a glass band
   on all 6 home pages (hub + business, education, realestate, assistants, bookkeeping).
   Load AFTER space-scroll-v2.css and blog-chips-v1.css (end of the site bundle). Pure CSS, CSP-safe, no JS.
   Reuses live tokens only: --sp-float, --sp-float-hair, --sp-float-shadow, --layout-container-mid, --layout-gutter,
   --space-*, .h2 (title size/weight/colour), .btn .btn--secondary .btn--lg (button incl. hover/focus), --dk-focus-ring. */

/* 1. Section rhythm = .section--cta2 (48px top/bottom), column = the 46rem column of How it works / Signup / FAQ / Coming soon */
.section--blog .container{max-width:calc(var(--layout-container-mid,46rem) + 2 * var(--layout-gutter,24px))}
/* hub: the band follows the narrow (720px) signup column and is the last section before the footer */
.section--blog .container--narrow{max-width:var(--layout-container-narrow,720px)}

/* 2. The panel: glass v3 "liquid glass" (founder 2026-10-20 21:45 UTC via Orion; supersedes the v2 float on this band).
      Shared tokens: brand/specs/glass-v3.css (landed). The fallbacks below only apply if glass-v3.css is not loaded;
      with it loaded, --glass-blur adds brightness(.65) so ribbon peaks behind the band stay dim (glass-v3.md section 5).
      Geometry (padding, column) = .cta2 / .soon. Radius 24px per glass v3. */
.blog-band{
  --bb-c:var(--c,var(--niche-accent,#2FD3EE));          /* accent: blog-chips-v1 --c from data-niche, else the page accent */
  display:grid;gap:var(--space-5,24px);justify-items:center;text-align:center;
  padding:var(--space-6,32px) var(--space-5,24px);
  border:1px solid var(--glass-border,rgba(255,255,255,.14));
  border-radius:var(--glass-radius,24px);
  background:var(--glass-fill,linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),rgba(14,26,56,.40));
  -webkit-backdrop-filter:var(--glass-blur,blur(22px) saturate(160%));backdrop-filter:var(--glass-blur,blur(22px) saturate(160%));
  box-shadow:var(--glass-highlight,inset 0 1px 0 rgba(255,255,255,.22)),var(--glass-shadow,0 20px 50px -12px rgba(0,0,0,.55));
}
/* no backdrop-filter support: fall back to the opaque v2 float so text contrast holds over the ribbons */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .blog-band{background:var(--sp-float,rgba(16,28,58,.72))}
}
@media (min-width:768px){.blog-band{padding:var(--space-7,48px) var(--space-6,32px)}}   /* = .cta2 desktop padding */
.blog-band__text{min-width:0}

/* 3. Eyebrow: the big niche pill (blog-chips-v1 .npill type, .chip border and height scale), non-interactive */
.blog-band__chip{
  display:inline-flex;align-items:center;min-height:32px;margin:0 0 var(--space-3,12px);padding:4px 14px;border-radius:999px;
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,Arial,sans-serif;font-weight:800;font-size:.875rem;line-height:1.15;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:var(--bb-c);
  background:color-mix(in srgb,var(--bb-c) 12%,rgba(7,18,43,.55));   /* = .chip tint: dark underlay keeps AA over bright glass */
  border:1.5px solid var(--bb-c);
}

/* 4. Title: markup carries class="h2" so size/weight/tracking/colour = every other section H2 (Nunito 800, 28px / 36px at 768+, white).
      The SEO Addendum A editorial anchor lives inside it, so it reads as the title, with an accent underline on hover/focus. */
.blog-band__title{margin:0;text-wrap:balance}
.blog-band__title a{color:inherit;text-decoration:none;border-radius:6px}
.blog-band__title a:hover{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--bb-c)}
.blog-band__title a:focus-visible{outline:none;color:inherit;box-shadow:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}

/* 5. One positive line, Source Sans 3 18px #BAC2CF */
.blog-band__line{margin:var(--space-3,12px) 0 0;font-family:var(--font-body,'Source Sans 3'),'Source Sans 3',system-ui,sans-serif;
  font-size:1.125rem;line-height:1.55;color:var(--dk-text-body,#BAC2CF);max-width:52ch}

/* 6. Button: the live .btn--secondary .btn--lg (transparent, white text, 2px cyan border, hover/focus rgba(47,211,238,.12) + --dk-focus-ring).
      Only layout is added here; colours, border, radius, hover and focus come from the shared button rules unchanged. */
.blog-band__btn{white-space:nowrap}
.blog-band__btn svg{flex:none}
@media (max-width:767.98px){.blog-band__btn{display:flex;width:100%;justify-content:center}}   /* = .cta2__btn on phones */

/* 7. Two columns at 880px and up: text left, button right */
@media (min-width:880px){
  .blog-band{grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:start;text-align:left;column-gap:var(--space-6,32px)}
  .blog-band__line{margin-left:0}
}

/* shared/styles/signup-hero-panel-v1.css (Creative signup hero panel v1, verbatim; loads LAST) */
/* Siqwes signup-hero-panel v1 (Creative, 2026-10-20). DRAFT for Web. Not deployed.
   Spec: brand/specs/signup-hero-panel-v1.md. Founder: "make it a bigger box that is included with all the text entry boxes".
   ONE glass panel holds the Try-it-free intro (pill, statement, lead, free line), a divider, then the form
   (heading, fields, button, consent, privacy). All 6 sites: 5 niche landings (.section--free) + the hub signup (#start).
   Load order: ... > polish-v1.css > flow-v2.css > space-scroll-v2.css > blog-v1.css > signup-hero-panel-v1.css (LAST).
   Pure CSS, CSP-safe (no inline style, no JS). Existing tokens only, plus the panel tokens below.
   GLASS: founder 21:45 UTC "liquid glass". Uses the shared glass v3 tokens (brand/specs/glass-v3.css + glass-v3.md, landed 2026-10-20 ~22:00 UTC).
   Each --shp-* reads var(--glass-*, <fallback>); with glass-v3.css loaded (BEFORE this file) the panel gets the tuned frost
   blur(22px) saturate(160%) brightness(.65) that keeps text AA over ribbon peaks. --glass-border/--glass-input-border are colours.
   Markup (see spec section 4): <div class="signup-panel"> wraps .free__intro + the unchanged <form class="signup">. */

:root{
  /* glass-v3 (founder 21:45 UTC). The fill stays see-through; AA comes from the ribbon vignette (section 2), not opacity. */
  --shp-fill:var(--glass-fill,linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),rgba(14,26,56,.40));
  --shp-blur:var(--glass-blur,blur(22px) saturate(160%));
  --shp-border:1px solid var(--glass-border,rgba(255,255,255,.14));   /* glass-v3: --glass-border is a COLOUR */
  --shp-highlight:var(--glass-highlight,inset 0 1px 0 rgba(255,255,255,.22));
  --shp-shadow:var(--glass-shadow,0 20px 50px -12px rgba(0,0,0,.55));
  --shp-radius:var(--glass-radius,24px);
  --shp-input-bg:var(--glass-input-bg,rgba(5,11,24,.55));
  --shp-input-border:1px solid var(--glass-input-border,rgba(255,255,255,.18));   /* glass-v3: a COLOUR */
  --shp-max:760px;                         /* panel outer width (was 736px column + 48px card padding) */
  --shp-pad:48px;                          /* desktop; 24px at <=767px */
  --shp-lead:#CFD6E1;                      /* brighter body for readability (was --dk-text-strong / --dk-text-body) */
  --shp-quiet:#BAC2CF;                     /* = --dk-text-body: free line, consent, privacy, field help */
}

/* 1. Wider column for the signup section (all states: open panel, closed card, education State A) */
.section--signup .container{max-width:calc(var(--shp-max) + 2 * var(--layout-gutter))}

/* 2. Fade the ribbons behind the panel: a soft navy vignette on the section (sits above body::after, below the panel).
      Nothing bright reaches the text; the sky still shows at the section edges. */
.section--signup{position:relative;isolation:isolate}
.section--signup:has(.signup-panel)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(7,18,43,.80) 0%,rgba(7,18,43,.60) 48%,rgba(7,18,43,0) 78%)}
.section--signup > .container{position:relative;z-index:1}

/* 3. The panel: liquid glass (glass-v3) */
.signup-panel{position:relative;max-width:var(--shp-max);margin-inline:auto;padding:var(--shp-pad);
  border-radius:var(--shp-radius);overflow:hidden;border:var(--shp-border);
  background:var(--shp-fill);
  -webkit-backdrop-filter:var(--shp-blur);backdrop-filter:var(--shp-blur);
  /* floating shadow + top-edge highlight + the existing Try-it-free accent edge (niche accent 30%, outside the border) */
  box-shadow:var(--shp-shadow),var(--shp-highlight),0 0 0 1px color-mix(in srgb,var(--niche-accent,#2FD3EE) 30%,transparent)}
/* existing top accent bar, moved from the card to the panel (same 6px electric -> cyan) */
.signup-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;z-index:1;
  background:linear-gradient(90deg,var(--color-electric-500,#1677FF),var(--color-cyan-400,#2FD3EE))}
/* no backdrop-filter support: the see-through fill would show crisp ribbons, so go nearly solid navy */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.signup-panel{background:rgba(14,26,56,.94)}}

/* 4. The form inside is no longer its own card (space-scroll v2 sets .signup glass with !important) */
.signup-panel > .signup{background:transparent !important;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none !important;border:0;border-radius:0;padding:0;overflow:visible;animation:none !important;translate:none;transform:none}
.signup-panel > .signup::before{content:none}

/* 5. Vertical rhythm: pill 16 | statement 16 | lead 12 | free line 32 + divider + 32 | form */
.signup-panel .free__intro{margin:0}
.signup-panel .free__badge{margin:0 0 var(--space-4)}                      /* existing pill style + accent border kept (flow-v2) */
.signup-panel .free__statement{margin:0 0 var(--space-4);font-family:'Nunito','Source Sans 3',system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.5rem,1.15rem + 1.25vw,2.125rem);line-height:1.2;color:var(--dk-text-title,#FFFFFF);text-wrap:balance}
.signup-panel .free__lead{margin:0;max-width:none;font-family:var(--font-body);font-size:1.125rem;line-height:1.6;color:var(--shp-lead)}
.signup-panel .free__micro{margin:var(--space-3) 0 0;font-size:1rem;line-height:1.5;color:var(--shp-quiet)}
.signup-panel > .free__intro + .signup{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--dk-hairline-card,rgba(255,255,255,.10))}

/* 6. Form heading: a smaller H2 under the intro; full H2 size when it is the panel's first heading (hub) */
.signup-panel > .free__intro + .signup .signup__title{font-size:1.5rem;line-height:1.25;margin:0 0 var(--space-5)}
.signup-panel > .signup:first-child .signup__title{margin:0 0 var(--space-6)}

/* 7. Small text inside the panel: one step brighter (all >= AA on the panel, see spec section 6) */
.signup-panel .field__help,.signup-panel .field__label .opt{color:var(--shp-quiet)}
.signup-panel .signup__consent{color:var(--shp-quiet)}
.signup-panel .signup__privacy{color:var(--shp-quiet);border-top-color:var(--dk-hairline-card,rgba(255,255,255,.10))}
.signup-panel .signup__consent a,.signup-panel .signup__privacy a{color:var(--dk-link,#9BE8F6)}
.signup-panel .signup > p{max-width:none}

/* 7b. Inputs: glass-v3 wells (see-through dark, 1px light edge). Hover/focus/error keep the dark-theme rules. */
.signup-panel .input,.signup-panel .select{background-color:var(--shp-input-bg);border:var(--shp-input-border)}
.signup-panel .input:hover,.signup-panel .select:hover{border-color:var(--dk-blue-250,#9CC8FF)}
.signup-panel .input:focus,.signup-panel .select:focus,.signup-panel .input:focus-visible,.signup-panel .select:focus-visible{
  outline:none;border-color:var(--dk-focus,#2FD3EE);box-shadow:0 0 0 2px rgba(5,11,24,.9),0 0 0 5px var(--dk-focus,#2FD3EE)}
.signup-panel .field.is-error .input,.signup-panel .field.is-error .select,.signup-panel .input[aria-invalid="true"],.signup-panel .select[aria-invalid="true"]{border:2px solid var(--dk-error,#FFA59B)}
.signup-panel .select option{background:#0E1A38;color:#FFFFFF}

/* 8. Phones */
@media (max-width:767px){
  .signup-panel{--shp-pad:24px;--shp-radius:20px}
  .signup-panel > .free__intro + .signup{margin-top:var(--space-5);padding-top:var(--space-5)}
  .signup-panel > .free__intro + .signup .signup__title{font-size:1.375rem}
  .section--signup:has(.signup-panel)::before{background:radial-gradient(ellipse 90% 60% at 50% 50%,rgba(7,18,43,.80) 0%,rgba(7,18,43,.55) 55%,rgba(7,18,43,0) 85%)}
}

/* 9. Motion: the panel rises in as one box (space-scroll v2 sp-rise); reduced motion = static */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .signup-panel{animation:sp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@media (prefers-reduced-motion:reduce){.signup-panel{animation:none !important;translate:none !important;opacity:1}}

/* 10. Form-full state (subscribe.js adds .signup--full to the form): the intro stays, the fields card is replaced as today */
.signup-panel .signup--full .signup__full{background:rgba(255,255,255,.04)}

/* shared/styles/section-rhythm-v1.css (Creative, verbatim; LAST) */
/* Siqwes section rhythm v1 (Creative, 2026-10-20 ~22:15 UTC). DRAFT for Web. Not deployed.
   Spec: brand/specs/hero-cleanup-constellations-v1.md section 3. Founder 22:05 UTC: "check all the padding and spacing between sections,
   i dont like the vertical spacing between sections".
   ONE scale. Every gap is measured from the bottom edge of one section's last box (panel, card or text) to the top of the next section's
   first box (its heading or panel):
     --rhythm-section  96px desktop (>=1024) | 72px tablet (601-1023) | 56px phone (<=600)   section to section, and last section to footer
     --rhythm-heading  24px                                                                 section H2 to its content
     --rhythm-hero-top 72px | 56px | 40px                                                    header to the first line of the hero
   Each section carries half the gap above and below (padding-block), so any two neighbours add up to exactly one gap, whatever their type
   (cta2, blog band, coming soon, signup, FAQ). The footer carries the other half.
   is used ONLY on the section padding, because older per-section rules (.section--soon, .section--cta2, .section--blog,
   main>.section--blog:last-child) are more specific; delete those rules when this file ships and the can go.
   Section 0 re-balances the hero now that the boxed hero art is removed (founder 22:05 UTC).
   Also closes the two background seams found in the real-scroll check (section 4 below). Pure CSS, CSP-safe. */

:root{--rhythm-section:96px;--rhythm-heading:24px;--rhythm-hero-top:72px}
@media (max-width:1023px){:root{--rhythm-section:72px;--rhythm-hero-top:56px}}
@media (max-width:600px){:root{--rhythm-section:56px;--rhythm-hero-top:40px}}

/* 0. Hero without the boxed art (.hero__art.motif-panel is REMOVED from the markup on all 5 niche sites; display:none is only a
      safety net for an old build). One centred column on the 760px axis of the signup panel below it. */
.hero__art,.hero .motif-panel{display:none}

/* one centred column, same outer width as the signup panel (760px), so hero text and panel share one axis */
.hero--flow .hero__grid{display:block;max-width:calc(var(--shp-max,760px) + 2 * var(--layout-gutter,24px));text-align:center}
.hero--flow .hero__copy{max-width:none}
.hero--flow .eyebrow{margin-inline:auto}
.hero--flow .display{margin-inline:auto;max-width:18ch;text-wrap:balance}
.hero--flow .lead{margin-inline:auto;max-width:40rem;text-wrap:balance}
/* centred hero text now crosses the space-scroll ribbons (they only fade out on the LEFT). A soft navy halo behind the copy keeps it AA,
   the same idea as the signup vignette. closest-side = fully transparent at its own box edge, so it can never draw a seam. */
.hero--flow .hero__copy{position:relative}
.hero--flow .hero__copy::before{content:"";position:absolute;inset:-56px -120px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,18,43,.82) 0%,rgba(7,18,43,.70) 55%,rgba(7,18,43,0) 100%)}
@media (max-width:600px){.hero--flow .hero__copy::before{inset:-32px -20px}}

/* 0b. Same halo behind the hub intro (H1 + lead + button): the 24px tighter top puts the lead on a ribbon at scroll 0 (measured 4.22:1) */
main.page > .container > .prose{position:relative}
main.page > .container > .prose:not(.read-surface)::before{content:"";position:absolute;inset:-48px -96px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,18,43,.80) 0%,rgba(7,18,43,.66) 55%,rgba(7,18,43,0) 100%)}
@media (max-width:600px){main.page > .container > .prose:not(.read-surface)::before{inset:-28px -20px}}
/* 0c. Real Estate legal note (#re-note, small text on bare sky under the FAQ): already under AA live (3.37:1 over a ribbon).
       Put it in a quiet glass card like every other block (glass-v3 dims what it blurs). */
.section--faq .note{margin-top:var(--rhythm-heading);padding:20px 24px;border:1px solid var(--glass-border,rgba(255,255,255,.14));border-radius:var(--glass-radius-card,16px);
  background:var(--glass-fill,rgba(14,26,56,.85));-webkit-backdrop-filter:var(--glass-blur,blur(22px));backdrop-filter:var(--glass-blur,blur(22px))}
.section--faq .note p:last-child{margin-bottom:0}

/* 1. Sections: half a gap on each side */
main > section,main > .section{padding-top:calc(var(--rhythm-section) / 2) !important;padding-bottom:calc(var(--rhythm-section) / 2) !important}   /* D3 (Creative live-check 2026-10-20): spec !important restored; .hero{padding} no longer wins */
main > .hero{padding-top:var(--rhythm-hero-top) !important}   /* D3: spec line 50 (keeps the hero top when L49 is !important) */
/* nothing inside a section adds to the gap (e.g. the assistants callout under "What you'll get" added 24px) */
main > section > .container > :last-child,main > section > .container > :last-child > :last-child{margin-bottom:0}
main > section > .container > :first-child{margin-top:0}

/* 2. Heading to content: 24px everywhere */
.section__title{margin-bottom:var(--rhythm-heading)}

/* 3. Footer: the other half of the last gap */
.site-footer{padding-top:calc(var(--rhythm-section) / 2)}

/* 3a. Hub (main.page holds the intro + niche grid in one .container, then the signup and blog sections) */
main.page{padding-top:0;padding-bottom:0}
main.page > .container:has(> .niche-grid){padding-top:var(--rhythm-hero-top);padding-bottom:calc(var(--rhythm-section) / 2)}
main.page > .container > .prose{margin-bottom:var(--rhythm-section)}
main.page > .container > .prose > :last-child{margin-bottom:0}
main.page > .container > .niche-grid{margin-top:var(--rhythm-heading)}
/* 3b. Blog pages: NOT touched (they have their own neutral reading panel, blog-v1.css section 6). */

/* 4. Seam fixes (founder 22:06 UTC: no visible page breaks or seams anywhere)
   Found in the real-scroll check (bookkeeping + hub, 1280 + 375, motion on), both closed here:
   4b. THE seam: landing/dark CSS sets .section--signup{overflow:hidden} (left over from the retired light motif image). It cuts the
       signup panel's glass shadow (0 20px 50px -12px, reaches ~58px below the panel) in a straight line at the section's top and
       bottom edge. Live today this is a faint step (~1.3 of 255 levels at 375); with the tighter rhythm it would be ~5.7 levels, a
       visible band. overflow:visible removes it (measured step 0.04 = none). Nothing in the section needs the clip any more
       (the vignette is inset:0 and the constellation sits inside the box; body keeps overflow-x:clip, so no sideways scroll).
   4a. signup-hero-panel-v1 phone vignette: the ellipse (90% 60%, fade to 0 at 85%) still had ~3% navy at the section's top/bottom
       edge (edge = 83% of the radius), i.e. a straight cut where the section box ends (~0.3 level today, more on brighter ribbons).
       End the fade inside the box (0 at 80%). */
.section--signup{overflow:visible}
@media (max-width:767px){
  .section--signup:has(.signup-panel)::before{background:radial-gradient(ellipse 90% 60% at 50% 50%,rgba(7,18,43,.80) 0%,rgba(7,18,43,.55) 52%,rgba(7,18,43,0) 80%)}
}

/* D4 (Creative live-check 2026-10-20): "This series is for you if:" card title in the heading face */
.who__yes .card__title{font-family:Nunito,var(--font-heading),sans-serif;font-weight:700}

/* shared/styles/bg-constellations-v1.css (Creative, verbatim; LAST) */
/* Siqwes bg-constellations v1 (Creative, 2026-10-20 ~22:20 UTC). DRAFT for Web. Not deployed.
   Spec: brand/specs/hero-cleanup-constellations-v1.md. Founder 22:05 UTC: "i do like the small icons though... make them look like small little
   constellations and put them in the scrolling of the background... not to loud... sporadically... not too many of them, it's not the focus, just fun".
   FOUNDER EXCEPTION (22:05 UTC) to the 2026-10-19 "no constellations / joined stars" rule: it applies ONLY to these niche icon
   constellations (brand/bg-constellations/<niche>/*.svg, served at /brand/bg-constellations/). Every other asset keeps the rule.
   What it does: 5 small icon constellations per niche landing (3 on the hub), each 4-8 star dots joined by 0.9px strokes at 26% in the
   niche accent, 60-100px across, at .48 overall opacity (.42-.44 on tablet and phone), sitting in the side margins of the hero, signup, Who it's for, How it works and FAQ
   sections (about 1 per 1.2 viewport heights). They sit BEHIND every panel and card (z-index:-1 inside main's stacking context, above the
   space-scroll v2 sky), drift a little slower than the page (scroll-driven view timeline, +-36px), and one dot each twinkles gently.
   Tablet and phone (<=1023px): only 3 per page (hub: 2), smaller, at the right edge of the gap above a section heading.
   prefers-reduced-motion: static (no drift, no twinkle). No scroll-timeline support: static. Pure CSS, CSP-safe (no JS, no inline style).
   Load order: ... > glass-v3 > signup-hero-panel-v1 > blog-band-v1 > section-rhythm-v1 > bg-constellations-v1 (LAST). */

@property --cst-tw{syntax:"<number>";inherits:false;initial-value:0}

/* ---------- 1. Per-site icon sets (one file each; twinkle = the star dot that glows) ---------- */
body:has(.site-header[data-site="bookkeeping"]){
  --cst-a:url("/brand/bg-constellations/bookkeeping/alarm-clock.svg");--cst-a-tw:50% 38%;
  --cst-b:url("/brand/bg-constellations/bookkeeping/ledger.svg");--cst-b-tw:70% 18%;
  --cst-c:url("/brand/bg-constellations/bookkeeping/checklist.svg");--cst-c-tw:58% 32%;
  --cst-d:url("/brand/bg-constellations/bookkeeping/calculator.svg");--cst-d-tw:70% 86%;
  --cst-e:url("/brand/bg-constellations/bookkeeping/receipt.svg");--cst-e-tw:32% 14%}
body:has(.site-header[data-site="realestate"]){
  --cst-a:url("/brand/bg-constellations/realestate/yard-sign.svg");--cst-a-tw:78% 30%;
  --cst-b:url("/brand/bg-constellations/realestate/envelope.svg");--cst-b-tw:50% 54%;
  --cst-c:url("/brand/bg-constellations/realestate/key.svg");--cst-c-tw:14% 46%;
  --cst-d:url("/brand/bg-constellations/realestate/magnifier.svg");--cst-d-tw:84% 82%;
  --cst-e:url("/brand/bg-constellations/realestate/clipboard.svg");--cst-e-tw:40% 12%}
body:has(.site-header[data-site="education"]){
  --cst-a:url("/brand/bg-constellations/education/apple.svg");--cst-a-tw:56% 14%;
  --cst-b:url("/brand/bg-constellations/education/open-book.svg");--cst-b-tw:86% 24%;
  --cst-c:url("/brand/bg-constellations/education/star.svg");--cst-c-tw:50% 12%;
  --cst-d:url("/brand/bg-constellations/education/globe.svg");--cst-d-tw:50% 14%;
  --cst-e:url("/brand/bg-constellations/education/pencil.svg");--cst-e-tw:70% 18%}
body:has(.site-header[data-site="assistants"]){
  --cst-a:url("/brand/bg-constellations/assistants/inbox-tray.svg");--cst-a-tw:86% 54%;
  --cst-b:url("/brand/bg-constellations/assistants/desk-calendar.svg");--cst-b-tw:34% 14%;
  --cst-c:url("/brand/bg-constellations/assistants/suitcase.svg");--cst-c-tw:40% 18%;
  --cst-d:url("/brand/bg-constellations/assistants/checklist-pad.svg");--cst-d-tw:60% 36%;
  --cst-e:url("/brand/bg-constellations/assistants/mug.svg");--cst-e-tw:82% 52%}
body:has(.site-header[data-site="business"]){
  --cst-a:url("/brand/bg-constellations/business/storefront.svg");--cst-a-tw:80% 18%;
  --cst-b:url("/brand/bg-constellations/business/chat.svg");--cst-b-tw:86% 20%;
  --cst-c:url("/brand/bg-constellations/business/shield.svg");--cst-c-tw:50% 12%;
  --cst-d:url("/brand/bg-constellations/business/mail.svg");--cst-d-tw:50% 52%;
  --cst-e:url("/brand/bg-constellations/business/calendar.svg");--cst-e-tw:36% 12%}
body:has(.site-header[data-site="hub"]){
  --cst-a:url("/brand/bg-constellations/hub/apple.svg");--cst-a-tw:56% 14%;
  --cst-b:url("/brand/bg-constellations/hub/key.svg");--cst-b-tw:14% 46%;
  --cst-c:url("/brand/bg-constellations/hub/alarm-clock.svg");--cst-c-tw:50% 38%}

/* ---------- 2. Hosts: the constellation is the ::after of five existing sections (no markup change) ---------- */
.hero--flow,main > .section--free,main > .section--sand,main > .section--how,main > .section--faq,
main.page > .container:has(> .niche-grid),main.page > #start,main.page > .section--blog{position:relative}
.hero--flow::after,main > .section--free::after,main > .section--sand::after,main > .section--how::after,main > .section--faq::after,
main.page > .container:has(> .niche-grid)::after,main.page > #start::after,main.page > .section--blog::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:var(--cst-s,88px);height:var(--cst-s,88px);
  /* layer 1: the twinkle glow on one star dot (strength = --cst-tw, animated below); layer 2: the constellation */
  background:
    radial-gradient(circle at var(--cst-tw-at,50% 50%),rgba(234,244,255,calc(.9 * var(--cst-tw))) 0,rgba(234,244,255,calc(.35 * var(--cst-tw))) 2.5px,rgba(234,244,255,0) 7px),
    var(--cst-img) center / contain no-repeat;
  opacity:var(--cst-o,.48);
}
/* desktop placement: the centre of the side margin beside the 760px column (hero, signup) or the 736px column (Who, How, FAQ, blog band).
   75% + 190px - s/2 = middle of the right margin; 25% - 190px - s/2 = middle of the left margin. Never over a text column or panel. */
.hero--flow::after                {--cst-img:var(--cst-a);--cst-tw-at:var(--cst-a-tw);--cst-s:96px; top:16%;left:calc(75% + 190px - 48px)}
main > .section--free::after      {--cst-img:var(--cst-b);--cst-tw-at:var(--cst-b-tw);--cst-s:88px; top:38%;left:calc(25% - 190px - 44px);z-index:0}
main > .section--sand::after      {--cst-img:var(--cst-c);--cst-tw-at:var(--cst-c-tw);--cst-s:80px; top:24%;left:calc(75% + 184px - 40px)}
main > .section--how::after       {--cst-img:var(--cst-d);--cst-tw-at:var(--cst-d-tw);--cst-s:100px;top:40%;left:calc(25% - 184px - 50px)}
main > .section--faq::after       {--cst-img:var(--cst-e);--cst-tw-at:var(--cst-e-tw);--cst-s:76px; top:18%;left:calc(75% + 184px - 38px)}
/* hub: light mixed set, 3 (one each from education, real estate, bookkeeping) */
main.page > .container:has(> .niche-grid)::after{--cst-img:var(--cst-a);--cst-tw-at:var(--cst-a-tw);--cst-s:96px;top:var(--rhythm-hero-top,72px);left:calc(50% + 330px)}
main.page > #start::after         {--cst-img:var(--cst-b);--cst-tw-at:var(--cst-b-tw);--cst-s:84px; top:34%;left:calc(25% - 190px - 42px);z-index:0}
main.page > .section--blog::after {--cst-img:var(--cst-c);--cst-tw-at:var(--cst-c-tw);--cst-s:76px; top:30%;left:calc(75% + 184px - 38px)}
/* the signup section is its own stacking context (signup-hero-panel-v1 isolation); its navy vignette is ::before (z 0), the panel's
   container is z 1, so the constellation (z 0, later in order) sits above the vignette's transparent edge and below the panel */

/* ---------- 3. Tablet and phone: 3 per page (hub 2), smaller, right edge of the gap above the section heading ---------- */
@media (max-width:1023px){
  .hero--flow::after,main > .section--free::after,main.page > .container:has(> .niche-grid)::after{content:none}
  main > .section--sand::after,main > .section--how::after,main > .section--faq::after,main.page > #start::after,main.page > .section--blog::after{
    --cst-s:72px;--cst-o:.44;left:auto;right:16px;top:calc(var(--rhythm-section,72px) / 2 - 36px)}
  main.page > .section--blog::after{content:none}
  main.page > #start::after{top:auto;bottom:calc(-1 * var(--cst-s) / 2);right:12px}
}
@media (max-width:600px){
  main > .section--sand::after,main > .section--how::after,main > .section--faq::after,main.page > #start::after{
    --cst-s:60px;--cst-o:.42;right:8px;left:auto;top:calc(var(--rhythm-section,56px) / 2 - 34px)}
  main.page > #start::after{top:auto;bottom:-30px}
}

/* ---------- 4. Motion: drift with the scroll (a little slower than the page = sits in the sky), and a gentle twinkle ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hero--flow,main > .section--free,main > .section--sand,main > .section--how,main > .section--faq,
    main.page > .container:has(> .niche-grid),main.page > #start,main.page > .section--blog{view-timeline:--cst block}
    .hero--flow::after,main > .section--free::after,main > .section--sand::after,main > .section--how::after,main > .section--faq::after,
    main.page > .container:has(> .niche-grid)::after,main.page > #start::after,main.page > .section--blog::after{
      animation:cst-drift linear both,cst-twinkle 5.6s ease-in-out infinite alternate;
      animation-timeline:--cst,auto}
    main > .section--sand::after,main.page > #start::after{animation-delay:0s,-2.1s}
    main > .section--faq::after,main.page > .section--blog::after{animation-delay:0s,-3.7s}
    main > .section--how::after{animation-duration:auto,7.2s}
  }
}
@keyframes cst-drift{from{translate:0 -36px}to{translate:0 36px}}
@keyframes cst-twinkle{0%,55%{--cst-tw:0}100%{--cst-tw:1}}

/* ---------- 5. Reduced motion / reduced transparency ---------- */
@media (prefers-reduced-motion:reduce){
  .hero--flow::after,main > .section--free::after,main > .section--sand::after,main > .section--how::after,main > .section--faq::after,
  main.page > .container:has(> .niche-grid)::after,main.page > #start::after,main.page > .section--blog::after{animation:none !important;translate:none !important}
}
@media (prefers-reduced-transparency:reduce){
  .hero--flow::after,main > .section--free::after,main > .section--sand::after,main > .section--how::after,main > .section--faq::after,
  main.page > .container:has(> .niche-grid)::after,main.page > #start::after,main.page > .section--blog::after{--cst-o:.3}
}

/* shared/styles/footer-v3.css (FOOTER v3, founder 00:28 UTC 2026-10-21; site-header-v1.md §7; LAST) */
/* FOOTER v3: ONE component on all 6 sites (founder 00:28 UTC 2026-10-21; Creative brand/specs/site-header-v1.md §7).
   Markup: scripts/sitelib.py Site.footer() (.site-footer--v3 + --hub | --niche). Loads LAST in the shared bundle; every rule is
   scoped to .site-footer.site-footer--v3 so it wins over the older footer layers (landing, dark, space-scroll-v2 !important,
   cancel-footer-v1, footer-social-v2) without touching them. */
/* placement: standard section gap after the last section (the last section already gives half of it), hairline, no band */
.site-footer.site-footer--v3{margin-top:calc(var(--rhythm-section) / 2);padding:32px 0;
  background:transparent !important;border-top:1px solid rgba(255,255,255,.10) !important;text-align:left}
.site-footer.site-footer--v3 .site-footer__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 24px}
/* logo: the header wordmark, 28px tall */
.site-footer.site-footer--v3 .site-footer__logo{justify-self:start;display:inline-flex;align-items:center;padding:0;min-height:44px;border-radius:8px}
.site-footer.site-footer--v3 .site-footer__logo img{height:28px;width:auto;display:block;align-self:center}
/* links: Source Sans 3 400, 15px/1.4, #C9D1DE, no underline; hover/focus-visible white + underline (2px offset); 24px apart */
.site-footer.site-footer--v3 .site-footer__links{justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px}
.site-footer.site-footer--v3 .site-footer__links a{display:inline-flex;align-items:center;min-height:44px;padding:0;
  font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.4;color:#C9D1DE;text-decoration:none;white-space:nowrap}
.site-footer.site-footer--v3 .site-footer__links a:hover,.site-footer.site-footer--v3 .site-footer__links a:focus-visible{
  color:#FFFFFF;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px}
.site-footer.site-footer--v3 a:focus-visible{outline:none;box-shadow:var(--dk-focus-ring);border-radius:4px}
/* icons: 20px glyphs, #C9D1DE, in 44x44 targets, 8px apart; hover white */
.site-footer.site-footer--v3 .site-footer__social{justify-self:end;display:flex;align-items:center;gap:8px}
.site-footer.site-footer--v3 .footer-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;
  margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:#C9D1DE}
.site-footer.site-footer--v3 .footer-social:hover{background:transparent;color:#FFFFFF}
.site-footer.site-footer--v3 .footer-social:focus-visible{color:#FFFFFF;box-shadow:var(--dk-focus-ring);border-radius:999px}
.site-footer.site-footer--v3 .footer-social__icon{width:20px;height:20px}
.site-footer.site-footer--v3 .footer-social__icon--linkedin path{fill:currentColor}
/* phones */
@media (max-width:767px){
  .site-footer.site-footer--v3{padding:28px 0}
  .site-footer.site-footer--v3 .site-footer__logo img{height:24px}
  .site-footer.site-footer--v3 .site-footer__links{gap:0 16px}
  .site-footer.site-footer--v3 .site-footer__links a{font-size:14px}
  /* hub: stack centred, 16px row gap: logo, links (wrap), icons */
  .site-footer--hub.site-footer--v3 .site-footer__inner{grid-template-columns:1fr;justify-items:center;row-gap:16px;text-align:center}
  .site-footer--hub.site-footer--v3 .site-footer__logo,.site-footer--hub.site-footer--v3 .site-footer__social{justify-self:center}
  /* niches: one row, logo left, Privacy centred between, X right */
  .site-footer--niche.site-footer--v3 .site-footer__inner{grid-template-columns:1fr auto 1fr;gap:0 16px}
}