/* ==========================================================================
   Tak Trochen — Design System
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, surfaces and components.

   Extracted from the Konverzační klub B1/B2 landing page, which is the visual
   reference for the whole site: warm cream canvas with the dotted pattern,
   terracotta orange as the action colour, sunny yellow as the highlight,
   graphite ink for headings, generously rounded white cards.

   How it is used
   --------------
   - styles.css imports this file first, so every regular page inherits the
     tokens and the components.
   - Standalone pages (the Tailwind-based konverzacni-klub_b1-b2.html) can link
     it directly next to nav.css.
   - Every component class is prefixed `tt-` so it never collides with the
     legacy classes in styles.css or with Tailwind utilities.

   Contents
   --------
     1. Tokens .................. colour, type, space, radius, shadow, motion
     2. Base .................... reset, page canvas, typography defaults
     3. Surfaces ................ dotted background + section backgrounds
     4. Layout .................. container, section, section header, grids
     5. Buttons
     6. Containers & cards ...... card, tile, feature, panel, note, schedule
     7. Badges & pills
     8. Lists
     9. FAQ
    10. Forms
    11. Review / quote
    12. Footer
    13. Prose
    14. Page patterns ........... hero, stat, carousel, social, media, CTA band
    15. Tables
    16. Utilities
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Brand palette -----------------------------------------------------
     The exact values from the Konverzační klub page. Nothing else is brand. */
  --tt-orange: #e85a37;         /* terracotta — the action colour            */
  --tt-orange-hover: #d44a29;   /* pressed / hovered orange                  */
  --tt-orange-soft: #fdf5f2;    /* orange wash for chips and soft surfaces   */
  --tt-orange-border: #f3c5b7;  /* border that matches the orange wash       */

  --tt-yellow: #f5d765;         /* highlight blocks, badges                  */
  --tt-yellow-light: #fdf9ed;   /* yellow wash                               */
  --tt-yellow-border: #e5c752;  /* border on yellow surfaces                 */

  --tt-green: #10b981;          /* positive / "all good" dot                 */
  --tt-green-soft: #ecfdf5;
  --tt-amber: #f59e0b;          /* schedule exceptions, gentle warnings      */
  --tt-amber-soft: #fffbeb;
  --tt-amber-border: #fde68a;
  --tt-amber-ink: #78350f;

  /* ---- Neutrals ---------------------------------------------------------- */
  --tt-dark: #1e242b;           /* headings — graphite, never pure black     */
  --tt-text: #374151;           /* body copy                                 */
  --tt-muted: #6b7280;          /* captions, meta, secondary copy            */
  --tt-border: #ebe6de;         /* warm hairline, matches the cream canvas   */
  --tt-border-strong: #ddd5c8;
  --tt-bg: #faf8f5;             /* the warm cream page canvas                */
  --tt-card: #ffffff;
  --tt-dot: #dfd7cc;            /* the dot in the dotted background          */
  --tt-white-dot: #e8e2d8;      /* the dot when the canvas is pure white     */

  /* ---- Semantic aliases --------------------------------------------------
     Components read these, so a re-skin means editing the block above only. */
  --tt-color-accent: var(--tt-orange);
  --tt-color-accent-hover: var(--tt-orange-hover);
  --tt-color-highlight: var(--tt-yellow);
  --tt-surface-page: var(--tt-bg);
  --tt-surface-card: var(--tt-card);
  --tt-surface-sunken: var(--tt-bg);
  --tt-text-heading: var(--tt-dark);
  --tt-text-body: var(--tt-text);
  --tt-text-muted: var(--tt-muted);
  --tt-border-subtle: var(--tt-border);
  --tt-focus-ring: 0 0 0 3px rgba(232, 90, 55, 0.28);

  /* ---- Typography --------------------------------------------------------
     One family, four weights. 400 body, 500 emphasis, 700 headings and UI,
     900 for display headlines only. */
  --tt-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif;

  --tt-text-2xs: 0.6875rem;                       /* 11px — tile labels      */
  --tt-text-xs: 0.75rem;                          /* 12px — meta, legal      */
  --tt-text-sm: 0.875rem;                         /* 14px — dense copy       */
  --tt-text-base: 1rem;                           /* 16px — body             */
  --tt-text-lg: 1.125rem;                         /* 18px — lead             */
  --tt-text-xl: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --tt-text-2xl: clamp(1.375rem, 1vw + 1.1rem, 1.5rem);   /* card headline   */
  --tt-text-3xl: clamp(1.5rem, 1.6vw + 1.1rem, 1.875rem); /* small section   */
  --tt-text-4xl: clamp(1.875rem, 2.4vw + 1.2rem, 2.25rem);/* section h2      */
  --tt-text-5xl: clamp(2rem, 4vw + 1rem, 3.75rem);        /* hero h1         */

  --tt-leading-tight: 1.18;
  --tt-leading-snug: 1.35;
  --tt-leading-normal: 1.6;
  --tt-leading-relaxed: 1.75;

  --tt-tracking-tight: -0.02em;
  --tt-tracking-wide: 0.06em;
  --tt-tracking-widest: 0.12em;

  --tt-weight-normal: 400;
  --tt-weight-medium: 500;
  --tt-weight-bold: 700;
  --tt-weight-black: 900;

  /* ---- Space scale (4px base) -------------------------------------------- */
  --tt-space-1: 0.25rem;
  --tt-space-2: 0.5rem;
  --tt-space-3: 0.75rem;
  --tt-space-4: 1rem;
  --tt-space-5: 1.25rem;
  --tt-space-6: 1.5rem;
  --tt-space-8: 2rem;
  --tt-space-10: 2.5rem;
  --tt-space-12: 3rem;
  --tt-space-14: 3.5rem;
  --tt-space-16: 4rem;
  --tt-space-20: 5rem;

  /* Vertical rhythm of a full-width section, fluid between phone and desktop */
  --tt-section-y: clamp(3rem, 6vw, 5rem);
  --tt-section-y-tight: clamp(2.5rem, 4vw, 4rem);

  /* ---- Radii -------------------------------------------------------------
     The page is round: chips are pills, cards are 24px, controls are 16px. */
  --tt-radius-sm: 0.625rem;   /* 10px — inline chips, small inputs           */
  --tt-radius-md: 0.875rem;   /* 14px — nested boxes inside cards            */
  --tt-radius-lg: 1rem;       /* 16px — inputs, small cards                  */
  --tt-radius-xl: 1.5rem;     /* 24px — the standard card                    */
  --tt-radius-pill: 999px;

  /* ---- Elevation ---------------------------------------------------------
     Shadows are warm and shallow. Orange-tinted for anything interactive. */
  --tt-shadow-card: 0 2px 12px 0 rgba(30, 36, 43, 0.04);
  --tt-shadow-soft: 0 10px 25px -4px rgba(232, 90, 55, 0.08),
    0 4px 10px -2px rgba(0, 0, 0, 0.03);
  --tt-shadow-hover: 0 20px 35px -5px rgba(232, 90, 55, 0.16);
  --tt-shadow-glow: 0 0 16px rgba(245, 215, 101, 0.45);

  /* ---- Motion ------------------------------------------------------------ */
  --tt-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tt-duration: 0.2s;
  --tt-duration-slow: 0.3s;
  --tt-transition: all var(--tt-duration-slow) var(--tt-ease);

  /* ---- Scroll reveal -----------------------------------------------------
     A reveal exists to soften an arrival, never to make the reader wait. The
     rules that follow from that:

       1. Start BEFORE the element reaches the fold. --tt-reveal-preroll
          extends the trigger area below the viewport, so a block is already
          settling by the time it is actually looked at.
       2. Trigger on the first pixel. No "10% of it must be visible" — a tall
          section would otherwise have to be well past the fold to qualify.
       3. Stagger within a group only, and cap it. A delay indexed across the
          whole document grows without bound, so the further you scroll the
          later everything gets. --tt-reveal-steps is the ceiling.
       4. Travel a short distance, quickly. Long slow travel reads as "late"
          even when the trigger was on time. */
  --tt-reveal-duration: 0.45s;
  --tt-reveal-distance: 1rem;    /* 16px — enough to notice, not to wait for */
  --tt-reveal-stagger: 70ms;     /* between siblings in one group           */
  --tt-reveal-steps: 3;          /* max stagger multiplier, so ≤ 210ms      */
  --tt-reveal-preroll: 12%;      /* of viewport height, below the fold      */

  /* ---- Layout ------------------------------------------------------------ */
  --tt-width-sm: 48rem;   /* 768px  — long-form text, forms, FAQ            */
  --tt-width-md: 56rem;   /* 896px  — hero copy                             */
  --tt-width-lg: 64rem;   /* 1024px — the default content width             */
  --tt-width-xl: 72rem;   /* 1152px — footer, wide grids                    */
  --tt-gutter: 1.5rem;

  /* ---- The dotted canvas -------------------------------------------------
     Kept exactly as on the Konverzační klub page: 1px dots on a 26px grid. */
  --tt-dots-image: radial-gradient(var(--tt-dot) 1px, transparent 1px);
  --tt-dots-size: 26px 26px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--tt-font-sans);
  font-size: var(--tt-text-base);
  line-height: var(--tt-leading-normal);
  color: var(--tt-text-body);

  /* The dotted background is the site's default canvas. */
  background-color: var(--tt-surface-page);
  background-image: var(--tt-dots-image);
  background-size: var(--tt-dots-size);
  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--tt-color-accent);
  color: #fff;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 var(--tt-space-4);
  color: var(--tt-text-heading);
  font-weight: var(--tt-weight-bold);
  line-height: var(--tt-leading-snug);
  letter-spacing: var(--tt-tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--tt-text-5xl);
  font-weight: var(--tt-weight-black);
  line-height: var(--tt-leading-tight);
}
h2 {
  font-size: var(--tt-text-4xl);
  font-weight: var(--tt-weight-black);
}
h3 {
  font-size: var(--tt-text-2xl);
}
h4 {
  font-size: var(--tt-text-lg);
}
h5 {
  font-size: var(--tt-text-base);
}

