/* ============================================================
   West Sound Select League — palette pulled from the logo
   ============================================================ */
:root {
  --red:        #D12E27;
  --red-dark:   #A8211C;
  --amber:      #E8A317;
  --brown:      #A6651E;
  --brown-dark: #7A4A18;
  --espresso:   #3E2A18;
  --cream:      #F7ECD3;
  --paper:      #FBF5E9;
  --navy:       #14314F;
  --navy-deep:  #0E2438;
  --white:      #ffffff;
  --ink:        #2A1E12;

  --shadow-sm: 0 2px 8px rgba(62, 42, 24, 0.08);
  --shadow-md: 0 12px 32px rgba(62, 42, 24, 0.12);
  --shadow-lg: 0 24px 60px rgba(62, 42, 24, 0.18);

  --maxw: 1140px;
  --radius: 18px;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; font-weight: 600; }

img { max-width: 100%; display: block; }

/* The [hidden] attribute must win over component display rules (e.g. .field's
   flex), so conditionally-shown fields like the "Other" org write-in stay hidden. */
[hidden] { display: none !important; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: rgba(62, 42, 24, 0.55); font-size: 0.92em; }
.ink-red { color: var(--red); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 13px 24px; border-radius: 999px; cursor: pointer;
  text-decoration: none; border: 2px solid transparent;
  background: var(--red); color: var(--white);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--red-dark); }
.btn--sm { padding: 8px 18px; font-size: .92rem; }
.btn--lg { padding: 16px 30px; font-size: 1.08rem; }
.btn--ghost { background: transparent; color: var(--espresso); border-color: rgba(62,42,24,.25); box-shadow: none; }
.btn--ghost:hover { background: rgba(62,42,24,.05); border-color: var(--espresso); }
.btn--cta { background: var(--red); font-size: 1.15rem; padding: 18px 40px; }

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: rgba(251, 245, 233, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(62, 42, 24, 0.08);
}
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--espresso); }
.nav__logo { height: 42px; width: auto; }
.nav__wordmark { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; line-height: 1.1; }
.nav__wordmark strong { color: var(--red); font-weight: 700; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a { text-decoration: none; color: var(--espresso); font-weight: 500; font-size: .96rem; transition: color .15s; }
.nav__links a:not(.btn):hover { color: var(--red); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.nav__toggle span { width: 26px; height: 2.5px; background: var(--espresso); border-radius: 2px; transition: .25s; }

/* ===== HERO ===== */
.hero { position: relative; background:
    radial-gradient(1200px 600px at 80% -10%, rgba(209,46,39,.08), transparent 60%),
    linear-gradient(180deg, var(--cream), var(--paper)); overflow: hidden; }
.hero__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 64px 24px 88px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
}
.hero__copy h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 700; letter-spacing: -.02em; margin: 14px 0 22px; }
.lead { font-size: 1.2rem; color: rgba(42,30,18,.85); max-width: 36ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 18px; }
.hero__note { font-size: .98rem; color: rgba(62,42,24,.6); max-width: 44ch; }
.hero__art { display: flex; justify-content: center; }
.hero__logo { width: min(100%, 460px); filter: drop-shadow(0 18px 30px rgba(62,42,24,.22)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

/* eyebrow label */
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brown); }
.eyebrow--center { display: block; text-align: center; }
.eyebrow--light { color: #E9C58B; }

/* baseball-seam divider */
.seam { height: 14px; width: 100%;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(90deg, transparent 0 14px, var(--red) 14px 22px) ;
  border-top: 2px dashed rgba(209,46,39,.4);
  border-bottom: 2px dashed rgba(209,46,39,.4);
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(209,46,39,.55) 16px 20px);
  opacity: .5; }

/* ===== SECTIONS ===== */
.section { padding: 84px 0; }
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream); }
.section--navy { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); color: #EAF0F6; }
.section__title { font-size: clamp(2rem, 4vw, 3rem); text-align: center; letter-spacing: -.02em; margin: 10px 0 0; }
.section__title--light { color: var(--white); }
.section__intro { text-align: center; max-width: 60ch; margin: 22px auto 0; font-size: 1.12rem; color: rgba(42,30,18,.78); }
.section--navy .section__intro { color: rgba(234,240,246,.8); }

/* ===== Cards (concept) ===== */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.card { background: var(--white); border: 1px solid rgba(62,42,24,.08); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; text-align: center; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(166,101,30,.12); color: var(--brown); margin: 0 auto 16px; }
.card__icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--espresso); }
.card p { color: rgba(42,30,18,.72); }
.footnote { text-align: center; margin-top: 40px; font-size: 1.02rem; color: rgba(62,42,24,.62); max-width: 60ch; margin-inline: auto; }

