@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/montserrat-800.woff2') format('woff2');}

  :root {
    /* Slotcore brand tokens */
    --primary: #1C3A34;
    --primary-ink: #12211D;
    --accent: #B0894F;
    --bg: #F2EEE4;
    --surface: #FDFBF6;
    --surface-2: #F4F0E6;
    --ink: #16241F;
    --muted: #6B6A5E;
    --border: #E4DECF;
    --border-strong: #D3CBB6;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.10);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    /* slot semantics from the app */
    --slot-avail-bg: #FFFFFF;
    --slot-avail-bd: #C9A84C;
    --slot-mine-bg: #0A9396;
    --slot-booked-bg: #F1F2F4;
    --slot-booked-bd: #D9DDE1;
    --slot-blocked-bg: #E2E4E7;
    --maxw: 1120px;
    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --primary: #74B49C;
      --primary-ink: #8FC7B0;
      --accent: #C9A366;
      --bg: #14201C;
      --surface: #1B2A25;
      --surface-2: #223129;
      --ink: #EDEBE0;
      --muted: #9DA69B;
      --border: #2C3B34;
      --border-strong: #3A4B42;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.28);
      --shadow-md: 0 6px 26px rgba(0,0,0,0.40);
      --slot-avail-bg: #1C1C30;
      --slot-avail-bd: #D8BE6A;
      --slot-mine-bg: #0E8E90;
      --slot-booked-bg: #24243B;
      --slot-booked-bd: #34345070;
      --slot-blocked-bg: #2A2A42;
    }
  }
  :root[data-theme="light"] {
    --primary:#1C3A34; --primary-ink:#12211D; --accent:#B0894F; --bg:#F2EEE4; --surface:#FDFBF6; --surface-2:#F4F0E6;
    --ink:#16241F; --muted:#6B6A5E; --border:#E4DECF; --border-strong:#D3CBB6;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.06); --shadow-md:0 4px 20px rgba(0,0,0,0.10);
    --slot-avail-bg:#FFFFFF; --slot-avail-bd:#C9A84C; --slot-mine-bg:#0A9396; --slot-booked-bg:#F1F2F4; --slot-booked-bd:#D9DDE1; --slot-blocked-bg:#E2E4E7;
  }
  :root[data-theme="dark"] {
    --primary:#74B49C; --primary-ink:#8FC7B0; --accent:#C9A366; --bg:#14201C; --surface:#1B2A25; --surface-2:#223129;
    --ink:#EDEBE0; --muted:#9DA69B; --border:#2C3B34; --border-strong:#3A4B42;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.28); --shadow-md:0 6px 26px rgba(0,0,0,0.40);
    --slot-avail-bg:#1C1C30; --slot-avail-bd:#D8BE6A; --slot-mine-bg:#0E8E90; --slot-booked-bg:#24243B; --slot-booked-bd:#34345070; --slot-blocked-bg:#2A2A42;
  }

  /* client deployment theme — mockups use the client's own teal/gold on a cool white palette, not Slotcore's pine/cream */
  .court-card, .browser, .phone {
    --primary: #0A9396; --primary-ink: #077E80; --accent: #C9A84C;
    --bg: #F8F9FA; --surface: #FFFFFF; --surface-2: #F3F5F6;
    --ink: #1A1A2E; --muted: #6C757D; --border: #E9ECEF; --border-strong: #D8DEE2;
  }
  @media (prefers-color-scheme: dark) {
    .court-card, .browser, .phone {
      --primary: #17B6B8; --primary-ink: #37C7C9; --accent: #D8BE6A;
      --bg: #14161C; --surface: #1E2028; --surface-2: #24262F;
      --ink: #EEF0F5; --muted: #9AA0AE; --border: #2A2D36; --border-strong: #383B45;
    }
  }
  :root[data-theme="light"] .court-card, :root[data-theme="light"] .browser, :root[data-theme="light"] .phone {
    --primary: #0A9396; --primary-ink: #077E80; --accent: #C9A84C;
    --bg: #F8F9FA; --surface: #FFFFFF; --surface-2: #F3F5F6;
    --ink: #1A1A2E; --muted: #6C757D; --border: #E9ECEF; --border-strong: #D8DEE2;
  }
  :root[data-theme="dark"] .court-card, :root[data-theme="dark"] .browser, :root[data-theme="dark"] .phone {
    --primary: #17B6B8; --primary-ink: #37C7C9; --accent: #D8BE6A;
    --bg: #14161C; --surface: #1E2028; --surface-2: #24262F;
    --ink: #EEF0F5; --muted: #9AA0AE; --border: #2A2D36; --border-strong: #383B45;
  }

  .theme-note { margin-top: 16px; font-size: 0.82rem; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
  .theme-note i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
    line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

  h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
  h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.05; }
  h2 { font-size: clamp(1.65rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.12; }
  h3 { font-size: 1.05rem; font-weight: 700; }
  p { margin: 0; }

  /* accent rule that replaces the section eyebrows */
  .rule { width: 30px; height: 3px; border-radius: 3px; background: var(--accent); margin-bottom: 20px; }

  /* ---- top bar ---- */
  header.bar {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: saturate(1.5) blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .bar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -0.02em; font-size: 1.14rem; }
  .brand .mark { width: 28px; height: 28px; display: block; }
  .brand .mark svg { width: 100%; height: 100%; display: block; }
  .brand .mark .bg { fill: #1C3A34; }
  @media (prefers-color-scheme: dark) { .brand .mark .bg { fill: #2E5A4E; } }
  :root[data-theme="light"] .brand .mark .bg { fill: #1C3A34; }
  :root[data-theme="dark"] .brand .mark .bg { fill: #2E5A4E; }
  .bar .cta-mini {
    font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--ink);
    border: 1px solid var(--border-strong); padding: 9px 16px; border-radius: 999px;
    transition: border-color .15s ease, color .15s ease;
  }
  .bar .cta-mini:hover { border-color: var(--primary); color: var(--primary); }

  /* ---- buttons ---- */
  .btn {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-weight: 650; font-size: 0.98rem; padding: 13px 22px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 34%, transparent); }
  .btn-primary::after { content: "→"; font-weight: 700; }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
  .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

  /* ---- hero ---- */
  .hero { padding: 68px 0 64px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
  .hero h1 .u { background: linear-gradient(transparent 68%, color-mix(in srgb, var(--accent) 55%, transparent) 0); padding: 0 2px; }
  .hero .lede { font-size: clamp(1.04rem, 1.6vw, 1.2rem); color: var(--muted); margin-top: 22px; max-width: 34em; }
  .hero .lede strong { color: var(--ink); font-weight: 650; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
  .hero-note { margin-top: 18px; font-size: 0.88rem; color: var(--muted); }

  /* ---- signature: court week grid ---- */
  .court-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 20px; max-width: 440px; width: 100%; margin-left: auto;
  }
  @media (max-width: 900px) { .court-card { margin: 0 auto; } }
  .cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .cc-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.98rem; }
  .cc-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
  .cc-chip { font-size: 0.72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
  .cc-grid { display: grid; grid-template-columns: 34px repeat(5, 1fr); gap: 6px; }
  .cc-grid .col-h { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--muted); padding-bottom: 2px; letter-spacing: 0.02em; }
  .cc-grid .time { font-size: 0.66rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font-variant-numeric: tabular-nums; }
  .slot { height: 30px; border-radius: 7px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em; }
  .slot.avail { background: var(--slot-avail-bg); border: 1.5px solid var(--slot-avail-bd); color: var(--accent); }
  .slot.mine { background: var(--slot-mine-bg); color: #fff; }
  .slot.booked { background: var(--slot-booked-bg); border: 1px solid var(--slot-booked-bd); }
  .slot.blocked { background: var(--slot-blocked-bg); background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--muted) 22%, transparent) 4px, color-mix(in srgb, var(--muted) 22%, transparent) 6px); }
  .cc-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
  .cc-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.74rem; color: var(--muted); font-weight: 600; }
  .cc-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
  .lg-mine { background: var(--slot-mine-bg); }
  .lg-avail { background: var(--slot-avail-bg); border: 1.5px solid var(--slot-avail-bd); }
  .lg-booked { background: var(--slot-booked-bg); border: 1px solid var(--slot-booked-bd); }

  /* ---- section frame ---- */
  section { padding: 72px 0; }
  .sec-head { max-width: 44em; }
  .sec-head p { color: var(--muted); margin-top: 14px; font-size: 1.05rem; }
  .panel { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

  /* ---- problem ---- */
  .prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
  @media (max-width: 820px) { .prob-grid { grid-template-columns: 1fr; } }
  .prob-card { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
  .prob-card .tag { width: 22px; height: 6px; border-radius: 3px; background: var(--accent); display: block; margin-bottom: 16px; }
  .prob-card p { color: var(--muted); margin-top: 9px; font-size: 0.97rem; }
  .stat-line { margin-top: 34px; font-size: 1.02rem; max-width: 46em; }
  .stat-line b { color: var(--primary); font-weight: 750; }

  /* ---- features ---- */
  .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
  @media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }
  .feat {
    padding: 24px 22px; border-radius: var(--radius-md); background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  }
  .feat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow-md); }
  .feat .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); margin-bottom: 15px; }
  .feat .ic svg { width: 22px; height: 22px; }
  .feat h3 { margin-bottom: 7px; }
  .feat p { color: var(--muted); font-size: 0.95rem; }

  /* ---- product views / mockups ---- */
  .showcase { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; align-items: center; }
  .showcase + .showcase { margin-top: 60px; }
  .showcase.reverse { grid-template-columns: 1.18fr 0.82fr; }
  @media (max-width: 880px) {
    .showcase, .showcase.reverse { grid-template-columns: 1fr; gap: 26px; }
    .showcase.reverse .sc-text { order: -1; }
  }
  .sc-text h3 { font-size: 1.45rem; }
  .sc-text p { color: var(--muted); margin-top: 12px; }
  .sc-list { margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
  .sc-list li { list-style: none; display: flex; gap: 11px; font-size: 0.96rem; }
  .sc-list li::before { content: "›"; color: var(--primary); font-weight: 800; }

  /* browser frame + admin dashboard */
  .browser { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); }
  .browser-bar { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  .browser-bar .dots { display: flex; gap: 6px; }
  .browser-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); display: block; }
  .browser-bar .url { margin-left: 6px; font-size: 0.72rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; }
  .dash { display: grid; grid-template-columns: 156px 1fr; }
  .dash-side { border-right: 1px solid var(--border); padding: 13px 9px; background: var(--surface); }
  .dash-brand { font-size: 0.72rem; font-weight: 700; line-height: 1.25; padding: 3px 8px 11px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
  .dash-brand small { display: block; color: var(--muted); font-weight: 600; font-size: 0.6rem; margin-top: 2px; }
  .nav-label { font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 9px 8px 3px; }
  .nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
  .nav-item svg { width: 14px; height: 14px; flex: none; }
  .nav-item.active { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
  .nav-item .nbadge { margin-left: auto; background: var(--accent); color: #3a2d08; font-size: 0.58rem; font-weight: 800; border-radius: 999px; padding: 1px 6px; }
  .dash-main { padding: 15px; background: var(--bg); }
  .dash-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
  .dash-top h4 { font-size: 0.95rem; font-weight: 750; }
  .dash-chip { font-size: 0.66rem; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; color: var(--muted); background: var(--surface); }
  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; }
  .stat .v { font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .stat .v.teal { color: var(--primary); } .stat .v.gold { color: var(--accent); }
  .stat .l { font-size: 0.6rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
  .dash-table { margin-top: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .dash-table .row { display: grid; grid-template-columns: 0.7fr 1.3fr 0.7fr 0.8fr; gap: 8px; padding: 9px 12px; font-size: 0.7rem; align-items: center; border-top: 1px solid var(--border); }
  .dash-table .row.head { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.56rem; border-top: none; background: var(--surface-2); }
  .dash-table .row span { font-variant-numeric: tabular-nums; }
  .pill { font-size: 0.58rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; justify-self: start; }
  .pill.confirmed { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
  .pill.pending { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #8a6d17; }
  .pill.cancelled { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
  @media (max-width: 560px) { .stat-row { grid-template-columns: repeat(2, 1fr); } .dash { grid-template-columns: 116px 1fr; } .dash-table .row { grid-template-columns: 0.8fr 1.2fr 0.9fr; } .dash-table .row .colhide { display: none; } }

  /* phone frame + resident app */
  .phone { width: 264px; margin: 0 auto; border: 10px solid #14141F; border-radius: 36px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
  :root[data-theme="dark"] .phone { border-color: #050509; }
  .phone-status { position: relative; height: 26px; background: var(--surface); }
  .phone-status::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 74px; height: 15px; background: #14141F; border-radius: 0 0 11px 11px; }
  :root[data-theme="dark"] .phone-status::after { background: #050509; }
  .app-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 12px; border-bottom: 1px solid var(--border); }
  .app-top .nm { font-size: 0.82rem; font-weight: 750; }
  .app-top .nm small { display: block; font-size: 0.58rem; color: var(--muted); font-weight: 600; }
  .app-top .av { width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(150deg, var(--primary), var(--primary-ink)); flex: none; }
  .app-body { padding: 13px 14px; }
  .chips { display: flex; gap: 7px; margin-bottom: 13px; }
  .chip2 { font-size: 0.66rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
  .chip2.on { background: var(--primary); color: #fff; border-color: var(--primary); }
  .days { display: flex; justify-content: space-between; margin-bottom: 13px; }
  .day { text-align: center; width: 13%; font-size: 0.56rem; color: var(--muted); font-weight: 700; }
  .day .d { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--ink); font-weight: 700; padding: 5px 0; border-radius: 8px; font-variant-numeric: tabular-nums; }
  .day.on .d { background: var(--primary); color: #fff; }
  .bk { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 11px; border: 1px solid var(--border); margin-bottom: 8px; }
  .bk .t { font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .bk .info { flex: 1; }
  .bk .info .c { font-size: 0.72rem; font-weight: 650; }
  .bk .info .s { font-size: 0.61rem; color: var(--muted); margin-top: 1px; }
  .bk .st { font-size: 0.56rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
  .bk.mine { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
  .bk.mine .st { background: var(--primary); color: #fff; }
  .bk.open .st { background: var(--slot-avail-bg); color: var(--accent); border: 1px solid var(--accent); }
  .app-nav { display: flex; border-top: 1px solid var(--border); background: var(--surface); }
  .app-nav a { flex: 1; text-align: center; padding: 9px 0 10px; font-size: 0.55rem; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
  .app-nav a svg { width: 17px; height: 17px; }
  .app-nav a.on { color: var(--primary); }

  /* ---- accountability band ---- */
  .band { background: #16302A; position: relative; overflow: hidden; }
  :root[data-theme="light"] .band { background: linear-gradient(150deg, #16302A 0%, #22463C 100%); }
  :root[data-theme="dark"] .band { background: #10201B; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .band .wrap { position: relative; z-index: 2; }
  .band .rule { background: var(--accent); }
  .band h2 { color: #fff; max-width: 15em; }
  .band p { color: rgba(255,255,255,0.80); margin-top: 16px; max-width: 42em; font-size: 1.08rem; }
  .band-lines { position: absolute; inset: 0; opacity: 0.14; pointer-events: none; }
  .ledger { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .ledger span {
    font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(176,137,79,0.42); color: var(--accent);
  }

  /* ---- comparison ---- */
  .cmp-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
  table.cmp { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.96rem; }
  table.cmp th, table.cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: top; }
  table.cmp thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
  table.cmp thead th.slotcol { color: var(--primary); }
  table.cmp tbody tr:last-child td { border-bottom: none; }
  table.cmp td.row-label { font-weight: 650; color: var(--ink); width: 26%; }
  table.cmp td.slotcol { font-weight: 600; color: var(--ink); }
  table.cmp td.other { color: var(--muted); }
  table.cmp .colfill { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

  /* ---- audience ---- */
  .aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; }
  @media (max-width: 900px) { .aud-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .aud-grid { grid-template-columns: 1fr; } }
  .aud { padding: 22px 20px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); }
  .aud .k { font-weight: 700; display: flex; gap: 8px; }
  .aud .k .tick { color: var(--primary); font-weight: 800; }
  .aud p { color: var(--muted); font-size: 0.93rem; margin-top: 9px; }

  /* ---- final cta ---- */
  .final { text-align: center; }
  .final-card {
    max-width: 720px; margin: 0 auto; padding: 54px 40px; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
  }
  .final-card .rule { margin: 0 auto 20px; }
  .final-card p { color: var(--muted); margin-top: 14px; font-size: 1.06rem; }
  .final-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
  .final-card .mailref { margin-top: 20px; font-size: 0.9rem; color: var(--muted); }
  .final-card .mailref a { color: var(--primary); text-decoration: none; font-weight: 600; }

  /* ---- footer ---- */
  footer { padding: 40px 0 56px; border-top: 1px solid var(--border); }
  .foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
  footer .brand { font-size: 1rem; }
  footer .muted { color: var(--muted); font-size: 0.88rem; }

  a:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }

  .reveal { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .reveal.d1 { animation-delay: .06s; } .reveal.d2 { animation-delay: .13s; } .reveal.d3 { animation-delay: .2s; } .reveal.d4 { animation-delay: .28s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }

  /* ---- demo form ---- */
  .demo-form { text-align: left; max-width: 480px; margin: 28px auto 0; }
  .demo-form .ff { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 520px) { .demo-form .ff { grid-template-columns: 1fr; } }
  .demo-form .field { margin-top: 14px; }
  .demo-form .ff .field { margin-top: 0; }
  .demo-form label { display: block; font-size: 0.82rem; font-weight: 650; color: var(--ink); margin-bottom: 6px; }
  .demo-form label .opt { color: var(--muted); font-weight: 500; }
  .demo-form input, .demo-form textarea {
    width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
    padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .demo-form input:focus, .demo-form textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  }
  .demo-form textarea { resize: vertical; min-height: 78px; }
  .demo-form button[type="submit"] { width: 100%; justify-content: center; margin-top: 18px; }
  .demo-form button[disabled] { opacity: .65; cursor: default; }
  .demo-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .form-status { margin: 12px 0 0; font-size: 0.9rem; font-weight: 600; min-height: 1.1em; }
  .form-status.err { color: #C0442E; }
  .demo-form.sent { display: none; }
  .form-done { display: none; margin-top: 26px; }
  .form-done.show { display: block; }
  .form-done .fd-check {
    width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
    display: grid; place-items: center; color: #fff;
    background: var(--primary);
  }
  .form-done .fd-check svg { width: 26px; height: 26px; }
  .form-done h3 { font-size: 1.2rem; }
  .form-done p { color: var(--muted); margin-top: 8px; }

  .demo-form .lbl { display: block; font-size: 0.82rem; font-weight: 650; color: var(--ink); margin-bottom: 8px; }
  .demo-form .radios { display: flex; gap: 10px; flex-wrap: wrap; }
  .demo-form .radio {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 0.9rem; font-weight: 600; color: var(--ink);
    border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 15px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .demo-form .radio:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
  .demo-form .radio:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
  .demo-form .radio input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }