/* Team Courage - drop-in stylesheet (fonts + tokens + base + components).
   Generated by tools/build_tokens.py. <link rel="stylesheet" href="brand-kit/css/team-courage.css"> */

/* Fonts: self-hosted variable WOFF2 (Latin). Paths are relative to this file. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/web/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/web/DMSans-Variable.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/web/DMSans-Italic-Variable.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Core palette */
  --tc-blue: #0077D6;
  --tc-tomato: #EF3B2D;
  --tc-yellow: #FFD23F;
  --tc-pink: #F6B5C8;
  --tc-paper: #F7EBDD;
  --tc-ink: #141119;
  --tc-white: #FFFFFF;
  /* blue scale (500 = core) */
  --tc-blue-50: #E9F2FC;
  --tc-blue-100: #D3E4F9;
  --tc-blue-200: #A7CAF2;
  --tc-blue-300: #7BAFEA;
  --tc-blue-400: #4C93E0;
  --tc-blue-500: #0077D6;
  --tc-blue-600: #1368B8;
  --tc-blue-700: #195BA0;
  --tc-blue-800: #1D4A80;
  --tc-blue-900: #1D355A;
  /* tomato scale (500 = core) */
  --tc-tomato-50: #FFEEEA;
  --tc-tomato-100: #FFDCD6;
  --tc-tomato-200: #FFB9AD;
  --tc-tomato-300: #FE9485;
  --tc-tomato-400: #F86D5C;
  --tc-tomato-500: #EF3B2D;
  --tc-tomato-600: #CD382E;
  --tc-tomato-700: #B0342D;
  --tc-tomato-800: #8C2F2B;
  --tc-tomato-900: #602627;
  /* yellow scale (500 = core) */
  --tc-yellow-50: #FFFBEF;
  --tc-yellow-100: #FFF7DF;
  --tc-yellow-200: #FFEEBE;
  --tc-yellow-300: #FFE59B;
  --tc-yellow-400: #FFDC74;
  --tc-yellow-500: #FFD23F;
  --tc-yellow-600: #D9B440;
  /* pink scale (500 = core) */
  --tc-pink-50: #FFF8F9;
  --tc-pink-100: #FEF0F4;
  --tc-pink-200: #FDE1E9;
  --tc-pink-300: #FBD3DE;
  --tc-pink-400: #F9C4D3;
  --tc-pink-500: #F6B5C8;
  --tc-pink-600: #D29BAD;
  /* Neutrals: mist (page tints) and warm paper (art, wells) */
  --tc-mist-50: #F4F8FE;
  --tc-mist-100: #E9F2FC;
  --tc-mist-200: #DCEAFA;
  --tc-mist-300: #D3E4F9;
  --tc-paper-50: #FCF7F1;
  --tc-paper-100: #F9F1E7;
  --tc-paper-200: #EFE3D6;
  --tc-paper-300: #E5D9CE;
  --tc-paper-400: #D5CBC0;
  --tc-ink-300: #BDBCBF;
  --tc-ink-400: #8B898E;
  --tc-ink-500: #737177;
  --tc-ink-600: #5A575E;
  --tc-ink-700: #3F3D44;
  --tc-ink-800: #2B2830;
  /* Feedback (UI states only, never in brand graphics) */
  --tc-success: #1F7A4D;
  --tc-success-wash: #E5EFE8;
  --tc-error: #B0342D;
  --tc-error-wash: #FFEEEA;
  --tc-warning-wash: #FFF7DF;
  --tc-info-wash: #E9F2FC;

  /* Semantic roles - use these in components */
  --tc-color-bg: var(--tc-white); /* The page */
  --tc-color-surface: var(--tc-white); /* Cards, inputs and anything read closely */
  --tc-color-surface-tint: var(--tc-mist-50); /* Alternate sections (.tc-theme-mist) and the app sidebar: the page's one tint */
  --tc-color-surface-sunken: var(--tc-mist-100); /* Wells, grouped settings, table stripes, code */
  --tc-color-well: var(--tc-blue-100); /* Illustration and photo wells: the art window behind a picture (never paper on a page) */
  --tc-color-surface-warm: var(--tc-blue-100); /* Deprecated alias of well (remove in v4) */
  --tc-color-partner: var(--tc-yellow); /* The surface's partner colour: offset blocks behind photos, wells and featured cards */
  --tc-color-sticker: var(--tc-yellow); /* The hard offset under the view's main button (.tc-btn--highlight) */
  --tc-color-tint: var(--tc-mist-200); /* Chips, badges, progress tracks, icon backgrounds, row hover */
  --tc-color-text: var(--tc-ink); /* Body and headings */
  --tc-color-text-muted: var(--tc-ink-700); /* Secondary text */
  --tc-color-text-subtle: var(--tc-ink-600); /* Captions, meta, kickers */
  --tc-color-border: var(--tc-mist-300); /* Hairlines and dividers */
  --tc-color-border-strong: var(--tc-ink); /* Inputs, outlined buttons */
  --tc-color-link: var(--tc-blue-700); /* Inline links (6.2:1 on white) */
  --tc-color-link-hover: var(--tc-blue-800); /* Link hover */
  --tc-color-accent-text: var(--tc-tomato-700); /* Red text on white, when you must (5.6:1) */
  --tc-color-primary: var(--tc-blue); /* Primary action background */
  --tc-color-primary-hover: var(--tc-blue-600); /* Primary action hover */
  --tc-color-on-primary: var(--tc-white); /* Text on primary (4.6:1, AA) */
  --tc-color-highlight: var(--tc-yellow); /* One per screen at most: a marker, a sticker, the yellow button on a dark band */
  --tc-color-on-highlight: var(--tc-ink); /* Text on yellow (12.9:1) */
  --tc-color-focus: var(--tc-ink); /* Focus ring on light surfaces */
  --tc-color-field: var(--tc-white); /* Input, select and textarea fill (always white, on every theme) */
  --tc-color-field-text: var(--tc-ink); /* Text inside fields */
  --tc-color-field-border: var(--tc-ink-400); /* Field and control borders (3.5:1 on white) */
  --tc-color-field-placeholder: var(--tc-ink-500); /* Placeholder text (4.8:1 on white) */
  --tc-color-field-border-hover: var(--tc-ink-600); /* Field border on hover */
  --tc-color-field-focus: var(--tc-blue-700); /* Field border on focus */
  --tc-color-field-ring: var(--tc-blue-100); /* The soft ring around a focused field */
  --tc-color-selected: var(--tc-blue-50); /* Selected choice cards, pressed reactions, highlighted table columns */
  --tc-color-on-selected: var(--tc-blue-800); /* Text and icons on the selected tint */

  /* Type */
  --tc-font-display: 'Bricolage Grotesque', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --tc-font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tc-text-display: 800 clamp(2.75rem, 1.75rem + 3.4vw, 4.5rem)/1 var(--tc-font-display); /* Home hero only */
  --tc-text-display-size: clamp(2.75rem, 1.75rem + 3.4vw, 4.5rem);
  --tc-text-display-tracking: -0.03em;
  --tc-text-h1: 800 clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem)/1.02 var(--tc-font-display); /* Page title */
  --tc-text-h1-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  --tc-text-h1-tracking: -0.028em;
  --tc-text-h2: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1.08 var(--tc-font-display); /* Section title */
  --tc-text-h2-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --tc-text-h2-tracking: -0.022em;
  --tc-text-h3: 800 clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem)/1.15 var(--tc-font-display); /* Card and group title */
  --tc-text-h3-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem);
  --tc-text-h3-tracking: -0.016em;
  --tc-text-h4: 700 clamp(1.1875rem, 1.12rem + 0.2vw, 1.3125rem)/1.25 var(--tc-font-display); /* List item title, app screen title */
  --tc-text-h4-size: clamp(1.1875rem, 1.12rem + 0.2vw, 1.3125rem);
  --tc-text-h4-tracking: -0.01em;
  --tc-text-eyebrow: 600 0.9375rem/1.3 var(--tc-font-body); /* Sentence-case kicker above a heading, only when the section needs a category */
  --tc-text-eyebrow-size: 0.9375rem;
  --tc-text-eyebrow-tracking: 0;
  --tc-text-lead: 400 clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem)/1.5 var(--tc-font-body); /* Intro under a title */
  --tc-text-lead-size: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem);
  --tc-text-lead-tracking: 0;
  --tc-text-body: 400 1.0625rem/1.6 var(--tc-font-body); /* Default reading text (17px) */
  --tc-text-body-size: 1.0625rem;
  --tc-text-body-tracking: 0;
  --tc-text-body-sm: 400 0.9375rem/1.55 var(--tc-font-body); /* Secondary text, dense UI */
  --tc-text-body-sm-size: 0.9375rem;
  --tc-text-body-sm-tracking: 0;
  --tc-text-caption: 500 0.8125rem/1.45 var(--tc-font-body); /* Captions, meta, legal */
  --tc-text-caption-size: 0.8125rem;
  --tc-text-caption-tracking: 0.005em;
  --tc-text-label: 600 0.9375rem/1.3 var(--tc-font-body); /* Form labels, nav, tabs */
  --tc-text-label-size: 0.9375rem;
  --tc-text-label-tracking: 0;
  --tc-text-button: 700 1rem/1 var(--tc-font-body); /* Buttons */
  --tc-text-button-size: 1rem;
  --tc-text-button-tracking: 0.005em;
  --tc-text-nav: 500 0.9375rem/1.2 var(--tc-font-body); /* Header and sidebar navigation */
  --tc-text-nav-size: 0.9375rem;
  --tc-text-nav-tracking: 0;
  --tc-text-tag: 600 0.8125rem/1.3 var(--tc-font-body); /* Badges, table headings, small labels, footer titles */
  --tc-text-tag-size: 0.8125rem;
  --tc-text-tag-tracking: 0;
  --tc-text-counter: 700 0.8125rem/1 var(--tc-font-body); /* Numbers in circles: weeks, steps, rungs */
  --tc-text-counter-size: 0.8125rem;
  --tc-text-counter-tracking: 0;
  --tc-text-tab: 600 0.75rem/1.2 var(--tc-font-body); /* Bottom tab bar labels (the smallest text in the system) */
  --tc-text-tab-size: 0.75rem;
  --tc-text-tab-tracking: 0;
  --tc-text-quote: 800 clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem)/1.18 var(--tc-font-display); /* The words to say: scripts and flashcards */
  --tc-text-quote-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  --tc-text-quote-tracking: -0.018em;
  --tc-text-price: 800 2.25rem/1 var(--tc-font-display); /* Prices on plan cards */
  --tc-text-price-size: 2.25rem;
  --tc-text-price-tracking: -0.03em;
  --tc-text-price-lg: 800 clamp(2.75rem, 2.25rem + 1.6vw, 3.5rem)/1 var(--tc-font-display); /* The price beside an offer */
  --tc-text-price-lg-size: clamp(2.75rem, 2.25rem + 1.6vw, 3.5rem);
  --tc-text-price-lg-tracking: -0.035em;
  --tc-text-numeral: 800 clamp(2rem, 1.75rem + 1vw, 2.5rem)/0.9 var(--tc-font-display); /* Big step and day numbers beside a list */
  --tc-text-numeral-size: clamp(2rem, 1.75rem + 1vw, 2.5rem);
  --tc-text-numeral-tracking: -0.04em;

  /* Space, radius, shadow, motion, layout */
  --tc-space-0: 0;
  --tc-space-1: 0.25rem;
  --tc-space-2: 0.5rem;
  --tc-space-3: 0.75rem;
  --tc-space-4: 1rem;
  --tc-space-5: 1.25rem;
  --tc-space-6: 1.5rem;
  --tc-space-8: 2rem;
  --tc-space-10: 2.5rem;
  --tc-space-12: 3rem;
  --tc-space-16: 4rem;
  --tc-space-20: 5rem;
  --tc-space-24: 6rem;
  --tc-space-32: 8rem;
  --tc-radius-xs: 0.375rem;
  --tc-radius-sm: 0.625rem;
  --tc-radius-md: 1rem;
  --tc-radius-lg: 1.5rem;
  --tc-radius-xl: 1.5rem;
  --tc-radius-pill: 999px;
  --tc-shadow-none: none;
  --tc-shadow-lift: 0 1px 2px rgb(20 17 25 / 0.06), 0 10px 28px -6px rgb(20 17 25 / 0.14);
  --tc-shadow-sticker: 0 4px 0 0 #141119;
  --tc-shadow-sticker-raised: 0 6px 0 0 #141119;
  --tc-shadow-sm: 0 1px 3px rgb(20 17 25 / 0.12);
  --tc-shadow-float: 0 12px 40px rgb(20 17 25 / 0.28);
  --tc-duration-fast: 120ms;
  --tc-duration-base: 200ms;
  --tc-duration-slow: 360ms;
  --tc-duration-enter: 900ms;
  --tc-duration-spin: 800ms;
  --tc-duration-shimmer: 1400ms;
  --tc-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tc-container: 75rem;
  --tc-container-wide: 60rem;
  --tc-container-narrow: 44rem;
  --tc-measure: 62ch;
  --tc-gutter: clamp(1.25rem, 0.75rem + 1.8vw, 2rem);
  --tc-section: clamp(4rem, 2.5rem + 5vw, 7rem);
  --tc-section-tight: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  --tc-head-gap: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  --tc-card-pad: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --tc-weight-regular: 400;
  --tc-weight-medium: 500;
  --tc-weight-semibold: 600;
  --tc-weight-bold: 700;
  --tc-weight-extrabold: 800;
  --tc-border-hair: 1px;
  --tc-border-control: 1.5px;
  --tc-border-strong: 2px;
  --tc-control-sm: 2.625rem;
  --tc-control-md: 3.25rem;
  --tc-control-lg: 3.75rem;
  --tc-focus-width: 3px;
  --tc-focus-offset: 3px;
  --tc-offset: clamp(0.625rem, 0.4rem + 0.5vw, 1rem);
  --tc-offset-sm: 4px;
  --tc-offset-lift: 6px;
  --tc-white-a12: rgb(255 255 255 / 0.12);
  --tc-white-a25: rgb(255 255 255 / 0.25);
  --tc-ink-a06: rgb(20 17 25 / 0.06);
  --tc-ink-a12: rgb(20 17 25 / 0.12);
  --tc-tomato-a14: rgb(239 59 45 / 0.14);
  --tc-overlay: rgb(20 17 25 / 0.45);
  /* Content kinds: the tint behind a kind's icon (data-kind="deck|answer|win|live|lesson") */
  --tc-kind-deck: var(--tc-yellow-100);
  --tc-kind-answer: var(--tc-blue-50);
  --tc-kind-win: var(--tc-pink-100);
  --tc-kind-live: var(--tc-tomato-50);
  --tc-kind-lesson: var(--tc-mist-200);
  --tc-z-chrome: 10;
  --tc-z-header: 20;
  --tc-z-menu: 30;
  --tc-z-sticky: 40;
  --tc-z-toast: 50;
  --tc-z-skip: 100;
  /* Breakpoints (media queries only): xs 400px · sm 520px · md 760px · lg 1024px · xl 1200px */
}