p {
  margin: 0 0 var(--tt-space-4);
}

strong,
b {
  font-weight: var(--tt-weight-bold);
  color: var(--tt-text-heading);
}

a {
  color: var(--tt-color-accent);
  text-decoration: none;
  transition: color var(--tt-duration) var(--tt-ease);
}

a:hover {
  color: var(--tt-color-accent-hover);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--tt-border-subtle);
  margin: var(--tt-space-8) 0;
}

/* One focus treatment for the whole site. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tt-color-accent);
  outline-offset: 2px;
  border-radius: var(--tt-radius-sm);
}

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

/* --------------------------------------------------------------------------
   Scroll reveal

   One mechanism for the whole site. A script adds `in-view` when the element
   enters the pre-roll zone (see assets/js/animations.js); everything about
   how it looks and how long it takes lives here.

   Per-element stagger is passed in as --tt-reveal-index, already capped by
   the script. Index 0 means "no wait" — the first item in every group starts
   immediately, so nothing is ever gated behind its neighbours.

   Legacy aliases (.animate-on-scroll and friends) are kept because existing
   pages and scripts use those names.
   -------------------------------------------------------------------------- */

/* The hidden state is scoped to `html.tt-reveal-ready`, which the script sets
   as its first act. No script, stalled script, or reduced-motion exit means
   the class is never added and the content is simply visible — a reveal must
   never be the reason someone cannot read the page. */
.tt-reveal-ready .tt-reveal,
.tt-reveal-ready .animate-on-scroll,
.tt-reveal-ready .animate-fade,
.tt-reveal-ready .animate-scale,
.tt-reveal-ready .animate-slide-left,
.tt-reveal-ready .animate-slide-right {
  --tt-reveal-index: 0;
  opacity: 0;
  transition: opacity var(--tt-reveal-duration) var(--tt-ease),
    transform var(--tt-reveal-duration) var(--tt-ease);
  transition-delay: calc(var(--tt-reveal-index) * var(--tt-reveal-stagger));
  will-change: opacity, transform;
}

.tt-reveal-ready .tt-reveal,
.tt-reveal-ready .animate-on-scroll {
  transform: translateY(var(--tt-reveal-distance));
}

.tt-reveal-ready .animate-slide-left { transform: translateX(calc(var(--tt-reveal-distance) * -1.5)); }
.tt-reveal-ready .animate-slide-right { transform: translateX(calc(var(--tt-reveal-distance) * 1.5)); }
.tt-reveal-ready .animate-scale { transform: scale(0.97); }
.tt-reveal-ready .animate-fade { transform: none; }

.tt-reveal.in-view,
.animate-on-scroll.in-view,
.animate-fade.in-view,
.animate-scale.in-view,
.animate-slide-left.in-view,
.animate-slide-right.in-view {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tt-reveal,
  .animate-on-scroll,
  .animate-fade,
  .animate-scale,
  .animate-slide-left,
  .animate-slide-right {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

/* ==========================================================================
   3. SURFACES
   --------------------------------------------------------------------------
   Four backgrounds, in the order they should be reached for:
     dotted cream (default) → white → cream → yellow. Dark and orange are
   reserved for a single emphatic block per page.

   The selectors are doubled (.tt-dots.tt-dots) on purpose: a surface is a
   utility and must win over a component's own background when both are on the
   same element, e.g. <div class="tt-card tt-surface-orange">.
   ========================================================================== */

.tt-dots.tt-dots {
  background-color: var(--tt-surface-page);
  background-image: var(--tt-dots-image);
  background-size: var(--tt-dots-size);
}

/* Same pattern on a pure white canvas. */
.tt-dots--white.tt-dots--white {
  background-color: #fff;
  background-image: radial-gradient(var(--tt-white-dot) 1px, transparent 1px);
  background-size: var(--tt-dots-size);
}

.tt-surface-white.tt-surface-white {
  background-color: #fff;
  background-image: none;
}

.tt-surface-cream.tt-surface-cream {
  background-color: var(--tt-bg);
  background-image: none;
}

.tt-surface-yellow.tt-surface-yellow {
  background-color: var(--tt-yellow);
  background-image: none;
}

.tt-surface-yellow-soft.tt-surface-yellow-soft {
  background-color: var(--tt-yellow-light);
  background-image: none;
}

.tt-surface-dark.tt-surface-dark {
  background-color: var(--tt-dark);
  background-image: none;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}

.tt-surface-orange.tt-surface-orange {
  background-color: var(--tt-orange);
  background-image: none;
  color: #fff;
  border-color: transparent;
}

.tt-surface-dark h1,
.tt-surface-dark h2,
.tt-surface-dark h3,
.tt-surface-dark strong,
.tt-surface-orange h1,
.tt-surface-orange h2,
.tt-surface-orange h3,
.tt-surface-orange strong {
  color: #fff;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* --- Container -----------------------------------------------------------
   The horizontal frame. Default 1024px; the modifiers cover the four widths
   the reference page uses. */

.tt-container {
  width: 100%;
  max-width: var(--tt-width-lg);
  margin-inline: auto;
  padding-inline: var(--tt-gutter);
}

.tt-container--sm { max-width: var(--tt-width-sm); }
.tt-container--md { max-width: var(--tt-width-md); }
.tt-container--lg { max-width: var(--tt-width-lg); }
.tt-container--xl { max-width: var(--tt-width-xl); }
.tt-container--full { max-width: none; }

/* --- Section -------------------------------------------------------------
   A full-bleed horizontal band. Sections stack directly on top of each other
   and are separated by a hairline, never by a gap. */

.tt-section {
  padding-block: var(--tt-section-y);
  position: relative;
}

.tt-section--tight { padding-block: var(--tt-section-y-tight); }
.tt-section--flush { padding-block: 0; }

/* Hairline between bands. --divided-strong for the yellow band. */
.tt-section--divided { border-bottom: 1px solid var(--tt-border-subtle); }
.tt-section--divided-strong { border-bottom: 1px solid var(--tt-yellow-border); }

/* --- Section header ------------------------------------------------------
   Eyebrow → headline → one sentence of support. Centred by default. */

.tt-section-head {
  max-width: 40rem;
  margin: 0 auto var(--tt-space-12);
  text-align: center;
}

.tt-section-head--start {
  margin-inline: 0;
  text-align: left;
}

.tt-section-head > :last-child {
  margin-bottom: 0;
}

.tt-section-head h2 {
  margin-top: var(--tt-space-2);
}

.tt-section-head p {
  margin-top: var(--tt-space-3);
  color: var(--tt-text-muted);
  font-size: var(--tt-text-lg);
}

.tt-eyebrow {
  display: block;
  color: var(--tt-color-accent);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-bold);
  letter-spacing: var(--tt-tracking-widest);
  text-transform: uppercase;
}

.tt-lead {
  color: var(--tt-text-body);
  font-size: var(--tt-text-lg);
  line-height: var(--tt-leading-relaxed);
}

/* --- Grids ---------------------------------------------------------------
   `auto` is the safe default: cards claim at least 16rem and wrap by
   themselves, so no media queries are needed for the common case. */

.tt-grid {
  display: grid;
  gap: var(--tt-space-6);
}

.tt-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.tt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Text on the left, a card or an image on the right. */
.tt-grid--split {
  grid-template-columns: 7fr 5fr;
  gap: var(--tt-space-10);
  align-items: center;
}

.tt-grid--split-even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tt-space-10);
  align-items: start;
}

