@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Oxygen:wght@300;400;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");

/* ==========================================================================
   Claymorphism Design System — Core Tokens & Foundations
   Cotton Candy Studio & Toybox Pop Palette, 3-Layer Shadow Equation,
   Pressed Dough Wells, Super-Rounded Inflated Geometry, and Marshmallow Physics.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Typography ---- */
  --clay-font-display: "Fredoka", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --clay-font-sans: "Plus Jakarta Sans", "Oxygen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --clay-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Primary Pastel Clay Surfaces (Cotton Candy Studio) ---- */
  --clay-canvas-bg: linear-gradient(135deg, oklch(0.96 0.025 300), oklch(0.97 0.02 55));
  --clay-surface: oklch(0.99 0.005 85);       /* #FFFDFB Marshmallow Cream */
  --clay-well-bg: oklch(0.94 0.025 295);      /* #F3EEFF Soft Lavender Dough Well */
  --clay-ink: oklch(0.23 0.04 285);           /* #1E1B3A Deep Plum Ink (>10:1 AAA contrast) */
  --clay-ink-muted: oklch(0.45 0.04 285);     /* #5E5878 Muted Plum Ink */
  --clay-ink-faint: oklch(0.62 0.03 285);     /* #8C86A8 Faint Plum Ink */

  /* ---- Pastel Candy Accents ---- */
  --clay-lilac: oklch(0.81 0.11 295);         /* #C4B5FD Lilac Puff */
  --clay-pink: oklch(0.82 0.12 345);          /* #F9A8D4 Bubblegum Clay */
  --clay-pink-dark: oklch(0.65 0.20 345);     /* #DB2777 Rich Bubblegum Shade */
  --clay-mint: oklch(0.88 0.11 162);          /* #A7F3D0 Matcha Mint */
  --clay-butter: oklch(0.91 0.11 92);         /* #FDE68A Honey Butter */
  --clay-sky: oklch(0.82 0.10 245);           /* #93C5FD Sky Cloud */
  --clay-coral: oklch(0.79 0.12 22);          /* #FCA5A5 Coral Pop */

  /* ---- Midnight Velvet Dark Mode (Footer & Deep Panels) ---- */
  --clay-dark-canvas: oklch(0.17 0.03 285);   /* #18142C Deep Night Canvas */
  --clay-dark-surface: oklch(0.24 0.045 285); /* #261F42 Obsidian Clay */
  --clay-dark-well: oklch(0.19 0.035 285);    /* #1B1632 Recessed Night Well */
  --clay-dark-ink: oklch(0.96 0.015 290);     /* #F5F3FF Crisp Lavender White */
  --clay-dark-muted: oklch(0.78 0.025 290);   /* Dim Lavender Text */

  /* ---- Super-Rounded Inflation Radius Scale (>= 2x inner offset) ---- */
  --clay-radius-xs: 8px;
  --clay-radius-sm: 16px;                     /* Small chips / badges */
  --clay-radius-md: 22px;                     /* Inputs / Dough Wells */
  --clay-radius-lg: 30px;                     /* Secondary cards / stages */
  --clay-radius-xl: 40px;                     /* Main inflated containers */
  --clay-radius-pill: 9999px;                 /* Marshmallow buttons & pills */
  --clay-radius-circle: 50%;

  /* ---- Marshmallow Spring Easing & Timing ---- */
  --clay-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --clay-ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --clay-duration: 220ms;

  /* ---- Fluid Layout Containers ---- */
  --clay-container-sm: 760px;
  --clay-container: 1240px;
  --clay-container-wide: 1360px;

  /* ---- Backward-Compatible Aliases to Loan.co.uk Tokens ---- */
  --brand: var(--clay-pink-dark);
  --brand-hover: oklch(0.60 0.22 345);
  --brand-press: oklch(0.52 0.22 345);
  --brand-subtle: var(--clay-well-bg);
  --brand-subtle-2: oklch(0.92 0.04 345);
  --on-brand: var(--clay-surface);

  --text-strong: var(--clay-ink);
  --text-body: var(--clay-ink);
  --text-muted: var(--clay-ink-muted);
  --text-faint: var(--clay-ink-faint);
  --text-link: var(--clay-pink-dark);

  --surface-page: var(--clay-surface);
  --surface-card: var(--clay-surface);
  --surface-tint: var(--clay-well-bg);
  --surface-dark: var(--clay-dark-surface);
  --surface-sunken: var(--clay-well-bg);

  --border-subtle: oklch(1 0 0 / 0.55);
  --border-default: oklch(0.85 0.03 295 / 0.6);
  --border-brand: var(--clay-pink);

  --success: var(--clay-mint);
  --success-subtle: oklch(0.94 0.05 162);
  --warning: var(--clay-butter);
  --warning-subtle: oklch(0.96 0.05 92);
  --danger: var(--clay-coral);
  --danger-subtle: oklch(0.95 0.05 22);

  --font-sans: var(--clay-font-sans);
  --font-display: var(--clay-font-display);

  --radius-sm: var(--clay-radius-sm);
  --radius-md: var(--clay-radius-md);
  --radius-lg: var(--clay-radius-lg);
  --radius-xl: var(--clay-radius-xl);
  --radius-pill: var(--clay-radius-pill);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
}