/* Section themes: put on any container to recolour everything inside. Coloured, dark and always-white
   components take a theme too (see THEME_SELECTORS in tools/build_tokens.py). */
.tc-theme-mist {
  --tc-color-bg: var(--tc-mist-50);
  --tc-color-surface: var(--tc-white);
  --tc-color-surface-tint: var(--tc-white);
  --tc-color-surface-sunken: var(--tc-mist-100);
  --tc-color-border: var(--tc-mist-300);
  --tc-color-tint: var(--tc-mist-200);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
.tc-theme-white {
  --tc-color-bg: var(--tc-white);
  --tc-color-surface: var(--tc-white);
  --tc-color-surface-tint: var(--tc-mist-50);
  --tc-color-surface-sunken: var(--tc-mist-100);
  --tc-color-well: var(--tc-blue-100);
  --tc-color-surface-warm: var(--tc-blue-100);
  --tc-color-partner: var(--tc-yellow);
  --tc-color-sticker: var(--tc-yellow);
  --tc-color-tint: var(--tc-mist-200);
  --tc-color-text: var(--tc-ink);
  --tc-color-text-muted: var(--tc-ink-700);
  --tc-color-text-subtle: var(--tc-ink-600);
  --tc-color-border: var(--tc-mist-300);
  --tc-color-border-strong: var(--tc-ink);
  --tc-color-link: var(--tc-blue-700);
  --tc-color-link-hover: var(--tc-blue-800);
  --tc-color-accent-text: var(--tc-tomato-700);
  --tc-color-primary: var(--tc-blue);
  --tc-color-primary-hover: var(--tc-blue-600);
  --tc-color-on-primary: var(--tc-white);
  --tc-color-highlight: var(--tc-yellow);
  --tc-color-on-highlight: var(--tc-ink);
  --tc-color-focus: var(--tc-ink);
  --tc-color-field: var(--tc-white);
  --tc-color-field-text: var(--tc-ink);
  --tc-color-field-border: var(--tc-ink-400);
  --tc-color-field-placeholder: var(--tc-ink-500);
  --tc-color-field-border-hover: var(--tc-ink-600);
  --tc-color-field-focus: var(--tc-blue-700);
  --tc-color-field-ring: var(--tc-blue-100);
  --tc-color-selected: var(--tc-blue-50);
  --tc-color-on-selected: var(--tc-blue-800);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
.tc-dialog, .tc-menu, .tc-signup, .tc-pricebox, .tc-plan, .tc-topic, .tc-answer, .tc-table-wrap, .tc-sos-button, .tc-flashcard, .tc-opt, .tc-price {
  --tc-color-bg: var(--tc-white);
  --tc-color-surface: var(--tc-white);
  --tc-color-surface-tint: var(--tc-mist-50);
  --tc-color-surface-sunken: var(--tc-mist-100);
  --tc-color-well: var(--tc-blue-100);
  --tc-color-surface-warm: var(--tc-blue-100);
  --tc-color-tint: var(--tc-mist-200);
  --tc-color-text: var(--tc-ink);
  --tc-color-text-muted: var(--tc-ink-700);
  --tc-color-text-subtle: var(--tc-ink-600);
  --tc-color-border: var(--tc-mist-300);
  --tc-color-border-strong: var(--tc-ink);
  --tc-color-link: var(--tc-blue-700);
  --tc-color-link-hover: var(--tc-blue-800);
  --tc-color-accent-text: var(--tc-tomato-700);
  --tc-color-primary: var(--tc-blue);
  --tc-color-primary-hover: var(--tc-blue-600);
  --tc-color-on-primary: var(--tc-white);
  --tc-color-highlight: var(--tc-yellow);
  --tc-color-on-highlight: var(--tc-ink);
  --tc-color-focus: var(--tc-ink);
  --tc-color-field: var(--tc-white);
  --tc-color-field-text: var(--tc-ink);
  --tc-color-field-border: var(--tc-ink-400);
  --tc-color-field-placeholder: var(--tc-ink-500);
  --tc-color-field-border-hover: var(--tc-ink-600);
  --tc-color-field-focus: var(--tc-blue-700);
  --tc-color-field-ring: var(--tc-blue-100);
  --tc-color-selected: var(--tc-blue-50);
  --tc-color-on-selected: var(--tc-blue-800);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
.tc-theme-paper, .tc-card--warm {
  --tc-color-bg: var(--tc-paper);
  --tc-color-surface: var(--tc-white);
  --tc-color-surface-tint: var(--tc-paper-50);
  --tc-color-surface-sunken: var(--tc-paper-200);
  --tc-color-surface-warm: var(--tc-paper-200);
  --tc-color-well: var(--tc-paper-200);
  --tc-color-border: var(--tc-paper-400);
  --tc-color-tint: var(--tc-paper-200);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
.tc-theme-ink, .tc-card--ink, .tc-plan--dark, .tc-sos, .tc-sticky, .tc-toast, .tc-skip, .tc-hero-ink .tc-header:not(.is-scrolled) {
  --tc-color-bg: var(--tc-ink);
  --tc-color-surface: var(--tc-ink-800);
  --tc-color-surface-tint: var(--tc-ink-800);
  --tc-color-surface-sunken: var(--tc-ink);
  --tc-color-tint: var(--tc-ink-700);
  --tc-color-text: var(--tc-white);
  --tc-color-text-muted: var(--tc-ink-300);
  --tc-color-text-subtle: var(--tc-ink-300);
  --tc-color-border: var(--tc-ink-700);
  --tc-color-border-strong: var(--tc-white);
  --tc-color-link: var(--tc-white);
  --tc-color-link-hover: var(--tc-yellow);
  --tc-color-accent-text: var(--tc-pink);
  --tc-color-primary: var(--tc-yellow);
  --tc-color-primary-hover: var(--tc-white);
  --tc-color-on-primary: var(--tc-ink);
  --tc-color-focus: var(--tc-yellow);
  --tc-color-well: var(--tc-white);
  --tc-color-surface-warm: var(--tc-white);
  --tc-color-partner: var(--tc-pink);
  --tc-color-sticker: var(--tc-pink);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
.tc-theme-blue, .tc-card--blue, .tc-script__say, .tc-hero-blue .tc-header:not(.is-scrolled) {
  --tc-color-bg: var(--tc-blue);
  --tc-color-surface: var(--tc-blue-600);
  --tc-color-surface-tint: var(--tc-blue-600);
  --tc-color-surface-sunken: var(--tc-blue-700);
  --tc-color-tint: var(--tc-blue-600);
  --tc-color-text: var(--tc-white);
  --tc-color-text-muted: var(--tc-white);
  --tc-color-text-subtle: var(--tc-white);
  --tc-color-border: var(--tc-blue-400);
  --tc-color-border-strong: var(--tc-white);
  --tc-color-link: var(--tc-white);
  --tc-color-link-hover: var(--tc-yellow);
  --tc-color-accent-text: var(--tc-white);
  --tc-color-primary: var(--tc-yellow);
  --tc-color-primary-hover: var(--tc-white);
  --tc-color-on-primary: var(--tc-ink);
  --tc-color-focus: var(--tc-yellow);
  --tc-color-well: var(--tc-white);
  --tc-color-surface-warm: var(--tc-white);
  --tc-color-partner: var(--tc-yellow);
  --tc-color-sticker: var(--tc-ink);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
.tc-theme-yellow, .tc-card--yellow, .tc-hero-yellow .tc-header:not(.is-scrolled) {
  --tc-color-bg: var(--tc-yellow);
  --tc-color-surface: var(--tc-yellow-200);
  --tc-color-surface-tint: var(--tc-yellow-100);
  --tc-color-surface-sunken: var(--tc-yellow-400);
  --tc-color-tint: var(--tc-yellow-300);
  --tc-color-text: var(--tc-ink);
  --tc-color-text-muted: var(--tc-ink-800);
  --tc-color-text-subtle: var(--tc-ink-700);
  --tc-color-border: var(--tc-yellow-600);
  --tc-color-link: var(--tc-ink);
  --tc-color-link-hover: var(--tc-ink-700);
  --tc-color-accent-text: var(--tc-ink);
  --tc-color-primary: var(--tc-blue);
  --tc-color-primary-hover: var(--tc-blue-600);
  --tc-color-on-primary: var(--tc-white);
  --tc-color-focus: var(--tc-ink);
  --tc-color-well: var(--tc-white);
  --tc-color-surface-warm: var(--tc-white);
  --tc-color-partner: var(--tc-blue);
  --tc-color-sticker: var(--tc-ink);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
.tc-theme-pink, .tc-card--pink, .tc-hero-pink .tc-header:not(.is-scrolled) {
  --tc-color-bg: var(--tc-pink);
  --tc-color-surface: var(--tc-pink-200);
  --tc-color-surface-tint: var(--tc-pink-100);
  --tc-color-surface-sunken: var(--tc-pink-400);
  --tc-color-tint: var(--tc-pink-300);
  --tc-color-text: var(--tc-ink);
  --tc-color-text-muted: var(--tc-ink-800);
  --tc-color-text-subtle: var(--tc-ink-700);
  --tc-color-border: var(--tc-pink-600);
  --tc-color-link: var(--tc-ink);
  --tc-color-link-hover: var(--tc-ink-700);
  --tc-color-accent-text: var(--tc-ink);
  --tc-color-primary: var(--tc-ink);
  --tc-color-primary-hover: var(--tc-ink-800);
  --tc-color-on-primary: var(--tc-white);
  --tc-color-focus: var(--tc-ink);
  --tc-color-well: var(--tc-white);
  --tc-color-surface-warm: var(--tc-white);
  --tc-color-partner: var(--tc-blue);
  --tc-color-sticker: var(--tc-blue);
  background-color: var(--tc-color-bg);
  color: var(--tc-color-text);
}
/* ------------------------------------------------------------ base
   Source: tools/base.css. Every value is a token; tools/lint_system.py checks it. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tc-color-bg);
  color: var(--tc-color-text);
  font: var(--tc-text-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .tc-display, .tc-h1, .tc-h2, .tc-h3, .tc-h4 {
  font-family: var(--tc-font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  margin: 0 0 0.4em;
  text-wrap: balance;
  color: inherit;
}
.tc-display { font: var(--tc-text-display); letter-spacing: var(--tc-text-display-tracking); }
h1, .tc-h1 { font: var(--tc-text-h1); letter-spacing: var(--tc-text-h1-tracking); }
h2, .tc-h2 { font: var(--tc-text-h2); letter-spacing: var(--tc-text-h2-tracking); }
h3, .tc-h3 { font: var(--tc-text-h3); letter-spacing: var(--tc-text-h3-tracking); }
h4, .tc-h4 { font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); }
p { margin: 0 0 1em; text-wrap: pretty; }
.tc-lead { font: var(--tc-text-lead); letter-spacing: var(--tc-text-lead-tracking); color: var(--tc-color-text-muted); }
.tc-body-sm, .tc-text-small { font: var(--tc-text-body-sm); } /* .tc-text-small: deprecated alias */
.tc-caption { font: var(--tc-text-caption); color: var(--tc-color-text-subtle); }
.tc-eyebrow {
  font: var(--tc-text-eyebrow);
  letter-spacing: var(--tc-text-eyebrow-tracking);
  color: var(--tc-color-text-subtle);
  margin: 0 0 var(--tc-space-3);
  display: block;
}
.tc-measure { max-width: var(--tc-measure); }
.tc-muted { color: var(--tc-color-text-muted); }
.tc-subtle { color: var(--tc-color-text-subtle); }
.tc-num { font-variant-numeric: tabular-nums; }
a { color: var(--tc-color-link); text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
a:hover { color: var(--tc-color-link-hover); }
:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: var(--tc-focus-offset); border-radius: var(--tc-radius-xs); }
::selection { background: var(--tc-yellow); color: var(--tc-ink); }
img, svg { max-width: 100%; height: auto; }
strong, b { font-weight: var(--tc-weight-bold); }

/* Yellow marker highlight for one key word in a display headline (at most once per view) */
.tc-highlight {
  background: linear-gradient(transparent 52%, var(--tc-color-highlight) 52%, var(--tc-color-highlight) 84%, transparent 84%);
  padding: 0 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tc-theme-yellow .tc-highlight { --tc-color-highlight: var(--tc-white); }
.tc-theme-blue .tc-highlight, .tc-theme-ink .tc-highlight { background: none; color: var(--tc-yellow); } /* tc-lint-ignore: display-size type only, 3.1:1 is AA large */

/* ------------------------------------------------------------ layout */
.tc-container { width: 100%; max-width: var(--tc-container); margin-inline: auto; padding-inline: var(--tc-gutter); }
.tc-container--narrow, .tc-container-narrow { max-width: var(--tc-container-narrow); } /* -narrow: deprecated alias */
.tc-container-narrow { width: 100%; margin-inline: auto; padding-inline: var(--tc-gutter); }
.tc-container--wide { max-width: var(--tc-container-wide); }
.tc-stack > * + * { margin-top: var(--tc-stack-gap, var(--tc-space-4)); }

/* ------------------------------------------------------------ buttons
   Variants: primary (default), --secondary, --highlight, --ink, --ghost, --danger. Sizes: --sm, (md), --lg, --block.
   States: :hover, :active, :focus-visible, :disabled / [aria-disabled], [aria-busy="true"] with a .tc-spinner inside. */
.tc-btn {
  --_bg: var(--tc-color-primary);
  --_fg: var(--tc-color-on-primary);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--tc-control-md); padding: 0.85rem 1.6rem;
  font: var(--tc-text-button); letter-spacing: var(--tc-text-button-tracking);
  color: var(--_fg); background: var(--_bg);
  border: var(--tc-border-strong) solid var(--_bd); border-radius: var(--tc-radius-pill);
  text-decoration: none; cursor: pointer;
  transition: transform var(--tc-duration-fast) var(--tc-ease-standard),
              background-color var(--tc-duration-base) var(--tc-ease-standard),
              box-shadow var(--tc-duration-base) var(--tc-ease-standard);
}
.tc-btn:hover { --_bg: var(--tc-color-primary-hover); color: var(--_fg); transform: translateY(-1px); }
.tc-btn:active { transform: translateY(1px); }
.tc-btn--secondary { --_bg: transparent; --_fg: var(--tc-color-text); --_bd: var(--tc-color-border-strong); }
.tc-btn--secondary:hover { --_bg: color-mix(in srgb, var(--tc-color-text) 10%, transparent); --_bd: var(--tc-color-text); } /* a faint tint and a firmer outline: it answers the pointer without outshining the main button */
/* The view's main call to action: primary colours plus a hard offset sticker in the surface's sticker colour
   (blue + yellow on white, yellow + ink on blue, yellow + pink on ink, blue + ink on yellow, ink + blue on pink). One per view. */
.tc-btn--highlight { box-shadow: 0 var(--tc-offset-sm) 0 0 var(--tc-color-sticker); }
.tc-btn--highlight:hover { box-shadow: 0 var(--tc-offset-lift) 0 0 var(--tc-color-sticker); transform: translateY(-2px); }
.tc-btn--highlight:active { box-shadow: 0 1px 0 0 var(--tc-color-sticker); transform: translateY(3px); }
.tc-btn--ink { --_bg: var(--tc-ink); --_fg: var(--tc-white); }
.tc-btn--ink:hover { --_bg: var(--tc-ink-800); }
.tc-btn--ghost { --_bg: transparent; --_fg: var(--tc-color-link); padding-inline: var(--tc-space-2); }
.tc-btn--ghost:hover { --_bg: transparent; text-decoration: underline; }
.tc-btn--danger { --_bg: var(--tc-tomato-700); --_fg: var(--tc-white); }
.tc-btn--danger:hover { --_bg: var(--tc-tomato-800); }
.tc-btn--sm { min-height: var(--tc-control-sm); padding: 0.55rem 1.15rem; font-size: var(--tc-text-body-sm-size); }
.tc-btn--lg { min-height: var(--tc-control-lg); padding: 1rem 2rem; font-size: var(--tc-text-body-size); }
.tc-btn--ghost:is(.tc-btn--sm, .tc-btn--lg) { padding-inline: var(--tc-space-2); } /* the size sets padding too: keep the ghost's tight sides */
.tc-btn--block { width: 100%; }
.tc-btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.tc-btn:disabled, .tc-btn[aria-disabled="true"] { --_bg: var(--tc-mist-200); --_fg: var(--tc-ink-500); --_bd: transparent; cursor: not-allowed; transform: none; box-shadow: none; }

/* ------------------------------------------------------------ cards
   One white card is the default. Colour cards take their theme (tools/build_tokens.py THEME_SELECTORS), so text,
   links and buttons inside them are always readable. Use one colour card per view, never side by side. */
.tc-card {
  background: var(--tc-color-surface);
  color: var(--tc-color-text);
  border-radius: var(--tc-radius-md);
  padding: var(--tc-card-pad);
  border: var(--tc-border-hair) solid var(--tc-color-border);
}
.tc-card--panel { border-radius: var(--tc-radius-lg); }
.tc-card--quiet { background: var(--tc-color-surface-sunken); border-color: transparent; }
/* The offset block: a hard shadow in the surface's partner colour, behind the one thing in a view you most want seen. */
.tc-offset { box-shadow: var(--tc-offset) var(--tc-offset) 0 0 var(--tc-color-partner); }
.tc-card--warm, .tc-card--blue, .tc-card--yellow, .tc-card--pink, .tc-card--ink { background: var(--tc-color-bg); border-color: transparent; }
.tc-card--tomato { background: var(--tc-tomato); color: var(--tc-ink); border-color: transparent; } /* deprecated: tomato is not a surface */

/* ------------------------------------------------------------ chips (tags people read: age bands, topics) */
.tc-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.35rem 0.8rem; border-radius: var(--tc-radius-pill);
  font: var(--tc-text-tag);
  background: var(--tc-color-tint); color: var(--tc-color-text);
}
.tc-chip--blue { background: var(--tc-blue-50); color: var(--tc-blue-800); }
.tc-chip--yellow { background: var(--tc-yellow); color: var(--tc-ink); }
.tc-chip--pink { background: var(--tc-pink-200); color: var(--tc-ink); }
.tc-chip--age { background: transparent; box-shadow: inset 0 0 0 var(--tc-border-hair) var(--tc-color-field-border); }

/* ------------------------------------------------------------ forms
   Fields are white on every surface. States: :hover, :focus, :disabled, [aria-invalid="true"] (or .tc-field--invalid). */
.tc-label { display: block; font: var(--tc-text-label); margin-bottom: var(--tc-space-2); color: var(--tc-color-text); }
.tc-input, .tc-select, .tc-textarea {
  width: 100%; min-height: var(--tc-control-md); padding: 0.75rem 1rem;
  font: var(--tc-text-body); line-height: 1.25; color: var(--tc-color-field-text);
  background: var(--tc-color-field);
  border: var(--tc-border-control) solid var(--tc-color-field-border); border-radius: var(--tc-radius-md);
  transition: border-color var(--tc-duration-fast), box-shadow var(--tc-duration-fast);
}
.tc-input:hover, .tc-select:hover, .tc-textarea:hover { border-color: var(--tc-color-field-border-hover); }
.tc-input::placeholder, .tc-textarea::placeholder { color: var(--tc-color-field-placeholder); opacity: 1; }
.tc-select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23141119' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; }
.tc-textarea { min-height: 6rem; line-height: 1.5; resize: vertical; }
.tc-input:focus, .tc-select:focus, .tc-textarea:focus {
  outline: none; border-color: var(--tc-color-field-focus); box-shadow: 0 0 0 4px var(--tc-color-field-ring);
}
.tc-input[aria-invalid="true"], .tc-select[aria-invalid="true"], .tc-textarea[aria-invalid="true"] { border-color: var(--tc-error); }
.tc-input[aria-invalid="true"]:focus, .tc-select[aria-invalid="true"]:focus, .tc-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--tc-error-wash); }
.tc-input:disabled, .tc-select:disabled, .tc-textarea:disabled { background: var(--tc-mist-50); border-color: var(--tc-mist-300); color: var(--tc-ink-500); cursor: not-allowed; }
.tc-hint { font: var(--tc-text-caption); color: var(--tc-color-text-subtle); margin-top: var(--tc-space-2); }
.tc-error { font: var(--tc-text-caption); font-weight: var(--tc-weight-semibold); color: var(--tc-color-accent-text); margin-top: var(--tc-space-2); }

/* ------------------------------------------------------------ shapes */
/* Recolour any single-colour shape: <span class="tc-shape" style="--shape:url(shapes/svg/steps.svg); background:var(--tc-tomato)"></span> */
.tc-shape { display: block; width: 7rem; aspect-ratio: var(--ratio, 3 / 2); background: var(--tc-ink);
  -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat; }

/* ------------------------------------------------------------ logo */
.tc-logo { display: inline-block; width: clamp(9rem, 7rem + 6vw, 12.5rem); height: auto; }
/* Logo with the byline as live text, for headers and small sizes. The byline scales with the logo width,
   so it always sits under "courage" at the same proportion. Use the outlined lockup file at 240 px and up.
   <a class="tc-brand" style="--logo-w: 10rem"><img src="logo/svg/team-courage-logo.svg" alt="Team Courage"><span class="tc-brand__by">with Dr Kaylene Henderson</span></a> */
.tc-brand { display: inline-grid; justify-items: start; gap: calc(var(--logo-w, 10rem) * 0.035); color: inherit; text-decoration: none; }
.tc-brand img { width: var(--logo-w, 10rem); height: auto; display: block; }
.tc-brand__by { font: var(--tc-text-tag); font-size: calc(var(--logo-w, 10rem) * 0.07); line-height: 1; letter-spacing: 0.005em; color: var(--tc-color-text-muted); padding-left: calc(var(--logo-w, 10rem) * 0.012); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================ APP UI (program components)
   Source: tools/ui_components.css, appended to css/team-courage.css by build_tokens.py.
   Colour rule: screens are white with mist wells, white cards and ink type. Blue is the only interactive colour.
   Each screen gets at most one bold colour block (a blue script, an ink SOS sheet). Content types are
   told apart by a small tinted icon (data-kind), never by filling whole cards with colour.
   Text colours come from semantic roles (--tc-color-*) so components work on every theme; tools/lint_system.py checks it.
   Icons: <svg class="tc-icon" aria-hidden="true"><use href="/icons/sprite.svg#tc-i-house"/></svg>
          program icons: #tc-courage-ladder, #tc-sos ... (see icons/icons.json)            */

.tc-icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; vertical-align: -0.2em; --tc-icon-knockout: var(--tc-color-bg); }
.tc-icon--lg { width: 2rem; height: 2rem; }
.tc-icon--xl { width: 3rem; height: 3rem; }

/* content kinds: <span class="tc-kind-icon" data-kind="deck">, or data-kind on a list item icon, feature icon or feed item */
[data-kind="deck"] { --tint: var(--tc-kind-deck); }
[data-kind="answer"] { --tint: var(--tc-kind-answer); }
[data-kind="win"] { --tint: var(--tc-kind-win); }
[data-kind="live"] { --tint: var(--tc-kind-live); }
[data-kind="lesson"] { --tint: var(--tc-kind-lesson); }

/* ------------------------------------------------ badges (tier and status; colour on a badge means status) */
.tc-badge { display: inline-flex; justify-self: start; width: fit-content; flex: none; align-items: center; gap: 0.3em; height: 1.5rem; padding: 0 0.6rem; border-radius: var(--tc-radius-pill);
  font: var(--tc-text-tag); line-height: 1; background: var(--tc-color-tint); color: var(--tc-color-text); }
.tc-badge--free { background: var(--tc-color-tint); }
.tc-badge--complete { background: var(--tc-blue); color: var(--tc-white); padding-left: 0.3rem; }
.tc-badge--complete::before { content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: url("../logo/lockups/svg/team-courage-complete-mark-reversed.svg") center / contain no-repeat; }
.tc-badge--new { background: var(--tc-yellow); color: var(--tc-ink); }
.tc-badge--cohort { background: var(--tc-ink); color: var(--tc-white); }
.tc-badge--live { background: var(--tc-tomato); color: var(--tc-ink); }
.tc-badge--live::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.tc-theme-ink .tc-badge--cohort { background: var(--tc-white); color: var(--tc-ink); }
/* on a blue surface the Complete badge flips to white with the blue seal, so it doesn't vanish */
:is(.tc-theme-blue, .tc-card--blue, .tc-script__say) .tc-badge--complete { background: var(--tc-white); color: var(--tc-blue-700); }
:is(.tc-theme-blue, .tc-card--blue, .tc-script__say) .tc-badge--complete::before { background-image: url("../logo/lockups/svg/team-courage-complete-mark.svg"); }
/* Compact Complete mark for tight spaces: table headers, locked content, cards, tabs. Min 16px. Pair with the word "Complete" or an aria-label. */
.tc-complete-mark { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; background: url("../logo/lockups/svg/team-courage-complete-mark.svg") center / contain no-repeat; }
.tc-complete-mark--reversed { background-image: url("../logo/lockups/svg/team-courage-complete-mark-reversed.svg"); }

/* ------------------------------------------------ tabs and segmented control (arrow keys move between options; see system/) */
.tc-tabs { display: flex; gap: var(--tc-space-1); border-bottom: var(--tc-border-strong) solid var(--tc-color-border); overflow-x: auto; scrollbar-width: none; }
.tc-tab { all: unset; cursor: pointer; padding: 0.75rem 1rem; font: var(--tc-text-label); color: var(--tc-color-text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color var(--tc-duration-fast); }
.tc-tab:hover { color: var(--tc-color-text); }
.tc-tab[aria-selected="true"] { color: var(--tc-color-text); border-color: var(--tc-color-text); }
.tc-tab:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: -3px; border-radius: var(--tc-radius-xs); }
.tc-segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--tc-radius-pill); background: var(--tc-color-tint); }
.tc-segmented button { all: unset; cursor: pointer; padding: 0.5rem 1rem; border-radius: var(--tc-radius-pill); font: var(--tc-text-label); color: var(--tc-color-text-muted); transition: color var(--tc-duration-fast), background-color var(--tc-duration-fast); }
.tc-segmented button:not([aria-pressed="true"]):hover { color: var(--tc-color-text); } /* the selected thumb keeps ink on white on every surface */
.tc-segmented button[aria-pressed="true"] { background: var(--tc-white); color: var(--tc-ink); box-shadow: var(--tc-shadow-sm); } /* white thumb on every surface, so the choice always shows */
.tc-segmented button:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: 2px; }

/* ------------------------------------------------ progress, week stepper, Courage Ladder */
.tc-progress { height: 0.5rem; border-radius: var(--tc-radius-pill); background: var(--tc-color-tint); overflow: hidden; }
.tc-progress > span { display: block; height: 100%; width: var(--value, 0%); background: var(--tc-color-primary); border-radius: inherit; }
.tc-weeks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; padding: 0; margin: 0; }
.tc-weeks li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: var(--tc-text-counter); background: var(--tc-color-tint); color: var(--tc-color-text-subtle); }
.tc-weeks li[data-state="done"] { background: var(--tc-color-selected); color: var(--tc-color-on-selected); }
.tc-weeks li[data-state="current"] { background: var(--tc-blue); color: var(--tc-white); }
.tc-ladder { counter-reset: rung; display: flex; flex-direction: column-reverse; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tc-ladder li { display: flex; align-items: center; gap: var(--tc-space-3); padding: 0.8rem 1rem; border-radius: var(--tc-radius-md);
  background: var(--tc-color-surface); border: var(--tc-border-hair) solid var(--tc-color-border); font: var(--tc-text-body-sm); color: var(--tc-color-text); }
.tc-ladder li::before { content: counter(rung); counter-increment: rung; display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--tc-color-tint); color: var(--tc-color-text-muted); font: var(--tc-text-counter); }
.tc-ladder li[data-state="done"] { color: var(--tc-color-text-subtle); }
.tc-ladder li[data-state="done"]::before { content: "\2713"; background: var(--tc-color-selected); color: var(--tc-color-on-selected); }
.tc-ladder li[data-state="next"] { border: var(--tc-border-strong) solid var(--tc-blue); font-weight: var(--tc-weight-semibold); padding: calc(0.8rem - 1px) calc(1rem - 1px); }
.tc-ladder li[data-state="next"]::before { background: var(--tc-blue); color: var(--tc-white); }
.tc-ladder li[data-state="next"]::after { content: "Next"; margin-left: auto; font: var(--tc-text-tag); color: var(--tc-blue-700); }
.tc-ladder li[data-state="goal"] { background: var(--tc-color-surface-tint); border-style: dashed; border-color: var(--tc-color-field-border); font-weight: var(--tc-weight-bold); }
.tc-ladder li[data-state="goal"]::before { content: "\2691"; background: transparent; color: var(--tc-tomato); font-size: 1.1em; }