.tt-grid--gap-sm { gap: var(--tt-space-4); }
.tt-grid--gap-lg { gap: var(--tt-space-8); }

@media (max-width: 1023px) {
  .tt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-grid--split,
  .tt-grid--split-even { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .tt-grid--2,
  .tt-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
  .tt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vertical stack with a consistent gap. */
.tt-stack { display: grid; gap: var(--tt-space-4); }
.tt-stack--sm { gap: var(--tt-space-2); }
.tt-stack--lg { gap: var(--tt-space-6); }

/* Horizontal row of buttons / chips that wraps on small screens. */
.tt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-3);
}

.tt-row--center { justify-content: center; }
.tt-row--between { justify-content: space-between; }

/* ==========================================================================
   5. BUTTONS
   --------------------------------------------------------------------------
   Always a pill. One primary action per view; secondary is the yellow, ghost
   is the outline, link is the inline text action.
   ========================================================================== */

.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-2);

  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-pill);

  font-family: inherit;
  font-size: var(--tt-text-base);
  font-weight: var(--tt-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  appearance: none;
  transition: background-color var(--tt-duration-slow) var(--tt-ease),
    border-color var(--tt-duration-slow) var(--tt-ease),
    color var(--tt-duration-slow) var(--tt-ease),
    box-shadow var(--tt-duration-slow) var(--tt-ease),
    transform var(--tt-duration-slow) var(--tt-ease);
}

.tt-btn:hover {
  transform: translateY(-2px);
}

.tt-btn:active {
  transform: translateY(0);
}

.tt-btn:focus-visible {
  outline: 2px solid var(--tt-color-accent);
  outline-offset: 3px;
}

.tt-btn[disabled],
.tt-btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

.tt-btn svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* --- Variants ------------------------------------------------------------ */

.tt-btn--primary {
  background: var(--tt-color-accent);
  color: #fff;
  box-shadow: var(--tt-shadow-soft);
}

.tt-btn--primary:hover {
  background: var(--tt-color-accent-hover);
  color: #fff;
  box-shadow: var(--tt-shadow-hover);
}

.tt-btn--secondary {
  background: var(--tt-yellow);
  border-color: var(--tt-yellow-border);
  color: var(--tt-dark);
  box-shadow: var(--tt-shadow-card);
}

.tt-btn--secondary:hover {
  background: #f0cd4c;
  color: var(--tt-dark);
  box-shadow: var(--tt-shadow-glow);
}

.tt-btn--ghost {
  background: #fff;
  border-color: var(--tt-border-subtle);
  color: var(--tt-dark);
  box-shadow: var(--tt-shadow-card);
}

.tt-btn--ghost:hover {
  border-color: var(--tt-orange-border);
  color: var(--tt-color-accent);
  box-shadow: var(--tt-shadow-soft);
}

.tt-btn--soft {
  background: var(--tt-orange-soft);
  border-color: var(--tt-orange-border);
  color: var(--tt-color-accent);
}

.tt-btn--soft:hover {
  background: #fbe9e3;
  color: var(--tt-color-accent-hover);
}

.tt-btn--dark {
  background: var(--tt-dark);
  color: #fff;
}

.tt-btn--dark:hover {
  background: #2c343d;
  color: #fff;
  box-shadow: var(--tt-shadow-soft);
}

/* On an orange or dark band the primary button inverts. */
.tt-btn--inverse {
  background: #fff;
  color: var(--tt-color-accent);
}

.tt-btn--inverse:hover {
  background: #fff;
  color: var(--tt-color-accent-hover);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.35);
}

.tt-btn--link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tt-color-accent);
  box-shadow: none;
}

.tt-btn--link:hover {
  transform: none;
  color: var(--tt-color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Sizes --------------------------------------------------------------- */

.tt-btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--tt-text-sm);
}

.tt-btn--lg {
  padding: 1rem 2.5rem;
  font-size: var(--tt-text-lg);
}

.tt-btn--block {
  display: flex;
  width: 100%;
}

@media (max-width: 479px) {
  .tt-btn {
    width: 100%;
    white-space: normal;
  }
  .tt-btn--auto {
    width: auto;
  }
}

/* ==========================================================================
   6. CONTAINERS & CARDS
   --------------------------------------------------------------------------
   The card is the workhorse: white, 24px radius, warm hairline, barely-there
   shadow. Everything else here is a specialisation of it.
   ========================================================================== */

.tt-card {
  background: var(--tt-surface-card);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-card);
  padding: var(--tt-space-6);
  transition: border-color var(--tt-duration-slow) var(--tt-ease),
    box-shadow var(--tt-duration-slow) var(--tt-ease),
    transform var(--tt-duration-slow) var(--tt-ease);
}

.tt-card > :last-child {
  margin-bottom: 0;
}

.tt-card--sm { padding: var(--tt-space-4); border-radius: var(--tt-radius-lg); }
.tt-card--lg { padding: var(--tt-space-8); }

/* Cream card — for a card sitting on a white band. */
.tt-card--soft {
  background: var(--tt-bg);
}

/* Yellow wash card — a single highlighted aside. */
.tt-card--highlight {
  background: rgba(245, 215, 101, 0.3);
  border-color: var(--tt-yellow-border);
}

.tt-card--accent {
  border-color: var(--tt-orange-border);
}

.tt-card--flat {
  box-shadow: none;
}

