/* rangesanclemente.com — the site's own page parts in the Range Clinics design
   (owner, 2026-10-22: "Can we do the Range Clinics design on all pages of
   rangesanclemente.com"). Loaded by src/components/RailsFrame.jsx AFTER
   rails.css and clinics-site.css, and scoped to `.rails-skin`, the wrapper
   RailsFrame puts round a page that was built on the old Direction 1A parts
   (eyebrow-1a, btn-1a, col-1a, rows-1a, index-1a, the tx-* explainer bands, the
   Tailwind sections). It maps those parts onto the Brand Rails: near-black,
   white, mist bands, Sun Day Red on the one action, Archivo 500 uppercase
   headlines, DejaVu Sans Mono labels, thin rules, square corners.

   Tokens only: every colour here is a --rails-* value (rails.css) or one of
   clinics-site.css's own (--mist, --ink-soft, --rule-light, --gray-num). Never
   type a new hex. The page's words, links, forms and tracking are untouched;
   this sheet changes how they look and nothing else. */

/* ── The old system's tokens, re-pointed at the rails ───────────────────────
   Tailwind's colour utilities read these variables (globals.css @theme
   inline), so text-foreground, bg-foreground, border-border and friends follow
   them without touching a page. */
.rails-skin {
  --background: var(--rails-white);
  --foreground: var(--rails-black);
  --accent: var(--rails-black);
  --accent-hover: var(--ink-soft);
  --accent-light: var(--mist);
  --muted: var(--ink-soft);
  --secondary: var(--ink-soft);
  --border: var(--rule-light);
  --surface: var(--rails-white);
  --surface-alt: var(--mist);
  --inverted: var(--rails-black);
  background: var(--rails-white);
  color: var(--rails-black);
  font-family: var(--f-body);
}

/* clinics-site.css sets p's margin and width for the new pages. On a page
   built with Tailwind spacing (mb-6, max-w-[46ch], mx-auto) those utilities
   must keep deciding, so the bare rule steps back to them. */
:where(.rails-skin) p { margin: revert-layer; max-width: revert-layer; color: var(--ink-soft); }
:where(.rails-skin) section { padding-block: revert-layer; }

/* The page column lines up with the frame's (1180px, the same gutter). */
.rails-skin :is(.max-w-\[1280px\], .rh-container, .tx-container) {
  max-width: var(--wrap);
  padding-inline: var(--gut);
  margin-inline: auto;
}

/* ── Type ────────────────────────────────────────────────────────────────── */
.rails-skin h1,
.rails-skin h2,
.rails-skin h3 {
  font-family: var(--f-head);
  font-weight: 500;
  text-transform: uppercase;
  text-wrap: balance;
  color: inherit;
}
.rails-skin h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.02em; }
.rails-skin h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.015em; }
.rails-skin h3 { line-height: 1.14; letter-spacing: -0.01em; }
.rails-skin h1 em, .rails-skin h2 em, .rails-skin h3 em { font-style: normal; }
.rails-skin strong, .rails-skin b { font-weight: 600; }

/* Section labels: mono, the one red mark on a light band, white on black. */
.rails-skin .eyebrow-1a,
.rails-skin .rh-eyebrow,
.rails-skin .tx-label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rails-red);
  margin: 0 0 16px;
}
.rails-skin .eyebrow-1a::before,
.rails-skin .rh-eyebrow::before,
.rails-skin .tx-label::before { content: none; display: none; }

/* Numbers and small labels: mono, gray (decoration). */
.rails-skin .index-1a {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gray-num);
}
.rails-skin .uppercase:not(h1):not(h2):not(h3):not(.btn-1a):not(button):not(a) {
  font-family: var(--f-mono);
  font-weight: 400;
}

/* ── Rules and rows ──────────────────────────────────────────────────────── */
.rails-skin .col-1a { border-top: 1px solid var(--gray-rule); }
.rails-skin .rows-1a { border-top: 1px solid var(--gray-rule); }
.rails-skin .rows-1a > li,
.rails-skin .rows-1a > div { border-bottom: 1px solid var(--rule-light); }
.rails-skin [class*="rounded"]:not(.rounded-full) { border-radius: 0; }
.rails-skin [class*="shadow"] { box-shadow: none; }