/* ------------------------------------------------ choices: checkbox, radio, switch
   States: :hover, :checked, :focus-visible, :disabled. The label is the click target. */
.tc-check, .tc-radio { display: flex; align-items: center; gap: var(--tc-space-3); min-height: 1.75rem; font: var(--tc-text-body); cursor: pointer; }
.tc-check input, .tc-radio input { appearance: none; margin: 0; flex: none; width: 1.375rem; height: 1.375rem; border: var(--tc-border-control) solid var(--tc-color-field-border); background: var(--tc-color-field); display: grid; place-items: center; cursor: pointer; transition: border-color var(--tc-duration-fast), background-color var(--tc-duration-fast); }
.tc-check input { border-radius: var(--tc-radius-xs); }
.tc-radio input { border-radius: 50%; }
.tc-check:hover input:not(:checked):not(:disabled), .tc-radio:hover input:not(:checked):not(:disabled) { border-color: var(--tc-color-field-border-hover); }
.tc-check input:checked { background: var(--tc-blue); border-color: var(--tc-blue); }
.tc-check input:checked::after { content: ""; width: 0.4rem; height: 0.72rem; border: solid var(--tc-white); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.tc-radio input:checked { border-color: var(--tc-blue); }
.tc-radio input:checked::after { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--tc-blue); }
.tc-check input:focus-visible, .tc-radio input:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: 2px; }
.tc-switch { display: inline-flex; align-items: center; gap: var(--tc-space-3); cursor: pointer; font: var(--tc-text-body); }
.tc-switch input { appearance: none; margin: 0; width: 3rem; height: 1.75rem; border-radius: var(--tc-radius-pill); background: var(--tc-color-field-border); position: relative; cursor: pointer; transition: background-color var(--tc-duration-base); }
.tc-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.75rem - 6px); height: calc(1.75rem - 6px); border-radius: 50%; background: var(--tc-white); transition: transform var(--tc-duration-base) var(--tc-ease-bounce); }
.tc-switch input:checked { background: var(--tc-blue); }
.tc-switch input:checked::after { transform: translateX(1.25rem); }
.tc-switch input:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: 2px; }
:is(.tc-check, .tc-radio, .tc-switch):has(input:disabled) { cursor: not-allowed; color: var(--tc-color-text-subtle); }
.tc-check input:disabled, .tc-radio input:disabled { border-color: var(--tc-mist-300); background: var(--tc-mist-50); cursor: not-allowed; }
.tc-check input:disabled:checked { background: var(--tc-mist-300); }
.tc-switch input:disabled { background: var(--tc-mist-200); cursor: not-allowed; }
.tc-switch input:disabled:checked { background: var(--tc-blue-200); }

