/*
 * Platinum — base stylesheet.
 *
 * 1. Fonts          5. Shared vocabulary (THEME-CONTRACT.md §3)
 * 2. Tokens         6. Header + mobile menu
 * 3. Reset/base     7. Footer
 * 4. Utilities      8. Bottom action bar
 *                   9. Content templates (.pl-prose, posts, pagination, 404)
 *                  10. Staging banner
 *
 * Values are the design's inline values (design-source/*.dc.html). Base element rules use :where() so any class wins.
 * Breakpoint: 980px (the design's isWide). Page-specific styles live in assets/css/pages/{key}.css.
 */

/* ======================================================================= 1. Fonts */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ======================================================================= 2. Tokens */

:root {
  --pl-navy: #0A1F44;
  --pl-navy-deep: #06142E;
  --pl-ink: #0B1424;
  --pl-blue: #1C5DFF;               /* (2026-10-14: was #1F5FFF -- 4.48:1 on ice; this clears 4.5 on every light tint) */
  --pl-blue-hover: #1A4FD6;
  --pl-cyan: #3CCBEA;
  --pl-cyan-ink: #7FE3F5;
  --pl-ice: #E6F3F9;
  --pl-ice-hover: #D5ECF6;
  --pl-bg: #FAFBFC;
  --pl-surface: #FFFFFF;
  --pl-line: #E3E8EE;
  --pl-line-soft: #EEF1F4;
  --pl-line-strong: #D2D9E1;
  --pl-muted: #566070;
  --pl-muted-2: #6B7584;
  --pl-body: #3A4452;
  --pl-chip: #F1F4F7;
  --pl-hover: #EEF2F6;
  --pl-tint: #F3F7FF;
  --pl-tint-sel: #EEF4FF;
  --pl-green: #1A7A50;              /* (2026-10-14: was #1F8A5B -- 4.33:1 on white for 14px hint/tag text) */
  --pl-grey: #9AA5B1;
  --pl-red: #C2412D;
  --pl-on-dark: #D5DEEA;
  --pl-on-dark-2: #B9C8DE;
  --pl-font: 'Geist', system-ui, sans-serif;
  --pl-mono: 'Geist Mono', ui-monospace, monospace;
  --pl-gutter: clamp(20px, 4vw, 48px);

  --pl-photo: #DCE4EE;              /* the design's photo-slot fill */
  --pl-header-h: 64px;
  --pl-bar-space: calc(100px + env(safe-area-inset-bottom)); /* body padding under the bottom bar */
}

/* ======================================================================= 3. Reset + base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pl-header-h) + 16px);   /* anchors AND tabbed-to controls clear the sticky header */
}
@media (max-width: 979.98px) { html { scroll-padding-bottom: var(--pl-bar-space); } }   /* ...and the bottom bar */

body {
  margin: 0;
  min-height: 100vh;
  background: #FAFBFC;
  color: #0B1424;
  font-family: var(--pl-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: 600; }

:where(img, picture, video, canvas, svg) { max-width: 100%; }
:where(img, video) { height: auto; vertical-align: middle; }

:where(p, li, figcaption) { text-wrap: pretty; }

:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button, [role="button"], summary, label[for]) { cursor: pointer; }
:where(button:disabled) { cursor: default; }
:where(textarea) { resize: vertical; }

:where(a) { color: var(--pl-blue); text-decoration: none; }
:where(a:hover) { color: var(--pl-blue-hover); text-decoration: underline; }

*:focus-visible { outline: 3px solid var(--pl-blue); outline-offset: 2px; }   /* (2026-10-14: cyan was 1.9:1 on the light page; blue is 5:1 there, 3.1:1 on navy) */
main:focus { outline: none; }

details > summary { cursor: pointer; }
input[type=range] { accent-color: #1F5FFF; width: 100%; height: 28px; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ======================================================================= 4. Utilities */

.pl-visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pl-skip {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--pl-navy);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  transform: translateY(-200%);
}
.pl-skip:focus, .pl-skip:focus-visible { transform: none; color: #FFFFFF; text-decoration: none; }

@media (max-width: 979.98px) { .pl-wide-only { display: none !important; } }
@media (min-width: 980px)    { .pl-narrow-only { display: none !important; } }

/* ======================================================================= 5. Shared vocabulary */

/* --- layout */
.pl-wrap {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--pl-gutter);
}
.pl-section { padding-block: clamp(64px, 8vw, 104px); }
.pl-section--tight { padding-block: clamp(32px, 4vw, 48px); }
.pl-band {
  background: #FFFFFF;
  border-top: 1px solid var(--pl-line);
  border-bottom: 1px solid var(--pl-line);
}
.pl-band--navy { background: var(--pl-navy); color: #FFFFFF; border-color: var(--pl-navy); }
.pl-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 320px)), 1fr));
  gap: 12px;
}

