/* site.css bundle: tokens + components + landing (brand v0.1 DRAFT) + site. 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{padding:var(--space-8) 0;position:relative}
@media (min-width:768px){.section{padding:var(--space-9) 0}}
.section--sand{background:var(--bg-subtle)}
.section__title{margin-bottom:var(--space-6)}
.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}
.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)}
/* 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: shared/styles/kits/mulberry-tokens.css (brand/subbrands, verbatim minus @import) */
/* Siqwes for Bookkeepers: mulberry-tokens.css v0.1 PROPOSAL (2026-10-19), needs founder sign-off via Orion. Generated by brand/scripts/niche_kit.py.
   Load AFTER the master tokens.css. Adds the Ledger Mulberry accent and remaps the accent role only. Navy, night, the
   electric-to-cyan gradient, cream neutrals, Fraunces + Source Sans 3, CTA/link/focus tokens are inherited unchanged.
   Contrast: mulberry-800 on cream 9.94:1 AAA | mulberry-700 on cream 7.12:1 PASS 1.4.11 | white on mulberry-800 10.54:1 AAA
             mulberry-300 on night 10.20:1 AAA | mulberry-500 on cream 4.47:1 AA-large only (non-text only). */

:root{
  --color-mulberry-50: #F9F3F6;  /* page tint / section bg */
  --color-mulberry-100: #F1E4EB;  /* chips, cards, email progress band */
  --color-mulberry-300: #D4B1C4;  /* accent text on navy/night; decorative on cream */
  --color-mulberry-500: #A65A86;  /* the accent: line art, rules, borders (non-text) */
  --color-mulberry-700: #7E3F64;  /* icon strokes, secondary accent text (AA) */
  --color-mulberry-800: #602E4C;  /* text-safe accent: eyebrows, lockup descriptor, accent buttons */
  --color-mulberry-900: #421F34;  /* strong text on tints */

  /* Overrides of master semantic tokens (bookkeeping.siqwes.com only) */
  --accent:        var(--color-mulberry-500);   /* master: amber-500 */
  --text-eyebrow:  var(--color-mulberry-800);   /* master: blue-700 */
  /* Links, primary CTA and focus ring stay master blue-700 / electric-500 for cross-brand consistency. */
  --accent-tint:        var(--color-mulberry-100);
  --accent-subtle:      var(--color-mulberry-50);
  --accent-text:        var(--color-mulberry-800);
  --accent-text-strong: var(--color-mulberry-900);
  --accent-on-dark:     var(--color-mulberry-300);
  --surface-accent:     var(--color-mulberry-50);
  --border-accent:      var(--color-mulberry-500);
  --motif-line:         var(--color-mulberry-700);   /* hand-drawn icons on cream */
  --motif-line-dark:    var(--color-mulberry-300);   /* on navy/night panels */
  --action-accent-bg:       var(--color-mulberry-800);
  --action-accent-bg-hover: var(--color-mulberry-900);
  --action-accent-text:     var(--color-white);
  /* Business Amber and education Sage are NOT used here. Ledger Mulberry is never a status colour: keep master success/warning/error. */
}
/* kit roles (Web): eyebrow + descriptor text = kit-800, signup section = kit-50 tint */
.eyebrow,.niche-descriptor{color:var(--accent-text)}
.section--signup{background:linear-gradient(180deg,var(--accent-subtle) 0%,var(--bg-page) 100%)}
:root{--bg-highlight:var(--color-mulberry-50)}
.signup__what{background:var(--color-mulberry-50)}

/* shared/styles/niche-landing.css (shared landing layer, all five landing hosts) */
/* 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) */
.section--sand{background:var(--surface-accent)}
.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 */
.steps li > div > p + p{margin-top:var(--space-3)}
.steps > li{border-top-color:var(--border-accent)}
/* S2: link rollover */
a{text-underline-offset:3px;transition:color .15s,text-decoration-thickness .15s}
a:hover{text-decoration-thickness:2px}
/* S4: balanced headings (the single-column --solo hero rule moved to site.css) */
h1,h2,.display{text-wrap:balance}
/* P3: logo link hover tint in the kit colour (overrides the blue-50 base in site.css) */
.brand:hover{background:var(--accent-subtle)}
@media (prefers-reduced-motion:reduce){a,.brand{transition:none}}
/* Landing structure (business order, 2026-10-19 15:3x; Creative structure QA /workspace/landing-structure-qa-2026-10-19/report.md) */
.hero h1{max-width:16ch}
p.micro{max-width:70ch}
.card__icon{background:var(--accent-subtle);color:var(--accent-text)}
.signup__what{background:var(--accent-subtle)}
.get__callout{margin-top:var(--space-5);max-width:70ch}
.steps__days{margin:var(--space-3) 0 0;padding-left:1.1rem;display:grid;gap:var(--space-2);color:var(--text-secondary)}
.hero .notice{margin-top:var(--space-3)}
.site-footer__inner > p + p,.site-footer__inner > .site-footer__contact + p{flex-basis:100%}
.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 var(--dk-page),0 0 0 5px var(--dk-focus);
  --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. */
.section__title{margin-bottom:var(--space-6)}

/* 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) */
.section--soon{padding-top:var(--space-6)}
.soon{border:1.5px dashed var(--dk-hairline);border-radius:16px;padding:var(--space-6) var(--space-5);text-align:center;background:var(--dk-wash-faint)}
.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/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}
}