/* Tide & Trophy — shared styles (mobile-first) */
:root { --navy:#0d1b45; --deep:#081233; --teal:#0e9fc4; --magenta:#d81fc8; --magenta-dk:#b0149f; --cyan:#22c8ea; --ink:#1c2b36; --muted:#56656f; --line:#d9e2e8; --paper:#fbf8f1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--paper); line-height:1.55; font-size:16px; -webkit-text-size-adjust:100%; }
img { max-width:100%; }
a { color:var(--teal); }
.wrap { max-width:640px; margin:0 auto; padding:0 18px; }
.skip { position:absolute; left:-999px; top:0; background:#fff; color:var(--navy); padding:8px 12px; z-index:10; }
.skip:focus { left:8px; top:8px; }

/* top bar */
.topbar { background:var(--deep); border-bottom:1px solid rgba(34,200,234,.25); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; min-height:52px; gap:10px; }
.topbar .home { display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:900; letter-spacing:1.5px; font-size:14px; }
.topbar .home img { width:30px; height:30px; }
.topbar nav a { color:#cfe9f3; text-decoration:none; font-size:14px; font-weight:700; margin-left:14px; }
.topbar nav a:hover, .topbar nav a:focus { color:var(--cyan); }

/* hero */
.hero { position:relative; color:#fff; padding:26px 0 30px; border-bottom:4px solid var(--cyan);
  background:linear-gradient(180deg,rgba(8,18,51,.55) 0%,rgba(13,27,69,.86) 45%,#2a1150 100%), url("assets/hero.jpg") center top/cover no-repeat, var(--navy); }
.logo { display:block; width:132px; height:132px; margin:0 auto 4px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.kicker { text-align:center; color:var(--cyan); font-weight:900; letter-spacing:2px; font-size:13px; text-transform:uppercase; margin:6px 0 0; }
h1 { font-size:32px; line-height:1.1; margin:12px 0 10px; font-weight:900; letter-spacing:-.3px; text-shadow:0 2px 12px rgba(0,0,0,.35); }
h1 .pop { color:var(--cyan); }
.lede { margin:0 0 18px; font-size:17px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding:0; list-style:none; }
.badges li { font-size:12px; font-weight:800; letter-spacing:.4px; padding:5px 10px; border-radius:999px; background:rgba(34,200,234,.16); border:1px solid rgba(34,200,234,.55); color:#e9fbff; }

/* form */
form.signup { background:#fff; color:var(--ink); border-radius:14px; padding:16px; box-shadow:0 8px 28px rgba(0,0,0,.3); border-top:5px solid var(--magenta); }
label { display:block; font-weight:800; font-size:14px; margin:0 0 6px; }
input, select { width:100%; font-size:16px; padding:12px; border:1px solid #b9c6cf; border-radius:8px; margin:0 0 14px; background:#fff; color:var(--ink); }
input:focus, select:focus { outline:3px solid rgba(14,159,196,.35); border-color:var(--teal); }
button { width:100%; font-size:18px; font-weight:900; padding:15px; border:0; border-radius:10px; background:linear-gradient(90deg,var(--magenta),#9b2bdc); color:#fff; cursor:pointer; letter-spacing:.3px; box-shadow:0 4px 14px rgba(216,31,200,.35); }
button:hover, button:focus { background:linear-gradient(90deg,var(--magenta-dk),#7f1fc0); }
.fine { font-size:12px; color:var(--muted); margin:10px 0 0; }
form .fine a { color:var(--teal); }

/* sections */
main section { padding:28px 0; border-bottom:1px solid var(--line); }
h2 { font-size:23px; line-height:1.2; color:var(--navy); margin:0 0 14px; font-weight:900; }
h2 .bar { display:inline-block; width:28px; height:5px; background:var(--magenta); border-radius:3px; vertical-align:middle; margin-right:8px; }
ol.steps { padding-left:22px; margin:0; } ol.steps li { margin:0 0 10px; }
.card { background:#fff; border:1px solid var(--line); border-left:5px solid var(--teal); border-radius:10px; padding:14px; margin:0 0 12px; }
.card h3 { margin:0 0 4px; font-size:17px; color:var(--navy); }
.tag { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.4px; color:var(--teal); margin:0 0 6px; }
.card p { margin:4px 0; font-size:15px; }
ul.rules { padding-left:20px; margin:0 0 6px; } ul.rules li { margin:0 0 9px; }
details { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 10px; }
summary { font-weight:800; cursor:pointer; color:var(--navy); }
details p { margin:10px 0 0; }
.cta2 { display:block; text-align:center; margin:18px 0 0; padding:14px; border-radius:10px; background:var(--navy); color:#fff; font-weight:900; text-decoration:none; }

/* page (privacy) */
.pagehead { background:linear-gradient(160deg,var(--navy) 60%,#3a1460); color:#fff; padding:22px 0 24px; border-bottom:4px solid var(--cyan); }
.pagehead h1 { font-size:28px; margin:0 0 6px; }
.pagehead p { margin:0; opacity:.9; }
.prose { padding-top:22px; padding-bottom:10px; }
.prose h2 { font-size:19px; margin:26px 0 8px; }
.prose p, .prose li { font-size:16px; }
.prose ul { padding-left:20px; }
.todo { background:#fff3a6; color:#5a4700; padding:1px 5px; border-radius:4px; font-weight:700; }

/* footer */
footer { padding:24px 0 40px; font-size:13px; color:var(--muted); }
footer nav { margin:0 0 12px; }
footer nav a { font-weight:800; margin-right:14px; color:var(--navy); }
@media (min-width:720px) { h1 { font-size:42px; } .hero { padding:40px 0 44px; } }