/* --- type */
.pl-eyebrow {
  margin: 0;
  font-family: var(--pl-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--pl-blue);
}
.pl-eyebrow--muted { color: var(--pl-muted); }
.pl-h1 {
  margin: 0;
  font-size: clamp(56px, 7vw, 104px);
  line-height: .9;
  font-weight: 700;
  letter-spacing: -0.055em;
  color: var(--pl-navy);
  text-wrap: balance;
}
.pl-h1--page { font-size: clamp(52px, 6.6vw, 96px); line-height: .92; }   /* the designed inner pages (12 of them) */
.pl-h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--pl-navy);
  text-wrap: balance;
}
.pl-h2--xl { font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.045em; }
.pl-h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--pl-navy);
}
.pl-lede {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--pl-muted);
  max-width: 42ch;
}
.pl-sub {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--pl-navy);
}
.pl-accent { color: var(--pl-blue); }
.pl-small { font-size: 14px; color: var(--pl-muted); }
.pl-mono { font-family: var(--pl-mono); }

/* --- buttons + links */
.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 600 16px/1.2 var(--pl-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.pl-btn:hover { text-decoration: none; }
.pl-btn:active { transform: scale(0.99); }
.pl-btn--primary { background: var(--pl-blue); color: #FFFFFF; }
.pl-btn--primary:hover { background: var(--pl-blue-hover); color: #FFFFFF; }
.pl-btn--navy { background: var(--pl-navy); color: #FFFFFF; }
.pl-btn--navy:hover { background: var(--pl-navy-deep); color: #FFFFFF; }
.pl-btn--outline { background: #FFFFFF; border-color: var(--pl-line-strong); color: var(--pl-ink); }
.pl-btn--outline:hover { border-color: var(--pl-ink); color: var(--pl-ink); }
.pl-btn--white { background: #FFFFFF; color: var(--pl-navy); }
.pl-btn--white:hover { background: var(--pl-ice); color: var(--pl-navy); }
.pl-btn--ice { background: var(--pl-ice); color: var(--pl-navy); }
.pl-btn--ice:hover { background: var(--pl-ice-hover); color: var(--pl-navy); }
.pl-btn--sm { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.pl-btn--block { display: flex; width: 100%; }
.pl-btn:disabled, .pl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.pl-link { color: var(--pl-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }   /* links in running text need more than colour */
.pl-link:hover { color: var(--pl-blue-hover); }
.pl-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--pl-blue);
  font-weight: 600;
  text-decoration: none;
}
.pl-arrow-link:hover { color: var(--pl-blue-hover); text-decoration: none; }

/* --- bits */
.pl-dot {
  display: inline-block;
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pl-grey);
}
.pl-dot--green { background: var(--pl-green); }
.pl-dot--grey { background: var(--pl-grey); }
.pl-dot--cyan { background: var(--pl-cyan); }

.pl-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pl-ice);
  color: var(--pl-navy);
  font-family: var(--pl-mono);
  font-size: 11px;
  line-height: 1.3;
}

.pl-card { background: #FFFFFF; border: 1px solid var(--pl-line); border-radius: 18px; }
.pl-card--lift { box-shadow: 0 24px 48px -32px rgba(11, 20, 36, 0.25); }

/* Segmented control: <div class="pl-seg"><button type="button" aria-pressed="true">…</button>…</div> */
.pl-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--pl-chip);
}
.pl-seg > button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pl-navy);
  font: 600 14px/1.2 var(--pl-font);
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.pl-seg > button:hover { background: rgba(255, 255, 255, 0.55); }
.pl-seg > button[aria-pressed="true"] { background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 20, 36, 0.08); }

/* Link tiles: 1px hairlines between white cells. --min sets the column floor. */
.pl-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 220px)), 1fr));
  gap: 1px;
  background: var(--pl-line);
  border: 1px solid var(--pl-line);
  border-radius: 18px;
  overflow: hidden;
}
.pl-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #FFFFFF;
  color: var(--pl-ink);
  text-decoration: none;
  transition: background .2s;
}
a.pl-tile:hover { background: var(--pl-tint); color: var(--pl-ink); text-decoration: none; }
.pl-tile:focus-visible { border-radius: 0; outline-offset: -3px; }

/* Ice row link. The design writes <span>text</span><span>→</span>; a bar without that second span gets the arrow from CSS. */
.pl-wallet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pl-ice);
  color: var(--pl-navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.pl-wallet-bar:hover { background: var(--pl-ice-hover); color: var(--pl-navy); text-decoration: none; }
.pl-wallet-bar:not(:has(> span + span))::after { content: "→"; flex: none; }

/* The little card icon (header Wallet button, footer, bottom bar). */
.pl-wallet-icon {
  position: relative;
  display: inline-block;
  flex: none;
  width: 16px; height: 12px;
  border: 1.5px solid var(--pl-blue);
  border-radius: 3px;
}
.pl-wallet-icon::after {
  content: "";
  position: absolute;
  right: 2px; top: 3px;
  width: 4px; height: 3px;
  border-radius: 1px;
  background: var(--pl-blue);
}

/* FAQ: <div class="pl-faq"><details class="pl-faq__item"><summary>Question</summary><p>Answer</p></details>…</div>
   The +/− marker is drawn here; do not add one in the markup. Optional: <span class="pl-faq__num">01</span> in the summary. */
.pl-faq { display: flex; flex-direction: column; gap: 8px; }
.pl-faq__item {
  background: #FFFFFF;
  border: 1px solid var(--pl-line);
  border-radius: 14px;
  padding: 0 22px;
}
.pl-faq__item > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding-block: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pl-navy);
  list-style: none;
}
.pl-faq__item > summary::-webkit-details-marker { display: none; }
.pl-faq__item > summary::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px; height: 28px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--pl-tint-sel);
  color: var(--pl-blue);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