/* ==========================================================================
   Modern Reset & Global Layout
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--clay-font-sans);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--clay-ink);
  background: var(--clay-canvas-bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--clay-font-display);
  color: var(--clay-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--clay-pink-dark);
  text-decoration: none;
  transition: color var(--clay-duration) ease, transform var(--clay-duration) var(--clay-ease-spring);
}

a:hover {
  color: var(--clay-ink);
}

::selection {
  background-color: var(--clay-pink);
  color: var(--clay-ink);
}

/* Material Symbols Rounded alignment */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Containers & Spacing
   ========================================================================== */

.clay-container, .lc-container {
  width: 100%;
  max-width: var(--clay-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.clay-container--wide, .lc-container--wide {
  max-width: var(--clay-container-wide);
}

.clay-container--narrow, .lc-container--narrow {
  max-width: var(--clay-container-sm);
}

/* ==========================================================================
   The 3-Layer Clay Surface & Pressed Dough Well Primitives
   ========================================================================== */

/* Inflated Clay Surface (Cards & Panels) */
.clay-surface, .clay-card, .lc-card {
  --_bg: var(--clay-surface);
  --_drop: oklch(0.23 0.04 285 / 0.16);
  --_hi: oklch(1 0 0 / 0.95);
  --_lo: oklch(0.88 0.03 295 / 0.50);

  background-color: var(--_bg);
  color: var(--clay-ink);
  border-radius: var(--clay-radius-xl);
  border: 1.5px solid oklch(1 0 0 / 0.65);
  box-shadow:
    0 22px 42px -10px var(--_drop),
    inset 10px 10px 20px 0 var(--_hi),
    inset -10px -10px 20px 0 var(--_lo);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  transition: transform var(--clay-duration) var(--clay-ease-spring), box-shadow var(--clay-duration) ease;
}

/* Recessed "Pressed Dough Well" for Form Inputs, Slider Tracks, and Metadata Pods */
.clay-well, .lc-well {
  --_well: var(--clay-well-bg);
  --_well-shade: oklch(from var(--_well) calc(l - 0.16) calc(c * 1.15) h / 0.55);
  --_well-rim: oklch(1 0 0 / 0.85);

  background-color: var(--_well);
  color: var(--clay-ink);
  border-radius: var(--clay-radius-md);
  border: 1.5px solid oklch(1 0 0 / 0.55);
  box-shadow:
    inset 6px 6px 14px 0 var(--_well-shade),
    inset -6px -6px 14px 0 var(--_well-rim);
}

/* ==========================================================================
   Squishy Marshmallow Buttons (.clay-btn, .lc-btn)
   4-State Lifecycle: Idle, Buoyant Hover, Squished Active, High-Contrast Focus
   ========================================================================== */

.clay-btn, .lc-btn {
  --_bg: var(--clay-lilac);
  --_fg: var(--clay-ink);
  --_drop: oklch(from var(--_bg) calc(l - 0.35) calc(c * 0.95) h / 0.30);
  --_hi: oklch(1 0 0 / 0.90);
  --_lo: oklch(from var(--_bg) calc(l - 0.17) calc(c * 1.25) h / 0.65);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 48px;
  padding-inline: 1.6rem;
  padding-block: 0.75rem;

  background-color: var(--_bg);
  color: var(--_fg);
  font-family: var(--clay-font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;

  border-radius: var(--clay-radius-pill);
  border: 1.5px solid oklch(1 0 0 / 0.65);
  box-shadow:
    0 12px 24px -6px var(--_drop),
    inset 7px 7px 14px 0 var(--_hi),
    inset -7px -7px 14px 0 var(--_lo);

  cursor: pointer;
  user-select: none;
  transition:
    transform var(--clay-duration) var(--clay-ease-spring),
    box-shadow var(--clay-duration) ease,
    background-color 150ms ease;
}

/* Hover: Buoyant upward float */
.clay-btn:hover:not(:disabled),
.lc-btn:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 20px 34px -8px var(--_drop),
    inset 9px 9px 16px 0 var(--_hi),
    inset -9px -9px 16px 0 var(--_lo);
  color: var(--_fg);
  text-decoration: none;
}

/* Active: Squishy marshmallow compression */
.clay-btn:active:not(:disabled),
.lc-btn:active:not(:disabled),
.clay-btn[aria-pressed="true"],
.lc-btn[aria-pressed="true"] {
  transform: translateY(4px) scale(0.96, 0.94);
  box-shadow:
    0 4px 10px -2px var(--_drop),
    inset 5px 5px 10px 0 var(--_hi),
    inset -9px -9px 16px 0 oklch(from var(--_bg) calc(l - 0.22) calc(c * 1.3) h / 0.78);
}

/* Focus-Visible: Mandatory WCAG high-contrast indicator */
.clay-btn:focus-visible,
.lc-btn:focus-visible {
  outline: 3px solid oklch(0.49 0.22 292);
  outline-offset: 4px;
}

/* Disabled */
.clay-btn:disabled,
.lc-btn:disabled {
  opacity: 0.55;
  box-shadow:
    inset 4px 4px 8px 0 oklch(1 0 0 / 0.5),
    inset -4px -4px 8px 0 oklch(0 0 0 / 0.12);
  transform: none;
  cursor: not-allowed;
}

/* Button Variants */
.clay-btn--primary,
.lc-btn--primary,
.clay-btn--pink {
  --_bg: var(--clay-pink);
  --_fg: var(--clay-ink);
}

.clay-btn--secondary,
.lc-btn--secondary,
.clay-btn--lilac {
  --_bg: var(--clay-lilac);
  --_fg: var(--clay-ink);
}

.clay-btn--mint {
  --_bg: var(--clay-mint);
  --_fg: var(--clay-ink);
}

.clay-btn--butter {
  --_bg: var(--clay-butter);
  --_fg: var(--clay-ink);
}

.clay-btn--cream,
.lc-btn--outline {
  --_bg: var(--clay-surface);
  --_fg: var(--clay-ink);
  --_drop: oklch(0.23 0.04 285 / 0.15);
  --_hi: oklch(1 0 0 / 0.95);
  --_lo: oklch(0.88 0.03 295 / 0.50);
}

.clay-btn--subtle,
.lc-btn--subtle {
  --_bg: var(--clay-well-bg);
  --_fg: var(--clay-ink);
  --_drop: oklch(0.23 0.04 285 / 0.10);
  --_hi: oklch(1 0 0 / 0.9);
  --_lo: oklch(0.85 0.03 295 / 0.45);
}

.clay-btn--ghost,
.lc-btn--ghost {
  --_bg: transparent;
  --_fg: var(--clay-ink);
  box-shadow: none;
  border-color: transparent;
}

.clay-btn--ghost:hover,
.lc-btn--ghost:hover {
  --_bg: var(--clay-well-bg);
  box-shadow:
    0 6px 14px -3px oklch(0.23 0.04 285 / 0.12),
    inset 4px 4px 8px 0 oklch(1 0 0 / 0.8),
    inset -4px -4px 8px 0 oklch(0.85 0.03 295 / 0.45);
}

/* Button Sizing */
.clay-btn--sm, .lc-btn--sm {
  min-height: 40px;
  padding-inline: 1.15rem;
  padding-block: 0.45rem;
  font-size: 0.875rem;
}

.clay-btn--md, .lc-btn--md {
  min-height: 48px;
  padding-inline: 1.6rem;
  padding-block: 0.75rem;
  font-size: 1rem;
}

.clay-btn--lg, .lc-btn--lg {
  min-height: 56px;
  padding-inline: 2rem;
  padding-block: 0.95rem;
  font-size: 1.125rem;
}

.clay-btn--full, .lc-btn--full {
  width: 100%;
}

/* ==========================================================================
   Puffy 3D Pill Badges (.clay-badge, .lc-badge)
   ========================================================================== */

.clay-badge, .lc-badge {
  --_bg: var(--clay-lilac);
  --_drop: oklch(from var(--_bg) calc(l - 0.35) calc(c * 0.9) h / 0.25);
  --_hi: oklch(from var(--_bg) calc(l + 0.15) calc(c * 0.5) h / 0.90);
  --_lo: oklch(from var(--_bg) calc(l - 0.16) calc(c * 1.2) h / 0.62);

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-inline: 1rem;
  padding-block: 0.45rem;
  background-color: var(--_bg);
  color: var(--clay-ink);
  font-family: var(--clay-font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--clay-radius-pill);
  border: 1px solid oklch(1 0 0 / 0.6);
  box-shadow:
    0 8px 16px -4px var(--_drop),
    inset 5px 5px 10px 0 var(--_hi),
    inset -5px -5px 10px 0 var(--_lo);
  user-select: none;
  line-height: 1.2;
}

.clay-badge--mint, .lc-badge--success { --_bg: var(--clay-mint); }
.clay-badge--butter, .lc-badge--warning { --_bg: var(--clay-butter); }
.clay-badge--pink, .lc-badge--brand { --_bg: var(--clay-pink); }
.clay-badge--sky, .lc-badge--info { --_bg: var(--clay-sky); }
.clay-badge--coral, .lc-badge--danger { --_bg: var(--clay-coral); }
.clay-badge--lilac { --_bg: var(--clay-lilac); }
.clay-badge--cream, .lc-badge--neutral {
  --_bg: var(--clay-surface);
  --_drop: oklch(0.23 0.04 285 / 0.12);
  --_hi: oklch(1 0 0 / 0.95);
  --_lo: oklch(0.88 0.03 295 / 0.45);
}

.lc-eyebrow {
  display: inline-block;
  font-family: var(--clay-font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-pink-dark);
}

/* ==========================================================================
   3D Clay Orbs & Cushions (.clay-orb)
   ========================================================================== */

.clay-orb {
  --_bg: var(--clay-pink);
  --_drop: oklch(from var(--_bg) calc(l - 0.36) calc(c * 0.95) h / 0.30);
  --_hi: oklch(1 0 0 / 0.88);
  --_lo: oklch(from var(--_bg) calc(l - 0.18) calc(c * 1.25) h / 0.68);

  inline-size: 3.5rem;
  block-size: 3.5rem;
  display: inline-grid;
  place-content: center;
  border-radius: 50%;
  background-color: var(--_bg);
  background-image: radial-gradient(circle at 30% 28%, oklch(1 0 0 / 0.55) 0%, transparent 55%);
  color: var(--clay-ink);
  font-family: var(--clay-font-display);
  font-weight: 900;
  box-shadow:
    0 14px 26px -8px var(--_drop),
    inset 7px 7px 14px 0 var(--_hi),
    inset -7px -7px 14px 0 var(--_lo);
  border: 1.5px solid oklch(1 0 0 / 0.6);
}

.clay-orb--sm {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  font-size: 1.1rem;
  box-shadow:
    0 8px 16px -4px var(--_drop),
    inset 5px 5px 10px 0 var(--_hi),
    inset -5px -5px 10px 0 var(--_lo);
}

.clay-orb--squircle {
  border-radius: 34%;
}

/* ==========================================================================
   Forms & Pressed Dough-Well Inputs (.clay-input, .clay-select, .lc-input)
   Focus Inflation Shift: Flips from Concave Well to Raised 3D Pillow
   ========================================================================== */

.clay-field, .lc-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-block-end: 1.25rem;
  width: 100%;
}

.clay-label, .lc-label {
  padding-inline-start: 0.5rem;
  font-family: var(--clay-font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clay-ink-muted);
}

.clay-input, .clay-select, .lc-input, .lc-select {
  --_well: var(--clay-well-bg);
  inline-size: 100%;
  min-height: 52px;
  padding-inline: 1.35rem;
  padding-block: 0.75rem;
  background-color: var(--_well);
  color: var(--clay-ink);
  font-family: var(--clay-font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--clay-radius-md);
  border: 2px solid oklch(1 0 0 / 0.6);
  box-shadow:
    inset 6px 6px 14px 0 oklch(from var(--_well) calc(l - 0.16) calc(c * 1.15) h / 0.55),
    inset -6px -6px 14px 0 oklch(1 0 0 / 0.85);
  transition:
    background-color 180ms ease,
    box-shadow 200ms ease,
    border-color 180ms ease,
    transform 200ms var(--clay-ease-spring);
}

.clay-input::placeholder, .lc-input::placeholder {
  color: var(--clay-ink-muted);
  opacity: 0.75;
  font-weight: 500;
}

/* FOCUS INFLATION: Raised 3D Pillow */
.clay-input:focus, .clay-select:focus,
.lc-input:focus, .lc-select:focus,
.clay-input:focus-visible, .clay-select:focus-visible {
  outline: 3px solid oklch(0.68 0.16 295);
  outline-offset: 3px;
  background-color: var(--clay-surface);
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px -6px oklch(0.23 0.04 285 / 0.18),
    inset 7px 7px 14px 0 oklch(1 0 0 / 0.95),
    inset -7px -7px 14px 0 oklch(from var(--clay-surface) calc(l - 0.12) 0.04 295 / 0.50);
}

.clay-select, .lc-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235E5878' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 48px;
}

