/* BetRepublic alerts letter — Australia
   Direction: a floodlit pitch at night. Concentric chalk lane arcs sweep out
   of an off-canvas bend through every band; gold and silver are milled, not
   painted. Display type is set like a broadcast scoreboard. */

:root{
  /* gold ramp — #E5C945 and #CCAF1F sampled from assets/betrepublic-logo.svg */
  --leaf:#fff6c8;
  --gilt:#f4e298;
  --gold:#E5C945;
  --gold-low:#CCAF1F;
  --brass:#9c8415;
  --gold-ink:#241c02;

  /* silver ramp — #ffffff and #BFBFBF sampled from the wordmark */
  --pewter:#e6e6e6;
  --silver:#BFBFBF;

  /* floodlit turf */
  --night:#04100a;
  --pitch:#07180f;
  --riser-hi:#123a24;
  --riser-lo:#071a10;

  --chalk:#ecf3ee;
  --chalk-soft:#c2d2c8;
  --chalk-dim:#9db0a4;

  --scoreboard:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"DejaVu Sans Mono",Consolas,monospace;
  --voice:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --bend:18px;
  --bend-sm:12px;
  --column:1080px;
  --measure:760px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--voice);
  font-size:17px;
  line-height:1.62;
  color:var(--chalk-soft);
  background-color:var(--pitch);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
picture{display:contents}
h1,h2,h3{margin:0;font-family:var(--scoreboard);font-weight:700;line-height:1.06;letter-spacing:.005em;color:var(--chalk)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--gilt)}

:is(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--leaf);
  outline-offset:3px;
  border-radius:4px;
}

.bypass{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--gold);color:var(--gold-ink);
  font-family:var(--scoreboard);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.75em 1.4em;border-radius:var(--bend-sm);
}
.bypass:focus{left:14px;top:14px}

.sheet{width:100%;max-width:var(--column);margin:0 auto;padding:0 24px}
.sheet-tight{width:100%;max-width:var(--measure);margin:0 auto;padding:0 24px}

/* ---------- metal ---------- */