.pl-faq__item[open] > summary::after { content: "−"; }
.pl-faq__item > summary:focus-visible { outline-offset: 4px; }
.pl-faq__num { font-family: var(--pl-mono); font-size: 12px; font-weight: 400; color: #8A96A6; }
.pl-faq__item > :not(summary) {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pl-muted);
  max-width: 60ch;
}
.pl-faq__item:has(.pl-faq__num) > :not(summary) { margin-left: 34px; }

/* Photo stand-in from platinum_photo(). Fills its parent; the parent sets the size. */
.pl-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pl-photo);
  overflow: hidden;
}
.pl-photo__label {
  position: absolute;
  left: 12px; bottom: 10px;
  max-width: calc(100% - 24px);
  font-family: var(--pl-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--pl-muted-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pl-photo--dark { background: #13284D; }
.pl-photo--dark .pl-photo__label { color: var(--pl-on-dark-2); }

/* Receipt line: <div class="pl-receipt-row"><div><p class="pl-receipt-row__label">…</p><p class="pl-receipt-row__sub">…</p></div><p class="pl-receipt-row__value">…</p></div> */
.pl-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px dashed var(--pl-line-strong);
}
.pl-receipt-row__label { margin: 0; font-size: 15px; font-weight: 600; }
.pl-receipt-row__sub { margin: 2px 0 0; font-size: 13px; color: var(--pl-muted); }
.pl-receipt-row__value,
.pl-receipt-row > :last-child:not(:first-child):not(div) {
  margin: 0;
  font-family: var(--pl-mono);
  font-size: 14px;
  white-space: nowrap;
  text-align: right;
}

/* --- real photos in a platinum_photo() slot */
.pl-photo--img { background: var(--pl-navy); }
.pl-photo--img > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- hero cross-link card (platinum_xlink): the design's link between sibling pages */
.pl-xlink { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 520px;
  padding: 16px 16px 16px 20px; border-radius: 16px; border: 1.5px solid #C5D6E3; background: var(--pl-ice); color: var(--pl-navy);
  text-decoration: none; transition: border-color .2s, background .2s; }
.pl-xlink:hover { border-color: var(--pl-blue); background: #DCEEFA; color: var(--pl-navy); text-decoration: none; }
.pl-xlink__title { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.pl-xlink__sub { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--pl-body); }
.pl-xlink__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  background: var(--pl-navy); color: #FFFFFF; font-size: 14px; font-weight: 600; white-space: nowrap; }
@media (max-width: 479.98px) { .pl-xlink { flex-wrap: wrap; } .pl-xlink__btn { width: 100%; justify-content: center; } }

/* ======================================================================= 6. Header + mobile menu */

.pl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 251, 252, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pl-line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pl-header { background: #FAFBFC; }
}
@media (prefers-reduced-transparency: reduce) {
  .pl-header { background: #FAFBFC; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.admin-bar .pl-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .pl-header { top: 0; } }

.pl-header__bar {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--pl-gutter);
  height: var(--pl-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pl-header__home { display: block; flex: none; border-radius: 8px; }
.pl-logo { display: block; width: auto; }
.pl-header__home .pl-logo { height: 44px; }

.pl-header__nav { display: flex; gap: 2px; }
.pl-header__nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--pl-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.pl-header__nav a:hover { background: var(--pl-hover); color: var(--pl-ink); text-decoration: none; }
.pl-header__nav a[aria-current="page"] { background: var(--pl-hover); color: var(--pl-navy); }

.pl-header__actions { display: flex; align-items: center; gap: 8px; }
.pl-header__manage {
  padding: 8px 12px;
  color: var(--pl-body);
  font-size: 14px;
  font-weight: 500;
}
.pl-header__manage:hover { color: var(--pl-ink); }
.pl-header__wallet,
.pl-header__join {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.pl-header__wallet {
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--pl-line-strong);
  background: #FFFFFF;
  color: var(--pl-navy);
}
.pl-header__wallet:hover { border-color: var(--pl-navy); color: var(--pl-navy); text-decoration: none; }
.pl-header__join { padding: 0 16px; background: var(--pl-navy); color: #FFFFFF; }
.pl-header__join:hover { background: var(--pl-navy-deep); color: #FFFFFF; text-decoration: none; }

.pl-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--pl-line-strong);
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
}
.pl-menu-btn__open { display: flex; flex-direction: column; gap: 4px; }
.pl-menu-btn__close { position: relative; display: none; width: 20px; height: 20px; }
.pl-menu-btn__open > span,
.pl-menu-btn__close > span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--pl-navy);
}
.pl-menu-btn__close > span { position: absolute; left: 0; top: 9px; transform: rotate(45deg); }
.pl-menu-btn__close > span + span { transform: rotate(-45deg); }
html.pl-menu-open .pl-menu-btn__open { display: none; }
html.pl-menu-open .pl-menu-btn__close { display: block; }

.pl-mobile-nav {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--pl-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;      /* the page behind doesn't scroll once the menu hits its end */
  padding: 8px var(--pl-gutter) 20px;
  border-top: 1px solid var(--pl-line);
  background: #FFFFFF;
}
.pl-mobile-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--pl-line-soft);
  color: var(--pl-navy);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.pl-mobile-nav a:hover { color: var(--pl-navy); text-decoration: none; }
.pl-mobile-nav a > span { color: var(--pl-blue); }
.pl-mobile-nav a[aria-current="page"] { color: var(--pl-blue); }
/* Account actions under the nav rows: the same pair the desktop header carries (Manage plan, Wallet). */
.pl-mobile-nav__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.pl-mobile-nav .pl-mobile-nav__btn {
  justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border: 1px solid var(--pl-line-strong); border-radius: 12px;
  background: var(--pl-surface); color: var(--pl-navy); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.pl-mobile-nav .pl-mobile-nav__btn--navy { background: var(--pl-navy); border-color: var(--pl-navy); color: #FFFFFF; }
.pl-mobile-nav .pl-mobile-nav__btn--navy:hover { background: var(--pl-navy-deep); color: #FFFFFF; }
.pl-mobile-nav .pl-mobile-nav__btn svg { flex: none; }
/* Getting hold of us: the contact form and the phone, side by side under the account actions. */
.pl-mobile-nav__reach { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.pl-mobile-nav .pl-mobile-nav__call {
  justify-content: center; min-height: 48px; border-bottom: 0; color: var(--pl-blue); font-size: 15px; letter-spacing: 0;
}

/* ======================================================================= 7. Footer */

.pl-footer { background: #FFFFFF; border-top: 1px solid var(--pl-line); }
.pl-footer__main { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 40px; }

.pl-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--pl-line);
}
.pl-footer__brand { display: flex; align-items: center; gap: 20px; }
.pl-footer__brand .pl-logo { height: 72px; }
.pl-footer__tagline {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--pl-navy);
}
.pl-footer__tagline span { color: var(--pl-blue); }

.pl-footer__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--pl-line-strong);
  border-radius: 12px;
  color: var(--pl-navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.pl-footer__cta:hover { border-color: var(--pl-navy); color: var(--pl-navy); text-decoration: none; }
.pl-footer__cta--navy { background: var(--pl-navy); border-color: var(--pl-navy); color: #FFFFFF; }
.pl-footer__cta--navy:hover { background: var(--pl-navy-deep); border-color: var(--pl-navy-deep); color: #FFFFFF; }

.pl-footer__locs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  padding: 32px 0;
  border-bottom: 1px solid var(--pl-line);
}
.pl-footer__loc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px;
  border-radius: 14px;
  background: #FAFBFC;
  border: 1px solid var(--pl-line-soft);
}
.pl-footer__loc-name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--pl-navy); }
.pl-footer__loc-addr { font-size: 14px; color: var(--pl-muted); }
.pl-footer__loc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--pl-body);
}
.pl-footer__loc-dir {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
}

.pl-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 32px;
  padding-top: 32px;
}
.pl-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pl-footer__heading {
  margin: 0 0 8px;
  font-family: var(--pl-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--pl-muted);
}
.pl-footer__col a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--pl-ink);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s;
}
.pl-footer__col a:hover { color: var(--pl-blue); text-decoration: none; }

