/* The Thursday family: shared styles. Per-city theming via [data-city] custom properties. */
:root {
  --font-display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.25rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2.5rem; --space-12: 4.5rem;
  --radius: 14px; --radius-sm: 8px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --gutter: 16px;
  --danger: #B3261E;
}
/* ---- city palettes (light) ---- */
[data-city="wpb"] {
  --ink: #14213D; --paper: #FBF6EC; --accent: #F2994A; --sea: #2A9D8F;
  --bg: #FBF6EC; --surface: #FFFFFF; --text: #14213D; --muted: #4B5468; --line: #14213D26;
  --accent-text: #9A4A0B; --sea-text: #1B6B61;
  --btn-bg: #F2994A; --btn-ink: #14213D; --sun: #F2994A; --wave: #2A9D8F;
  --focus: #14213D; --danger: #B3261E;
}
[data-city="orlando"] {
  --ink: #1B1B3A; --paper: #F7F4FB; --accent: #7B2CBF; --sea: #F4A261;
  --bg: #F7F4FB; --surface: #FFFFFF; --text: #1B1B3A; --muted: #50506B; --line: #1B1B3A26;
  --accent-text: #7B2CBF; --sea-text: #9A4A0B;
  --btn-bg: #7B2CBF; --btn-ink: #FFFFFF; --sun: #F4A261; --wave: #7B2CBF;
  --focus: #7B2CBF; --danger: #B3261E;
}
[data-city="hub"] {
  --bg: #FBF6EC; --surface: #FFFFFF; --text: #14213D; --muted: #4B5468; --line: #14213D26;
  --accent-text: #9A4A0B; --sea-text: #1B6B61; --btn-bg: #F2994A; --btn-ink: #14213D;
  --sun: #F2994A; --wave: #2A9D8F; --focus: #14213D;
}
/* ---- dark ---- */
@media (prefers-color-scheme: dark) {
  [data-city="wpb"] { --bg: #0D1630; --surface: #16244A; --text: #F6EEDC; --muted: #B6BED0; --line: #F6EEDC2E;
    --accent-text: #F2994A; --sea-text: #5FD0C0; --wave: #3FB8A8; --focus: #F2994A; --danger: #FF9C94; }
  [data-city="orlando"] { --bg: #12122A; --surface: #1E1E44; --text: #F2EEF9; --muted: #BDBAD3; --line: #F2EEF92E;
    --accent-text: #CFA2F0; --sea-text: #F4A261; --btn-bg: #8B3DD0; --wave: #A66BDB; --focus: #F4A261; --danger: #FF9C94; }
  [data-city="hub"] { --bg: #0D1630; --surface: #16244A; --text: #F6EEDC; --muted: #B6BED0; --line: #F6EEDC2E;
    --accent-text: #F2994A; --sea-text: #5FD0C0; --wave: #3FB8A8; --focus: #F2994A; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--text-base)/1.55 var(--font-body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-text); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: var(--gutter); top: -60px; background: var(--text); color: var(--bg); padding: .6rem 1rem; z-index: 10; border-radius: var(--radius-sm); }
.skip:focus { top: var(--gutter); }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- masthead ---- */
.mast { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-4); font-size: var(--text-sm); }
.mast a { color: var(--text); text-decoration: none; }
.mast .brand { font: 800 1.15rem/1 var(--font-display); letter-spacing: -.01em; }
.mast .family { color: var(--muted); }
.mast .family:hover { color: var(--text); text-decoration: underline; }

/* ---- hero: the rising sun is the signature ---- */
.hero { position: relative; isolation: isolate; padding-block: var(--space-6) var(--space-12); overflow: hidden; }
.hero .sun {
  position: absolute; z-index: -1; right: -70px; top: -110px; width: 230px; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sun) 70%, #fff) 0%, var(--sun) 62%);
  opacity: .5; animation: rise 1.8s var(--ease-out) both;
}
.hero .sun::after { content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 2px solid var(--sun); opacity: .35; }
.hero .waves { position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 56px; overflow: hidden; }
.hero .waves svg { width: 200%; height: 100%; animation: drift 22s linear infinite; }
.hero .waves path { fill: none; stroke: var(--wave); stroke-width: 2.5; opacity: .55; }
.hero .waves path + path { opacity: .3; transform: translateY(14px); }
@keyframes rise { from { transform: translateY(46%); opacity: 0; } }
@keyframes drift { to { transform: translateX(-50%); } }

.kicker { display: inline-flex; align-items: center; gap: .6rem; font: 700 .8rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sea-text); margin: 0 0 var(--space-4); }
.kicker::before { content: ""; width: 28px; height: 3px; background: currentColor; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.6rem, 11.5vw, 5.6rem); line-height: .94; font-stretch: 85%; }
h1 em { font-style: normal; color: var(--accent-text); }
h2 { font-weight: 800; font-size: clamp(1.9rem, 6.5vw, 3rem); line-height: 1; font-stretch: 90%; }
h3 { font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
.promise { font-size: var(--text-lg); max-width: 34rem; margin: var(--space-6) 0; color: var(--text); }
.promise strong { font-weight: 700; }

/* ---- signup form ---- */
.signup { max-width: 34rem; background: var(--surface); border: 2px solid var(--text); border-radius: var(--radius); padding: var(--space-6) var(--gutter); box-shadow: 6px 6px 0 var(--text); }
.field { margin-bottom: var(--space-4); }
.field label, .field .lbl { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.opt { font-weight: 500; color: var(--muted); }
.field input[type=email], .field input[type=tel] {
  width: 100%; min-height: 48px; padding: .6rem .85rem; font: inherit; color: var(--text); background: var(--bg);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
}
.field input:hover { border-color: var(--muted); }
.field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--text); }
.field input[aria-invalid=true] { border-color: var(--danger); }
.hint { font-size: var(--text-sm); color: var(--muted); margin: .35rem 0 0; }
.err { font-size: var(--text-sm); color: var(--danger); font-weight: 600; margin: .35rem 0 0; min-height: 0; }
.err:empty { display: none; }
.sms { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; padding: var(--space-3); border: 2px dashed var(--line); border-radius: var(--radius-sm); transition: opacity .25s, border-color .25s; }
.sms.is-off { opacity: .55; }
.sms.is-on { border-color: var(--sea-text); }
.sms input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--sea-text); }
.sms label { font-size: .9rem; font-weight: 500; line-height: 1.45; margin: 0; }
.sms .err { grid-column: 1 / -1; margin: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; width: 100%;
  padding: .8rem 1.4rem; margin-top: var(--space-4); font: 800 1.1rem/1 var(--font-display); letter-spacing: .01em;
  background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--text); border-radius: 999px; cursor: pointer;
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--text); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; box-shadow: none; }
.btn.inline { width: auto; margin-top: 0; }
.fine { font-size: .8rem; color: var(--muted); margin: var(--space-3) 0 0; }
.formerr { background: color-mix(in srgb, var(--danger) 12%, transparent); border-left: 4px solid var(--danger); padding: .6rem .8rem; font-size: .9rem; margin-bottom: var(--space-4); border-radius: 4px; }
.formerr:empty { display: none; }
.done { text-align: left; }
.done h3 { font-size: 1.6rem; margin-bottom: var(--space-2); }
.done p { margin: 0 0 var(--space-2); }

