/* kc-plan-chrome.css
   ==========================================================================
   The shared chrome for the 41 donate-page candidates in /plan-versions/.

   WHY THIS FILE EXISTS. Every one of the 41 pages is a standalone document with
   its own inline CSS and its own token names, so the theme button had drifted
   into 41 slightly different buttons. Kaʻo's instruction on 2026-08-07 was that
   it must be "the same exact button, including hover and click states, as what
   exists at KeepCalm.org". One shared file is the only way that stays true after
   the next edit, so this is the single source and the pages link it.

   HOW THE BUTTON IS REPRODUCED. It is not re-designed here, it is transcribed
   from the live cascade in assets/cdo-watchtower.css, which builds the control
   in three passes that land on top of each other:

     line  317  the original labeled pill (base box, focus ring, svg fill)
     line 5510  the "simple, quiet sun/moon toggle" that replaced the pill,
                which is what actually ships: a 34px transparent circle
     line 5860  appearance:none, which kills the native button bevel that
                otherwise draws a half highlight on macOS
     line 6852  the ONE shared hover for every secondary nav control:
                language, theme, sign in, sign up

   The values are inlined as fallbacks after each var() because the plan pages do
   NOT load cdo-watchtower.css. Without a fallback the button would render with
   no border on a transparent background, which is to say invisible. The literals
   are the real tokens: light from :root, dark from html[data-mode="batman"].

   A DETAIL THAT LOOKS LIKE A BUG AND IS NOT. `.wt-batmode svg` sets `fill`, which
   overrides the `fill="currentColor"` presentation attribute on the moon and the
   `fill="none"` on the sun. That is why the icon does NOT take the green accent on
   hover the way the border and background do, and why the sun's inner circle is
   solid. That is how keepcalm.org looks today, so it is how it looks here. */

/* ---- tokens, so the button is self-contained on a page with no watchtower ---- */
:root {
  --kcpc-rule:        #e4ddcf;
  --kcpc-accent:      #2c5f4e;
  --kcpc-chip-bg:     #ede7da;
  --kcpc-toggle-fill: #283a31;
  --kcpc-link:        #2c5f4e;
}
html[data-mode="batman"] {
  --kcpc-rule:        #2c342f;
  --kcpc-accent:      #8fd0b4;
  --kcpc-chip-bg:     rgba(143, 208, 180, 0.10);
  --kcpc-toggle-fill: #b9c7b7;
  --kcpc-link:        #8fd0b4;
}

/* ---- the button itself ---- */
.wt-batmode {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--wt-rule, var(--kcpc-rule));
  border-radius: 999px;
  background: transparent;
  color: var(--wt-toggle-fill, var(--kcpc-toggle-fill));
  cursor: pointer;
  font: inherit;
  flex: none;
  /* Kills the 300ms double-tap-to-zoom delay iOS adds to a control. */
  touch-action: manipulation;
  /* positioned for the hit area below */
  position: relative;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* THE 34px BUTTON WITH A 44px THUMB.
   Two rules collide here and both are real. Kaʻo required this to be "the same
   exact button, including hover and click states, as what exists at
   KeepCalm.org", and that button is a 34px circle. The house minimum for a tap
   target is 44px. Resizing the circle would break the first rule, so the VISUAL
   stays 34px and only an invisible box grows, the same fix assets/refined-create.css
   uses for .kcg__info.

   It is transparent and centered, so nothing moves and no layout shifts. It
   overhangs the circle by 5px on each side, which lands on masthead whitespace
   rather than on the logo, so it steals no clicks from anything interactive.
   Measured by hit-testing, not by reading the box, because a box lies about
   where a ::after actually is. */
.wt-batmode::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* The one shared secondary-control hover from cdo-watchtower.css line 6852. */
.wt-batmode:hover {
  border-color: var(--wt-accent, var(--kcpc-accent));
  background: var(--wt-chip-bg, var(--kcpc-chip-bg));
  color: var(--wt-accent, var(--kcpc-accent));
}

.wt-batmode:focus-visible {
  outline: 2px solid var(--wt-link, var(--kcpc-link));
  outline-offset: 2px;
}

.wt-batmode svg {
  width: 17px;
  height: 17px;
  fill: var(--wt-toggle-fill, var(--kcpc-toggle-fill));
  filter: none;
  transition: fill 200ms ease;
}