.pl-footer__legal { border-top: 1px solid var(--pl-line-soft); }
.pl-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 18px;
  padding-bottom: 24px;
  font-size: 13px;
  color: var(--pl-muted);
}
.pl-footer__legal-links { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-footer__legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--pl-body);
  font-size: 13px;
  text-decoration: none;
}
.pl-footer__legal-links a:hover { background: var(--pl-hover); color: var(--pl-navy); text-decoration: none; }
.pl-footer__legal-links .pl-footer__top-link { color: var(--pl-blue); font-weight: 600; }
.pl-footer__legal-links .pl-footer__top-link:hover { background: none; color: var(--pl-blue-hover); }

/* ======================================================================= 8. Bottom action bar (below 980px) */

.pl-bottombar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 6px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.42));
  -webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(1.05);
  backdrop-filter: blur(28px) saturate(1.9) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    0 16px 40px -12px rgba(11, 20, 36, 0.28),
    0 2px 8px rgba(11, 20, 36, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pl-bottombar { background: rgba(255, 255, 255, 0.97); border-color: var(--pl-line); }
}
@media (prefers-reduced-transparency: reduce) {
  .pl-bottombar { background: #FFFFFF; border-color: var(--pl-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.pl-bottombar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  border-radius: 28px;
  color: var(--pl-navy);
  font-size: clamp(11px, 2.9vw, 11.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;               /* every label on one line, so the row lines up */
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pl-bottombar__item:hover { color: var(--pl-navy); text-decoration: none; }
.pl-bottombar__item:active { background: rgba(255, 255, 255, 0.6); }
.pl-bottombar__item:focus-visible { border-radius: 28px; }
.pl-bottombar__item--primary {
  background: var(--pl-navy);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 12px -4px rgba(10, 31, 68, 0.55);
}
.pl-bottombar__item--primary:hover, .pl-bottombar__item--primary:active { background: var(--pl-navy-deep); color: #FFFFFF; }
.pl-bottombar__item--primary .pl-bottombar__inf { color: var(--pl-cyan); }
.pl-bottombar__item svg { display: block; flex: none; }
.pl-bottombar__inf {
  display: flex;
  align-items: center;
  height: 22px;
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
}
.pl-wallet-icon--bar {
  display: block;
  width: 20px; height: 15px;
  margin: 3px 0 4px;
  border: 1.8px solid currentColor;
  border-radius: 4px;
}
.pl-wallet-icon--bar::after { top: 3.5px; width: 5px; height: 4px; background: currentColor; }

@media (max-width: 979.98px) {
  body { padding-bottom: var(--pl-bar-space); }
}
@media (min-width: 980px) {
  .pl-bottombar { display: none; }
}
html.pl-kbd .pl-bottombar,
html.pl-menu-open .pl-bottombar { display: none; }

/* Compact while scrolling down (platinum.js toggles html.pl-bar-min): a narrower, shorter pill, a little lower.
   (2026-10-14: the labels stay -- icon-only, Book and My Plan were hard to tell apart.) */
.pl-bottombar { transition: padding .25s ease, left .25s ease, right .25s ease, bottom .25s ease; }
.pl-bottombar__item { transition: min-height .25s ease, gap .25s ease, background .15s; }
html.pl-bar-min .pl-bottombar { padding: 4px; left: 44px; right: 44px; bottom: calc(8px + env(safe-area-inset-bottom)); }
html.pl-bar-min .pl-bottombar__item { min-height: 48px; gap: 2px; }   /* icon + label still fit; a full tap target */
@media (prefers-reduced-motion: reduce) {
  .pl-bottombar, .pl-bottombar__item { transition: none; }
}

/* ======================================================================= 8b. Help panel (footer.php)
   Desktop: the floating "Questions?" button opens it. Phones: the bottom bar's Help opens it as a sheet just above the bar. */
button.pl-bottombar__item { border: 0; padding: 0; background: none; font-family: inherit; cursor: pointer; }
.pl-bottombar__item[aria-expanded="true"] { background: rgba(255, 255, 255, 0.75); color: var(--pl-blue); }
.pl-help__panel { padding: 16px; border-radius: 18px; background: var(--pl-surface);
  border: 1px solid var(--pl-line); box-shadow: 0 24px 48px -20px rgba(11, 20, 36, .3); display: grid; gap: 4px; }
.pl-help__panel[hidden] { display: none; }
.pl-help__title { margin: 0 4px 8px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--pl-navy); }
.pl-help__item { display: grid; gap: 2px; padding: 12px; border-radius: 12px; color: var(--pl-ink); text-decoration: none; }
.pl-help__item:hover { background: var(--pl-tint); color: var(--pl-ink); text-decoration: none; }
.pl-help__label { font-size: 15px; font-weight: 600; color: var(--pl-navy); }
.pl-help__sub { font-size: 13px; line-height: 1.4; color: var(--pl-muted); }
@media (max-width: 979.98px) {
  .pl-help { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 61; }
  html.pl-bar-min .pl-help { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .pl-help__btn { display: none; }
  html.pl-kbd .pl-help, html.pl-menu-open .pl-help { display: none; }
}
@media (min-width: 980px) {
  .pl-help { position: fixed; right: 24px; bottom: 24px; z-index: 55; }
  .pl-help__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px;
    background: var(--pl-navy); color: #fff; font: 600 15px var(--pl-font); cursor: pointer;
    box-shadow: 0 16px 36px -14px rgba(11, 20, 36, .55), 0 2px 6px rgba(11, 20, 36, .12); transition: background .2s, transform .15s; }
  .pl-help__btn:hover { background: var(--pl-navy-deep); }
  /* (2026-10-14: the full pill sat over page controls) A 52px circle; the label slides out on hover/focus/open.
     max-width, not display:none, so it stays the button's accessible name. */
  .pl-help__btn { justify-content: center; gap: 0; min-width: 52px; padding: 0 15px; transition: background .2s, transform .15s, gap .2s; }
  .pl-help__btn-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .25s ease, opacity .2s; }
  .pl-help__btn:is(:hover, :focus-visible, [aria-expanded="true"]) { gap: 10px; padding: 0 20px 0 16px; }
  .pl-help__btn:is(:hover, :focus-visible, [aria-expanded="true"]) .pl-help__btn-label { max-width: 12em; opacity: 1; }
  .pl-help__btn:active { transform: scale(.98); }
  .pl-help__btn[aria-expanded="true"] { background: var(--pl-blue); }
  .pl-help__panel { position: absolute; right: 0; bottom: 64px; width: 320px; }
}
@media (min-width: 980px) and (prefers-reduced-motion: reduce) { .pl-help__btn, .pl-help__btn-label { transition: none; } }
@media print { .pl-help { display: none !important; } }

/* ======================================================================= 9. Content templates */

.pl-entry__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 4vw, 48px); }
.pl-entry__head .pl-eyebrow a { color: inherit; }
.pl-entry__media { margin: 0 0 clamp(32px, 4vw, 48px); max-width: 960px; }
.pl-entry__media img { display: block; width: 100%; border-radius: 18px; }
.pl-entry__adjacent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  max-width: 72ch;
  margin-top: clamp(48px, 6vw, 72px);
}
.pl-entry__adjacent .pl-tile { border: 1px solid var(--pl-line); border-radius: 14px; }
.pl-entry__adjacent-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--pl-navy); }