/* Interactive card: lift on hover. Use only when the whole card is a link. */
.tt-card--hover:hover {
  transform: translateY(-3px);
  border-color: var(--tt-orange-border);
  box-shadow: var(--tt-shadow-soft);
}

.tt-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
  padding-bottom: var(--tt-space-3);
  margin-bottom: var(--tt-space-4);
  border-bottom: 1px solid var(--tt-border-subtle);
}

.tt-card__title {
  margin: 0 0 var(--tt-space-2);
  font-size: var(--tt-text-xl);
  font-weight: var(--tt-weight-bold);
  color: var(--tt-text-heading);
}

.tt-card__text {
  margin: 0;
  color: var(--tt-text-body);
  font-size: var(--tt-text-sm);
  line-height: var(--tt-leading-relaxed);
}

.tt-card__icon {
  display: block;
  margin-bottom: var(--tt-space-3);
  font-size: 1.875rem;
  line-height: 1;
}

.tt-card__foot {
  padding-top: var(--tt-space-4);
  margin-top: var(--tt-space-4);
  border-top: 1px solid var(--tt-border-subtle);
}

/* --- Tile ----------------------------------------------------------------
   The small key-fact box: emoji, uppercase label, short value. Four across. */

.tt-tile {
  background: var(--tt-surface-card);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-card);
  padding: var(--tt-space-4);
  text-align: left;
}

.tt-tile__icon {
  display: block;
  margin-bottom: var(--tt-space-1);
  font-size: 1.5rem;
  line-height: 1;
}

.tt-tile__label {
  color: var(--tt-text-muted);
  font-size: var(--tt-text-2xs);
  font-weight: var(--tt-weight-bold);
  letter-spacing: var(--tt-tracking-wide);
  text-transform: uppercase;
}

.tt-tile__value {
  color: var(--tt-text-heading);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
}

/* --- Feature -------------------------------------------------------------
   The numbered pillar card: a rounded orange square with 01…04, then a
   headline and a paragraph. */

.tt-feature {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-card);
  padding: var(--tt-space-8);
  transition: border-color var(--tt-duration-slow) var(--tt-ease),
    box-shadow var(--tt-duration-slow) var(--tt-ease);
}

.tt-feature:hover {
  border-color: var(--tt-orange-border);
}

.tt-feature--on-cream {
  background: var(--tt-surface-card);
}

.tt-feature__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--tt-space-6);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-color-accent);
  color: #fff;
  font-size: var(--tt-text-lg);
  font-weight: var(--tt-weight-bold);
  line-height: 1;
}

.tt-feature__num--yellow {
  background: var(--tt-yellow);
  color: var(--tt-dark);
}

.tt-feature__num--dark {
  background: var(--tt-dark);
  color: #fff;
}

.tt-feature h3 {
  margin-bottom: var(--tt-space-3);
  font-size: var(--tt-text-xl);
}

.tt-feature p {
  margin-bottom: 0;
  line-height: var(--tt-leading-relaxed);
}

/* --- Panel ---------------------------------------------------------------
   The offer / price container: a coloured header strip over a white body,
   wrapped in an accented border. One per page — it is the conversion block. */

.tt-panel {
  background: var(--tt-surface-card);
  border: 2px solid rgba(232, 90, 55, 0.3);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-hover);
  overflow: hidden;
}

.tt-panel__head {
  background: var(--tt-color-accent);
  color: #fff;
  padding: var(--tt-space-8) var(--tt-space-6);
  text-align: center;
}

.tt-panel__head h2,
.tt-panel__head h3 {
  color: #fff;
  margin-bottom: 0;
}

.tt-panel__head p {
  margin: var(--tt-space-2) 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--tt-text-base);
}

.tt-panel__body {
  padding: var(--tt-space-8) var(--tt-space-6);
}

@media (min-width: 640px) {
  .tt-panel__head,
  .tt-panel__body { padding-inline: var(--tt-space-10); }
}

.tt-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tt-space-2);
}

.tt-price__amount {
  color: var(--tt-text-heading);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: var(--tt-weight-black);
  line-height: 1.1;
}

.tt-price__unit {
  color: var(--tt-text-muted);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
}

.tt-price__note {
  margin-top: var(--tt-space-1);
  color: var(--tt-text-muted);
  font-size: var(--tt-text-xs);
}

/* --- Note / callout ------------------------------------------------------
   A short aside inside the flow of a page. */

.tt-note {
  display: flex;
  align-items: flex-start;
  gap: var(--tt-space-4);
  padding: var(--tt-space-5);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  background: var(--tt-bg);
}

.tt-note > :last-child { margin-bottom: 0; }

.tt-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-dark);
  color: #fff;
  font-size: var(--tt-text-lg);
}

.tt-note__title {
  margin: 0 0 var(--tt-space-1);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
  color: var(--tt-text-heading);
}

.tt-note__text {
  margin: 0;
  font-size: var(--tt-text-xs);
  line-height: var(--tt-leading-relaxed);
}

.tt-note--accent {
  background: var(--tt-orange-soft);
  border-color: var(--tt-orange-border);
}
.tt-note--accent .tt-note__icon { background: var(--tt-color-accent); }

.tt-note--highlight {
  background: rgba(245, 215, 101, 0.3);
  border-color: var(--tt-yellow-border);
}

.tt-note--warn {
  background: var(--tt-amber-soft);
  border-color: var(--tt-amber-border);
  color: var(--tt-amber-ink);
}
.tt-note--warn .tt-note__icon { background: var(--tt-amber); }

.tt-note--success {
  background: var(--tt-green-soft);
  border-color: #a7f3d0;
}
.tt-note--success .tt-note__icon { background: var(--tt-green); }

/* --- Schedule ------------------------------------------------------------
   The dated list: label on the left, time on the right, hairline between
   rows, and an amber row for a session that does not take place. */

.tt-schedule {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-card);
  padding: var(--tt-space-6);
}

.tt-schedule__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
  padding-bottom: var(--tt-space-4);
  margin-bottom: var(--tt-space-5);
  border-bottom: 1px solid var(--tt-border-subtle);
  color: var(--tt-text-heading);
  font-weight: var(--tt-weight-bold);
}

.tt-schedule__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-2);
  padding-block: 0.625rem;
  border-top: 1px solid var(--tt-border-subtle);
  font-size: var(--tt-text-sm);
}

.tt-schedule__row:first-of-type {
  border-top: 0;
}

.tt-schedule__label {
  color: var(--tt-text-heading);
  font-weight: 600;
}

.tt-schedule__meta {
  color: var(--tt-text-muted);
}

.tt-schedule__row--off {
  margin-block: var(--tt-space-1);
  padding: var(--tt-space-3);
  border: 1px solid var(--tt-amber-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-amber-soft);
  color: var(--tt-amber-ink);
  font-weight: var(--tt-weight-medium);
}

.tt-schedule__row--off .tt-schedule__label,
.tt-schedule__row--off .tt-schedule__meta {
  color: inherit;
}

/* ==========================================================================
   7. BADGES & PILLS
   ========================================================================== */

.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-2);
  padding: 0.375rem 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-orange-soft);
  color: var(--tt-color-accent);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-bold);
  letter-spacing: var(--tt-tracking-wide);
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.tt-badge--yellow {
  background: var(--tt-yellow);
  border-color: var(--tt-yellow-border);
  color: var(--tt-dark);
}

.tt-badge--dark {
  background: var(--tt-dark);
  color: #fff;
  letter-spacing: var(--tt-tracking-widest);
}

.tt-badge--outline {
  background: transparent;
  border-color: var(--tt-orange-border);
  color: var(--tt-color-accent);
}

.tt-badge--green {
  background: var(--tt-green-soft);
  border-color: #a7f3d0;
  color: #047857;
}