.goldleaf,.silverleaf{
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(229,201,69,.2));
}
.goldleaf{
  background-image:linear-gradient(177deg,
    #fffbe4 0%,var(--leaf) 12%,var(--gold) 34%,var(--gold-low) 47%,
    #c2a41c 56%,var(--gold) 68%,var(--gilt) 82%,#fffbe6 100%);
}
.silverleaf{
  background-image:linear-gradient(177deg,
    #ffffff 0%,var(--pewter) 20%,var(--silver) 46%,#ababab 56%,
    var(--pewter) 72%,#ffffff 100%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(191,191,191,.18));
}

/* ---------- the bend: concentric chalk lane arcs + floodlight bloom ---------- */

.arclight{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:
    repeating-radial-gradient(ellipse 58% 108% at -14% 116%,
      rgba(236,243,238,0) 0 52px,
      rgba(236,243,238,.115) 52px 53.5px,
      rgba(236,243,238,0) 53.5px 54px),
    radial-gradient(ellipse 60% 46% at 80% -8%,rgba(255,246,200,.17),rgba(4,16,10,0) 70%),
    radial-gradient(ellipse 74% 58% at -8% 116%,rgba(18,58,36,.62),rgba(4,16,10,0) 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
}
.arclight::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-radial-gradient(ellipse 58% 108% at -14% 116%,
      rgba(229,201,69,0) 0 234px,
      rgba(229,201,69,.32) 234px 235.8px,
      rgba(229,201,69,0) 235.8px 470px);
  filter:drop-shadow(0 0 6px rgba(229,201,69,.32));
}

/* ---------- shared band chrome ---------- */

.turf{
  position:relative;isolation:isolate;
  padding:clamp(58px,8vw,104px) 0;
  background-color:var(--pitch);
  background-image:linear-gradient(180deg,var(--night) 0%,var(--pitch) 26%,var(--pitch) 74%,var(--night) 100%);
}
.turf>.sheet,.turf>.sheet-tight{position:relative;z-index:1}

.touchline{
  height:2px;border:0;margin:0;
  background-image:linear-gradient(90deg,
    rgba(229,201,69,0) 0%,rgba(191,191,191,.45) 22%,
    var(--gold) 50%,rgba(191,191,191,.45) 78%,rgba(229,201,69,0) 100%);
  box-shadow:0 1px 0 rgba(4,16,10,.9),0 0 22px rgba(229,201,69,.28);
}

.hood{margin:0 0 clamp(26px,4vw,44px)}
@media (min-width:880px){
  .sheet>.hood:has(.blurb){
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(28px,4vw,56px);align-items:end;
  }
  .sheet>.hood .flash{grid-column:1;grid-row:1}
  .sheet>.hood .shout{grid-column:1;grid-row:2}
  .sheet>.hood .blurb{grid-column:2;grid-row:1/span 2;margin-top:0;align-self:end}
}
.flash{
  font-family:var(--scoreboard);font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin:0 0 16px;
}
.flash::before{
  content:"";display:block;width:60px;height:18px;margin:0 0 16px;
  border-top:2px solid var(--gold);
  border-radius:50%/100% 100% 0 0;
  filter:drop-shadow(0 -3px 10px rgba(229,201,69,.65));
}
.podium .flash::before{margin-left:auto;margin-right:auto}
.shout{font-size:clamp(1.28rem,3.1vw,2.05rem);letter-spacing:.02em;text-transform:uppercase}
.blurb{margin-top:16px;font-size:1.06rem;color:var(--chalk-soft);max-width:64ch}

/* ---------- buttons ---------- */

.strike{
  display:inline-block;border:0;cursor:pointer;
  font-family:var(--scoreboard);font-size:.8rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  color:var(--gold-ink);
  padding:1.05em 2em;border-radius:var(--bend-sm);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 44%),
    linear-gradient(180deg,var(--gilt) 0%,var(--gold) 32%,var(--gold-low) 64%,var(--brass) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,252,226,.95),
    inset 0 -2px 0 rgba(60,49,6,.5),
    inset 0 0 0 1px rgba(120,99,10,.55),
    0 12px 28px -14px rgba(229,201,69,.8),
    0 20px 36px -24px rgba(0,0,0,.95);
  transition:transform .18s ease,box-shadow .18s ease;
}
.strike:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,252,226,.95),
    inset 0 -2px 0 rgba(60,49,6,.5),
    inset 0 0 0 1px rgba(120,99,10,.55),
    0 16px 34px -12px rgba(229,201,69,.9),
    0 24px 42px -22px rgba(0,0,0,.95);
}

/* ---------- gantry (header) ---------- */

.gantry{
  position:relative;z-index:6;
  background-image:linear-gradient(180deg,rgba(4,16,10,.96),rgba(4,16,10,.55));
}
.gantry-hood{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:18px;padding-bottom:18px;flex-wrap:wrap;
}
.gantry-emblem{
  display:block;padding:9px 16px;border-radius:var(--bend-sm);
  background-image:
    linear-gradient(180deg,rgba(236,243,238,.09),rgba(4,16,10,0) 60%),
    linear-gradient(180deg,#0a2115,#050f0a);
  box-shadow:inset 0 1px 0 rgba(236,243,238,.16),inset 0 0 0 1px rgba(191,191,191,.16),0 10px 24px -18px #000;
}
.gantry-emblem img{width:206px;height:39px}
.gantry-stamp{
  display:flex;align-items:center;gap:10px;
  font-family:var(--scoreboard);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-dim);
}
.gantry-eighteen{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;
  color:var(--gold-ink);font-size:.68rem;letter-spacing:0;
  background-image:linear-gradient(180deg,var(--gilt),var(--gold-low));
  box-shadow:inset 0 1px 0 rgba(255,252,226,.9),0 6px 16px -10px rgba(229,201,69,.9);
}

/* ---------- floodlight (hero) ---------- */