/* The click state IS the swap: pressed shows the sun, unpressed the moon. The
   label lives in aria-label, which kc-plan-checkout.js keeps in sync, so the
   toggle announces itself rather than being an opaque icon. WCAG 4.1.2. */
.wt-batmode .kc-sun  { display: none; }
.wt-batmode .kc-moon { display: block; }
html[data-mode="batman"] .wt-batmode .kc-sun  { display: block; }
html[data-mode="batman"] .wt-batmode .kc-moon { display: none; }

/* The labeled-pill leftover. Some pages still ship the span; it must not show. */
.wt-batmode__label { display: none !important; }

/* ==========================================================================
   CHECKOUT STATUS
   The line under a buy button that says what pressing it will do. It is not
   decoration: until the Givebutter campaign verifies live, the button falls back
   to email, and a donor is owed that fact BEFORE they press, not after.
   ========================================================================== */
.kc-co-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wt-ink-soft, #5b6b60);
  max-width: 52ch;
}
html[data-mode="batman"] .kc-co-note { color: #b9c7b7; }

.kc-co-note--wait { opacity: .7; }

/* The recovery panel shown when the email fallback fires, so a phone with no
   mail app configured is never a dead end. */
.kc-co-fb {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--wt-rule, var(--kcpc-rule));
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.6;
}
.kc-co-fb a { color: var(--wt-link, var(--kcpc-link)); }

/* ==========================================================================
   PHONE TAP TARGETS

   Kaʻo, 2026-08-07: "all of these versions need to be optimized for mobile."
   A phone gate measured all 41 at 390px and every single one failed on tap
   targets. The three rules below fix the parts that are genuinely shared, so
   41 pages get the fix from one place.

   THE MEASUREMENT THAT MATTERS. The gate hit-tests with elementFromPoint at
   21px out from each control's center, rather than reading its box, because a
   box lies about where a ::after actually put the target. So a control passes
   only if the REAL hit area is at least 44x44.

   WHAT IS DELIBERATELY NOT FIXED HERE: a link sitting inside a sentence.
   WCAG 2.5.8 exempts targets in a block of text, and wrapping body copy in
   44px boxes would wreck the typography of all 41 pages to satisfy a rule that
   does not apply to it. .kc-linkbtn below stays display:inline for that reason.
   ========================================================================== */

/* THE MASTHEAD WORDMARK, on all 41. The logo is a 112x25 image in a link, so
   it is 26px tall and fails on the vertical axis while passing on the
   horizontal. Full width, 44px tall, centered on the logo: nothing moves.

   Keyed on the attribute and the image rather than a class, because the 41
   pages call this link seven different things (.brand, .logo, .hd__logo,
   .mark, .chrome__logo, .chrome-logo, .exit) and :has(img) is what tells the
   wordmark apart from an ordinary text link home. */
a[href="/"]:has(img) {
  position: relative;
  touch-action: manipulation;
}
a[href="/"]:has(img)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  min-width: 44px;
  height: 100%;
  min-height: 44px;
  transform: translate(-50%, -50%);
}

/* GENERAL HIT-AREA UTILITY, for a standalone control that must keep its exact
   size: the reduce-motion pause buttons, chips, pills, icon controls. Add the
   class, change nothing else. The box grows, the pixels do not move. */
.kc-hit44 {
  position: relative;
  touch-action: manipulation;
}
.kc-hit44::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  min-width: 44px;
  height: 100%;
  min-height: 44px;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   LINK-SHAPED BUTTON

   The "Give once instead" controls used to be <a href="/donate/">, which was a
   self-link once these candidates moved to /donate/ themselves. They are now
   buttons that open the give-once overlay, and a button is correct: it performs
   an action on this page rather than navigating. This is the reset that lets a
   button sit inside a sentence and still read as the link it replaced.

   THE :where() IS LOAD-BEARING. Each of the 41 pages colors its own quiet links
   (--accent here, --link there), and this file loads after the inline <style>
   on 38 of them, so a normal .kc-linkbtn { color } would overwrite all of that
   and paint every converted link the same wrong shade. :where() has zero
   specificity, so the page's own class always wins and only supplies the
   fallback when the page says nothing. The structural reset above it keeps
   normal specificity, because a stray button{} rule must not undo it.

   Tap target: these sit inline inside a paragraph, which is the WCAG 2.5.8
   exception for targets in a block of text. A give-once control that stands on
   its own must use the page's own button class and clear 44x44.
   ========================================================================== */
