/* The website's homepage (index.php), in the app's look (ioshome.php, app/app.css): the same tokens,
   star tiles, chips, cards and bars, laid out for a wide screen. At phone width it falls back to the
   app's single column. The tokens below match app.css; change them together. */

:root
{
  --rmr_red: #E03A57;
  --rmr_red_dark: #C02945;
  --rmr_red_soft: #FCE9EC;
  --rmr_navy: #425E73;
  --rmr_slate: #16222C;
  --rmr_gold: #F2C14E;
  --rmr_gold_dark: #B8860B;
  --rmr_ink: #1B2730;
  --rmr_muted: #5E6B75;
  --rmr_line: #E8E3DF;
  --rmr_bg: #F7F5F3;
  --rmr_green: #1F6B47;
  --rmr_green_soft: #E8F4EE;
  --page: 1180px;
}

*
{
  box-sizing: border-box;
}

html
{
  background: var(--rmr_bg);
  color: var(--rmr_ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body
{
  margin: 0;
  overflow-x: hidden;
}

a
{
  color: inherit;
  text-decoration: none;
}

.wrap
{
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 32px;
}

/* ── the bar across the top ── */

.top_nav
{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247,245,243,0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.top_nav.scrolled
{
  border-bottom-color: var(--rmr_line);
}

.top_nav .wrap
{
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.brand
{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img
{
  width: 34px;
  height: 34px;
}

.wordmark
{
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--rmr_slate);
}

.wordmark span
{
  color: var(--rmr_gold_dark);
}

.nav_links
{
  display: flex;
  gap: 26px;
  margin-left: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rmr_muted);
}

.nav_links a:hover
{
  color: var(--rmr_slate);
}

.nav_actions
{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ── buttons (the app's red tile button and its white twin) ── */

.btn
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border-radius: 13px;
  border: 2px solid transparent;
  background: var(--rmr_red);
  color: white;
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(224,58,87,0.24);
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}

.btn:hover
{
  background: var(--rmr_red_dark);
}

.btn:active
{
  transform: translateY(1px);
}

.btn svg
{
  width: 19px;
  height: 19px;
}

.btn.white
{
  background: white;
  color: var(--rmr_slate);
  border-color: rgba(22,34,44,0.14);
  box-shadow: 0 4px 14px rgba(22,34,44,0.06);
}

.btn.white:hover
{
  background: #FCFBFA;
}

.btn.plain
{
  background: transparent;
  color: var(--rmr_slate);
  box-shadow: none;
}

.btn.plain:hover
{
  background: rgba(22,34,44,0.05);
}

.btn.big
{
  height: 56px;
  padding: 0 28px;
  font-size: 17px;
  border-radius: 15px;
}

/* ── the hero ── */

.hero
{
  position: relative;
  padding: 64px 0 72px;
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(224,58,87,0.13), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(66,94,115,0.10), transparent 60%);
}

.hero .wrap
{
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}

.eyebrow
{
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rmr_red_dark);
}

h1
{
  margin: 0;
  font-size: clamp(42px, 5.4vw, 66px);
  line-height: 1.05;
  letter-spacing: -2px;
  font-weight: 800;
  color: var(--rmr_slate);
}

h1 span
{
  color: var(--rmr_red);
}

.hero_lead
{
  max-width: 520px;
  margin: 20px 0 30px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--rmr_muted);
}

/* the app's two search fields, side by side, with the button on the end */
.search_bar
{
  position: relative;
  z-index: 15;   /* over the page, under the sticky nav (20) */
  display: flex;
  align-items: stretch;
  max-width: 640px;
  padding: 7px;
  border-radius: 18px;
  background: white;
  border: 1.5px solid var(--rmr_line);
  box-shadow: 0 18px 40px rgba(22,34,44,0.10), 0 2px 6px rgba(22,34,44,0.04);
}

.search_bar:focus-within
{
  border-color: var(--rmr_red);
}

.search_field
{
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}

.search_field + .search_field
{
  border-left: 1px solid var(--rmr_line);
}

.search_field svg
{
  flex: none;
  width: 20px;
  height: 20px;
}

.search_field input
{
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--rmr_ink);
}