/* ===== Teams + Map ===== */
.map-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-top: 48px; align-items: stretch; }
.map { height: 600px; border-radius: var(--radius); box-shadow: var(--shadow-md); border: 3px solid var(--white); z-index: 0; min-width: 0; overflow: hidden; }
.teams-list { background: var(--white); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm); border: 1px solid rgba(62,42,24,.07); min-width: 0; }
.teams-list__head { font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--espresso); display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.teams-list__head--fields { margin-top: 24px; }
.teams-list ul { list-style: none; }
.teams-list li { padding: 9px 0; border-bottom: 1px dashed rgba(62,42,24,.12); display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; transition: color .15s; }
.teams-list li:hover { color: var(--red); }
.teams-list li:last-child { border-bottom: 0; }
.teams-list li .town { color: rgba(62,42,24,.55); font-size: .9rem; text-align: right; flex: 0 1 auto; }
.team-row { min-width: 0; }
.dot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.dot--team { background: var(--brown); }
.dot--field { background: var(--amber); }
.field-note { margin-top: 14px; font-size: .86rem; line-height: 1.45; color: rgba(62,42,24,.6); font-style: italic; }
.disclaimer { margin-top: 30px; background: rgba(166,101,30,.1); border-left: 4px solid var(--brown); padding: 16px 20px; border-radius: 0 12px 12px 0; font-size: .98rem; color: rgba(62,42,24,.82); }

