/* Associates Info Hub: MOBILE FIRST, Express Ops Design System v1 (ux-2026-11).
   Base rules are the phone layout; min-width queries layer on 360 / 600 / 768 / 820 / 960.
   Strict CSP: this is the only stylesheet; no inline styles. Animations always play (Jack). */

/* Fonts */
@font-face {
  font-family: "Roboto";
  src: url("roboto-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Size-adjusted fallback so the Roboto swap does not reflow the page on slow data. */
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial");
  size-adjust: 100.5%;
  ascent-override: 92.8%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

/* Tokens (DS section 1 subset) */
:root {
  color-scheme: light;
  --ex-blue-light: #0096D6;
  --ex-blue: #0077C0;
  --ex-blue-deep: #005288;
  --ex-grey: #53565A;
  --ex-green: #5A9F51;
  --ex-purple: #7E2B8A;
  --ex-red: #C6222B;
  --ex-yellow: #E9B632;
  --grad-green-blue: linear-gradient(90deg, #5A9F51, #0096D6);
  --grad-blue-purple: linear-gradient(90deg, #0096D6, #7E2B8A);
  --grad-red-yellow: linear-gradient(90deg, #C6222B, #E9B632);

  --n-0: #FFFFFF; --n-25: #F7F9FB; --n-50: #F3F6F9; --n-100: #E8EDF2; --n-200: #D6DEE6;
  --n-300: #BAC4CF; --n-500: #6B7079; --n-900: #1F2328;

  --bg-canvas: var(--n-50);
  --bg-surface: var(--n-0);
  --bg-sunken: var(--n-25);
  --border: var(--n-100);
  --border-strong: var(--n-200);
  --text-strong: var(--n-900);
  --text: var(--ex-grey);
  --text-muted: var(--n-500);
  --title: var(--ex-blue-deep);
  --link: #006DB0;
  --focus: var(--ex-blue-light);
  --focus-on-brand: #7CC8EE;

  --good-ink: #3F7238; --good-tint: #EBF3EA;
  --warn-ink: #7A5E14; --warn-tint: #FCF6E6;
  --bad: #C6222B; --bad-ink: #C6222B; --bad-tint: #F8E4E6; --bad-hover: #A81D25;
  --info-ink: #005288; --info-tint: #E0EFF7;

  --font: "Roboto", "Roboto Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 16px;
  --tap: 44px;
  --tap-primary: 56px;
  --jump-h: 56px;
  --callbar-h: 76px; /* app.js measures the real bar and overwrites this (CSSOM, CSP-safe) */

  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-signature: 24px; --r-pill: 999px;

  --elev-1: 0 1px 2px rgb(0 40 80 / .06), 0 0 0 1px var(--border);
  --elev-2: 0 4px 12px -2px rgb(0 40 80 / .10), 0 0 0 1px var(--border);
  --elev-3: 0 12px 28px -6px rgb(0 40 80 / .18), 0 2px 6px rgb(0 40 80 / .08);

  --dur-press: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-panel: 260ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-exit: cubic-bezier(.3, 0, .8, .15);
  --ease-move: cubic-bezier(.2, 0, 0, 1);
}
@media (max-width: 359px) { :root { --callbar-h: 96px; } }
@media (min-width: 600px) { :root { --gutter: 24px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--jump-h) + 8px);
}
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: rgb(0 150 214 / .15);
}
h1, h2, h3 { margin: 0; line-height: 1.2; color: var(--title); font-weight: 700; min-width: 0; overflow-wrap: break-word; }
p { margin: 0; }
strong { color: var(--text-strong); font-weight: 700; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--ex-blue-deep); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.on-brand :focus-visible { outline-color: var(--focus-on-brand); }
.nowrap, .policy li a[href^="tel:"], .ack-q a[href^="tel:"], .enroll p a[href^="tel:"] { white-space: nowrap; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

/* The hidden attribute always wins over component display rules (.btn is inline-flex). */
[hidden] { display: none !important; }

/* Icon sprite: kept rendered (not display:none) so the X-band <pattern> resolves. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ico-fill { fill: currentColor; stroke: none; }
.ico-ext { width: 16px; height: 16px; opacity: .8; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 900;
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px;
  background: #fff; color: var(--ex-blue-deep); border-radius: var(--r-md);
  font-weight: 700; box-shadow: var(--elev-3);
}
.skip:focus { left: 8px; }

/* Motion (named transitions, DS section 5) */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes band-in-18 { from { opacity: 0; transform: translateX(-16px); } to { opacity: .26; transform: none; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pulse-land { from { background-color: var(--info-tint); } to { background-color: rgb(224 239 247 / 0); } }
@keyframes pulse-card { from { background-color: var(--info-tint); } to { background-color: var(--bg-surface); } }
@keyframes draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 10px 18px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.25;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ex-blue); color: #fff; }
.btn-primary:hover { background: var(--ex-blue-deep); color: #fff; }
.btn-secondary { background: var(--bg-surface); color: var(--ex-blue-deep); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-sunken); border-color: var(--n-300); color: var(--ex-blue-deep); }
.btn-danger { background: var(--bad); color: #fff; font-weight: 700; }
.btn-danger:hover { background: var(--bad-hover); color: #fff; }
.btn-lg { min-height: var(--tap-primary); font-size: 17px; }

/* Masthead (app bar) */
.masthead { background: var(--ex-blue-deep); color: #fff; }
.masthead-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding-top: 6px; padding-bottom: 6px; min-height: 60px;
}
.brand {
  flex: 1 1 96px; min-width: 96px; min-height: var(--tap);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  padding: 2px 0; color: #fff; text-decoration: none;
}
.brand img { display: block; width: 92px; max-width: 100%; height: auto; }
.brand:hover { color: #fff; }
.brand-office {
  font-size: 11px; font-weight: 500; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase;
}
.masthead-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.hbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: var(--tap); min-height: 48px; padding: 4px 6px;
  border-radius: var(--r-md); border: 1px solid rgb(255 255 255 / .55);
  color: #fff; text-decoration: none;
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .01em;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.hbtn:hover { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; }
.hbtn:active { transform: scale(.97); }
.hbtn .lbl { display: none; }
.rail { height: 3px; background: var(--grad-green-blue); }

/* Hero: deep-blue band + signature card */
.hero-band { background: var(--ex-blue-deep); color: #fff; padding: 14px 0 36px; }
.hero h1 { color: #fff; font-size: 28px; letter-spacing: -.01em; animation: fade-up 260ms var(--ease-out) both; }
.lede {
  margin-top: 6px; max-width: 40em; color: rgb(255 255 255 / .9); font-size: 16px; line-height: 22px;
  animation: fade-up 260ms var(--ease-out) 60ms both;
}
.band-wrap {
  margin-top: 18px; height: 12px; color: #fff;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent);
}
.ex-band { display: block; width: 100%; height: 12px; }
.hero-band .band-wrap, .footer .band-wrap { opacity: .26; }
.hero-band .band-wrap { animation: band-in-18 600ms var(--ease-out) 120ms both; }
.hero-band .band-wrap { max-width: 600px; }

.hero-card { margin-top: -24px; }
/* Phones: the band is tight so the call-off number and payday land in the top of a 568 px screen.
   The X-band stays (one brand motif in the hero at every width) on a shorter lead-in. */
@media (max-width: 599px) {
  .hero-band { padding: 10px 0 34px; }
  .hero-band .band-wrap { margin-top: 12px; }
  .lede { margin-top: 4px; font-size: 15px; line-height: 20px; }
}
@media (max-width: 359px) { .hero h1 { font-size: 26px; } .hero-band { padding-bottom: 30px; } .hero-band .band-wrap { margin-top: 8px; } }

/* Google review chips (stay directly under the lede: Jack's placement) */
.reviews {
  background: var(--bg-surface); box-shadow: var(--elev-2);
  border-radius: var(--r-signature) var(--r-lg) var(--r-lg) var(--r-lg);
  padding: 14px 14px 16px;
  animation: fade-up 280ms var(--ease-out) 80ms both;
}
.reviews-label {
  margin: 0 0 10px; color: var(--text-strong); font-size: 15px; font-weight: 700; line-height: 1.3; text-wrap: balance;
}
.stars { display: inline-block; width: 70px; height: 14px; margin-right: 6px; vertical-align: -1px; color: var(--ex-yellow); }
.reviews-btns { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rv {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  min-height: 48px; padding: 6px 12px;
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  color: var(--ex-blue-deep); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
  animation: fade-up 260ms var(--ease-out) both;
}
.rv:nth-child(1) { animation-delay: 140ms; }
.rv:nth-child(2) { animation-delay: 180ms; }
.rv:nth-child(3) { animation-delay: 220ms; }
.rv::after { /* hover lift: fade a shadow layer in, never animate box-shadow itself */
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  box-shadow: var(--elev-3); opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.rv:hover { border-color: var(--ex-blue); color: var(--ex-blue-deep); }
.rv:hover::after { opacity: 1; }
.rv:active { transform: scale(.98); }
.rv-stars { display: none; grid-column: 1; width: 72px; height: 14px; color: var(--ex-yellow); }
.rv-name { grid-column: 1; font-size: 16px; font-weight: 700; line-height: 1.2; }
.rv-cta {
  grid-column: 2; grid-row: 1;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--link); font-size: 13px; font-weight: 500; line-height: 1.2; text-wrap: balance;
}
.rv-cta .ico { width: 14px; height: 14px; }
@media (max-width: 359px) { .reviews { padding: 10px 10px 12px; } .reviews-label { font-size: 14px; } }
.cta-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cta-touch { display: none; }
  .cta-mouse { display: inline; }
}

/* At a glance (4 quick facts) */
.facts {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.fact {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--elev-1);
  padding: 12px 14px 14px;
  background-image: linear-gradient(var(--ex-blue-light), var(--ex-blue-light));
  background-size: 100% 3px; background-repeat: no-repeat; background-position: top;
  animation: fade-up 260ms var(--ease-out) both;
}
.fact:nth-child(1) { animation-delay: 260ms; }
.fact:nth-child(2) { animation-delay: 300ms; }
.fact:nth-child(3) { animation-delay: 340ms; }
.fact:nth-child(4) { animation-delay: 380ms; }
.fact-call, .fact-wide { grid-column: 1 / -1; }
/* Label / value / note share rows across side-by-side facts (a 2-line label no longer drops its value) */
@supports (grid-template-rows: subgrid) {
  .fact { grid-row: span 3; }
  .fact:not(.fact-call) { display: grid; grid-template-rows: subgrid; row-gap: 2px; align-content: start; }
}
/* Sentence case at 13 px at every width: reads better than a tracked caps eyebrow and keeps
   "Payroll work week" on one line in the ~145 px half-width phone tiles. */
.fact-k {
  display: flex; align-items: flex-start; gap: 6px; min-width: 0; line-height: 18px;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
}
.fact-k .ico { width: 18px; height: 18px; color: var(--ex-blue); }
@media (max-width: 599px) {
  .fact-k { gap: 5px; }
  .fact-k .ico { width: 16px; height: 16px; margin-top: 1px; }
}
.fact-v {
  color: var(--title); font-size: 20px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.fact-n { color: var(--text); font-size: 14px; line-height: 1.4; }

/* Call-off tile: the whole tile is one tel: link */
.fact-call {
  padding: 0; background-image: linear-gradient(180deg, #C6222B, #E9B632);
  background-size: 4px 100%; background-position: left;
}
.fact-link {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 64px; padding: 12px 64px 14px 18px; border-radius: inherit;
  color: inherit; text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out);
}
.fact-link:active { transform: scale(.99); }
.fact-link::after { /* round call affordance on the right */
  content: ""; position: absolute; right: 14px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%; background: var(--bad); box-shadow: 0 4px 10px -2px rgb(198 34 43 / .45);
  transition: transform var(--dur-base) var(--ease-out);
}
.fact-link:hover::after, .fact-link:active::after { transform: scale(1.08); }
.fact-call .fact-k .ico { position: absolute; right: 24px; top: 50%; margin-top: -10px; color: #fff; z-index: 1; pointer-events: none; }
.fact-call .fact-v { color: var(--bad-ink); font-size: 24px; }
.fact-link:hover .fact-v { text-decoration: underline; text-underline-offset: 3px; }
.fact-warn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--bad-tint); color: var(--bad-ink);
  font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .02em;
}
.fact-warn .ico { width: 14px; height: 14px; }

/* Jump nav (sticky chips + sliding indicator) */
.jump {
  position: sticky; top: 0; z-index: 100; margin-top: 20px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 6px 12px -10px rgb(0 40 80 / .35); /* solid sheet: nothing ghosts through */
}
.jump-row {
  position: relative; display: flex; gap: 2px; align-items: center; min-height: var(--jump-h);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
}
.jump-row::-webkit-scrollbar { display: none; }
.jump-row.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.jump-row.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.jump-row.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.jump a {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 12px; border-radius: var(--r-md); scroll-snap-align: start;
  color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.jump a:hover { color: var(--ex-blue-deep); background: var(--bg-sunken); }
.jump a:active { background: var(--info-tint); }
.jump a.active { color: var(--ex-blue-deep); font-weight: 700; }
.jump-ind {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--ex-blue); transform-origin: 0 0; opacity: 0; pointer-events: none;
  transition: transform 220ms var(--ease-move), opacity var(--dur-base) var(--ease-out);
}
.jump-ind.on { opacity: 1; }
/* Desktop call pill: the 960+ stand-in for the phone callbar (hidden below 960, where the bar shows) */
.jump-call { display: none; }

/* Sections */
.section { padding: 28px 0; }
.section + .section { padding-top: 12px; }
.section-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 12px;
  margin-bottom: 16px; max-width: 760px;
}
.section-head > div { display: contents; }
.section-head p { grid-column: 1 / -1; }
.section-head h2, .ack h2 { padding: 2px 6px; margin: -2px -6px; border-radius: var(--r-sm); }
.section-head h2 { font-size: 24px; letter-spacing: -.01em; }
.section-head p { margin-top: 8px; color: var(--text); font-size: 16px; }
.sh-ico {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-lg); background: var(--info-tint); color: var(--ex-blue-deep);
}
.sh-ico .ico { width: 22px; height: 22px; }
.land { animation: pulse-land 900ms linear; }
.policy.land { animation-name: pulse-card; }

/* Below-the-fold entrance (app.js adds .rv-wait only to items below the first viewport) */
.rv-wait { opacity: 0; transform: translateY(12px); }
.rv-in { animation: fade-up 320ms var(--ease-out) both; }

/* Attendance Reminder (the most important card) */
.alert-card { position: relative; background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.alert-card::before { /* one unbroken red->yellow rule, painted over the pink header strip */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; z-index: 1;
  background: linear-gradient(180deg, #C6222B, #E9B632);
}
.alert-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 21px;
  background: var(--bad-tint); color: var(--bad-ink);
}
.alert-icon { width: 28px; height: 28px; }
.alert-head h2 { color: var(--bad-ink); font-size: 24px; }
.ticks { list-style: none; margin: 0; padding: 16px 16px 4px 21px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-strong); font-size: 17px; line-height: 1.45; }
.ticks .ico { width: 22px; height: 22px; margin-top: 1px; color: var(--bad-ink); }
.alert-foot { padding: 12px 16px 16px 21px; display: flex; flex-direction: column; gap: 12px; }
.ncns {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--bad-tint); color: var(--bad-ink);
  font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3;
}
.ncns .ico { width: 20px; height: 20px; }
.alert-foot .btn { width: 100%; }

/* Getting Paid: first-week note. Shown only on phones with JS, and only while Policy 2 (which
   carries the same sentence) is collapsed; app.js toggles .is-hidden. Desktop, JS-off, print: hidden. */
.glance { display: none; }
@media screen and (max-width: 767px) {
  html.js .glance { display: flex; }
  html.js .glance.is-hidden { display: none; }
}
.glance { align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 14px;
  border-radius: var(--r-lg); background: var(--warn-tint); box-shadow: 0 0 0 1px #F1E2B8;
  color: var(--warn-ink); font-size: 15px; font-weight: 500; line-height: 1.4;
}
.glance .ico { margin-top: 1px; }

/* Policy cards */
.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.policy {
  position: relative; background-color: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--elev-1);
  padding: 16px;
}
.policy h3 {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  color: var(--title); font-size: 17px; line-height: 1.3;
}
.pt { flex: 1; min-width: 0; }
.num {
  flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ex-blue-deep); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.flag { width: 20px; height: 20px; }
.policy ul { margin: 0; padding-left: 20px; color: var(--text); }
.policy li { margin: 6px 0; }
.policy li::marker { color: var(--ex-blue-light); }
.policy li a, .enroll p a, .ack-q a { padding-block: 13px; } /* 44 px touch height, line layout unchanged */

.policy-warn { background-image: linear-gradient(var(--ex-yellow), var(--ex-yellow)); background-size: 100% 3px; background-repeat: no-repeat; }
.policy-warn .num { background: var(--ex-yellow); color: var(--n-900); }
.policy-warn .flag { color: #9A6B00; }
.policy-danger { background-image: linear-gradient(var(--ex-red), var(--ex-red)); background-size: 100% 3px; background-repeat: no-repeat; }
.policy-danger h3 { color: var(--bad-ink); }
.policy-danger .num { background: var(--bad); }
.policy-danger .flag { color: var(--bad-ink); }
.policy-danger li::marker { color: var(--bad); }

/* Pay policies are <details>: shipped open (JS-off + print show everything); app.js collapses 2-6 on phones. */
details.policy { padding: 0; }
details.policy > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px;
  min-height: var(--tap-primary); padding: 12px 16px;
  list-style: none; cursor: pointer; border-radius: var(--r-lg);
  transition: background-color var(--dur-fast) var(--ease-out);
}
details.policy > summary::-webkit-details-marker { display: none; }
details.policy > summary:hover { background: var(--bg-sunken); }
details.policy > summary h3 { grid-area: 1 / 1; margin: 0; }
.chev { grid-area: 1 / 2 / 3; }
.peek { grid-area: 2 / 1; padding: 4px 0 0 40px; color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.35; }
/* Pay Options surfaces the line associates most often get wrong, styled like its red "no" pay-method row */
.peek-no { grid-area: 3 / 1; display: flex; align-items: center; gap: 6px; padding-top: 2px; color: var(--bad-ink); font-weight: 500; }
.peek-no .ico { width: 14px; height: 14px; stroke-width: 2.5; }
details[open] .peek { display: none; }
.chev { width: 22px; height: 22px; color: var(--ex-blue); transition: transform var(--dur-base) var(--ease-move); }
details[open] > summary .chev { transform: rotate(180deg); }
.pb { padding: 0 16px 16px; }
@supports (interpolate-size: allow-keywords) {
  details.policy { interpolate-size: allow-keywords; }
  details.policy::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 240ms var(--ease-move), content-visibility 240ms allow-discrete;
  }
  details.policy[open]::details-content { block-size: auto; }
}
.pb { transition: opacity var(--dur-base) var(--ease-out) 80ms; }
details.policy:not([open]) .pb { opacity: 0; }

.policy .note {
  display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--warn-tint); color: var(--warn-ink); font-size: 15px; font-weight: 500; line-height: 1.4;
}
.policy .note .ico { margin-top: 1px; }
.policy .methods { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.policy .methods li {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 9px 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 500;
}
.methods .ok { background: var(--good-tint); color: var(--good-ink); }
.methods .no { background: var(--bad-tint); color: var(--bad-ink); }
.methods .ico { width: 18px; height: 18px; stroke-width: 2.5; }

.hours { margin: 12px 0; display: grid; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.hours div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; }
.hours div + div { border-top: 1px solid var(--border); }
.hours dt { color: var(--text-strong); font-size: 15px; font-weight: 500; }
.hours dd { margin: 0; color: var(--ex-blue-deep); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.btn-map { width: 100%; min-height: var(--tap-primary); justify-content: flex-start; text-align: left; font-size: 15px; }
.btn-map > span { flex: 1; }
.btn-map .ico { color: var(--ex-blue); }

/* Values: one panel, three columns split by hairlines, so a shorter list reads as column
   whitespace instead of an emptier card. */
.values {
  display: grid; grid-template-columns: 1fr;
  background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--elev-1); overflow: hidden;
  background-image: var(--grad-blue-purple); background-size: 100% 3px; background-repeat: no-repeat;
}
.value { padding: 18px 16px 14px; }
.value + .value { border-top: 1px solid var(--border); }
.value-ico { width: 28px; height: 28px; color: var(--ex-blue); stroke-width: 1.75; margin-bottom: 6px; }
.value h3 { font-size: 20px; margin-bottom: 6px; }
.value ul { margin: 0; padding-left: 20px; color: var(--text); }
.value li { margin: 5px 0; }
.value li::marker { color: var(--ex-purple); }

/* Benefits */
.prices { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.price { /* centered so Dental/Vision sit level with the taller gradient card instead of top-hugging */
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0;
  padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--elev-1);
}
.price-k { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.price-v { display: flex; flex-wrap: wrap; align-items: baseline; color: var(--title); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-v small { margin-left: 2px; color: var(--text); font-size: 16px; font-weight: 500; letter-spacing: 0; }
/* The one hero gradient moment on the page: large white type only, on a scrim */
.price-hero {
  grid-column: 1 / -1; padding: 18px 20px; box-shadow: none;
  background: linear-gradient(rgb(0 0 0 / .2), rgb(0 0 0 / .2)), linear-gradient(120deg, #5A9F51, #0096D6 70%);
}
.price-hero .price-k { color: #fff; font-size: 19px; font-weight: 700; }
.price-hero .price-v { color: #fff; font-size: 42px; }
.price-hero .price-v small { color: #fff; font-size: 19px; font-weight: 700; }

.enroll { background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); padding: 18px 16px; }
.enroll h3 { font-size: 20px; }
.enroll p { margin-top: 8px; color: var(--text); overflow-wrap: anywhere; }
.code-row { margin-top: 14px; }
.code-label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.code-well {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 8px 8px 8px 14px; border: 1.5px dashed var(--n-300); border-radius: var(--r-md); background: var(--bg-sunken);
}
.code {
  font-family: var(--font); font-size: 26px; font-weight: 700; letter-spacing: .12em; color: var(--text-strong);
  font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all;
}
html.js .code-well.can-copy .code { cursor: copy; }
.btn-copy {
  min-height: var(--tap); padding: 8px 16px; gap: 6px;
  background: var(--bg-surface); color: var(--ex-blue-deep); border-color: var(--border-strong); font-weight: 700;
}
.btn-copy:hover { border-color: var(--ex-blue); color: var(--ex-blue-deep); }
.btn-copy[hidden] { display: none; }
.btn-copy .ico { width: 18px; height: 18px; }
.btn-copy .i-done { display: none; color: var(--good-ink); stroke-width: 3; stroke-dasharray: 24; }
.btn-copy.done { border-color: var(--good-ink); color: var(--good-ink); background: var(--good-tint); }
.btn-copy.done .i-copy { display: none; }
.btn-copy.done .i-done { display: block; animation: draw 240ms var(--ease-out-expo) both, pop 300ms var(--ease-out) both; }
.btn-row { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.btn-row .btn { width: 100%; min-height: var(--tap-primary); font-weight: 700; }
.btn-row .ico:not(.ico-ext) { color: var(--ex-blue); }

/* Acknowledgement */
.ack { background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 18px 16px; }
.ack-head { display: flex; align-items: center; gap: 12px; }
.ack h2 { font-size: 20px; }
.ack p { margin-top: 12px; color: var(--text); }
.ack ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ack li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-strong); }
.ack li .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--good-ink); stroke-width: 2.5; }
.ack-q { font-weight: 500; }

/* Footer */
.footer {
  background: var(--ex-blue-deep); color: rgb(255 255 255 / .85); font-size: 15px;
  padding: 0 0 calc(32px + var(--callbar-h));
}
.footer .band-wrap { margin: 0 auto 24px; padding-top: 20px; height: 32px; max-width: 1080px; padding-left: var(--gutter); }
.footer-grid { display: flex; flex-direction: column; gap: 20px; }
.footer img { display: block; width: 140px; height: auto; margin-bottom: 14px; }
.footer p { margin: 4px 0; }
.footer-name { color: #fff; font-weight: 700; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; margin: 0 -12px;
  border-radius: var(--r-md); color: #fff; font-weight: 500; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.footer-links a .ico:first-child { color: var(--focus-on-brand); }
.footer-hours { margin-top: 8px !important; color: #fff; }
.updated { color: rgb(255 255 255 / .75); font-size: 13px; }

/* Back-to-top FAB (JS only) */
.fab { display: none; }
@media (min-width: 768px) {
html.js .fab {
  position: fixed; right: 16px; bottom: calc(var(--callbar-h) + 12px); z-index: 120;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-surface); color: var(--ex-blue-deep); box-shadow: var(--elev-3);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.8); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
html.js .fab.show { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
html.js .fab:active { transform: scale(.94); }
}
.fab .ico { width: 22px; height: 22px; }

/* Toast (JS only) */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--callbar-h) + 16px); z-index: 800;
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px 10px 14px;
  width: max-content; max-width: calc(100vw - 32px); white-space: nowrap;
  border-radius: var(--r-lg); background: var(--n-900); color: #fff; box-shadow: var(--elev-3);
  font-size: 15px; font-weight: 500;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.toast .ico { width: 20px; height: 20px; color: #8CC983; stroke-width: 3; }
.toast .t-err { display: none; color: var(--ex-yellow); stroke-width: 2.5; }
.toast.err { white-space: normal; }
.toast.err .t-ok { display: none; }
.toast.err .t-err { display: block; }

/* Callbar (phones + tablets) */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-surface); box-shadow: 0 -6px 20px rgb(0 40 80 / .10);
  animation: sheet-in 320ms var(--ease-enter) 150ms both;
}
/* JS: one red call-off control per screen. While the hero "Calling off?" tile is on screen the bar
   waits below the fold; it slides up the moment the tile scrolls away (JS off: always shown). */
html.cb-auto .callbar {
  animation: none;
  transition: transform 300ms var(--ease-enter), visibility 0s linear 0s;
}
html.cb-auto.cb-tucked .callbar {
  transform: translateY(calc(100% + 8px)); visibility: hidden;
  transition: transform 200ms var(--ease-exit), visibility 0s linear 200ms;
}
.callbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-green-blue); }
.callbar .btn {
  flex-direction: column; gap: 1px; width: 100%; min-height: 52px; padding: 6px 12px;
  font-size: 16px; line-height: 1.2;
}
.callbar-main { display: block; text-align: center; }
.callbar-main .ico { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }
.cb-num { display: inline-block; } /* prefers to break after "Calling off?", never inside the number */
.callbar-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.25; overflow-wrap: anywhere; }
/* Compact: short screens or large text (app.js adds .cb-compact); both lines kept verbatim */
html.cb-compact .callbar { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
html.cb-compact .callbar .btn { gap: 0; min-height: 48px; padding: 5px 8px; font-size: 16px; line-height: 1.15; }
html.cb-compact .callbar-main .ico { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
html.cb-compact .callbar-sub { font-size: 11px; letter-spacing: 0; }

/* Review chips: 3-up compact tiles (name / CTA) once the card is ~330 px wide, roomy tiles
   with stars from 520 px; stacked rows only on the narrowest phones. */
.reviews { container-type: inline-size; }
@container (min-width: 250px) {
  .reviews-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rv { grid-template-columns: 1fr; align-content: center; gap: 2px; min-height: 60px; padding: 15px 7px 9px; }
  .rv-name { font-size: 14px; line-height: 1.15; }
  .rv-cta { grid-column: 1; grid-row: auto; font-size: 12px; }
  /* The "opens Google" cue stays on compact chips: a 12 px external-link mark in the top corner,
     above the name, so it never squeezes "Tap to review ›" onto a second line. */
  .rv-cta .ico { position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; color: var(--ex-blue); }
}
@container (min-width: 300px) {
  .rv { padding: 15px 8px 9px; }
  .rv-name { font-size: 15px; }
}
@container (min-width: 520px) {
  .rv { align-content: start; gap: 4px; padding: 10px 10px 12px; min-height: 88px; }
  .rv-name { font-size: 16px; }
  .rv-stars { display: block; }
  .rv-cta { padding-top: 2px; font-size: 13px; }
  .rv-cta .ico { top: 10px; right: 10px; width: 14px; height: 14px; }
}

/* Tablet 600+ */
@media (min-width: 600px) {
  .brand { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; flex-basis: auto; }
  .brand img { width: 120px; }
  .brand-office { font-size: 12px; white-space: nowrap; padding-left: 16px; border-left: 1px solid rgb(255 255 255 / .3); line-height: 1.6; }
  .masthead-row { min-height: 68px; }
  .masthead-actions { gap: 8px; }
  .hero-band { padding: 36px 0 64px; }
  .hero-card { margin-top: -36px; }
  .hero h1 { font-size: 40px; }
  .lede { font-size: 19px; line-height: 1.45; margin-top: 8px; }
  .reviews { padding: 18px 20px 20px; }
  .reviews-label { font-size: 16px; }
  .rv-name { font-size: 17px; }
  .facts { gap: 12px; }
  .fact { padding: 14px 16px 16px; }
  .fact-call { padding: 0; }
  .fact-link { justify-content: flex-start; padding-top: 14px; }
  .section { padding: 40px 0; }
  .section + .section { padding-top: 16px; }
  .section-head h2 { font-size: 28px; }
  .sh-ico { width: 44px; height: 44px; }
  .alert-head { padding: 16px 24px 16px 29px; }
  .alert-head h2 { font-size: 26px; }
  .ticks { padding: 20px 24px 4px 29px; }
  .ticks li { font-size: 18px; }
  .alert-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px 24px 20px 29px; }
  .alert-foot .btn { width: auto; padding: 0 28px; }
  .prices { grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
  .price-hero { grid-column: auto; }
  .enroll, .ack { padding: 22px 24px; }
  .code-well { display: inline-flex; justify-content: flex-start; }
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .btn-row .btn { width: auto; padding: 0 24px; }
  .btn-map { width: auto; }
  .footer-grid { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
  .footer img { width: 160px; }
}

/* 768+: pay cards always open, not collapsible */
@media (min-width: 768px) {
  .grid { display: block; columns: 2; column-gap: 16px; margin-bottom: -16px; }
  .grid > * { break-inside: avoid; margin-bottom: 16px; }
  .policy { padding: 20px 22px; }
  details.policy { padding: 0; }
  details.policy > summary { pointer-events: none; cursor: default; padding: 20px 22px 0; min-height: 0; }
  details.policy > summary h3 { margin-bottom: 10px; }
  .chev { display: none; }
  .pb { padding: 0 22px 20px; }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 0; }
  .value { padding: 20px 24px 16px; }
  .value + .value { border-top: 0; border-left: 1px solid var(--border); }
}

/* 820+: labelled header buttons */
@media (min-width: 820px) {
  .hbtn { flex-direction: row; gap: 8px; min-height: 44px; padding: 0 16px; font-size: 15px; }
  .hbtn .lbl { display: inline; }
  .hbtn .lbl-short { display: none; }
  .hbtn .ico { width: 18px; height: 18px; }
}

/* Desktop 960+: no callbar */
@media (min-width: 960px) {
  :root { --callbar-h: 0px; }
  .callbar { display: none; }
  .hbtn-call { background: #fff; border-color: #fff; color: var(--ex-blue-deep); }
  .hbtn-call:hover { background: var(--info-tint); color: var(--ex-blue-deep); }
  .brand img { width: 150px; }
  .hero-band { padding: 40px 0 64px; }
  .hero h1 { font-size: 46px; letter-spacing: -.02em; }
  .reviews { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 24px; padding: 20px 24px; }
  .reviews-label { margin: 0; max-width: 240px; font-size: 17px; }
  .reviews-label .stars { display: block; width: 80px; height: 16px; margin-bottom: 8px; }
  .facts { grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); margin-top: 16px; }
  .fact-call, .fact-wide { grid-column: auto; }
  .section { padding: 48px 0; }
  .section-head h2 { font-size: 30px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 0; }
  .grid-3 > * { margin-bottom: 0; }
  /* Chips share the bar as equal tabs; the right end is the call pill's fixed slot, so the chips
     never shift when it appears. Like the phone callbar, the pill waits while the hero call tile
     is on screen (html.cb-tucked) and slides in once the tile scrolls away; JS off it always shows. */
  .jump-row { gap: 4px; }
  .jump a { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 16px; }
  .jump a.jump-call {
    flex: 0 0 auto; display: inline-flex; gap: 8px; margin-left: 12px; padding: 0 20px;
    border-radius: var(--r-pill); background: var(--bad); color: #fff; font-weight: 700;
    box-shadow: 0 4px 10px -4px rgb(198 34 43 / .5);
    transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out),
      transform var(--dur-panel) var(--ease-enter), visibility 0s linear 0s;
  }
  .jump a.jump-call:hover { background: var(--bad-hover); color: #fff; }
  .jump a.jump-call:active { background: var(--bad-hover); transform: scale(.97); }
  .jump a.jump-call .ico { width: 18px; height: 18px; }
  html.cb-auto.cb-tucked .jump a.jump-call {
    opacity: 0; visibility: hidden; transform: translateX(16px);
    transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit), visibility 0s linear 160ms;
  }
  .footer { padding-bottom: 40px; }
  html.js .fab { right: 24px; bottom: 24px; }
  .toast { bottom: 32px; }
}

/* Print */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .jump, .callbar, .fab, .toast, .masthead-actions, .btn-copy, .skip, .rail, .band-wrap, .sprite { display: none !important; }
  html { scroll-padding-top: 0; }
  body { background: #fff; color: #000; font-size: 12px; }
  .masthead, .hero-band, .footer { background: #fff !important; color: #000; }
  .brand, .brand:hover, .hero h1, .lede, .footer, .footer a, .footer-name, .footer-hours, .updated { color: #000 !important; }
  .brand-office { border-color: #999; }
  .brand img, .footer img { content: url("express-logo.svg"); }
  .hero-band { padding: 12px 0; }
  .hero-card { margin-top: 0; }
  .reviews, .fact, .policy, .alert-card, .values, .enroll, .ack, .price, .glance { box-shadow: none !important; border: 1px solid #bbb; break-inside: avoid; }
  .reviews { border-radius: 8px; }
  .rv { min-height: 0; border: 0; padding: 2px 0; display: block; }
  .rv-stars, .rv-cta { display: none; }
  .reviews-btns { display: block; }
  .price-hero { background: #fff !important; }
  .price-hero .price-k, .price-hero .price-v, .price-hero .price-v small { color: #000; }
  .section { padding: 10px 0; }
  details.policy > summary .chev { display: none; }
  details.policy::details-content { block-size: auto !important; content-visibility: visible !important; }
  .pb { opacity: 1 !important; }
  a[href^="http"]:not(.rv)::after { content: " (" attr(href) ")"; font-size: 10px; word-break: break-all; color: #333; }
  .rv::after { content: " (" attr(href) ")"; position: static; opacity: 1; box-shadow: none; font-size: 9px; word-break: break-all; }
  .rv-wait { opacity: 1 !important; transform: none !important; }
  .btn-row { display: block; }
  .btn { border: 1px solid #999; background: #fff !important; color: #000 !important; min-height: 0; padding: 4px 8px; margin: 2px 0; }
  .fact-link::after { display: none; }
  .glance { display: none !important; }
  .btn-map { display: block; text-align: left; }
  .btn-map::after { display: block; margin-top: 4px; }
  .btn-map .ico { display: none; }
  .footer { padding: 12px 0; }
  .footer-links a { min-height: 0; }
}