.tt-badge--amber {
  background: var(--tt-amber-soft);
  border-color: var(--tt-amber-border);
  color: var(--tt-amber-ink);
}

.tt-badge--on-accent {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.tt-badge--glow {
  box-shadow: var(--tt-shadow-glow);
}

.tt-badge--lg {
  padding: 0.5rem 1rem;
  font-size: var(--tt-text-sm);
}

/* The live dot inside a badge, e.g. "enrolment open". */
.tt-badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.tt-badge__dot--pulse {
  animation: tt-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes tt-ping {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(1.9); opacity: 0; }
}

/* Standalone status line under a CTA: green dot + short reassurance. */
.tt-status {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-2);
  color: var(--tt-text-muted);
  font-size: var(--tt-text-xs);
  font-weight: 600;
}

.tt-status::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tt-green);
}

/* ==========================================================================
   8. LISTS
   ========================================================================== */

/* The marker is positioned, not a flex item: a flex or grid <li> would turn
   every inline <strong>, <a> or <code> inside it into its own item and shred
   the sentence. Item content stays normal inline flow. */
/* Doubled class: the reset must beat legacy descendant rules such as
   `.card ul` in styles.css. */
.tt-check-list.tt-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tt-space-3);
  font-size: var(--tt-text-sm);
}

.tt-check-list li {
  position: relative;
  padding-left: 2.25rem;
  line-height: var(--tt-leading-relaxed);
}

.tt-check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--tt-orange-soft);
  color: var(--tt-color-accent);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-bold);
}

/* Plain variant: the check mark without the disc. */
.tt-check-list--plain li { padding-left: 1.5rem; }

.tt-check-list--plain li::before {
  background: none;
  width: auto;
  height: auto;
  font-size: var(--tt-text-base);
}

/* Emoji-led list: put the emoji in a <span class="tt-icon-list__icon">. */
/* Doubled class: the reset must beat legacy descendant rules such as
   `.card ul` in styles.css. */
.tt-icon-list.tt-icon-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tt-space-3);
  font-size: var(--tt-text-sm);
}

.tt-icon-list li {
  position: relative;
  padding-left: 2rem;
  line-height: var(--tt-leading-relaxed);
}

.tt-icon-list__icon {
  position: absolute;
  left: 0;
  top: 0.125rem;
  font-size: var(--tt-text-base);
  line-height: inherit;
}

/* A list of links, each led by an emoji. */
/* Doubled class: the reset must beat legacy descendant rules such as
   `.card ul` in styles.css. */
.tt-link-list.tt-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tt-space-1);
}

.tt-link-list a {
  display: flex;
  align-items: flex-start;
  gap: var(--tt-space-2);
  padding: var(--tt-space-2) var(--tt-space-3);
  border-radius: var(--tt-radius-sm);
  color: var(--tt-color-accent);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-medium);
  text-decoration: none;
  transition: background-color var(--tt-duration) var(--tt-ease),
    color var(--tt-duration) var(--tt-ease);
}

.tt-link-list a:hover {
  background: var(--tt-orange-soft);
  color: var(--tt-color-accent-hover);
}

/* ==========================================================================
   9. FAQ
   --------------------------------------------------------------------------
   Works two ways:
     <details class="tt-faq__item"> ... </details>          (no JavaScript)
     <div class="tt-faq__item"><button class="tt-faq__q" aria-expanded>...
   ========================================================================== */

.tt-faq {
  display: grid;
  gap: var(--tt-space-4);
}

.tt-faq__item {
  background: var(--tt-surface-card);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-lg);
  overflow: hidden;
}

.tt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-4);
  width: 100%;
  padding: var(--tt-space-4) var(--tt-space-6);

  background: none;
  border: 0;
  cursor: pointer;

  color: var(--tt-text-heading);
  font-family: inherit;
  font-size: var(--tt-text-base);
  font-weight: var(--tt-weight-bold);
  text-align: left;
  list-style: none;
  transition: color var(--tt-duration) var(--tt-ease);
}

.tt-faq__q::-webkit-details-marker { display: none; }

.tt-faq__q:hover { color: var(--tt-color-accent); }

.tt-faq__q::after {
  content: '▾';
  flex-shrink: 0;
  color: var(--tt-color-accent);
  font-size: var(--tt-text-sm);
  transition: transform var(--tt-duration) var(--tt-ease);
}

details[open] > .tt-faq__q::after,
.tt-faq__q[aria-expanded='true']::after {
  transform: rotate(180deg);
}

.tt-faq__a {
  padding: 0 var(--tt-space-6) var(--tt-space-5);
  color: var(--tt-text-body);
  font-size: var(--tt-text-sm);
  line-height: var(--tt-leading-relaxed);
}

.tt-faq__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   10. FORMS
   ========================================================================== */

.tt-field {
  display: grid;
  gap: var(--tt-space-2);
}

.tt-label {
  color: var(--tt-text-heading);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
}

.tt-input,
.tt-textarea,
.tt-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-lg);
  background: #fff;
  color: var(--tt-text-body);
  font-family: inherit;
  font-size: var(--tt-text-base);
  line-height: 1.5;
  transition: border-color var(--tt-duration) var(--tt-ease),
    box-shadow var(--tt-duration) var(--tt-ease);
}

.tt-input::placeholder,
.tt-textarea::placeholder {
  color: var(--tt-text-muted);
}

.tt-input:focus,
.tt-textarea:focus,
.tt-select:focus {
  outline: none;
  border-color: var(--tt-color-accent);
  box-shadow: var(--tt-focus-ring);
}

.tt-textarea {
  min-height: 8rem;
  resize: vertical;
}

.tt-select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.25rem;
}

.tt-help {
  color: var(--tt-text-muted);
  font-size: var(--tt-text-xs);
}

.tt-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--tt-space-3);
  font-size: var(--tt-text-sm);
  cursor: pointer;
}

.tt-checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  accent-color: var(--tt-color-accent);
  flex-shrink: 0;
}

/* ==========================================================================
   11. REVIEW / QUOTE
   ========================================================================== */

.tt-review__head {
  display: flex;
  align-items: flex-start;
  gap: var(--tt-space-3);
  margin-bottom: var(--tt-space-4);
}

.tt-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--tt-yellow);
  color: var(--tt-dark);
  font-size: var(--tt-text-xl);
  font-weight: var(--tt-weight-bold);
  overflow: hidden;
}

.tt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-avatar--lg {
  width: 11rem;
  height: 11rem;
  font-size: 2.5rem;
}

.tt-review__name {
  margin: 0;
  color: var(--tt-text-heading);
  font-size: var(--tt-text-base);
  font-weight: var(--tt-weight-bold);
}

.tt-review__meta {
  margin: 0;
  color: var(--tt-text-muted);
  font-size: var(--tt-text-xs);
}

.tt-stars {
  color: var(--tt-amber);
  font-size: var(--tt-text-base);
  letter-spacing: -0.02em;
}

.tt-quote {
  margin: 0;
  color: var(--tt-text-body);
  font-size: var(--tt-text-sm);
  line-height: var(--tt-leading-relaxed);
}

.tt-quote--italic {
  font-style: italic;
  color: rgba(30, 36, 43, 0.9);
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.tt-footer {
  background: #fff;
  border-top: 1px solid var(--tt-border-subtle);
  padding-block: var(--tt-space-14) var(--tt-space-10);
  color: rgba(30, 36, 43, 0.8);
}

.tt-footer h4 {
  margin-bottom: var(--tt-space-3);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
}

.tt-footer p {
  margin-bottom: var(--tt-space-2);
  font-size: var(--tt-text-xs);
  color: var(--tt-text-muted);
}

.tt-footer a {
  color: var(--tt-text-muted);
}

.tt-footer a:hover {
  color: var(--tt-color-accent);
}

.tt-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--tt-space-8);
  margin-bottom: var(--tt-space-12);
}