/* ---- sections ---- */
section { padding-block: var(--space-8); }
.split { display: grid; gap: var(--space-8); }
.gets { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.gets li { padding-left: var(--space-4); border-left: 4px solid var(--accent); }
.gets li:nth-child(2) { border-color: var(--sea); }
.gets li:nth-child(3) { border-color: var(--text); }
.gets h3 { margin-bottom: .25rem; }
.gets p { margin: 0; color: var(--muted); }

/* sample issue: a printed slip */
.slip { position: relative; background: var(--surface); border: 2px solid var(--text); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--accent); overflow: hidden; }
.slip-head { background: var(--text); color: var(--bg); padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; gap: var(--space-3); font: 700 .8rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.slip-body { padding: var(--space-4); }
.slip h3 { font-size: 1.5rem; margin-bottom: var(--space-4); }
.slip-sec + .slip-sec { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 2px dotted var(--line); }
.slip-sec h4 { margin: 0 0 .4rem; font: 700 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sea-text); }
.slip-sec ul { margin: 0; padding: 0; list-style: none; }
.slip-sec li { padding: .3rem 0; font-weight: 600; }
.slip-note { margin: var(--space-3) 0 0; font-size: .8rem; color: var(--muted); }
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 130ms); }
.js .is-in .reveal, .js .reveal.is-in { opacity: 1; transform: none; }