/* Validation Error Pill */
.clay-error-pill, .lc-field-error {
  display: inline-flex;
  align-self: flex-start;
  padding-inline: 1rem;
  padding-block: 0.4rem;
  background-color: var(--clay-coral);
  color: oklch(0.22 0.08 22);
  font-family: var(--clay-font-display);
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: var(--clay-radius-pill);
  box-shadow:
    0 6px 14px -4px oklch(from var(--clay-coral) calc(l - 0.3) c h / 0.35),
    inset 4px 4px 8px 0 oklch(1 0 0 / 0.8),
    inset -4px -4px 8px 0 oklch(from var(--clay-coral) calc(l - 0.18) calc(c * 1.2) h / 0.65);
  margin-top: 0.25rem;
}

.clay-field--error .clay-input,
.clay-field--error .clay-select,
.lc-field--error .lc-input,
.lc-field--error .lc-select {
  border-color: var(--clay-coral);
  background-color: oklch(0.97 0.03 22);
}

/* ==========================================================================
   Puffy Segmented Pill Bar (.clay-segmented, .lc-tabs)
   ========================================================================== */

.clay-segmented, .lc-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem;
  background-color: var(--clay-well-bg);
  border-radius: var(--clay-radius-pill);
  border: 1.5px solid oklch(1 0 0 / 0.55);
  box-shadow:
    inset 6px 6px 12px 0 oklch(from var(--clay-well-bg) calc(l - 0.16) calc(c * 1.1) h / 0.55),
    inset -6px -6px 12px 0 oklch(1 0 0 / 0.85);
  overflow-x: auto;
  max-width: 100%;
}