/* Readable column for the_content(). */
.pl-prose {
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--pl-body);
  overflow-wrap: break-word;
}
.pl-prose > * + * { margin-top: 1.1em; }
.pl-prose :where(p, ul, ol, dl, figure, blockquote, pre, table) { margin-bottom: 0; }
.pl-prose :where(h2, h3, h4, h5, h6) { color: var(--pl-navy); letter-spacing: -0.03em; line-height: 1.15; }
.pl-prose h2 { margin-top: 2em; font-size: clamp(26px, 2.6vw, 34px); }
.pl-prose h3 { margin-top: 1.6em; font-size: clamp(21px, 2vw, 25px); }
.pl-prose :where(h4, h5, h6) { margin-top: 1.4em; font-size: 18px; letter-spacing: -0.015em; }
.pl-prose :where(h2, h3, h4, h5, h6) + * { margin-top: .6em; }
.pl-prose a { color: var(--pl-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pl-prose a:hover { color: var(--pl-blue-hover); }
.pl-prose strong { color: var(--pl-ink); font-weight: 600; }
.pl-prose :where(ul, ol) { padding-left: 1.4em; }
.pl-prose li + li { margin-top: .35em; }
.pl-prose li::marker { color: var(--pl-blue); }
.pl-prose img { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.pl-prose figure { margin-inline: 0; }
.pl-prose figcaption, .pl-prose .wp-caption-text { margin-top: 8px; font-size: 14px; color: var(--pl-muted); }
.pl-prose blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--pl-cyan);
  color: var(--pl-navy);
  font-size: 1.12em;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.pl-prose hr { margin-block: 2.4em; border: 0; border-top: 1px solid var(--pl-line); }
.pl-prose :where(code, kbd) {
  padding: .1em .35em;
  border-radius: 6px;
  background: var(--pl-chip);
  font-family: var(--pl-mono);
  font-size: .88em;
}
.pl-prose pre {
  padding: 16px;
  border-radius: 12px;
  background: var(--pl-chip);
  overflow-x: auto;
  font-family: var(--pl-mono);
  font-size: 14px;
  line-height: 1.5;
}
.pl-prose pre code { padding: 0; background: none; }
.pl-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}
.pl-prose :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--pl-line); text-align: left; vertical-align: top; }
.pl-prose th { color: var(--pl-navy); font-weight: 600; border-bottom-color: var(--pl-line-strong); }
.pl-prose .alignleft { float: left; margin: .3em 1.5em 1em 0; }
.pl-prose .alignright { float: right; margin: .3em 0 1em 1.5em; }
.pl-prose .aligncenter { margin-inline: auto; }
.pl-prose iframe { max-width: 100%; }

