/* ==========================================================================
   TuConnect · styles.13dd13a8.css
   Design tokens, reset, base typography, layout primitives, utilities.
   Shared by every page. Load order: styles.13dd13a8.css → components.ef7cd9c3.css → pages.96661eff.css
   --------------------------------------------------------------------------
   This file reconciles the original prototype's tokens with the accessible
   values introduced for the AI Resume Builder. The brand palette is preserved
   exactly; the only additions are ACCESSIBLE VARIANTS for the colours that
   failed WCAG AA as text (documented inline). Nothing visual on the existing
   Home / Grow / Hire pages changes except that low-contrast text becomes
   legible.
/* ==========================================================================
   Self-Hosted Typography — Manrope WOFF2
   ========================================================================== */
/* --------------------------------------------------------------------------
   Metric-matched fallback.

   Measured cause of the site's layout shift: an <h1> rendered 349px tall in the
   system fallback and 262px once Manrope loaded, an 87px collapse. That single
   reflow was the whole of CLS (0.248 on pricing, 0.098 on the home page).

   Manrope's metrics: 2000 upm, ascent 2132 (106.6%), descent -600 (30%).
   Declaring the same overrides on a local fallback makes the two fonts occupy
   identical vertical space, so the swap is invisible. size-adjust is tuned so
   the fallback's x-height matches Manrope's 1080/2000.
   -------------------------------------------------------------------------- */
/* Manrope's space glyph is 400/2000 units = 0.20em, where most sans-serifs sit
   at 0.25-0.30em. Without compensation words visibly run together. Found while
   building the Hire one-pager, where it was obvious at 9pt; it is present at
   every size. */
body{word-spacing:.06em;}
h1,h2,h3,.h1,.h2{word-spacing:.02em;}

/* Two fallback faces, not one.

   A single size-adjust cannot serve both: 105% matches Manrope's line breaks at
   body sizes but wraps large headings onto fewer lines, and 110% fixes headings
   while breaking body copy. Measured both ways, each value moved content on some
   pages by roughly one line height.

   So body text uses 'Manrope Fallback' at 105% and headings use
   'Manrope Fallback Display' at 110%. Both share Manrope's vertical metrics. */
@font-face{
  font-family:'Manrope Fallback Display';
  src:local('Arial'), local('Helvetica'), local('Liberation Sans'), local('DejaVu Sans');
  ascent-override:106.6%;
  descent-override:30%;
  line-gap-override:0%;
  size-adjust:110%;
}

@font-face{
  font-family:'Manrope Fallback';
  /* Arial and Helvetica cover macOS and Windows; Liberation Sans and DejaVu Sans
     cover Linux and most Android builds. Without a Linux entry the rule silently
     does nothing on those platforms, which is easy to miss when testing on a Mac. */
  src:local('Arial'), local('Helvetica'), local('Liberation Sans'), local('DejaVu Sans');
  ascent-override:106.6%;
  descent-override:30%;
  line-gap-override:0%;
  size-adjust:105%;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-variable.woff2') format('woff2-variations'),
       url('../fonts/manrope-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800.woff2') format('woff2');
}

