/* === return-to-work-program ===========================================
   The Claude Design export, shipped IN FULL. An earlier build kept only
   45 of these 146 rules and rebuilt the page from the site's Bootstrap
   components. Scoped under .rtw / rtw- so it cannot leak into the theme.
   Append-only: nothing in the site's existing stylesheets is touched.
   ==================================================================== */

/* ==========================================================================
   Return-to-Work Program page
   Injury Care Associates — injurycareco.com
   Scoped under .rtw. Tokens map to the site's Bootstrap custom properties;
   hex fallbacks are the live values so the page also works standalone.
   ========================================================================== */

.rtw {
  --rtw-primary: var(--bs-primary-hex, #0072bc);
  --rtw-primary-dark: #005b96;
  --rtw-navy: var(--bs-tertiary-hex, #1e2d3b);
  --rtw-light: var(--bs-light-hex, #f2f8fc);
  --rtw-ink: var(--bs-heading-color-hex, #212124);
  --rtw-body: #495356;
  --rtw-line: var(--bs-secondary-border-hex, #e7e7e7);
  --rtw-accent: #80b7e3;
  --rtw-warning: var(--bs-warning-hex, #ffd240);
  --rtw-green: #9fd086;
  --rtw-radius: var(--bs-border-radius, 10px);
  --rtw-heading: 'Catamaran', sans-serif;
  --rtw-body-font: 'Nunito Sans', system-ui, sans-serif;

  font-family: var(--rtw-body-font);
  color: var(--rtw-ink);
  background: #fff;
  overflow-x: hidden;
}
.rtw *, .rtw *::before, .rtw *::after { box-sizing: border-box; }
.rtw img { max-width: 100%; }
.rtw a { color: var(--rtw-navy); }
.rtw a:hover { color: var(--rtw-primary); }
.rtw input[type=range] { width: 100%; accent-color: var(--rtw-primary); }

.rtw-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */
.rtw-h1 { font-family: var(--rtw-heading); font-weight: 800; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; max-width: 18ch; text-wrap: balance; }
.rtw-h2 { font-family: var(--rtw-heading); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 12px; }
.rtw-h2--invert { color: #fff; }
.rtw-h3 { font-family: var(--rtw-heading); font-weight: 800; font-size: 24px; line-height: 1.15; margin: 0 0 6px; }
.rtw-kicker { font-family: var(--rtw-heading); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--rtw-primary); margin: 0 0 10px; }
.rtw-kicker--accent { color: var(--rtw-accent); }
.rtw-sub { font-size: 18px; line-height: 1.55; color: var(--rtw-body); margin: 0; }
.rtw-sub--lead { margin-bottom: 28px; max-width: 52ch; }
.rtw-sub--sm { font-size: 16px; line-height: 1.5; margin: 0 0 18px; }
.rtw-head { max-width: 60ch; margin-bottom: 34px; }
.rtw-head--tight { margin-bottom: 0; }
.rtw-q { font-family: var(--rtw-heading); font-weight: 700; font-size: 18px; margin: 0 0 10px; }
.rtw-hint { font-size: 14px; color: var(--rtw-body); margin: 6px 0 0; }
.rtw-fine { font-size: 14px; line-height: 1.5; color: var(--rtw-body); margin: 20px 0 0; border-top: 1px solid var(--rtw-line); padding-top: 16px; }

/* ---------- buttons ---------- */
.rtw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--rtw-body-font); font-weight: 700; font-size: 16px; padding: 11px 18px; border-radius: var(--rtw-radius); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.rtw-btn--lg { font-size: 17px; padding: 15px 26px; }
.rtw-btn--round { border-radius: 999px; font-weight: 600; padding: 13px 22px; }
.rtw-btn--primary { background: var(--rtw-primary); border-color: var(--rtw-primary); color: #fff; box-shadow: 0 6px 18px rgba(0,114,188,.35); }
.rtw-btn--primary:hover { background: var(--rtw-primary-dark); border-color: var(--rtw-primary-dark); color: #fff; }
.rtw-btn--navy { background: var(--rtw-navy); border-color: var(--rtw-navy); color: #fff; margin-top: 18px; }
.rtw-btn--navy:hover { background: var(--rtw-primary); border-color: var(--rtw-primary); color: #fff; }
.rtw-btn--outline { background: #fff; border-color: var(--rtw-line); color: var(--rtw-navy); }
.rtw-btn--outline:hover { border-color: var(--rtw-navy); color: var(--rtw-navy); }
.rtw-btn--outline-blue { background: transparent; border-color: var(--rtw-primary); color: var(--rtw-primary); }
.rtw-btn--outline-blue:hover { background: var(--rtw-primary); color: #fff; }
.rtw-btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.rtw-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.rtw-btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.rtw-btnrow--sm { margin-bottom: 0; gap: 10px; }

/* pills */
.rtw-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rtw-pills--gap { margin-bottom: 26px; }
.rtw-pill { font: inherit; font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 999px; cursor: pointer; border: 2px solid var(--rtw-line); background: #fff; color: var(--rtw-navy); transition: all .18s; }
.rtw-pill:hover { border-color: var(--rtw-navy); }
.rtw-pill.is-active { background: var(--rtw-navy); border-color: var(--rtw-navy); color: #fff; }

/* ---------- hero ---------- */
.rtw-hero { position: relative; background: var(--rtw-navy); color: #fff; overflow: hidden; }
.rtw-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.rtw-hero__bg--fallback { opacity: .26; }
.rtw-hero.has-video .rtw-hero__bg--fallback { display: none; }
.rtw-hero:not(.has-video) video.rtw-hero__bg { display: none; }
.rtw-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--rtw-navy) 20%, rgba(30,45,59,.8) 70%, rgba(30,45,59,.5) 100%); }
.rtw-hero__inner { position: relative; padding-top: 64px; padding-bottom: 60px; }
.rtw-hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--rtw-light); max-width: 58ch; margin: 0 0 28px; }
.rtw-hero__worker { display: inline-flex; font-size: 16px; font-weight: 600; color: var(--rtw-accent); text-decoration: underline; }
.rtw-hero__worker:hover { color: #fff; }

/* ---------- value band ---------- */
.rtw-band { background: var(--rtw-primary); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.rtw-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.rtw-band__item { display: flex; gap: 12px; align-items: flex-start; }
.rtw-band__n { font-family: var(--rtw-heading); font-weight: 800; font-size: 26px; line-height: 1; color: var(--rtw-accent); }
.rtw-band__item b { display: block; font-size: 16px; }
.rtw-band__item span { display: block; font-size: 15px; line-height: 1.4; color: var(--rtw-accent); }

/* ---------- sections + layout ---------- */
.rtw-sec { padding: 68px 0; border-bottom: 1px solid var(--rtw-line); }
.rtw-sec--white { background: #fff; }
.rtw-sec--light { background: var(--rtw-light); }
.rtw-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; align-items: start; }
.rtw-two--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; }
.rtw-two--workers { gap: 40px; }
.rtw-stack { display: flex; flex-direction: column; gap: 30px; }
.rtw-sticky { position: sticky; top: 20px; }
@media (max-width: 759px) { .rtw-sticky { position: static; } }

.rtw-card { background: #fff; border: 1px solid var(--rtw-line); border-radius: var(--rtw-radius); padding: 28px; }
.rtw-card--muted { background: var(--rtw-light); padding: 26px; }
.rtw-sec--light .rtw-card--muted { background: #fff; }

/* ---------- estimator ---------- */
.rtw-est { display: flex; flex-direction: column; gap: 26px; margin: 0; }
.rtw-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rtw-field__row .rtw-q { margin: 0; }
.rtw-field__val { font-family: var(--rtw-heading); font-weight: 800; font-size: 22px; color: var(--rtw-primary); }
.rtw-est__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rtw-est__lbl { display: block; font-size: 14px; color: var(--rtw-accent); margin-bottom: 4px; }
.rtw-est__big { display: block; font-family: var(--rtw-heading); font-weight: 800; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.rtw-est__big--green { color: var(--rtw-green); }
.rtw-kv { margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.rtw-kv > div { display: flex; justify-content: space-between; gap: 14px; font-size: 16px; line-height: 1.45; border-bottom: 1px solid var(--rtw-line); padding-bottom: 12px; }
.rtw-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rtw-kv dt { color: var(--rtw-body); margin: 0; }
.rtw-kv dd { margin: 0; font-weight: 700; white-space: nowrap; }

/* ---------- result panels ---------- */
.rtw-panel { border: 1px solid var(--rtw-line); border-radius: var(--rtw-radius); overflow: hidden; background: #fff; }
.rtw-panel__head { color: #fff; padding: 22px 26px; }
.rtw-panel__head--navy { background: var(--rtw-navy); }
.rtw-panel__head--blue { background: var(--rtw-primary); }
.rtw-panel__kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; color: var(--rtw-accent); }
.rtw-panel__head--blue .rtw-panel__kicker { color: rgba(255,255,255,.85); }
.rtw-panel__title { font-family: var(--rtw-heading); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; margin: 0; }
.rtw-panel__body { padding: 24px 26px; }
.rtw-panel__text { font-size: 17px; line-height: 1.55; color: var(--rtw-body); margin: 0 0 20px; }

/* ---------- steps ---------- */
.rtw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rtw-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 26px; position: relative; }
.rtw-step__n { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--rtw-navy); color: #fff; font-family: var(--rtw-heading); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.rtw-step:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: -26px; width: 2px; background: #DCE3E8; }
.rtw-step > div { padding-top: 8px; }
.rtw-step__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 5px; }
.rtw-step h3 { font-family: var(--rtw-heading); font-weight: 700; font-size: 20px; margin: 0; }
.rtw-step__when { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rtw-primary); }
.rtw-step p { font-size: 17px; line-height: 1.55; color: var(--rtw-body); margin: 0; }

/* ---------- "what we need" ---------- */
.rtw-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rtw-needs li { display: flex; gap: 12px; align-items: flex-start; background: var(--rtw-light); border: 1px solid var(--rtw-line); border-radius: var(--rtw-radius); padding: 14px 16px; }
.rtw-needs__l { font-family: var(--rtw-heading); font-weight: 800; color: var(--rtw-primary); font-size: 18px; line-height: 1.3; }
.rtw-needs b { display: block; font-size: 16px; }
.rtw-needs span:not(.rtw-needs__l) { display: block; font-size: 15px; color: var(--rtw-body); line-height: 1.45; }
.rtw-needs a { color: var(--rtw-primary); font-weight: 700; }

/* ---------- guide band ---------- */
.rtw-guide { background: var(--rtw-warning); overflow: hidden; }
.rtw-guide__inner { max-width: 1320px; margin: 0 auto; padding: 44px 24px; display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center; }
.rtw-guide__cover { flex: 0 0 auto; width: 120px; height: 150px; background: #fff; border-radius: 6px; box-shadow: 0 10px 24px rgba(30,45,59,.22); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.rtw-guide__cover-title { font-family: var(--rtw-heading); font-weight: 800; font-size: 12px; line-height: 1.2; color: var(--rtw-navy); }
.rtw-guide__cover-lines { display: flex; flex-direction: column; gap: 4px; }
.rtw-guide__cover-lines i { display: block; height: 4px; background: var(--rtw-line); border-radius: 2px; }
.rtw-guide__cover-lines i:nth-child(2) { width: 80%; }
.rtw-guide__cover-lines i:nth-child(3) { width: 60%; }
.rtw-guide__cover-tag { font-size: 10px; font-weight: 700; color: var(--rtw-primary); }
.rtw-guide__copy { flex: 1 1 380px; min-width: 0; }
.rtw-guide__copy h2 { font-family: var(--rtw-heading); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--rtw-primary); margin: 0 0 10px; max-width: 24ch; }
.rtw-guide__copy p { font-style: oblique; font-size: 16px; line-height: 1.5; color: var(--rtw-primary); margin: 0; max-width: 60ch; }
.rtw-guide__actions { flex: 0 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.rtw-guide__actions .rtw-btn { display: flex; box-shadow: none; }

/* ---------- matcher ---------- */
.rtw-tasks { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rtw-tasks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; padding: 12px 14px; background: var(--rtw-light); border-radius: var(--rtw-radius); animation: rtwFadeIn .35s ease both; }
.rtw-tasks li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rtw-primary); flex: none; margin-top: 9px; }

/* ---------- workers ---------- */
.rtw-workers { background: var(--rtw-navy); color: #fff; padding: 68px 0; }
.rtw-workers__lede { font-size: 18px; line-height: 1.55; color: var(--rtw-light); margin: 0 0 18px; max-width: 54ch; }
.rtw-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rtw-points li { background: rgba(255,255,255,.06); border: 1px solid rgba(128,183,227,.3); border-radius: var(--rtw-radius); padding: 16px 18px; }
.rtw-points b { display: block; font-family: var(--rtw-heading); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.rtw-points span { display: block; font-size: 16px; line-height: 1.5; color: var(--rtw-light); }

/* ---------- motion ---------- */
@keyframes rtwSlideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rtwFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rtwHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rtw-anim { animation: rtwHeroIn .7s cubic-bezier(.2,.7,.3,1) both; }
.rtw-anim--1 { animation-duration: .6s; }
.rtw-anim--2 { animation-delay: .08s; }
.rtw-anim--3 { animation-delay: .16s; }
.rtw-anim--4 { animation-delay: .24s; }
/* [data-reveal] starts hidden only when JS has added .js-reveal to <html>; fails open otherwise. */
.js-reveal .rtw [data-reveal] { opacity: 0; }
.js-reveal .rtw [data-reveal].is-in { opacity: 1; animation: rtwSlideUp .55s cubic-bezier(.2,.7,.3,1) both; }
.js-reveal .rtw [data-reveal].is-in--still { opacity: 1; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .rtw *, .rtw *::before, .rtw *::after { animation: none !important; transition: none !important; }
  .js-reveal .rtw [data-reveal] { opacity: 1; }
}
@media print {
  .rtw [data-reveal] { opacity: 1 !important; animation: none !important; }
  .rtw-hero__bg { display: none; }
}


/* --- theme collision: heading colour ---------------------------------
   The design sets colour on the inverted sections and lets headings
   inherit. The ICA theme sets `color` on h1/h2 directly, and a direct
   rule beats inheritance, so inverted headings rendered dark-on-dark.
   -------------------------------------------------------------------- */
.rtw-hero .rtw-h1, .rtw-hero .rtw-hero__lede { color: #fff; }
.rtw-workers .rtw-h2, .rtw-h2--invert { color: #fff; }
.rtw-band__item b { color: #fff; }

/* Band numbering as a counter — MODX has no lpad output modifier, and a
   counter renumbers correctly if an editor reorders or removes a row. */
.rtw-band__grid { counter-reset: rtwband; }
.rtw-band__item { counter-increment: rtwband; }
.rtw-band__n::before { content: counter(rtwband, decimal-leading-zero); }

/* Free-text body region ([[*content]]). */
.rtw-freetext { margin-top: 18px; line-height: 1.65; }
.rtw-freetext p:last-child { margin-bottom: 0; }

/* reveal fail-open — the site's SAL can leave elements at opacity:0. */
.rtw [data-sal] { opacity: 1 !important; transform: none !important; }
@media print { .rtw [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* --- specificity fix for button colours -------------------------------
   The design export contains `.rtw a { color: var(--rtw-navy) }` (line 30 of
   the source). At 0,1,1 that outranks every `.rtw-btn--*` colour rule at
   0,1,0, so the ghost button and the hero worker link render dark-on-dark
   — in the original export too, not just here. These restate the design's
   own values at a specificity that actually wins. Values are copied from
   the export verbatim; nothing is redesigned.
   -------------------------------------------------------------------- */
.rtw a.rtw-btn--primary { color: #fff; }
.rtw a.rtw-btn--navy    { color: #fff; }
.rtw a.rtw-btn--ghost   { color: #fff; }
.rtw a.rtw-btn--outline { color: var(--rtw-navy); }
.rtw a.rtw-hero__worker { color: var(--rtw-accent); }
.rtw a.rtw-hero__worker:hover { color: #fff; }

/* === 2026-10-04 — hero video play control + worker-band photo ==========
   Appended. Nothing above this line was changed.
   -------------------------------------------------------------------- */

/* Hero play control. Same shape as the Company and Drug Protocols heroes:
   yellow disc, navy triangle, white label. The site's GLightbox opens it
   (index.esm.js lazy-loads it for any .glightbox link). The template emits
   rtw-play--off instead of glightbox while hero-pop-video is empty. */
.rtw-hero .rtw-btnrow { align-items: center; }
.rtw-play { display: inline-flex; align-items: center; gap: 12px; font-family: var(--rtw-body-font); font-weight: 700; font-size: 17px; line-height: 1.2; padding: 6px 8px; }
.rtw a.rtw-play { color: #fff; text-decoration: none; }
.rtw a.rtw-play:hover { color: var(--rtw-warning); }
.rtw a.rtw-play:focus-visible { color: var(--rtw-warning); outline: 3px solid #fff; outline-offset: 4px; border-radius: 999px; }
.rtw-play__disc { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--rtw-warning); display: inline-flex; align-items: center; justify-content: center; animation: rtwPlayPulse 2.4s ease-out infinite; }
.rtw-play__tri { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--rtw-navy); margin-left: 4px; }
@keyframes rtwPlayPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 64, .6); } 70% { box-shadow: 0 0 0 12px rgba(255, 210, 64, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 64, 0); } }
.rtw-play--off { display: none !important; }
@media (prefers-reduced-motion: reduce) { .rtw-play__disc { animation: none; } }

/* GLightbox video sizing. data-width/data-height do not size a video slide
   (the instance's videosWidth wins). Same rule as company-overview.css and
   employee-health.css. .glightbox-container is a body child, so it cannot be
   scoped under .rtw. This stylesheet loads only on this template. */
.glightbox-container .gslide-video { max-width: min(1100px, 92vw) !important; }

/* Worker band photo (bottom-img). Anchored right so the worker stays in
   frame. The scrim is solid navy under the copy and lightens over him.
   Below 992px the photo is behind the copy everywhere, so the scrim goes
   even and heavy enough that white text keeps contrast on the bright
   loading-dock door. With bottom-img empty the band is plain navy as before. */
.rtw-workers { position: relative; overflow: hidden; isolation: isolate; }
.rtw-workers > .rtw-wrap { position: relative; z-index: 2; }
.rtw .rtw-workers__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 22%; }
.rtw-workers__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--rtw-navy) 0%, var(--rtw-navy) 36%, rgba(30, 45, 59, .84) 52%, rgba(30, 45, 59, .4) 72%, rgba(30, 45, 59, .18) 100%); }
.rtw-workers--plain .rtw-workers__bg,
.rtw-workers--plain .rtw-workers__scrim { display: none; }
@media (min-width: 992px) {
  .rtw-workers--photo > .rtw-wrap > * { max-width: 580px; }
}
@media (max-width: 991.98px) {
  .rtw-workers__scrim { background: rgba(30, 45, 59, .84); }
}

/* === 2026-10-04 — worker points as cards ===============================
   The design marks this list `rtw-points`, and the card rules for it ship
   above, but the template emitted only `rtw-workers__list`, which has no CSS,
   so the points rendered as theme bullets. The template now carries both
   classes. The design put the button in the left column; here it follows the
   list, so the list needs bottom spacing the design never had. */
.rtw-workers .rtw-points { margin: 0 0 28px; }

/* === 2026-10-05 — hide GLightbox prev/next ==============================
   The lightbox holds one video, so the arrows are dead controls. Same rule
   as protocols.css. .glightbox-container is a body child and cannot be
   scoped under .rtw; this stylesheet loads only on this template. */
.glightbox-container .gprev,
.glightbox-container .gnext { display: none !important; }

/* === 2026-10-05 — hero: play control as a button ==========================
   The "What lost time costs" button is gone. The play control now carries
   rtw-btn rtw-btn--ghost rtw-btn--lg, so it shares the primary button's
   height, radius and type and sits on the same centre line. Before this it was
   a bare link 9px off the button's centre.
   Padding cannot be set here: the theme bundle pins `.rtw-btn` padding with
   !important inside `@layer zoe`, and layered !important beats any unlayered
   rule. The disc is sized to fit that padding instead: 26px plus 11px + 11px
   padding plus a 2px + 2px border gives the primary button's ~52px.
   Phones: both buttons go full width and drop to 16px with normal letter
   spacing (15px under 390px) so the label stays on one line; the theme's
   0.4px letter spacing alone pushed it over by 0.2px at 375. */
.rtw-hero .rtw-btnrow { align-items: stretch; }
.rtw a.rtw-play.rtw-btn { gap: 10px; }
.rtw-btn .rtw-play__disc { width: 26px; height: 26px; }
.rtw-btn .rtw-play__tri { border-width: 5px 0 5px 9px; margin-left: 2px; }
.rtw a.rtw-play.rtw-btn:focus-visible { border-radius: var(--rtw-radius); }
@media (max-width: 575.98px) {
  .rtw-hero .rtw-btnrow > .rtw-btn { flex: 1 1 100%; justify-content: center; min-height: 52px; font-size: 16px; letter-spacing: 0; }
  .rtw-hero .rtw-play { text-wrap: balance; }
}
@media (max-width: 389.98px) {
  .rtw-hero .rtw-btnrow > .rtw-btn { font-size: 15px; }
}

/* === 2026-10-05 — guide band illustration ==============================
   getSvg emits an inline <svg> with only a viewBox, and .rtw-guide__art had
   no rule, so as a content-sized flex item it collapsed to 0px and the band
   showed text only. (The design styled a .rtw-guide__cover mock-PDF here,
   which the template never emitted.) The image is a square icon, so it gets
   a fixed square slot, vertically centred, rather than the 240px bleeding
   slot the Walk-In and Home bands give their illustrations. */
.rtw-guide__art { flex: 0 0 160px; width: 160px; }
.rtw-guide__art svg { display: block; width: 100%; height: auto; }
@media (max-width: 575.98px) {
  .rtw-guide__art { flex-basis: 96px; width: 96px; }
}

/* === 2026-10-05 — guide band cover thumbnail ===========================
   Replaces the icon slot. The supplied mockup sits on white, so it is framed
   as a white card on the yellow band rather than left as a bare white
   rectangle. Links to the same PDF as the button. Hidden while print-thumb is
   empty (the template emits rtw-guide__thumb--off). */
.rtw-guide__thumb { flex: 0 0 300px; display: block; background: #fff; border-radius: var(--rtw-radius); overflow: hidden; box-shadow: 0 14px 30px rgba(30, 45, 59, .18); transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s; }
.rtw-guide__thumb img { display: block; width: 100%; height: auto; }
.rtw-guide__thumb:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(30, 45, 59, .24); }
.rtw-guide__thumb:focus-visible { outline: 3px solid var(--rtw-navy); outline-offset: 4px; }
.rtw-guide__thumb--off { display: none; }
@media (max-width: 575.98px) {
  .rtw-guide__thumb { flex-basis: 100%; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .rtw-guide__thumb { transition: none; }
  .rtw-guide__thumb:hover { transform: none; }
}