/* Post cards (index.php) */
.pl-posts { --min: 300px; gap: 16px; }
.pl-post { display: flex; flex-direction: column; overflow: hidden; }
.pl-post__media { display: block; aspect-ratio: 16 / 10; background: var(--pl-photo); }
.pl-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-post__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 22px 14px; }
.pl-post__title { font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.pl-post__title a { color: var(--pl-navy); }
.pl-post__title a:hover { color: var(--pl-blue); text-decoration: none; }
.pl-post__excerpt { font-size: 15px; line-height: 1.55; color: var(--pl-muted); }
.pl-post__excerpt p { margin: 0; }
.pl-post .pl-arrow-link { margin-top: auto; }

/* Pagination (the_posts_pagination, wp_link_pages) */
.pl-pagination { margin-top: clamp(32px, 4vw, 48px); }
.pl-pagination .nav-links,
.pl-pagination:not(:has(.nav-links)) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-pagination .page-numbers,
.pl-pagination .post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--pl-line-strong);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--pl-navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.pl-pagination a.page-numbers:hover,
.pl-pagination a.post-page-numbers:hover { border-color: var(--pl-navy); color: var(--pl-navy); text-decoration: none; }
.pl-pagination .current { background: var(--pl-navy); border-color: var(--pl-navy); color: #FFFFFF; }
.pl-pagination .dots { border-color: transparent; background: none; }

/* 404 */
.pl-404 { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pl-404__tiles { width: 100%; margin-top: 16px; }
.pl-404__tile-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--pl-navy); }

/* ======================================================================= 10. Staging banner */