:root {
  /* ---- Brand palette (EXACTLY UNCHANGED in both themes) ---- */
  --blue: #3F29CF;          /* primary brand · Grow */
  --blue-dark: #2A1B95;     /* hover / pressed */
  --blue-ink: #3F29CF;      /* brand blue as TEXT · 8.64:1 on white */
  --green: #3CAC1A;         /* brand green */
  --pink: #FF006B;          /* brand pink */

  /* ---- Light Theme Defaults ---- */
  --blue-tint: #EFECFC;
  --blue-tint-2: #E1DBF9;
  --green-tint: #E7F5E1;

  --ink: #15111F;
  --ink-soft: #5B5670;
  --ink-faint: #8B87A0;

  --paper: #FFFFFF;
  --paper-soft: #F7F6FC;
  --paper-card: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F7F6FC;
  --border-color: #E6E3F3;
  --nav-bg: rgba(255, 255, 255, .86);
  --mobile-nav-bg: #FFFFFF;

  --line: #E6E3F3;
  --line-strong: #CFC9E8;
  --border-subtle: #E4E2ED;

  --green-ink: #27730E;
  --pink-ink: #D10058;

  --product-grow: var(--blue);
  --product-hire: var(--green-ink);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-tertiary: var(--ink-soft);
  --text-on-dark: #FFFFFF;
  --text-on-dark-soft: rgba(255, 255, 255, .80);

  /* ---- Dedicated Brand & Gradient Section Semantic Tokens ---- */
  --text-on-brand-primary: #FFFFFF;
  --text-on-brand-secondary: rgba(255, 255, 255, .85);
  --text-on-brand-muted: rgba(255, 255, 255, .70);

  /* ---- Dedicated Footer Semantic Custom Properties ---- */
  --footer-bg: #15111F;
  --footer-heading: #FFFFFF;
  --footer-link: rgba(255, 255, 255, .82);
  --footer-link-hover: #FFFFFF;
  --footer-text: rgba(255, 255, 255, .72);
  --footer-muted: rgba(255, 255, 255, .55);
  --footer-border: rgba(255, 255, 255, .14);

  /* ---- Dedicated Navigation Semantic Custom Properties ---- */
  --nav-background: rgba(255, 255, 255, .86);
  --nav-border: #E6E3F3;
  --nav-logo-text: var(--blue);
  --nav-text-muted: #5B5670;
  --nav-text-active: #3F29CF;
  --nav-link-bg-active: #EFECFC;
  --nav-link-bg-hover: #EFECFC;
  --nav-secondary-button-bg: transparent;
  --nav-secondary-button-border: #CFC9E8;
  --nav-secondary-button-text: #15111F;
  --nav-secondary-button-hover-bg: #EFECFC;
  --nav-secondary-button-hover-border: #3F29CF;
  --nav-secondary-button-hover-text: #3F29CF;
  --nav-mobile-bg: #FFFFFF;

  /* ---- Dedicated Button Semantic Custom Properties ---- */
  --btn-primary-bg: #3F29CF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg: #2A1B95;
  --btn-primary-shadow: 0 12px 32px -12px rgba(63, 41, 207, .25);

  --btn-secondary-bg: #F7F6FC;
  --btn-secondary-text: #15111F;
  --btn-secondary-border: #E6E3F3;
  --btn-secondary-hover-bg: #EFECFC;
  --btn-secondary-hover-border: #3F29CF;

  --btn-ghost-text: #15111F;
  --btn-ghost-border: #CFC9E8;
  --btn-ghost-hover-bg: #EFECFC;
  --btn-ghost-hover-text: #3F29CF;
  --btn-ghost-hover-border: #3F29CF;

  --btn-dark-bg: #15111F;
  --btn-dark-text: #FFFFFF;
  --btn-dark-hover-bg: #2A1B95;

  --btn-on-dark-bg: #FFFFFF;
  --btn-on-dark-text: #3F29CF;
  --btn-on-dark-hover-bg: #EFECFC;
  --btn-on-dark-hover-text: #2A1B95;

  --btn-outline-light-border: rgba(255, 255, 255, .50);
  --btn-outline-light-text: #FFFFFF;
  --btn-outline-light-hover-bg: rgba(255, 255, 255, .14);

  /* ---- Dedicated Card & Surface Semantic Custom Properties ---- */
  --surface-1: #FFFFFF;
  --surface-2: #F7F6FC;
  --surface-3: #FFFFFF;

  --surface-page: #FFFFFF;
  --surface-section: #F7F6FC;
  --surface-alt: #15111F;

  --card-background: #FFFFFF;
  --card-border: #E4E2ED;
  --card-border-hover: var(--blue-tint-2);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  --stat-primary: var(--blue);
  --stat-secondary: var(--green-ink);

  /* ---- Dedicated Category Badge Semantic Custom Properties ---- */
  --badge-text: #15111F;
  --badge-text-on-dark: #FFFFFF;
  --badge-bg-purple: #EFECFC;
  --badge-bg-green: #E6F9F2;
  --badge-border: #CFC9E8;
  --badge-border-green: #B2F0D6;

  /* ---- Dedicated Call-to-Action (CTA) Semantic Custom Properties ---- */
  --surface-cta: #201A38;
  /* The closing CTA band. Brand indigo, deliberately identical in both themes:
     this is the moment we ask for the click, so it stays on brand colour rather
     than following the page surface. */
  --surface-cta-brand: linear-gradient(150deg, var(--blue) 0%, var(--blue-dark) 100%);
  --surface-cta-border: rgba(63, 41, 207, .40);
  --cta-heading: #FFFFFF;
  --cta-body: rgba(255, 255, 255, .84);

  --success: var(--green-ink);   --success-surface: var(--green-tint);
  --warning: #B45309;            --warning-surface: #FEF3C7;
  --danger: #C81E1E;             --danger-surface: #FEE9E9;
  --focus-ring: var(--pink-ink);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(21, 17, 31, .04), 0 1px 1px rgba(21, 17, 31, .03);
  --shadow-md: 0 12px 32px -12px rgba(63, 41, 207, .18);
  --shadow-lg: 0 24px 60px -20px rgba(63, 41, 207, .28);

  --font-display: 'Manrope', 'Manrope Fallback Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1260px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Dark Theme Custom Properties (Explicit & System Fallback) ---- */
[data-theme="dark"] {
  --blue-ink: #A395FF;       /* brand blue as TEXT on dark · 6.55:1 on --paper-card */
  --blue-tint: rgba(63, 41, 207, .26);
  --blue-tint-2: rgba(63, 41, 207, .40);
  --green-tint: rgba(60, 172, 26, .20);

  --ink: #F4F3F8;
  --ink-soft: #A9A4BA;
  --ink-faint: #7A758B;

  --paper: #0F0C1B;          /* Layer 0: Deep Charcoal Page BG */
  --paper-soft: #18142B;     /* Layer 1: Section BG */
  --paper-card: #201A38;     /* Layer 2: Elevated Card Surface */
  --bg-surface: #201A38;
  --bg-subtle: rgba(255, 255, 255, .06);
  --border-color: rgba(255, 255, 255, .12);
  --nav-bg: rgba(15, 12, 27, .88);
  --mobile-nav-bg: #141024;

  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --border-subtle: rgba(255, 255, 255, .12);

  --green-ink: #4ADE80;
  --pink-ink: #FF4D94;

  --text-primary: #F4F3F8;
  --text-secondary: #B0ACB8;
  --text-tertiary: #8E899D;

  --footer-bg: #0A0814;
  --footer-heading: #FFFFFF;
  --footer-link: rgba(255, 255, 255, .84);
  --footer-link-hover: #FFFFFF;
  --footer-text: rgba(255, 255, 255, .72);
  --footer-muted: rgba(255, 255, 255, .58);
  --footer-border: rgba(255, 255, 255, .14);

  --nav-background: rgba(15, 12, 27, .88);
  --nav-border: rgba(255, 255, 255, .12);
  --nav-logo-text: #FFFFFF;
  --nav-text-muted: rgba(255, 255, 255, .76);
  --nav-text-active: #FFFFFF;
  --nav-link-bg-active: rgba(63, 41, 207, .32);
  --nav-link-bg-hover: rgba(255, 255, 255, .08);
  --nav-secondary-button-bg: rgba(255, 255, 255, .05);
  --nav-secondary-button-border: rgba(255, 255, 255, .22);
  --nav-secondary-button-text: #FFFFFF;
  --nav-secondary-button-hover-bg: rgba(255, 255, 255, .12);
  --nav-secondary-button-hover-border: #FFFFFF;
  --nav-secondary-button-hover-text: #FFFFFF;
  --nav-mobile-bg: #141024;

  --btn-primary-bg: #3F29CF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg: #5B47EB;
  --btn-primary-shadow: 0 12px 32px -12px rgba(63, 41, 207, .60);

  --btn-secondary-bg: #201A38;
  --btn-secondary-text: #F4F3F8;
  --btn-secondary-border: rgba(255, 255, 255, .18);
  --btn-secondary-hover-bg: rgba(63, 41, 207, .32);
  --btn-secondary-hover-border: #3F29CF;

  --btn-ghost-text: #F4F3F8;
  --btn-ghost-border: rgba(255, 255, 255, .20);
  --btn-ghost-hover-bg: rgba(255, 255, 255, .12);
  --btn-ghost-hover-text: #FFFFFF;
  --btn-ghost-hover-border: rgba(255, 255, 255, .40);

  --btn-dark-bg: #2A2248;
  --btn-dark-text: #FFFFFF;
  --btn-dark-hover-bg: #3F29CF;

  --btn-on-dark-bg: #FFFFFF;
  --btn-on-dark-text: #3F29CF;
  --btn-on-dark-hover-bg: #EFECFC;
  --btn-on-dark-hover-text: #2A1B95;

  --btn-outline-light-border: rgba(255, 255, 255, .50);
  --btn-outline-light-text: #FFFFFF;
  --btn-outline-light-hover-bg: rgba(255, 255, 255, .16);

  --surface-1: #0F0C1B;
  --surface-2: #18142B;
  --surface-3: #201A38;

  --surface-page: #0F0C1B;
  --surface-section: #18142B;
  --surface-alt: #141024;

  --card-background: #201A38;
  --card-border: rgba(255, 255, 255, .12);
  --card-border-hover: rgba(63, 41, 207, .50);
  --card-shadow: 0 4px 16px rgba(0, 0, 0, .40);
  --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, .60);

  --stat-primary: #818CF8;
  --stat-secondary: #4ADE80;

  --badge-text: #FFFFFF;
  --badge-text-on-dark: #FFFFFF;
  --badge-bg-purple: rgba(63, 41, 207, .32);
  --badge-bg-green: rgba(60, 172, 26, .28);
  --badge-border: rgba(63, 41, 207, .50);
  --badge-border-green: rgba(60, 172, 26, .45);

  --surface-cta: #201A38;
  --surface-cta-border: rgba(63, 41, 207, .50);
  --cta-heading: #FFFFFF;
  --cta-body: rgba(255, 255, 255, .84);   /* CTA band is brand-constant, so its text is too */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .40);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .60);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue-ink: #A395FF;       /* brand blue as TEXT on dark · 6.55:1 on --paper-card */
    --blue-tint: rgba(63, 41, 207, .26);
    --blue-tint-2: rgba(63, 41, 207, .40);
    --green-tint: rgba(60, 172, 26, .20);

    --ink: #F4F3F8;
    --ink-soft: #A9A4BA;
    --ink-faint: #7A758B;

    --paper: #0F0C1B;
    --paper-soft: #18142B;
    --paper-card: #201A38;
    --bg-surface: #201A38;
    --bg-subtle: rgba(255, 255, 255, .06);
    --border-color: rgba(255, 255, 255, .12);
    --nav-bg: rgba(15, 12, 27, .88);
    --mobile-nav-bg: #141024;

    --line: rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .18);
    --border-subtle: rgba(255, 255, 255, .12);

    --green-ink: #4ADE80;
    --pink-ink: #FF4D94;

    --text-primary: #F4F3F8;
    --text-secondary: #B0ACB8;
    --text-tertiary: #8E899D;

    --footer-bg: #0A0814;
    --footer-heading: #FFFFFF;
    --footer-link: rgba(255, 255, 255, .84);
    --footer-link-hover: #FFFFFF;
    --footer-text: rgba(255, 255, 255, .72);
    --footer-muted: rgba(255, 255, 255, .58);
    --footer-border: rgba(255, 255, 255, .14);

    --nav-background: rgba(15, 12, 27, .88);
    --nav-border: rgba(255, 255, 255, .12);
    --nav-logo-text: #FFFFFF;
    --nav-text-muted: rgba(255, 255, 255, .76);
    --nav-text-active: #FFFFFF;
    --nav-link-bg-active: rgba(63, 41, 207, .32);
    --nav-link-bg-hover: rgba(255, 255, 255, .08);
    --nav-secondary-button-bg: rgba(255, 255, 255, .05);
    --nav-secondary-button-border: rgba(255, 255, 255, .22);
    --nav-secondary-button-text: #FFFFFF;
    --nav-secondary-button-hover-bg: rgba(255, 255, 255, .12);
    --nav-secondary-button-hover-border: #FFFFFF;
    --nav-secondary-button-hover-text: #FFFFFF;
    --nav-mobile-bg: #141024;

    --btn-primary-bg: #3F29CF;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover-bg: #5B47EB;
    --btn-primary-shadow: 0 12px 32px -12px rgba(63, 41, 207, .60);

    --btn-secondary-bg: #201A38;
    --btn-secondary-text: #F4F3F8;
    --btn-secondary-border: rgba(255, 255, 255, .18);
    --btn-secondary-hover-bg: rgba(63, 41, 207, .32);
    --btn-secondary-hover-border: #3F29CF;

    --btn-ghost-text: #F4F3F8;
    --btn-ghost-border: rgba(255, 255, 255, .20);
    --btn-ghost-hover-bg: rgba(255, 255, 255, .12);
    --btn-ghost-hover-text: #FFFFFF;
    --btn-ghost-hover-border: rgba(255, 255, 255, .40);

    --btn-dark-bg: #2A2248;
    --btn-dark-text: #FFFFFF;
    --btn-dark-hover-bg: #3F29CF;

    --btn-on-dark-bg: #FFFFFF;
    --btn-on-dark-text: #3F29CF;
    --btn-on-dark-hover-bg: #EFECFC;
    --btn-on-dark-hover-text: #2A1B95;

    --btn-outline-light-border: rgba(255, 255, 255, .50);
    --btn-outline-light-text: #FFFFFF;
    --btn-outline-light-hover-bg: rgba(255, 255, 255, .16);

    --surface-1: #0F0C1B;
    --surface-2: #18142B;
    --surface-3: #201A38;

    --surface-page: #0F0C1B;
    --surface-section: #18142B;
    --surface-alt: #141024;

    --card-background: #201A38;
    --card-border: rgba(255, 255, 255, .12);
    --card-border-hover: rgba(63, 41, 207, .50);
    --card-shadow: 0 4px 16px rgba(0, 0, 0, .40);
    --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, .60);

    --stat-primary: #818CF8;
    --stat-secondary: #4ADE80;

    --badge-text: #FFFFFF;
    --badge-text-on-dark: #FFFFFF;
    --badge-bg-purple: rgba(63, 41, 207, .32);
    --badge-bg-green: rgba(60, 172, 26, .28);
    --badge-border: rgba(63, 41, 207, .50);
    --badge-border-green: rgba(60, 172, 26, .45);

    --surface-cta: #201A38;
    --surface-cta-border: rgba(63, 41, 207, .50);
    --cta-heading: #FFFFFF;
    --cta-body: rgba(255, 255, 255, .84);   /* CTA band is brand-constant, so its text is too */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .40);
    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .60);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
