/* ---------- HE Influence brand tokens (from May 2026 newsletter refresh) ---------- */
:root {
  --navy: #141437;
  --pink-deep: #E5008F;
  --pink-bright: #FF6BCB;
  --pink-pale: #FFF0F8;
  --surface: #F7F7F7;
  --white: #FFFFFF;
  --muted: #5C5C70;
  --hairline: #E8E8EE;
  --hairline-strong: #DADAE0;

  /* Party colour markers – sampled directly from the logo files in
     /public/party-logos/ so the conf-strip top-accents, page-title
     stripes, day-heading borders, etc. match the brand of each party. */
  --labour: #e41c3e;
  --conservative: #0a3b7c;
  --libdem: #FF6400;
  --green: #02a95b;
  --reform: #12B6CF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.5;
  color: var(--navy);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--pink-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ---------- Layout ---------- */
.container { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.fullbleed { width: 100%; }

/* ---------- Header (Wonkhe-prominent, but functional – not newsletter masthead) ---------- */
.site-header { background: var(--navy); color: var(--white); }
.site-header-inner {
  display: flex; align-items: center; gap: 22px;
  max-width: 1080px; margin: 0 auto;
  padding: 18px 20px;
}
.site-header .wonkhe-wordmark { flex: 0 0 auto; margin: 0; }
.site-header .wonkhe-wordmark img {
  width: 130px; height: auto; display: block;
}
.brand-text {
  flex: 1 1 auto; min-width: 0;
  font-size: 16px; line-height: 1.35;
  color: var(--white);
}
.brand-text .brand-title { font-weight: 700; letter-spacing: 0.005em; font-size: 16px; }
.brand-text .brand-tagline {
  display: block;
  margin-top: 2px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pink-bright);
}
.brand-util {
  display: flex; gap: 22px; align-items: center;
  flex: 0 0 auto;
}
.brand-util a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
}
.brand-util a:hover { color: var(--pink-bright); }
.brand-util a[aria-current="page"] {
  color: var(--pink-bright);
  border-bottom: 2px solid var(--pink-bright);
}
.brand-util .icon-bookmark,
.brand-util .icon-plus { flex-shrink: 0; }
/* "I'm attending" nav item uses the 👥 emoji as its icon for consistency
   with the homepage CTA. Slight tweak: bump it up a touch to optically
   sit on the same baseline as the SVG-icon labels. */
.brand-util .util-people { font-size: 14px; line-height: 1; flex-shrink: 0; }

@media (max-width: 720px) {
  .site-header-inner {
    flex-wrap: wrap;
    padding: 14px 14px;
    gap: 14px;
  }
  .site-header .wonkhe-wordmark img { width: 105px; }
  .brand-text { font-size: 14px; flex: 1 1 60%; }
  .brand-text .brand-title { font-size: 14px; }
  .brand-text .brand-tagline { font-size: 11px; }
  .brand-util { width: 100%; gap: 16px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 4px; }
  .brand-util a { font-size: 11px; padding: 2px 0; }
}

/* Header accent stripe.
   Default colour set here (pink). On conference pages, renderHeader()
   in shell.js sets backgroundColor inline to the active party's colour. */
.accent-stripe { height: 3px; background: var(--pink-deep); transition: background-color 0.18s ease; }

/* ---------- Conference pill strip (primary nav) ---------- */
.conf-strip {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 60;
}
.conf-strip-inner {
  display: flex;
  max-width: 1080px; margin: 0 auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.conf-pill {
  flex: 1 0 auto;
  display: flex; flex-direction: column;
  align-items: flex-start;
  min-width: 148px;
  padding: 12px 18px;
  text-decoration: none; color: var(--navy);
  white-space: nowrap;
  border-top: 3px solid transparent;
  border-right: 1px solid var(--hairline);
  transition: background 0.1s ease;
}

/* ===== Party icons (used in conf strip, page title, hero, picks) ===== */
.party-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Inline-SVG fallback variant: colour-tinted via currentColor */
.party-icon-labour       { color: var(--labour); }
.party-icon-conservative { color: var(--conservative); }
.party-icon-libdem       { color: var(--libdem); }
.party-icon-green        { color: var(--green); }
.party-icon-reform       { color: var(--reform); }
/* File-based variant: wrapper sets the square box, img fits inside.
   Keeps native logo colours rather than tinting them. */
.party-icon-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.party-icon-img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Conf-strip pname row: icon + name on one line, dates underneath */
.conf-pill .pname-row {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 2px;
}
.conf-pill .pname-row .pname { margin: 0; }
/* Party logos in the conf-strip pills are visible at all sizes.
   The dark-fill ones (Labour rose, Conservative oak) lose definition on
   the navy active-pill background, so we give them a small white-card
   treatment there – keeps them readable without resaving the asset files
   with white pads baked in. box-sizing:content-box keeps the inner image
   the same physical size as inactive pills, so only the surrounding white
   card grows (no layout shift between active/inactive). */
.conf-pill[aria-current="page"] .party-icon-img {
  background: var(--white);
  border-radius: 4px;
  padding: 2px;
  box-sizing: content-box;
}

/* The small "LIB DEM CONFERENCE" label badge above each conference-page
   title also includes a 14px party logo. At that size the icon is too
   small to read and visually competes with the navy badge bg without
   adding identity value (the page title right below spells out which
   conference this is). Hide the icon there; keep the larger 56px hero
   badge to the right of the title where the logo actually carries. */
.pt-text .label .party-icon { display: none; }
.conf-pill:last-child { border-right: 0; }
.conf-pill:hover { background: var(--pink-pale); }

.conf-pill.reform       { border-top-color: var(--reform); }
.conf-pill.libdem       { border-top-color: var(--libdem); }
.conf-pill.labour       { border-top-color: var(--labour); }
.conf-pill.conservative { border-top-color: var(--conservative); }
.conf-pill.green        { border-top-color: var(--green); }

/* Suppress the party-coloured pill tops where they fight the accent stripe sitting
   directly above them. Two situations:
     – On a conference page, the accent stripe is the active party's colour; the
       OTHER four pills' tops then form a row of competing colours immediately
       under it. Hide them so the active party's identity reads clean.
     – On non-conference pages (homepage, my-schedule, about, add), the accent
       stripe is HE-Influence pink. The five party tops vs. the pink stripe make
       a noisy band of six colours. Hide all party tops so the stripe stands alone.
   Keyed off the strip's own DOM state via :has() – no dependency on a body class. */
.conf-strip-inner:has([aria-current="page"]) .conf-pill:not([aria-current="page"]) {
  border-top-color: transparent;
}
.conf-strip-inner:not(:has([aria-current="page"])) .conf-pill {
  border-top-color: transparent;
}

.conf-pill .pname {
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 2px;
}
.conf-pill .pdate {
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.conf-pill[aria-current="page"] {
  background: var(--navy); color: var(--white);
}
.conf-pill[aria-current="page"]:hover { background: var(--navy); }
.conf-pill[aria-current="page"] .pdate { color: var(--pink-bright); }

@media (max-width: 720px) {
  .conf-pill { min-width: 132px; padding: 10px 14px; }
  .conf-pill .pname { font-size: 12px; }
  .conf-pill .pdate { font-size: 10px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--white); padding: 36px 0 28px; }
.hero h1 {
  margin: 0 0 14px;
  font-weight: 800; font-size: 38px; line-height: 1.05;
  letter-spacing: -0.015em; color: var(--navy);
}
.hero .lede {
  margin: 0 0 22px;
  font-size: 17px; line-height: 1.55; color: var(--navy);
  font-weight: 500;
}
.hero .countdown {
  display: inline-block;
  font-size: 14px; color: var(--muted);
  padding: 10px 0 0; border-top: 1px solid var(--hairline);
  width: 100%;
}
.hero .countdown strong {
  color: var(--pink-deep); font-weight: 700; font-size: 15px;
}

/* ---------- Generic ---------- */
.kicker {
  display: block; margin: 0 0 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink-deep);
}
.section-h2 {
  margin: 36px 0 14px; padding-top: 16px;
  border-top: 2px solid var(--navy);
  font-weight: 800; font-size: 22px; line-height: 1.2;
  letter-spacing: -0.005em; color: var(--navy);
}

/* ---------- Conference picker ---------- */
.conf-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
  margin: 16px 0 0;
}
@media (min-width: 720px) {
  .conf-grid { grid-template-columns: repeat(5, 1fr); }
}
.conf-card {
  display: flex; flex-direction: column;
  padding: 18px 16px 16px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--navy);
  text-decoration: none; color: var(--navy);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  min-height: 150px;
}
.conf-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 20, 55, 0.08);
}
.conf-card.labour { border-top-color: var(--labour); }
.conf-card.conservative { border-top-color: var(--conservative); }
.conf-card.libdem { border-top-color: var(--libdem); }
.conf-card.green { border-top-color: var(--green); }
.conf-card.reform { border-top-color: var(--reform); }