/* Leaflet marker labels */
.pin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.pin--team { background: var(--brown); }
.pin--field { background: var(--amber); border-radius: 6px; transform: none; }
.pin span { transform: rotate(45deg); display: grid; place-items: center; color: #fff; }
.pin--field span { transform: none; color: var(--espresso); }
.pin svg { width: 14px; height: 14px; display: block; }

/* colored monogram pin (teams) */
.pin--mono { transform: none; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font-weight: 800; font-size: 11px; letter-spacing: .02em; border: 2.5px solid #fff; }
.pin--mono span { transform: none; color: inherit; }

/* monogram chip in the teams list */
.team-row { display: inline-flex; align-items: center; gap: 10px; }
.mono { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 23px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em; box-shadow: 0 1px 2px rgba(0,0,0,.18); flex: 0 0 auto; }

/* ===== Format ===== */
.format-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.fcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 34px 28px; text-align: center; }
.fcard__big { font-family: var(--font-display); font-weight: 700; font-size: 3.2rem; color: #F2D9A8; line-height: 1; margin-bottom: 14px; }
.fcard__big span { font-size: 1.2rem; color: rgba(242,217,168,.7); }
.fcard__big--icon { display: flex; justify-content: center; align-items: center; height: 51px; }
.fcard__big--icon svg { width: 50px; height: 50px; color: #F2D9A8; }
.fcard h3 { color: var(--white); font-size: 1.35rem; margin-bottom: 8px; }
.fcard p { color: rgba(234,240,246,.74); }

/* ===== Benefits ===== */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.benefit { text-align: center; padding: 28px 18px; border-radius: var(--radius); background: var(--white); border: 1px solid rgba(62,42,24,.07); box-shadow: var(--shadow-sm); transition: transform .2s; }
.benefit:hover { transform: translateY(-4px); }
.benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(209,46,39,.1); color: var(--red); margin-bottom: 14px; }
.benefit__icon svg { width: 28px; height: 28px; }
.benefit h3 { font-size: 1.18rem; color: var(--espresso); margin-bottom: 8px; }
.benefit p { color: rgba(42,30,18,.72); font-size: .98rem; }

/* ===== Costs ===== */
.cost-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; margin-top: 48px; align-items: start; }
.cost-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.cost-table th, .cost-table td { text-align: left; padding: 16px 22px; }
.cost-table thead th { background: var(--espresso); color: var(--cream); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.cost-table thead th:last-child, .cost-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cost-table tbody tr { border-bottom: 1px solid rgba(62,42,24,.08); }
.cost-table tbody td { color: rgba(42,30,18,.85); }
.cost-table .muted { display: block; font-size: .82rem; }
.cost-table tfoot td { background: rgba(166,101,30,.1); font-weight: 700; font-size: 1.15rem; color: var(--espresso); }
.cost-highlights { display: flex; flex-direction: column; gap: 18px; }
.chip { display: flex; align-items: center; gap: 18px; background: var(--white); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm); border: 1px solid rgba(62,42,24,.08); }
.chip--accent { background: var(--red); color: var(--white); border-color: transparent; }
.chip__num { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; }
.chip__label { font-size: .98rem; line-height: 1.3; }
.chip__label span { opacity: .7; font-size: .86rem; }
.cost-anchor { margin-top: 6px; font-size: 1.02rem; color: rgba(62,42,24,.78); background: var(--cream); padding: 18px 22px; border-radius: 14px; border: 1px dashed rgba(166,101,30,.45); }
.cost-estimate-note { text-align: center; margin: 30px auto 0; max-width: 60ch; font-size: .92rem; font-style: italic; color: rgba(62,42,24,.58); }
.section--navy .chip__label span { opacity: .85; }

/* ===== FAQ ===== */
.faq { max-width: 820px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--white); border: 1px solid rgba(62,42,24,.1); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; color: var(--espresso); display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 11px; height: 11px; border-right: 2.5px solid var(--brown); border-bottom: 2.5px solid var(--brown); transform: rotate(45deg); transition: transform .25s; flex: 0 0 auto; margin-top: -5px; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq details > div { padding: 0 24px 22px; color: rgba(42,30,18,.8); line-height: 1.65; }
.faq details > div em { color: var(--brown); font-style: italic; }
.faq details > div strong { color: var(--espresso); }
.faq details > div ul { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.faq details > div li { padding-left: 4px; }
.faq details > div li::marker { color: var(--brown); }

/* ===== Join ===== */
.section--join { background:
   radial-gradient(900px 500px at 50% -20%, rgba(209,46,39,.1), transparent 60%),
   linear-gradient(180deg, var(--cream), var(--paper)); }
.join__logo { width: 120px; margin: 0 auto 18px; filter: drop-shadow(0 10px 18px rgba(62,42,24,.2)); }
.join__title { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.join__lead { font-size: 1.18rem; max-width: 54ch; margin: 18px auto 32px; color: rgba(42,30,18,.82); }
.join__meta { margin-top: 18px; font-weight: 600; color: var(--espresso); }
.join__actions { margin-top: 30px; }
.inline-ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; color: var(--red); }

/* Floating "?" help widget (sign-up page) */
.help-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.help-fab__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 12px 18px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .15s, background .15s; }
.help-fab__btn:hover { background: var(--red-dark); transform: translateY(-2px); }
.help-fab__q { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; font-weight: 800; font-size: .9rem; line-height: 1; }
.help-fab__panel { background: var(--white); border: 1px solid rgba(62,42,24,.12); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px 20px; width: min(300px, calc(100vw - 40px)); }
.help-fab__title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--espresso); }
.help-fab__text { font-size: .9rem; color: rgba(42,30,18,.7); margin-top: 4px; }
.help-fab__link { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--red); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.help-fab__link:hover { text-decoration: underline; }
.help-fab__link svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brown); }
@media (max-width: 540px) {
  .help-fab { right: 14px; bottom: 14px; }
  .help-fab__label { display: none; } /* collapse to just "?" on small screens */
  .help-fab__btn { padding: 12px; }
  .help-fab__q { width: 24px; height: 24px; }
}

/* ===== Admin page ===== */
.admin__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid rgba(62,42,24,.1); background: var(--paper); }
.admin { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }
.admin__login { max-width: 380px; margin: 40px auto; background: var(--white); border: 1px solid rgba(62,42,24,.1); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 32px; }
.admin__h1 { font-family: var(--font-display); font-size: 1.6rem; color: var(--espresso); margin-bottom: 18px; }
.admin__loginform { display: flex; flex-direction: column; gap: 16px; }
.admin__err { color: var(--red); font-weight: 600; font-size: .92rem; }
.admin__tabs { display: flex; gap: 8px; border-bottom: 2px solid rgba(62,42,24,.12); margin-bottom: 20px; }
.admin__tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: rgba(62,42,24,.6); cursor: pointer; }
.admin__tab.is-active { color: var(--espresso); border-bottom-color: var(--red); }
.admin__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: rgba(166,101,30,.15); color: var(--brown); font-size: .8rem; font-weight: 700; vertical-align: 1px; }
.admin__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin__note { color: rgba(62,42,24,.65); font-size: .92rem; }
.admin__tablewrap { border: 1px solid rgba(62,42,24,.1); border-radius: 12px; overflow: hidden; }
.admin__table { border-collapse: collapse; width: 100%; font-size: .8rem; table-layout: fixed; }
.admin__table th, .admin__table td { text-align: left; vertical-align: top; padding: 8px 10px; overflow-wrap: anywhere; }
.admin__table th { white-space: nowrap; }
.admin__table th { background: var(--espresso); color: var(--cream); font-weight: 600; }
.admin__table td { border-top: 1px solid rgba(62,42,24,.08); color: rgba(42,30,18,.9); }
.admin__table tbody tr:nth-child(even) { background: rgba(166,101,30,.04); }
.admin__sub { color: rgba(62,42,24,.6); }
.admin__empty { text-align: center; color: rgba(62,42,24,.5); padding: 24px; }

