/* ---------- Tokens (light theme) ---------- */
  :root{
    --bg:        #f7f9fc;
    --bg-2:      #eaf0f7;
    --bg-3:      #dde7f2;
    --card:      #ffffff;
    --line:      #d8e2ee;
    --line-2:    #bccbdf;

    --gold:      #9c6f13;
    --gold-hi:   #c9982f;
    --gold-lo:   #6b4a0a;
    --gold-deep: #3d2e07;

    --red:       #d6303f;
    --red-hi:    #a3202c;
    --red-lo:    #b8232f;

    --track:     #123a63;
    --cream:     #0f2a4d;

    --text:      #111a2c;
    --text-mut:  #4a5b73;
    --text-dim:  #5f7695;

    --font-display: "Anton", "Oswald", Impact, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

    --pad-x: clamp(20px, 5vw, 72px);
    --section-y: clamp(64px, 9vw, 128px);
    --radius: 14px;

    --grad-gold: linear-gradient(180deg, #d9ad4a 0%, #a67c1f 35%, #7a5a12 65%, #4a3708 100%);
    --grad-gold-flat: linear-gradient(180deg, #e0b354 0%, #b8862a 100%);
    --grad-red:  linear-gradient(180deg, #ff5967 0%, #e63946 55%, #b8232f 100%);
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }

  /* ---------- Layout helpers ---------- */
  .wrap{ max-width:1280px; margin:0 auto; padding:0 var(--pad-x); }
  .section{ padding: var(--section-y) 0; position:relative; }
  .section + .section{ border-top:1px solid var(--line); }

  /* ---------- Typography ---------- */
  h1,h2,h3,h4{ margin:0; letter-spacing:.01em; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold);
  }
  .eyebrow::before{
    content:""; width:22px; height:1px; background:var(--gold); opacity:.7;
  }
  .display{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    line-height:.92;
    letter-spacing:.005em;
  }
  .h1{ font-size: clamp(46px, 9vw, 112px); }
  .h2{ font-size: clamp(34px, 5.6vw, 68px); }
  .h3{ font-size: clamp(24px, 3.2vw, 34px); }
  .lede{
    font-size: clamp(16px, 1.6vw, 20px);
    color:var(--text-mut);
    max-width: 60ch;
    line-height:1.55;
  }

  /* Varsity outlined red headline treatment (echoes logo wordmark) */
  .varsity{
    color:var(--red);
    -webkit-text-stroke: 1.5px #0f2a4d;
    text-shadow:
      0 1px 0 rgba(255,255,255,.7),
      0 2px 4px rgba(17,26,44,.18);
  }
  /* Metallic gold text */
  .gold-text{
    background: var(--grad-gold);
    -webkit-background-clip: text; background-clip:text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 22px;
    border-radius: 10px;
    font-weight:700; font-size:15px; letter-spacing:.02em;
    border:0; cursor:pointer;
    min-height:48px;
    white-space:nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-red{
    background: var(--grad-red);
    color:#fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 8px 24px -8px rgba(230,57,70,.5);
  }
  .btn-red:hover{ background: linear-gradient(180deg,#ff6d78,#e63946 60%,#c4262f); }
  .btn-gold{
    background: var(--grad-gold-flat);
    color:#221a04;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 24px -10px rgba(232,193,90,.4);
  }
  .btn-gold:hover{ filter: brightness(1.05); }
  .btn-ghost{
    background: transparent;
    color: var(--text);
    border:1px solid var(--line-2);
  }
  .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }

  /* ---------- Lane stripe (recurring divider) ---------- */
  .lane{
    height:14px;
    background:
      linear-gradient(90deg, transparent 0, transparent 4px, var(--gold-lo) 4px, var(--gold-lo) 5px, transparent 5px) 0/24px 100% repeat-x,
      linear-gradient(180deg, transparent 5px, var(--gold) 5px, var(--gold) 6px, transparent 6px, transparent 8px, var(--gold-lo) 8px, var(--gold-lo) 9px, transparent 9px);
    opacity:.7;
  }
  .lane-thin{
    height:1px;
    background: linear-gradient(90deg, transparent, var(--gold-lo) 15%, var(--gold) 50%, var(--gold-lo) 85%, transparent);
    opacity:.55;
  }

  /* ---------- Header / Nav ---------- */
  .nav{
    position:sticky; top:0; z-index:80;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    background: rgba(247,249,252,.82);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 0;
    gap:16px;
  }
  .brand{ display:flex; align-items:center; gap:12px; min-width:0; }
  .brand img{ height:44px; width:auto; }
  .brand-txt{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:20px; letter-spacing:.06em;
    color:var(--gold);
    line-height:1;
  }
  .brand-txt small{
    display:block; font-family:var(--font-mono);
    font-size:9px; letter-spacing:.32em; color:var(--text-dim);
    margin-top:4px;
  }
  .nav-links{
    display:flex; gap:6px; align-items:center;
  }
  .nav-links a{
    padding:8px 12px; border-radius:8px;
    font-size:14px; font-weight:500; color:var(--text-mut);
  }
  .nav-links a:hover{ color:var(--gold); }
  .nav-cta{ display:flex; align-items:center; gap:10px; }
  .nav-cta .btn{ padding:10px 16px; min-height:40px; font-size:14px; }

  /* Org/role context switcher (P3-08 write side; polished visual pass Stage 3).
     Lets a user with 2+ active org roles pick which org's scope the app is
     currently acting under — mirrors the "Acting as" pattern of the drawer's
     copy below. Hidden by default (app.js only reveals it once it confirms
     the visitor holds 2+ active org role assignments); a lone role never
     needs a switcher since there's nothing to switch to. */
  .nav-context-switcher{
    display:flex; align-items:center; gap:8px;
    padding:6px 4px 6px 12px; border-radius:10px;
    background: rgba(156,111,19,.07);
    border:1px solid rgba(156,111,19,.22);
  }
  .nav-context-switcher::before{
    content:""; flex:none; width:7px; height:7px; border-radius:50%;
    background: var(--gold-hi);
    box-shadow: 0 0 0 3px rgba(156,111,19,.16);
  }
  .nav-context-switcher select{
    appearance:none; -webkit-appearance:none;
    padding:8px 30px 8px 4px; min-height:36px; border-radius:6px;
    border:0; background:transparent; color:var(--text);
    font-size:13px; font-weight:600; font-family:var(--font-body);
    max-width:180px; white-space:nowrap; text-overflow:ellipsis;
    cursor:pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c6f13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px 14px;
  }
  .nav-context-switcher select:focus-visible{
    outline: 2px solid var(--gold); outline-offset:2px; border-radius:6px;
  }
  .nav-context-switcher select:disabled{ opacity:.55; cursor:wait; }

  .hamburger{
    display:none;
    width:44px; height:44px; border-radius:10px;
    background:transparent; border:1px solid var(--line-2);
    align-items:center; justify-content:center;
    color:var(--gold);
  }
  .hamburger svg{ width:22px; height:22px; }

  @media (max-width: 960px){
    .nav-links, .nav-cta .btn-ghost{ display:none; }
    .nav-context-switcher{ display:none !important; }
    .hamburger{ display:inline-flex; }
  }
  @media (max-width: 520px){
    .brand-txt{ font-size:16px; }
    .brand img{ height:36px; }
  }

  /* Mobile drawer */
  .drawer{
    position:fixed; inset:0; z-index:90;
    background: rgba(15,24,40,.55);
    backdrop-filter: blur(8px);
    display:none;
  }
  .drawer.open{ display:block; }
  .drawer-panel{
    position:absolute; right:0; top:0; bottom:0;
    width: min(84vw, 340px);
    background: var(--bg-2);
    border-left:1px solid var(--line);
    padding: 24px;
    display:flex; flex-direction:column; gap:6px;
    overflow-y:auto;
  }
  .drawer-close{
    align-self:flex-end;
    background:transparent; border:1px solid var(--line-2); color:var(--gold);
    width:40px; height:40px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    margin-bottom:12px;
  }
  .drawer a, .drawer-link-btn{
    padding:14px 12px; border-radius:10px;
    font-size:18px; font-weight:600;
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
  }
  .drawer a:hover, .drawer-link-btn:hover{ color:var(--gold); }
  .drawer .btn{ margin-top:16px; }
  /* Account/dashboard/logout links, injected by app.js only for authenticated
     visitors — kept visually distinct (gold) from the always-visible marketing
     links above them so a logged-in user's own account actions stand out. */
  .drawer a#drawer-dashboard-link, .drawer a#drawer-account-link{ color:var(--gold); }
  .drawer-link-btn{
    width:100%; text-align:left;
    background:transparent; border:0; border-bottom:1px solid var(--line);
    color:var(--red-hi); font-family:inherit; cursor:pointer;
  }
  #drawer-guest-actions{ display:flex; flex-direction:column; gap:6px; }

  /* Drawer's own copy of the org/role context switcher (Stage 3 polish pass):
     the desktop .nav-context-switcher is hidden entirely below 960px (its
     compact select doesn't fit alongside the hamburger at that width), so
     without this the switcher was unreachable on any phone/tablet even
     though the underlying multi-org-role feature works fine there. app.js
     builds both selects from the same fetched assignment list and keeps
     their selected value in sync with each other (picking one updates the
     other immediately, no page reload). */
  .drawer-context-switcher{
    display:flex; flex-direction:column; gap:6px;
    padding:14px 12px; margin:4px 0;
    border-radius:10px;
    background: rgba(156,111,19,.07);
    border:1px solid rgba(156,111,19,.22);
  }
  .drawer-context-label{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold);
  }
  .drawer-context-label::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background: var(--gold-hi);
    box-shadow: 0 0 0 3px rgba(156,111,19,.16);
  }
  .drawer-context-switcher select{
    width:100%; padding:10px 12px; min-height:44px; border-radius:8px;
    border:1px solid var(--line-2); background:#fff; color:var(--text);
    font-size:15px; font-weight:600; font-family:var(--font-body);
    cursor:pointer;
  }
  .drawer-context-switcher select:disabled{ opacity:.55; cursor:wait; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px);
    overflow:hidden;
    background-image:
      linear-gradient(180deg, rgba(247,249,252,.94) 0%, rgba(247,249,252,.88) 45%, rgba(247,249,252,.97) 100%),
      url('/static/img/hero-track.jpg');
    background-size: cover;
    background-position: center 30%;
  }
  .hero::before{
    content:""; position:absolute; inset:-20% -10% auto -10%;
    height: 70%;
    background: radial-gradient(60% 80% at 50% 10%, rgba(156,111,19,.14), transparent 65%);
    pointer-events:none;
  }
  .hero::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--gold-lo) 20%, var(--gold) 50%, var(--gold-lo) 80%, transparent);
    opacity:.6;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 64px);
    align-items:center;
  }
  @media (max-width: 960px){
    .hero-grid{ grid-template-columns: 1fr; }
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    padding:6px 12px; border-radius:999px;
    background: rgba(255,255,255,.75);
    border:1px solid rgba(156,111,19,.3);
    color:var(--gold);
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    margin-bottom: 20px;
  }
  .hero-tag .dot{
    width:6px; height:6px; border-radius:50%; background:var(--red);
    box-shadow:0 0 0 3px rgba(230,57,70,.25);
  }
  .hero h1{ margin-bottom: 16px; }
  .hero h1 .line-1{ display:block; }
  .hero h1 .line-2{ display:block; }
  .hero-actions{
    display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;
  }
  .hero-strip{
    display:flex; gap:24px; flex-wrap:wrap;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px dashed var(--line-2);
    color:var(--text-mut);
    font-size:13px;
  }
  .hero-strip .k{
    color: var(--gold);
    font-family:var(--font-mono);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:11px;
    margin-right:8px;
  }

  /* Hero card: 3-pillar preview */
  .hero-card{
    background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    box-shadow:
      0 30px 60px -24px rgba(17,26,44,.22),
      inset 0 1px 0 rgba(255,255,255,.6);
    position:relative;
  }
  .hero-card::before{
    content:""; position:absolute; left:22px; right:22px; top:0;
    height:1px; background: var(--grad-gold);
    opacity:.7;
  }
  .hc-title{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:14px;
  }
  .hc-title .label{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--text-dim);
  }
  .hc-title .live{
    display:inline-flex; align-items:center; gap:6px;
    color: var(--red-hi);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  }
  .hc-title .live::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background: var(--red);
    box-shadow: 0 0 0 3px rgba(230,57,70,.25);
    animation: pulse 1.6s infinite;
  }
  @keyframes pulse{
    0%,100%{ box-shadow: 0 0 0 3px rgba(230,57,70,.25); }
    50%{ box-shadow: 0 0 0 6px rgba(230,57,70,0); }
  }
  .hc-meet{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:22px; letter-spacing:.02em; color:var(--cream);
    margin-bottom:2px;
  }
  .hc-sub{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--text-mut);
    margin-bottom:16px;
  }
  .hc-row{
    display:flex; justify-content:space-between; align-items:center;
    padding: 12px 14px;
    border-radius:10px;
    background: #e9eff8;
    border:1px solid var(--line);
    margin-bottom:8px;
  }
  .hc-row .left{ display:flex; align-items:center; gap:12px; min-width:0; }
  .hc-lane{
    width:28px; height:28px; border-radius:8px;
    background: linear-gradient(180deg,#ffffff,#dfe9f5);
    border:1px solid var(--line-2);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-family:var(--font-mono); font-size:12px; font-weight:600;
  }
  .hc-athlete{ font-weight:600; font-size:14px; color:var(--text); }
  .hc-team{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); letter-spacing:.08em; }
  .hc-time{
    font-family:var(--font-mono); font-weight:600; font-size:15px;
  }
  .hc-time.gold{ color:var(--gold); }
  .hc-time.red{ color:var(--red-hi); }
  .hc-foot{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--text-mut);
  }
  .hc-foot .ok{ color: var(--gold); }

  /* ---------- Pillars strip ---------- */
  .pillars{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
    margin-top: 40px;
  }
  @media (max-width:720px){ .pillars{ grid-template-columns:1fr; } }
  .pill{
    display:flex; align-items:center; gap:14px;
    padding: 16px 18px;
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius: 12px;
  }
  .pill .n{
    font-family:var(--font-display); font-size:28px;
    color:transparent; -webkit-text-stroke: 1.2px var(--gold);
    line-height:1;
  }
  .pill .t{ font-weight:700; font-size:15px; color:var(--text); }
  .pill .s{ font-size:12px; color:var(--text-mut); }

  /* ---------- Section header ---------- */
  .sh{ margin-bottom: 44px; max-width:820px; }
  .sh .h2{ margin-top:14px; margin-bottom:14px; }

  /* ---------- Doors (4 audiences) ---------- */
  .doors{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  }
  @media (max-width: 1024px){ .doors{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .doors{ grid-template-columns: 1fr; } }
  .door{
    position:relative;
    background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
    border:1px solid var(--line);
    border-radius: 16px;
    padding: 24px 22px 22px;
    overflow:hidden;
    transition: border-color .2s ease, transform .2s ease;
    box-shadow: 0 20px 40px -28px rgba(17,26,44,.18);
  }
  .door:hover{ border-color: var(--gold-lo); transform: translateY(-2px); }
  .door::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: var(--grad-gold); opacity:.9;
  }
  .door .num{
    font-family:var(--font-display); font-size:56px; line-height:1;
    color:transparent; -webkit-text-stroke: 1.5px var(--gold-lo);
    position:absolute; top:16px; right:20px;
  }
  .door .badge{
    display:inline-block; padding:4px 10px;
    background: var(--grad-red); color:#fff;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    border-radius: 4px;
    margin-bottom:14px;
  }
  .door h3{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:26px; letter-spacing:.02em; color:var(--cream);
    margin-bottom:8px;
  }
  .door p{
    color:var(--text-mut); font-size:14px; line-height:1.5;
    margin-bottom: 18px;
  }
  .door ul{ list-style:none; padding:0; margin:0 0 8px; }
  .door li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:13px; color:var(--text);
    padding: 6px 0;
    border-top:1px dashed var(--line);
  }
  .door li::before{
    content:""; flex-shrink:0;
    width:6px; height:6px; margin-top:8px;
    background: var(--gold); border-radius:1px;
    transform: rotate(45deg);
  }

  /* ---------- Three pillars big ---------- */
  .three{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    align-items: stretch;
  }
  @media (max-width: 880px){ .three{ grid-template-columns:1fr; } }
  .pcol{
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    position:relative;
  }
  .pcol .pn{
    font-family:var(--font-display); font-size:96px; line-height:.9;
    color:transparent; -webkit-text-stroke: 1.6px var(--gold);
    letter-spacing:.02em;
    margin-bottom: 8px;
  }
  .pcol h3{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:34px; color:var(--red);
    -webkit-text-stroke: 1px #e0b354;
    margin-bottom: 8px;
    letter-spacing:.01em;
  }
  .pcol p{ color:var(--text-mut); font-size:14.5px; margin:0 0 16px; }
  .pcol .chip{
    display:inline-flex; align-items:center; gap:8px;
    padding: 6px 12px; border-radius:999px;
    background: rgba(232,193,90,.08); border:1px solid rgba(232,193,90,.28);
    color: var(--gold);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  }

  /* ---------- Features section background (long jump action photo) ---------- */
  #features{
    position:relative;
    background-image:
      linear-gradient(180deg, rgba(247,249,252,.95) 0%, rgba(247,249,252,.9) 30%, rgba(247,249,252,.97) 100%),
      url('/static/img/features-longjump.jpg');
    background-size: cover;
    background-position: center 35%;
  }

  /* ---------- Feature grid ---------- */
  .fgrid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
  }
  @media (max-width: 900px){ .fgrid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .fgrid{ grid-template-columns: 1fr; } }
  .feat{
    background: var(--card);
    border:1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    position:relative;
    transition: border-color .2s ease;
  }
  .feat:hover{ border-color: var(--gold-lo); }
  .feat::before{
    content:""; position:absolute; left:22px; right:22px; top:0; height:1px;
    background: var(--gold); opacity:.4;
  }
  .feat .ic{
    width:40px; height:40px; border-radius:10px;
    background: rgba(232,193,90,.08);
    border:1px solid rgba(232,193,90,.3);
    color: var(--gold);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    font-family:var(--font-mono); font-weight:600; font-size:14px;
  }
  .feat h4{
    font-family:var(--font-display); text-transform:uppercase;
    color:var(--cream); font-size:20px; margin-bottom:6px; letter-spacing:.02em;
  }
  .feat p{ color:var(--text-mut); font-size:14px; margin:0; }

  /* ---------- Split sections ---------- */
  .split{
    display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
    align-items:center;
  }
  @media (max-width: 900px){ .split{ grid-template-columns:1fr; } }
  .split.reverse .split-copy{ order:2; }
  @media (max-width: 900px){ .split.reverse .split-copy{ order:0; } }
  .split-copy h2{ margin: 12px 0 14px; }
  .split-copy .checks{ list-style:none; padding:0; margin: 20px 0 24px; }
  .split-copy .checks li{
    display:flex; gap:12px; align-items:flex-start;
    padding: 10px 0; border-top:1px dashed var(--line);
    font-size:15px;
  }
  .split-copy .checks li:first-child{ border-top:0; }
  .split-copy .checks li::before{
    content:"✓"; color: var(--gold);
    font-weight:800; font-size:15px; margin-top:1px;
  }

  /* Meet-day mock */
  .mock{
    background: linear-gradient(180deg,#ffffff,#eef3fa);
    border:1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 30px 60px -24px rgba(17,26,44,.2);
  }
  .mock-head{
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom: 14px;
    border-bottom:1px solid var(--line);
    margin-bottom:14px;
  }
  .mock-head .t{
    font-family:var(--font-display); font-size:22px; color:var(--cream);
    text-transform:uppercase; letter-spacing:.02em;
  }
  .mock-head .s{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.18em; text-transform:uppercase;
  }
  .step-list{ display:flex; flex-direction:column; gap:8px; }
  .step{
    display:flex; align-items:center; gap:14px;
    padding: 12px 14px;
    background: #e9eff8;
    border:1px solid var(--line);
    border-radius: 10px;
  }
  .step .s-n{
    font-family:var(--font-mono); font-size:12px; color: var(--gold);
    width:34px;
  }
  .step .s-t{ flex:1; font-size:14px; }
  .step .s-tag{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
    text-transform:uppercase;
    padding: 4px 8px; border-radius: 4px;
  }
  .s-tag.done{ background: rgba(156,111,19,.14); color: var(--gold-lo); border:1px solid rgba(156,111,19,.35); }
  .s-tag.live{ background: rgba(214,48,63,.1); color: var(--red-hi); border:1px solid rgba(214,48,63,.32); }
  .s-tag.next{ background: #e2e9f3; color: var(--text-mut); border:1px solid var(--line-2); }

  /* Parent notification mock */
  .phone{
    background: linear-gradient(180deg,#ffffff,#e6edf7);
    border:1px solid var(--line);
    border-radius: 28px;
    padding: 22px;
    max-width: 380px;
    margin: 0 auto;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
  }
  .phone-time{
    text-align:center;
    font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
    letter-spacing:.2em; text-transform:uppercase;
    margin-bottom: 16px;
  }
  .notif{
    background: #e9eff8;
    border:1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
  }
  .notif-head{
    display:flex; align-items:center; gap:10px;
    margin-bottom:8px;
  }
  .notif-ic{
    width:26px; height:26px; border-radius:6px;
    background: var(--grad-gold-flat);
    display:flex; align-items:center; justify-content:center;
    color:#221a04; font-family:var(--font-display); font-size:14px;
  }
  .notif-app{ font-size:12px; font-weight:600; color:var(--text); }
  .notif-t{
    font-size:11px; color:var(--text-dim); margin-left:auto;
    font-family:var(--font-mono); letter-spacing:.08em;
  }
  .notif p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--text); }
  .notif p b{ color: var(--gold); font-weight:600; }

  /* Athlete card mock */
  .athlete-card{
    background: linear-gradient(180deg,#ffffff 0%,#eef3fa 100%);
    border:1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    max-width: 420px; margin: 0 auto;
    position:relative;
    overflow:hidden;
    box-shadow: 0 30px 60px -24px rgba(17,26,44,.2);
  }
  .athlete-card::before{
    content:""; position:absolute; inset: -30% -30% auto auto;
    width: 260px; height:260px; border-radius:50%;
    background: radial-gradient(circle, rgba(214,48,63,.18), transparent 60%);
  }
  .ac-head{ display:flex; justify-content:space-between; margin-bottom:20px; position:relative; }
  .ac-name{ font-family:var(--font-display); text-transform:uppercase; font-size:22px; color:var(--cream); }
  .ac-team{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); letter-spacing:.16em; text-transform:uppercase; margin-top:2px; }
  .ac-num{
    font-family:var(--font-display); font-size:44px;
    color:transparent; -webkit-text-stroke:1.4px var(--gold);
    line-height:1;
  }
  .ac-stats{
    display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-bottom:20px; position:relative;
  }
  .ac-stat{
    background: #e9eff8; border:1px solid var(--line); border-radius:10px;
    padding:10px;
  }
  .ac-stat .l{ font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
  .ac-stat .v{ font-family:var(--font-mono); font-size:16px; color:var(--gold); font-weight:600; margin-top:2px; }
  .ac-next{
    background: rgba(214,48,63,.06); border:1px solid rgba(214,48,63,.28);
    border-radius:12px; padding:14px; position:relative;
  }
  .ac-next .l{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--red-hi); margin-bottom:4px; }
  .ac-next .e{ font-family:var(--font-display); text-transform:uppercase; font-size:20px; color:var(--cream); }
  .ac-next .m{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); letter-spacing:.1em; margin-top:2px; }

  /* Coach roster mock */
  .roster{
    background: linear-gradient(180deg,#ffffff,#eef3fa);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 30px 60px -24px rgba(17,26,44,.2);
  }
  .roster-head{
    display:grid; grid-template-columns: 30px 1fr 80px 80px;
    padding: 8px 12px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--text-dim);
    border-bottom:1px solid var(--line);
  }
  .r-row{
    display:grid; grid-template-columns: 30px 1fr 80px 80px;
    align-items:center;
    padding: 12px;
    border-bottom:1px dashed var(--line);
    font-size:14px;
  }
  .r-row:last-child{ border-bottom:0; }
  .r-row .lane{
    height:auto; background:none; opacity:1;
    font-family:var(--font-mono); font-size:12px; color:var(--gold);
  }
  .r-row .ev{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.06em;
  }
  .r-row .st{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  }
  .r-row .st.in{ color: var(--gold); }
  .r-row .st.out{ color: var(--red-hi); }
  .r-row .st.pending{ color: var(--text-mut); }

  /* ---------- Marquee statement ---------- */
  .statement{
    position:relative;
    padding: clamp(80px, 12vw, 160px) 0;
    text-align:center;
    background-image:
      radial-gradient(60% 80% at 50% 50%, rgba(156,111,19,.05), transparent 60%),
      linear-gradient(180deg, rgba(247,249,252,.93), rgba(247,249,252,.93)),
      url('/static/img/footer-lanes.jpg');
    background-size: auto, cover, cover;
    background-position: center, center, center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .statement .h2{
    margin: 0 auto 16px;
    max-width: 16ch;
  }
  .statement .h2 span{ display:block; }
  .statement .h2 .a{ color:var(--cream); }
  .statement .h2 .b{ color: var(--red); -webkit-text-stroke: 1px #ffd76a; }
  .statement p{
    color:var(--text-mut); max-width: 48ch; margin: 0 auto;
  }

  /* ---------- Pricing ---------- */
  .price-grid{
    display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:stretch;
  }
  @media (max-width: 900px){ .price-grid{ grid-template-columns:1fr; } }
  .price{
    background: var(--card);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 28px 26px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .price.featured{
    border-color: transparent;
    background:
      linear-gradient(var(--card),var(--card)) padding-box,
      var(--grad-gold) border-box;
    border:1px solid transparent;
    transform: translateY(-6px);
  }
  @media (max-width: 900px){ .price.featured{ transform: none; } }
  .price .ribbon{
    position:absolute; top:-14px; right:22px;
    background: var(--grad-red);
    color:#fff;
    font-family:var(--font-mono);
    font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 6px 20px -8px rgba(230,57,70,.6);
  }
  .price h3{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:28px; color:var(--cream);
    margin-bottom:6px; letter-spacing:.02em;
  }
  .price .desc{ font-size:13.5px; color:var(--text-mut); min-height:44px; margin-bottom:20px; }
  .price .amt{
    display:flex; align-items:baseline; gap:6px; margin-bottom: 4px;
  }
  .price .amt .n{
    font-family:var(--font-display); font-size:60px; color:var(--cream);
    line-height:1;
  }
  .price .amt .cur{
    font-family:var(--font-display); font-size:24px; color:var(--gold);
    line-height:1;
  }
  .price .per{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.16em; text-transform:uppercase;
    margin-bottom: 20px;
  }
  .price ul{ list-style:none; padding:0; margin: 0 0 24px; }
  .price li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:14px; color:var(--text);
    padding: 8px 0;
    border-top:1px dashed var(--line);
  }
  .price li:first-child{ border-top:0; }
  .price li::before{
    content:"→"; color: var(--gold); flex-shrink:0; font-family:var(--font-mono); margin-top:1px;
  }
  .price .btn{ margin-top:auto; width:100%; }

  /* ---------- About section background (hurdles race photo) ---------- */
  #about{
    position:relative;
    background-image:
      linear-gradient(180deg, rgba(247,249,252,.95) 0%, rgba(247,249,252,.9) 35%, rgba(247,249,252,.97) 100%),
      url('/static/img/about-hurdles.jpg');
    background-size: cover;
    background-position: center 40%;
  }

  /* ---------- About ---------- */
  .about-grid{
    display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 56px);
    align-items:flex-start;
  }
  @media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } }
  .about-copy p{ color:var(--text); font-size:16px; line-height:1.65; }
  .about-copy p + p{ margin-top: 14px; }
  .stats{
    display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
  }
  .stat{
    background: var(--bg-2); border:1px solid var(--line);
    border-radius:14px; padding:20px;
  }
  .stat .v{
    font-family:var(--font-display); font-size:44px; color:var(--gold);
    line-height:1;
  }
  .stat .l{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.18em; text-transform:uppercase; margin-top:8px;
  }

  /* ---------- FAQ ---------- */
  .faq{ max-width: 820px; margin: 0 auto; }
  .qa{
    border-top:1px solid var(--line);
    padding: 4px 0;
  }
  .qa:last-child{ border-bottom:1px solid var(--line); }
  .qa summary{
    list-style:none;
    display:flex; justify-content:space-between; align-items:center;
    padding: 20px 8px;
    cursor:pointer;
    font-weight:600; font-size:17px;
    color:var(--text);
  }
  .qa summary::-webkit-details-marker{ display:none; }
  .qa summary::after{
    content:"+";
    font-family:var(--font-mono); color: var(--gold);
    font-size: 22px; font-weight: 300;
    transition: transform .2s ease;
  }
  .qa[open] summary::after{ content:"−"; }
  .qa .a{
    padding: 0 8px 20px;
    color: var(--text-mut); font-size:15px; line-height:1.6;
    max-width: 70ch;
  }

  /* ---------- Contact / Signup ---------- */
  .form-grid{
    display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px);
  }
  @media (max-width: 900px){ .form-grid{ grid-template-columns:1fr; } }
  .form{
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
  }
  .fld{ margin-bottom:16px; }
  .fld label{
    display:block; font-family:var(--font-mono);
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--gold); margin-bottom:8px;
  }
  .fld input, .fld select, .fld textarea{
    width:100%; padding: 14px 14px;
    background: #ffffff;
    border:1px solid var(--line-2);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    outline:none;
    min-height: 48px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .fld input:focus, .fld select:focus, .fld textarea:focus{
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232,193,90,.15);
  }
  .fld textarea{ min-height: 120px; resize:vertical; }
  .fld-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
  @media (max-width:520px){ .fld-row{ grid-template-columns:1fr; } }
  .fld-hint{ font-size:.85rem; color: var(--text-mut); margin: 4px 0 0; line-height:1.4; }
  .contact-side .row{
    display:flex; gap:14px; align-items:flex-start;
    padding: 18px 0; border-top:1px dashed var(--line);
  }
  .contact-side .row:first-child{ border-top:0; }
  .contact-side .row .lbl{
    font-family:var(--font-mono); font-size:10px; color:var(--text-mut);
    letter-spacing:.2em; text-transform:uppercase;
    width: 96px; margin-top:4px;
  }
  .contact-side .row .val{ font-size:16px; color:var(--text); }
  .contact-side .row .val a{ color: var(--gold); }
  .contact-side .row .val a:hover{ text-decoration: underline; }

  /* ---------- Final CTA ---------- */
  .final-cta{
    position:relative;
    text-align:center;
    padding: clamp(72px, 10vw, 128px) 0;
    background-image:
      radial-gradient(60% 70% at 50% 0%, rgba(214,48,63,.1), transparent 70%),
      radial-gradient(60% 70% at 50% 100%, rgba(156,111,19,.07), transparent 60%),
      linear-gradient(180deg, rgba(247,249,252,.92), rgba(247,249,252,.96)),
      url('/static/img/cta-track.jpg');
    background-size: auto, auto, cover, cover;
    background-position: center, center, center, center 20%;
  }
  .final-cta .kicker{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.24em;
    color: var(--gold); text-transform:uppercase; margin-bottom:14px;
  }
  .final-cta .h2{ margin: 0 auto 20px; max-width: 18ch; }
  .final-cta .lede{ margin: 0 auto 32px; text-align:center; }
  .final-cta .actions{
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  }

  /* ---------- Footer ---------- */
  .footer{
    background: var(--bg-3);
    border-top:1px solid var(--line);
    padding: 48px 0 24px;
    font-size:14px;
  }
  .footer-top{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: 32px;
    border-bottom:1px solid var(--line);
    margin-bottom: 20px;
  }
  @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }
  .footer-brand p{ color:var(--text-mut); margin-top:14px; max-width: 30ch; }
  .fcol h5{
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color: var(--gold); margin: 0 0 14px;
  }
  .fcol a{
    display:block; padding: 6px 0; color:var(--text-mut);
  }
  .fcol a:hover{ color: var(--gold); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    flex-wrap:wrap;
    color: var(--text-dim); font-size:12px;
    font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  }

  /* ---------- Utility ---------- */
  .hide-mobile{ }
  @media (max-width: 720px){ .hide-mobile{ display:none; } }

  /* ---------- Mobile bottom tab bar (Stage 3 nav restructuring) ----------
     App-like fixed bottom nav shown only under the same 720px breakpoint
     where .hide-mobile kicks in — below that width the hamburger drawer is
     already the mobile entry point for everything else, so this bar only
     carries the 3-4 items a mobile visitor reaches for constantly (Home,
     their own Dashboard once they have one, Log in/Account, and a "More"
     button that reopens the existing drawer). Desktop never renders this;
     see the max-width:720px query that turns it on below. */
  .bottom-nav{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:85;
    background: rgba(247,249,252,.96);
    border-top:1px solid var(--line);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    justify-content: space-around;
    align-items: stretch;
  }
  .bn-item{
    flex: 1 1 0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:6px 4px;
    background:transparent; border:0;
    color: var(--text-mut);
    font-family: var(--font-body);
    font-size:10.5px; font-weight:600; letter-spacing:.02em;
    cursor:pointer;
  }
  .bn-item svg{ width:22px; height:22px; }
  .bn-item:hover, .bn-item:active{ color: var(--gold); }
  .bn-item.active{ color: var(--gold); }
  @media (max-width: 720px){
    .bottom-nav{ display:flex; }
    /* Reserve room so page content and the footer never sit underneath the
       fixed bar; also nudges Coach Ace's launcher up so the two floating
       elements never overlap (see .ace-launcher's own mobile rule). */
    body{ padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hc-title .live::before{ animation:none; }
  }

/* ---------- Status labels (feature/vendor status) ---------- */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--text-dim);
  color:var(--text-mut); white-space:nowrap;
}
.status-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex:none; }
.status-available{ border-color:#2f9c4c; color:#1f7a3d; }
.status-available::before{ background:#2f9c4c; }
.status-development{ border-color:var(--gold-lo); color:var(--gold); }
.status-development::before{ background:var(--gold); }
.status-planned{ border-color:var(--text-dim); color:var(--text-mut); }
.status-planned::before{ background:var(--text-dim); }
.status-vendor{ border-color:var(--red-lo); color:var(--red-hi); }
.status-vendor::before{ background:var(--red); }

/* ---------- Legal / simple content pages ---------- */
.legal-page{ padding:120px 0 100px; }
.legal-page .wrap{ max-width:760px; }
.legal-page h1{ margin-bottom:8px; }
.legal-page .updated{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:40px;
}
.legal-page h2{ font-size:20px; margin:36px 0 12px; color:var(--gold); }
.legal-page p, .legal-page li{ color:var(--text-mut); line-height:1.7; margin-bottom:14px; }
.legal-page ul{ padding-left:20px; }
.legal-page a{ color:var(--gold); }
.legal-page a:hover{ color:var(--gold-lo); }
.legal-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:32px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mut);
}
.legal-back:hover{ color:var(--gold); }