.conf-card .name {
  font-weight: 800; font-size: 16px;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 10px;
}
.conf-card .dates { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.conf-card .city { font-size: 13px; color: var(--muted); margin-bottom: auto; }
.conf-card .count {
  margin-top: 14px;
  font-size: 12px; font-weight: 700;
  color: var(--pink-deep);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------- HE Influence inline CTA ---------- */
.cta-card {
  margin: 32px 0 8px;
  background: var(--pink-pale);
  border-left: 4px solid var(--pink-deep);
  padding: 22px 24px;
}
.cta-card p {
  margin: 0 0 16px;
  font-size: 16px; line-height: 1.5;
  color: var(--navy);
}
.cta-card p strong { font-weight: 700; }
.cta-card .cta-btn {
  display: inline-block;
  background: var(--pink-deep); color: var(--white) !important;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 13px 18px;
  text-decoration: none; border: 0;
}
.cta-card .cta-btn:hover { background: var(--navy); }

/* ---------- Event list (lst-events lifted from newsletter) ---------- */
.events-list { margin: 16px 0 0; }
.day-heading {
  margin: 28px 0 12px; padding-top: 14px;
  border-top: 1px solid var(--hairline-strong);
  font-weight: 800; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
}
.day-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.event-card {
  display: grid;
  grid-template-columns: 72px 1fr 32px;
  gap: 14px; align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
}
.event-card:last-child { border-bottom: 0; }
/* The last event in a day group sits right above the next day-heading,
   which has its own (stronger) top border. Without this rule we'd get
   two stacked lines – the card's light hairline immediately followed by
   the day-heading's hairline-strong border – for no reason. Drop the
   card's bottom border whenever the next sibling is a day heading. */
.event-card:has(+ .day-heading) { border-bottom: 0; }
.event-card:hover .title { color: var(--pink-deep); }

.event-card .date-pill {
  background: var(--navy); color: var(--white);
  padding: 10px 6px 9px; text-align: center;
}
/* Day-of-week leads – what you actually plan your conference around */
.event-card .date-pill .dow {
  display: block;
  font-weight: 800; font-size: 20px; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
}
/* Date number is secondary context */
.event-card .date-pill .day {
  display: block;
  margin-top: 4px;
  font-weight: 700; font-size: 14px; line-height: 1;
  color: var(--pink-bright);
}
/* Month abbreviation smallest – only needed when day grouping isn't above */
.event-card .date-pill .mon {
  display: block; margin-top: 1px;
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pink-bright); opacity: 0.75;
}

.event-card .body { min-width: 0; }
.event-card .time {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 4px;
}
.event-card .title {
  display: block;
  font-weight: 700; font-size: 16px; line-height: 1.3;
  margin: 0 0 4px;
  color: var(--navy);
}
.event-card .host { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.event-card .venue { font-size: 13px; color: var(--navy); margin-bottom: 8px; }
.event-card .venue .pin { color: var(--muted); margin-right: 2px; }
/* The whole venue line is an anchor to Google Maps. Inherit the venue's
   navy colour by default – no blue link styling – and only signal
   clickability on hover/focus so the listing stays calm at rest. */
.event-card .venue-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.event-card .venue-link:hover,
.event-card .venue-link:focus-visible {
  color: var(--pink-deep);
  border-bottom-color: var(--pink-deep);
}
.event-card .venue-link:hover .pin,
.event-card .venue-link:focus-visible .pin { color: var(--pink-deep); }
.event-card .venue-link:focus-visible {
  outline: 2px solid var(--pink-deep); outline-offset: 2px;
}

.event-card .meta-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.5;
}
.pill.access-open    { background: #DFF5E0; color: #0A6A1F; }
.pill.access-reg     { background: #FFF1D2; color: #9A6500; }
.pill.access-secure  { background: #E0E0EC; color: var(--navy); }
.pill.access-invite  { background: #FFE5F2; color: #A30062; }
.pill.access-cancelled {
  background: var(--pink); color: #fff;
  font-weight: 900; letter-spacing: 0.1em;
}
/* Event type pill – a single per-event label. Same visual as the old topic pill. */
.pill.type           { background: var(--pink-pale); color: var(--pink-deep); }

/* Bookmark "save to my schedule" toggle.
   Empty/unsaved = muted outline. Filled/saved = pink-deep. */
.event-card .star {
  align-self: start;
  background: transparent; border: 0;
  color: var(--hairline-strong);
  cursor: pointer;
  padding: 4px 4px 4px 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.12s ease, transform 0.08s ease;
}
.event-card .star:hover { color: var(--pink-deep); transform: translateY(-1px); }
.event-card .star.starred { color: var(--pink-deep); }
.event-card .star .icon-bookmark { display: block; }

/* ---------- What's on now card ---------- */
.now-card {
  margin: 14px 0 0;
  background: var(--pink-pale);
  border-left: 4px solid var(--pink-deep);
  padding: 14px 18px;
}
.now-card .now-title {
  margin: 4px 0 4px;
  font-weight: 700; font-size: 15px; line-height: 1.3;
  color: var(--navy);
}
.now-card .now-meta { margin: 0; font-size: 13px; color: var(--muted); }
.now-card.is-pre .live-dot { display: none; }
.now-card .live-dot {
  display: inline-block; width: 8px; height: 8px;
  background: #E03; border-radius: 50%;
  vertical-align: middle; margin-right: 6px;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Page title strip (listing pages) ---------- */
.page-title {
  background: var(--white);
  padding: 26px 0 18px;
  position: relative;
}
/* Party-coloured top accent stripe – the page's primary party signal */
.page-title::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--navy);
}
.page-title.labour::before       { background: var(--labour); }
.page-title.conservative::before { background: var(--conservative); }
.page-title.libdem::before       { background: var(--libdem); }
.page-title.green::before        { background: var(--green); }
.page-title.reform::before       { background: var(--reform); }

/* Page-title layout with hero icon on the right */
.page-title .pt-flex {
  display: flex; align-items: flex-start; gap: 24px;
  justify-content: space-between;
}
.page-title .pt-text { flex: 1 1 auto; min-width: 0; }
.page-title .pt-hero-icon {
  flex: 0 0 auto;
  padding-top: 6px;
}
.page-title .pt-hero-icon .party-icon { display: block; }
@media (max-width: 480px) {
  .page-title .pt-hero-icon { display: none; }
}

.page-title .label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); background: var(--navy);
  margin-bottom: 12px;
}
.page-title .label .party-icon { color: var(--white); }

.page-title h1 {
  margin: 0 0 8px;
  font-weight: 800; font-size: 32px; line-height: 1.05;
  letter-spacing: -0.015em;
}
.page-title .meta {
  margin: 0; font-size: 14px; color: var(--muted);
}

/* ---------- Sticky filter bar (sits under the conference strip) ----------
   Headroom behaviour: visible at top, slides up off-screen on scroll-down,
   slides back in on scroll-up. JS toggles .is-hidden in shell.js. */
.filter-bar {
  position: sticky; top: 53px; /* approx height of .conf-strip */
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  padding: 12px 0 10px;
  z-index: 50;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
  will-change: transform;
}
.filter-bar.is-hidden {
  /* Use a pixel value (not % – sticky elements mis-resolve % translateY) */
  transform: translate3d(0, -200px, 0);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 720px) { .filter-bar { top: 46px; } }
.day-tabs {
  display: flex; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 10px;
}
.day-tab {
  display: inline-flex; flex-direction: column;
  align-items: center; min-width: 58px;
  padding: 8px 10px;
  background: var(--white); border: 1px solid var(--hairline-strong);
  text-decoration: none; color: var(--navy);
  cursor: pointer;
}
.day-tab .d-name {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.day-tab .d-num {
  font-size: 20px; font-weight: 800;
  line-height: 1; margin-top: 3px;
}
.day-tab[aria-current="page"] {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.day-tab[aria-current="page"] .d-name { color: var(--pink-bright); }

.filter-row {
  display: flex; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  align-items: center;
}
.filter-search {
  flex: 1 1 220px; min-width: 180px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-strong);
  font-family: inherit; font-size: 14px;
  color: var(--navy); background: var(--white);
}
.filter-search::placeholder { color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 13px;
  background: var(--white); border: 1px solid var(--hairline-strong);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--navy); cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--navy); }
.chip.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ---------- Sticky bottom CTA (listing/event pages only) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--navy); color: var(--white);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; z-index: 40;
  border-top: 3px solid var(--pink-deep);
}
/* Party-colour border on conference pages (overrides the default pink) */
body.conf-labour       .sticky-cta { border-top-color: var(--labour); }
body.conf-conservative .sticky-cta { border-top-color: var(--conservative); }
body.conf-libdem       .sticky-cta { border-top-color: var(--libdem); }
body.conf-green        .sticky-cta { border-top-color: var(--green); }
body.conf-reform       .sticky-cta { border-top-color: var(--reform); }