html{
  scroll-behavior:smooth;
  box-sizing:border-box;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:88px;
}
*,*:before,*:after{box-sizing:inherit;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100vw;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:0;                 /* Manrope reads best with neutral body tracking */
  color:var(--text-primary);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* guard: decorative glows/gradients never cause h-scroll */
  word-break:break-word;
  overflow-wrap:break-word;
}

h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0;letter-spacing:-.018em;line-height:1.12;font-weight:700;}
h1{font-size:clamp(28px,6vw,48px);}
h2{font-size:clamp(22px,4.5vw,36px);}
h3{font-size:clamp(18px,3.5vw,24px);}

p{margin:0;}
blockquote{margin:0;text-align:left;font-style:normal;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
:target{scroll-margin-top:96px;}

/* Prevent iOS Safari auto-zoom on form inputs */
@media (max-width:768px){
  input,textarea,select{font-size:16px!important;}
}

/* ==========================================================================
   Global focus — accessible, non-colour-dependent
   ========================================================================== */
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:8px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
@media (max-width:1024px){
  .wrap{padding:0 24px;}
}
@media (max-width:600px){
  .wrap{padding:0 20px;}
}
@media (max-width:375px){
  .wrap{padding:0 16px;}
}

/* On very large desktops, let the container grow a little so the page uses the
   available width without leaving huge empty gutters — capped so text columns
   never become uncomfortably long. Scoped overrides (proof testimonials, CTA
   banners) keep their own explicit widths. */
@media (min-width:1728px){
  .wrap{max-width:1340px;}
}
.section{padding:var(--space-20) 0;}
.section--tight{padding:72px 0;}
@media (max-width:768px){
  .section{padding:64px 0;}
  .section--tight{padding:48px 0;}
}
@media (max-width:480px){
  .section{padding:48px 0;}
  .section--tight{padding:36px 0;}
}
.section--soft{background:var(--paper-soft);}
.section--dark{background:var(--paper-soft);color:var(--text-primary);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--text-primary);}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */
.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;
}
.skip-link{
  position:absolute;left:16px;top:-64px;z-index:200;
  padding:12px 20px;background:var(--ink);color:#fff;
  border-radius:12px;font-weight:600;
  transition:top var(--duration-fast) var(--ease-out);
}
.skip-link:focus{top:16px;}

/* ==========================================================================
   Scroll reveal — progressive enhancement.
   Content is visible by default; JS adds .js to <html>, which arms the
   animation. Without JS (and for AI crawlers) everything simply shows.
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);}
.js .reveal.in-view{opacity:1;transform:none;}
.js .reveal-1{transition-delay:80ms;}
.js .reveal-2{transition-delay:160ms;}
.js .reveal-3{transition-delay:240ms;}

/* ==========================================================================
   Reduced motion — global
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none;}
}