.search_field input::placeholder
{
  color: #9AA4AC;
}

.search_bar .btn
{
  height: auto;
  box-shadow: none;
}

/* the dropdown under a search field as they type: specialties and programs, or places */
.search_drop
{
  position: absolute;
  top: calc(100% + 14px);
  left: -7px;
  width: max(100% + 14px, 360px);
  max-height: min(440px, 70vh);
  overflow-y: auto;
  padding: 8px;
  border-radius: 18px;
  background: white;
  border: 1.5px solid var(--rmr_line);
  box-shadow: 0 24px 48px rgba(22,34,44,0.16), 0 3px 8px rgba(22,34,44,0.06);
  animation: drop_in 0.14s ease-out;
}

.search_field + .search_field .search_drop
{
  left: auto;
  right: -7px;
}

@keyframes drop_in
{
  from { opacity: 0; transform: translateY(-4px); }
}

.sd_label
{
  padding: 10px 10px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rmr_muted);
}

.sd_item
{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--rmr_ink);
}

.sd_item.on
{
  background: var(--rmr_bg);
}

.sd_icon,
.sd_badge
{
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.sd_icon svg
{
  width: 18px;
  height: 18px;
}

.sd_red { background: var(--rmr_red_soft); }
.sd_navy { background: #EBF0F3; }
.sd_blue { background: #E7F0FB; }

.sd_badge
{
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sd_text
{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sd_name
{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 500;
}

.sd_name b
{
  font-weight: 800;
  color: var(--rmr_red);
}

.sd_sub
{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--rmr_muted);
}

.sd_count
{
  flex: none;
  font-size: 12.5px;
  color: var(--rmr_muted);
}

.sd_rating
{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13.5px;
  font-weight: 800;
}

.sd_rating i
{
  font-style: normal;
  color: var(--rmr_gold);
}

.sd_near .sd_name
{
  font-weight: 700;
  color: #1F6FD1;
}

.sd_all
{
  justify-content: space-between;
  margin-top: 4px;
  border-top: 1px solid var(--rmr_line);
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rmr_red);
}

.sd_all svg
{
  flex: none;
  width: 16px;
  height: 16px;
}

.sd_wait
{
  padding: 10px;
  font-size: 14px;
  color: var(--rmr_muted);
}

.chips
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.chip
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  background: white;
  border: 1px solid var(--rmr_line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rmr_ink);
}

a.chip:hover
{
  border-color: rgba(22,34,44,0.25);
}

.chip svg
{
  width: 14px;
  height: 14px;
}

.chip_label
{
  align-self: center;
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rmr_muted);
}

/* the fanned review cards (the app's welcome card, bigger) */
.hero_art
{
  position: relative;
  height: 470px;
}

.card
{
  position: absolute;
  background: white;
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(22,34,44,0.13), 0 2px 6px rgba(22,34,44,0.05);
}

.card_back
{
  inset: 34px 0 40px 46px;
  background: var(--rmr_red_soft);
  transform: rotate(6deg);
  box-shadow: 0 14px 30px rgba(22,34,44,0.08);
}

.card_main
{
  inset: 0 52px auto 0;
  padding: 26px 26px 24px;
  animation: rise 0.8s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes rise
{
  from
  {
    transform: translateY(16px);
    opacity: 0;
  }
}

.card_head
{
  display: flex;
  align-items: center;
  gap: 14px;
}

.badge
{
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.card_title
{
  flex: 1;
  min-width: 0;
}

.card_title b
{
  display: block;
  font-size: 17px;
  line-height: 1.25;
  color: var(--rmr_slate);
}

.card_title small
{
  font-size: 13.5px;
  color: var(--rmr_muted);
}

.card_score
{
  flex: none;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--rmr_slate);
}

.card_stars
{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 18px;
  font-size: 14px;
  color: var(--rmr_muted);
}

.card_quote
{
  position: absolute;
  right: 0;
  bottom: 18px;
  width: 300px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--rmr_slate);
  color: white;
  box-shadow: 0 20px 40px rgba(22,34,44,0.25);
  animation: rise 0.8s 0.25s cubic-bezier(.2,.8,.2,1) both;
}

.card_quote p
{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
}

.card_quote small
{
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
}

/* ── stars: a white star on a red tile, filled to the rating (--f) ── */

.stars
{
  display: inline-flex;
  gap: 0.14em;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
}

.stars i
{
  --f: 100%;
  position: relative;
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.2em;
  background: linear-gradient(90deg, var(--rmr_red) var(--f), #DDD8D3 var(--f));
}

.stars i::after
{
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.6l2.75 5.95 6.5.72-4.85 4.4 1.33 6.4L12 16.8l-5.73 3.27 1.33-6.4-4.85-4.4 6.5-.72z'/%3E%3C/svg%3E") center / 74% no-repeat;
}

.stars.big
{
  font-size: 20px;
}

/* ── horizontal bars (the program card's) ── */

.bars
{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px 14px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--rmr_muted);
}

.bars b
{
  font-size: 13.5px;
  color: var(--rmr_ink);
}

.bar
{
  height: 8px;
  border-radius: 4px;
  background: #EEF1F3;
  overflow: hidden;
}

.bar i
{
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--rmr_navy);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
}

.bar i.red
{
  background: var(--rmr_red);
}

.seen .bar i
{
  transform: scaleX(1);
}

/* ── the numbers strip ── */

.stats
{
  border-top: 1px solid var(--rmr_line);
  border-bottom: 1px solid var(--rmr_line);
  background: white;
}

.stats .wrap
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat
{
  padding: 26px 0;
  text-align: center;
}

.stat + .stat
{
  border-left: 1px solid var(--rmr_line);
}

.stat b
{
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--rmr_slate);
}

.stat span
{
  font-size: 14px;
  color: var(--rmr_muted);
}

/* ── sections ── */

.section
{
  padding: 88px 0 0;
}

.section:last-of-type
{
  padding-bottom: 88px;
}

.section_head
{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

h2
{
  margin: 0;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: var(--rmr_slate);
}

h2 span
{
  color: var(--rmr_red);
}

.section_lead
{
  max-width: 560px;
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--rmr_muted);
}

.link_more
{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rmr_red_dark);
}

.link_more svg
{
  width: 16px;
  height: 16px;
}

/* specialty tiles */
.specialties
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.specialty
{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 4px 14px rgba(22,34,44,0.04);
  transition: transform 0.15s, box-shadow 0.15s;
}

.specialty:hover
{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(22,34,44,0.09);
}

.specialty .icon
{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--rmr_red_soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.specialty .icon svg
{
  width: 25px;
  height: 25px;
}

.specialty b
{
  font-size: 17px;
  color: var(--rmr_slate);
}

.specialty span
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--rmr_muted);
}

.specialty span svg
{
  width: 16px;
  height: 16px;
}

/* program cards (the app's search result) */
.programs
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.program
{
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 4px 14px rgba(22,34,44,0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}

.program:hover
{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(22,34,44,0.09);
}

.program_top
{
  display: flex;
  gap: 14px;
}

.program_top .badge
{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 16px;
}

.program_name
{
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--rmr_slate);
}

.rating_line
{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--rmr_muted);
}

.rating_line b
{
  color: var(--rmr_ink);
}

.program .bars
{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rmr_line);
  font-size: 13px;
  gap: 9px 12px;
}

.program_facts
{
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 13.5px;
  color: var(--rmr_ink);
}

.program_facts div
{
  display: flex;
  gap: 9px;
}

.program_facts svg
{
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.program_facts .muted
{
  color: var(--rmr_muted);
}

/* the five ratings, as the app's vertical bar chart */
.scorecard
{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.category_list
{
  display: grid;
  gap: 4px;
  margin-top: 26px;
}

.category
{
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rmr_line);
}

.category:first-child
{
  border-top: 0;
}

.category .dot
{
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 4px;
  background: var(--rmr_navy);
}

.category .dot.red
{
  background: var(--rmr_red);
}

.category b
{
  display: block;
  font-size: 16px;
  color: var(--rmr_slate);
}

.category span
{
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--rmr_muted);
}