/* Day-heading top border picks up the party colour too */
body.conf-labour       .day-heading { border-top-color: var(--labour);       border-top-width: 2px; }
body.conf-conservative .day-heading { border-top-color: var(--conservative); border-top-width: 2px; }
body.conf-libdem       .day-heading { border-top-color: var(--libdem);       border-top-width: 2px; }
body.conf-green        .day-heading { border-top-color: var(--green);        border-top-width: 2px; }
body.conf-reform       .day-heading { border-top-color: var(--reform);       border-top-width: 2px; }
.sticky-cta .msg { font-size: 14px; font-weight: 500; }
.sticky-cta .msg strong { color: var(--pink-bright); font-weight: 700; }
/* Two-button bar (on conference pages): Add event (primary) gets the pink
   fill, Subscribe (secondary) is white-outlined so the Add action visually
   wins. On non-conference pages there's only the Subscribe button and it
   keeps the same primary treatment. */
.sticky-cta .btn {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sticky-cta .btn-primary,
.sticky-cta .btn:not(.btn-secondary):not(.btn-primary) {
  background: var(--pink-deep); color: var(--white);
  border: 1px solid var(--pink-deep);
}
.sticky-cta .btn-primary:hover {
  background: var(--white); color: var(--pink-deep);
}
.sticky-cta .btn-secondary {
  background: transparent; color: var(--white);
  border: 1px solid var(--white);
}
.sticky-cta .btn-secondary:hover {
  background: var(--white); color: var(--navy);
}
/* When both buttons are present, give the message a smaller share of the bar */
.sticky-cta .btn + .msg,
.sticky-cta .msg + .btn-secondary { /* spacing aid */ }
@media (max-width: 720px) {
  /* On mobile, hide the marketing message to make room for two buttons */
  .sticky-cta .msg { display: none; }
  .sticky-cta { gap: 8px; padding: 10px 14px; }
  .sticky-cta .btn { padding: 9px 12px; font-size: 11px; }
}
body.has-sticky-cta { padding-bottom: 72px; }
/* Without extra footer padding when the sticky CTA is present, the body's
   pale surface bg shows through as a band between the navy footer-content
   end and the navy sticky-CTA top. Pad the footer instead so its own navy
   bg fills the area – footer and CTA then read as one continuous navy block. */
body.has-sticky-cta .site-footer { padding-bottom: 100px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--white); padding: 30px 0; }
.site-footer .footer-inner { padding: 0 16px; max-width: 760px; margin: 0 auto; }
.site-footer .footer-logo img { width: 120px; height: auto; margin-bottom: 14px; }
.site-footer p {
  margin: 0 0 10px;
  font-size: 13px; line-height: 1.5; color: var(--surface);
}
.site-footer a { color: var(--white); text-decoration: underline; }
.site-footer .footer-rule {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 18px 0;
}
.site-footer .small { font-size: 12px; opacity: 0.85; }