.kc-linkbtn {
  -webkit-appearance: none;
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
:where(.kc-linkbtn) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   THE STANDALONE GIVE-ONCE LINK

   Kaʻo, 2026-08-08: "Overlay does not make sense coming from a checkbox... so
   you can make that a link instead across all experiences."

   He is right, and it is a genuine pattern mismatch rather than a preference.
   A checkbox promises to toggle something in place and to STAY toggled. This
   one opened a modal instead, so the moment the dialog closed the box was left
   in a state nobody could read: still ticked and nothing happened, or silently
   unticked by the dialog on the way out. The 41 pages then each carried their
   own "gifting mode" to paper over it, dimming the plans behind the dialog that
   was already covering them. All of that is gone. The control performs an
   action, so it is a button, and it looks like the link it behaves like.

   WHY NOT .kc-linkbtn ALONE. That class is display:inline for controls sitting
   INSIDE a sentence, which is the WCAG 2.5.8 exception for targets in a block
   of text. These 41 stand on their own beside the Annual/Monthly switch, so the
   exception does not apply and they owe a real 44x44. inline-flex plus
   min-height gets there without moving the text: every one of these labels is
   far wider than 44px already, so only the vertical axis was ever short.

   Focus is drawn here rather than left to the browser default, because 38 of
   the 41 pages restyle their own controls and a default ring on a transparent
   inline-flex button is the first thing that gets lost. --wt-link is the
   watchtower token the pages already carry; the literal is the KEEP CALM link
   green, measured at 7.24:1 on the light page, and the dark override below is
   8.82:1 on the dark one.
   ========================================================================== */
.kc-giveonce {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
/* Zero specificity, for the same reason .kc-linkbtn uses it: this sheet loads
   after the inline <style> on 38 of the 41, and a normal rule here would repaint
   every page's quiet-link color the same wrong shade.

   font LIVES HERE rather than in the block above, which is the one difference
   from .kc-linkbtn and it is deliberate. These controls keep their own page's
   type (12.5px uppercase on one, 700 13.5px on another), and several of the 41
   set that on the container class this button now carries. A normal-specificity
   `font: inherit` in this sheet would load last and flatten all of it. It still
   fires when a page says nothing, which is all the reset was ever for: without
   it a <button> renders in the browser's UI font. */
:where(.kc-giveonce) {
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kc-giveonce:focus-visible {
  outline: 3px solid var(--wt-link, var(--kcpc-link, #2c5f4e));
  outline-offset: 3px;
  border-radius: 6px;
}
html[data-mode="batman"] .kc-giveonce:focus-visible {
  outline-color: var(--wt-link, #8fd0b4);
}

/* ==========================================================================
   THE GIVE-ONCE OVERLAY
   Markup is built by kc-plan-checkout.js, so this is the only place it is
   styled and all 41 candidates get the same dialog.

   WHY IT CARRIES ITS OWN COLORS. Each of the 41 pages names its tokens
   differently (--ink here, --text there, --fg on a third), so borrowing the
   host page's palette would leave the dialog unstyled or illegible on most of
   them. These literals are the KEEP CALM tokens, and every pair below was
   measured rather than eyeballed:

     light   ink #1f2a24 on #fffdf9      14.61:1
             ink-soft #4a564d on #fffdf9  7.57:1
             accent #2c5f4e on #fffdf9    7.24:1   and inverted for the button
             field #767d73 border         4.17:1   (3:1 is the bar for a control edge)
     dark    ink #ece7dc on #1e2522      12.68:1
             ink-soft #c2cabb on #1e2522  9.28:1
             accent #8fd0b4 on #1e2522    8.82:1
             ink #10140f on accent       10.50:1
             field #93a093 border         5.73:1

   MOBILE FIRST. The base rules below are the 390px layout. Every control is at
   least 44px tall, and the amount field is 16px, under which iOS Safari zooms
   the page in on focus and never zooms back out.
   ========================================================================== */
.kc-gv {
  --gv-page:   #f7f4ee;
  --gv-surface:#fffdf9;
  --gv-panel:  #eef3ec;
  --gv-ink:    #1f2a24;
  --gv-soft:   #4a564d;
  --gv-accent: #2c5f4e;
  --gv-accent-hi: #1f4638;
  --gv-on-accent: #fffdf9;
  --gv-field:  #767d73;
  --gv-rule:   #d6e0d2;

  position: fixed;
  inset: 0;
  z-index: 2147483000;   /* above any sticky bar or card overlay the host page has */
  display: flex;
  align-items: flex-end; /* phone: a sheet off the bottom, within thumb reach */
  justify-content: center;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
html[data-mode="batman"] .kc-gv {
  --gv-page:   #161a18;
  --gv-surface:#1e2522;
  --gv-panel:  #252d29;
  --gv-ink:    #ece7dc;
  --gv-soft:   #c2cabb;
  --gv-accent: #8fd0b4;
  --gv-accent-hi: #b9e7d1;
  --gv-on-accent: #10140f;
  --gv-field:  #93a093;
  --gv-rule:   rgba(143, 208, 180, .28);
}
/* Host pages set display on almost everything, and an author rule beats the UA
   rule for [hidden]. Without this the dialog stays on screen, and in the tab
   order, while the script believes it is closed. */
.kc-gv[hidden] { display: none !important; }

.kc-gv__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 16, .62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.kc-gv__box {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 92vh;
  max-height: 92dvh;     /* dvh keeps the button above the iOS toolbar */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 18px 22px;
  background: var(--gv-surface);
  color: var(--gv-ink);
  border: 1px solid var(--gv-rule);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.kc-gv__x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;           /* 44x44 even though the glyph is 17px: the target is the rule */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gv-soft);
  cursor: pointer;
  touch-action: manipulation;
}
.kc-gv__x:hover { background: var(--gv-panel); color: var(--gv-ink); }

.kc-gv__title {
  margin: 0 44px 0 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--gv-ink);
}
/* The heading takes focus on open, so it needs a visible ring like any other
   focus stop. Without it the dialog opens and nothing appears to be focused. */
.kc-gv__title:focus-visible,
.kc-gv__amt:focus-visible,
.kc-gv__sug:focus-visible,
.kc-gv__go:focus-visible,
.kc-gv__x:focus-visible {
  outline: 3px solid var(--gv-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.kc-gv__sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--gv-soft);
}

.kc-gv__form { margin: 0; }

.kc-gv__sugs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.kc-gv__sug {
  flex: 1 1 4.2rem;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gv-ink);
  background: var(--gv-surface);
  border: 1px solid var(--gv-field);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.kc-gv__sug:hover { border-color: var(--gv-accent); background: var(--gv-panel); }
/* Not color alone: the chosen suggestion also gains a heavier border and a
   ring, so it is legible without color vision. WCAG 1.4.1. */
.kc-gv__sug[aria-pressed="true"] {
  background: var(--gv-panel);
  border-color: var(--gv-accent);
  box-shadow: inset 0 0 0 1px var(--gv-accent);
}

/* 12px is the floor for anything with words in it, micro-label or not. Tracking
   this loose at 11px is legible on a desktop and mush on a phone. */
.kc-gv__lab {
  display: block;
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gv-soft);
}
.kc-gv__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--gv-surface);
  border: 1px solid var(--gv-field);
  border-radius: 12px;
}
.kc-gv__field:focus-within { border-color: var(--gv-accent); }
.kc-gv__cur {
  font-size: 19px;
  font-weight: 700;
  color: var(--gv-soft);
}
.kc-gv__amt {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gv-ink);
  font: inherit;
  /* 16px is the floor. Below it iOS Safari zooms the page on focus and gives
     no way back, which leaves the donor pinched into a field they cannot
     escape. This is 19px, comfortably clear. */
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kc-gv__amt:focus { outline: none; }   /* the ring is drawn on the wrapper */
.kc-gv__amt::placeholder { color: var(--gv-soft); opacity: 1; font-weight: 500; }

.kc-gv__unlock {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--gv-accent);
}
.kc-gv__unlock:empty { display: none; }

.kc-gv__rule {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gv-soft);
}