/* ── Buttons: the one action is Sun Day Red ──────────────────────────────── */
.rails-skin .btn-1a,
.rails-skin .rh-btn-dark,
.rails-skin .tx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  background: var(--rails-red);
  border: 1.5px solid var(--rails-red);
  color: var(--rails-white);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  border-radius: 0;
  text-decoration: none;
}
.rails-skin .btn-1a::after,
.rails-skin .tx-btn::after { content: none; }
.rails-skin .btn-1a:hover,
.rails-skin .rh-btn-dark:hover,
.rails-skin .tx-btn:hover { background: var(--rails-red-deep); border-color: var(--rails-red-deep); color: var(--rails-white); }
.rails-skin .btn-1a-light { background: var(--rails-red); border-color: var(--rails-red); color: var(--rails-white); }
.rails-skin .btn-1a-light:hover { background: var(--rails-red-deep); border-color: var(--rails-red-deep); color: var(--rails-white); }
/* A second, quieter action: outlined in ink (white on a black band). */
.rails-skin .btn-1a-outline,
.rails-skin .rh-btn-outline { background: transparent; border-color: var(--rails-black); color: var(--rails-black); }
.rails-skin .btn-1a-outline:hover,
.rails-skin .rh-btn-outline:hover { background: var(--rails-black); border-color: var(--rails-black); color: var(--rails-white); }
.rails-skin .btn-1a-ghost,
.rails-skin .rh-btn-ghost { background: transparent; border-color: var(--rails-white); color: var(--rails-white); }
.rails-skin .btn-1a-ghost:hover,
.rails-skin .rh-btn-ghost:hover { background: var(--rails-white); border-color: var(--rails-white); color: var(--rails-black); }
.rails-skin .btn-1a:focus-visible { outline: 2px solid var(--rails-red); outline-offset: 3px; }