/* ------------------------------------------------ lists */
.tc-list { flex-shrink: 0; min-height: min-content; list-style: none; margin: 0; padding: 0; border-radius: var(--tc-radius-md); background: var(--tc-color-surface); border: var(--tc-border-hair) solid var(--tc-color-border); overflow: hidden; } /* overflow:hidden drops a grid or flex item's minimum to 0: keep the list its own height */
.tc-list > li + li { border-top: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-list-item { display: flex; align-items: center; gap: var(--tc-space-4); padding: var(--tc-space-4) var(--tc-space-5); color: inherit; text-decoration: none; min-height: 3.5rem; }
a.tc-list-item:hover { background: var(--tc-color-surface-tint); color: inherit; }
a.tc-list-item:focus-visible { outline-offset: -3px; }
.tc-list-item__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--tc-radius-sm); background: var(--tint, var(--tc-color-tint)); }
.tc-list-item__icon img, .tc-list-item__icon .tc-icon { width: 1.5rem; height: 1.5rem; }
.tc-list-item__body { flex: 1; min-width: 0; }
.tc-list-item__title { font: var(--tc-text-label); display: block; }
.tc-list-item__meta { display: block; font: var(--tc-text-caption); color: var(--tc-color-text-subtle); } /* block, so a wrapped line keeps the caption's own line height */

/* ------------------------------------------------ feed items (home feed; finite, no comments) */
.tc-feed { display: grid; gap: var(--tc-space-4); }
.tc-feed-item { display: grid; gap: var(--tc-space-3); padding: var(--tc-space-5); border-radius: var(--tc-radius-md); background: var(--tc-color-surface); border: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-feed-item__kind { display: flex; align-items: center; gap: var(--tc-space-2); font: var(--tc-text-caption); font-weight: var(--tc-weight-semibold); color: var(--tc-color-text-subtle); }
.tc-kind-icon { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--tc-radius-xs); background: var(--tint, var(--tc-color-tint)); }
.tc-kind-icon img, .tc-kind-icon .tc-icon { width: 1.1rem; height: 1.1rem; }
.tc-feed-item__title { font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); margin: 0; }
.tc-feed-item__media { aspect-ratio: 16 / 9; border-radius: var(--tc-radius-md); overflow: hidden; background: var(--tc-color-well); display: grid; place-items: center; }
.tc-feed-item__media img { width: 100%; height: 100%; object-fit: cover; }
.tc-feed-item__actions { display: flex; gap: var(--tc-space-2); flex-wrap: wrap; }
/* Kind on the feed item sets the icon tint: --deck, --answer, --win, --live (or data-kind on the item) */
.tc-feed-item--deck { --tint: var(--tc-kind-deck); }
.tc-feed-item--answer { --tint: var(--tc-kind-answer); }
.tc-feed-item--win { --tint: var(--tc-kind-win); }
.tc-feed-item--live { --tint: var(--tc-kind-live); }
.tc-reaction { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.45rem 0.85rem; border-radius: var(--tc-radius-pill);
  font: var(--tc-text-tag); background: var(--tc-color-tint); color: var(--tc-color-text); transition: background-color var(--tc-duration-fast); }