.clay-segmented__option, .lc-tab {
  padding-inline: 1.35rem;
  padding-block: 0.75rem;
  border: none;
  border-radius: var(--clay-radius-pill);
  background: transparent;
  color: var(--clay-ink-muted);
  font-family: var(--clay-font-display);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 200ms var(--clay-ease-spring), box-shadow 200ms ease, background-color 150ms ease, color 150ms ease;
}

.clay-segmented__option:hover, .lc-tab:hover {
  color: var(--clay-ink);
}

.clay-segmented__option.active,
.clay-segmented__option[aria-pressed="true"],
.lc-tab--active {
  --_active-bg: var(--clay-butter);
  background-color: var(--_active-bg);
  color: var(--clay-ink);
  box-shadow:
    0 8px 16px -4px oklch(from var(--_active-bg) calc(l - 0.32) c h / 0.30),
    inset 5px 5px 10px 0 oklch(1 0 0 / 0.92),
    inset -5px -5px 10px 0 oklch(from var(--_active-bg) calc(l - 0.16) calc(c * 1.2) h / 0.62);
  transform: translateY(-1px);
}

/* ==========================================================================
   Hero Section & Typographic Hierarchy
   ========================================================================== */

.hero-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-badge-subtitle {
  font-family: var(--clay-font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--clay-ink-muted);
  text-transform: uppercase;
}

