/* methstreams.vg — one dark theme, explicit colours, no light mode.
 *
 * Black top bar, #222 page, grey section headings over slate sport cards on
 * the home page (the old MethStreams look), and the crackstreams.pl board
 * rules below for the sport pages and the event page. The board rules read
 * the tokens in :root only; the chrome (bar, home, footer, static pages) uses
 * literals because it sits outside any token scope that could change.
 */

:root {
  --bg:         #222222;
  --surface:    #2b3033;
  --surface2:   #343a3e;
  --border:     #3d4549;
  --text:       #eef1f2;
  --muted:      #a7b1b6;
  --accent:     #4aa79a;
  --live:       #ff6b6b;
  --good:       #5cc98f;
  --tile:       #e9edef;
  --accent-rgb: 74,167,154;
  --live-rgb:   255,107,107;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100vh; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #222222;
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
strong { color: var(--text); font-weight: 700; }

/* ------------------------------------------------------------- top bar */
.mtop{background:#000000;border-bottom:1px solid #141414}
.mtop-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:0 18px;padding:0 16px;min-height:52px}
.mbrand{color:#ffffff;font-weight:700;font-size:1.3rem;letter-spacing:-.01em;white-space:nowrap;flex:0 0 auto}
.mnav{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mnav::-webkit-scrollbar{display:none}
.mnav-a{display:inline-flex;align-items:center;min-height:52px;color:#c2c9cd;font-size:.86rem;font-weight:500;padding:0 9px;white-space:nowrap;border-bottom:2px solid transparent;flex:0 0 auto}
.mnav-a:hover{color:#ffffff}
.mnav-a.on{color:#ffffff;border-bottom-color:#4aa79a}
.mtop-r{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.msearch{height:32px;padding:0 12px;border-radius:4px;border:1px solid #3a3f42;background:#151718;color:#c2c9cd;font:inherit;font-size:.82rem;cursor:pointer}
.msearch:hover,.msearch:focus-visible{color:#ffffff;border-color:#4aa79a}
.mtop :focus-visible{outline:2px solid #4aa79a;outline-offset:2px}
@media(max-width:1000px){
  .mtop-in{flex-wrap:wrap;padding:6px 12px 0}
  .mtop-r{margin-left:auto}
  .mnav{order:3;flex:1 1 100%;margin:0 -12px;padding:0 3px;border-top:1px solid #141414}
  .mnav-a{min-height:44px;padding:0 10px}
  .mtop-r .mnav-a{min-height:40px}
}

/* ------------------------------------------------------------ home page */
.mh{max-width:1240px;margin:0 auto;padding:24px 16px 40px;display:grid;
  grid-template-columns:minmax(0,65fr) minmax(0,35fr);grid-template-areas:"cards side" "text side";gap:0 32px;align-items:start}
.mh-cards{grid-area:cards;min-width:0}
.mh-side{grid-area:side;min-width:0}
.mh-text{grid-area:text;min-width:0}
.mh-h1{color:#8a9499;font-size:1.05rem;font-weight:700;margin:0 0 18px}
.hs{margin:0 0 28px}
.hs-h{color:#8a9499;font-size:1.32rem;font-weight:700;line-height:1.3;padding-bottom:9px;border-bottom:1px solid #3a4246;margin:0 0 14px}
.hs-card{display:flex;align-items:center;gap:14px;background:#5b6b73;border-radius:6px;padding:14px 18px;min-height:86px;transition:background .12s ease}
.hs-card:hover{background:#687b84}
.hs-card:focus-visible{outline:2px solid #4aa79a;outline-offset:2px}
.hs-ic{flex:0 0 56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.hs-ic img{width:50px;height:50px}
.hs-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding-right:56px}
.hs-t{color:#ffffff;font-weight:700;font-size:1.12rem;line-height:1.3}
.hs-s{color:#ffffff;font-size:.95rem}
.hs-more{color:#a7b1b6;font-size:.9rem;margin:-6px 0 28px}
.hs-more a{color:#4aa79a;font-weight:600}

.mside{padding:4px 0 24px}
.mside-k{color:#4aa79a;font-weight:700;font-size:1.05rem;margin:0 0 4px}
.mside-h{color:#d0d5d8;font-size:2rem;font-weight:700;line-height:1.2;margin:0 0 14px}
.mside p{color:#b9c1c5;font-size:.96rem;margin:0 0 12px}
.mside-blog{margin-top:22px;border-top:1px solid #3a4246;padding-top:16px}
.mside-blog h2{color:#8a9499;font-size:1rem;font-weight:700;margin:0 0 10px}
.mside-blog a{display:block;color:#d0d5d8;font-size:.92rem;padding:7px 0;border-bottom:1px solid #2e3437}
.mside-blog a:hover{color:#4aa79a}
.mside-blog a.all{color:#4aa79a;border-bottom:0;font-weight:600}

@media(max-width:900px){
  .mh{grid-template-columns:minmax(0,1fr);grid-template-areas:"cards" "side" "text";padding:18px 12px 32px}
  .mside-h{font-size:1.6rem}
}
@media(max-width:480px){
  .hs-h{font-size:1.08rem}
  .hs-card{padding:12px 12px;gap:10px;min-height:76px}
  .hs-ic{flex-basis:42px;width:42px;height:42px}
  .hs-ic img{width:38px;height:38px}
  .hs-tx{padding-right:42px}
  .hs-t{font-size:1rem}
  .hs-s{font-size:.88rem}
}

/* ---------------------------------------------------------- sport pages */
.sp-h1{color:#8a9499;font-size:1.5rem;font-weight:700;line-height:1.3;padding-bottom:9px;border-bottom:1px solid #3a4246;margin:0 0 12px}
.sp-lead{color:#c3cacd;max-width:900px;margin:0 0 20px}
@media(max-width:480px){.sp-h1{font-size:1.2rem}}

/* =============================================================================
   CRACKSTREAMS.PL BOARD RULES. Every colour below resolves through the tokens
   in :root.
   ============================================================================= */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:1200px;margin:0 auto;padding:26px 18px 60px}
.ttl{font-size:1.55rem;font-weight:800;color:var(--text);text-align:center;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:20px}
.ttl.accent{color:var(--accent);text-align:left}
.lead{color:var(--muted);text-align:center;max-width:760px;margin:0 auto 14px;font-size:1rem}
.lead strong{color:var(--text)}
.live-inline{color:var(--live);font-weight:700;white-space:nowrap}
.empty{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px;color:var(--muted);text-align:center}
.empty strong{color:var(--text)}

/* ------------------------------------------------------------- day picker
   THREE DAYS — yesterday, today, tomorrow — and that is the whole site
   (owner, 2026-09-07). The seven-chip strip this replaces is gone, along with
   its .days/.day rules; nothing else in this file or in index.php refers to
   them any more. A real <select> inside a real <form method="get">: it works
   with JavaScript off (the Go button submits ?date=), and with JS the button
   hides and picking a day navigates on change. */
.daypick{display:flex;align-items:center;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.daypick-l{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.daypick-s{appearance:none;-webkit-appearance:none;min-height:40px;min-width:190px;
  padding:0 34px 0 14px;border-radius:9px;border:1px solid var(--border);
  background-color:var(--surface2);color:var(--text);font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;line-height:1.2;
  /* the chevron, drawn in CSS so no extra hex and no image request */
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.daypick-s:hover{border-color:var(--accent)}
.daypick-go{min-height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--accent);
  background:var(--accent);color:var(--bg);font:inherit;font-weight:800;font-size:.88rem;cursor:pointer}
.daypick-go:hover{background:var(--text);border-color:var(--text)}
.daypick.js .daypick-go{display:none}

.board-bar{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin:0 0 16px}
.board-day{font-weight:800;color:var(--text);font-size:1.05rem}
.board-n{color:var(--muted);font-size:.84rem;font-weight:600}

/* ------------------------------------------------------- league groups */
.board{display:flex;flex-direction:column;gap:24px}
.lg-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1rem;font-weight:800;color:var(--text);line-height:1.25;min-width:0}
.lg-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--tile);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lg-ic img{max-width:22px;max-height:22px;object-fit:contain;display:block}
.lg-name{min-width:0;overflow-wrap:anywhere}
.lg-c{color:var(--muted);font-weight:600;font-size:.82rem;white-space:nowrap}
.lg-c::before{content:"\00b7";margin-right:8px}
.lg-live{display:inline-flex;align-items:center;gap:6px;color:var(--live);font-size:.8rem;font-weight:700;white-space:nowrap}   /* 5.66:1 on the page ground */
.lg-n{margin-left:auto;color:var(--muted);font-weight:600;font-size:.78rem;white-space:nowrap}
.lg-rows{display:flex;flex-direction:column;gap:10px}

/* --------------------------------------------------- rows: one card, two grids */
.ev{display:grid;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:10px;padding:12px 16px;
  transition:background .12s ease,transform .12s ease,border-color .12s ease}
.ev:hover{background:var(--surface2);transform:translateY(-1px);border-left-color:var(--accent)}
.ev-match{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
.ev-plain{grid-template-columns:auto minmax(0,1fr) auto auto}
.ev-side{display:flex;align-items:center;gap:10px;min-width:0}
.ev-home{justify-content:flex-end;text-align:right}
.ev-crest,.ev-ic{flex:0 0 auto;width:40px;height:40px;border-radius:9px;background:var(--tile);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ev-crest img{max-width:32px;max-height:32px;object-fit:contain;display:block}
.ev-ic img{max-width:28px;max-height:28px;object-fit:contain;display:block}
.ev-nm{min-width:0;font-weight:700;color:var(--text);font-size:.98rem;line-height:1.25;overflow-wrap:anywhere}
.ev-nm b{font-weight:inherit}
.ev-nm .nm-s{display:none}
.ev-rec{display:block;color:var(--muted);font-size:.74rem;font-weight:600}
.ev-t{min-width:0;font-weight:700;color:var(--text);font-size:.98rem;line-height:1.3;overflow-wrap:anywhere}
.ev-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:88px;text-align:center}
.ko{font-weight:800;color:var(--text);font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev-vs{color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.score{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:1.2rem;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.score i{font-style:normal;color:var(--muted);font-size:.9rem}
.clock{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:var(--muted);white-space:nowrap}
/* LIVE is never signalled by the edge alone (see the header note): the red left
   rule, the red clock text (5.22:1 on the card) and the pulsing dot all say it. */
.is-live{border-left-color:var(--live)}
.is-live .clock{color:var(--live)}
.is-post .score{color:var(--muted)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(var(--live-rgb),.6);animation:cs-pulse 1.6s ease-out infinite}
@keyframes cs-pulse{0%{box-shadow:0 0 0 0 rgba(var(--live-rgb),.6)}70%{box-shadow:0 0 0 7px rgba(var(--live-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--live-rgb),0)}}
.ev-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:.76rem;font-weight:800;white-space:nowrap}
/* ONE live chip for the board and the event page (event.php adds only layout).
   Dark text on the red, 5.66:1 — white on --live is 3.27:1 and misses AA. */
.ev-chip.live{background:var(--live);color:var(--bg)}
.ev-w{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:rgba(var(--accent-rgb),.14);color:var(--accent);font-weight:800;font-size:.82rem;white-space:nowrap;transition:background .12s ease,color .12s ease}
.ev-w i{font-style:normal}
.ev:hover .ev-w{background:var(--accent);color:var(--bg)}
/* A ROW WE KNOW HAS NO FEED still belongs on the board — a schedule lists the
   fixture whether or not anyone is carrying it, and its page still has the score,
   the ground and the form. What it must not do is promise a stream: an amber
   "Watch →" over a match no channel has picked up is the one dishonest thing the
   board was doing. Quiet pill, and it says "Details", so the word and the colour
   both change (never state by colour alone — the header rule). Suppression only
   happens when the variant cache is demonstrably warm; see cs_feed_counts(). */
.ev-w.ev-w-q{background:transparent;color:var(--muted);border:1px solid var(--border)}
.ev:hover .ev-w.ev-w-q{background:var(--surface2);color:var(--text);border-color:var(--border)}

/* ------------------------------------------------------------ headliners
   The strip of the day's biggest events, above the league blocks. It IS a .lg
   section — same header rules, same .lg-rows, same .ev cards — so everything
   here is the difference and nothing else: a panel around it and an amber
   heading. No new colour: --surface, --border and --accent are the tokens the
   rest of the sheet already uses, and the rows drop to --bg so they still read
   as cards inside the panel instead of surface-on-surface (text on --bg is
   16.34:1, better than the 15.07:1 they had on --surface).

   THE HOVER RULE IS NOT OPTIONAL. `.headliners .ev` and `.ev:hover` have the
   same specificity, and this block sits after the row rules, so without the
   second line below a headline row would lose its hover state entirely — the
   one thing on a board of links that must not go quiet. */
.headliners{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.headliners .lg-name{color:var(--accent)}
.headliners .ev{background:var(--bg)}
.headliners .ev:hover{background:var(--surface2)}

/* ----------------------------------------------------------- more events
   The youth / reserve fixtures, folded away at the foot of the board (owner,
   2026-09-08: they kicked off earliest, so they sat above everything worth
   watching). A real <details>, so it opens with no JavaScript at all; the
   search script only reaches in to open it on a match.

   NO NEW COLOUR AND NO NEW SHAPE: the panel is the .headliners panel's rules
   (--surface, --border, 12px) and the rows drop to --bg inside it for the same
   reason they do there — surface-on-surface reads as one slab, and text on --bg
   is 16.34:1 against 15.07:1. THE HOVER RULE IS NOT OPTIONAL for the same
   reason it is not optional there: `.more-b .ev` and `.ev:hover` and this block
   sits after the row rules, so without it a demoted row would lose its hover.

   NO MARKER, NO CURSOR, NO HOVER COLOUR (owner, 2026-09-08: "no need to hide it
   just list more event and thats all"). This was a <details> with a rotating
   caret; it is now a plain <section> and .more-s is a heading rather than a
   control. Everything that advertised it as clickable is gone with it — a caret
   over something that does not open is worse than no caret. The disclosure's
   list-style/::-webkit-details-marker suppressors went too: there is no
   <summary> left for a browser to draw a triangle on. */
.more{background:var(--surface);border:1px solid var(--border);border-radius:12px}
.more-s{display:flex;align-items:center;gap:10px;
  padding:14px 16px;font-size:1rem;font-weight:800;color:var(--text);line-height:1.25}
.more-t{min-width:0;overflow-wrap:anywhere}
.more-n{margin-left:auto;color:var(--muted);font-weight:600;font-size:.78rem;white-space:nowrap}
.more-b{display:flex;flex-direction:column;gap:20px;padding:0 16px 16px}
/* .more-w removed 2026-09-08 with the paragraph it styled — the owner cut the
   explanatory line under "More events". No element carries this class now. */
.more-b .ev{background:var(--bg)}
.more-b .ev:hover{background:var(--surface2)}

/* ------------------------------------------------------------------ seo */
.seo{margin-top:34px;padding-top:26px;border-top:1px solid var(--border)}
.seo h2{color:var(--text);font-size:1.3rem;font-weight:800;margin:22px 0 10px}
.seo h2:first-child{margin-top:0}
.seo h3{color:var(--text);font-size:1.02rem;font-weight:800;margin:16px 0 6px}
.seo p{color:var(--muted);margin-bottom:12px;max-width:920px}
.seo ul,.seo ol{color:var(--muted);margin:0 0 14px;padding-left:24px;max-width:900px}
.seo li{margin-bottom:6px}
.seo strong{color:var(--text)}
.seo a{color:var(--accent);font-weight:600}
.seo a:hover{text-decoration:underline}



/* ---- search overlay ---------------------------------------------------- */
.smodal{display:none;position:fixed;inset:0;z-index:9999;padding:24px 16px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(2px)}
.smodal.on{display:flex;align-items:flex-start;justify-content:center}
.smodal-box{width:100%;max-width:620px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.smodal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 12px}
.smodal-t{font-size:1.15rem;font-weight:800;color:var(--text)}
.smodal-s{font-size:.8rem;color:var(--muted);margin-top:2px}
.smodal-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:1.6rem;
  line-height:1;cursor:pointer;font-family:inherit;padding:0 2px}
.smodal-x:hover{color:var(--text)}
.smodal-in{margin:0 18px;height:44px;border-radius:10px;border:1px solid var(--accent);
  background:var(--bg);color:var(--text);padding:0 14px;font-size:1rem;outline:none;font-family:inherit}
.smodal-in::placeholder{color:var(--muted)}
.smodal-note{padding:10px 18px 0;color:var(--muted);font-size:.85rem}
/* The list scrolls, the box does not — so the input stays put while results move. */
.smodal-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 18px 18px;
  display:flex;flex-direction:column;gap:8px}
.sr{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;
  text-decoration:none;color:var(--text);border:1px solid transparent}
.sr:hover{background:var(--surface2);border-color:var(--border)}
.sr-th{position:relative;flex:0 0 auto;width:104px;height:60px;border-radius:8px;overflow:hidden;
  background:var(--bg);display:flex;align-items:center;justify-content:center}
.sr-th img{width:100%;height:100%;object-fit:cover;display:block}
.sr-when{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:6px;
  background:rgba(0,0,0,.72);color:#fff;font-size:.7rem;font-weight:700;white-space:nowrap}
.sr-when.on{background:var(--live,#e0263c)}
.sr-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-t{font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.sr-g{font-size:.8rem;color:var(--muted)}
@media(max-width:520px){
.smodal{padding:12px 10px}
.sr-th{width:78px;height:46px}
.sr-t{font-size:.88rem}
}
.is-search-hidden{display:none !important}
.search-empty{display:none;padding:16px 18px;margin-top:10px;color:var(--muted);text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.92rem}
.search-empty.on{display:block}


@media(max-width:600px){
  .ttl{font-size:1.3rem}

  /* 375px budget: 347 inside .wrap, minus row padding, three 6px gaps, the
     30px chevron and a FIXED 84px middle leaves ~97px per side — 63px of name
     beside a 28px crest. The middle is fixed, not auto with a minimum: a
     kick-off cell measured 54px and a live cell ("In Progress" + pulse) 80px,
     so crests jogged 13px between one row and the next inside a group. Names
     longer than that box are handled server-side (index.php's phone label
     swaps a long single word for the abbr); hyphens:auto is the backstop. */
  .ev{padding:10px;gap:6px}
  .ev-side{gap:6px}
  .ev-crest,.ev-ic{width:28px;height:28px;border-radius:7px}
  .ev-crest img{max-width:22px;max-height:22px}
  .ev-ic img{max-width:20px;max-height:20px}
  .ev-nm{font-size:.82rem;hyphens:auto;-webkit-hyphens:auto}
  .ev-nm .nm-l{display:none}.ev-nm .nm-s{display:inline}.ev-nm.no-short .nm-l{display:inline}
  .ev-rec{display:none}
  .ev-t{font-size:.9rem}
  .ev-mid{width:84px;min-width:84px}
  .ko{font-size:.84rem}
  .score{font-size:1.02rem}
  /* SCOPED TO A BOARD ROW. This collapse exists for the board's dense 71px rows,
     where 84px of "Watch →" beside a crest, a name and a score does not fit at
     375px. event.php reuses .ev-w inside its 77px feed rows, which have a whole
     column to themselves — and it was inheriting this, so every row on a match
     page showed a bare 30px arrow with the word hidden. `.ev .ev-w`, not `.ev-w`.
     (The event page's rows also carry an aria-label naming the channel and the
     destination, which is what the hidden word cost a screen reader.) */
  .ev .ev-w{padding:0;width:30px;height:30px;justify-content:center;border-radius:50%}
  .ev .ev-w span{display:none}
  .lg-n{display:none}
  .lg-h{font-size:.94rem}
  .board-day{font-size:.98rem}
  /* 44px tap targets for the day picker; Go is the only way to change day
     with scripting off. */
  .daypick-s{flex:1 1 auto;min-width:0;min-height:44px}
  .daypick-go{min-height:44px}
}


/* ------------------------------------------------------ methstreams.vg
   The board on the dark page: .wrap is transparent, rows are --surface. */
.wrap{background:transparent}
.lg-ic,.ev-crest,.ev-ic{border:1px solid #c9d0d3}
.headliners .ev,.more-b .ev{background:var(--bg)}
.headliners .ev:hover,.more-b .ev:hover{background:var(--surface2)}

/* Long copy under the cards and the boards. */
.seo{margin-top:30px;padding-top:24px;border-top:1px solid #3a4246}
.seo h2{color:#d0d5d8;font-size:1.25rem;font-weight:700;margin:26px 0 10px}
.seo h2:first-child{margin-top:0}
.seo h3{color:#d0d5d8;font-size:1.02rem;font-weight:700;margin:18px 0 6px}
.seo p,.seo li{color:#c3cacd;max-width:900px}
.seo p{margin-bottom:12px}
.seo strong{color:#eef1f2}
.seo a{color:#4aa79a;font-weight:600}
.mh-text .seo{margin-top:6px}

/* ------------------------------------------------------------- footer */
.mft{background:#000000;border-top:1px solid #141414;margin-top:30px}
.mft-in{max-width:1240px;margin:0 auto;padding:24px 16px 28px;text-align:center}
.mft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.mft-links a{display:inline-flex;align-items:center;min-height:36px;color:#c2c9cd;font-size:.86rem}
.mft-links a:hover{color:#ffffff}
.mft-legal{margin-top:6px}
.mft-legal a{color:#8a9499}
.mft-note{color:#8a9499;font-size:.78rem;max-width:640px;margin:12px auto 0}
@media(max-width:600px){.mft-links a{min-height:44px}}

/* ------------------------------------------------------- static pages */
.pg{max-width:820px;margin:0 auto;padding:30px 16px 40px}
.pg h1{color:#8a9499;font-size:1.7rem;font-weight:700;line-height:1.25;padding-bottom:9px;border-bottom:1px solid #3a4246;margin:0 0 14px}
.pg .pg-lead{color:#d0d5d8;font-size:1.05rem;margin:0 0 22px}
.pg h2{color:#d0d5d8;font-size:1.2rem;font-weight:700;margin:26px 0 8px}
.pg p,.pg li{color:#c3cacd}
.pg p{margin:0 0 14px}
.pg ul{margin:0 0 14px;padding-left:22px}
.pg li{margin-bottom:6px}
.pg a{color:#4aa79a;text-decoration:underline;text-underline-offset:2px}
.pg-form{background:#2b3033;border:1px solid #3d4549;border-radius:8px;padding:20px;margin-top:8px}
.pg-row{margin-bottom:14px}
.pg-row label{display:block;color:#a7b1b6;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.pg-row input,.pg-row textarea{width:100%;padding:10px 12px;background:#222222;border:1px solid #3d4549;border-radius:6px;color:#eef1f2;font:inherit;font-size:.95rem}
.pg-row input:focus,.pg-row textarea:focus{outline:2px solid #4aa79a;outline-offset:1px;border-color:#4aa79a}
.pg-row textarea{min-height:140px;resize:vertical}
.pg-hint{color:#8a9499;font-size:.78rem;margin-top:4px}
.pg-btn{display:inline-block;padding:10px 20px;border-radius:6px;border:1px solid #4aa79a;background:#4aa79a;color:#111111;font:inherit;font-weight:700;cursor:pointer}
.pg-btn:disabled{opacity:.5;cursor:not-allowed}
.pg-status{margin-left:12px;font-size:.9rem;font-weight:600;color:#c3cacd}
.pg-status.ok{color:#5cc98f}
.pg-status.err{color:#ff6b6b}
.pg-nf{text-align:center;padding:60px 16px}
.pg-nf h1{border:0;padding:0}
.pg-nf a.b{display:inline-block;margin-top:8px;padding:10px 18px;border-radius:6px;background:#4aa79a;color:#111111;font-weight:700;text-decoration:none}

/* Phone match rows: crest above the name up to 420px, so long names keep
   the whole side. */
@media(max-width:420px){
  .headliners{padding:12px 8px}
  .ev-match .ev-side{flex-direction:column;justify-content:center;gap:4px;text-align:center}
  .ev-match .ev-home{flex-direction:column-reverse}
}