/* ---------- Meet Coach Ace flyer page ---------- */
.ace-flyer{ padding:100px 0 100px; }
.ace-flyer .wrap{ max-width:1080px; }
.ace-flyer-hero{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px,4vw,56px);
  align-items:center; margin-bottom:56px;
}
@media (max-width:760px){ .ace-flyer-hero{ grid-template-columns:1fr; } }
.ace-flyer-hero-art{
  position:relative; display:flex; justify-content:center;
}
.ace-flyer-hero-art img{
  width:100%; max-width:280px; border-radius:20px;
  background: linear-gradient(180deg, #1c1712, #0f0c09);
  box-shadow: 0 30px 60px -30px rgba(17,26,44,.4);
}
.ace-flyer-title{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin: 6px 0 18px;
}
.ace-flyer-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }

.ace-flyer-section{ padding: 48px 0; border-top:1px solid var(--line); }
.ace-flyer-grid{ margin-top:32px; }

.ace-flyer-scope-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px);
}
@media (max-width:760px){ .ace-flyer-scope-grid{ grid-template-columns:1fr; } }
.ace-flyer-scope-col{
  border-radius:16px; padding: 28px 26px; border:1px solid var(--line);
  background: var(--card);
}
.ace-flyer-scope-col img{
  width:64px; height:64px; border-radius:12px; object-fit:cover; margin-bottom:16px;
  background: linear-gradient(180deg, #1c1712, #0f0c09);
}
.ace-flyer-scope-col h3{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:20px; color:var(--cream); margin-bottom:14px;
}
.ace-flyer-scope-col ul{ list-style:none; padding:0; margin:0; }
.ace-flyer-scope-col li{
  font-size:14.5px; color:var(--text-mut); line-height:1.55;
  padding: 10px 0; border-top:1px dashed var(--line);
}
.ace-flyer-scope-col li:first-child{ border-top:0; }
.ace-flyer-scope-can{ border-color: rgba(47,156,76,.28); }
.ace-flyer-scope-can h3{ color:#1f7a3d; }
.ace-flyer-scope-cant{ border-color: rgba(214,48,63,.22); }
.ace-flyer-scope-cant h3{ color:var(--red-hi); }

.ace-flyer-final{
  text-align:center; padding-top:56px;
}
.ace-flyer-final img{
  width:110px; height:110px; border-radius:50%; object-fit:cover; margin: 0 auto 20px;
  background: linear-gradient(180deg, #1c1712, #0f0c09);
}
.ace-flyer-final .lede{ margin: 10px auto 26px; }

/* ---------- Contact form: consent + confirmation ---------- */
.consent-row{
  display:flex; align-items:flex-start; gap:10px; margin: 18px 0;
  font-size:13px; color:var(--text-mut); line-height:1.5;
}
.consent-row input[type="checkbox"]{
  margin-top:3px; width:16px; height:16px; accent-color:var(--gold); flex:none;
}
.consent-row a{ color:var(--gold); }

.form-error{
  display:none; margin-bottom:16px; padding:12px 14px; border-radius:8px;
  border:1px solid var(--red-lo); background:rgba(214,48,63,.06); color:var(--red-hi);
  font-size:13px; line-height:1.5;
}
.form-error.show{ display:block; }

.form-success{
  display:none; margin-bottom:16px; padding:12px 14px; border-radius:8px;
  border:1px solid var(--gold-lo); background:rgba(156,111,19,.08); color:var(--gold);
  font-size:13px; line-height:1.5;
}
.form-success.show{ display:block; }

.confirm-panel{
  display:none; text-align:center; padding:56px 24px;
  border:1px solid var(--gold-lo); border-radius:16px; background:var(--bg-2);
}
.confirm-panel.show{ display:block; }
.confirm-panel .ic{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:800;
}
.confirm-panel h3{ margin-bottom:10px; }
.confirm-panel p{ color:var(--text-mut); max-width:44ch; margin:0 auto; }

/* honeypot field - hidden from real users, visible to bots that fill every field */
.hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

/* ---------- Auth pages (register / login / verify / forgot / reset) ---------- */
.auth-page .wrap{ max-width:480px; }
.auth-page .auth-head{ text-align:center; margin-bottom:32px; }
.auth-page .auth-head .lede{ margin:14px auto 0; text-align:center; }
.auth-page .form{ margin-bottom:0; }
.auth-page .mfa-row{ display:none; margin-top:16px; }
.auth-page .mfa-row.show{ display:block; }
.auth-page .auth-foot{
  text-align:center; margin-top:24px; font-size:13px; color:var(--text-mut);
}
.auth-page .auth-foot a{ color:var(--gold); }
.auth-page .auth-foot a:hover{ color:var(--gold-lo); }
.auth-page .auth-foot p{ margin:6px 0; }
.auth-page .confirm-panel{ margin-top:0; }
.auth-page .confirm-panel .ic.pending{
  background: linear-gradient(180deg, var(--text-mut), var(--text-dim));
  font-size:22px;
}

/* ---------- Account security / MFA settings page ---------- */
.account-page .mfa-panel{
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  padding:28px; margin-bottom:20px;
}
.mfa-state-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.mfa-state-row p{ color:var(--text-mut); line-height:1.6; margin:0; }
.mfa-state-row strong{ color:var(--text); }
.mfa-email{ font-family:var(--font-mono); font-size:13px; color:var(--gold-lo); }
.mfa-state-badge{
  flex:none; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; font-weight:600;
}
.mfa-state-badge.off{ background:rgba(74,91,115,.1); color:var(--text-mut); border:1px solid var(--line-2); }
.mfa-state-badge.on{ background:rgba(156,111,19,.12); color:var(--gold-lo); border:1px solid var(--gold-hi); }
.mfa-secret-box{
  font-family:var(--font-mono); font-size:15px; letter-spacing:.06em; word-break:break-all;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px; padding:14px 16px;
  margin:12px 0; color:var(--gold-lo); text-align:center;
}
.mfa-auth-url{ text-align:center; margin-bottom:20px; font-size:13px; }
.mfa-auth-url a{ color:var(--gold); }
.mfa-auth-url a:hover{ color:var(--gold-lo); }
.mfa-reverify-note{
  margin-top:14px; font-size:13px; color:var(--text-mut); line-height:1.6;
}

/* ---------- Phase 3: Organizations / roles admin pages ---------- */
.admin-page .wrap{ max-width:760px; }
.admin-head{ text-align:center; margin-bottom:32px; }
.admin-head .lede{ margin:14px auto 0; text-align:center; }
.admin-head .eyebrow a{ color:var(--gold); }
.admin-panel{
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  padding:28px; margin-bottom:24px;
}
.admin-panel-title{ font-size:18px; margin-bottom:6px; }
.admin-panel-sub{ color:var(--text-mut); font-size:13px; line-height:1.6; margin-bottom:18px; }
.admin-empty{ color:var(--text-mut); font-size:14px; }

.admin-role-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.admin-role-chip{
  display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--bg-2);
  color:var(--text);
}
.admin-role-chip .org{ color:var(--gold-lo); font-weight:600; }
.admin-role-chip.pending{ border-color:var(--line-2); opacity:.7; }
.admin-role-chip .tag{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:2px 7px; border-radius:999px;
  background:rgba(74,91,115,.12); color:var(--text-mut);
}
.admin-role-chip .tag.active{ background:rgba(156,111,19,.14); color:var(--gold-lo); }

.admin-org-list, .admin-role-list{ display:flex; flex-direction:column; gap:0; }
.admin-org-row, .admin-role-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.admin-org-row:last-child, .admin-role-row:last-child{ border-bottom:none; }
.admin-org-row a{ color:var(--text); font-weight:600; }
.admin-org-row a:hover{ color:var(--gold); }
.admin-org-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; }
.admin-status-pill{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 10px; border-radius:999px; flex:none; border:1px solid var(--line-2); color:var(--text-mut);
}
.admin-status-pill.approved{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.draft, .admin-status-pill.pending_review{ background:rgba(74,91,115,.08); }
.admin-status-pill.suspended, .admin-status-pill.archived{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
.admin-status-pill.active{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.pending{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.revoked{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
/* Stage 6: connection/payment/order status pills — reuse the same
   approved/pending/archived color language established above rather than
   inventing new colors, so "connected"/"paid"/"fulfilled" read as the same
   kind of positive state as "approved"/"active" elsewhere on the site. */
.admin-status-pill.not_connected{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.connected, .admin-status-pill.paid, .admin-status-pill.fulfilled{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.placed{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.canceled, .admin-status-pill.disabled{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
/* Stage 7: correction-request review status — reuses the same
   approved/pending/rejected color language as everything above. */
.admin-status-pill.rejected{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }

/* Stage 7 (P11-07): athlete PR/media card. Photo/boomerang preview is a
   fixed square so a mismatched aspect-ratio upload never distorts the
   layout; the boomerang <video> is muted/loop/playsinline (never
   autoplays with sound, and JS withholds the `autoplay` attribute entirely
   when prefers-reduced-motion is set — see loadAthleteMediaSlot). */
.athlete-record-card{ border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.athlete-record-media{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.athlete-record-media-slot{ width:96px; height:96px; border-radius:10px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line-2); flex:none; display:flex; align-items:center; justify-content:center; }
.athlete-record-media-slot img, .athlete-record-media-slot video{ width:100%; height:100%; object-fit:cover; display:block; }
.athlete-record-media-slot .admin-empty{ font-size:10px; text-align:center; padding:0 6px; }
.athlete-record-media-actions{ display:flex; flex-direction:column; gap:6px; justify-content:center; }
.athlete-record-media-actions input[type="file"]{ font-size:12px; max-width:220px; }
.athlete-pr-row{ border-top:1px solid var(--line-2); padding:10px 0; }
.athlete-pr-row:first-of-type{ border-top:none; }
.athlete-pr-history{ margin:8px 0 0 0; padding-left:18px; font-size:12px; color:var(--text-mut); }
.athlete-pr-history li{ margin-bottom:2px; }

.admin-role-row-info{ font-size:14px; }
.admin-role-row-info .email{ font-family:var(--font-mono); font-size:12px; color:var(--text-mut); }
.admin-role-row-actions{ display:flex; gap:8px; flex:none; }
.admin-role-row-actions button{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 12px; border-radius:8px; border:1px solid var(--line-2); background:transparent;
  color:var(--text-mut); cursor:pointer;
}
.admin-role-row-actions button:hover{ border-color:var(--gold); color:var(--gold); }
.admin-role-row-actions button.danger:hover{ border-color:var(--red); color:var(--red); }

.admin-panel .btn-ghost{ margin-top:12px; margin-left:10px; }

/* Phase 4: admin dashboard additions */
.admin-metrics-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; }
.admin-metric-card{
  border:1px solid var(--line-2); border-radius:12px; padding:16px; text-align:center;
}
.admin-metric-card .num{ font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--gold-lo); display:block; }
.admin-metric-card .label{ font-size:12px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; display:block; }
.admin-status-pill.new{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.contacted, .admin-status-pill.qualified{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.closed{ background:rgba(74,91,115,.08); }
.admin-status-pill.spam{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
.admin-audit-row{ padding:12px 0; border-bottom:1px solid var(--line-2); font-size:13px; }
.admin-audit-row:last-child{ border-bottom:none; }
.admin-audit-row .action{ font-family:var(--font-mono); font-weight:600; color:var(--gold-lo); }
.admin-audit-row .meta{ color:var(--text-mut); font-size:12px; margin-top:2px; }
.admin-audit-row .details{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; word-break:break-word; }

/* Phase 9 (P9-03): expandable meet schedule/results (shared across the
   Meet Director, Coach, Timing Partner, and Club dashboards). */
.toe-meet-detail{ padding-top:6px; border-top:1px solid var(--line-2); }
.toe-event-block{ padding:10px 0; border-bottom:1px solid var(--line-2); }
.toe-event-block:last-child{ border-bottom:none; }
.toe-heat-block{ margin:8px 0 0 14px; }
.toe-heat-results .admin-role-row{ padding:8px 0; }

/* ==========================================================================
   Coach Ace — AI assistant widget (site-wide launcher + chat panel)
   Lives in every page via the shared layout (src/lib/layout.ts).
   ========================================================================== */
.ace-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9990;
  width:64px; height:64px; border-radius:50%;
  border:2px solid var(--red);
  background:#181410 center/cover no-repeat;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45), 0 0 0 4px rgba(214,48,63,.12);
  cursor:pointer; padding:0; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ace-launcher:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px -8px rgba(0,0,0,.5), 0 0 0 5px rgba(214,48,63,.16); }
.ace-launcher img{ width:100%; height:100%; object-fit:cover; display:block; }
.ace-launcher .ace-ping{
  position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%;
  background:var(--red); border:2px solid #fff; display:none;
}
.ace-launcher.has-badge .ace-ping{ display:block; }
.ace-launcher-label{
  position:fixed; right:92px; bottom:34px; z-index:9990;
  background:#181410; color:#fff; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transform:translateX(6px);
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
.ace-launcher-label.show{ opacity:1; transform:translateX(0); }
body.ace-open .ace-launcher, body.ace-open .ace-launcher-label{ display:none; }
/* Stage 3: the mobile drawer/bottom-nav "More" panel is a full-height
   overlay too — hide the floating launcher while it's open so it can't sit
   on top of the drawer's Sign up button (same treatment as ace-open above). */
.drawer.open ~ .ace-launcher, .drawer.open ~ .ace-launcher-label{ display:none; }

.ace-panel{
  position:fixed; right:20px; bottom:20px; z-index:9995;
  width:min(400px, calc(100vw - 32px));
  height:min(620px, calc(100vh - 100px));
  background:#14110d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.6);
  display:none;
  flex-direction:column;
  overflow:hidden;
  font-family:var(--font-body);
}
body.ace-open .ace-panel{ display:flex; }

.ace-header{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, #1c1712 0%, #14110d 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex:none;
}
.ace-header img{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--red); flex:none; }
.ace-header-text{ flex:1; min-width:0; }
.ace-header-text .name{ color:#fff; font-weight:800; font-size:14px; letter-spacing:.01em; }
.ace-header-text .title{ color:#9c9488; font-size:11px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }
.ace-header-actions{ display:flex; gap:6px; flex:none; }
.ace-header-actions button{
  width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
  background:transparent; color:#c9c2b4; display:flex; align-items:center; justify-content:center;
}
.ace-header-actions button:hover{ border-color:var(--red); color:#fff; }

.ace-body{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  background:#14110d;
}
.ace-msg{ display:flex; gap:10px; align-items:flex-start; max-width:100%; }
.ace-msg img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; margin-top:2px; }
.ace-msg-bubble{
  background:#221b13; color:#f2ede2; border-radius:12px; padding:10px 14px;
  font-size:14px; line-height:1.5; max-width:82%;
  border:1px solid rgba(255,255,255,.06);
}
.ace-msg.user{ flex-direction:row-reverse; }
.ace-msg.user .ace-msg-bubble{ background:var(--red); color:#fff; border-color:transparent; }
.ace-msg-bubble a{ color:var(--gold-hi); text-decoration:underline; }
.ace-msg-bubble .ace-nav-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  background:transparent; border:1px solid var(--gold-hi); color:var(--gold-hi);
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; text-decoration:none;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em;
}
.ace-msg-bubble .ace-nav-btn:hover{ background:var(--gold-hi); color:#181410; }
.ace-msg-bubble .ace-source{
  display:block; margin-top:6px; font-size:11px; color:#8a8276; font-family:var(--font-mono);
}

.ace-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; flex:none; }
.ace-quick button{
  background:#221b13; border:1px solid rgba(255,255,255,.1); color:#e8e2d4;
  font-size:12.5px; padding:8px 12px; border-radius:999px; white-space:nowrap;
}
.ace-quick button:hover{ border-color:var(--red); color:#fff; }

.ace-footer{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08); flex:none; background:#181410;
}
.ace-footer input{
  flex:1; background:#221b13; border:1px solid rgba(255,255,255,.1); color:#fff;
  border-radius:10px; padding:11px 14px; font-size:14px; font-family:inherit;
  min-width:0;
}
.ace-footer input:focus{ outline:none; border-color:var(--red); }
.ace-footer input::placeholder{ color:#7a7367; }
.ace-footer button{
  flex:none; width:40px; height:40px; border-radius:10px; border:0;
  background:var(--grad-red); color:#fff; display:flex; align-items:center; justify-content:center;
}
.ace-footer button:disabled{ opacity:.5; }
.ace-footer .ace-mic{ background:transparent; border:1px solid rgba(255,255,255,.1); color:#7a7367; }

.ace-disclaimer{
  padding:0 16px 10px; flex:none; font-size:10.5px; color:#6b655a; font-family:var(--font-mono);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.ace-disclaimer a{ color:var(--gold); white-space:nowrap; }
.ace-disclaimer a:hover{ text-decoration:underline; }

/* Below the 720px breakpoint the new fixed .bottom-nav (Stage 3) occupies
   the bottom of the viewport — lift the launcher above it so the two
   floating elements never overlap. The chat panel itself still goes full
   screen at <=480px (below), which already covers the bottom nav's z-index
   of 85 with its own z-index of 9995, so no change needed there. */
@media (max-width:720px){
  .ace-launcher{ bottom: calc(58px + 12px + env(safe-area-inset-bottom)); }
  .ace-launcher-label{ bottom: calc(58px + 26px + env(safe-area-inset-bottom)); }
  body.ace-open .bottom-nav{ display:none; }
}

/* Stage 5 visual QA finding: the rules above only keep .ace-launcher off
   the .bottom-nav bar itself — they don't stop it floating on top of
   ordinary page CONTENT that happens to render at that same fixed height
   (confirmed via a real, non-full-page viewport screenshot + a
   getBoundingClientRect() measurement showing a genuine ~31x55px overlap
   with the first card on the mobile /calendar page — not a full-page
   screenshot-stitching artifact like the similar-looking Stage 3 Part 1c
   finding). Reserve the same vertical space at the bottom of any
   scrollable content list so the last visible content never sits under
   the launcher's footprint. */
@media (max-width:720px){
  .calendar-event-list{
    padding-bottom: calc(64px + 12px + env(safe-area-inset-bottom));
  }
}

/* Stage 6 visual QA finding (same class of bug as the Stage 5 finding
   above, disambiguated with the identical method: window.scrollTo(0,0) +
   getBoundingClientRect() measurement on a real, non-full-page viewport
   screenshot at an 844px-tall mobile viewport — not a screenshot-stitching
   artifact; confirmed the overlap clears with as little as 50px of scroll,
   but is genuinely present at the initial scroll-position-0 paint, i.e.
   the very first thing a mobile visitor sees). Unlike the Stage 5 fix
   above (a scrollable list's LAST item colliding with the launcher's
   bottom-fixed footprint), this is a right-edge collision: the "Merchant
   connection" status text on /payments and /store is wide enough on a
   narrow viewport that it visually runs under .ace-launcher's fixed
   64px-wide circle in the bottom-right corner (confirmed ~31x27px overlap
   between .ace-launcher and #payments-connection-status /
   #store-connection-status at scroll 0). Reserve the launcher's column
   width as right padding on the status text itself so it always wraps
   before reaching that corner, regardless of scroll position. */
@media (max-width:720px){
  #payments-connection-status, #store-connection-status{
    padding-right: calc(64px + 12px);
  }
}

@media (max-width:480px){
  .ace-panel{ right:0; bottom:0; width:100vw; height:100vh; border-radius:0; }
  .ace-launcher{ right:16px; }
  .ace-launcher-label{ display:none; }
}

/* Reduced motion / accessibility */
@media (prefers-reduced-motion: reduce){
  .ace-launcher, .ace-launcher-label{ transition:none; }
}
body.ace-reduced-motion .ace-launcher{ transition:none; }
body.ace-reduced-motion .ace-launcher:hover{ transform:none; }

/* ---------- Stage 3: public league/club page (src/pages/publicOrg.ts) ---------- */
.public-org-page .wrap{ max-width:820px; }
.public-org-banner{
  position:relative; overflow:hidden;
  border-radius:16px; background:linear-gradient(135deg, var(--bg-2), var(--bg-3));
  background-size:cover; background-position:center;
  border:1px solid var(--line); padding:32px; margin-top:8px;
}
/* A photo banner_url (org.bio's photo, not this gradient) can land behind
   this same element at any brightness/contrast — a dark runner-track photo
   with dark-navy `--text` name/eyebrow text on top (as caught by visual QA)
   reads as near-illegible. This scrim + light-on-dark text treatment makes
   the overlaid name/eyebrow/status always readable regardless of what the
   org uploaded as their banner photo, the same "never depend on unknown
   background contrast" reasoning as the hero section's own ::before overlay
   above. Applies whenever a banner_url is set (data-has-banner, toggled by
   app.js) — with no banner photo, the plain gradient behind is already
   light, so the original dark text stays as-is for that case. */
.public-org-banner[data-has-banner="true"]::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,26,.35), rgba(10,14,26,.72));
}
.public-org-banner-inner{ position:relative; z-index:1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.public-org-logo{ height:64px; width:64px; border-radius:12px; object-fit:cover; border:1px solid var(--line-2); background:#fff; }
#public-org-name{ margin-top:6px; }
#public-org-status-pill{ margin-top:8px; }
.public-org-banner[data-has-banner="true"] #public-org-kind-label{ color:var(--gold-hi); }
.public-org-banner[data-has-banner="true"] #public-org-kind-label::before{ background:var(--gold-hi); }
.public-org-banner[data-has-banner="true"] #public-org-name{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.public-org-banner[data-has-banner="true"] #public-org-status-pill.approved{
  background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4);
}

/* ---------- Phase 11 Stage 4: Community (board/channels) & Messages (DM) ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.board-post{
  border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; background:var(--bg-2);
}
.board-post.pinned{ border-color:var(--gold-hi); background:rgba(156,111,19,.05); }
.board-post-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.board-post-title{ font-size:16px; font-weight:700; margin:0; }
.board-post-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; }
.board-post-body{ font-size:14px; line-height:1.6; color:var(--text); margin-bottom:12px; white-space:pre-wrap; }
.board-post-actions{ display:flex; gap:8px; flex:none; }
.board-post-actions button{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:5px 10px; border-radius:8px; border:1px solid var(--line-2); background:transparent;
  color:var(--text-mut); cursor:pointer;
}
.board-post-actions button:hover{ border-color:var(--gold); color:var(--gold); }

.board-poll{
  border:1px solid var(--line-2); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:var(--card);
}
.board-poll-question{ font-weight:600; font-size:14px; margin-bottom:10px; }
.board-poll-option{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
.board-poll-option .bar-track{ flex:1; height:8px; border-radius:999px; background:var(--bg-3); overflow:hidden; }
.board-poll-option .bar-fill{ height:100%; background:var(--gold); border-radius:999px; }
.board-poll-option .pct{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); width:40px; text-align:right; flex:none; }
.board-poll-option.voted{ font-weight:700; color:var(--gold-lo); }
.board-poll-vote-btn{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:6px; border:1px solid var(--line-2); background:transparent;
  color:var(--text-mut); cursor:pointer; flex:none;
}
.board-poll-vote-btn:hover{ border-color:var(--gold); color:var(--gold); }

.board-comments{ border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.board-comment{ font-size:13px; line-height:1.5; padding:8px 0; border-bottom:1px dashed var(--line); }
.board-comment:last-child{ border-bottom:none; }
.board-comment .author{ font-weight:600; color:var(--text); }
.board-comment .meta{ font-family:var(--font-mono); font-size:10px; color:var(--text-mut); margin-left:6px; }
.board-comment-form{ display:flex; gap:8px; margin-top:10px; }
.board-comment-form input{
  flex:1; padding:8px 12px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); font-size:13px;
}

.channel-list{ display:flex; flex-direction:column; gap:2px; }
.channel-list-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--text-mut);
}
.channel-list-item:hover{ background:var(--bg-2); color:var(--text); }
.channel-list-item.active{ background:rgba(156,111,19,.1); color:var(--gold-lo); font-weight:600; }
.channel-list-item .archived-tag{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--text-mut); }

.chat-message-list{
  display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto;
  border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--bg-2); margin-bottom:0;
}
.chat-message{ font-size:13px; line-height:1.5; }
.chat-message.own .chat-message-bubble{ background:rgba(156,111,19,.12); border-color:var(--gold-hi); }
.chat-message-sender{ font-weight:600; color:var(--text); }
.chat-message-time{ font-family:var(--font-mono); font-size:10px; color:var(--text-mut); margin-left:6px; }
.chat-message-bubble{
  display:inline-block; margin-top:3px; padding:8px 12px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--card); color:var(--text); max-width:100%; word-break:break-word;
}
.chat-message.pinned .chat-message-bubble{ border-color:var(--gold-hi); }
.chat-message-actions{ display:inline-flex; gap:6px; margin-left:8px; }
.chat-message-actions button{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 6px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.chat-message-actions button:hover{ border-color:var(--gold); color:var(--gold); }
.chat-empty{ color:var(--text-mut); font-size:13px; text-align:center; padding:20px 0; }

.dm-thread-list{ display:flex; flex-direction:column; gap:2px; }
.dm-thread-item{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; cursor:pointer;
}
.dm-thread-item:hover{ background:var(--bg-2); }
.dm-thread-item.active{ background:rgba(156,111,19,.1); }
.dm-thread-item .name{ font-size:13px; font-weight:600; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dm-thread-item .preview{ font-size:12px; color:var(--text-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-unread-badge{
  font-family:var(--font-mono); font-size:10px; background:var(--gold); color:#1a1206; border-radius:999px;
  padding:1px 7px; flex:none;
}

/* ---- Notification bell (Stage 5) ---- */
.nav-bell{ padding:8px !important; }
.nav-bell-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; border-radius:999px;
  background:var(--red); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1;
}
.nav-bell-panel{
  position:absolute; top:100%; right:0; margin-top:8px; width:320px; max-height:400px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  z-index:60;
}
.nav-bell-panel-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text);
}
.nav-bell-mark-all{
  font-family:var(--font-mono); font-size:10px; text-transform:none; letter-spacing:0; font-weight:500;
  background:none; border:none; color:var(--gold); cursor:pointer; padding:0;
}
.nav-bell-mark-all:hover{ text-decoration:underline; }
.nav-bell-list{ padding:6px; }
.nav-bell-item{
  display:block; padding:10px 8px; border-radius:8px; font-size:12px; line-height:1.4; color:var(--text-mut);
  border-bottom:1px dashed var(--line);
}
.nav-bell-item:last-child{ border-bottom:none; }
.nav-bell-item.unread{ background:rgba(156,111,19,.08); color:var(--text); }
.nav-bell-item .title{ font-weight:600; color:var(--text); display:block; margin-bottom:2px; }
.nav-bell-item .time{ font-family:var(--font-mono); font-size:9px; color:var(--text-mut); }

/* ---- Calendar events (Stage 5) ---- */
.calendar-event-list{ display:flex; flex-direction:column; gap:10px; }
.calendar-event-card{
  border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; background:var(--card);
}
.calendar-event-card.cancelled{ opacity:.6; }
.calendar-event-card .cal-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.calendar-event-card .cal-title{ font-weight:700; font-size:14px; color:var(--text); }
.calendar-event-card .cal-type{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-lo);
  border:1px solid var(--gold-hi); border-radius:6px; padding:2px 6px; flex:none;
}
.calendar-event-card .cal-when{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; }
.calendar-event-card .cal-location{ font-size:12px; color:var(--text-mut); margin-top:2px; }
.calendar-event-card .cal-desc{ font-size:13px; color:var(--text); margin-top:8px; }
.calendar-event-card .cal-rsvp-row{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.calendar-event-card .cal-rsvp-btn{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.calendar-event-card .cal-rsvp-btn:hover{ border-color:var(--gold); color:var(--gold); }
.calendar-event-card .cal-rsvp-btn.active{ background:var(--gold); border-color:var(--gold); color:#1a1206; font-weight:700; }
.calendar-event-card .cal-rsvp-summary{ font-family:var(--font-mono); font-size:10px; color:var(--text-mut); }
.calendar-event-card .cal-actions{ display:inline-flex; gap:6px; margin-left:auto; }
.calendar-event-card .cal-actions button{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 6px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.calendar-event-card .cal-actions button:hover{ border-color:var(--gold); color:var(--gold); }

/* ---- Payments & Store (Stage 6) ---- */
/* Shared list/card styling for payment items/requests and store products/
   orders — mirrors .calendar-event-list/.calendar-event-card's structure
   exactly (list = column flex with gap, card = bordered rounded panel),
   so these two new Stage 6 pages visually match every existing dashboard
   list on the site rather than introducing a new pattern. */
.pay-item-list, .pay-request-list, .store-product-list, .store-order-list{ display:flex; flex-direction:column; gap:10px; }
.pay-item-card, .pay-request-card, .store-product-card, .store-order-card{
  border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; background:var(--card);
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;
}
.pay-item-card.archived, .store-product-card.archived{ opacity:.6; }
.pay-request-card.canceled, .store-order-card.canceled{ opacity:.6; }
.pay-item-title, .pay-request-title, .store-product-name{ font-weight:700; font-size:14px; color:var(--text); }
.pay-item-amount, .pay-request-amount, .store-product-price{ font-family:var(--font-mono); font-size:13px; color:var(--gold-lo); margin-top:4px; }
.pay-item-desc, .pay-request-desc, .store-product-desc{ font-size:12px; color:var(--text-mut); margin-top:4px; }
.pay-request-payer, .store-order-buyer{ font-size:12px; color:var(--text-mut); margin-top:2px; }
.pay-actions, .store-actions{ display:inline-flex; gap:6px; flex:none; }
.pay-actions button, .store-actions button{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 6px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.pay-actions button:hover, .store-actions button:hover{ border-color:var(--gold); color:var(--gold); }
.connection-status-box{
  border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; background:var(--card);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.connection-status-box .connection-note{ font-size:12px; color:var(--text-mut); }