.clay-heading-hero, .hero-title {
  font-family: var(--clay-font-display);
  font-size: clamp(2.25rem, 5vw + 0.5rem, 3.85rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--clay-ink);
  margin-block: 0 1.25rem;
  text-wrap: balance;
}

.highlight-text {
  color: var(--clay-pink-dark);
  position: relative;
  display: inline-block;
}

.clay-body-copy, .hero-description {
  font-family: var(--clay-font-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--clay-ink-muted);
  max-width: 680px;
  margin-inline: auto;
  margin-block-end: 2rem;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-block-end: 2.5rem;
}

/* Hero Inflated KPI Metric Pods */
.hero-stats-strip {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.85rem;
  background-color: var(--clay-surface);
  border-radius: var(--clay-radius-xl);
  border: 1.5px solid oklch(1 0 0 / 0.7);
  box-shadow:
    0 18px 36px -10px oklch(0.23 0.04 285 / 0.14),
    inset 8px 8px 16px 0 oklch(1 0 0 / 0.95),
    inset -8px -8px 16px 0 oklch(0.88 0.03 295 / 0.45);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  border-radius: var(--clay-radius-md);
  border: 1.5px solid oklch(1 0 0 / 0.6);
  transition: transform var(--clay-duration) var(--clay-ease-spring);
}

.stat-item:hover {
  transform: translateY(-2px);
}

.stat-item--lilac {
  --_bg: var(--clay-lilac);
  background-color: var(--_bg);
  box-shadow:
    0 8px 16px -4px oklch(from var(--_bg) calc(l - 0.32) c h / 0.25),
    inset 5px 5px 10px 0 oklch(1 0 0 / 0.88),
    inset -5px -5px 10px 0 oklch(from var(--_bg) calc(l - 0.16) calc(c * 1.2) h / 0.60);
}

.stat-item--mint {
  --_bg: var(--clay-mint);
  background-color: var(--_bg);
  box-shadow:
    0 8px 16px -4px oklch(from var(--_bg) calc(l - 0.32) c h / 0.25),
    inset 5px 5px 10px 0 oklch(1 0 0 / 0.88),
    inset -5px -5px 10px 0 oklch(from var(--_bg) calc(l - 0.16) calc(c * 1.2) h / 0.60);
}

.stat-item--butter {
  --_bg: var(--clay-butter);
  background-color: var(--_bg);
  box-shadow:
    0 8px 16px -4px oklch(from var(--_bg) calc(l - 0.32) c h / 0.25),
    inset 5px 5px 10px 0 oklch(1 0 0 / 0.88),
    inset -5px -5px 10px 0 oklch(from var(--_bg) calc(l - 0.16) calc(c * 1.2) h / 0.60);
}

.stat-item--sky {
  --_bg: var(--clay-sky);
  background-color: var(--_bg);
  box-shadow:
    0 8px 16px -4px oklch(from var(--_bg) calc(l - 0.32) c h / 0.25),
    inset 5px 5px 10px 0 oklch(1 0 0 / 0.88),
    inset -5px -5px 10px 0 oklch(from var(--_bg) calc(l - 0.16) calc(c * 1.2) h / 0.60);
}

.stat-number {
  font-family: var(--clay-font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--clay-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-family: var(--clay-font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--clay-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
  white-space: nowrap;
}

/* ==========================================================================
   Workbench Bento Grid & Sticky Sidebar
   Gutter >= 28px-40px ensures outer drop shadows have clearance
   ========================================================================== */

.workbench-section {
  padding-block: 1rem clamp(2.5rem, 5vw, 4.5rem);
}

#calculator {
  scroll-margin-top: 1.5rem;
}

.workbench-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
  min-width: 0;
  width: 100%;
}

.workbench-sidebar {
  position: relative;
  min-width: 0;
  width: 100%;
}

/* Mobile Sidebar Drawer Bar & Off-canvas Drawer (< 960px) */
@media (max-width: 959px) {
  .mobile-sidebar-bar {
    position: sticky;
    top: 0.75rem;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    z-index: 40;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    width: 100%;
    padding-block: 0.25rem;
    pointer-events: auto;
  }

  .mobile-sidebar-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 1.25rem;
    min-height: 54px;
    border-radius: var(--clay-radius-pill);
    font-family: var(--clay-font-display);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow:
      0 12px 28px -6px oklch(0.23 0.04 285 / 0.22),
      inset 5px 5px 10px 0 oklch(1 0 0 / 0.95),
      inset -5px -5px 10px 0 oklch(0.88 0.03 295 / 0.45);
    transition: transform var(--clay-duration) var(--clay-ease-spring), box-shadow 180ms ease, background-color 150ms ease;
  }

  .mobile-sidebar-toggle:hover {
    transform: translateY(-2px);
    box-shadow:
      0 16px 32px -6px oklch(0.23 0.04 285 / 0.26),
      inset 5px 5px 10px 0 oklch(1 0 0 / 0.98),
      inset -5px -5px 10px 0 oklch(0.88 0.03 295 / 0.45);
  }

  .mobile-sidebar-toggle:active {
    transform: translateY(2px) scale(0.98);
    box-shadow:
      0 6px 14px -3px oklch(0.23 0.04 285 / 0.16),
      inset 3px 3px 6px 0 oklch(1 0 0 / 0.85),
      inset -3px -3px 6px 0 oklch(0.88 0.03 295 / 0.50);
  }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: oklch(0.23 0.04 285 / 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
  }

  .mobile-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .workbench-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(400px, 90vw);
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    background-color: var(--clay-bg);
    padding: 1.25rem;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 300ms var(--clay-ease-spring);
    box-shadow: 0 20px 45px oklch(0.23 0.04 285 / 0.32);
    scrollbar-width: thin;
    scrollbar-color: var(--clay-lilac) transparent;
  }

  .workbench-sidebar.mobile-open {
    transform: translateX(0);
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1.5px solid oklch(0.23 0.04 285 / 0.08);
  }

  .mobile-drawer-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clay-ink);
    font-family: var(--clay-font-display);
    font-weight: 800;
    font-size: 1.15rem;
  }

  .mobile-drawer-close {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--clay-radius-pill);
    cursor: pointer;
  }
}