.tt-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-2);
  color: var(--tt-text-heading);
  font-size: var(--tt-text-lg);
  font-weight: var(--tt-weight-bold);
}

.tt-footer__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--tt-radius-sm);
  background: var(--tt-color-accent);
  color: #fff;
  font-weight: var(--tt-weight-black);
}

.tt-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-4);
  padding-top: var(--tt-space-8);
  border-top: 1px solid var(--tt-border-subtle);
  color: var(--tt-text-muted);
  font-size: var(--tt-text-2xs);
}

@media (max-width: 767px) {
  .tt-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .tt-footer__legal { justify-content: center; text-align: center; }
}

/* ==========================================================================
   13. PROSE
   --------------------------------------------------------------------------
   For long-form text pages (terms, privacy, blog posts) that are written as
   plain HTML rather than assembled from components.
   ========================================================================== */

.tt-prose {
  max-width: 44rem;
  color: var(--tt-text-body);
  font-size: var(--tt-text-base);
  line-height: var(--tt-leading-relaxed);
}

.tt-prose h2 {
  margin-top: var(--tt-space-10);
  font-size: var(--tt-text-3xl);
}

.tt-prose h3 {
  margin-top: var(--tt-space-8);
  font-size: var(--tt-text-xl);
}

.tt-prose h4 {
  margin-top: var(--tt-space-6);
  margin-bottom: var(--tt-space-2);
  font-size: var(--tt-text-base);
}

.tt-prose > :first-child { margin-top: 0; }
.tt-prose > div > :first-child { margin-top: 0; }

/* Table of contents for a long document. */
.tt-toc {
  margin-bottom: var(--tt-space-10);
  padding: var(--tt-space-6);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  background: var(--tt-bg);
}

.tt-toc h3 {
  margin: 0 0 var(--tt-space-4);
  font-size: var(--tt-text-base);
  font-weight: var(--tt-weight-bold);
}

.tt-toc__list.tt-toc__list {
  display: grid;
  gap: var(--tt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tt-text-sm);
}

.tt-toc__list a {
  display: block;
  padding-block: var(--tt-space-1);
  border-bottom: 1px solid transparent;
  text-decoration: none;
}

.tt-toc__list a:hover { border-bottom-color: var(--tt-color-accent); }

.tt-prose ul,
.tt-prose ol {
  margin: 0 0 var(--tt-space-4);
  padding-left: 1.25rem;
}

.tt-prose li { margin-bottom: var(--tt-space-2); }

/* The table of contents keeps its own tighter rhythm inside prose. */
.tt-prose .tt-toc__list { padding-left: 0; }
.tt-prose .tt-toc__list li { margin-bottom: 0; }

.tt-prose dl { margin: 0 0 var(--tt-space-4); }

.tt-prose dt {
  color: var(--tt-text-heading);
  font-weight: var(--tt-weight-bold);
}

.tt-prose dd { margin: 0 0 var(--tt-space-3); }
.tt-prose dd:last-child { margin-bottom: 0; }

.tt-prose a { text-decoration: underline; text-underline-offset: 2px; }

.tt-prose blockquote {
  margin: var(--tt-space-6) 0;
  padding: var(--tt-space-5) var(--tt-space-6);
  border-left: 3px solid var(--tt-color-accent);
  border-radius: var(--tt-radius-md);
  background: var(--tt-orange-soft);
}

.tt-prose blockquote > :last-child { margin-bottom: 0; }

/* ==========================================================================
   14. PAGE PATTERNS
   --------------------------------------------------------------------------
   Bigger arrangements that recur across the site. They exist so a page never
   has to reach for an inline style to build one.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   The dotted band at the top of a page: copy on the left, art on the right.
   Drop .tt-hero__media for a text-only hero. */

.tt-hero {
  padding-block: var(--tt-section-y);
  background-color: var(--tt-surface-page);
  background-image: var(--tt-dots-image);
  background-size: var(--tt-dots-size);
  border-bottom: 1px solid var(--tt-border-subtle);
}

.tt-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tt-space-12);
  align-items: center;
}

.tt-hero__inner--center {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.tt-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-hero__media img {
  width: 100%;
  max-width: 20rem;
  height: auto;
}

/* Oversized emoji used as hero art. */
.tt-emoji-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-5);
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
}

.tt-hero > :last-child,
.tt-hero__inner > div > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .tt-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--tt-space-8); }
  .tt-hero__media { order: -1; }
  .tt-hero__media img { max-width: 13rem; }
}

/* --- Stat ----------------------------------------------------------------
   A counted number over a short label. Three or four across, never more. */

.tt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--tt-space-8);
  text-align: center;
}

.tt-stat {
  animation: tt-rise 0.8s var(--tt-ease) backwards;
}

.tt-stat:nth-child(2) { animation-delay: 0.15s; }
.tt-stat:nth-child(3) { animation-delay: 0.3s; }
.tt-stat:nth-child(4) { animation-delay: 0.45s; }

@keyframes tt-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.tt-stat__value {
  color: var(--tt-text-heading);
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  font-weight: var(--tt-weight-black);
  line-height: 1.1;
  letter-spacing: var(--tt-tracking-tight);
  margin-bottom: var(--tt-space-2);
}

.tt-stat__label {
  color: var(--tt-color-accent);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
}

/* --- Carousel ------------------------------------------------------------
   Frame + arrows + dots. The slides themselves are toggled by page script. */

.tt-carousel {
  max-width: 40rem;
  margin-inline: auto;
}

.tt-carousel--wide { max-width: 52rem; }

.tt-carousel__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  background: var(--tt-surface-card);
  box-shadow: var(--tt-shadow-card);
}

.tt-carousel__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fixed-height frame for slides of differently sized artwork. */
.tt-carousel__frame--tall { height: 25rem; }

.tt-carousel__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--tt-space-2);
}

.tt-carousel__slide[hidden] { display: none; }

.tt-carousel__slide img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 767px) {
  .tt-carousel__frame--tall { height: 17rem; }
}

.tt-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-4);
  margin-top: var(--tt-space-5);
}

.tt-carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--tt-color-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--tt-text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--tt-duration) var(--tt-ease),
    box-shadow var(--tt-duration) var(--tt-ease);
}

.tt-carousel__btn:hover {
  background: var(--tt-color-accent-hover);
  box-shadow: var(--tt-shadow-soft);
}

.tt-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--tt-space-2);
}

.tt-carousel__dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tt-border-strong);
  cursor: pointer;
  transition: background-color var(--tt-duration) var(--tt-ease),
    transform var(--tt-duration) var(--tt-ease);
}

.tt-carousel__dot:hover { background: var(--tt-orange-border); }

.tt-carousel__dot.is-active {
  background: var(--tt-color-accent);
  transform: scale(1.2);
}

/* Arrows parked outside the frame, for a carousel of quotes rather than
   images. They fold back inside the frame when there is no room beside it. */
.tt-carousel--quotes { position: relative; }

.tt-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tt-color-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--tt-text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--tt-duration) var(--tt-ease),
    box-shadow var(--tt-duration) var(--tt-ease);
}

.tt-carousel__arrow:hover {
  background: var(--tt-color-accent-hover);
  box-shadow: var(--tt-shadow-soft);
}

.tt-carousel__arrow--prev { left: -3.5rem; }
.tt-carousel__arrow--next { right: -3.5rem; }

