/* ============================================================
     THEME TOKENS — override per [data-theme] and [data-fonts]
  ============================================================ */

  /* --- Crimson / Warm (default) --- */
  [data-theme="crimson"] {
    --clr-brand:        #A51D34;
    --clr-brand-hi:     #BF2640;
    --clr-brand-soft:   rgba(165,29,52,.08);
    --clr-brand-border: rgba(165,29,52,.2);
    --clr-ink:          #1C1410;
    --clr-ink-2:        #5A5148;
    --clr-muted:        #9A9290;
    --clr-bg:           #fceeee;
    --clr-bg-2:         #f5d8d8;
    --clr-line:         rgba(28,20,16,.10);
    --clr-gold:         #B8882A;
  }

  /* --- Slate / Minimal --- */
  [data-theme="slate"] {
    --clr-brand:        #3B5BDB;
    --clr-brand-hi:     #4C6EF5;
    --clr-brand-soft:   rgba(59,91,219,.08);
    --clr-brand-border: rgba(59,91,219,.22);
    --clr-ink:          #0F1117;
    --clr-ink-2:        #4A4F5C;
    --clr-muted:        #8C919E;
    --clr-bg:           #EEF2FF;
    --clr-bg-2:         #E0E7FF;
    --clr-line:         rgba(15,17,23,.10);
    --clr-gold:         #E67700;
  }

  /* --- Forest / Organic --- */
  [data-theme="forest"] {
    --clr-brand:        #2D6A4F;
    --clr-brand-hi:     #40916C;
    --clr-brand-soft:   rgba(45,106,79,.08);
    --clr-brand-border: rgba(45,106,79,.22);
    --clr-ink:          #0D1B12;
    --clr-ink-2:        #3D5545;
    --clr-muted:        #7A9485;
    --clr-bg:           #EEFBF4;
    --clr-bg-2:         #D8F3E0;
    --clr-line:         rgba(13,27,18,.10);
    --clr-gold:         #B7941A;
  }

  /* --- Ocean --- */
  [data-theme="ocean"] {
    --clr-brand:        #0077B6;
    --clr-brand-hi:     #0096C7;
    --clr-brand-soft:   rgba(0,119,182,.08);
    --clr-brand-border: rgba(0,119,182,.22);
    --clr-ink:          #0B1D2E;
    --clr-ink-2:        #2E4A60;
    --clr-muted:        #6C8FA8;
    --clr-bg:           #EAF4FC;
    --clr-bg-2:         #CCEAF6;
    --clr-line:         rgba(11,29,46,.10);
    --clr-gold:         #C48B00;
  }

  /* --- Mono / Black --- */
  [data-theme="mono"] {
    --clr-brand:        #000000;
    --clr-brand-hi:     #222222;
    --clr-brand-soft:   rgba(0,0,0,.06);
    --clr-brand-border: rgba(0,0,0,.18);
    --clr-ink:          #000000;
    --clr-ink-2:        #3A3A3A;
    --clr-muted:        #888888;
    --clr-bg:           #F0F0F0;
    --clr-bg-2:         #E2E2E2;
    --clr-line:         rgba(0,0,0,.10);
    --clr-gold:         #333333;
  }

  /* --- Font: Editorial (Newsreader + Outfit) --- */
  [data-fonts="editorial"] {
    --font-body:    'Outfit', system-ui, Arial, sans-serif;
    --font-heading: 'Newsreader', Georgia, serif;
  }

  /* --- Font: Modern (Inter + Inter) --- */
  [data-fonts="modern"] {
    --font-body:    'Inter', system-ui, sans-serif;
    --font-heading: 'Inter', system-ui, sans-serif;
  }

  /* --- Font: Humanist (Plus Jakarta Sans + DM Serif Display) --- */
  [data-fonts="humanist"] {
    --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
    --font-heading: 'DM Serif Display', Georgia, serif;
  }

  /* ============================================================
     GLOBAL DESIGN TOKENS — defaults (theme-independent)
     Override blocks below MUST come after this :root block.
  ============================================================ */
  :root {
    --clr-white:      #FFFFFF;
    --clr-near-black: #111111;
    --clr-g50:        #F5F5F3;
    --clr-g100:       #E8E8E4;
    --clr-g500:       #6B6B66;

    /* Type scale */
    --text-xs:   11px; --text-sm:   13px; --text-base: 15px; --text-md: 17px;
    --text-lg:   19px;
    --text-xl:   clamp(22px, 3vw, 28px);
    --text-2xl:  clamp(28px, 3.2vw, 40px);
    --text-3xl:  clamp(38px, 4.8vw, 58px);

    /* Line heights */
    --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; --lh-relaxed: 1.65;

    /* Letter spacing */
    --ls-tight: -0.01em; --ls-wide: 0.08em; --ls-wider: 0.13em; --ls-widest: 0.18em;

    /* Radius — fixed utility scale */
    --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;

    /* Semantic radius — default values, overridden by [data-radius] below */
    --r-btn:     10px;
    --r-card:    12px;
    --r-input:   10px;
    --r-badge:   999px;
    --r-section: 20px;

    /* Shadows — default values, overridden by [data-shadow] below */
    --shadow-xs: 0 2px 8px rgba(0,0,0,.05);
    --shadow-sm: 0 4px 16px rgba(0,0,0,.07);
    --shadow:    0 8px 24px rgba(0,0,0,.09);
    --shadow-md: 0 12px 32px rgba(0,0,0,.11);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.13);

    /* Lift effect — hover translateY, overridden by [data-lift="off"] */
    --lift-btn:     translateY(-1px);
    --lift-card:    translateY(-4px);
    --lift-feature: translateY(-3px);

    /* Easing */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

    /* Spacing */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:24px; --sp-8:32px;
    --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

    /* Layout */
    --section-py:    clamp(60px, 8vw, 96px);
    --container-max: 1160px;
    --container-px:  28px;
    --sidebar-w:     224px;
  }

  /* ============================================================
     SHADOW INTENSITY — MUST be after :root to override defaults
  ============================================================ */
  [data-shadow="none"]   { --shadow-xs:none; --shadow-sm:none; --shadow:none; --shadow-md:none; --shadow-lg:none; }
  [data-shadow="subtle"] { --shadow-xs:0 1px 4px rgba(0,0,0,.04); --shadow-sm:0 2px 8px rgba(0,0,0,.05); --shadow:0 4px 14px rgba(0,0,0,.06); --shadow-md:0 6px 20px rgba(0,0,0,.07); --shadow-lg:0 10px 28px rgba(0,0,0,.08); }
  [data-shadow="default"]{ --shadow-xs:0 2px 8px rgba(0,0,0,.05); --shadow-sm:0 4px 16px rgba(0,0,0,.07); --shadow:0 8px 24px rgba(0,0,0,.09); --shadow-md:0 12px 32px rgba(0,0,0,.11); --shadow-lg:0 16px 40px rgba(0,0,0,.13); }
  [data-shadow="deep"]   { --shadow-xs:0 2px 10px rgba(0,0,0,.10); --shadow-sm:0 4px 20px rgba(0,0,0,.14); --shadow:0 8px 32px rgba(0,0,0,.18); --shadow-md:0 16px 48px rgba(0,0,0,.22); --shadow-lg:0 24px 60px rgba(0,0,0,.28); }

  /* ============================================================
     RADIUS MODES — MUST be after :root to override defaults
  ============================================================ */
  [data-radius="sharp"]   { --r-btn:4px;   --r-card:6px;  --r-input:4px;   --r-badge:4px;   --r-section:8px; }
  [data-radius="default"] { --r-btn:10px;  --r-card:12px; --r-input:10px;  --r-badge:999px; --r-section:20px; }
  [data-radius="rounded"] { --r-btn:18px;  --r-card:20px; --r-input:14px;  --r-badge:999px; --r-section:28px; }
  [data-radius="pill"]    { --r-btn:999px; --r-card:24px; --r-input:999px; --r-badge:999px; --r-section:32px; }

  /* ============================================================
     LIFT EFFECT — MUST be after :root
  ============================================================ */
  [data-lift="on"]  { --lift-btn:translateY(-1px); --lift-card:translateY(-4px); --lift-feature:translateY(-3px); }
  [data-lift="off"] { --lift-btn:none; --lift-card:none; --lift-feature:none; }

  /* ============================================================
     BASE RESET
  ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--clr-ink);
    background: #F0EFED;
  }
  img, video { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: default; border: none; background: none; }
  ul, ol { list-style: none; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  }

  /* ============================================================
     SHELL — SIDEBAR + MAIN
  ============================================================ */
  .ds-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
  }

  /* ---- Sidebar ---- */
  .ds-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--clr-white);
    border-right: 1px solid var(--clr-line);
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-g100) transparent;
  }
  .ds-sidebar-brand {
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--clr-line);
    flex-shrink: 0;
  }
  .ds-sidebar-brand-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--clr-ink);
    display: block;
    margin-bottom: 2px;
  }
  .ds-sidebar-brand-sub {
    font-size: 11px;
    color: var(--clr-muted);
  }
  .ds-sidebar-nav {
    flex: 1;
    padding: 10px 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ds-nav-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--clr-muted);
    padding: 14px 8px 6px;
  }
  .ds-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-ink-2);
    transition: background .12s, color .12s;
    cursor: default;
  }
  .ds-nav-link:hover, .ds-nav-link.active {
    background: var(--clr-bg);
    color: var(--clr-ink);
  }
  .ds-nav-link.active { font-weight: 600; color: var(--clr-brand); }
  .ds-nav-link i { font-size: 15px; flex-shrink: 0; }

  /* Theme controls at sidebar bottom */
  .ds-sidebar-controls {
    padding: 14px;
    border-top: 1px solid var(--clr-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
  }
  .ds-ctrl-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: 5px;
    display: block;
  }
  .ds-theme-swatches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .ds-theme-swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: default;
    transition: transform .15s, border-color .15s;
    outline: none;
    flex-shrink: 0;
  }
  .ds-theme-swatch:hover { transform: scale(1.12); }
  .ds-theme-swatch.active { border-color: var(--clr-ink); box-shadow: 0 0 0 2px white inset; }

  /* Compact select control */
  .ds-ctrl-select {
    width: 100%;
    padding: 6px 26px 6px 9px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-ink);
    background: var(--clr-white);
    border: 1px solid var(--clr-g100);
    border-radius: 6px;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239A9290' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: default;
    transition: border-color .12s;
  }
  .ds-ctrl-select:focus { border-color: var(--clr-brand); box-shadow: 0 0 0 2px var(--clr-brand-soft); }

  .ds-ctrl-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* ---- Main content ---- */
  .ds-main {
    min-width: 0;
    padding: 48px 56px 80px;
    display: flex;
    flex-direction: column;
    gap: 72px;
  }

  /* ============================================================
     DS CHROME ELEMENTS
  ============================================================ */
  .ds-section-head { margin-bottom: var(--sp-8); }
  .ds-section-head h2 {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 500;
    color: var(--clr-ink);
    margin-bottom: 6px;
  }
  .ds-section-head p {
    font-size: var(--text-sm);
    color: var(--clr-ink-2);
    line-height: var(--lh-relaxed);
    max-width: 600px;
  }
  .ds-section-head code {
    font-size: 11px;
    background: var(--clr-g50);
    border: 1px solid var(--clr-g100);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    color: var(--clr-brand);
  }
  .ds-rule {
    border: none;
    border-top: 1px solid var(--clr-line);
    margin: 0;
  }
  .ds-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: var(--sp-3);
  }
  .ds-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
  .ds-col { display: flex; flex-direction: column; gap: var(--sp-4); }
  .ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-4); }
  .ds-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
  .ds-preview {
    background: var(--clr-white);
    border: 1px solid var(--clr-line);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
  }
  .ds-preview-dark { background: var(--clr-near-black); border-color: rgba(255,255,255,.08); }
  .ds-preview-brand { background: var(--clr-bg); border-color: var(--clr-brand-border); }
  .ds-chunk { display: flex; flex-direction: column; gap: var(--sp-6); }
  .ds-token-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .ds-token-table th {
    text-align: left; font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--clr-muted); padding: 8px 12px;
    border-bottom: 1px solid var(--clr-line);
  }
  .ds-token-table td { padding: 9px 12px; border-bottom: 1px solid var(--clr-g50); vertical-align: middle; }
  .ds-token-table tr:last-child td { border-bottom: none; }
  .ds-token-table code {
    font-family: monospace; font-size: 11px;
    background: var(--clr-g50); padding: 2px 6px;
    border-radius: 4px; color: var(--clr-brand);
  }
  .ds-swatch-dot {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 3px; border: 1px solid rgba(0,0,0,.08);
    vertical-align: middle; margin-right: 6px;
  }

  /* ============================================================
     1. COLORS
  ============================================================ */
  .swatch-grid { display: flex; flex-wrap: wrap; gap: 12px; }
  .swatch { min-width: 88px; display: flex; flex-direction: column; gap: 6px; }
  .swatch-block {
    height: 60px; border-radius: var(--r-md);
    border: 1px solid rgba(0,0,0,.06);
  }
  .swatch-name { font-size: 12px; font-weight: 600; color: var(--clr-ink); }
  .swatch-val  { font-size: 10px; color: var(--clr-muted); font-family: monospace; }

  /* ============================================================
     2. TYPOGRAPHY
  ============================================================ */
  .type-row {
    display: flex; align-items: baseline; gap: var(--sp-6);
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--clr-line);
  }
  .type-row:last-child { border-bottom: none; }
  .type-meta { width: 148px; flex-shrink: 0; }
  .type-meta-name { font-size: 11px; font-weight: 700; color: var(--clr-muted); letter-spacing: .09em; text-transform: uppercase; }
  .type-meta-size { font-size: 10px; color: var(--clr-muted); font-family: monospace; margin-top: 3px; line-height: 1.5; }

  /* ============================================================
     3. BUTTONS — 3 distinct style families
  ============================================================ */

  /* Base */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 22px; border-radius: var(--r-btn);
    font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
    line-height: 1; cursor: default; white-space: nowrap;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s,
                transform .2s var(--ease-spring), box-shadow .2s;
  }
  .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--clr-brand-soft); }

  /* --- FAMILY A: Warm (Harkontroll-style) ---
     Solid brand fill. Subtle lift + lighten on hover. No offset shadow. */
  .btn-warm          { background: var(--clr-brand); color: white; border-color: var(--clr-brand); }
  .btn-warm:hover    { background: var(--clr-brand-hi); border-color: var(--clr-brand-hi); transform: var(--lift-btn); box-shadow: var(--shadow-sm); }
  .btn-warm:active   { transform: scale(0.97); box-shadow: none; }

  .btn-warm-ghost          { background: transparent; color: var(--clr-ink); border-color: var(--clr-line); }
  .btn-warm-ghost:hover    { background: var(--clr-bg); border-color: rgba(28,20,16,.2); }
  .btn-warm-ghost:active   { transform: scale(0.97); }

  .btn-warm-outline         { background: transparent; color: var(--clr-brand); border-color: var(--clr-brand); }
  .btn-warm-outline:hover   { background: var(--clr-brand); color: white; transform: var(--lift-btn); }
  .btn-warm-outline:active  { transform: scale(0.97); }

  /* --- FAMILY B: Stark (e-com-kit / demoday-style) ---
     Default: white fill, visible offset shadow. Hover: filled black — shadow was always the signal,
     now it reads correctly at rest and fills on interaction. Press collapses offset. */
  .btn-stark {
    background: var(--clr-white); color: var(--clr-near-black); border-color: var(--clr-near-black);
    box-shadow: 3px 3px 0 var(--clr-near-black);
  }
  .btn-stark:hover  { background: var(--clr-near-black); color: white; box-shadow: 3px 3px 0 var(--clr-near-black); }
  .btn-stark:active { transform: translate(3px,3px); box-shadow: none; }

  .btn-stark-ghost {
    background: transparent; color: var(--clr-near-black); border-color: var(--clr-near-black);
    box-shadow: 2px 2px 0 var(--clr-near-black);
  }
  .btn-stark-ghost:hover  { background: var(--clr-near-black); color: white; }
  .btn-stark-ghost:active { transform: translate(2px,2px); box-shadow: none; }

  .btn-stark-brand {
    background: var(--clr-white); color: var(--clr-brand); border-color: var(--clr-brand);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--clr-brand) 60%, black);
  }
  .btn-stark-brand:hover  { background: var(--clr-brand); color: white; box-shadow: 3px 3px 0 color-mix(in srgb, var(--clr-brand) 60%, black); }
  .btn-stark-brand:active { transform: translate(3px,3px); box-shadow: none; }

  /* --- FAMILY C: Soft — always pill radius, ignores --r-btn ---
     Pill shape, brand-tinted background, no hard shadows. Light, friendly. */
  .btn-soft          { background: var(--clr-brand-soft); color: var(--clr-brand); border-color: var(--clr-brand-border); border-radius: var(--r-pill); }
  .btn-soft:hover    { background: var(--clr-brand); color: white; transform: var(--lift-btn); box-shadow: var(--shadow-sm); }
  .btn-soft:active   { transform: scale(0.97); }

  .btn-soft-light          { background: var(--clr-g50); color: var(--clr-ink-2); border-color: var(--clr-g100); border-radius: var(--r-pill); }
  .btn-soft-light:hover    { background: var(--clr-g100); color: var(--clr-ink); }
  .btn-soft-light:active   { transform: scale(0.97); }

  .btn-soft-dark           { background: var(--clr-ink); color: white; border-color: transparent; border-radius: var(--r-pill); }
  .btn-soft-dark:hover     { background: var(--clr-near-black); transform: var(--lift-btn); box-shadow: var(--shadow); }
  .btn-soft-dark:active    { transform: scale(0.97); }

  /* Sizes (apply to any family) */
  .btn-sm { padding: 7px 14px; font-size: var(--text-sm); border-radius: var(--r-btn); }
  .btn-lg { padding: 15px 30px; font-size: 17px; }
  .btn-xl { padding: 17px 36px; font-size: 18px; }

  /* Loading state */
  .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
  .btn-loading::after {
    content: ''; position: absolute; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.35); border-top-color: white;
    border-radius: 50%; animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Link button */
  .btn-link {
    padding: 0; background: transparent; border: none;
    color: var(--clr-ink-2); font-weight: 500;
    text-decoration: underline; text-underline-offset: 3px;
    border-radius: 4px;
  }
  .btn-link:hover { color: var(--clr-ink); }

  /* ============================================================
     4. INPUTS & FORMS
  ============================================================ */
  .input-wrap { display: flex; flex-direction: column; gap: 6px; }
  .input-label { font-size: var(--text-sm); font-weight: 600; color: var(--clr-ink); }
  .input-hint  { font-size: 12px; color: var(--clr-muted); }
  .input-error { font-size: 12px; color: var(--clr-brand); margin-top: 4px; }

  .input {
    width: 100%; padding: 11px 14px;
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--clr-ink); background: var(--clr-white);
    border: 1px solid var(--clr-line); border-radius: var(--r-input);
    outline: none; transition: border-color .15s, box-shadow .15s;
  }
  .input::placeholder { color: var(--clr-muted); }
  .input:hover { border-color: rgba(28,20,16,.2); }
  .input:focus { border-color: var(--clr-brand); box-shadow: 0 0 0 3px var(--clr-brand-soft); }
  .input.is-error { border-color: var(--clr-brand); box-shadow: 0 0 0 3px var(--clr-brand-soft); }

  .select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9290' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px;
  }
  .textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); }

  .checkbox-wrap { display: flex; align-items: center; gap: 10px; }
  .checkbox-wrap input[type="checkbox"] {
    appearance: none; width: 18px; height: 18px;
    border: 1.5px solid var(--clr-line); border-radius: 5px;
    background: var(--clr-white); cursor: default; position: relative;
    flex-shrink: 0; transition: background .15s, border-color .15s;
  }
  .checkbox-wrap input[type="checkbox"]:checked { background: var(--clr-brand); border-color: var(--clr-brand); }
  .checkbox-wrap input[type="checkbox"]:checked::after {
    content: ''; position: absolute; inset: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l4 4L11 1' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .checkbox-label { font-size: var(--text-sm); color: var(--clr-ink); }

  .radio-wrap { display: flex; align-items: center; gap: 10px; }
  .radio-wrap input[type="radio"] {
    appearance: none; width: 18px; height: 18px;
    border: 1.5px solid var(--clr-line); border-radius: 50%;
    background: var(--clr-white); cursor: default; flex-shrink: 0;
    transition: border-color .15s;
  }
  .radio-wrap input[type="radio"]:checked { border-color: var(--clr-brand); border-width: 5px; }

  .form-inline { display: flex; gap: 8px; max-width: 400px; }
  .form-inline .input { flex: 1; min-width: 0; }

  /* ============================================================
     5. BADGES & EYEBROWS
  ============================================================ */
  .badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-badge);
    font-size: 11px; font-weight: 700;
    letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1;
  }
  .badge-neutral { background: var(--clr-g50);         color: var(--clr-ink-2);  border: 1px solid var(--clr-g100); }
  .badge-brand   { background: var(--clr-brand-soft);  color: var(--clr-brand);  border: 1px solid var(--clr-brand-border); }
  .badge-dark    { background: var(--clr-near-black);  color: white; }
  .badge-gold    { background: rgba(184,136,42,.10);   color: var(--clr-gold);   border: 1px solid rgba(184,136,42,.25); }
  .badge-green   { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
  .badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

  .eyebrow {
    display: inline-block; font-family: var(--font-body);
    font-size: var(--text-xs); font-weight: 700;
    letter-spacing: var(--ls-widest); text-transform: uppercase;
    color: var(--clr-muted); margin-bottom: var(--sp-3);
  }
  .eyebrow-brand { color: var(--clr-brand); }

  /* ============================================================
     6. CARDS
  ============================================================ */
  /* Card grid helpers — used in the Cards section */
  .cards-grid-product  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
  .cards-grid-feature  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .cards-grid-review   { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .cards-grid-pricing  { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .card {
    background: var(--clr-white); border: 1px solid var(--clr-line);
    border-radius: var(--r-card); overflow: hidden;
    transition: transform .22s var(--ease-spring), box-shadow .22s;
  }
  .card:hover { transform: var(--lift-card); box-shadow: var(--shadow-lg); }

  .card-thumb { width: 100%; aspect-ratio: 4/3; background: linear-gradient(155deg, var(--clr-bg), var(--clr-bg-2)); position: relative; }
  .card-body  { padding: 20px; min-width: 0; }
  .card-tag {
    position: absolute; top: 12px; left: 12px;
    background: var(--clr-white); border: 1px solid var(--clr-line);
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  }
  .card-title { font-size: var(--text-md); font-weight: 600; color: var(--clr-ink); margin-bottom: 4px; }
  .card-desc  { font-size: var(--text-sm); color: var(--clr-ink-2); line-height: var(--lh-relaxed); }
  .card-price { display: flex; align-items: baseline; gap: 8px; margin-top: var(--sp-4); }
  .card-price-main { font-size: 20px; font-weight: 700; color: var(--clr-ink); }
  .card-price-old  { font-size: var(--text-sm); color: var(--clr-muted); text-decoration: line-through; }

  .feature-card {
    background: var(--clr-white); border: 1px solid var(--clr-line);
    border-radius: var(--r-card); padding: 26px 22px;
    display: flex; flex-direction: column; gap: var(--sp-4);
    transition: transform .22s var(--ease-spring), box-shadow .22s;
  }
  .feature-card:hover { transform: var(--lift-feature); box-shadow: var(--shadow-md); }
  .feature-card-dark    { background: var(--clr-ink); border-color: rgba(255,255,255,.08); color: white; }
  .feature-card-brand   { background: var(--clr-brand); border-color: transparent; color: white; }
  .feature-icon {
    width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--clr-brand-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--clr-brand); font-size: 20px;
  }
  .feature-card-dark  .feature-icon { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
  .feature-card-brand .feature-icon { background: rgba(255,255,255,.2); color: white; }

  .review-card {
    background: var(--clr-white); border: 1px solid var(--clr-line);
    border-radius: var(--r-card); padding: 22px 24px;
    display: flex; flex-direction: column; gap: var(--sp-4);
  }
  .review-stars  { color: var(--clr-gold); font-size: 13px; letter-spacing: 1px; }
  .review-quote  { font-family: var(--font-heading); font-style: italic; font-size: var(--text-md); color: var(--clr-ink); line-height: var(--lh-snug); }
  .review-author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
  .review-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--clr-brand), color-mix(in srgb, var(--clr-brand) 50%, black));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 12px; font-weight: 700;
  }
  .review-name   { font-size: var(--text-sm); font-weight: 600; color: var(--clr-ink); }
  .review-handle { font-size: 12px; color: var(--clr-muted); }

  .pricing-card {
    background: var(--clr-white); border: 1px solid var(--clr-line);
    border-radius: var(--r-section); padding: var(--sp-8);
    display: flex; flex-direction: column; gap: var(--sp-5);
  }
  .pricing-card-featured { background: var(--clr-ink); border-color: transparent; color: white; position: relative; overflow: hidden; }
  .pricing-price { display: flex; align-items: baseline; gap: 4px; }
  .pricing-price-currency { font-size: 18px; font-weight: 600; color: var(--clr-ink-2); }
  .pricing-price-amount   { font-family: var(--font-heading); font-size: clamp(40px,5vw,52px); font-weight: 600; color: var(--clr-ink); line-height: 1; }
  .pricing-price-period   { font-size: var(--text-sm); color: var(--clr-muted); }
  .pricing-card-featured .pricing-price-currency,
  .pricing-card-featured .pricing-price-amount,
  .pricing-card-featured .pricing-price-period { color: white; }
  .pricing-features { display: flex; flex-direction: column; gap: 10px; }
  .pricing-feature  { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); }
  .pricing-check {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: var(--clr-brand-soft); color: var(--clr-brand);
    display: flex; align-items: center; justify-content: center; font-size: 10px;
  }
  .pricing-card-featured .pricing-check { background: rgba(255,255,255,.15); color: white; }

  /* ============================================================
     7. NAVIGATION COMPONENT
  ============================================================ */
  .nav {
    background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--clr-line);
    height: 68px; display: flex; align-items: center;
    padding: 0 var(--container-px);
  }
  .nav-inner {
    max-width: var(--container-max); width: 100%;
    margin: 0 auto; display: flex; align-items: center; gap: var(--sp-4);
  }
  .nav-logo { font-family: var(--font-heading); font-size: 19px; font-weight: 600; margin-right: auto; }
  .nav-links { display: flex; align-items: center; gap: 2px; }
  .nav-link {
    font-size: var(--text-sm); font-weight: 500; color: var(--clr-ink-2);
    padding: 7px 13px; border-radius: var(--r);
    transition: background .15s, color .15s;
  }
  .nav-link:hover  { background: var(--clr-bg); color: var(--clr-ink); }
  .nav-link.active { color: var(--clr-ink); font-weight: 600; }

  /* --- Logo image variant --- */
  .nav-logo-img { height: 32px; width: auto; display: block; }

  /* --- Hamburger button --- */
  .nav-hamburger {
    display: none;
    width: 40px; height: 40px;
    border-radius: var(--r);
    background: transparent;
    border: 1px solid var(--clr-line);
    align-items: center; justify-content: center;
    color: var(--clr-ink);
    font-size: 20px;
    flex-shrink: 0;
    transition: background .15s;
  }
  .nav-hamburger:hover { background: var(--clr-bg); }

  /* --- Mobile: Fullscreen overlay menu --- */
  .nav-mobile-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: var(--clr-white);
    display: flex; flex-direction: column;
    padding: 0 var(--container-px) var(--sp-8);
    opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .nav-mobile-overlay.open { opacity: 1; pointer-events: all; transform: none; }
  .nav-mobile-overlay-head {
    height: 68px; display: flex; align-items: center;
    justify-content: space-between; border-bottom: 1px solid var(--clr-line);
    flex-shrink: 0; margin: 0 calc(-1 * var(--container-px));
    padding: 0 var(--container-px);
  }
  .nav-mobile-links {
    display: flex; flex-direction: column;
    padding: var(--sp-6) 0;
    gap: 2px; flex: 1;
  }
  .nav-mobile-link {
    font-size: 22px; font-family: var(--font-heading); font-weight: 500;
    color: var(--clr-ink-2); padding: 10px 0;
    border-bottom: 1px solid var(--clr-line);
    transition: color .15s;
  }
  .nav-mobile-link:hover { color: var(--clr-brand); }
  .nav-mobile-cta { margin-top: auto; }

  /* --- Mobile: Dropdown menu --- */
  .nav-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--clr-white);
    border: 1px solid var(--clr-line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-md);
    padding: var(--sp-3);
    opacity: 0; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease-spring), transform .2s var(--ease-spring);
    z-index: 200;
  }
  .nav-dropdown.open { opacity: 1; pointer-events: all; transform: none; }
  .nav-dropdown-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--r);
    font-size: var(--text-sm); font-weight: 500; color: var(--clr-ink-2);
    transition: background .12s, color .12s;
  }
  .nav-dropdown-link:hover { background: var(--clr-bg); color: var(--clr-ink); }
  .nav-dropdown-link i { font-size: 16px; color: var(--clr-muted); }
  .nav-dropdown-sep { height: 1px; background: var(--clr-line); margin: 4px 0; }

  /* Show hamburger on mobile */
  @media (max-width: 768px) {
    .nav-hamburger { display: flex; }
    .nav-links { display: none; }
  }

  /* ============================================================
     8. SECTION PATTERNS
  ============================================================ */
  .hero { padding: var(--section-py) 0; background: var(--clr-white); }
  .hero-inner {
    max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px);
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  }
  .hero-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 6px; background: var(--clr-bg);
    border: 1px solid var(--clr-brand-border); border-radius: var(--r-pill);
    font-size: 12px; font-weight: 600; color: var(--clr-brand); margin-bottom: var(--sp-5);
  }
  .hero-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clr-brand); }
  .hero h1 {
    font-family: var(--font-heading); font-size: var(--text-3xl);
    font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
    color: var(--clr-ink); margin-bottom: var(--sp-5);
  }
  .hero h1 em { font-style: italic; color: var(--clr-brand); }
  .hero-sub { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--clr-ink-2); margin-bottom: var(--sp-8); }
  .hero-cta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .hero-rating {
    display: flex; align-items: center; gap: 10px;
    padding-top: var(--sp-5); margin-top: var(--sp-5); border-top: 1px solid var(--clr-line);
  }
  .hero-media { display: flex; align-items: center; justify-content: center; }
  .hero-img-placeholder { width: 100%; aspect-ratio: 4/5; background: linear-gradient(155deg, var(--clr-bg), var(--clr-bg-2)); border-radius: var(--r-xl); border: 1px solid var(--clr-brand-border); }
  @media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
    .hero-media { order: -1; }
  }

  /* --- Hero: Full background image --- */
  .hero-bg {
    position: relative;
    padding: var(--section-py) 0;
    min-height: 560px;
    display: flex; align-items: center;
    overflow: hidden;
    background: var(--clr-ink);
  }
  .hero-bg-img {
    position: absolute; inset: 0;
    background: linear-gradient(155deg, color-mix(in srgb, var(--clr-brand) 40%, black), #0a0a0a 70%);
    z-index: 0;
  }
  .hero-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.0) 100%);
    z-index: 1;
  }
  .hero-bg-inner {
    position: relative; z-index: 2;
    max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px);
    max-width: 680px;
  }
  .hero-bg .hero-kicker { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
  .hero-bg .hero-kicker-dot { background: rgba(255,255,255,.8); }
  .hero-bg h1 { color: white; }
  .hero-bg h1 em { color: color-mix(in srgb, var(--clr-brand-hi) 80%, white); }
  .hero-bg .hero-sub { color: rgba(255,255,255,.7); }
  .hero-bg .hero-rating { border-top-color: rgba(255,255,255,.15); }
  .hero-bg .hero-rating span { color: rgba(255,255,255,.6); }

  /* --- Hero: Full video background --- */
  .hero-video {
    position: relative;
    padding: var(--section-py) 0;
    min-height: 600px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
    background: #000;
  }
  .hero-video-bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #1a0a0f 0%, #0d1117 50%, #0a1a10 100%);
  }
  .hero-video-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(0,0,0,.5);
  }
  .hero-video-inner {
    position: relative; z-index: 2;
    max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px);
  }
  .hero-video h1 { color: white; text-align: center; }
  .hero-video h1 em { color: color-mix(in srgb, var(--clr-brand-hi) 80%, white); }
  .hero-video .hero-sub { color: rgba(255,255,255,.7); max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; }
  .hero-video .hero-cta { justify-content: center; }
  .hero-video .hero-kicker { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }
  .hero-video .hero-kicker-dot { background: rgba(255,255,255,.7); }
  .hero-video-play {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25);
    color: white; font-size: 28px;
    margin: 0 auto var(--sp-8);
    backdrop-filter: blur(8px);
    transition: background .2s, transform .2s;
  }
  .hero-video-play:hover { background: rgba(255,255,255,.2); transform: scale(1.07); }
  /* Simulated video bg pulse */
  .hero-video-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, color-mix(in srgb, var(--clr-brand) 18%, transparent), transparent 70%);
    animation: pulse 6s ease-in-out infinite alternate;
  }
  @keyframes pulse { from { opacity: .4; } to { opacity: 1; } }

  .section   { padding: var(--section-py) 0; }
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px); }
  .section-header { text-align: center; max-width: 640px; margin: 0 auto var(--sp-12); }
  .section-header h2 {
    font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 500;
    line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--clr-ink); margin-bottom: var(--sp-3);
  }
  .section-header h2 em { font-style: italic; color: var(--clr-brand); }
  .section-header p { font-size: var(--text-md); color: var(--clr-ink-2); line-height: var(--lh-relaxed); }

  .trust-band {
    background: var(--clr-ink); border-radius: var(--r-xl); padding: 40px 48px;
    display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-6);
    align-items: center; justify-items: center;
  }
  .trust-item { font-size: var(--text-sm); font-weight: 600; color: rgba(255,255,255,.5); text-align: center; }
  .trust-item i { display: block; font-size: 24px; color: rgba(255,255,255,.3); margin-bottom: 6px; }

  .steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
  .step { background: var(--clr-white); border: 1px solid var(--clr-line); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: var(--sp-4); }
  .step-num { font-family: var(--font-heading); font-size: 48px; font-weight: 500; color: var(--clr-brand); opacity: .25; line-height: 1; }
  .step-title { font-size: var(--text-lg); font-weight: 600; color: var(--clr-ink); }
  .step-desc  { font-size: var(--text-sm); color: var(--clr-ink-2); line-height: var(--lh-relaxed); }

  .faq-list { display: flex; flex-direction: column; }
  .faq-item { border-top: 1px solid var(--clr-line); }
  .faq-item:last-child { border-bottom: 1px solid var(--clr-line); }
  .faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; font-size: var(--text-base); font-weight: 600; color: var(--clr-ink); text-align: left; }
  .faq-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--clr-muted); }
  .faq-answer { display: none; font-size: var(--text-sm); color: var(--clr-ink-2); line-height: var(--lh-relaxed); padding-bottom: var(--sp-5); }
  .faq-item.open .faq-answer { display: block; }

  .announce-bar {
    background: var(--clr-ink); color: white; padding: 10px var(--container-px);
    display: flex; align-items: center; justify-content: center; gap: var(--sp-8);
    font-size: 13px; font-weight: 500;
  }
  .announce-bar a { color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 2px; }
  .announce-sep { opacity: .3; }

  .cta-section {
    padding: var(--section-py) 0;
    background:
      radial-gradient(ellipse 60% 80% at 0% 50%, color-mix(in srgb, var(--clr-brand) 45%, transparent) 0%, transparent 65%),
      radial-gradient(ellipse 60% 80% at 100% 50%, color-mix(in srgb, var(--clr-brand) 30%, transparent) 0%, transparent 65%),
      var(--clr-near-black);
  }
  .cta-section-inner { max-width: 680px; margin: 0 auto; padding: 0 var(--container-px); text-align: center; }
  .cta-section h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 500; line-height: var(--lh-tight); color: white; margin-bottom: var(--sp-4); }
  .cta-section p  { font-size: var(--text-md); color: rgba(255,255,255,.6); margin-bottom: var(--sp-8); line-height: var(--lh-relaxed); }

  .footer { border-top: 1px solid var(--clr-line); padding: var(--sp-12) 0 var(--sp-8); background: var(--clr-white); }
  .footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-12);
    padding-bottom: var(--sp-8); border-bottom: 1px solid var(--clr-line); margin-bottom: var(--sp-6);
  }
  .footer-brand-name { font-family: var(--font-heading); font-size: 18px; font-weight: 600; margin-bottom: var(--sp-3); }
  .footer-tagline { font-size: var(--text-sm); color: var(--clr-muted); line-height: var(--lh-relaxed); }
  .footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-muted); margin-bottom: var(--sp-4); }
  .footer-links { display: flex; flex-direction: column; gap: 8px; }
  .footer-links a { font-size: var(--text-sm); color: var(--clr-ink-2); transition: color .15s; }
  .footer-links a:hover { color: var(--clr-ink); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
  .footer-copy { font-size: 12px; color: var(--clr-muted); }

  /* ============================================================
     9. SCROLL REVEAL
  ============================================================ */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease-spring), transform .65s var(--ease-spring); }
  .reveal.visible { opacity: 1; transform: none; }
  .delay-1 { transition-delay: .08s; }
  .delay-2 { transition-delay: .16s; }
  .delay-3 { transition-delay: .24s; }

  /* ============================================================
     PRINCIPLE CARDS
  ============================================================ */
  .principle-card {
    background: var(--clr-white); border: 1px solid var(--clr-line);
    border-radius: var(--r-lg); padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .principle-icon { color: var(--clr-brand); font-size: 22px; }
  .principle-title { font-size: var(--text-base); font-weight: 700; color: var(--clr-ink); }
  .principle-desc { font-size: var(--text-sm); color: var(--clr-ink-2); line-height: var(--lh-relaxed); }
  .principle-desc code { font-family: monospace; font-size: 11px; background: var(--clr-g50); padding: 1px 5px; border-radius: 3px; color: var(--clr-brand); }

  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media (max-width: 1024px) {
    .ds-shell { grid-template-columns: 1fr; }
    .ds-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--clr-line); }
    .ds-sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 10px; }
    .ds-nav-group-label { display: none; }
    .ds-main { padding: 32px 24px 60px; }
  }
  @media (max-width: 540px) {
    :root { --container-px: 18px; }
    .ds-main { padding: 24px 18px 48px; }
    .steps-grid { grid-template-columns: 1fr; }
    .trust-band { grid-template-columns: repeat(2,1fr); padding: var(--sp-8); }
    .footer-top { grid-template-columns: 1fr 1fr; }
  }