/* Desktop Workbench Layout (>= 960px) */
@media (min-width: 960px) {
  .mobile-sidebar-bar,
  .mobile-drawer-backdrop,
  .mobile-drawer-header {
    display: none !important;
  }

  .workbench-grid {
    grid-template-columns: 360px 1fr;
    gap: clamp(1.75rem, 3vw, 2.5rem);
  }

  .workbench-sidebar {
    position: sticky;
    top: 1.25rem;
    align-self: start;
    z-index: 20;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    transform: none !important;
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: var(--clay-lilac) transparent;
  }

  .workbench-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .workbench-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--clay-lilac);
    border-radius: var(--clay-radius-pill);
  }
}

.workbench-main {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  min-width: 0;
  width: 100%;
}

.unit-card-wrapper,
.widget-wrapper {
  min-width: 0;
  width: 100%;
}

/* ==========================================================================
   Unit Sidebar Component Specifics
   ========================================================================== */

.unit-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid oklch(0.23 0.04 285 / 0.08);
}

.sidebar-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sidebar-icon {
  background-color: var(--clay-lilac);
  color: var(--clay-ink);
}

.sidebar-title {
  font-family: var(--clay-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--clay-ink);
  margin: 0;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 16px;
  color: var(--clay-ink-muted);
  pointer-events: none;
  font-size: 22px;
}

.search-input-wrapper .search-input {
  padding-left: 48px;
  border-radius: var(--clay-radius-pill);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--clay-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--clay-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.65rem;
}

.star-icon {
  color: oklch(0.82 0.18 85);
  font-size: 18px;
}

/* Favourites Grid: Puffy Candy Pills */
.favorites-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.favorite-pill {
  background-color: var(--clay-well-bg);
  border: 1px solid oklch(1 0 0 / 0.6);
  color: var(--clay-ink);
  padding: 6px 14px;
  border-radius: var(--clay-radius-pill);
  font-family: var(--clay-font-display);
  font-size: 0.825rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    inset 3px 3px 6px 0 oklch(from var(--clay-well-bg) calc(l - 0.12) c h / 0.45),
    inset -3px -3px 6px 0 oklch(1 0 0 / 0.8);
  transition: transform var(--clay-duration) var(--clay-ease-spring), box-shadow 150ms ease, background-color 150ms ease;
}

.favorite-pill:hover {
  transform: translateY(-2px);
  background-color: var(--clay-surface);
  box-shadow:
    0 4px 10px -2px oklch(0.23 0.04 285 / 0.14),
    inset 4px 4px 8px 0 oklch(1 0 0 / 0.9),
    inset -4px -4px 8px 0 oklch(0.85 0.03 295 / 0.45);
}

.favorite-pill.active {
  background-color: var(--clay-pink);
  color: var(--clay-ink);
  box-shadow:
    0 6px 14px -3px oklch(from var(--clay-pink) calc(l - 0.32) c h / 0.30),
    inset 4px 4px 8px 0 oklch(1 0 0 / 0.9),
    inset -4px -4px 8px 0 oklch(from var(--clay-pink) calc(l - 0.16) calc(c * 1.2) h / 0.62);
  transform: translateY(-1px);
}