@media (max-width: 1023px) {
  .tt-carousel__arrow--prev { left: 0.25rem; }
  .tt-carousel__arrow--next { right: 0.25rem; }
}

/* --- Person --------------------------------------------------------------
   A teacher card: round portrait, name, role, bio, then an optional tinted
   box of specialisms and one button pinned to the bottom of the card. */

.tt-person {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--tt-space-8) var(--tt-space-6);
  text-align: center;
  background: var(--tt-surface-card);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-card);
  transition: border-color var(--tt-duration-slow) var(--tt-ease),
    box-shadow var(--tt-duration-slow) var(--tt-ease),
    transform var(--tt-duration-slow) var(--tt-ease);
}

.tt-person:hover {
  transform: translateY(-3px);
  border-color: var(--tt-orange-border);
  box-shadow: var(--tt-shadow-soft);
}

.tt-person__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto var(--tt-space-5);
  border-radius: 50%;
  overflow: hidden;
  background: var(--tt-yellow);
  color: var(--tt-dark);
  font-size: var(--tt-text-3xl);
  font-weight: var(--tt-weight-bold);
  flex-shrink: 0;
}

.tt-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-person__name {
  margin-bottom: var(--tt-space-2);
  font-size: var(--tt-text-xl);
  color: var(--tt-text-heading);
}

.tt-person__role {
  margin-bottom: var(--tt-space-5);
  color: var(--tt-text-muted);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
}

.tt-person__bio {
  flex-grow: 1;
  margin-bottom: var(--tt-space-4);
  font-size: var(--tt-text-sm);
  line-height: var(--tt-leading-relaxed);
  text-align: left;
}

.tt-person__spec {
  margin-bottom: var(--tt-space-5);
  padding: var(--tt-space-4);
  border: 1px solid var(--tt-yellow-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-yellow-light);
  text-align: left;
}

.tt-person__spec h5 {
  margin: 0 0 var(--tt-space-2);
  color: var(--tt-text-heading);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-bold);
  letter-spacing: var(--tt-tracking-wide);
  text-transform: uppercase;
}

.tt-person__spec ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tt-text-sm);
}

.tt-person__spec li + li { margin-top: var(--tt-space-1); }

.tt-person .tt-btn,
.tt-person .btn { margin-top: auto; }

/* The founder's card: wider, larger portrait, body copy in the flow. */
.tt-person--lead {
  max-width: 50rem;
  margin-inline: auto;
  padding: var(--tt-space-12) var(--tt-space-8);
}

.tt-person--lead:hover { transform: none; }

.tt-person--lead .tt-person__photo {
  width: 11rem;
  height: 11rem;
  margin-bottom: var(--tt-space-8);
}

.tt-person--lead .tt-person__name { font-size: var(--tt-text-3xl); }
.tt-person--lead .tt-person__role { font-size: var(--tt-text-lg); }

.tt-person--lead .tt-person__bio {
  flex-grow: 0;
  font-size: var(--tt-text-base);
}

.tt-person--lead .tt-person__spec {
  max-width: 25rem;
  margin-inline: auto;
  text-align: center;
}

.tt-person--lead .tt-person__spec ul { text-align: center; }

/* --- Social row ----------------------------------------------------------
   Rounded brand tile + label. The tile keeps each network's own colour —
   that is the one place a non-brand colour is allowed. */

.tt-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-8);
}

.tt-social__link {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-3);
  color: var(--tt-text-body);
  font-weight: var(--tt-weight-bold);
  text-decoration: none;
}

.tt-social__link:hover { color: var(--tt-color-accent); }

.tt-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--tt-radius-md);
  color: #fff;
  font-size: var(--tt-text-xl);
}

.tt-social__icon--instagram {
  background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
}
.tt-social__icon--linkedin { background: #0077b5; }
.tt-social__icon--tiktok { background: #000; }
.tt-social__icon--spotify { background: #1db954; }
.tt-social__icon--youtube { background: #ff0000; }

/* --- Media ---------------------------------------------------------------
   A framed image inside the content flow. */

.tt-media {
  display: block;
  border-radius: var(--tt-radius-xl);
  overflow: hidden;
}

.tt-media img {
  display: block;
  width: 100%;
  height: auto;
}

.tt-media--bordered {
  border: 1px solid var(--tt-border-subtle);
  box-shadow: var(--tt-shadow-card);
}

.tt-embed {
  position: relative;
  border-radius: var(--tt-radius-xl);
  overflow: hidden;
  border: 1px solid var(--tt-border-subtle);
  box-shadow: var(--tt-shadow-card);
  aspect-ratio: 16 / 9;
}

.tt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- CTA band ------------------------------------------------------------
   The full-width invitation: a sentence and one button, on yellow. */

.tt-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-8);
  padding: var(--tt-space-10);
  border: 1px solid var(--tt-yellow-border);
  border-radius: var(--tt-radius-xl);
  background: var(--tt-yellow);
}

.tt-cta-band__text {
  flex: 1 1 22rem;
}

.tt-cta-band__text > :last-child { margin-bottom: 0; }

.tt-cta-band h3 {
  margin-bottom: var(--tt-space-2);
  font-size: var(--tt-text-2xl);
}

.tt-cta-band p {
  color: rgba(30, 36, 43, 0.85);
}

.tt-cta-band--accent {
  background: var(--tt-color-accent);
  border-color: transparent;
  color: #fff;
}

.tt-cta-band--accent h3 { color: #fff; }
.tt-cta-band--accent p { color: rgba(255, 255, 255, 0.9); }

/* --- CTA band, speech-bubble variant -------------------------------------
   Same band, drawn as something the podcast is saying: a tail on the edge
   that faces the answer. Side-by-side it points right at the reply card;
   stacked on small screens it points down at it instead. */

.tt-cta-band--bubble {
  --tt-bubble-fill: var(--tt-yellow);
  --tt-bubble-edge: var(--tt-yellow-border);
  position: relative;
}

.tt-cta-band--accent.tt-cta-band--bubble {
  --tt-bubble-fill: var(--tt-color-accent);
  --tt-bubble-edge: transparent;
}

.tt-cta-band--bubble::before,
.tt-cta-band--bubble::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Tail pointing right, centred on the trailing edge. */
.tt-cta-band--bubble::before {
  top: 50%;
  left: 100%;
  width: 21px;
  height: 34px;
  transform: translateY(-50%);
  background: var(--tt-bubble-edge);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tt-cta-band--bubble::after {
  top: 50%;
  left: 100%;
  width: 20px;
  height: 32px;
  transform: translateY(-50%);
  background: var(--tt-bubble-fill);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (max-width: 746px) {
  /* Stacked: the tail drops to the bottom edge and points down. */
  .tt-cta-band--bubble::before {
    top: 100%;
    left: var(--tt-space-10);
    width: 34px;
    height: 21px;
    transform: none;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .tt-cta-band--bubble::after {
    top: 100%;
    left: calc(var(--tt-space-10) + 1px);
    width: 32px;
    height: 20px;
    transform: none;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}

/* --- Price tier ----------------------------------------------------------
   One purchasable bundle inside a pricing card: the amount, then what it
   works out to per unit. Three tints: standard, alternative, best value. */

.tt-tier {
  padding: var(--tt-space-5);
  margin-bottom: var(--tt-space-4);
  border: 1px solid var(--tt-orange-border);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-orange-soft);
  text-align: center;
}

.tt-tier__amount {
  color: var(--tt-color-accent);
  font-size: var(--tt-text-xl);
  font-weight: var(--tt-weight-bold);
  line-height: 1.25;
}

.tt-tier__unit {
  margin-top: var(--tt-space-1);
  color: var(--tt-text-muted);
  font-size: var(--tt-text-sm);
}

.tt-tier--highlight {
  background: var(--tt-yellow-light);
  border-color: var(--tt-yellow-border);
}

.tt-tier--highlight .tt-tier__amount { color: var(--tt-dark); }

.tt-tier--deal {
  background: var(--tt-green-soft);
  border-color: #a7f3d0;
}

.tt-tier--deal .tt-tier__amount { color: #047857; }

/* The line naming what a group of tiers buys you. */
.tt-tier-label {
  margin-bottom: var(--tt-space-4);
  color: var(--tt-text-body);
  font-size: var(--tt-text-lg);
}

/* --- Loading & empty states ---------------------------------------------- */

.tt-loading {
  padding-block: var(--tt-space-16);
  text-align: center;
  color: var(--tt-text-muted);
}

.tt-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--tt-space-4);
  border: 3px solid var(--tt-border-subtle);
  border-top-color: var(--tt-color-accent);
  border-radius: 50%;
  animation: tt-spin 1s linear infinite;
}

.tt-spinner--sm {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-width: 2px;
}

@keyframes tt-spin {
  to { transform: rotate(360deg); }
}

.tt-empty {
  padding-block: var(--tt-space-16);
  text-align: center;
  color: var(--tt-text-muted);
}

.tt-empty__icon {
  margin-bottom: var(--tt-space-4);
  font-size: 3rem;
  line-height: 1;
}

/* --- Search field --------------------------------------------------------
   A .tt-input with room for the magnifier that sits inside it. */

.tt-search {
  position: relative;
  flex-shrink: 0;
}

.tt-search .tt-input { padding-left: 2.75rem; }

.tt-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--tt-text-muted);
  pointer-events: none;
}

/* --- Toast ---------------------------------------------------------------
   A short confirmation in the bottom-right corner. */

.tt-toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 10001;
  max-width: min(22rem, calc(100vw - 2.5rem));
  padding: var(--tt-space-3) var(--tt-space-5);
  border-radius: var(--tt-radius-pill);
  background: var(--tt-dark);
  color: #fff;
  font-family: var(--tt-font-sans);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-bold);
  box-shadow: 0 12px 30px rgba(30, 36, 43, 0.25);
  animation: tt-toast-in 0.3s var(--tt-ease);
}

.tt-toast--success { background: var(--tt-green); }
.tt-toast--accent { background: var(--tt-color-accent); }

@keyframes tt-toast-in {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: none; }
}