/* ---------- Event card "More" disclosure ---------- */
.event-detail { margin: 6px 0 8px; }
.event-detail summary {
  cursor: pointer;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--pink-deep);
  list-style: none;
  padding: 2px 0;
  user-select: none;
}
.event-detail summary::-webkit-details-marker { display: none; }
.event-detail summary::after { content: ' ▾'; font-size: 10px; }
.event-detail[open] summary::after { content: ' ▴'; }
.event-detail p {
  margin: 6px 0;
  font-size: 13px; line-height: 1.5; color: var(--navy);
}
.event-detail p.event-reg { font-size: 12px; color: var(--muted); }
.event-detail p.event-reg a { color: var(--pink-deep); word-break: break-all; }
/* "Spotted an error?" mailto link – same muted treatment as registration,
   sits at the bottom of the More panel so it's discoverable but unobtrusive. */
.event-detail p.event-correction { font-size: 12px; color: var(--muted); margin-top: 12px; }
.event-detail p.event-correction a { color: var(--muted); text-decoration: underline; }
.event-detail p.event-correction a:hover { color: var(--pink-deep); }

/* ---------- Empty states ---------- */
.empty, .empty-schedule {
  padding: 32px 0;
  font-size: 16px; line-height: 1.5;
  color: var(--muted);
}
.empty-schedule p strong { color: var(--navy); }
.empty a { color: var(--pink-deep); font-weight: 700; }

/* ---------- Add event form ---------- */
.form-section { padding: 28px 0 80px; max-width: 640px; }
.form-section h1 {
  margin: 0 0 8px;
  font-weight: 800; font-size: 30px; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--navy);
}
.form-section .lede {
  margin: 0 0 28px;
  font-size: 16px; line-height: 1.55; color: var(--muted);
}
/* "≈ 3 min to fill in" hint inside the lede – pink-deep + bold so it
   reads as a confidence-boosting commitment, not buried gray text. */
.form-section .lede .lede-hint {
  color: var(--pink-deep);
  font-weight: 700;
}
/* Trust signals row directly under the submit button – three small
   reassurances at the action moment. Inline-flex so they sit in a row
   on desktop; wrap onto multiple lines on narrower viewports. */
.form-section .trust-signals {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 12px; color: var(--muted);
  font-weight: 600;
}
.form-section .trust-signals li {
  display: inline-flex; align-items: center;
}
/* Draft-restore banner – shows above the form when the page loads with
   a saved draft in localStorage. Small + pink-pale so it reads as a
   contextual notice rather than an error or required action. */
.draft-banner {
  margin: -16px 0 24px;
  padding: 10px 14px;
  background: var(--pink-pale);
  border-left: 3px solid var(--pink-deep);
  font-size: 14px; line-height: 1.4;
  color: var(--navy);
}
.draft-banner .draft-banner-reset {
  color: var(--pink-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--pink-deep);
}
.draft-banner .draft-banner-reset:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.form-section .field { margin-bottom: 18px; }
.form-section label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
}
.form-section label .opt {
  margin-left: 6px;
  font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--muted); font-size: 11px;
}
.form-section input[type="text"],
.form-section input[type="url"],
.form-section input[type="email"],
.form-section input[type="date"],
.form-section input[type="time"],
.form-section select,
.form-section textarea {
  display: block; width: 100%;
  padding: 11px 13px;
  font-family: inherit; font-size: 15px; line-height: 1.4;
  color: var(--navy); background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
}
.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus {
  /* --form-accent is the form's "live" colour: defaults to pink-deep, but
     once a conference is picked on /add.html, JS overrides it to that
     party's colour so the whole form's focus colour, submit button etc.
     re-tint to that party's identity. */
  outline: 2px solid var(--form-accent, var(--pink-deep));
  outline-offset: -2px;
  border-color: var(--pink-deep);
}
.form-section textarea { min-height: 120px; resize: vertical; }
.form-section .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .form-section .field-row { grid-template-columns: 1fr; }
}
.form-section .hint {
  margin: 6px 0 0;
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.form-section .checkbox-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.form-section .checkbox-row label {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong);
  background: var(--white);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}
.form-section .checkbox-row input { margin-right: 6px; accent-color: var(--pink-deep); }
.form-section .checkbox-row label:has(input:checked) {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}

/* Yes/No radio group (e.g. "in the secure zone?") */
.form-section fieldset.yes-no-field {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.form-section fieldset.yes-no-field legend {
  padding: 0;
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
}
.form-section .yes-no-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.form-section .yes-no-row label {
  display: inline-flex; align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--white);
  cursor: pointer;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  margin: 0;
}
/* Custom-drawn radio. The native control on a coloured label background renders
   as a squarish boxed shape in Chrome (it changes drawing path when the host
   has a non-default bg + accent-color is set). We turn off native rendering
   and paint the dot via a radial-gradient on the input's own background – we
   can't use ::before because <input> is a replaced element and ignores
   pseudo-elements. The label flips to navy on :has(input:checked) and the
   radio's gradient ring then matches that navy, giving a clean pink dot on
   navy effect. */