/* advertise */
.advertise { background: var(--text); color: var(--bg); border-radius: var(--radius); padding: var(--space-8) var(--gutter); display: grid; gap: var(--space-4); }
.advertise h2 { color: var(--bg); }
.advertise p { margin: 0; max-width: 36rem; }
.advertise .btn { background: var(--accent); color: var(--ink, #14213D); border-color: var(--bg); width: auto; justify-self: start; margin-top: var(--space-2); text-decoration: none; }
[data-city="orlando"] .advertise .btn { background: var(--sea); }
.advertise .btn:hover { box-shadow: 0 4px 0 var(--bg); }
.advertise :focus-visible { outline-color: var(--bg); }

footer { border-top: 2px solid var(--text); margin-top: var(--space-8); padding-block: var(--space-8); font-size: var(--text-sm); color: var(--muted); }
footer .wrap { display: grid; gap: var(--space-3); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
footer .brand { font: 800 1.2rem/1 var(--font-display); color: var(--text); }

/* ---- hub ---- */
.cities { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-4); max-width: 44rem; }
.city { display: grid; gap: .25rem; padding: var(--space-6) var(--space-4); border: 2px solid var(--text); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; position: relative; transition: transform .15s var(--ease-out), box-shadow .15s; }
a.city:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--text); }
a.city:active { transform: none; box-shadow: none; }
.city strong { font: 800 clamp(1.6rem, 6vw, 2.2rem)/1 var(--font-display); font-stretch: 90%; }
.city span { color: var(--muted); }
.city.soon { border-style: dashed; background: transparent; color: var(--muted); }
.tag { justify-self: start; margin-bottom: .6rem; font: 700 .7rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; padding: .4rem .6rem; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); }
.city.soon .tag { background: transparent; border: 1.5px solid currentColor; color: var(--muted); }
.city.wpb strong { color: #9A4A0B; } .city.orlando strong { color: #7B2CBF; }
@media (prefers-color-scheme: dark) { .city.wpb strong { color: #F2994A; } .city.orlando strong { color: #CFA2F0; } }

/* ---- legal pages ---- */
.legal { max-width: 42rem; padding-block: var(--space-8); }
.legal .draft { background: #FFE9A8; color: #3d2f00; border: 2px solid #3d2f00; padding: .75rem 1rem; border-radius: var(--radius-sm); font-weight: 700; }
.legal h1 { font-size: clamp(2rem, 8vw, 3.2rem); margin-block: var(--space-6); }
.legal h2 { font-size: 1.4rem; margin: var(--space-6) 0 var(--space-2); }

/* ---- breakpoints ---- */
@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .hero .sun { width: 460px; right: -80px; top: -60px; opacity: .9; }
  .signup { padding: var(--space-8) var(--space-6); }
}
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .hero { padding-block: var(--space-8) 6rem; }
  .hero .sun { width: 520px; right: -40px; top: -60px; }
  .hero h1 { max-width: 7.5em; }
  .hero .promise { max-width: 30rem; }
  .split { grid-template-columns: 1fr 1.05fr; align-items: start; gap: 4rem; }
  .slip { transform: rotate(1.6deg); margin-top: var(--space-6); }
  .cities { grid-template-columns: 1fr 1fr; max-width: none; }
  .advertise { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 3.5rem 3rem; }
  .advertise .btn { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ======== Delray + Jupiter (additive) ======== */
[data-city="delray"] {
  --ink: #1F2A44; --paper: #FFF8EE; --accent: #E76F51; --sea: #2A9D8F;
  --bg: #FFF8EE; --surface: #FFFFFF; --text: #1F2A44; --muted: #4A5368; --line: #1F2A4426;
  --accent-text: #B4432A; --sea-text: #1B6B61;
  --btn-bg: #E76F51; --btn-ink: #1F2A44; --sun: #E76F51; --wave: #2A9D8F;
  --focus: #1F2A44; --danger: #B3261E;
}
[data-city="jupiter"] {
  --ink: #0B2545; --paper: #F4F7F5; --accent: #D62828; --sea: #13A89E;
  --bg: #F4F7F5; --surface: #FFFFFF; --text: #0B2545; --muted: #46566B; --line: #0B254526;
  --accent-text: #D62828; --sea-text: #0C6F68;
  --btn-bg: #D62828; --btn-ink: #FFFFFF; --sun: #13A89E; --wave: #13A89E;
  --focus: #0B2545; --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
  [data-city="delray"] { --bg: #0E1830; --surface: #192849; --text: #FAF1E2; --muted: #B9C0D2; --line: #FAF1E22E;
    --accent-text: #F4896E; --sea-text: #5FD0C0; --wave: #3FB8A8; --focus: #F4896E; --danger: #FF9C94; }
  [data-city="jupiter"] { --bg: #08172E; --surface: #10264A; --text: #EEF3F7; --muted: #B3C0D3; --line: #EEF3F72E;
    --accent-text: #FF6B6B; --sea-text: #4FD6CB; --btn-bg: #C41F1F; --wave: #2FC7BC; --focus: #FF6B6B; --danger: #FF9C94; }
}
[data-city="jupiter"] .advertise .btn { background: var(--sea); }
.city.delray strong { color: #B4432A; } .city.jupiter strong { color: #D62828; }
@media (prefers-color-scheme: dark) { .city.delray strong { color: #F4896E; } .city.jupiter strong { color: #FF6B6B; } }

/* Delray motif: sun + swaying palm over the waves */
.hero .palm { position: absolute; z-index: -1; right: 2%; bottom: 20px; width: 150px; opacity: .45; }
.palm svg { width: 100%; height: auto; overflow: visible; }
.palm path, .palm .nut { stroke: var(--sea-text); }
.palm path { fill: none; stroke-width: 5; stroke-linecap: round; }
.palm .trunk { stroke-width: 8; }
.palm .nut { fill: var(--sea-text); stroke: none; }
.palm-sway { transform-origin: 96px 300px; animation: sway 7s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* Jupiter motif: lighthouse with a sweeping beam. The sun is swapped for the lighthouse. */
[data-city="jupiter"] .hero .sun { display: none; }
.hero .lh { position: absolute; z-index: -1; right: 3%; bottom: 40px; width: 90px; opacity: .4; }
.lh svg { width: 100%; height: auto; overflow: visible; }
.lh .tower, .lh .gallery, .lh .lantern { fill: var(--surface); stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.lh .band { fill: var(--accent); stroke: var(--text); stroke-width: 2; }
.lh .cap { fill: var(--accent); stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.lh .lantern { fill: #FFD166; }
.lh .beam {
  position: absolute; right: 45%; top: 20%; width: min(95vw, 900px); height: 150px; margin-top: -75px;
  transform-origin: 100% 50%; clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: linear-gradient(to left, color-mix(in srgb, #FFD166 70%, transparent), transparent 90%);
  animation: sweep 6s ease-in-out infinite alternate;
}
@keyframes sweep { from { transform: rotate(-12deg); opacity: .35; } to { transform: rotate(12deg); opacity: 1; } }
@media (min-width: 640px) {
  .hero .palm { width: 230px; right: 6%; opacity: .6; }
  .hero .lh { width: 130px; right: 8%; opacity: .75; }
}
@media (min-width: 960px) {
  .hero .palm { width: 290px; right: 9%; bottom: 30px; }
  .hero .lh { width: 160px; right: 12%; bottom: 50px; }
}

/* ======== Signup step 2, honeypot, submit page ======== */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mastnav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.mastnav a { color: var(--text); text-decoration: none; }
.mastnav a:first-child { font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent, var(--btn-bg)); text-decoration-thickness: 3px; text-underline-offset: .22em; }
.mastnav a:hover { text-decoration-color: var(--text); }
.mastnav .family { color: var(--muted); }

.tipbox { border: 2px dashed var(--text); border-radius: var(--radius); padding: var(--space-6) var(--gutter); display: grid; gap: var(--space-4); background: var(--surface); }
.tipbox h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
.tipbox p { margin: var(--space-2) 0 0; max-width: 36rem; color: var(--muted); }
.tipbox .btn { justify-self: start; margin-top: 0; text-decoration: none; }
@media (min-width: 960px) { .tipbox { grid-template-columns: 1.4fr auto; align-items: center; padding: var(--space-8) 2.5rem; } }

.profile { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 2px dotted var(--line); }
.profile h4 { font: 800 1.25rem/1.1 var(--font-display); margin: 0 0 var(--space-2); }
.profile .field { max-width: 12rem; margin-top: var(--space-4); }
.chips { border: 0; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips legend { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; padding: 0; width: 100%; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .95rem; border: 2px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .95rem; background: var(--bg); transition: background .15s, border-color .15s; }
.chip:hover span { border-color: var(--text); }
.chip input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.actions .btn { margin-top: 0; }
.linkbtn { background: none; border: 0; padding: .75rem .25rem; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--text); }

.field input[type=text], .field input[type=url], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .6rem .85rem; font: inherit; color: var(--text); background: var(--bg);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.45; }
.field select:hover, .field textarea:hover, .field input[type=text]:hover, .field input[type=url]:hover { border-color: var(--muted); }
.field select:focus-visible, .field textarea:focus-visible, .field input[type=text]:focus-visible, .field input[type=url]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--text); }
.field [aria-invalid=true] { border-color: var(--danger); }
.field-row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.submit-hero { padding-block: var(--space-6) var(--space-8); }
.submit-hero h1 { font-size: clamp(2.2rem, 9vw, 4.2rem); max-width: 11em; }
.form-card { max-width: 40rem; margin-top: var(--space-6); }
.kinds { border: 0; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.kinds legend { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; padding: 0; }
.kind { position: relative; display: block; }
.kind input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kind span { display: block; min-height: 48px; padding: .7rem .9rem; border: 2px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; background: var(--bg); transition: background .15s, border-color .15s; }
.kind small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.kind:hover span { border-color: var(--text); }
.kind input:checked + span { border-color: var(--text); box-shadow: inset 5px 0 0 var(--accent, var(--btn-bg)); background: var(--surface); }
.kind input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 640px) { .kinds { grid-template-columns: 1fr 1fr; } }
.review-note { background: color-mix(in srgb, var(--wave) 14%, transparent); border-left: 4px solid var(--sea-text); padding: .7rem .9rem; border-radius: 4px; font-size: .92rem; margin: 0 0 var(--space-4); }
.sponsor-line { display: none; font-size: .95rem; margin: 0 0 var(--space-4); padding: .7rem .9rem; border: 2px dashed var(--line); border-radius: var(--radius-sm); }
.sponsor-line.is-on { display: block; }