.pl-staging { background: var(--pl-navy-deep); color: var(--pl-on-dark); font-size: 13px; line-height: 1.4; }
.pl-staging__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-block: 7px; }
.pl-staging__label { color: #FFFFFF; font-weight: 600; }
.pl-staging__details summary { color: var(--pl-cyan-ink); }
.pl-staging__details ul { margin: 6px 0 4px; padding-left: 18px; }
.pl-staging__details li + li { margin-top: 2px; }

/* ======================================================================= page transitions
   Cross-document View Transitions (Chrome 126+, Safari 18.2+; other browsers just navigate as before). The page
   content fades and slides; the header, bottom bar and help button are named, so they stay put instead of flashing.
   Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .pl-header { view-transition-name: pl-header; }
  .pl-bottombar { view-transition-name: pl-bottombar; }
  .pl-help { view-transition-name: pl-help; }
  ::view-transition-old(root) { animation: pl-vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: pl-vt-in .38s cubic-bezier(.2, .8, .2, 1) .06s both; }
  ::view-transition-group(pl-header), ::view-transition-group(pl-bottombar), ::view-transition-group(pl-help) { animation-duration: .3s; }
  @keyframes pl-vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
  @keyframes pl-vt-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
}

/* footer waterline: two seamless wave tiles (repeat-x, each tile a whole number of wavelengths) drifting at different
   speeds along the footer's top edge, so no layer ever shows an edge; fx.js swells them as the footer arrives */
.pl-footer { position: relative; }
.pl-footer__wave { position: absolute; left: 0; right: 0; top: -27px; height: 28px; pointer-events: none; transform-origin: 50% 100%; }
.pl-footer__wave::before, .pl-footer__wave::after { content: ""; position: absolute; inset: 0; background-repeat: repeat-x; background-size: 720px 28px; }
.pl-footer__wave::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='28' viewBox='0 0 720 28'%3E%3Cpath d='M0 28 L0 12.0 L12 13.9 L24 15.5 L36 16.9 L48 17.7 L60 18.0 L72 17.7 L84 16.9 L96 15.5 L108 13.9 L120 12.0 L132 10.1 L144 8.5 L156 7.1 L168 6.3 L180 6.0 L192 6.3 L204 7.1 L216 8.5 L228 10.1 L240 12.0 L252 13.9 L264 15.5 L276 16.9 L288 17.7 L300 18.0 L312 17.7 L324 16.9 L336 15.5 L348 13.9 L360 12.0 L372 10.1 L384 8.5 L396 7.1 L408 6.3 L420 6.0 L432 6.3 L444 7.1 L456 8.5 L468 10.1 L480 12.0 L492 13.9 L504 15.5 L516 16.9 L528 17.7 L540 18.0 L552 17.7 L564 16.9 L576 15.5 L588 13.9 L600 12.0 L612 10.1 L624 8.5 L636 7.1 L648 6.3 L660 6.0 L672 6.3 L684 7.1 L696 8.5 L708 10.1 L720 12.0 L720 28 Z' fill='rgba%2860%2C203%2C234%2C0.10%29'/%3E%3C/svg%3E"); }
.pl-footer__wave::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='28' viewBox='0 0 720 28'%3E%3Cpath d='M0 28 L0 16.0 L12 16.9 L24 17.8 L36 18.6 L48 19.3 L60 19.9 L72 20.3 L84 20.5 L96 20.5 L108 20.3 L120 19.9 L132 19.3 L144 18.6 L156 17.8 L168 16.9 L180 16.0 L192 15.1 L204 14.2 L216 13.4 L228 12.7 L240 12.1 L252 11.7 L264 11.5 L276 11.5 L288 11.7 L300 12.1 L312 12.7 L324 13.4 L336 14.2 L348 15.1 L360 16.0 L372 16.9 L384 17.8 L396 18.6 L408 19.3 L420 19.9 L432 20.3 L444 20.5 L456 20.5 L468 20.3 L480 19.9 L492 19.3 L504 18.6 L516 17.8 L528 16.9 L540 16.0 L552 15.1 L564 14.2 L576 13.4 L588 12.7 L600 12.1 L612 11.7 L624 11.5 L636 11.5 L648 11.7 L660 12.1 L672 12.7 L684 13.4 L696 14.2 L708 15.1 L720 16.0 L720 28 Z' fill='%23FFFFFF'/%3E%3Cpath d='M0 16.0 L12 16.9 L24 17.8 L36 18.6 L48 19.3 L60 19.9 L72 20.3 L84 20.5 L96 20.5 L108 20.3 L120 19.9 L132 19.3 L144 18.6 L156 17.8 L168 16.9 L180 16.0 L192 15.1 L204 14.2 L216 13.4 L228 12.7 L240 12.1 L252 11.7 L264 11.5 L276 11.5 L288 11.7 L300 12.1 L312 12.7 L324 13.4 L336 14.2 L348 15.1 L360 16.0 L372 16.9 L384 17.8 L396 18.6 L408 19.3 L420 19.9 L432 20.3 L444 20.5 L456 20.5 L468 20.3 L480 19.9 L492 19.3 L504 18.6 L516 17.8 L528 16.9 L540 16.0 L552 15.1 L564 14.2 L576 13.4 L588 12.7 L600 12.1 L612 11.7 L624 11.5 L636 11.5 L648 11.7 L660 12.1 L672 12.7 L684 13.4 L696 14.2 L708 15.1 L720 16.0' fill='none' stroke='rgba%2860%2C203%2C234%2C0.45%29' stroke-width='1.5'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .pl-footer__wave::before { animation: pl-wave 22s linear infinite; }
  .pl-footer__wave::after { animation: pl-wave 14s linear infinite reverse; }
  .pl-footer__wave.is-swell { animation: pl-wave-swell 1.6s ease-out; }
}
@keyframes pl-wave { from { background-position-x: 0; } to { background-position-x: -720px; } }
@keyframes pl-wave-swell { 0% { transform: scaleY(1); } 30% { transform: scaleY(1.9); } 100% { transform: scaleY(1); } }