.kc-gv__go {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 16px 0 0;
  padding: 13px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gv-on-accent);
  background: var(--gv-accent);
  border: 2px solid var(--gv-accent);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.kc-gv__go:hover { background: var(--gv-accent-hi); border-color: var(--gv-accent-hi); }
.kc-gv__go:active { transform: translateY(1px); }

/* The shared status line and email-fallback panel are reused inside the dialog,
   so they have to read against the dialog surface rather than the host page. */
.kc-gv .kc-co-note { color: var(--gv-soft); max-width: none; }
html[data-mode="batman"] .kc-gv .kc-co-note { color: var(--gv-soft); }
.kc-gv .kc-co-fb { border-color: var(--gv-rule); color: var(--gv-ink); }
.kc-gv .kc-co-fb a { color: var(--gv-accent); }

/* Tablet and up: a centered card rather than a bottom sheet. */
@media (min-width: 34rem) {
  .kc-gv { align-items: center; padding: 24px; }
  .kc-gv__box { border-radius: 18px; padding: 24px 26px 26px; box-shadow: 0 18px 60px rgba(0, 0, 0, .34); }
  .kc-gv__sug { flex: 0 0 auto; min-width: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-gv__go:active { transform: none; }
}

/* ==========================================================================
   THE GAME EXAMPLE CARD (the third of song / game / poster)

   Kaʻo, 2026-08-08: "feature 3 examples not 2, so a song, a game, and a poster,
   in that order."

   The block around this card is CLONED from each page's own song block by
   kc-plan-creative.js, so spacing, headings and grid behaviour are already
   whatever that page uses. What is left for this file is the card itself.

   IT IS A BUTTON UNTIL IT IS PRESSED, which is the whole design. The song card
   beside it does not autoplay, and a game that started moving on its own next to
   a donation ask would be worse than the song doing it. Nothing loads the game
   engine until a press either, so the third example costs a reader who ignores
   it exactly nothing.

   COLORS COME FROM THE PAGE. Each of the 41 sets its own --accent and ink
   variables and they genuinely differ, so every value below falls back to the
   KEEP CALM green only when a page has not set one. Hardcoding green here would
   put a foreign card into 40 designs.
   ========================================================================== */
.kc-gx { width: 100%; max-width: 280px; }

.kc-gx__go {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  /* Stops the double-tap-to-zoom delay on iOS, which on a play control reads as
     the button being broken. */
  touch-action: manipulation;
}

/* 3:4, the same portrait proportion the poster and song cards use, so three
   cards in a row line up instead of stair-stepping. */
.kc-gx__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  /* THE SCRIM IS LOAD-BEARING, NOT DECORATION. --accent is a page variable and several
     of the 41 flip it to a light mint in dark mode, which turned this panel pale while
     the lockup on top of it stayed paper-white: measured 1.62:1, against the 4.5:1 the
     smallest text in here needs. CSS cannot ask how light a variable is, so instead of
     trying to pick a text color to suit an unknown background, the BACKGROUND is pinned
     dark enough that one text color is always right.

     A flat dark layer over the accent keeps the tier's own color reading through while
     guaranteeing the floor. At 58% over the lightest accent in the set it measures
     about 6.5:1, and over the dark green it is far higher. Checked with sampled pixels
     in both themes, not computed styles. */
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.16), transparent 46%),
    radial-gradient(circle at 74% 78%, rgba(255,255,255,.10), transparent 42%),
    linear-gradient(0deg, rgba(10,20,16,.58), rgba(10,20,16,.58)),
    var(--accent, #2c5f4e);
  box-shadow: 0 10px 26px rgba(20, 34, 28, .18);
  overflow: hidden;
}