.panel
{
  padding: 28px;
  border-radius: 24px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 18px 40px rgba(22,34,44,0.07);
}

.panel_label
{
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--rmr_muted);
}

.panel_label span
{
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.vchart
{
  position: relative;
  height: 260px;
  margin: 34px 0 0 26px;
}

.vchart_grid
{
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #EEEAE6;
}

.vchart_grid span
{
  position: absolute;
  left: -26px;
  top: -8px;
  width: 16px;
  text-align: right;
  font-size: 11px;
  color: #9AA4AC;
}

.vchart_grid.base
{
  border-top-color: #C9C3BD;
}

.vchart_cols
{
  position: absolute;
  inset: 0;
  display: flex;
  gap: 6px;
}

.vcol
{
  position: relative;
  flex: 1;
}

.vbar
{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  height: var(--h);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  border-radius: 5px 5px 0 0;
  background: var(--rmr_navy);
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d);
}

.vcol.overall .vbar
{
  background: var(--rmr_red);
}

.vval
{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--h) + 8px);
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--rmr_slate);
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: calc(var(--d) + 0.55s);
}

.seen .vbar
{
  transform: translateX(-50%) scaleY(1);
}

.seen .vval
{
  opacity: 1;
}

.vchart_labels
{
  display: flex;
  gap: 6px;
  margin: 10px 0 0 26px;
}

.vchart_labels div
{
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--rmr_ink);
}

.chart_note
{
  margin-top: 18px;
  font-size: 13px;
  color: #9AA4AC;
}

/* reviews (the app's review card) */
.reviews
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.review
{
  padding: 22px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 4px 14px rgba(22,34,44,0.05);
}

.review_head
{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--rmr_muted);
}