/* The promo countdown (platinum_promo_clock): only when the promo has a real end date within 7 days */
.pl-promo-clock { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; font-size: 14px; font-weight: 500; color: inherit; }
.pl-promo-clock b { font-variant-numeric: tabular-nums; font-weight: 700; }
.pl-promo-clock__dot { width: 8px; height: 8px; border-radius: 50%; background: #FF7A59; box-shadow: 0 0 0 4px rgba(255, 122, 89, .22); animation: pl-promo-pulse 1.6s ease-in-out infinite; }
.pl-promo-clock__day { opacity: .75; }
.pl-promo-clock.is-ended { opacity: .8; }
@keyframes pl-promo-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 122, 89, 0); } }
@media (prefers-reduced-motion: reduce) { .pl-promo-clock__dot { animation: none; } }

/* "N new Unlimited memberships in the last 7 days" (platinum_joins_line): the dashboard's real figure, 20 or more */
.pl-joins { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--pl-muted); }
.pl-joins b { color: var(--pl-navy); font-variant-numeric: tabular-nums; }
.pl-joins__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-green); box-shadow: 0 0 0 4px rgba(31, 138, 91, .18); }
.pl-joins__t { text-wrap: balance; }   /* number and words flow as one sentence; a wrap splits it evenly, never one word alone */
.pl-unl-lane__joins { display: flex; color: var(--pl-on-dark-2); }
.pl-unl-lane__joins b { color: #FFFFFF; }

/* Book now bar (platinum_booking_go_bar, oil change + Express Detail): fixed at the bottom once something is picked; above the phone's bottom bar; hidden over the booking form */
.pl-bk-go { position: fixed; left: 50%; bottom: 20px; z-index: 58; width: min(calc(100% - 32px), 760px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 20px; border-radius: 18px; background: var(--pl-navy-deep); color: #fff;
  box-shadow: 0 18px 40px rgba(6, 20, 46, .35); transition: opacity .25s, transform .25s; }
.pl-bk-go { opacity: 0; pointer-events: none; visibility: hidden; transform: translate(-50%, 16px); }
html.pl-bk-reached .pl-bk-go { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%); }
html.pl-bk-reached.pl-bk-in .pl-bk-go { opacity: 0; pointer-events: none; visibility: hidden; transform: translate(-50%, 16px); }
.pl-bk-go__info { flex: 1; min-width: 0; }
.pl-bk-go__k { margin: 0; font: 600 10.5px/1.2 var(--pl-mono); letter-spacing: .12em; color: var(--pl-cyan); }
.pl-bk-go__v { margin: 2px 0 0; font-size: 15px; color: var(--pl-on-dark); }
.pl-bk-go__v strong { color: #fff; font-size: 17px; }
.pl-bk-go__hint { margin: 2px 0 0; font-size: 13px; color: #7FE3A8; }
.pl-bk-go__btn { flex: none; min-height: 48px; padding-inline: 22px; font-size: 15px; }
@media (max-width: 979.98px) {
  .pl-bk-go { bottom: calc(92px + env(safe-area-inset-bottom)); padding: 10px 10px 10px 16px; gap: 10px; }
  .pl-bk-go__v { font-size: 14px; }
  .pl-bk-go__btn { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pl-bk-go { transition: none; } }
.pl-bk-go { transition: opacity .25s, transform .25s, visibility .25s; }
.pl-bk-go__v--empty { color: #FFFFFF; font-weight: 600; }
.pl-bk-go__btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #FFFFFF; }
.pl-bk-go__btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.pl-bk-go__btn[hidden] { display: none; }

/* Today's weather / closure banner (inc/today.php, platinum.js loadToday) */
.pl-today-banner { display: flex; align-items: center; gap: 12px; padding: 10px max(16px, calc((100% - 1240px) / 2)); background: #FFF6DB; border-bottom: 1px solid #F1D98A; color: #5A4300; font-size: 14px; line-height: 1.45; }
.pl-today-banner p { flex: 1; margin: 0; }
.pl-today-banner__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E0A800; box-shadow: 0 0 0 4px rgba(224, 168, 0, .2); }
.pl-today-banner button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #5A4300; font-size: 22px; line-height: 1; cursor: pointer; }
.pl-today-banner button:hover { background: rgba(90, 67, 0, .08); }