/* Prominent contact card in the closer section */
.contact-card { background: var(--white); border: 1px solid rgba(62,42,24,.1); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 26px 28px; max-width: 420px; margin: 0 auto; }
.contact-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--espresso); }
.contact-card__line { margin-top: 10px; font-size: clamp(0.95rem, 4vw, 1.18rem); overflow-wrap: anywhere; }
.contact-card__line a { color: var(--red); text-decoration: none; font-weight: 600; }
.contact-card__line a:hover { text-decoration: underline; }
.contact-card .inline-ico { color: var(--brown); margin-right: 8px; }

/* ===== Footer ===== */
.footer { background: var(--espresso); color: var(--cream); padding: 48px 0 28px; }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { height: 52px; }
.footer__brand strong { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.footer__brand span { font-size: .9rem; opacity: .7; }
.footer__contact p { margin: 2px 0; }
.footer__contact strong { color: var(--cream); }
.footer__contact a { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
.faq details > div a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.footer .muted { color: rgba(247,236,211,.65); }
.footer__fine { max-width: var(--maxw); margin: 28px auto 0; padding: 18px 24px 0; border-top: 1px solid rgba(247,236,211,.15); font-size: .84rem; opacity: .6; text-align: center; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
  .hero__copy h1 { margin-inline: auto; }
  .lead, .hero__note { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__art { order: -1; }
  .hero__logo { width: min(80%, 340px); }
  .cols, .format-cards { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .map-grid, .cost-layout { grid-template-columns: 1fr; }
  .map { height: 460px; }

  .nav__links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; background: var(--paper); padding: 20px 24px 28px; gap: 8px; border-bottom: 1px solid rgba(62,42,24,.1); box-shadow: var(--shadow-md); transform: translateY(-130%); transition: transform .28s ease; align-items: stretch; }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: 12px 4px; border-bottom: 1px solid rgba(62,42,24,.08); }
  .nav__links .btn { margin-top: 8px; }
  .nav__toggle { display: flex; }
}
@media (max-width: 540px) {
  .benefits { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
}

/* ============================================================
   Sign-up page + form
   ============================================================ */
.signup { padding: 40px 0 80px; background: var(--paper); min-height: 70vh; }
.wrap--form { max-width: 720px; }
.signup__title { font-size: clamp(2rem, 4.5vw, 3rem); text-align: center; margin: 10px 0 0; letter-spacing: -.02em; }
.signup__intro { text-align: center; max-width: 52ch; margin: 18px auto 0; font-size: 1.1rem; color: rgba(42,30,18,.78); }
.signup__notice { margin: 26px auto 0; max-width: 60ch; background: rgba(232,163,23,.12); border-left: 4px solid var(--amber); padding: 14px 18px; border-radius: 0 12px 12px 0; font-size: .96rem; color: rgba(62,42,24,.85); }
.signup__editbar { margin: 24px auto 0; max-width: 60ch; background: rgba(12,76,145,.1); border-left: 4px solid var(--navy); padding: 14px 18px; border-radius: 0 12px 12px 0; font-weight: 600; color: var(--navy); }

.form { margin-top: 30px; display: flex; flex-direction: column; gap: 24px; }
.form__group { position: relative; border: 1px solid rgba(62,42,24,.12); border-radius: var(--radius); padding: 46px 22px 24px; background: var(--white); box-shadow: var(--shadow-sm); }
/* absolute so the legend sits fully inside the white card, not on the border */
.form__group > legend { position: absolute; top: 22px; left: 24px; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--espresso); }
.turf-note { margin-top: 16px; }
.turf-note__body { font-size: .95rem; color: rgba(42,30,18,.75); line-height: 1.55; margin-top: 4px; }
.name-preview { margin-top: 16px; background: var(--cream); border: 1px dashed rgba(166,101,30,.45); border-radius: 12px; padding: 12px 16px; }
.name-preview__label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brown); font-weight: 700; }
.name-preview__value { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 1.25rem; color: var(--espresso); }
.name-preview__value.is-empty { font-family: var(--font-body); font-size: 1rem; font-weight: 400; font-style: italic; color: rgba(62,42,24,.45); }
.form__grouphint { font-size: .92rem; color: rgba(62,42,24,.6); margin: 4px 0 14px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.field--half { max-width: 260px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field__label { font-weight: 600; font-size: .95rem; color: var(--espresso); }
.field__note { font-weight: 400; font-size: .85rem; color: rgba(62,42,24,.55); display: block; margin-top: 2px; }
.req { color: var(--red); }
.hint { font-weight: 400; color: rgba(62,42,24,.5); font-size: .85rem; }

.form input[type="text"], .form input:not([type]), .form input[type="email"],
.form input[type="tel"], .form select {
  width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid rgba(62,42,24,.2);
  border-radius: 10px; font: inherit; font-size: 1rem; line-height: normal;
  background: var(--paper); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(209,46,39,.15); background: #fff; }

.checks { border: 0; padding: 0; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.checks > legend { padding: 0; margin-bottom: 4px; }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 1rem; color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }
.check--block { margin-top: 18px; }

.contact-row { display: grid; grid-template-columns: 1fr 150px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.contact-remove { border: 0; background: rgba(209,46,39,.1); color: var(--red); width: 34px; height: 34px; border-radius: 8px; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.contact-remove:hover { background: rgba(209,46,39,.2); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__error { background: rgba(209,46,39,.1); border: 1px solid rgba(209,46,39,.35); color: var(--red-dark); padding: 14px 18px; border-radius: 12px; font-size: .96rem; }
.form__error a { color: var(--red-dark); }
.form__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.form__back { color: rgba(62,42,24,.6); text-decoration: none; font-size: .95rem; }
.form__back:hover { color: var(--red); }
.form__withdraw { align-self: center; background: none; border: 0; color: rgba(62,42,24,.5); text-decoration: underline; font-size: .9rem; cursor: pointer; }
.form__withdraw:hover { color: var(--red); }

/* Success panel */
.success { text-align: center; max-width: 560px; margin: 30px auto 0; background: var(--white); border: 1px solid rgba(62,42,24,.1); border-radius: var(--radius); padding: 40px 30px; box-shadow: var(--shadow-md); }
.success__logo { width: 96px; margin: 0 auto 12px; }
.success__title { font-size: 2rem; }
.success__lead { font-size: 1.1rem; color: rgba(42,30,18,.8); margin: 12px auto 0; max-width: 42ch; }
.success__editnote { margin: 26px 0 8px; font-size: .95rem; color: rgba(62,42,24,.7); }
.success__editlink { display: inline-block; font-weight: 600; color: var(--red); word-break: break-all; }
.success__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr auto; grid-auto-flow: row; }
  .contact-row .c-role { grid-column: 1 / 2; }
}

/* ===== Live roster (home) ===== */
.roster { margin-top: 40px; background: var(--white); border: 1px solid rgba(62,42,24,.1); border-radius: var(--radius); padding: 30px 30px 34px; box-shadow: var(--shadow-sm); }
.roster__head { font-family: var(--font-display); font-size: 1.5rem; color: var(--espresso); text-align: center; }
.roster__note { text-align: center; font-size: .95rem; color: rgba(62,42,24,.6); margin: 6px auto 24px; max-width: 52ch; }
.roster__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.roster__group { background: var(--paper); border-radius: 14px; padding: 16px 20px; border: 1px solid rgba(62,42,24,.07); }
.roster__age { font-family: var(--font-body); font-weight: 800; font-size: .95rem; letter-spacing: .06em; color: var(--red); margin-bottom: 8px; }
.roster__teams { list-style: none; }
.roster__teams li { padding: 5px 0; border-bottom: 1px dashed rgba(62,42,24,.1); font-size: .98rem; color: var(--ink); }
.roster__teams li:last-child { border-bottom: 0; }
.roster__empty { text-align: center; color: rgba(62,42,24,.7); }
.roster__empty a { color: var(--red); font-weight: 600; }

/* ===== Mailing list (join section) ===== */
.mlist { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(62,42,24,.15); }
.mlist__lead { font-size: 1rem; color: rgba(62,42,24,.75); margin-bottom: 14px; }
.mlist__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mlist__form input[type="email"] { flex: 1 1 260px; max-width: 320px; padding: 12px 16px; border: 1.5px solid rgba(62,42,24,.2); border-radius: 999px; font: inherit; font-size: 1rem; background: var(--white); }
.mlist__form input[type="email"]:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(209,46,39,.15); }
.mlist__msg { margin-top: 14px; font-weight: 600; }
.mlist__msg--ok { color: #1B7A32; }
.mlist__msg--err { color: var(--red-dark); }