.form-section .yes-no-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin: 0 10px 0 0;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--white);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-section .yes-no-row input[type="radio"]:checked {
  /* Label has flipped to navy by this point – ring fills navy, centre pink. */
  border-color: var(--pink-bright);
  background: radial-gradient(circle, var(--pink-bright) 38%, var(--navy) 42%);
}
.form-section .yes-no-row input[type="radio"]:focus-visible {
  outline: 2px solid var(--pink-deep); outline-offset: 2px;
}
.form-section .yes-no-row label:has(input:checked) {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.form-section .submit-row {
  margin-top: 28px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.form-section button[type="submit"] {
  /* See --form-accent comment above: switches to party colour once selected */
  background: var(--form-accent, var(--pink-deep)); color: var(--white);
  border: 0; padding: 14px 22px;
  font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease;
}
.form-section button[type="submit"]:hover { background: var(--navy); }

/* ===== Conference picker (5 cards) on /add.html ===== */
.conf-picker-field label,
.date-picker-field label {
  /* Label-as-section-heading – picker IS the input */
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.conf-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.conf-card {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--white);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 8px;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.conf-card:hover {
  border-color: var(--navy);
  transform: translateY(-1px);
}
.conf-card.is-active {
  /* Active card takes its own party's colour as border + a faint pink wash.
     Each party-specific class below overrides the border colour. */
  border-width: 2px;
  background: var(--pink-pale);
  box-shadow: 0 2px 10px rgba(20, 20, 55, 0.10);
  transform: translateY(-1px);
}
.conf-card.is-active.conf-card-reform       { border-color: var(--reform); }
.conf-card.is-active.conf-card-libdem       { border-color: var(--libdem); }
.conf-card.is-active.conf-card-labour       { border-color: var(--labour); }
.conf-card.is-active.conf-card-conservative { border-color: var(--conservative); }
.conf-card.is-active.conf-card-green        { border-color: var(--green); }
.conf-card-logo {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.conf-card-name {
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
}
.conf-card-city {
  font-size: 11px; font-weight: 600; color: var(--navy);
}
.conf-card-dates {
  font-size: 10px; color: var(--muted); font-weight: 500;
}
@media (max-width: 720px) {
  /* On mobile let the picker scroll horizontally rather than crushing the cards */
  .conf-picker {
    grid-template-columns: repeat(5, minmax(108px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; /* room for the scroll-shadow */
  }
}

/* ===== Day-pill picker (rendered after a conference is selected) ===== */
.date-picker-hint {
  font-size: 13px; color: var(--muted); font-style: italic;
  margin: 0;
}
.date-picker {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.day-pill {
  background: var(--white); color: var(--navy);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 2px;
  min-width: 64px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.day-pill:hover { border-color: var(--navy); }
.day-pill.is-active {
  background: var(--navy); color: var(--white);
  border-color: var(--navy);
}
.day-pill .dow {
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1;
}
.day-pill .day {
  font-weight: 700; font-size: 14px;
  color: var(--navy); line-height: 1;
}
.day-pill.is-active .day { color: var(--pink-bright); }
.day-pill .mon {
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.day-pill.is-active .mon { color: var(--pink-bright); opacity: 0.85; }
.form-section .secondary { color: var(--muted); font-size: 14px; }
.form-section .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Thanks / About / static text pages ---------- */
.static-section { padding: 36px 0 60px; max-width: 640px; }
.static-section h1 {
  margin: 0 0 14px;
  font-weight: 800; font-size: 32px; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--navy);
}
.static-section h2 {
  margin: 28px 0 10px;
  padding-top: 16px;
  border-top: 2px solid var(--navy);
  font-weight: 700; font-size: 20px; line-height: 1.2;
  color: var(--navy);
}
.static-section p {
  margin: 0 0 14px;
  font-size: 16px; line-height: 1.55; color: var(--navy);
}
.static-section .lede { font-size: 18px; font-weight: 500; margin-bottom: 22px; }
.static-section ul { padding-left: 22px; margin: 0 0 18px; }
.static-section ul li { margin-bottom: 6px; line-height: 1.55; }
.static-section .thanks-card {
  background: var(--pink-pale);
  border-left: 4px solid var(--pink-deep);
  padding: 24px;
  margin: 22px 0;
}
.static-section .thanks-card p { margin: 0 0 12px; }
.static-section .thanks-card p:last-child { margin-bottom: 0; }

/* ---------- My Schedule page ---------- */
.schedule-header {
  background: var(--white);
  padding: 26px 0 18px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.schedule-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--pink-deep);
}
.schedule-header h1 {
  margin: 0 0 6px;
  font-weight: 800; font-size: 28px; line-height: 1.1;
  letter-spacing: -0.015em;
}
.schedule-header .meta {
  margin: 0; font-size: 14px; color: var(--muted);
}
.schedule-header .actions { margin-top: 14px; }
.schedule-header .actions .cta-btn {
  display: inline-block;
  background: var(--navy); color: var(--white);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 16px;
  text-decoration: none; border: 0;
}
.schedule-header .actions .cta-btn:hover { background: var(--pink-deep); }

/* ====================================================================
   Homepage v1.1 – bigger hero, stats strip, season timeline, picks
   ==================================================================== */

/* ---------- Hero v2 (split: title + countdown) ---------- */
.home-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  padding: 44px 0 36px;
  align-items: start;   /* let each column be its natural height */
}
.hh-title-wrap { display: flex; flex-direction: column; justify-content: center; }
.hh-title {
  margin: 0 0 18px;
  font-weight: 900;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--navy);
}
/* The @ in the homepage title – italic, pink, a tactile visual hook */
.hh-title .hh-at {
  color: var(--pink-deep);
  font-style: italic;
  font-weight: 900;
  margin-right: 0.05em;
}
.hh-lede {
  margin: 0;
  font-size: 18px; line-height: 1.5;
  color: var(--navy);
  font-weight: 500;
  max-width: 38em;
}

/* Front-and-centre 'Add an event' CTA – sits under the lede on the homepage
   hero. Same pink-fill / navy-on-hover treatment as the other primary CTAs,
   with the + glyph from the top nav for visual consistency. The whole row
   is given marginTop so it reads as a separate action, not body copy. */
.hh-add-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  align-self: flex-start;     /* don't stretch in flex column */
  background: var(--pink-deep); color: var(--white);
  padding: 14px 22px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--pink-deep);
  transition: background 0.15s ease, color 0.15s ease;
}
.hh-add-cta:hover {
  background: var(--white); color: var(--pink-deep);
}
.hh-add-cta svg { display: block; }

.hh-countdown {
  background: var(--pink-pale);
  border-left: 4px solid var(--pink-deep);
  padding: 22px 24px 24px;
  display: flex; flex-direction: column;
  /* No align-self:stretch – let the card be its natural content height. */
}

/* Post-season state: the conference season is over (after the last
   conference's end date). Show a warm sign-off + a subscribe nudge
   instead of leaving the card empty. */
.hh-countdown-postseason .hhc-end-wave {
  font-size: 48px;
  line-height: 1;
  margin: 16px 0 8px;
}
.hh-countdown-postseason .hhc-end-title {
  margin: 0 0 12px;
  font-weight: 900; font-size: 32px; line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.hh-countdown-postseason .hhc-end-sub {
  margin: 0 0 22px;
  font-size: 15px; line-height: 1.5;
  color: var(--navy);
  font-weight: 500;
}
.hhc-kicker {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 12px;
}
.hhc-party-row {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 4px;
}
.hhc-party {
  display: block;
  font-weight: 900; font-size: 32px; line-height: 1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 0;
}
/* Party-coloured underline accent on the conference name */
.hhc-party { padding-bottom: 8px; border-bottom: 3px solid var(--navy); }
.hhc-reform       { border-bottom-color: var(--reform); }
.hhc-libdem       { border-bottom-color: var(--libdem); }
.hhc-labour       { border-bottom-color: var(--labour); }
.hhc-conservative { border-bottom-color: var(--conservative); }
.hhc-green        { border-bottom-color: var(--green); }

.hhc-meta {
  display: block;
  margin-top: 10px;
  font-size: 14px; color: var(--muted);
}
.hhc-bignum {
  margin: 22px 0 18px;
  display: flex; align-items: baseline; gap: 10px;
}
.hhc-num {
  font-weight: 900; font-size: 64px; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pink-deep);
}
.hhc-label {
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy);
}
.hhc-live {
  margin: 18px 0 18px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; color: var(--navy);
}
.hhc-livedot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #E03;
  animation: pulse 1.4s ease-in-out infinite;
}
.hhc-cta {
  /* Removed margin-top:auto: the card no longer stretches, so we want the
     CTA to sit naturally below the bignum + eventcount rather than pinned
     to a stretched-card bottom. */
  margin-top: 6px;
  display: inline-block;
  background: var(--pink-deep); color: var(--white);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 18px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s ease;
}
.hhc-cta:hover { background: var(--navy); }

/* Event count line – small muted text under the day count, gives the visitor
   a sense of how filled-in the next-up conference already is. */
.hhc-eventcount {
  display: block;
  margin: -6px 0 14px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* "Rest of the season" mini-strip – sits below the CTA, gives the whole
   season picture from the homepage. Each row links to the relevant
   conference page. */
.hhc-rest {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 20, 55, 0.12);
}
.hhc-rest-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pink-deep);
}
.hhc-rest-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.hhc-rest-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid rgba(20, 20, 55, 0.06);
  transition: color 0.15s ease;
}
.hhc-rest-list li:last-child .hhc-rest-link { border-bottom: 0; }
.hhc-rest-link:hover { color: var(--pink-deep); }
.hhc-rest-link .party-icon { flex-shrink: 0; }
.hhc-rest-name {
  flex: 1;
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
}
.hhc-rest-days {
  font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--pink-deep);
  letter-spacing: 0.02em;
}

/* ---------- Stats strip (full-bleed band) ---------- */
.stats-strip {
  background: var(--navy);
  color: var(--white);
  padding: 22px 0;
}
.stats-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 760px; margin: 0 auto;
  padding: 0 16px;
}
.stat-item {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.stat-num {
  font-weight: 900; font-size: 40px; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pink-bright);
}
.stat-label {
  margin-top: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
}

/* ---------- Season timeline ---------- */
.section-h2.alt {
  margin: 40px 0 20px;
  padding-top: 18px;
  border-top: 2px solid var(--navy);
  font-weight: 800; font-size: 24px; line-height: 1.2;
  letter-spacing: -0.005em; color: var(--navy);
}
.tl-row {
  display: flex; align-items: stretch;
  width: 100%;
  margin: 8px 0 8px;
  min-height: 130px;
}
.tl-block {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--navy);
  padding: 0 8px;
  position: relative;
  text-align: center;
  min-width: 70px;
}
.tl-bar {
  display: block; height: 12px; width: 100%;
  background: var(--navy);
  margin-bottom: 12px;
}
.tl-reform       .tl-bar { background: var(--reform); }
.tl-libdem       .tl-bar { background: var(--libdem); }
.tl-labour       .tl-bar { background: var(--labour); }
.tl-conservative .tl-bar { background: var(--conservative); }
.tl-green        .tl-bar { background: var(--green); }

.tl-name {
  display: block;
  font-weight: 800; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--navy);
}
.tl-dates {
  display: block;
  margin-top: 2px;
  font-size: 13px; font-weight: 600;
  color: var(--navy);
}
.tl-city {
  display: block;
  margin-top: 4px;
  font-size: 12px; color: var(--muted);
}
.tl-count {
  display: block;
  margin-top: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pink-deep);
}
.tl-block:hover .tl-name { color: var(--pink-deep); }
.tl-block:hover .tl-bar { opacity: 0.85; }

.tl-gap {
  display: flex; align-items: center; justify-content: center;
  border-top: 1px dashed var(--hairline-strong);
  margin-top: 5px;
  height: 12px;
  position: relative;
  min-width: 12px;
}
.tl-gap-label {
  background: var(--white);
  padding: 0 6px;
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  position: relative; top: -1px;
}
/* Hide gap label if there's not enough room (flex shrinks) */
.tl-gap[style*="flex: 2 "] .tl-gap-label,
.tl-gap[style*="flex: 3 "] .tl-gap-label,
.tl-gap[style*="flex: 4 "] .tl-gap-label { display: none; }

.tl-axis {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}

/* =================================================================
   "I'm attending" feature – UI hooks split across:
     - homepage: a side-by-side pair of hero CTAs (Add event + Attending)
     - conf page: a subtle inline line below the page meta, NOT big buttons
     - modal: shared multi-conference form + per-conf list
   ================================================================= */

/* ---- Conf-page: subtle inline action lines (attending + add-event) ---- */
.conf-actions {
  margin: 6px auto 18px;
  padding: 0 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.conf-actions .attending-line { margin: 0; padding: 0; }
.attending-line {
  margin: 6px auto 18px;
  padding: 0 16px;
  font-size: 14px; line-height: 1.5;
  color: var(--muted);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
}
.attending-line .attending-icon {
  font-size: 16px;
  margin-right: 2px;
}
.attending-line .attending-action {
  color: var(--pink-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--pink-deep);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.attending-line .attending-action:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.attending-line .attending-arrow {
  color: var(--pink-deep);
  font-weight: 700;
  margin-left: 2px;
}
.attending-line .attending-sep { color: var(--muted); }
.attending-line .attending-loading { font-style: italic; }

/* ---- Homepage hero CTA pair ---- */
.hh-cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 22px;
  align-self: flex-start;
}
.hh-att-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--navy);
  padding: 14px 22px;
  font: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hh-att-cta:hover { background: var(--navy); color: var(--white); }
.hh-cta-row .hh-add-cta { margin-top: 0; }   /* override the standalone margin */

/* ---------- Modal infrastructure ---------- */
.att-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 20, 55, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px 20px;
  overflow-y: auto;
  animation: att-fade-in 0.15s ease-out;
}
.att-modal {
  background: var(--white);
  width: 100%; max-width: 560px;
  padding: 32px 32px 28px;
  position: relative;
  box-shadow: 0 16px 50px rgba(20, 20, 55, 0.3);
  animation: att-slide-in 0.2s ease-out;
}
.att-modal-list { max-width: 640px; }
body.att-modal-open { overflow: hidden; }
.att-close {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px;
  background: transparent; border: 0;
  font-size: 24px; font-weight: 700; line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.att-close:hover { color: var(--navy); }
.att-modal-kicker {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 8px;
}
.att-modal-title {
  font-size: 24px; font-weight: 900;
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--navy);
}
.att-modal-sub {
  font-size: 14px; line-height: 1.5;
  color: var(--muted);
  margin: 0 0 20px;
}
@keyframes att-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes att-slide-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Form modal ---------- */
.att-form { display: flex; flex-direction: column; gap: 14px; }
.att-field {
  display: flex; flex-direction: column; gap: 4px;
}
.att-field-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
}
.att-field input {
  font: inherit;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  color: var(--navy);
}
.att-field input:focus,
.att-field textarea:focus {
  outline: 2px solid var(--pink-deep);
  outline-offset: -2px;
  border-color: var(--pink-deep);
}
.att-field textarea {
  font: inherit;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  color: var(--navy);
  resize: vertical;
  min-height: 100px;
}
/* Correction modal: the title is the event's own title (potentially long).
   Give it a smaller size + tighter line-height so 2-3 line titles still
   feel proportioned, not shouty. */