.floodlight{
  position:relative;isolation:isolate;
  padding:clamp(34px,6vw,66px) 0 clamp(56px,8vw,96px);
  background-color:var(--night);
  text-align:center;
}
.floodlight-scene{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.floodlight-scene img{
  width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  opacity:.62;filter:saturate(.78) contrast(1.06);
}
.floodlight-scene::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(ellipse 66% 50% at 50% 22%,rgba(255,246,200,.22),rgba(4,16,10,0) 68%),
    radial-gradient(ellipse 52% 44% at 50% 47%,rgba(3,12,8,.84),rgba(3,12,8,0) 74%),
    linear-gradient(180deg,rgba(4,16,10,.86) 0%,rgba(4,16,10,.6) 30%,rgba(4,16,10,.8) 70%,var(--night) 100%);
}
.floodlight::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    conic-gradient(from 118deg at 16% -16%,
      rgba(255,246,200,0) 0 6deg,
      rgba(255,246,200,.085) 12deg,
      rgba(255,246,200,0) 19deg 30deg,
      rgba(255,246,200,.055) 35deg,
      rgba(255,246,200,0) 42deg),
    conic-gradient(from 172deg at 86% -14%,
      rgba(255,246,200,0) 0 5deg,
      rgba(255,246,200,.075) 11deg,
      rgba(255,246,200,0) 18deg 26deg,
      rgba(255,246,200,.05) 31deg,
      rgba(255,246,200,0) 38deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 60%,transparent 86%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 60%,transparent 86%);
}
.floodlight .arclight{opacity:.78}
.floodlight .arclight::after{
  -webkit-mask-image:radial-gradient(ellipse 44% 56% at 50% 50%,transparent 0 46%,#000 90%);
  mask-image:radial-gradient(ellipse 44% 56% at 50% 50%,transparent 0 46%,#000 90%);
}
.floodlight>.sheet{position:relative;z-index:2}

.floodlight-flash{
  display:inline-block;
  font-family:var(--scoreboard);font-size:.7rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding:.7em 1.2em;border-radius:999px;margin:0 0 clamp(20px,3vw,30px);
  background-image:linear-gradient(180deg,rgba(229,201,69,.14),rgba(229,201,69,.03));
  box-shadow:inset 0 0 0 1px rgba(229,201,69,.42),0 0 24px -8px rgba(229,201,69,.5);
}
.floodlight-shout{
  font-size:clamp(1.62rem,5.9vw,3.35rem);
  line-height:1.06;letter-spacing:.02em;text-transform:uppercase;
  margin:0 auto;max-width:19ch;
}
.floodlight-shout span{display:block}
.floodlight-strap{
  margin:clamp(18px,3vw,26px) auto 0;max-width:52ch;
  font-size:clamp(1.02rem,2.2vw,1.24rem);color:var(--chalk);
  text-shadow:0 1px 3px rgba(3,12,8,.95);
}

/* the borrowed brand line, set like a pitch-side board */
.floodlight-hoarding{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.4em 1.1em;
  margin:clamp(16px,2.6vw,24px) auto 0;
  padding:.68em 1.15em;border-radius:5px;
  font-family:var(--scoreboard);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  background-image:linear-gradient(180deg,rgba(4,16,10,.9),rgba(4,16,10,.55));
  box-shadow:inset 0 1px 0 rgba(236,243,238,.11),inset 0 0 0 1px rgba(191,191,191,.18);
}
.floodlight-hoarding q{color:var(--gilt);quotes:"\201C" "\201D"}
.floodlight-hoarding cite{font-style:normal;color:var(--chalk-dim);letter-spacing:.16em}
.floodlight-hoarding cite::before{content:"\2014\A0"}
.floodlight-slot{margin:clamp(26px,4vw,38px) auto 0;max-width:520px}

/* ---------- dispatch (email capture) ---------- */

.dispatch{
  position:relative;text-align:left;
  padding:clamp(20px,3.4vw,28px);
  border-radius:var(--bend);
  background-image:
    linear-gradient(163deg,rgba(236,243,238,.075),rgba(236,243,238,0) 46%),
    linear-gradient(180deg,var(--riser-hi) 0%,#0c281a 44%,var(--riser-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(236,243,238,.2),
    inset 0 0 0 1px rgba(191,191,191,.13),
    inset 0 -34px 46px -38px rgba(229,201,69,.5),
    0 30px 56px -30px rgba(0,0,0,.95);
}
.dispatch-tag{
  display:block;
  font-family:var(--scoreboard);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk);
  margin-bottom:10px;
}
.dispatch-field{display:flex;gap:10px;flex-wrap:wrap}
.dispatch-input{
  flex:1 1 200px;min-width:0;
  font-family:var(--voice);font-size:1rem;color:var(--chalk);
  padding:1em 1.1em;border:0;border-radius:var(--bend-sm);
  background-color:#04120b;
  background-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(236,243,238,.05));
  box-shadow:inset 0 2px 5px rgba(0,0,0,.75),inset 0 0 0 1px rgba(191,191,191,.24);
}
.dispatch-input::placeholder{color:#7f9488}
.dispatch-input[aria-invalid="true"]{box-shadow:inset 0 2px 5px rgba(0,0,0,.75),inset 0 0 0 2px #ff9a8a}
.dispatch .strike{flex:0 0 auto}
.dispatch-alert{
  margin-top:12px;font-size:.9rem;font-weight:600;color:#ffb3a5;
}
.dispatch-alert:empty{display:none}
.dispatch-fine{margin-top:14px;font-size:.82rem;line-height:1.55;color:var(--chalk-dim)}
.dispatch-thanks{
  display:flex;gap:14px;align-items:flex-start;
}
.dispatch-tick{
  flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--gold-ink);font-family:var(--scoreboard);font-weight:700;font-size:1.05rem;
  background-image:linear-gradient(180deg,var(--gilt),var(--gold-low));
  box-shadow:inset 0 1px 0 rgba(255,252,226,.9),0 8px 20px -12px rgba(229,201,69,.95);
}
.dispatch-thanks-shout{font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase}
.dispatch-thanks-brief{margin-top:8px;font-size:.92rem;color:var(--chalk-soft)}
[hidden]{display:none !important}

/* ---------- matchday ---------- */

.matchday-runner{
  display:grid;gap:22px;margin-top:clamp(30px,4.5vw,46px);
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.matchday-tile{
  position:relative;overflow:hidden;border-radius:var(--bend);
  background-image:linear-gradient(180deg,#0d2a1b,#061710);
  box-shadow:
    inset 0 1px 0 rgba(236,243,238,.16),
    inset 0 0 0 1px rgba(191,191,191,.12),
    0 26px 48px -30px rgba(0,0,0,.95);
}
.matchday-scene{position:relative}
.matchday-scene img{width:100%;height:186px;object-fit:cover}
.matchday-scene::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(180deg,rgba(4,16,10,.14),rgba(6,23,16,.94));
}
.matchday-face{
  font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase;
  padding:20px 20px 0;
}
.matchday-brief{padding:10px 20px 22px;font-size:.94rem;color:var(--chalk-soft)}

/* ---------- warmup ---------- */

.warmup-runner{
  display:grid;gap:20px;margin-top:clamp(30px,4.5vw,46px);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.warmup-tier{
  position:relative;padding:26px 22px 24px;border-radius:var(--bend);
  background-image:
    linear-gradient(165deg,rgba(236,243,238,.07),rgba(236,243,238,0) 52%),
    linear-gradient(180deg,#0c2718,#061510);
  box-shadow:inset 0 1px 0 rgba(236,243,238,.15),inset 0 0 0 1px rgba(191,191,191,.1),0 22px 42px -28px rgba(0,0,0,.95);
}
.warmup-numeral{
  font-family:var(--scoreboard);font-size:.68rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.warmup-face{margin-top:12px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.warmup-brief{margin-top:10px;font-size:.94rem;color:var(--chalk-soft)}

/* ---------- fixture (example offer shapes) ---------- */

.fixture-runner{margin-top:clamp(28px,4vw,42px);display:grid;gap:14px}
.fixture-row{
  display:grid;gap:8px;
  padding:20px 22px;border-radius:var(--bend);
  background-image:
    linear-gradient(90deg,rgba(229,201,69,.09),rgba(229,201,69,0) 34%),
    linear-gradient(180deg,#0c2618,#06170f);
  box-shadow:inset 0 1px 0 rgba(236,243,238,.14),inset 0 0 0 1px rgba(191,191,191,.1),0 18px 36px -28px rgba(0,0,0,.9);
}
.fixture-face{font-size:.98rem;letter-spacing:.05em;text-transform:uppercase}
.fixture-brief{font-size:.93rem;color:var(--chalk-soft)}

/* ---------- rundown (FAQ) ---------- */

.rundown-runner{margin-top:clamp(26px,4vw,40px);display:grid;gap:14px}
.rundown-item{
  padding:22px;border-radius:var(--bend);
  background-image:linear-gradient(180deg,#0b2416,#06160f);
  box-shadow:inset 0 1px 0 rgba(236,243,238,.13),inset 0 0 0 1px rgba(191,191,191,.09);
}
.rundown-ask{font-size:.98rem;letter-spacing:.045em;text-transform:uppercase;color:var(--chalk)}
.rundown-reply{margin-top:10px;font-size:.95rem;color:var(--chalk-soft)}

/* ---------- podium (closing capture) ---------- */

.podium{text-align:center}
.podium-shout{font-size:clamp(1.6rem,5.2vw,2.9rem);text-transform:uppercase;letter-spacing:.02em}
.podium-shout span{display:block}
.podium-brief{margin:16px auto 0;max-width:56ch;color:var(--chalk-soft)}
.podium .dispatch{margin:clamp(26px,4vw,38px) auto 0;max-width:540px}

/* ---------- terrace (footer) ---------- */

.terrace{
  position:relative;
  padding:clamp(46px,6vw,72px) 0 34px;
  background-image:linear-gradient(180deg,var(--night),#020a06);
}
.terrace-cols{
  display:grid;gap:28px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
}
.terrace-emblem{
  display:inline-block;padding:10px 16px;border-radius:var(--bend-sm);
  background-image:linear-gradient(180deg,#0a2115,#040d08);
  box-shadow:inset 0 1px 0 rgba(236,243,238,.14),inset 0 0 0 1px rgba(191,191,191,.14);
}
.terrace-emblem img{width:190px;height:36px}
.terrace-hood{
  font-family:var(--scoreboard);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.terrace-brief{font-size:.9rem;color:var(--chalk-dim);margin-top:14px}
.terrace-links{display:grid;gap:9px;font-size:.9rem}
.terrace-links a{color:var(--chalk-soft);text-decoration:none;border-bottom:1px solid rgba(191,191,191,.3)}
.terrace-links a:hover{color:var(--leaf);border-bottom-color:var(--gold)}
.terrace-help{font-size:.9rem;color:var(--chalk-soft)}
.terrace-help b{color:var(--chalk);font-weight:600}
.terrace-eighteen{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  font-family:var(--scoreboard);font-size:.72rem;font-weight:700;color:var(--gold-ink);
  background-image:linear-gradient(180deg,var(--gilt),var(--gold-low));
  box-shadow:inset 0 1px 0 rgba(255,252,226,.9);
  margin-bottom:12px;
}
.terrace-base{
  margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(191,191,191,.16);
  font-size:.82rem;line-height:1.6;color:var(--chalk-dim);
}
.terrace-fine{margin-top:10px}

/* ---------- motion ---------- */

@keyframes liftin{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes bloom{from{opacity:.55}to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .lift{
      animation:liftin linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 34%;
    }
  }
  .floodlight-scene::after{animation:bloom 7s ease-in-out infinite alternate}
}

/* ---------- narrow ---------- */

@media (max-width:640px){
  body{font-size:16px}
  .arclight{opacity:.5}
  .floodlight .arclight{opacity:.6}
  .gantry-emblem img{width:168px;height:32px}
  .gantry-stamp{font-size:.62rem;letter-spacing:.14em}
  .matchday-scene img{height:164px}
  .fixture-row{grid-template-columns:minmax(0,1fr)}
    .fixture-face{grid-row:auto}
  .dispatch .strike{width:100%;text-align:center}
}
@media (max-width:400px){
  .sheet,.sheet-tight{padding:0 16px}
  .dispatch{padding:18px}
  .floodlight-shout{font-size:clamp(1.44rem,7.5vw,1.9rem)}
  .floodlight-hoarding{font-size:.62rem;letter-spacing:.16em}
}