/* Category Tabs */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.category-filter-btn {
  background-color: var(--clay-surface);
  border: 1.5px solid oklch(1 0 0 / 0.6);
  color: var(--clay-ink-muted);
  padding: 6px 12px;
  border-radius: var(--clay-radius-pill);
  font-family: var(--clay-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow:
    0 4px 8px -2px oklch(0.23 0.04 285 / 0.08),
    inset 3px 3px 6px 0 oklch(1 0 0 / 0.8),
    inset -3px -3px 6px 0 oklch(0.88 0.03 295 / 0.4);
  transition: transform var(--clay-duration) var(--clay-ease-spring), background-color 150ms ease, color 150ms ease;
}

.category-filter-btn .cat-count {
  background-color: var(--clay-well-bg);
  color: var(--clay-ink);
  padding: 1px 7px;
  border-radius: var(--clay-radius-pill);
  font-size: 11px;
  font-weight: 800;
}

.category-filter-btn:hover {
  transform: translateY(-2px);
  color: var(--clay-ink);
}

.category-filter-btn.active {
  background-color: var(--clay-butter);
  color: var(--clay-ink);
  font-weight: 800;
  box-shadow:
    0 6px 14px -3px oklch(from var(--clay-butter) calc(l - 0.32) c h / 0.28),
    inset 4px 4px 8px 0 oklch(1 0 0 / 0.9),
    inset -4px -4px 8px 0 oklch(from var(--clay-butter) calc(l - 0.16) calc(c * 1.2) h / 0.60);
  transform: translateY(-1px);
}

.category-filter-btn.active .cat-count {
  background-color: var(--clay-ink);
  color: var(--clay-surface);
}

/* Recessed Dough Well for Unit List */
.unit-list-section {
  max-height: 440px;
  overflow-y: auto;
  padding: 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: var(--clay-lilac) transparent;
}

.unit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.unit-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--clay-radius-sm);
  background-color: var(--clay-surface);
  border: 1px solid oklch(1 0 0 / 0.7);
  box-shadow:
    0 4px 8px -2px oklch(0.23 0.04 285 / 0.08),
    inset 3px 3px 6px 0 oklch(1 0 0 / 0.9),
    inset -3px -3px 6px 0 oklch(0.88 0.03 295 / 0.4);
  cursor: pointer;
  transition: transform var(--clay-duration) var(--clay-ease-spring), box-shadow 150ms ease, background-color 150ms ease;
}

.unit-item:hover {
  transform: translateY(-2px);
  background-color: oklch(0.98 0.015 300);
}

.unit-item.active {
  background-color: var(--clay-lilac);
  box-shadow:
    0 8px 16px -4px oklch(from var(--clay-lilac) calc(l - 0.32) c h / 0.30),
    inset 5px 5px 10px 0 oklch(1 0 0 / 0.9),
    inset -5px -5px 10px 0 oklch(from var(--clay-lilac) calc(l - 0.16) calc(c * 1.2) h / 0.62);
  transform: translateY(-1px);
}

.unit-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.unit-item-name {
  font-family: var(--clay-font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--clay-ink);
}

.unit-cat-badge {
  font-size: 11px;
  padding: 2px 8px;
}

.unit-item-stat {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clay-ink-muted);
}

/* ==========================================================================
   Conversion Widget Specifics
   ========================================================================== */

.conversion-widget {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.widget-header {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.eyebrow-container {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.widget-title {
  font-family: var(--clay-font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--clay-ink);
  margin: 0;
  letter-spacing: -0.02em;
}

.widget-subtitle {
  font-family: var(--clay-font-sans);
  font-size: 1.05rem;
  color: var(--clay-ink-muted);
  margin: 0;
}

.mode-tabs {
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
  width: 100%;
}

.action-row {
  margin-top: 1.25rem;
  width: 100%;
}

/* ==========================================================================
   Claymorphism Conversion Modal Dialog
   ========================================================================== */

.clay-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background-color: oklch(0.23 0.04 285 / 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 250ms ease,
    visibility 250ms ease;
}

.clay-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.clay-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  background-color: var(--clay-surface);
  border-radius: var(--clay-radius-xl);
  border: 2px solid oklch(1 0 0 / 0.85);
  box-shadow:
    0 28px 65px -15px oklch(0.23 0.04 285 / 0.38),
    inset 8px 8px 18px 0 oklch(1 0 0 / 0.98),
    inset -8px -8px 18px 0 oklch(0.85 0.03 295 / 0.45);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: scale(0.92) translateY(12px);
  transition: transform 300ms var(--clay-ease-spring);
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--clay-lilac) transparent;
}

.clay-modal-overlay.open .clay-modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.modal-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.modal-close-btn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--clay-radius-pill);
  flex-shrink: 0;
  cursor: pointer;
}

.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.15rem;
}

.modal-hero-orb {
  background-color: var(--clay-mint);
  color: oklch(0.22 0.08 162);
  width: 3.75rem;
  height: 3.75rem;
  font-size: 1.85rem;
  box-shadow:
    0 10px 22px -5px oklch(from var(--clay-mint) calc(l - 0.35) c h / 0.35),
    inset 5px 5px 10px 0 oklch(1 0 0 / 0.92),
    inset -5px -5px 10px 0 oklch(from var(--clay-mint) calc(l - 0.16) calc(c * 1.2) h / 0.62);
}

.modal-title {
  font-family: var(--clay-font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--clay-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.modal-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}

.modal-source-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.4rem;
  background-color: var(--clay-well-bg);
  border-radius: var(--clay-radius-pill);
  border: 1px solid oklch(1 0 0 / 0.6);
  font-family: var(--clay-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clay-ink-muted);
  box-shadow:
    inset 4px 4px 8px 0 oklch(from var(--clay-well-bg) calc(l - 0.14) c h / 0.45),
    inset -4px -4px 8px 0 oklch(1 0 0 / 0.85);
}

.modal-arrow-divider {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--clay-lilac);
  font-family: var(--clay-font-display);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-arrow-divider .material-symbols-rounded {
  font-size: 1.25rem;
  animation: modal-arrow-bounce 1.6s infinite ease-in-out;
}