.tc-reaction[aria-pressed="true"] { background: var(--tc-color-selected); color: var(--tc-color-on-selected); }
.tc-reaction:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: 2px; }
.tc-done { text-align: center; padding: var(--tc-space-10) var(--tc-space-5); }
.tc-done img { width: 12rem; margin-inline: auto; }

/* ------------------------------------------------ flash card (decks: 4 card types). Always white; the top rule carries the type. */
.tc-flashcard { position: relative; aspect-ratio: 4 / 5; max-width: 22rem; border-radius: var(--tc-radius-lg); padding: var(--tc-space-6); display: flex; flex-direction: column;
  border: var(--tc-border-hair) solid var(--tc-color-border); box-shadow: var(--tc-shadow-lift); }
.tc-flashcard__type { align-self: flex-start; }
.tc-flashcard__text { margin: auto 0; font: var(--tc-text-quote); letter-spacing: var(--tc-text-quote-tracking); text-wrap: balance; }
.tc-flashcard__foot { display: flex; justify-content: space-between; align-items: center; font: var(--tc-text-caption); color: var(--tc-color-text-subtle); }
/* the type colour is the card's own top border, so it follows the card's curve exactly */
.tc-flashcard { border-top: 6px solid var(--rule, var(--tc-color-border)); }
.tc-flashcard[data-type="understand"] { --rule: var(--tc-ink); }
.tc-flashcard[data-type="say"] { --rule: var(--tc-blue); }
.tc-flashcard[data-type="not"] { --rule: var(--tc-tomato); }
.tc-flashcard[data-type="what"] { --rule: var(--tc-yellow); }

/* ------------------------------------------------ script (the same kit every time: say this, not that, if you're stuck) */
.tc-script { display: grid; gap: var(--tc-space-3); }
.tc-script__say { padding: var(--tc-space-6); border-radius: var(--tc-radius-md); }
.tc-script__say q, .tc-script__say blockquote { display: block; margin: var(--tc-space-2) 0 0; font: var(--tc-text-quote); letter-spacing: var(--tc-text-quote-tracking); quotes: "\201C" "\201D"; }
.tc-script__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--tc-space-3); }
.tc-script__not, .tc-script__stuck { padding: var(--tc-space-4) 0 0; border-top: var(--tc-border-hair) solid var(--tc-color-border); font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-script__label { font: var(--tc-text-tag); display: block; margin-bottom: var(--tc-space-1); color: var(--tc-color-text-subtle); }
.tc-script__not .tc-script__label { color: var(--tc-color-accent-text); }

/* ------------------------------------------------ SOS and crisis information (never paywalled, never sold against) */
.tc-sos { display: grid; gap: var(--tc-space-4); padding: var(--tc-space-6); border-radius: var(--tc-radius-lg); }
.tc-sos__step { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--tc-space-3); align-items: start; }
.tc-sos__step > b { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--tc-white-a12); color: var(--tc-color-text); font: var(--tc-text-counter); }
/* the crisis line: on every page and every tier, always free, never next to an offer. .tc-crisis-line is a deprecated alias. */
.tc-crisis, .tc-crisis-line { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--tc-space-3); padding: var(--tc-space-4) var(--tc-space-5); border-radius: var(--tc-radius-sm);
  background: var(--tc-tomato-50); border-left: 4px solid var(--tc-tomato); color: var(--tc-ink); font: var(--tc-text-body-sm); }
.tc-crisis p, .tc-crisis-line p { margin: 0; }
.tc-crisis .tc-icon, .tc-crisis-line .tc-icon { color: var(--tc-tomato-700); margin-top: 0.15em; }
.tc-crisis strong, .tc-crisis-line strong { font-weight: var(--tc-weight-extrabold); }
:is(.tc-sos, .tc-theme-ink) :is(.tc-crisis, .tc-crisis-line) { background: var(--tc-tomato-a14); color: var(--tc-color-text-muted); }
:is(.tc-sos, .tc-theme-ink) :is(.tc-crisis, .tc-crisis-line) strong { color: var(--tc-color-text); }
:is(.tc-sos, .tc-theme-ink) :is(.tc-crisis, .tc-crisis-line) .tc-icon { color: var(--tc-tomato); }
.tc-sos-button { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6rem 1.1rem 0.6rem 0.7rem; border-radius: var(--tc-radius-pill);
  box-shadow: inset 0 0 0 var(--tc-border-hair) var(--tc-color-border); font: var(--tc-text-button); text-decoration: none; --tc-icon-knockout: var(--tc-white); }
.tc-sos-button:hover { box-shadow: inset 0 0 0 var(--tc-border-hair) var(--tc-color-field-border); color: var(--tc-color-text); }
.tc-sos-button .tc-icon { color: var(--tc-tomato); }

/* ------------------------------------------------ AI coach (adults only; always labelled as AI, always links to its source) */
.tc-chat { display: grid; gap: var(--tc-space-3); }
.tc-bubble { max-width: 85%; padding: var(--tc-space-3) var(--tc-space-4); border-radius: var(--tc-radius-lg); font: var(--tc-text-body-sm); }
.tc-bubble--parent { justify-self: end; background: var(--tc-blue-50); color: var(--tc-ink); border-bottom-right-radius: var(--tc-radius-xs); }
.tc-bubble--coach { justify-self: start; background: var(--tc-color-surface); color: var(--tc-color-text); border: var(--tc-border-hair) solid var(--tc-color-border); border-bottom-left-radius: var(--tc-radius-xs); }
.tc-bubble__label { display: flex; align-items: center; gap: 0.35em; font: var(--tc-text-caption); font-weight: var(--tc-weight-bold); color: var(--tc-color-text-subtle); margin-bottom: var(--tc-space-1); }
.tc-bubble__source { display: flex; width: fit-content; align-items: center; gap: 0.35em; margin-top: var(--tc-space-2); padding-block: 0.25rem; font: var(--tc-text-caption); font-weight: var(--tc-weight-bold); }
.tc-composer { display: flex; gap: var(--tc-space-2); align-items: center; padding: var(--tc-space-2); border-radius: var(--tc-radius-pill); background: var(--tc-color-field); border: var(--tc-border-control) solid var(--tc-color-field-border); transition: border-color var(--tc-duration-fast), box-shadow var(--tc-duration-fast); }
.tc-composer input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: var(--tc-text-body); padding: 0.5rem 0.75rem; color: var(--tc-color-field-text); } /* the % width lets the field shrink: an input's own width would set the composer's minimum */
.tc-composer input:focus { outline: none; }
.tc-composer:focus-within { border-color: var(--tc-color-field-focus); box-shadow: 0 0 0 4px var(--tc-color-field-ring); }
.tc-icon-btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--tc-color-primary); color: var(--tc-color-on-primary); transition: background-color var(--tc-duration-base); }
.tc-icon-btn:hover { background: var(--tc-color-primary-hover); }
.tc-icon-btn:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: 2px; }
.tc-icon-btn--soft { background: var(--tc-color-tint); color: var(--tc-color-text); }
.tc-icon-btn--soft:hover { background: var(--tc-color-surface-sunken); }
.tc-icon-btn:disabled { background: var(--tc-mist-200); color: var(--tc-ink-500); cursor: not-allowed; }

/* ------------------------------------------------ app chrome: top bar and bottom tab bar */
.tc-appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-3); padding: var(--tc-space-3) var(--tc-space-4); }
.tc-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); padding: var(--tc-space-2) var(--tc-space-2) calc(var(--tc-space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--tc-color-surface); border-top: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-tabbar a { display: grid; justify-items: center; gap: 2px; padding: var(--tc-space-2) 0; font: var(--tc-text-tab); color: var(--tc-color-text-subtle); text-decoration: none; border-radius: var(--tc-radius-md); }
.tc-tabbar a .tc-icon { width: 1.5rem; height: 1.5rem; }
.tc-tabbar a[aria-current="page"] { color: var(--tc-color-text); }
.tc-tabbar a[aria-current="page"] .tc-icon { color: var(--tc-blue); }
.tc-tabbar a.tc-tabbar__sos .tc-icon { color: var(--tc-tomato); }

/* ------------------------------------------------ toast, dialog, accordion, avatar */
.tc-toast { display: inline-flex; align-items: center; gap: var(--tc-space-3); padding: 0.85rem 1.1rem; border-radius: var(--tc-radius-md); font: var(--tc-text-body-sm); box-shadow: var(--tc-shadow-lift); }
.tc-toast .tc-icon { color: var(--tc-blue-200); }
.tc-dialog { border: 0; padding: var(--tc-space-8); border-radius: var(--tc-radius-lg); max-width: min(32rem, calc(100vw - 2rem)); box-shadow: var(--tc-shadow-lift); }
.tc-dialog::backdrop { background: var(--tc-overlay); }
.tc-accordion { border-top: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-accordion details { border-bottom: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-accordion summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--tc-space-4); padding: var(--tc-space-5) 0; font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); transition: color var(--tc-duration-fast); }
.tc-accordion summary::-webkit-details-marker { display: none; }
.tc-accordion summary:hover { color: var(--tc-color-link); }
/* the + that turns into an ×: drawn, so it never depends on a font's glyph */
.tc-accordion summary::after { content: ""; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background-color: var(--tc-color-tint);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0.75rem 2px, 2px 0.75rem; background-position: center; background-repeat: no-repeat;
  transition: transform var(--tc-duration-base) var(--tc-ease-standard), background-color var(--tc-duration-base); }
.tc-accordion details[open] summary::after { transform: rotate(45deg); background-color: var(--tc-color-selected); color: var(--tc-color-on-selected); }
.tc-accordion details > :not(summary) { margin: 0 0 var(--tc-space-5); color: var(--tc-color-text-muted); max-width: 58ch; }
.tc-avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tc-color-tint); font: var(--tc-text-label); font-weight: var(--tc-weight-bold); color: var(--tc-color-text); flex: none; }
/* ============================================================ WEB PATTERNS (site and web app)
   Source: tools/web_patterns.css, appended to css/team-courage.css by build_tokens.py.
   Page stylesheets hold layout only. Every pattern a page needs lives here, so the site, the
   web app and the guide draw from one set. Reference: system/index.html.
   Breakpoints (the only five): xs 400 · sm 520 · md 760 · lg 1024 · xl 1200.
   Write them as (max-width: bp - 1px) or (min-width: bp). tools/lint_system.py checks it.  */