.att-modal-title.att-modal-title-correction {
  font-size: 18px;
  line-height: 1.3;
}
.att-field-help {
  font-size: 12px; color: var(--muted);
  line-height: 1.4;
}
.att-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: 14px; color: var(--navy);
  cursor: pointer;
}
.att-check input { margin-top: 2px; accent-color: var(--pink-deep); flex-shrink: 0; }

/* Multi-conference checklist (homepage modal + pre-selected from conf pages).
   Five cards in a grid; the native checkbox is hidden, the whole card is the
   click target, and checked-state gives the card a party-coloured highlight. */
.att-field-label-block { display: block; margin-bottom: 8px; }
.att-conf-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}
.att-conf-card {
  position: relative;
  padding: 12px 8px;
  background: var(--white);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.att-conf-card input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.att-conf-card-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center;
}
.att-conf-card .att-conf-name {
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
}
.att-conf-card .att-conf-meta {
  font-size: 10px; color: var(--muted);
  line-height: 1.3;
}
.att-conf-card:hover { border-color: var(--navy); transform: translateY(-1px); }
/* Checked state: party-coloured border + pink-pale wash + checkmark */
.att-conf-card:has(input:checked) {
  border-width: 2px;
  background: var(--pink-pale);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20, 20, 55, 0.08);
}
.att-conf-card.att-conf-reform:has(input:checked)       { border-color: var(--reform); }
.att-conf-card.att-conf-libdem:has(input:checked)       { border-color: var(--libdem); }
.att-conf-card.att-conf-labour:has(input:checked)       { border-color: var(--labour); }
.att-conf-card.att-conf-conservative:has(input:checked) { border-color: var(--conservative); }
.att-conf-card.att-conf-green:has(input:checked)        { border-color: var(--green); }
.att-conf-card:has(input:checked)::after {
  content: '✓';
  position: absolute; top: 4px; right: 6px;
  font-size: 14px; font-weight: 900;
  color: var(--pink-deep);
}
@media (max-width: 720px) {
  .att-conf-grid {
    grid-template-columns: 1fr 1fr;   /* 2 per row on phones */
    gap: 6px;
  }
  /* List-modal version (when modal-list is also multi-using): keep single column */
}
.att-modal-multi { max-width: 620px; }
.att-form-actions {
  display: flex; align-items: center; gap: 16px;
  margin-top: 6px;
}
.att-submit {
  background: var(--pink-deep); color: var(--white);
  border: 0;
  padding: 14px 22px;
  font: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.att-submit:hover { background: var(--navy); }
.att-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.att-form-err {
  margin: 0;
  font-size: 13px; color: #c4133e;
  flex: 1;
}

/* ---------- List modal ---------- */
.att-search {
  font: inherit;
  width: 100%;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  margin-bottom: 16px;
  color: var(--navy);
}
.att-search:focus {
  outline: 2px solid var(--pink-deep);
  outline-offset: -2px;
  border-color: var(--pink-deep);
}
.att-list {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 50vh; overflow-y: auto;
  background: var(--hairline);    /* shows as the 1px row dividers */
}
.att-list-loading, .att-list-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 14px; color: var(--muted);
  background: var(--white);
}
.att-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 4px;
  background: var(--white);
}
.att-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em;
}
.att-row-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
/* "This is you" – when the attendee record matches one of the user's own
   groupIds (localStorage), give the row a soft pink wash + show a badge
   next to the name. Helps the user instantly find their own entry in a
   long list, esp. on a phone. */
