:root{
  --navy:#0d2340; --navy2:#143a63; --navy3:#1d4d80;
  --gold:#b8862b; --gold-lt:#d9a94a; --gold-bg:#fdf6e7;
  --bg:#f3f5f9; --card:#fff; --ink:#16202e; --muted:#64748b; --line:#e3e8ef;
  --green:#15803d; --green-bg:#eaf6ee; --amber:#b45309; --amber-bg:#fdf3e3;
  --red:#b91c1c; --red-bg:#fdeeee; --blue-bg:#eef3fa;
  --display:"Josefin Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px; --shadow:0 1px 2px rgba(13,35,64,.06),0 4px 16px rgba(13,35,64,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:ui-serif,Georgia,"Times New Roman",serif;font-weight:700;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--navy2)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.hidden{display:none !important}

/* ---------- Auth screens ---------- */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:linear-gradient(160deg,#0a1c33 0%,#0d2340 45%,#143a63 100%)}
.auth-card{background:var(--card);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  width:100%;max-width:440px;padding:34px 30px 28px}
.auth-card.center{text-align:center}
.crest{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:linear-gradient(150deg,var(--gold-lt),var(--gold));display:flex;align-items:center;
  justify-content:center;color:#fff;font-family:ui-serif,Georgia,serif;font-size:22px;font-weight:700}
.auth-card h1{font-size:25px;letter-spacing:-.3px;color:var(--navy);text-align:center}
.auth-sub{color:var(--muted);font-size:13.5px;margin-top:6px;text-align:center}
.auth-dates{display:block;width:max-content;margin:14px auto 0;padding:5px 12px;border-radius:999px;
  background:var(--gold-bg);color:#8a6417;font-size:12px;font-weight:600;letter-spacing:.3px}
.field{margin-top:18px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1.5px solid var(--line);
  border-radius:10px;background:#fbfcfe;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy3);background:#fff}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.btn{display:block;width:100%;padding:12px;border-radius:10px;background:var(--navy);color:#fff;
  font-weight:600;font-size:14.5px;margin-top:16px;text-align:center;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--navy2)}
.btn.gold{background:var(--gold)}.btn.gold:hover{background:var(--gold-lt)}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{background:#f7f9fc}
.sep{display:flex;align-items:center;gap:10px;margin:20px 0 12px;color:var(--muted);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.8px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-foot{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}

/* radio cards for category choice */
.choice{display:block;border:1.5px solid var(--line);border-radius:11px;padding:13px 14px;margin-top:9px;
  cursor:pointer;background:#fbfcfe;transition:.15s}
.choice:hover{border-color:var(--navy3);background:#fff}
.choice input{position:absolute;opacity:0}
.choice input:checked + .choice-in .choice-t::before{background:var(--gold);box-shadow:inset 0 0 0 3px #fff}
.choice:has(input:checked){border-color:var(--gold);background:var(--gold-bg)}
.choice-t{font-weight:600;font-size:14px;display:flex;align-items:center;gap:9px}
.choice-t::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;flex:none;transition:.15s}
.choice-d{font-size:12.5px;color:var(--muted);margin-top:5px;padding-left:25px;line-height:1.45}

/* ---------- Shell ---------- */
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40}
.topbar-in{display:flex;align-items:center;gap:12px;padding:11px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-family:ui-serif,Georgia,serif;font-weight:700;
  font-size:16px;white-space:nowrap;color:#fff;text-decoration:none}
.brand .crest{width:28px;height:28px;font-size:13px;margin:0}
.topbar .spacer{flex:1}
.chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:5px 11px;font-size:12px;color:#dce6f2;white-space:nowrap}
.chip b{color:var(--gold-lt)}
.userbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:5px 12px;font-size:12.5px;color:#fff;font-weight:600;text-decoration:none}
.userbtn:hover{background:rgba(255,255,255,.18)}
.tabs{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:49px;z-index:35;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs-in{display:flex;gap:2px;min-width:max-content}
.tab{padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2.5px solid transparent;
  white-space:nowrap;text-decoration:none;transition:.15s}
.tab:hover{color:var(--navy)}
.tab.on{color:var(--navy);border-bottom-color:var(--gold)}
main{padding:20px 0 60px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:22px 0}

/* ---------- Common ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px;margin-bottom:16px}
.card h2{font-size:18px;color:var(--navy)}
.card h3{font-size:15px;color:var(--navy);margin-bottom:10px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sub{color:var(--muted);font-size:12.5px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-size:10.5px;
  font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.pill.prov{background:var(--amber-bg);color:var(--amber)}
.pill.final,.pill.active,.pill.ok{background:var(--green-bg);color:var(--green)}
.pill.locked,.pill.info{background:var(--blue-bg);color:var(--navy2)}
.pill.pending{background:#f1f5f9;color:var(--muted)}
.pill.warn{background:var(--red-bg);color:var(--red)}
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(2,1fr)}
.g3,.g2{grid-template-columns:1fr}
@media(min-width:720px){.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.stat .k{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.stat .v{font-family:ui-serif,Georgia,serif;font-size:28px;font-weight:700;color:var(--navy);
  line-height:1.1;margin-top:5px;font-variant-numeric:tabular-nums}
.stat .n{font-size:12px;color:var(--muted);margin-top:3px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#c8d6e5;
  background:var(--navy);padding:9px 10px;font-weight:700;white-space:nowrap}
th:first-child{border-radius:8px 0 0 0}th:last-child{border-radius:0 8px 0 0}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:#fafbfd}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
.tbl-scroll table{min-width:600px}
.tbl-scroll td:first-child,.tbl-scroll th:first-child{white-space:nowrap}
.mv{font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.mv.up{color:var(--green)}.mv.dn{color:var(--red)}.mv.flat{color:var(--muted)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot.fresh{background:var(--green)}.dot.stale{background:var(--amber)}
.dot.very-stale,.dot.never{background:var(--red)}
.note{background:var(--blue-bg);border-left:3px solid var(--navy3);border-radius:0 8px 8px 0;
  padding:11px 13px;font-size:13.5px;margin:12px 0;line-height:1.5}
.note.warn{background:var(--amber-bg);border-left-color:var(--amber)}
.note.bad{background:var(--red-bg);border-left-color:var(--red)}
.note.good{background:var(--green-bg);border-left-color:var(--green)}
.note b{color:var(--navy)}

/* ---------- Podium ---------- */
.podium{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.podium{grid-template-columns:repeat(3,1fr)}}
.pod{border-radius:var(--r);padding:16px;box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
.pod.p1{background:linear-gradient(150deg,var(--navy),var(--navy2));color:#fff;border-color:var(--navy)}
.pod.p1 .pod-rank{color:var(--gold-lt)}
.pod.me{outline:2px solid var(--gold);outline-offset:-2px}
.pod-rank{font-family:ui-serif,Georgia,serif;font-size:13px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--gold)}
.pod-name{font-family:ui-serif,Georgia,serif;font-size:18px;font-weight:700;margin:5px 0 10px;line-height:1.25}
.pod-score{display:flex;align-items:baseline;gap:7px}
.pod-score .n{font-size:30px;font-weight:700;font-family:ui-serif,Georgia,serif;font-variant-numeric:tabular-nums}
.pod-score .l{font-size:11.5px;opacity:.75;text-transform:uppercase;letter-spacing:.6px}
.pod-meta{margin-top:9px;font-size:12px;opacity:.8;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Forms ---------- */
.frow{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:12px}
@media(min-width:640px){.frow{grid-template-columns:repeat(2,1fr)}}
.finput{border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:#fbfcfe}
.finput label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted)}
.finput .prev{font-size:11.5px;color:var(--muted);margin-top:2px}
.finput input{width:100%;border:none;background:transparent;font-size:20px;font-weight:600;
  font-family:ui-serif,Georgia,serif;color:var(--navy);padding:4px 0 0;font-variant-numeric:tabular-nums}
.finput input:focus{outline:none}
.finput:focus-within{border-color:var(--navy3);background:#fff;box-shadow:0 0 0 3px rgba(29,77,128,.08)}
.inline-form{display:grid;gap:8px;grid-template-columns:1fr;margin-bottom:12px}
@media(min-width:720px){.inline-form{grid-template-columns:repeat(5,1fr)}}
.inline-form input,.inline-form select{width:100%;padding:9px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fbfcfe;font-size:13.5px}
.btn-sm{display:inline-block;padding:8px 14px;border-radius:8px;background:var(--navy);color:#fff;
  font-size:13px;font-weight:600;text-decoration:none}
.btn-sm:hover{background:var(--navy2)}
.btn-sm.gold{background:var(--gold)}.btn-sm.gold:hover{background:var(--gold-lt)}
.btn-sm.ghost{background:#fff;border:1px solid var(--line);color:var(--navy)}
.btn-sm.ghost:hover{background:#f7f9fc}
.btn-sm.danger{background:#fff;border:1px solid #f0c4c4;color:var(--red)}
.seg{display:inline-flex;background:#eef2f7;border-radius:9px;padding:3px;gap:2px}
.seg a{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.seg a.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(13,35,64,.12)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

/* ---------- Gap panel — the daily hook ---------- */
.gap{border:1px solid var(--line);border-radius:11px;padding:13px 14px;background:#fff;margin-bottom:9px}
.gap.lead{background:var(--green-bg);border-color:#bfe3cb}
.gap-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.gap-m{font-weight:600;font-size:14px;color:var(--navy)}
.gap-p{font-size:12px;color:var(--muted)}
.gap-b{margin-top:8px;font-size:13.5px;line-height:1.5}
.gap-n{display:inline-block;background:var(--gold-bg);color:#8a6417;border-radius:6px;padding:1px 7px;
  font-weight:700;font-variant-numeric:tabular-nums}
.gap-save{color:var(--green);font-weight:600}

/* ---------- Activity ---------- */
.feed{list-style:none}
.feed li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;
  align-items:flex-start}
.feed li:last-child{border-bottom:none}
.feed .when{color:var(--muted);font-size:12px;white-space:nowrap;flex:none;min-width:66px;text-align:right}
.feed .ic{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:12px;background:var(--blue-bg);color:var(--navy2);font-weight:700}
.feed .ic.up{background:var(--green-bg);color:var(--green)}
.feed .ic.new{background:var(--gold-bg);color:#8a6417}

/* ---------- Promo hero (home) ----------
   The printed Miami flyer, rebuilt as the top of the landing page. The sunset
   is drawn as SVG rather than photographed, so there is no image to host, no
   licence to worry about, and it stays sharp at any width. Everything that
   changes between contests — the beats, the photos, the seat counts — comes
   from settings, not from this file. */
.hero{background:#0a1c33;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  margin-bottom:16px;color:#fff}
.hero-sky{aspect-ratio:1080/460;min-height:200px;line-height:0}
.hero-sky svg{display:block;width:100%;height:100%}
.hero-body{position:relative;padding:0 20px 22px;margin-top:-46px}
@media(min-width:720px){.hero-body{padding:0 34px 30px;margin-top:-92px}}

.hero h1.hero-title{font-family:var(--display);font-weight:600;font-size:42px;line-height:.94;
  letter-spacing:-.01em;text-transform:uppercase;color:#fff}
@media(min-width:720px){.hero h1.hero-title{font-size:70px}}
.hero-title span{color:var(--gold-lt)}
.hero-rule{width:64px;height:2px;background:var(--gold-lt);margin:15px 0 14px}
.hero-lede{font-family:var(--display);font-weight:300;font-size:18px;line-height:1.4;
  color:rgba(255,255,255,.9);max-width:660px;text-wrap:pretty}
@media(min-width:720px){.hero-lede{font-size:24px}}
.hero-dates{margin-top:11px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt)}
.hero-label{margin-top:28px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(217,169,74,.85)}
.hero-label.topline{border-top:1px solid rgba(217,169,74,.28);padding-top:24px;margin-top:28px}

.beats{display:grid;gap:11px;grid-template-columns:1fr;margin-top:13px}
@media(min-width:720px){.beats{grid-template-columns:repeat(2,1fr)}}
.beat{background:rgba(255,255,255,.055);border-left:2px solid var(--gold-lt);border-radius:0 9px 9px 0;
  padding:15px 17px}
.beat b{display:block;font-family:var(--display);font-weight:600;font-size:19px;color:#fff;
  letter-spacing:.01em;margin-bottom:5px}
.beat span{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72);text-wrap:pretty}

.shots{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-top:11px}
.shots img{display:block;width:100%;height:110px;object-fit:cover;border-radius:9px;
  border:1px solid rgba(217,169,74,.3);background:rgba(255,255,255,.04)}
@media(min-width:720px){.shots img{height:158px}}

.hero-who{margin-top:14px;display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:720px){.hero-who{grid-template-columns:repeat(2,1fr)}}
.who-t{font-family:var(--display);font-weight:600;font-size:21px;color:var(--gold-lt);
  letter-spacing:.01em;margin-bottom:6px}
.who-d{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78);text-wrap:pretty}
.who-d b{color:#fff}
.hero-foot{margin-top:18px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);
  max-width:820px;text-wrap:pretty}

.hero-cta{margin-top:24px;background:linear-gradient(120deg,var(--gold),var(--gold-lt));
  border-radius:10px;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.hero-cta .t{font-family:var(--display);font-weight:600;font-size:22px;color:var(--navy);letter-spacing:.01em}
.hero-cta .s{font-size:13px;color:rgba(13,35,64,.78);margin-top:2px}
.hero-cta .acts{display:flex;gap:9px;flex-wrap:wrap}
.hero-cta .btn-sm{background:var(--navy)}
.hero-cta .btn-sm:hover{background:var(--navy2)}
.hero-cta .btn-sm.ghost{background:rgba(255,255,255,.72);border-color:rgba(13,35,64,.18);color:var(--navy)}
.hero-cta .btn-sm.ghost:hover{background:#fff}

/* The sunset again, cropped to a band across the top of the sign-up card —
   the first thing someone sees when a link is forwarded to them. */
.auth-card.art{padding-top:0;overflow:hidden}
.auth-art{margin:0 -30px 20px;aspect-ratio:1080/300;line-height:0;background:#0a1c33}
.auth-art svg{display:block;width:100%;height:100%}

/* Two-button disclosure: "Add a personal recruit" / "Add a licensed agent".
   The page opens with both panels shut, so nobody sees two forms at once and
   guesses which one they are supposed to be filling in. */
.twobtn{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.twobtn button{padding:11px 16px;font-size:14px}
.panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.panel[hidden]{display:none}
[data-panel][aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--gold,#b8860b)}

/* Help us pick the boat. Four rows, hairline-separated — not cards, because a
   card per boat makes four equal blocks compete and the only thing that should
   stand out is which one is winning. */
.boatlist{display:flex;flex-direction:column;margin-top:6px}
.boatrow{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line)}
.boatrow:last-child{border-bottom:1px solid var(--line)}
.boatname{font-size:18px;font-weight:700;line-height:1.25}
.boatname a{color:inherit;text-decoration:none;border-bottom:2px solid var(--line)}
.boatname a:hover{border-bottom-color:var(--gold,#b8860b)}
.boatspecs{font-size:12.5px;color:var(--muted);margin-top:5px}
.boatpick{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:112px}
.boatpick form{margin:0}
.boattally{white-space:nowrap;font-variant-numeric:tabular-nums}
.boatmeter{grid-column:1/-1;height:5px;border-radius:99px;background:var(--line);
  overflow:hidden;margin-top:12px}
.boatmeter i{display:block;height:100%;border-radius:99px;background:var(--gold,#b8860b);
  transition:width .4s ease}
.boatrow.is-mine .boatmeter i{background:var(--green,#15803d)}
@media (max-width:520px){
  .boatrow{grid-template-columns:1fr}
  .boatpick{align-items:flex-start;margin-top:10px}
}