/* --- Modal ---------------------------------------------------------------
   A centred dialog over a dimmed page. Hide it with the `hidden` attribute
   rather than an inline display, so the CSS keeps ownership of the layout. */

.tt-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tt-space-4);
  background: rgba(30, 36, 43, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tt-modal[hidden] { display: none; }

.tt-modal__dialog {
  width: min(37.5rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--tt-surface-card);
  border-radius: var(--tt-radius-xl);
  box-shadow: 0 24px 60px rgba(30, 36, 43, 0.3);
}

.tt-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tt-space-4);
  padding: var(--tt-space-6) var(--tt-space-6) var(--tt-space-4);
  border-bottom: 1px solid var(--tt-border-subtle);
}

.tt-modal__head h2 {
  margin: 0;
  font-size: var(--tt-text-2xl);
}

.tt-modal__head p {
  margin: var(--tt-space-1) 0 0;
  color: var(--tt-text-muted);
  font-size: var(--tt-text-sm);
}

.tt-modal__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tt-text-muted);
  font-family: inherit;
  font-size: var(--tt-text-xl);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--tt-duration) var(--tt-ease),
    color var(--tt-duration) var(--tt-ease);
}

.tt-modal__close:hover {
  background: var(--tt-bg);
  color: var(--tt-color-accent);
}

.tt-modal__body {
  padding: var(--tt-space-6);
  display: grid;
  gap: var(--tt-space-4);
}

.tt-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tt-space-3);
  padding-top: var(--tt-space-2);
}

/* A labelled row with a switch — one preference per row. */
.tt-option {
  padding: var(--tt-space-4);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg);
}

.tt-option__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
  margin-bottom: var(--tt-space-2);
}

.tt-option__label {
  display: flex;
  align-items: center;
  gap: var(--tt-space-2);
  color: var(--tt-text-heading);
  font-weight: var(--tt-weight-bold);
  font-size: var(--tt-text-sm);
}

.tt-option__text {
  margin: 0;
  color: var(--tt-text-muted);
  font-size: var(--tt-text-xs);
  line-height: var(--tt-leading-relaxed);
}

.tt-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-border-strong);
  cursor: pointer;
  transition: background-color var(--tt-duration) var(--tt-ease);
}

.tt-switch::after {
  content: '';
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--tt-duration) var(--tt-ease);
}

.tt-switch.is-on { background: var(--tt-green); }
.tt-switch.is-on::after { transform: translateX(1.25rem); }

.tt-switch[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* --- Page head -----------------------------------------------------------
   The short title band on a text page (terms, privacy, cookies). */

.tt-page-head {
  padding-block: var(--tt-section-y-tight);
  border-bottom: 1px solid var(--tt-border-subtle);
}

.tt-page-head h1 {
  margin-bottom: var(--tt-space-3);
}

.tt-page-head p {
  margin-bottom: 0;
  color: var(--tt-text-muted);
  font-size: var(--tt-text-lg);
}

/* ==========================================================================
   15. TABLES
   ========================================================================== */

.tt-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-xl);
  background: var(--tt-surface-card);
}

.tt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tt-text-sm);
}

.tt-table th,
.tt-table td {
  padding: var(--tt-space-4) var(--tt-space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tt-border-subtle);
}

.tt-table thead th {
  background: var(--tt-bg);
  color: var(--tt-text-heading);
  font-weight: var(--tt-weight-bold);
  white-space: nowrap;
}

.tt-table tbody th {
  color: var(--tt-text-heading);
  font-weight: var(--tt-weight-bold);
  width: 30%;
}

.tt-table tr:last-child th,
.tt-table tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */

.tt-center { text-align: center; }
.tt-start { text-align: left; }

.tt-muted { color: var(--tt-text-muted); }
.tt-accent { color: var(--tt-color-accent); }
.tt-ink { color: var(--tt-text-heading); }
.tt-on-dark { color: rgba(255, 255, 255, 0.85); }

.tt-text-xs { font-size: var(--tt-text-xs); }
.tt-text-sm { font-size: var(--tt-text-sm); }
.tt-text-lg { font-size: var(--tt-text-lg); }

.tt-bold { font-weight: var(--tt-weight-bold); }
.tt-black { font-weight: var(--tt-weight-black); }

.tt-measure { max-width: 44rem; }
.tt-measure-center { max-width: 44rem; margin-inline: auto; }

/* The wavy underline the hero uses on the accented word. */
.tt-underline {
  color: var(--tt-color-accent);
  text-decoration: underline wavy rgba(232, 90, 55, 0.3);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.tt-divider {
  height: 1px;
  border: 0;
  margin: var(--tt-space-8) 0;
  background: var(--tt-border-subtle);
}

.tt-mt-0 { margin-top: 0; }
.tt-mt-2 { margin-top: var(--tt-space-2); }
.tt-mt-4 { margin-top: var(--tt-space-4); }
.tt-mt-6 { margin-top: var(--tt-space-6); }
.tt-mt-8 { margin-top: var(--tt-space-8); }
.tt-mb-0 { margin-bottom: 0; }
.tt-mb-4 { margin-bottom: var(--tt-space-4); }
.tt-mb-6 { margin-bottom: var(--tt-space-6); }
.tt-mb-8 { margin-bottom: var(--tt-space-8); }

.tt-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;
}