/* ------------------------------------------------ page rhythm */
.tc-band, .tc-section { padding-block: var(--tc-section); } /* .tc-section: deprecated alias */
.tc-band--tight, .tc-section--tight { padding-block: var(--tc-section-tight); }
.tc-band--flush-top { padding-top: 0; }
.tc-head { max-width: var(--tc-container-narrow); margin-bottom: var(--tc-head-gap); }
.tc-head > h1, .tc-head > h2 { margin-bottom: 0; }
.tc-head .tc-lead { margin: var(--tc-space-4) 0 0; }
.tc-head--center { margin-inline: auto; text-align: center; }
.tc-head--center .tc-lead { margin-inline: auto; }
.tc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--tc-gutter); align-items: center; }
.tc-grid > * { min-width: 0; }
.tc-grid--start { align-items: start; }
.tc-col-4 { grid-column-end: span 4; } .tc-col-5 { grid-column-end: span 5; } .tc-col-6 { grid-column-end: span 6; } .tc-col-7 { grid-column-end: span 7; } .tc-col-8 { grid-column-end: span 8; }
.tc-col-push-7 { grid-column-start: 7; } .tc-col-push-8 { grid-column-start: 8; } .tc-col-push-9 { grid-column-start: 9; }
@media (max-width: 1023px) { .tc-grid { grid-template-columns: 1fr; gap: var(--tc-space-8); } .tc-grid > * { grid-column: auto !important; } }
.tc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-4) var(--tc-space-6); margin-top: var(--tc-space-8); }
.tc-facts { display: flex; flex-wrap: wrap; gap: var(--tc-space-2) var(--tc-space-5); margin: var(--tc-space-5) 0 0; padding: 0; list-style: none; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-facts li { display: inline-flex; align-items: center; gap: var(--tc-space-2); }
.tc-facts li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--tc-color-primary); flex: none; }
.tc-link { padding-block: 0.2rem; font-weight: var(--tc-weight-semibold); color: var(--tc-color-link); text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.tc-link:hover { text-decoration-color: currentColor; }
.tc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tc-skip { position: absolute; left: 1rem; top: -4rem; z-index: var(--tc-z-skip); padding: 0.75rem 1rem; border-radius: var(--tc-radius-sm); }
.tc-skip:focus { top: 1rem; }

/* ------------------------------------------------ site header
   Over a coloured first section the build adds <body class="tc-hero-blue|ink|yellow|pink">; the header then takes
   that section's theme (build_tokens.THEME_SELECTORS) until the page scrolls. */
.tc-header { position: sticky; top: 0; z-index: var(--tc-z-header); background: color-mix(in srgb, var(--tc-color-bg) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); transition: background-color var(--tc-duration-slow), box-shadow var(--tc-duration-slow); }
.tc-header.is-scrolled { box-shadow: 0 1px 0 var(--tc-color-border); }
.tc-header__in { display: flex; align-items: center; gap: var(--tc-space-8); min-height: 5.5rem; }
.tc-header .tc-brand { --logo-w: 9.5rem; }
.tc-header__nav { display: flex; gap: var(--tc-space-6); margin-left: auto; }
.tc-header__nav a { position: relative; font: var(--tc-text-nav); color: var(--tc-color-text); text-decoration: none; padding: 0.5rem 0; transition: color var(--tc-duration-slow); }
.tc-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--tc-duration-slow) var(--tc-ease-standard); }
.tc-header__nav a:hover::after, .tc-header__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.tc-header__login { padding-block: 0.65rem; font: var(--tc-text-label); color: var(--tc-color-text); text-decoration: none; transition: color var(--tc-duration-slow); }
.tc-header__login:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.tc-header__note { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em; font: var(--tc-text-nav); color: var(--tc-color-text-muted); }
.tc-header--plain { position: relative; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tc-brand__rev { position: absolute; inset: 0; opacity: 0; transition: opacity var(--tc-duration-slow); }
.tc-brand__img { position: relative; display: block; }
:is(.tc-hero-ink, .tc-hero-blue, .tc-hero-yellow, .tc-hero-pink) .tc-header:not(.is-scrolled) { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
:is(.tc-hero-ink, .tc-hero-blue) .tc-header:not(.is-scrolled) .tc-brand__img > img:first-child { opacity: 0; }
:is(.tc-hero-ink, .tc-hero-blue) .tc-header:not(.is-scrolled) .tc-brand__rev { opacity: 1; }
/* the header's own button stays quiet over a dark hero, so it never competes with the hero's yellow one */
:is(.tc-hero-ink, .tc-hero-blue) .tc-header:not(.is-scrolled) .tc-header__cta { --_bg: var(--tc-white); --_fg: var(--tc-ink); }
:is(.tc-hero-ink, .tc-hero-blue) .tc-header:not(.is-scrolled) .tc-header__cta:hover { --_bg: var(--tc-blue-50); }
/* phone and tablet menu: <button class="tc-header__menu" aria-expanded="false" aria-controls="site-nav"> opens the nav as a panel under the header */
.tc-header__menu { display: none; }
.tc-header__nav-login { display: none; }
@media (max-width: 1023px) {
  .tc-header__nav { display: none; }
  .tc-header__login { margin-left: auto; }
  .tc-header__menu { display: inline-grid; place-items: center; flex: none; width: var(--tc-control-sm); height: var(--tc-control-sm); padding: 0; border-radius: var(--tc-radius-pill); border: var(--tc-border-strong) solid currentColor; background: transparent; color: var(--tc-color-text); cursor: pointer; }
  .tc-header__menu:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: var(--tc-focus-offset); }
  .tc-header__menu .tc-icon { width: 1.25rem; height: 1.25rem; }
  .tc-header__menu[aria-expanded="true"] .tc-header__menu-open, .tc-header__menu[aria-expanded="false"] .tc-header__menu-close { display: none; }
  .tc-header.is-open { background: var(--tc-color-bg); box-shadow: 0 1px 0 var(--tc-color-border); }
  .tc-header.is-open .tc-header__nav { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 0; margin: 0; padding: 0 var(--tc-gutter) var(--tc-space-6); background: var(--tc-color-bg); box-shadow: 0 1px 0 var(--tc-color-border); }
  .tc-header.is-open .tc-header__nav a { font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); padding: 0.9rem 0; }
  .tc-header.is-open .tc-header__nav a + a { border-top: var(--tc-border-hair) solid var(--tc-color-border); }
  .tc-header.is-open .tc-header__nav a::after { display: none; }
}
@media (max-width: 519px) { .tc-header__in { min-height: 4.25rem; gap: var(--tc-space-4); } .tc-header .tc-brand { --logo-w: 7.25rem; } .tc-header .tc-brand__by { display: none; } .tc-header__note { display: none; } }
@media (max-width: 399px) { .tc-header__login { display: none; } .tc-header__cta { margin-left: auto; } .tc-header.is-open .tc-header__nav .tc-header__nav-login { display: block; } }

/* ------------------------------------------------ site footer (put it in .tc-theme-ink; the crisis line comes first) */
.tc-footer { padding-block: var(--tc-section-tight) var(--tc-space-10); }
.tc-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--tc-space-8); margin-top: var(--tc-section-tight); }
.tc-footer__grid nav { display: grid; gap: var(--tc-space-1); align-content: start; }
.tc-footer__title, .tc-footer__grid h4 { font: var(--tc-text-tag); color: var(--tc-color-text-subtle); margin: 0 0 var(--tc-space-2); }
.tc-footer__grid a { padding-block: 0.3rem; color: var(--tc-color-text); text-decoration: none; font: var(--tc-text-body-sm); opacity: 0.88; }
.tc-footer__grid a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.2em; }
.tc-footer__grid p { color: var(--tc-color-text-muted); font: var(--tc-text-body-sm); }
.tc-footer .tc-brand { --logo-w: 10rem; margin-bottom: var(--tc-space-4); }
.tc-footer__legal { margin: var(--tc-space-10) 0 0; padding-top: var(--tc-space-5); border-top: var(--tc-border-hair) solid var(--tc-color-border); font: var(--tc-text-caption); color: var(--tc-color-text-subtle); padding-inline-end: max(0px, 100% - var(--tc-container-wide)); } /* tc-lint-ignore pct-padding: the rule spans the footer, the text keeps a readable measure */
@media (max-width: 759px) { .tc-footer__grid { grid-template-columns: 1fr 1fr; } .tc-footer__grid > div { grid-column: 1 / -1; } }

/* ------------------------------------------------ heroes */
.tc-hero { padding-block: clamp(2rem, 1.25rem + 2.5vw, 4rem) var(--tc-section); }
.tc-hero .tc-display, .tc-hero h1 { margin: 0; text-wrap: balance; }
.tc-hero .tc-lead { margin: var(--tc-space-5) 0 0; }
.tc-hero__photo { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: var(--tc-radius-lg); background: var(--tc-color-well); box-shadow: var(--tc-offset) var(--tc-offset) 0 0 var(--tc-color-partner); }
.tc-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tc-hero__art { aspect-ratio: 1 / 0.96; border-radius: var(--tc-radius-lg); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: var(--well, var(--tc-color-well)); box-shadow: var(--tc-offset) var(--tc-offset) 0 0 var(--tc-color-partner); }
.tc-hero__art img { width: 80%; height: 80%; object-fit: contain; } /* sized to the well itself: % padding would follow the parent's width */
.tc-hero__note { margin: var(--tc-space-4) 0 0; font: var(--tc-text-caption); color: var(--tc-color-text-subtle); }
.tc-chip-date { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem 0.4rem 0.45rem; border-radius: var(--tc-radius-pill); background: var(--tc-color-tint); font: var(--tc-text-nav); margin-bottom: var(--tc-space-6); }
.tc-theme-ink .tc-chip-date { background: var(--tc-white-a12); }
.tc-theme-blue .tc-chip-date { background: var(--tc-blue-700); }
.tc-chip-date b { background: var(--tc-white); color: var(--tc-ink); padding: 0.35rem 0.65rem; border-radius: var(--tc-radius-pill); font-weight: var(--tc-weight-bold); }
/* one motion moment per page: the hero settles in */
.js .tc-hero [data-settle] { animation: tcSettle var(--tc-duration-enter) var(--tc-ease-standard) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes tcSettle { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 1023px) { .tc-hero__art { max-width: 22rem; aspect-ratio: 5 / 4; } }

/* ------------------------------------------------ credentials row: one quiet sentence row */
.tc-creds { display: flex; flex-wrap: wrap; gap: var(--tc-space-3) var(--tc-space-8); padding-block: var(--tc-space-5); border-top: var(--tc-border-hair) solid var(--tc-color-border); font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-creds > span { display: inline-block; padding-left: 1.5rem; position: relative; }
.tc-creds > span > .tc-icon { position: absolute; left: 0; top: 0.1em; }
.tc-creds .tc-icon { color: var(--tc-blue); }
.tc-creds b { color: var(--tc-color-text); font-weight: var(--tc-weight-semibold); }

/* ------------------------------------------------ moments list (the home page's editorial list) */
.tc-moments { list-style: none; margin: 0; padding: 0; border-top: var(--tc-border-strong) solid var(--tc-color-text); }
.tc-moment { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--tc-space-5); align-items: center; padding: var(--tc-space-4) 0; border-bottom: var(--tc-border-hair) solid var(--tc-color-border); color: var(--tc-color-text); text-decoration: none; }
.tc-moment__thumb { width: 4rem; height: 3.25rem; border-radius: var(--tc-radius-sm); background: var(--well, var(--tc-color-well)); display: grid; place-items: center; }
.tc-moment__thumb img { width: 3.1rem; height: 2.6rem; object-fit: contain; }
.tc-moment__name { display: block; font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); }
.tc-moment__line { display: block; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); margin-top: 0.15rem; }
.tc-moment__go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: var(--tc-border-control) solid var(--tc-color-text); transition: background-color var(--tc-duration-base), color var(--tc-duration-base), border-color var(--tc-duration-base); }
.tc-moment:hover .tc-moment__go, .tc-moment:focus-visible .tc-moment__go { background: var(--tc-blue); border-color: var(--tc-blue); color: var(--tc-white); }
.tc-moment:hover .tc-moment__name { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
@media (max-width: 519px) { .tc-moment { grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--tc-space-3); } .tc-moment__thumb { width: 3.25rem; height: 2.75rem; } .tc-moment__go { width: 2.4rem; height: 2.4rem; } }