.avatar
{
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background: var(--rmr_bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar svg
{
  width: 19px;
  height: 19px;
}

.review_who
{
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.review_who b
{
  font-size: 15px;
  color: var(--rmr_ink);
}

.review_program
{
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rmr_red_dark);
}

.review p
{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--rmr_ink);
}

.tags
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.tag
{
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.tag.pro
{
  background: var(--rmr_green_soft);
  color: var(--rmr_green);
}

.tag.con
{
  background: var(--rmr_red_soft);
  color: #A3243B;
}

/* the three vantage points (the app's list group) and how it works */
.split
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.list_group
{
  margin-top: 26px;
  border-radius: 18px;
  background: white;
  border: 1.5px solid var(--rmr_line);
  overflow: hidden;
}

.lg_row
{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.lg_row + .lg_row
{
  border-top: 1px solid var(--rmr_line);
}

.lg_icon
{
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--rmr_bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg_icon svg
{
  width: 24px;
  height: 24px;
}

.lg_row b
{
  display: block;
  font-size: 16.5px;
  color: var(--rmr_slate);
}

.lg_row span
{
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--rmr_muted);
}

.steps
{
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.step
{
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 18px;
  background: white;
  border: 1px solid var(--rmr_line);
}

.step_num
{
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background: var(--rmr_red);
  color: white;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step b
{
  display: block;
  font-size: 16.5px;
  color: var(--rmr_slate);
}

.step span
{
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--rmr_muted);
}

.step .step_num
{
  font-size: 15px;
  line-height: 1;
  color: white;
}

/* the app on a phone */
.app_band
{
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(224,58,87,0.30), transparent 60%),
    var(--rmr_slate);
  color: white;
}

.app_band .inner
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 64px 0;
}

.app_band h2
{
  color: white;
}

.app_band .section_lead
{
  color: rgba(255,255,255,0.72);
}

.app_band ul
{
  margin: 22px 0 30px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 15.5px;
  color: rgba(255,255,255,0.88);
}

.app_band li
{
  display: flex;
  gap: 10px;
  align-items: center;
}

.app_band li svg
{
  flex: none;
  width: 20px;
  height: 20px;
}

.store_badge
{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border-radius: 13px;
  background: white;
  color: var(--rmr_slate);
  font-weight: 700;
}

.store_badge svg
{
  width: 22px;
  height: 22px;
}

.store_badge small
{
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--rmr_muted);
}

.phones
{
  position: relative;
  height: 470px;
}

.phone
{
  position: absolute;
  bottom: -60px;
  width: 248px;
  padding: 9px;
  border-radius: 44px;
  background: #0B1218;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}

.phone img
{
  display: block;
  width: 100%;
  border-radius: 36px;
}

.phone.one
{
  left: 6%;
  transform: rotate(-5deg);
}

.phone.two
{
  right: 4%;
  bottom: -20px;
  transform: rotate(5deg);
}

/* the closing ask */
.cta
{
  text-align: center;
  padding: 64px 32px;
  border-radius: 32px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(224,58,87,0.12), transparent 70%),
    white;
  border: 1px solid var(--rmr_line);
}

.cta h2
{
  max-width: 760px;
  margin: 0 auto;
}

.cta .section_lead
{
  margin: 14px auto 28px;
}

.cta .buttons
{
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* footer */
.footer
{
  margin-top: 0;
  padding: 40px 0 48px;
  border-top: 1px solid var(--rmr_line);
}

.footer .wrap
{
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--rmr_muted);
}

.footer nav
{
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.footer nav a:hover
{
  color: var(--rmr_slate);
}

/* things slide up as they scroll into view */
.reveal
{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(.2,.8,.2,1);
}

.reveal.seen
{
  opacity: 1;
  transform: none;
}

/* ── narrower screens ── */

@media (max-width: 1020px)
{
  .hero .wrap,
  .scorecard,
  .split,
  .app_band .inner
  {
    grid-template-columns: 1fr;
  }

  .hero_art
  {
    max-width: 520px;
  }

  .programs,
  .reviews
  {
    grid-template-columns: 1fr 1fr;
  }

  .specialties
  {
    grid-template-columns: 1fr 1fr;
  }

  .phones
  {
    height: 420px;
  }
}

/* phone width: the app's single column */
@media (max-width: 680px)
{
  .wrap
  {
    padding: 0 18px;
  }

  .nav_links,
  .nav_actions .plain
  {
    display: none;
  }

  .hero
  {
    padding: 36px 0 48px;
  }

  h1
  {
    letter-spacing: -1.4px;
  }

  .hero_lead
  {
    font-size: 17px;
  }

  .search_bar
  {
    flex-direction: column;
    padding: 0;
  }

  .search_field + .search_field
  {
    border-left: 0;
    border-top: 1px solid var(--rmr_line);
  }

  .search_bar .btn
  {
    height: 52px;
    margin: 8px;
  }

  .search_drop,
  .search_field + .search_field .search_drop
  {
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: 100%;
  }

  /* the nav keeps the brand and an icon-only Write a review */
  .nav_actions .btn .label
  {
    display: none;
  }

  .nav_actions .btn
  {
    width: 46px;
    padding: 0;
  }

  /* the fanned cards stack: the program, then the quote under it */
  .hero_art
  {
    height: auto;
  }

  .card_back
  {
    display: none;
  }

  .card,
  .card_quote
  {
    position: relative;
    inset: auto;
  }

  .card_main
  {
    padding: 20px;
  }

  .card_score
  {
    font-size: 34px;
  }

  .card_quote
  {
    right: auto;
    bottom: auto;
    width: auto;
    margin: -14px 14px 0 34px;
  }

  .stats .wrap
  {
    grid-template-columns: 1fr 1fr;
  }

  .stat:nth-child(3)
  {
    border-left: 0;
  }

  .stat:nth-child(n+3)
  {
    border-top: 1px solid var(--rmr_line);
  }

  .programs,
  .reviews,
  .specialties
  {
    grid-template-columns: 1fr;
  }

  .section
  {
    padding-top: 60px;
  }

  .section_head
  {
    flex-direction: column;
    align-items: flex-start;
  }

  .app_band .inner
  {
    padding: 40px 24px 0;
  }

  .phone
  {
    width: 190px;
  }

  .phones
  {
    height: 340px;
  }

  .cta .buttons
  {
    flex-direction: column;
  }

  .footer .wrap
  {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer nav
  {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* a program or review card that is a link */
a.review
{
  display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}

a.review:hover
{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(22,34,44,0.09);
}

.nav_member
{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rmr_slate);
}

.nav_member .avatar_dot
{
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background: var(--rmr_slate);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

@media (max-width: 680px)
{
  .nav_member .name
  {
    display: none;
  }
}

/* ── a signed-in member's frame, on every page (member_frame in includes/site_chrome.php) ──
   strongwork's dashboard frame: a white rail down the left edge (248px with labels, or 72px of
   icons: html.rail_collapsed, remembered in localStorage), a slim bar along the top, the page to the
   right. On a phone the rail goes and the app's tab bar runs along the bottom. app/rail.js runs it. */

:root
{
  --rail_w: 248px;
}

html.rail_collapsed
{
  --rail_w: 72px;
}

/* ── the rail ── */

.rail
{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--rail_w);
  background: white;
  border-right: 1px solid var(--rmr_line);
  overflow: hidden;
  transition: width 0.2s ease;
}

.rail_brand_row
{
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 68px;
  padding: 0 12px 0 18px;
}

.rail_logo
{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.rail_logo img,
.rail_mark img
{
  width: 30px;
  height: 30px;
}

.rail_logo .wordmark
{
  font-size: 16.5px;
  letter-spacing: -0.4px;
}

.rail_mark
{
  display: none;
}

.rail_toggle
{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rmr_line);
  border-radius: 8px;
  background: white;
  color: #9AA4AC;
  cursor: pointer;
}

.rail_toggle:hover
{
  background: var(--rmr_bg);
  color: var(--rmr_slate);
}

.rail_toggle svg
{
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}

.rail_nav
{
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px;
}

.rail_section
{
  padding: 14px 10px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #9AA4AC;
}

.rail_item
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--rmr_muted);
}

.rail_item:hover
{
  background: var(--rmr_bg);
  color: var(--rmr_slate);
}

.rail_item.on
{
  background: var(--rmr_red_soft);
  color: var(--rmr_slate);
  box-shadow: inset 3px 0 0 var(--rmr_red);
}

.rail_item.on svg
{
  color: var(--rmr_red);
}

.rail_item svg
{
  flex: none;
  width: 20px;
  height: 20px;
}

.rail_label
{
  flex: 1;
}

.rail_badge
{
  min-width: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--rmr_slate);
  color: white;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.rail_cta
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px;
  border-radius: 12px;
  background: var(--rmr_red);
  color: white;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(224,58,87,0.22);
}

.rail_cta:hover
{
  background: var(--rmr_red_dark);
}

.rail_cta svg
{
  flex: none;
  width: 16px;
  height: 16px;
}

/* the account card at the foot, and its menu opening upward */
.rail_foot
{
  position: relative;
  flex: none;
  padding: 12px;
  border-top: 1px solid var(--rmr_line);
}

.rail_user_card
{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--rmr_line);
  border-radius: 12px;
  background: white;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.rail_user_card:hover,
.rail_user_card.open,
.rail_user_card.on
{
  background: var(--rmr_bg);
  border-color: #DDD5CF;
}

.rail_avatar
{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--rmr_slate);
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.rail_user_text
{
  flex: 1;
  min-width: 0;
}

.rail_user_name,
.rail_user_sub
{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rail_user_name
{
  font-size: 14px;
  font-weight: 700;
  color: var(--rmr_ink);
}

.rail_user_sub
{
  font-size: 12px;
  color: var(--rmr_muted);
}

.rail_chevron
{
  flex: none;
  color: #9AA4AC;
}

.rail_chevron svg
{
  display: block;
  width: 12px;
  height: 14px;
}

.rail_user_popup
{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  z-index: 5;
  padding: 5px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 12px 32px rgba(22,34,44,0.16);
}

.rail_user_popup[hidden]
{
  display: none;
}

.rail_popup_item
{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--rmr_ink);
  text-align: left;
  cursor: pointer;
}

.rail_popup_item:hover
{
  background: var(--rmr_bg);
}

.rail_popup_item svg
{
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--rmr_muted);
}

.rail_popup_item.danger,
.rail_popup_item.danger svg
{
  color: var(--rmr_red_dark);
}

.rail_popup_divider
{
  height: 1px;
  margin: 4px 6px;
  background: var(--rmr_line);
}

/* collapsed to icons: labels become tooltips (title), counts ride on the icon's corner, and the
   account menu opens out past the rail's edge */
html.rail_collapsed .rail
{
  overflow: visible;
}

html.rail_collapsed .rail_brand_row
{
  flex-direction: column;
  height: auto;
  gap: 10px;
  padding: 16px 0 6px;
}

html.rail_collapsed .rail_logo,
html.rail_collapsed .rail_label,
html.rail_collapsed .rail_cta span,
html.rail_collapsed .rail_user_text,
html.rail_collapsed .rail_chevron
{
  display: none;
}

html.rail_collapsed .rail_mark
{
  display: flex;
}

html.rail_collapsed .rail_toggle svg
{
  transform: rotate(180deg);
}

html.rail_collapsed .rail_nav
{
  padding: 6px 10px;
}

html.rail_collapsed .rail_section
{
  height: 12px;
  padding: 0;
  overflow: hidden;
  color: transparent;
}

html.rail_collapsed .rail_item
{
  justify-content: center;
  padding: 11px 0;
}