/* Low in the panel rather than centred: centred, it sat on top of the lockup and
   neither the words nor the control read cleanly. */
.kc-gx__play {
  position: absolute;
  left: 50%; bottom: 9%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 253, 249, .95);
  display: block;
}
/* The triangle, drawn rather than typed: a glyph would depend on a font that may
   not have it, and it is decorative, so it must not be read out. */
.kc-gx__play::after {
  content: "";
  position: absolute;
  left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--accent, #2c5f4e);
}

/* The lockup, set in the panel the way a KEEP CALM poster is set. Sized in cqw so it
   scales with the card rather than with the page: these cards are 280px in a three
   column row and full width on a phone, and a fixed px size that looked right in one
   was wrong in the other. */
/* The crown, as a mask so it takes the panel's own ink color and needs no markup.
   The song and poster cards beside this one both carry it and the site URL; without
   them the middle card of three read as a different kind of object. */
.kc-gx__art::before {
  content: "";
  position: absolute;
  left: 50%; top: 7%;
  transform: translateX(-50%);
  width: 26px; height: 20px;
  background: #fffdf9;
  -webkit-mask: url(/assets/logos/keepcalm-crown.svg) no-repeat center / contain;
  mask: url(/assets/logos/keepcalm-crown.svg) no-repeat center / contain;
}
.kc-gx__word {
  position: absolute;
  left: 8%; right: 8%; top: 21%;
  display: block;
  container-type: inline-size;
  text-align: center;
  color: #fffdf9;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: .01em;
  text-wrap: balance;
}
.kc-gx__word-lead { display: block; font-size: clamp(15px, 13cqw, 30px); }
.kc-gx__word-and {
  display: block;
  font-size: clamp(8px, 5.4cqw, 13px);
  font-weight: 700;
  letter-spacing: .22em;
  opacity: .88;
  margin: .28em 0;
}
.kc-gx__word-tail { display: block; font-size: clamp(13px, 11cqw, 26px); }

.kc-gx__hint {
  display: block;
  font: 500 12.5px/1.35 "Montserrat", system-ui, sans-serif;
  color: var(--ink-quiet, #5c655e);
}

.kc-gx__go:hover .kc-gx__art { transform: translateY(-4px); }
.kc-gx__art { transition: transform .18s ease; }
.kc-gx__go:focus-visible { outline: 3px solid var(--accent, #2c5f4e); outline-offset: 4px; border-radius: 16px; }
.kc-gx__go.is-loading { opacity: .6; cursor: progress; }

/* The live board replaces the button in place, keeping the same footprint so the
   row does not jump when a game starts. */
.kc-gx__stage {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface, #fffdf9);
  box-shadow: 0 10px 26px rgba(20, 34, 28, .18);
}
.kc-gx__stage canvas { display: block; width: 100%; height: 100%; }

/* Engine unreachable. A real link beats a dead card. */
.kc-gx__link {
  display: inline-block;
  padding: 12px 4px;
  font: 700 13.5px/1.35 "Montserrat", system-ui, sans-serif;
  color: var(--accent, #2c5f4e);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kc-gx__art, .kc-gx__go:hover .kc-gx__art { transition: none; transform: none; }
}


/* ==========================================================================
   THREE ACROSS, ADDED BY kc-plan-creative.js ONLY WHEN A THIRD CARD WENT IN.

   These rows were authored as 1fr 1fr, so the game card wrapped onto a second
   line and left the poster stranded under it. The class is applied in script,
   after checking the parent is genuinely a grid or a flex row, so nothing here
   can reach a layout it was not meant for.

   BEHIND A MIN-WIDTH QUERY ON PURPOSE. Below 820px these rows stack one card per
   line, which is right on a phone and is exactly what the pages already do, so
   the mobile layout is left completely alone.
   ========================================================================== */
@media (min-width: 820px) {
  .kc-ex3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* Flex rows need the equivalent said a different way. min-width:0 is what stops a
     long note from refusing to shrink and pushing the row wider than its container. */
  .kc-ex3 > * { min-width: 0; }
}

/* The checkout page's legal footing: where the email goes, that the gift
   renews, and how to stop it. Small, because it is not the point of the page,
   but never faint: this is the text a regulator and a confused member both
   read, so it holds a real contrast ratio rather than the grey that fine print
   usually gets. Measured against the page background in both themes. */
.kc-co-legal {
  margin: 14px 0 0;
  font: 500 12.5px/1.55 "Montserrat", system-ui, sans-serif;
  color: var(--ink-quiet, #4a544c);
  max-width: 56ch;
}
.kc-co-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.kc-co-legal a:hover { color: var(--accent, #2c5f4e); }
.kc-co-legal a:focus-visible {
  outline: 3px solid var(--accent, #2c5f4e);
  outline-offset: 2px;
  border-radius: 3px;
}