/* ------------------------------------------------ feature grid (icon, title, line); data-kind tints the icon */
.tc-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tc-space-8) var(--tc-gutter); }
.tc-features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-feature { min-width: 0; padding-top: var(--tc-space-5); border-top: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-feature__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--tc-radius-sm); background: var(--tint, var(--tc-color-partner)); margin-bottom: var(--tc-space-4); }
.tc-feature__icon img, .tc-feature__icon .tc-icon { width: 1.75rem; height: 1.75rem; }
.tc-feature h3 { font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); margin: 0 0 var(--tc-space-2); }
.tc-feature p { margin: 0; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-theme-blue .tc-feature, .tc-theme-ink .tc-feature { border-top-color: var(--tc-white-a25); }
@media (max-width: 1023px) { .tc-features, .tc-features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .tc-features, .tc-features--3 { grid-template-columns: 1fr; gap: var(--tc-space-5); } .tc-feature { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0 var(--tc-space-4); } .tc-feature__icon { width: 2.75rem; height: 2.75rem; grid-row: span 2; margin: 0; } }

/* ------------------------------------------------ the offer ladder: one plan card for every price
   .tc-price, .tc-price--featured and .tc-price__amount are deprecated aliases (remove in v4). */
.tc-plans { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--tc-space-4); align-items: stretch; padding-top: 0.8rem; }
.tc-plan, .tc-price { position: relative; display: flex; flex-direction: column; gap: var(--tc-space-4); padding: var(--tc-card-pad); border-radius: var(--tc-radius-md); border: var(--tc-border-hair) solid var(--tc-color-border); min-width: 0; }
.tc-plan__tag { position: absolute; top: 0; left: var(--tc-card-pad); transform: translateY(-50%); }
.tc-plan__name { font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); margin: 0; }
.tc-plan__price, .tc-price__amount { font: var(--tc-text-price); letter-spacing: var(--tc-text-price-tracking); }
.tc-plan__price small, .tc-price__amount small { display: block; margin-top: 0.4rem; font: var(--tc-text-body-sm); font-weight: var(--tc-weight-medium); letter-spacing: 0; color: var(--tc-color-text-muted); }
.tc-plan__best { margin: 0; padding-top: var(--tc-space-4); border-top: var(--tc-border-hair) solid var(--tc-color-border); font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-plan__best b { display: block; color: var(--tc-color-text); font-weight: var(--tc-weight-semibold); margin-bottom: 0.1rem; }
.tc-plan ul, .tc-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-plan li, .tc-price li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; }
.tc-plan li::before, .tc-price li::before { content: "\2713"; font-weight: var(--tc-weight-bold); color: var(--tc-blue); }
.tc-plan .tc-btn, .tc-plan .tc-link, .tc-price .tc-btn { margin-top: auto; align-self: flex-start; }
.tc-plan .tc-link { min-height: var(--tc-control-md); display: inline-flex; align-items: center; }
.tc-plan--featured, .tc-price--featured { border: var(--tc-border-strong) solid var(--tc-blue); box-shadow: var(--tc-offset) var(--tc-offset) 0 0 var(--tc-color-partner); }
.tc-plan--dark { background: var(--tc-color-bg); border-color: var(--tc-color-bg); }
.tc-plan--dark li::before { color: var(--tc-blue-200); }
.tc-plans__foot { margin-top: var(--tc-space-6); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tc-space-3) var(--tc-space-8); font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
@media (max-width: 1199px) { .tc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .tc-plans { grid-template-columns: 1fr; } }
/* the price box beside an offer (coaching, deep dive) */
.tc-pricebox { position: sticky; top: 7rem; display: grid; gap: var(--tc-space-4); padding: var(--tc-card-pad); border-radius: var(--tc-radius-md); border: var(--tc-border-strong) solid var(--tc-color-text); box-shadow: var(--tc-offset) var(--tc-offset) 0 0 var(--tc-color-partner); }
.tc-pricebox__amount { font: var(--tc-text-price-lg); letter-spacing: var(--tc-text-price-lg-tracking); }
.tc-pricebox__amount small { display: block; margin-top: 0.5rem; font: var(--tc-text-body-sm); font-weight: var(--tc-weight-medium); letter-spacing: 0; color: var(--tc-color-text-muted); }
.tc-pricebox__alt { margin: calc(var(--tc-space-2) * -1) 0 0; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-pricebox ul { list-style: none; padding: var(--tc-space-4) 0 0; margin: 0; display: grid; gap: 0.5rem; font: var(--tc-text-body-sm); border-top: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-pricebox li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; }
.tc-pricebox li::before { content: "\2713"; font-weight: var(--tc-weight-bold); color: var(--tc-blue); }
.tc-pricebox .tc-btn { width: 100%; }
.tc-pricebox__note { margin: 0; font: var(--tc-text-caption); color: var(--tc-color-text-muted); }
.tc-pricebox__note strong { color: var(--tc-color-text); }
@media (max-width: 1023px) { .tc-pricebox { position: static; } }

/* ------------------------------------------------ stack list (what's inside) */
.tc-stack-list { list-style: none; padding: 0; margin: 0; border-top: var(--tc-border-strong) solid var(--tc-color-text); }
.tc-stack-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--tc-space-4); align-items: start; padding: var(--tc-space-5) 0; border-bottom: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-stack-list li > div { min-width: 0; }
.tc-stack-list img { width: 2.5rem; height: 2.5rem; }
.tc-stack-list h3 { font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); margin: 0.1rem 0 0.25rem; }
.tc-stack-list p { margin: 0; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }

/* ------------------------------------------------ FAQ layout (title left, .tc-accordion right) */
.tc-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--tc-gutter); align-items: start; }
.tc-faq > .tc-faq__head { grid-column: 1 / span 4; position: sticky; top: 7rem; }
.tc-faq > .tc-accordion { grid-column: 6 / span 7; }
.tc-faq__head p { margin: var(--tc-space-4) 0 0; color: var(--tc-color-text-muted); }
@media (max-width: 1023px) { .tc-faq { grid-template-columns: 1fr; } .tc-faq > .tc-faq__head, .tc-faq > .tc-accordion { grid-column: 1 / -1; position: static; } }

/* ------------------------------------------------ final band and sticky mobile action */
.tc-final__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tc-space-8) var(--tc-gutter); align-items: center; }
.tc-final__in > div { max-width: 40rem; }
.tc-final__art { width: clamp(11rem, 8rem + 9vw, 18rem); aspect-ratio: 1; object-fit: contain; padding: var(--tc-space-6); border-radius: var(--tc-radius-lg); background: var(--tc-color-well); box-shadow: var(--tc-offset) var(--tc-offset) 0 0 var(--tc-color-partner); } /* art always sits in a well: a yellow figure on a yellow band disappears */
@media (max-width: 759px) { .tc-final__in { grid-template-columns: 1fr; } .tc-final__art { width: 10rem; order: -1; } }
.tc-sticky { position: fixed; z-index: var(--tc-z-sticky); left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-3); padding: 0.6rem 0.6rem 0.6rem 1.1rem; border-radius: var(--tc-radius-md); box-shadow: var(--tc-shadow-float); transition: transform var(--tc-duration-slow) var(--tc-ease-standard), opacity var(--tc-duration-slow); }
.tc-sticky[hidden] { display: flex; transform: translateY(140%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform var(--tc-duration-slow) var(--tc-ease-standard), opacity var(--tc-duration-slow), visibility 0s var(--tc-duration-slow); }
.tc-sticky { flex-wrap: wrap; }
.tc-sticky__text { flex: 1 1 9rem; min-width: 0; font: var(--tc-text-caption); color: var(--tc-color-text-muted); } /* on the narrowest phones the button drops below rather than squeezing the text */
.tc-sticky__text b { display: block; font: var(--tc-text-label); font-weight: var(--tc-weight-bold); color: var(--tc-color-text); }
.tc-sticky .tc-btn { flex: none; }
@media (min-width: 1024px) { .tc-sticky { display: none !important; } }

/* ------------------------------------------------ topic page (deep dive) */
.tc-crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 var(--tc-space-6); padding: 0; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--tc-color-text-subtle); }
.tc-crumbs a { color: inherit; }
.tc-answer { padding: var(--tc-card-pad); border-radius: var(--tc-radius-md); border: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-answer h2 { font: var(--tc-text-eyebrow); color: var(--tc-color-text-subtle); margin: 0 0 var(--tc-space-3); }
.tc-answer p { margin: 0; font: var(--tc-text-lead); font-weight: var(--tc-weight-medium); max-width: none; }
.tc-prose { margin-top: var(--tc-space-10); }
.tc-prose h2 { font: var(--tc-text-h3); letter-spacing: var(--tc-text-h3-tracking); margin: 0 0 var(--tc-space-3); }
.tc-prose * + h2 { margin-top: var(--tc-space-10); }
.tc-prose p { color: var(--tc-color-text-muted); }
.tc-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--tc-space-4); }
.tc-topics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-topic { flex-shrink: 0; display: grid; grid-template-rows: auto 1fr; border-radius: var(--tc-radius-md); border: var(--tc-border-hair) solid var(--tc-color-border); text-decoration: none; overflow: hidden; transition: transform var(--tc-duration-slow) var(--tc-ease-standard), box-shadow var(--tc-duration-slow); }
.tc-topic:hover { transform: translate(-3px, -3px); box-shadow: var(--tc-offset-lift) var(--tc-offset-lift) 0 0 var(--tc-color-partner); color: var(--tc-color-text); }
.tc-topic__art { aspect-ratio: 16 / 10; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 8% 18%; background: var(--well, var(--tc-color-well)); } /* tc-lint-ignore: spans the full card, so its parent's width is its own */
.tc-topic__art img { width: 100%; height: 100%; object-fit: contain; }
.tc-topic__body { padding: var(--tc-space-4) var(--tc-space-5) var(--tc-space-5); display: grid; gap: 0.25rem; align-content: start; }
.tc-topic__body b { font: var(--tc-text-h4); letter-spacing: var(--tc-text-h4-tracking); }
.tc-topic__body span { font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
@media (max-width: 759px) { .tc-topics--3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------ sign-up card (reset, masterclass): always white */
.tc-signup { display: grid; gap: var(--tc-space-4); padding: var(--tc-card-pad); border-radius: var(--tc-radius-md); border: var(--tc-border-strong) solid var(--tc-ink); box-shadow: var(--tc-offset) var(--tc-offset) 0 0 var(--tc-color-partner); }
.tc-signup h2 { font: var(--tc-text-h3); letter-spacing: var(--tc-text-h3-tracking); margin: 0; }
.tc-signup .tc-btn { width: 100%; }
.tc-signup__fields { display: grid; gap: var(--tc-space-4); }
.tc-signup__done { display: none; padding: var(--tc-space-5); border-radius: var(--tc-radius-sm); background: var(--tc-success-wash); }
.tc-signup.is-done .tc-signup__done { display: block; }
.tc-signup.is-done .tc-signup__fields { display: none; }
.tc-privacy { display: flex; gap: 0.55rem; align-items: flex-start; font: var(--tc-text-caption); color: var(--tc-color-text-subtle); margin: 0; }
.tc-privacy .tc-icon { margin-top: 0.1em; }

/* ------------------------------------------------ choice cards (onboarding, checkout). States: hover, checked, focus, disabled */
.tc-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--tc-space-3); border: 0; padding: 0; margin: 0; }
.tc-opt { position: relative; display: flex; align-items: center; gap: var(--tc-space-4); padding: var(--tc-space-4) var(--tc-space-5); min-height: 4.25rem; border-radius: var(--tc-radius-sm); background: var(--tc-color-field); color: var(--tc-color-field-text); box-shadow: inset 0 0 0 var(--tc-border-control) var(--tc-color-border); cursor: pointer; font: var(--tc-text-label); font-size: var(--tc-text-button-size); transition: box-shadow var(--tc-duration-base), background-color var(--tc-duration-base); }
.tc-opt:hover { box-shadow: inset 0 0 0 var(--tc-border-control) var(--tc-color-field-border); }
.tc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tc-opt img { width: 3rem; height: 2.5rem; object-fit: contain; flex: none; }
.tc-opt small { display: block; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); margin-top: 0.1rem; }
.tc-opt:has(input:checked) { box-shadow: inset 0 0 0 var(--tc-border-strong) var(--tc-blue); background: var(--tc-color-selected); }
.tc-opt:has(input:focus-visible) { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: var(--tc-focus-offset); }
.tc-opt:has(input:disabled) { cursor: not-allowed; color: var(--tc-ink-500); background: var(--tc-mist-50); box-shadow: inset 0 0 0 var(--tc-border-control) var(--tc-mist-200); }
.tc-opt__tick { margin-left: auto; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 var(--tc-border-control) var(--tc-color-field-border); display: grid; place-items: center; transition: background-color var(--tc-duration-base); }
.tc-opt:has(input[type="checkbox"]) .tc-opt__tick { border-radius: var(--tc-radius-xs); }
.tc-opt:has(input:checked) .tc-opt__tick { background: var(--tc-blue); box-shadow: none; }
.tc-opt:has(input:checked) .tc-opt__tick::after { content: ""; width: 0.4rem; height: 0.72rem; border: solid var(--tc-white); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
/* steps bar: <div class="tc-steps-bar" style="--count:6"><i data-state="done"></i><i data-state="current"></i><i></i>… (.on and .now are deprecated) */
.tc-steps-bar { display: grid; grid-template-columns: repeat(var(--count, 5), 1fr); gap: 6px; }
.tc-steps-bar i { display: block; height: 0.4rem; border-radius: var(--tc-radius-pill); background: var(--tc-color-tint); }
.tc-steps-bar i[data-state="done"], .tc-steps-bar i.on { background: var(--tc-blue); }
.tc-steps-bar i[data-state="current"], .tc-steps-bar i.now { background: var(--tc-blue-300); }

/* ================================================ WEB APP SHELL */
.tc-app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; background: var(--tc-color-bg); }
.tc-app--rail { grid-template-columns: 15rem minmax(0, 1fr) 20rem; }
.tc-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--tc-space-6); padding: var(--tc-space-6) var(--tc-space-4); border-right: var(--tc-border-hair) solid var(--tc-color-border); background: var(--tc-color-surface-tint); }
.tc-sidebar .tc-brand { --logo-w: 8.25rem; padding-left: var(--tc-space-3); }
.tc-sidebar__nav { display: grid; gap: 2px; }
.tc-sidebar__nav a { display: flex; align-items: center; gap: var(--tc-space-3); padding: 0.65rem var(--tc-space-3); border-radius: var(--tc-radius-sm); font: var(--tc-text-nav); color: var(--tc-color-text-muted); text-decoration: none; transition: background-color var(--tc-duration-base), color var(--tc-duration-base); }
.tc-sidebar__nav a:hover { background: var(--tc-color-tint); color: var(--tc-color-text); }
.tc-sidebar__nav a[aria-current="page"] { background: var(--tc-color-surface); color: var(--tc-color-text); box-shadow: inset 0 0 0 var(--tc-border-hair) var(--tc-color-border); font-weight: var(--tc-weight-semibold); }
.tc-sidebar__nav a[aria-current="page"] .tc-icon { color: var(--tc-blue); }
.tc-sidebar__nav .tc-icon { width: 1.35rem; height: 1.35rem; }
.tc-sidebar__foot { margin-top: auto; display: grid; gap: var(--tc-space-3); }
.tc-sidebar .tc-sos-button { justify-content: center; }
@media (min-width: 1024px) { .tc-app .tc-tabbar { display: none; } }
.tc-sidebar__user { display: flex; align-items: center; gap: var(--tc-space-3); padding: var(--tc-space-2) var(--tc-space-3); font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-sidebar__user b { display: block; color: var(--tc-color-text); font-weight: var(--tc-weight-semibold); }
.tc-main { min-width: 0; padding: var(--tc-space-8) var(--tc-gutter) var(--tc-space-16); }
.tc-main__in { max-width: var(--tc-container-narrow); margin-inline: auto; display: grid; gap: var(--tc-space-6); align-content: start; }
.tc-main__in--wide { max-width: var(--tc-container-wide); }
.tc-rail { padding: var(--tc-space-8) var(--tc-space-5); border-left: var(--tc-border-hair) solid var(--tc-color-border); display: grid; gap: var(--tc-space-6); align-content: start; }
.tc-rail h3 { font: var(--tc-text-eyebrow); color: var(--tc-color-text-subtle); margin: 0 0 var(--tc-space-3); }
.tc-topbar { display: none; }
@media (max-width: 1199px) { .tc-app--rail { grid-template-columns: 15rem minmax(0, 1fr); } .tc-rail { display: none; } }
@media (max-width: 1023px) {
  .tc-app, .tc-app--rail { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
  .tc-sidebar { display: none; }
  .tc-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-3); position: sticky; top: 0; z-index: var(--tc-z-chrome); padding: var(--tc-space-3) var(--tc-gutter); background: var(--tc-color-bg); border-bottom: var(--tc-border-hair) solid var(--tc-color-border); }
  .tc-topbar .tc-brand { --logo-w: 6.5rem; }
  .tc-main { padding: var(--tc-space-5) var(--tc-gutter) calc(var(--tc-space-16) + 4rem); }
  .tc-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--tc-z-chrome); }
}
.tc-page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--tc-space-3) var(--tc-space-6); }
.tc-page-head :is(h1, h2) { font: var(--tc-text-h2); letter-spacing: var(--tc-text-h2-tracking); margin: 0; }
.tc-page-head p { margin: var(--tc-space-1) 0 0; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-page-head__actions { display: flex; gap: var(--tc-space-2); flex-wrap: wrap; }
.tc-section-label { font: var(--tc-text-eyebrow); color: var(--tc-color-text-subtle); margin: var(--tc-space-2) 0 calc(var(--tc-space-2) * -1); }

/* ------------------------------------------------ data table */
.tc-table-wrap { flex-shrink: 0; min-height: min-content; overflow-x: auto; border-radius: var(--tc-radius-md); border: var(--tc-border-hair) solid var(--tc-color-border); }
.tc-table { width: 100%; min-width: 36rem; border-collapse: collapse; font: var(--tc-text-body-sm); }
.tc-table th, .tc-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: var(--tc-border-hair) solid var(--tc-color-border); vertical-align: middle; }
.tc-table thead th { font: var(--tc-text-tag); color: var(--tc-color-text-subtle); background: var(--tc-color-surface-tint); }
.tc-table tbody tr:last-child td { border-bottom: 0; }
.tc-table tbody tr:hover { background: var(--tc-color-surface-tint); }
.tc-table td:first-child { font-weight: var(--tc-weight-semibold); color: var(--tc-color-text); }
.tc-table .num, .tc-table .tc-num { text-align: right; font-variant-numeric: tabular-nums; }
.tc-table--compare .is-hi { background: var(--tc-color-selected); }
@media (max-width: 519px) { .tc-table--compare { min-width: 0; } .tc-table--compare th, .tc-table--compare td { padding: 0.75rem 0.6rem; } } /* a compare table keeps every column on screen: the right-hand one is the point */
.tc-filters { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); align-items: center; }
.tc-filters .tc-input, .tc-filters .tc-select { max-width: 18rem; min-height: var(--tc-control-sm); padding-block: 0.5rem; }
.tc-filters .tc-select { width: auto; }
.tc-filters__spacer { flex: 1; }
.tc-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--tc-space-3); font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }

/* ------------------------------------------------ states: empty, loading, saving, error, done */
.tc-empty { display: grid; justify-items: center; text-align: center; gap: var(--tc-space-3); padding: var(--tc-space-12) var(--tc-space-6); border-radius: var(--tc-radius-md); border: var(--tc-border-hair) dashed var(--tc-color-field-border); }
.tc-empty img { width: 9rem; }
.tc-empty h3 { margin: var(--tc-space-2) 0 0; font: var(--tc-text-h4); }
.tc-empty p { margin: 0; max-width: 32ch; font: var(--tc-text-body-sm); color: var(--tc-color-text-muted); }
.tc-skeleton { display: block; border-radius: var(--tc-radius-xs); background: linear-gradient(90deg, var(--tc-mist-100) 25%, var(--tc-mist-50) 50%, var(--tc-mist-100) 75%); background-size: 200% 100%; animation: tcShimmer var(--tc-duration-shimmer) linear infinite; min-height: 0.9rem; }
.tc-skeleton--title { height: 1.4rem; width: 60%; } .tc-skeleton--text { height: 0.9rem; } .tc-skeleton--text:last-child { width: 80%; } .tc-skeleton--block { height: 6rem; border-radius: var(--tc-radius-md); }
@keyframes tcShimmer { to { background-position: -200% 0; } }
.tc-spinner { width: 1.1em; height: 1.1em; border-radius: 50%; border: var(--tc-border-strong) solid currentColor; border-right-color: transparent; animation: tcSpin var(--tc-duration-spin) linear infinite; }
@keyframes tcSpin { to { transform: rotate(360deg); } }

/* ------------------------------------------------ banners: inline messages where the thing happened
   Variants: (info), --tip, --success, --warning, --error. Optional icon first and a close button last.
   .tc-callout is a deprecated alias (same component, no icon). */
.tc-banner, .tc-callout { display: flex; align-items: center; gap: var(--tc-space-3); padding: var(--tc-space-4) var(--tc-space-5); border-radius: var(--tc-radius-sm); background: var(--tc-info-wash); color: var(--tc-ink); font: var(--tc-text-body-sm); }
.tc-banner { flex-wrap: wrap; }
.tc-banner > p, .tc-banner > div { flex: 1 1 14rem; min-width: 0; } /* when space runs out the action drops under the text instead of squeezing it */
.tc-banner > .tc-btn { margin-inline-start: auto; }
.tc-callout { display: block; }
.tc-banner .tc-icon { color: var(--tc-blue-700); margin-top: 0.1em; }
.tc-banner p, .tc-callout p { margin: 0; }
.tc-banner b { font-weight: var(--tc-weight-semibold); }
.tc-banner--tip, .tc-callout--tip, .tc-banner--warning { background: var(--tc-warning-wash); }
.tc-banner--tip .tc-icon, .tc-banner--warning .tc-icon { color: var(--tc-ink); }
.tc-banner--success, .tc-callout--success { background: var(--tc-success-wash); } .tc-banner--success .tc-icon { color: var(--tc-success); }
.tc-banner--error, .tc-callout--error { background: var(--tc-error-wash); } .tc-banner--error .tc-icon { color: var(--tc-error); }
.tc-banner__close { all: unset; cursor: pointer; display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; margin-left: auto; border-radius: 50%; color: inherit; opacity: 0.7; }
.tc-banner__close:hover { background: var(--tc-ink-a06); opacity: 1; }
.tc-banner__close:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: 2px; }

/* ------------------------------------------------ form layout */
.tc-field { display: grid; gap: var(--tc-space-2); align-content: start; }
.tc-field .tc-label, .tc-field .tc-hint, .tc-field .tc-error { margin: 0; }
.tc-field--invalid .tc-input, .tc-field--invalid .tc-textarea, .tc-field--invalid .tc-select { border-color: var(--tc-error); }
.tc-field--invalid :is(.tc-input, .tc-textarea, .tc-select):focus { box-shadow: 0 0 0 4px var(--tc-error-wash); border-color: var(--tc-error); }
.tc-field--valid .tc-input { border-color: var(--tc-success); }
.tc-field__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--tc-space-4); align-items: start; }
.tc-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-3) var(--tc-space-5); padding-top: var(--tc-space-5); border-top: var(--tc-border-hair) solid var(--tc-color-border); }

/* ------------------------------------------------ overlays: toasts, dialog parts, menu */
.tc-toasts { position: fixed; z-index: var(--tc-z-toast); left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: var(--tc-space-2); pointer-events: none; }
.tc-toasts .tc-toast { pointer-events: auto; }
.tc-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: var(--tc-space-4); margin-bottom: var(--tc-space-4); }
.tc-dialog__head h2 { font: var(--tc-text-h3); letter-spacing: var(--tc-text-h3-tracking); margin: 0; }
.tc-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tc-space-2); margin-top: var(--tc-space-6); }
.tc-menu { position: absolute; z-index: var(--tc-z-menu); min-width: 12rem; padding: var(--tc-space-2); border-radius: var(--tc-radius-sm); border: var(--tc-border-hair) solid var(--tc-color-border); box-shadow: var(--tc-shadow-lift); display: grid; gap: 2px; }
.tc-menu button, .tc-menu a { all: unset; cursor: pointer; display: flex; align-items: center; gap: var(--tc-space-2); padding: 0.55rem 0.75rem; border-radius: var(--tc-radius-xs); font: var(--tc-text-body-sm); color: var(--tc-color-text); }
.tc-menu button:hover, .tc-menu a:hover { background: var(--tc-color-surface-tint); }
.tc-menu button:focus-visible, .tc-menu a:focus-visible { outline: var(--tc-focus-width) solid var(--tc-color-focus); outline-offset: -3px; }
.tc-menu .is-danger { color: var(--tc-color-accent-text); }

/* ------------------------------------------------ stepper: where you are in a flow of three or more steps */
.tc-stepper { display: flex; gap: var(--tc-space-2); list-style: none; margin: 0; padding: 0; counter-reset: st; font: var(--tc-text-caption); color: var(--tc-color-text-subtle); }
.tc-stepper li { counter-increment: st; display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.tc-stepper li::before { content: counter(st); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tc-color-tint); font: var(--tc-text-counter); color: var(--tc-color-text-subtle); flex: none; }
.tc-stepper li[data-state="done"]::before { content: "\2713"; background: var(--tc-color-selected); color: var(--tc-color-on-selected); }
.tc-stepper li[data-state="current"] { color: var(--tc-color-text); font-weight: var(--tc-weight-semibold); }
.tc-stepper li[data-state="current"]::before { background: var(--tc-blue); color: var(--tc-white); }
.tc-stepper li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--tc-color-border); margin-left: 0.25rem; }
@media (max-width: 519px) { .tc-stepper li span { display: none; } .tc-stepper li[data-state="current"] span { display: inline; } }

/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .tc-hero [data-settle] { animation: none; }
  .tc-skeleton { animation: none; }
  .tc-topic, .tc-topic:hover { transform: none; }
}