html.rail_collapsed .rail_badge
{
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 16px;
  padding: 2px 4px;
  font-size: 9.5px;
}

html.rail_collapsed .rail_foot
{
  padding: 12px 8px;
}

html.rail_collapsed .rail_user_card
{
  justify-content: center;
  padding: 6px 0;
  border-color: transparent;
  background: transparent;
}

html.rail_collapsed .rail_user_popup
{
  left: 8px;
  right: auto;
  width: 220px;
}

/* the page makes room for the rail, whatever page it is */
body:has(> .rail)
{
  padding-left: var(--rail_w);
  transition: padding-left 0.2s ease;
}

/* the bar along the top: only on a phone (the logo and Write a review), where there's no rail */
.rail_top
{
  display: none;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding: 0 32px;
  border-bottom: 1px solid var(--rmr_line);
}

.rail_top_brand
{
  display: none;
  align-items: center;
  gap: 8px;
}

.rail_top_brand img
{
  width: 30px;
  height: 30px;
}

.rail_top_title
{
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--rmr_muted);
}

.rail_top .btn
{
  height: 40px;
  padding: 0 16px;
  font-size: 14.5px;
  box-shadow: none;
}

.rail_top .btn svg
{
  width: 17px;
  height: 17px;
}

/* the phone's tab bar (member_tabs): only on a phone */
.member_tabs
{
  display: none;
}

@media (max-width: 760px)
{
  body:has(> .rail)
  {
    padding-left: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 68px);
  }

  .rail
  {
    display: none;
  }

  .rail_top
  {
    display: flex;
    height: 60px;
    padding: 0 16px;
  }

  .rail_top_brand
  {
    display: flex;
    flex: 1;
  }

  .rail_top_brand .wordmark
  {
    font-size: 17px;
  }

  .rail_top_title
  {
    display: none;
  }

  .rail_top .btn
  {
    width: 42px;
    padding: 0;
  }

  .rail_top .btn .label
  {
    display: none;
  }

  .member_tabs
  {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px);
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--rmr_line);
  }

  .member_tabs a
  {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 54px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rmr_muted);
  }

  .member_tabs a.on
  {
    color: var(--rmr_red);
  }

  .member_tabs svg
  {
    width: 22px;
    height: 22px;
  }

  .tab_count
  {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--rmr_red);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }

}