@keyframes modal-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Inflated Result Cushion inside Modal */
.modal-result-cushion {
  --_bg: var(--clay-butter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 1.35rem 1.5rem;
  border-radius: var(--clay-radius-lg);
  background-color: var(--_bg);
  border: 1.5px solid oklch(1 0 0 / 0.85);
  box-shadow:
    0 16px 32px -8px oklch(from var(--_bg) calc(l - 0.35) c h / 0.32),
    inset 8px 8px 16px 0 oklch(1 0 0 / 0.95),
    inset -8px -8px 16px 0 oklch(from var(--_bg) calc(l - 0.16) calc(c * 1.2) h / 0.62);
  transition: transform var(--clay-duration) var(--clay-ease-spring);
}

.modal-result-number {
  font-family: var(--clay-font-display);
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: var(--clay-ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.modal-result-unit {
  font-family: var(--clay-font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: 800;
  color: var(--clay-ink);
  letter-spacing: -0.01em;
  word-break: break-word;
}

.modal-summary-sentence {
  font-family: var(--clay-font-sans);
  font-size: 0.95rem;
  color: var(--clay-ink-muted);
  font-weight: 600;
  margin: 0;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  width: 100%;
}

.modal-action-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  .modal-actions {
    grid-template-columns: 1fr;
  }
}

/* Retained Result Card Fallback */
.clay-result-card {
  --_bg: var(--clay-mint);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--clay-radius-lg);
  background-color: var(--_bg);
  border: 1.5px solid oklch(1 0 0 / 0.7);
  box-shadow:
    0 16px 32px -8px oklch(from var(--_bg) calc(l - 0.35) c h / 0.32),
    inset 8px 8px 16px 0 oklch(1 0 0 / 0.88),
    inset -8px -8px 16px 0 oklch(from var(--_bg) calc(l - 0.16) calc(c * 1.2) h / 0.60);
  margin-top: 1.5rem;
  transition: transform var(--clay-duration) var(--clay-ease-spring);
}

.result-orb {
  background-color: var(--clay-surface);
  color: oklch(0.22 0.08 162);
  inline-size: 2.75rem;
  block-size: 2.75rem;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.result-main-text {
  font-family: var(--clay-font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--clay-ink);
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* ==========================================================================
   Legal Pages (Privacy Policy & Cookie Policy)
   ========================================================================== */

.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-main-content {
  flex: 1 0 auto;
  padding-block: 2rem 4rem;
}

.back-nav {
  margin-bottom: 1.5rem;
}

.legal-card {
  padding: clamp(2rem, 4vw, 3.25rem);
}

.legal-header {
  padding-bottom: 1.5rem;
  border-bottom: 1.5px solid oklch(0.23 0.04 285 / 0.08);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.legal-title {
  font-family: var(--clay-font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--clay-ink);
  margin: 0;
}

.legal-subtitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clay-ink-muted);
  margin: 0;
}

.lead-text {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--clay-ink);
  margin-bottom: 2rem;
  font-weight: 500;
}

.legal-section {
  margin-bottom: 2rem;
}

.section-title {
  font-family: var(--clay-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clay-ink);
  margin-block: 0 0.75rem;
}

.legal-section p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--clay-ink-muted);
  margin-block: 0 0.75rem;
}

.legal-list {
  padding-left: 1.5rem;
  margin-block: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal-list li {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--clay-ink-muted);
}

.legal-list li strong {
  color: var(--clay-ink);
}

.legal-link {
  color: var(--clay-pink-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* ==========================================================================
   Mobile Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
  .hero-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.65rem;
  }

  .stat-item {
    padding: 0.75rem 1rem;
  }

  .stat-number {
    font-size: 1.65rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 640px) {
  .clay-surface, .clay-card, .lc-card {
    padding: 1.25rem;
    border-radius: var(--clay-radius-lg);
  }

  .clay-segmented, .lc-tabs {
    flex-direction: column;
    width: 100%;
    border-radius: var(--clay-radius-lg);
  }

  .clay-segmented__option, .lc-tab {
    width: 100%;
    text-align: center;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .clay-btn,
  .hero-actions .lc-btn {
    width: 100%;
  }
}

/* ==========================================================================
   The 5 Mandatory WCAG 2.2 Claymorphism Safeguards
   ========================================================================== */

/* 1. High-Contrast Focus Halo */
:focus-visible {
  outline: 3px solid oklch(0.49 0.22 292);
  outline-offset: 4px;
}

/* 2. Forced-Colors Mode (High Contrast Assistive Windows Themes) */
@media (forced-colors: active) {
  .clay-surface,
  .clay-card,
  .lc-card,
  .clay-btn,
  .lc-btn,
  .clay-input,
  .clay-select,
  .lc-input,
  .lc-select,
  .clay-well,
  .lc-well,
  .clay-badge,
  .lc-badge,
  .clay-orb,
  .clay-result-card,
  .clay-navbar {
    border: 2px solid CanvasText !important;
  }

  .clay-btn[aria-pressed="true"],
  .clay-segmented__option[aria-pressed="true"],
  .clay-segmented__option.active,
  .lc-tab--active {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
  }
}

/* 3. Reduced Motion Safeguard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  .clay-btn:hover:not(:disabled),
  .lc-btn:hover:not(:disabled),
  .clay-btn:active:not(:disabled),
  .lc-btn:active:not(:disabled) {
    transform: none !important;
  }
}