.att-row.att-row-me {
  background: var(--pink-pale);
  border-left: 3px solid var(--pink-deep);
  padding-left: 12px;
}
.att-name-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.att-me-badge {
  display: inline-block;
  background: var(--pink-deep); color: var(--white);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
.att-name {
  font-weight: 800; font-size: 15px;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.att-meta-line {
  font-size: 13px; line-height: 1.4;
  color: var(--muted);
}
.att-meta-line .att-role { color: var(--navy); font-weight: 600; }
.att-meta-line .att-inst { color: var(--muted); }
.att-contact {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.att-email {
  font-size: 12px; color: var(--pink-deep);
  text-decoration: none;
  border-bottom: 1px dotted var(--pink-deep);
}
.att-email:hover { color: var(--navy); border-bottom-color: var(--navy); }
.att-linkedin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: #0A66C2;          /* LinkedIn brand blue */
  color: var(--white);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 3px;
  transition: opacity 0.15s ease;
}
.att-linkedin-badge:hover { opacity: 0.85; }
.att-linkedin-badge svg { display: block; }

/* ---------- Confirmation toast (after magic-link click) ---------- */
.att-toast {
  position: fixed;
  bottom: 90px; left: 50%;
  transform: translate(-50%, 20px);
  background: var(--navy); color: var(--white);
  padding: 14px 22px;
  font-size: 14px; font-weight: 600;
  z-index: 200;
  opacity: 0;
  box-shadow: 0 8px 30px rgba(20, 20, 55, 0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.att-toast-failed { background: #8b1c3b; }
.att-toast-in { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 720px) {
  .home-hero { grid-template-columns: 1fr; gap: 18px; padding: 32px 0 28px; }
  .hh-title { font-size: 36px; line-height: 1.05; }
  .hh-lede { font-size: 16px; }
  .hhc-num { font-size: 48px; }
  .stats-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .tl-row { flex-direction: column; min-height: 0; }
  .tl-block { padding: 14px 12px; border-left: 4px solid var(--navy); margin: 6px 0; flex: 0 0 auto !important; min-width: 0; text-align: left; }
  .tl-block .tl-bar { display: none; }
  .tl-reform       { border-left-color: var(--reform); }
  .tl-libdem       { border-left-color: var(--libdem); }
  .tl-labour       { border-left-color: var(--labour); }
  .tl-conservative { border-left-color: var(--conservative); }
  .tl-green        { border-left-color: var(--green); }
  .tl-gap { display: none; }
  .tl-axis { display: none; }
}

@media (max-width: 480px) {
  .site-header-inner { padding: 22px 14px 18px; }
  .he-influence-title { font-size: 28px; }
  .hero { padding: 28px 0 22px; }
  .hero h1 { font-size: 28px; }
  .hh-title { font-size: 30px; }
  .page-title h1 { font-size: 26px; }
  .event-card { grid-template-columns: 58px 1fr 28px; gap: 12px; }
  .event-card .date-pill .dow { font-size: 17px; }
  .event-card .date-pill .day { font-size: 13px; }
  .event-card .title { font-size: 15px; }
  .nav-link { padding: 12px 14px; font-size: 11px; }
  .form-section h1 { font-size: 26px; }
  .static-section h1 { font-size: 26px; }
  .stat-num { font-size: 32px; }
}

/* ===================================================================
   Author self-edit affordance
   ===================================================================

   Each event card carries a small "actions" row at the bottom of its body
   with one link. Two states:

   - Recognised author (.edit-your-event):
       Their localStorage carries an edit token matching this event.
       Show a prominent pink CTA – they can jump straight to the edit
       page with no email round-trip.

   - Generic (.did-you-submit):
       Anyone else. Show a small muted link that opens the email-recovery
       modal. Most viewers will never click this; it's there for the
       authors-on-new-devices case.

   Placement: inside .event-card .body, after .meta-pills.
*/
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding-top: 8px;
}
.edit-your-event {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink-deep);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.edit-your-event:hover { text-decoration: underline; }
.did-you-submit {
  font-size: 12px;
  color: #8888a0;
  text-decoration: none;
  font-weight: 500;
}
.did-you-submit:hover { color: var(--pink-deep); text-decoration: underline; }

/* ===================================================================
   Cancelled event treatment

   Card with a cancelledByAuthor timestamp gets:
   - Strikethrough title
   - Reduced opacity on the body (visual demotion)
   - The CANCELLED pill comes first in meta-pills (rendered by events.js)
*/
.event-card.event-cancelled .title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.event-card.event-cancelled .body { opacity: 0.78; }
.event-card.event-cancelled .date-pill { opacity: 0.65; }

/* ===================================================================
   Edit page (/edit-event.html) – locked-field display, status banners,
   cancel section.

   The edit page reuses the form-section styling from add.html. These
   classes are the new bits unique to editing.
*/
.locked-display {
  display: inline-block;
  padding: 10px 14px;
  background: #f4f4f9;
  border: 1px solid #e4e4ec;
  border-radius: 4px;
  font-size: 14px;
  color: #6b6b88;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
}
.edit-banner {
  padding: 14px 18px;
  margin: 16px 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}
.edit-banner-loading { background: #f4f4f9; color: #6b6b88; }
.edit-banner-error { background: #FFE5E5; color: #A30000; font-weight: 700; }
.edit-banner-saved { background: #DFF5E0; color: #0A6A1F; font-weight: 700; }
.edit-banner-warn  {
  background: #FFE5F2; color: #A30062;
  border-left: 4px solid var(--pink);
}

.cancel-event-section {
  margin-top: 36px;
  padding: 22px 24px;
  border: 2px solid #FFE5E5;
  background: #FFF8F8;
  border-radius: 6px;
}
.cancel-event-section h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #A30000;
}
.cancel-event-section p {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b6b88;
}
.cancel-btn-action {
  background: #fff;
  color: #A30000;
  border: 2px solid #A30000;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 3px;
}
.cancel-btn-action:hover {
  background: #A30000;
  color: #fff;
}
.cancel-btn-action.is-uncancel {
  border-color: #0A6A1F;
  color: #0A6A1F;
}
.cancel-btn-action.is-uncancel:hover {
  background: #0A6A1F;
  color: #fff;
}
.cancel-btn-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===================================================================
   About page (/about.html) – visual upgrade

   The page is a mix of widths:
   - Hero + cards + logo strip: wider, more breathing room (features)
   - "What counts" + "Who runs": narrow reading column (reference text)
   - Subscribe callout: medium width, prominent CTA (conversion)

   This rhythm-of-widths is itself a visual cue: wide = headline, narrow
   = footnote, panel = action. Reusing the homepage's pink-@ glyph and
   the conf-strip's white-pill treatment ties the page to the rest of
   the site's brand language.
   =================================================================== */

/* ---------- Hero block ---------- */
/* About-page width system: ONE width for the "feature moment" (cards
   section at 920px), ONE width for everything else (760px). Keeps the
   left/right edges of every section consistent down the page so the
   reader's eye lands in the same place each time, rather than each
   section subtly shifting. Two widths = "intentional rhythm"; four
   widths = "wonky". */
.about-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 0 32px;
}
.about-hero-title {
  margin: 0 0 18px;
  font-weight: 900;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.about-hero-title .at-glyph {
  color: var(--pink-deep);
  font-style: italic;
  font-weight: 900;
  margin-right: 0.04em;
}
.about-hero-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 38em;
}

/* ---------- 4-up card grid ('How it works') ---------- */
.about-cards-section {
  max-width: 920px;
  margin: 28px auto 8px;
}
.about-section-h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.about-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.about-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 22px 22px 20px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.about-card:hover {
  border-color: var(--pink-deep);
  box-shadow: 0 2px 12px rgba(229, 0, 143, 0.08);
}
.about-card-icon {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 14px;
}
.about-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.about-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.about-card a {
  color: var(--pink-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.about-card a:hover { color: var(--navy); }
.about-cards-foot {
  margin: 22px auto 0;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  max-width: 560px;
}

/* ---------- About info block ('What counts' / 'Who runs') ----------
   Uses .static-section as the base for narrow-text styling, with these
   overrides to remove the section's outer padding (the surrounding
   wide sections already provide vertical rhythm) and bump the max-width
   from .static-section's default 640px up to the page-wide 760px so
   the left edge aligns with hero and subscribe-card above and below. */
.about-info {
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0 auto;
  max-width: 760px;
}

/* ---------- Subscribe callout ---------- */
.subscribe-card {
  margin: 48px auto 60px;
  padding: 34px 32px 30px;
  background: var(--pink-pale);
  border-left: 6px solid var(--pink-deep);
  border-radius: 4px;
  max-width: 760px;
}
.subscribe-card-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink-deep);
}
.subscribe-card-title {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.015em;
}
.subscribe-card-body {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
  max-width: 38em;
}
.subscribe-card-cta {
  display: inline-block;
  background: var(--pink-deep);
  color: var(--white);
  padding: 14px 24px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--pink-deep);
  transition: background 0.15s ease, color 0.15s ease;
}
.subscribe-card-cta:hover {
  background: var(--white);
  color: var(--pink-deep);
}
.subscribe-card-meta {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- About page responsive ---------- */
@media (max-width: 720px) {
  .about-hero { padding: 28px 0 22px; }
  .about-hero-title { font-size: 32px; line-height: 1.1; }
  .about-cards { grid-template-columns: 1fr; gap: 12px; }
  .subscribe-card { padding: 26px 22px 24px; margin: 36px auto 44px; }
  .subscribe-card-title { font-size: 24px; }
}