/* ── Bands ───────────────────────────────────────────────────────────────── */
/* Black: any section the page painted dark. */
.rails-skin :is(.rh-dark, .tx-section-dark, .tx-cta, [class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#0A0A0A"], .bg-inverted, .bg-foreground, .bg-black) {
  background: var(--rails-black);
  color: var(--rails-white);
}
.rails-skin :is(.rh-dark, .tx-section-dark, .tx-cta, [class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#0A0A0A"], .bg-inverted, .bg-foreground, .bg-black) :is(p, li) { color: #d4d4d4; }
.rails-skin :is(.rh-dark, .tx-section-dark, .tx-cta, [class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#0A0A0A"], .bg-inverted, .bg-foreground, .bg-black) :is(h1, h2, h3, h4, strong) { color: var(--rails-white); }
.rails-skin :is(.rh-dark, .tx-section-dark, .tx-cta, [class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#0A0A0A"], .bg-inverted, .bg-foreground, .bg-black) :is(.eyebrow-1a, .rh-eyebrow, .tx-label) { color: var(--rails-white); }
.rails-skin :is(.rh-dark, .tx-section-dark, .tx-cta, [class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#0A0A0A"], .bg-inverted, .bg-foreground, .bg-black) .index-1a { color: var(--gray-num); }
.rails-skin :is(.rh-dark, .tx-section-dark, .tx-cta, [class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#0A0A0A"], .bg-inverted, .bg-foreground, .bg-black) :is(.col-1a, .rows-1a) { border-top-color: #555; }
.rails-skin :is(.rh-dark, .tx-section-dark, .tx-cta, [class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#0A0A0A"], .bg-inverted, .bg-foreground, .bg-black) .rows-1a > :is(li, div) { border-bottom-color: #333; }

/* Light: white, then mist, by position, like rangeclinics.com's band-white. */
.rails-skin > section:not([class*="bg-"]):not(.rh-dark),
.rails-skin > div > section:not([class*="bg-"]):not(.rh-dark),
.rails-skin :is(.tx-hero, .tx-section) { background: var(--rails-white); }
.rails-skin > section:nth-of-type(even):not([class*="bg-"]):not(.rh-dark),
.rails-skin > div > section:nth-of-type(even):not([class*="bg-"]):not(.rh-dark),
.rails-skin .tx-section-alt { background: var(--mist); }
.rails-skin > section:nth-of-type(even)[class*="max-w"]:not([class*="bg-"]):not(.rh-dark),
.rails-skin > div > section:nth-of-type(even)[class*="max-w"]:not([class*="bg-"]):not(.rh-dark) {
  /* full-bleed band without box-shadow (globals.css turns every shadow off) */
  border-image: linear-gradient(var(--mist), var(--mist)) fill 0 / 0 / 0 100vmax;
}
/* The old stone and paper literals the pages typed by hand. */
.rails-skin :is([class*="bg-[#f1f0ec"], [class*="bg-[#F1F0EC"], [class*="bg-[#F4F4F1"], [class*="bg-[#f4f4f1"], [class*="bg-[#ebeae5"], [class*="bg-[#fdfcfa"], [class*="bg-[#FAFAF8"], [class*="bg-[#fafaf8"], .bg-surface-alt, .bg-accent-light) { background: var(--mist); }

/* Inputs: square, hairline, ink. */
.rails-skin :is(input, select, textarea) { border-radius: 0; }

/* ── The frame's footer, five columns (RailsFrame carries the old footer's
   links so no page loses its way in) ── */
.foot-top.five { grid-template-columns: 1.2fr 1fr 1fr 1.2fr 1fr; }
@media (max-width: 900px) { .foot-top.five { grid-template-columns: 1fr 1fr; } .foot-top.five > div:first-child { grid-column: 1 / -1; } }

/* A black band that ends the page meets the black footer on a hairline. */
footer.site { border-top: 1px solid #333; }

/* ── The homepage-style pages (rh-*: /range-assessment, /book-call and the
   explainers). Their own primary on a black band (rh-btn-light) is the red
   action; every rh button loses the old arrow and capitals. ── */
.rails-skin :is(.rh-btn-dark, .rh-btn-light, .rh-btn-outline, .rh-btn-ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 0;
  font-family: var(--f-body); font-size: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1.2; text-decoration: none;
}
.rails-skin :is(.rh-btn-dark, .rh-btn-light, .rh-btn-outline, .rh-btn-ghost)::after { content: none; }
.rails-skin .rh-btn-light { background: var(--rails-red); border: 1.5px solid var(--rails-red); color: var(--rails-white); }
.rails-skin .rh-btn-light:hover { background: var(--rails-red-deep); border-color: var(--rails-red-deep); color: var(--rails-white); }
.rails-skin .rh-btn-ghost { border: 1.5px solid var(--rails-white); }

/* Bands: white and mist by position, black where the page said dark. */
.rails-skin .rh-home.rh-bands > section:is(#home-hero, #home-choose, #home-symptoms, #home-plan, #home-reviews, #home-faq, [id]):not(.rh-dark) { background: var(--rails-white); border-top-color: var(--rule-light); }
.rails-skin .rh-home.rh-bands > section:is(#home-choose, #home-plan, #home-faq, [id]):nth-of-type(even):not(.rh-dark) { background: var(--mist); border-top-color: var(--mist); }
.rails-skin .rh-home.rh-bands > section:is(#home-process, #home-cta, .rh-dark) { background: var(--rails-black); border-top-color: var(--rails-black); }
.rails-skin .rh-home { background: var(--rails-white); }

/* Left-aligned, like every rangeclinics.com page. */
.rails-skin .rh-home :is(h1, h2, h3, p, .rh-eyebrow, .rh-section-head, .rh-reviews-head, .rh-choose-note, .rh-hero-ctas, .rh-section-close) { text-align: left; }
.rails-skin .rh-home :is(.rh-eyebrow, .rh-hero-ctas, .rh-reviews-head) { justify-content: flex-start; }
.rails-skin .rh-home :is(h1, h2, p) { margin-left: 0; }
.rails-skin .rh-home .rh-eyebrow-dark { color: var(--rails-white); }
.rails-skin .rh-home :is(.rh-index, .rh-step-num, .rh-hero-step-index, .rh-tool-label, .rh-step-when) { font-family: var(--f-mono); font-weight: 400; color: var(--gray-num); }

/* The proof strip under the header: white, a hairline, mono, not a black bar. */
.rails-skin :is(.trust-bar, .es-trust-bar) { background: var(--rails-white); color: var(--rails-black); border-bottom: 1px solid var(--rule-light); }
.rails-skin :is(.trust-item, .es-trust-item) { color: var(--ink-soft); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.rails-skin :is(.trust-item + .trust-item, .es-trust-item + .es-trust-item) { border-left-color: var(--rule-light); }
.rails-skin .trust-item-btn { color: inherit; }

/* Review cards: square, hairline, no shadow. */
.rails-skin :is(.gr-card, [class*="review-card"], [class*="ReviewCard"]) { border-radius: 0; box-shadow: none; }

/* Big display lines that are not headings (a price, "Complimentary through
   October 31", a stat): Archivo 500 like rangeclinics.com's .amt, never 700. */
.rails-skin [class*="tracking-[-0.0"]:not(h1):not(h2):not(h3) { font-family: var(--f-head); font-weight: 500; }

/* The stacked hero (/range-assessment, /recovery-support): one left-aligned
   column, the headline, lede, film and everything under it on the same left
   edge, as on range-medical.com's homepage. #home-hero is in the selector
   because globals.css centres it by id. */
.rails-skin .rh-home #home-hero.rh-hero-stack :is(.rh-hero-text, .rh-hero-figure, .rh-hero-steps-block) { max-width: 820px; margin-inline: auto; text-align: left; }
.rails-skin .rh-home #home-hero.rh-hero-stack :is(.rh-eyebrow, h1, .rh-hero-sub, .rh-hero-lead, .rh-hero-ctas, .rh-hero-offer-line, .rh-hero-facts, .rh-hero-aside, .rh-hero-note) { text-align: left; margin-left: 0; margin-right: 0; justify-content: flex-start; max-width: none; }
.rails-skin .rh-home #home-hero.rh-hero-stack h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }

/* The phone's bottom bar: white, a hairline, the red button and the phone. */
.rails-skin .rh-sticky { background: var(--rule-light); border-top: 1px solid var(--rule-light); }
.rails-skin .rh-sticky-call { background: var(--rails-white); color: var(--rails-black); }
.rails-skin .rh-sticky-book { background: var(--rails-red); color: var(--rails-white); font-family: var(--f-body); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }