/* Rx & Reality — editorial redesign design system */
:root {
  --teal: #019AB2;
  --purple: #540071;
  --soft-teal: #94D4DD;
  --lavender: #F3EEF7;
  --ink: #24202A;
  --white: #FFFFFF;

  --font-serif: "Fraunces", "Georgia", serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, .hero-slide-heading { font-family: var(--font-serif); line-height: 1.2; color: var(--purple); font-weight: 600; margin: 0 0 0.6em; }
h1, .hero-slide-heading { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.25rem; font-family: var(--font-sans); font-weight: 700; color: var(--ink); }
p { margin: 0 0 1.1em; }
a { color: var(--purple); }
.container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 700px; margin: 0 auto; padding: 0 1.5rem; }

/* Anchor targets: the sticky header (.site-header, ~67px tall at every breakpoint) would
   otherwise cover the top of whichever section a hash link scrolls to. scroll-margin-top stops
   native anchor scrolling (and :target) short of the header with room to spare, on both direct
   loads and in-page clicks — targeted to the known hash destinations only. */
#meet-dr-emily, #faq, #signup { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
section { padding: 5rem 0; }
.section-lavender { background: var(--lavender); }
.section-purple { background: var(--purple); color: var(--white); }
.section-purple h2, .section-purple h3 { color: var(--white); }
.section-purple p { color: var(--white); }
.section-purple .detail-line { color: rgba(255, 255, 255, 0.85); }
.section-purple .detail-line .sep { color: rgba(255, 255, 255, 0.4); }
.section-purple .btn-primary { background: var(--white); color: var(--purple); }
.section-purple .btn-primary:hover { background: var(--lavender); }
.center { text-align: center; }
.small { font-size: 0.92rem; }
.muted { color: rgba(36, 32, 42, 0.7); }
.nowrap { white-space: nowrap; }
.eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 0.9rem;
}
.hidden { display: none !important; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.9rem 1.9rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--purple); color: var(--white); }
.btn-primary:hover { filter: brightness(0.85); }
.btn-secondary { background: transparent; color: var(--purple); border-color: var(--purple); }
.btn-secondary:hover { background: var(--lavender); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* Header */
.site-header { background: var(--white); border-bottom: 1px solid rgba(1, 154, 178, 0.25); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 0.9rem; padding-bottom: 0.9rem; gap: 1rem; }
.brand-logo { height: 60px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a { font-family: var(--font-sans); font-weight: 600; text-decoration: none; color: var(--ink); font-size: 0.94rem; }
.site-nav a:hover { color: var(--purple); }
.site-nav a.nav-cta,
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta:focus-visible { background: var(--purple); color: var(--white); padding: 0.6rem 1.4rem; }
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta:focus-visible { filter: brightness(0.85); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--purple); }

/* Social icons: to the right of the primary nav button, visually secondary */
.nav-social { display: flex; align-items: center; gap: 0.7rem; }
.nav-social a { color: var(--purple); display: inline-flex; opacity: 0.8; }
.nav-social a:hover, .nav-social a:focus-visible { opacity: 1; }
.nav-social svg { width: 17px; height: 17px; }

/* Price lines (approved copy: "$21" — no strikethrough) */
.price-line { font-family: var(--font-sans); font-weight: 700; color: var(--ink); margin: 0 0 0.3rem; }
.price-line strong { color: var(--purple); }
.detail-line { font-size: 0.92rem; color: rgba(36, 32, 42, 0.7); margin: 0 0 1.4rem; }
.detail-line .sep { margin: 0 0.5em; color: rgba(1, 154, 178, 0.4); }

/* ============ HERO CAROUSEL ============ */
/* Both slides are always laid out, stacked in the same grid cell (display:grid + shared
   grid-area), so the carousel's height is always the taller of the two slides' natural
   content height and never changes when autoplay swaps the active slide. Only `visibility`
   (not `display`) toggles, so the inactive slide keeps contributing to that shared height and
   is still removed from the accessibility tree and tab order. Each slide centers its own
   content vertically (align-items: center) so a shorter slide doesn't look pinned to the top
   of the taller shared box. See hero-carousel.js for the toggle logic. */
.hero-carousel { position: relative; overflow: hidden; padding: 0; display: grid; grid-template-columns: 100%; }
.hero-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  visibility: hidden;
  min-height: 648px;
}
.hero-slide.is-active { visibility: visible; }
.hero-slide--1 { background: var(--soft-teal); }
.hero-slide--2 { background: var(--lavender); }
.hero-slide-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 2.5rem;
  width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.hero-slide-copy { max-width: 480px; }
.hero-slide-copy h1, .hero-slide-copy .hero-slide-heading { margin-bottom: 0.4rem; }
.hero-slide--1 h1 { color: var(--purple); line-height: 1.08; }
/* Slide 1 photo stays anchored to the top of the shared row; copy centers within that row height. */
.hero-slide--1 .hero-slide-photo { align-self: start; }
.hero-swoosh { position: relative; display: inline-block; }
.hero-swoosh svg { position: absolute; left: 0; bottom: -0.35em; width: 100%; height: 0.5em; color: var(--teal); }
.hero-slide--1 .hero-swoosh svg { color: #F25207; bottom: -0.28em; }
/* Flex column (not height:100% on the image) so the image keeps its natural
   aspect ratio and size regardless of the ticker sitting beneath it. */
.hero-slide-photo { position: relative; min-width: 0; }
.hero-slide-photo img { border-radius: 12px; width: 100%; height: auto; object-fit: cover; max-height: 600px; display: block; }
.hero-slide--1 .hero-slide-photo img { object-position: top center; }
.hero-slide--2 .hero-slide-photo img { object-position: center; }

/* CTA row + dots live inside each slide's own .hero-slide-copy, directly under that slide's
   headline — one compact left-column content block (headline → buttons → dots), not a separate
   row or section. Each slide carries its own copy (see hero-carousel.js) so the tight spacing
   here holds regardless of which slide is active. */
.hero-cta-row { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-slide-copy > p:last-of-type { margin-bottom: 0; }
.btn-hero-secondary,
.btn-hero-primary {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 56px; padding: 0 0.75rem; font-size: 0.85rem; white-space: nowrap;
}
.btn-hero-secondary { width: 215px; background: var(--white); color: var(--teal); border-color: var(--teal); }
.btn-hero-secondary:hover, .btn-hero-secondary:focus-visible { background: var(--teal); color: var(--white); }
.btn-hero-primary { width: 235px; background: var(--purple); color: var(--white); line-height: 1.25; }
.btn-hero-primary:hover, .btn-hero-primary:focus-visible { background: var(--teal); filter: none; }

.hero-dots {
  margin-top: 0.875rem;
  display: flex; justify-content: flex-start; gap: 0.4rem;
}
.hero-dot {
  position: relative; width: 20px; height: 20px; border-radius: 50%; border: none; padding: 0;
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hero-dot::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  background: transparent; border: 1.5px solid rgba(84, 0, 113, 0.45); box-sizing: border-box;
}
.hero-dot.is-active::before { background: var(--purple); border-color: var(--purple); }
.hero-dot:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Ticker sits directly beneath the Slide 2 photo; flex stretch matches its column width.
   Always laid out (not display:none/block) so Slide 2's own height stays constant whether or
   not it is the active slide — it inherits visibility:hidden/visible from its .hero-slide
   parent automatically, it is never toggled independently. */
.hero-ticker-wrap {
  display: block; overflow: hidden; background: var(--purple); color: var(--white);
  padding: 0.6rem 0; margin-top: 1rem; border-radius: 8px;
}
.hero-ticker-track {
  display: flex; width: max-content;
  animation: ticker-scroll 38s linear infinite;
}
.hero-ticker-track > span {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
  white-space: nowrap; padding-right: 2.5rem;
}
.hero-ticker-track .ticker-sep { color: var(--soft-teal); padding: 0 0.4em; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticker-track { animation: none; }
}

/* ============ WELCOME ============ */
.welcome-quote {
  font-family: var(--font-serif); font-size: 1.4rem; font-style: italic; color: var(--purple);
  border-left: 3px solid var(--teal); padding-left: 1.2rem; margin: 2rem 0 1rem;
}
.welcome-signature { height: 64px; width: auto; margin-bottom: 2rem; }
.welcome-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============ EDITORIAL SPLIT (guide feature / meet dr emily) ============ */
.editorial-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; }
.editorial-split.reverse { grid-template-columns: 1.15fr 0.85fr; }
.editorial-split.reverse .editorial-photo { order: 2; }
.editorial-split.reverse .editorial-copy { order: 1; }
.editorial-photo { position: sticky; top: 5.5rem; }
.editorial-photo img { border-radius: 12px; width: 100%; }
.part-label {
  font-family: var(--font-sans); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--teal); margin: 1.6rem 0 0.4rem;
}
.part-label:first-child { margin-top: 0; }

/* ============ POPULAR FREE RESOURCE ============ */
.free-resource-feature {
  position: relative; min-height: 460px; display: flex; align-items: flex-end;
  border-radius: 14px; overflow: hidden; background-size: cover; background-position: center;
}
.free-resource-feature::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,10,25,0.78) 0%, rgba(20,10,25,0.35) 55%, rgba(20,10,25,0.08) 100%);
}
.free-resource-content { position: relative; color: var(--white); padding: 2.5rem; max-width: 520px; }
.free-resource-content .eyebrow { color: var(--teal); }
.free-resource-content h2 { color: var(--white); }
.free-resource-content a.download-link {
  color: var(--white); font-family: var(--font-sans); font-weight: 700; text-decoration: underline;
  text-underline-offset: 4px; display: inline-block; margin-top: 0.6rem;
}

/* ============ TOP TWO THEORY / FEATURE BLOCK ============ */
.feature-block {
  background: var(--purple); color: var(--white); border-radius: 14px; padding: 3rem;
  border-left: 5px solid var(--teal);
}
.feature-block h2, .feature-block h3 { color: var(--white); }
.feature-block a { color: var(--white); }
.feature-panel {
  background: var(--lavender); color: var(--ink); border-radius: 10px;
  padding: 1.5rem 1.75rem; margin: 1.75rem 0;
}
.feature-panel p { color: var(--ink); margin-bottom: 0.7rem; font-weight: 600; }
.feature-panel .checklist { margin-bottom: 0; }
.feature-panel .checklist li { color: var(--ink); }
.feature-panel .checklist li::before { color: var(--teal); }

/* ============ CHECKLIST ============ */
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checklist li { padding-left: 1.8rem; position: relative; margin-bottom: 0.65rem; }
.checklist li::before { content: "—"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* ============ FAQ ACCORDION ============ */
.faq details { border-bottom: 1px solid rgba(1, 154, 178, 0.25); padding: 1.1rem 0; }
.faq summary {
  font-family: var(--font-sans); font-weight: 700; cursor: pointer; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.3rem; color: var(--purple); flex-shrink: 0; font-weight: 400;
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0.8rem 0 0; color: rgba(36, 32, 42, 0.7); }

/* ============ FORMS (contact / resources) ============ */
.form-field { margin-bottom: 1.2rem; }
.form-field label { display: block; font-family: var(--font-sans); font-weight: 600; margin-bottom: 0.35rem; }
.form-field input, .form-field textarea {
  width: 100%; padding: 0.75rem; border: 1px solid #cbb8a4; border-radius: 8px; font-size: 1rem; font-family: var(--font-sans);
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.notice { border-radius: 10px; padding: 1rem 1.25rem; margin: 1rem 0; }
.notice-info { background: #e8f6f9; border: 1px solid var(--teal); }
.notice-warn { background: #fdf0e6; border: 1px solid #d97a2b; }
.notice-ok { background: #eef9ef; border: 1px solid #3a9a4b; }

/* Compact homepage variant of the resources-hub intro — same three .resource-cards below,
   just tighter section padding since this sits mid-homepage, not as its own landing page. */
.home-resources { padding: 3rem 0 3.5rem; }
.home-resources-intro { padding-bottom: 1.5rem; }
.home-resources-intro h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 0; }
.home-resources-intro .eyebrow { margin-bottom: 0.4rem; }

/* ============ RESOURCE CARDS (resources hub) ============ */
.resources-hub-intro { padding: 2rem 0 1.25rem; }
.resources-hub-intro h1 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 0.4rem; line-height: 1.15; }
.resources-hub-intro .eyebrow { margin-bottom: 0.4rem; }
.resources-hub-intro p { margin-bottom: 0; }

/* Forces "Practical Tools to Help You Prepare / and Be Heard" onto two intentional lines on
   larger tablet+ viewports (matches the homepage and Resources-page heading treatment); hidden
   below that so phones/small tablets wrap naturally instead of being held to the desktop width. */
.resources-heading-break { display: none; }
@media (min-width: 700px) {
  .resources-heading-break { display: block; }
}
.resource-cards-section { padding: 0 0 3rem; }
.resource-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch;
}
.resource-card {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: var(--white); box-shadow: 0 1px 3px rgba(36, 32, 42, 0.12); border: 1px solid rgba(1, 154, 178, 0.15);
}
.resource-card img { width: 100%; height: 190px; object-fit: cover; }
.resource-card-image { position: relative; }
.resource-card-badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--white); color: var(--teal);
  font-family: var(--font-sans); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  padding: 0.35rem 0.65rem; border-radius: 4px;
}
.resource-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.resource-card-body h3 { margin-bottom: 0.4rem; font-size: 1.1rem; }
.resource-card-body p { flex: 1; margin-bottom: 0.9em; }
.resource-card-body .btn { align-self: flex-start; padding: 0.6rem 1.3rem; font-size: 0.9rem; }

@media (max-width: 860px) {
  .resource-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .resource-cards { grid-template-columns: 1fr; }
}

.resource-landing-image { max-width: 320px; margin: 0 auto 1.5rem; border-radius: 10px; }

/* Kit embed container (dedicated resource landing pages) */
.kit-embed-wrap { max-width: 480px; margin: 0 auto; }
.resource-landing-intro { padding-bottom: 1.5rem; }
.resource-landing-form { padding-top: 1.5rem; }

/* ============ FOOTER ============ */
.site-footer { background: var(--purple); color: rgba(255, 255, 255, 0.85); padding: 3.5rem 0 1.5rem; margin-top: 0; }
.site-footer h3 { color: var(--white); font-size: 0.95rem; font-family: var(--font-sans); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; }
.footer-disclaimer { border-top: 1px solid rgba(1, 154, 178, 0.4); padding-top: 1.5rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
.footer-copyright { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-top: 1.5rem; }

/* ============ LEGAL PAGES ============ */
.legal h1 { margin-bottom: 0.25rem; }
.legal h2 { margin-top: 2.2rem; font-size: 1.35rem; font-family: var(--font-sans); }
.legal h3 { margin-top: 1.4rem; }

/* ============ ACCESS CONTROLS (thank-you page) ============ */
.reader-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; margin: 1rem 0; }
.reader-controls .btn { padding: 0.6rem 1.2rem; font-size: 0.92rem; }

/* ============ COVER / IMAGE FRAME ============ */
.cover-wrap { position: relative; max-width: 320px; margin: 0 auto; }
.cover-wrap img { border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,0.14); }

/* ============ SALES PAGE ============ */
.sales-hero-section { padding: 1.75rem 0 2rem; }
.sales-hero-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 2.5rem; align-items: start; }
.sales-hero-photo { position: sticky; top: 5.5rem; }
.sales-hero-photo img { border-radius: 12px; width: 100%; }
.sales-hero-copy .eyebrow { margin-bottom: 0.35rem; }
.sales-hero-copy h1 { font-size: clamp(1.9rem, 2.4vw, 2.625rem); line-height: 1.08; margin-bottom: 0.4rem; }
.sales-hero-copy .lede { margin-bottom: 0.55em; }
.sales-hero-copy p { margin-bottom: 0.55em; }
.roadmap-intro { max-width: 640px; margin: 0 auto; text-align: center; }
.quote-block {
  font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--purple);
  border-left: 3px solid var(--teal); padding-left: 1.2rem; margin: 1.6rem 0;
}
/* Two purchase-format cards (Digital Edition / Paperback Book), shown directly under the
   hero photo so a visitor sees both purchase choices without scrolling past the hero copy —
   the page's only purchase buttons. Compact, equal-height, and top-aligned by design: every
   card has the same four rows in the same order (title, price, one description line, button),
   so title/price/description/button line up across cards without extra alignment hacks. */
.purchase-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-top: 1.1rem; }
.purchase-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: 10px; background: var(--white); box-shadow: 0 1px 3px rgba(36, 32, 42, 0.12);
  border: 1px solid rgba(1, 154, 178, 0.15); padding: 1rem 0.85rem;
}
.purchase-card-title { font-family: var(--font-sans); font-weight: 700; color: var(--ink); margin: 0 0 0.15rem; font-size: 0.92rem; }
.purchase-card-price { font-family: var(--font-sans); font-weight: 700; color: var(--purple); font-size: 1.1rem; margin: 0 0 0.3rem; }
.purchase-card-desc { font-size: 0.85rem; color: rgba(36, 32, 42, 0.75); margin: 0 0 0.75rem; }
/* margin-top: auto pushes the button to the same row in both cards even though the grid's
   align-items: stretch (default) makes both cards the same height as the taller (paperback,
   with its shipping/tax note) card. */
.purchase-card-cta { width: 100%; margin-top: auto; margin-bottom: 0; }
.purchase-card-cta .btn { width: 100%; padding: 0.6rem 0.75rem; font-size: 0.85rem; }
.purchase-card-note { margin: 0 0 0.6rem; font-size: 0.72rem; text-align: center; }
@media (max-width: 560px) {
  .purchase-cards { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
}

.mid-purchase { text-align: center; max-width: 680px; margin: 0 auto; }
.mid-purchase .checklist { display: inline-block; text-align: left; }

.final-purchase { text-align: center; max-width: 560px; margin: 0 auto; }
.final-purchase h2 { margin-bottom: 0.7rem; }
.final-purchase > p { margin-bottom: 0.9rem; }
.final-purchase .checklist {
  display: inline-block; text-align: left; margin: 0 0 1.3rem;
}
.final-purchase .checklist li { padding-left: 1.3rem; margin-bottom: 0.35rem; }
.final-purchase .btn { margin-bottom: 0.8rem; }

@media (max-width: 860px) {
  .header-inner { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  .brand-logo { height: 55px; }
  .hero-slide-grid { grid-template-columns: 1fr; padding-top: 1.5rem; padding-bottom: 3.5rem; gap: 1.5rem; }
  .hero-slide { min-height: 0; }
  .hero-slide-copy { max-width: none; order: 2; }
  .hero-slide-photo { order: 1; }
  .hero-slide-photo img { max-height: 380px; }
  .hero-cta-row { margin-top: 1.5rem; }
  /* Slide 2 naturally runs much taller than Slide 1 (four paragraphs of copy vs. one heading),
     which is what the shared, constant-height carousel (see the non-media-query rules above)
     sizes to — leaving visible empty space around Slide 1 when it's active. Tightening only
     Slide 2's own internal spacing (not its copy, image, or the shared grid padding) narrows
     that gap without touching Slide 1 or reintroducing a variable carousel height. */
  .hero-slide--2 .hero-slide-copy p { margin-bottom: 0.6em; }
  .hero-slide--2 .hero-ticker-wrap { margin-top: 0.5rem; padding: 0.4rem 0; }

  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white);
    flex-direction: column; padding: 1rem 1.5rem 1.5rem; border-bottom: 1px solid rgba(1, 154, 178, 0.25); align-items: flex-start; gap: 1rem;
  }
  .site-nav.open { display: flex; }

  .editorial-split, .editorial-split.reverse { grid-template-columns: 1fr; gap: 1.75rem; }
  .editorial-split.reverse .editorial-photo, .editorial-split.reverse .editorial-copy { order: initial; }
  /* Grid items default to min-width:auto, so without this the 340px image below can force the
     grid track (and the whole page) wider than a 320–375px viewport instead of shrinking. */
  .editorial-photo, .editorial-copy { min-width: 0; }
  .editorial-photo { position: static; }
  .editorial-photo img { max-width: 340px; width: 100%; margin: 0 auto; }

  .sales-hero-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .sales-hero-photo, .sales-hero-copy { min-width: 0; }
  .sales-hero-photo { position: static; }
  /* object-position shifted up (vs. default center) so cropping to max-height comes only from
     the bottom of the photo, keeping Dr. Emily's full face and the top of her head in frame —
     the desktop crop (no max-height, full image) is unchanged. */
  .sales-hero-photo img { max-height: 360px; width: 100%; object-fit: cover; object-position: 50% 15%; }

  .footer-cols { grid-template-columns: 1fr; }
  section { padding: 3.25rem 0; }
  .feature-block { padding: 2rem 1.5rem; }
  .free-resource-feature { min-height: 380px; }
  .free-resource-content { padding: 1.75rem; }
}

/* Hero CTA row: side by side through tablet (768px); stacks only once the two
   min-width:220px buttons would no longer fit the content width comfortably. */
@media (max-width: 620px) {
  .hero-cta-row { flex-direction: column; }
  .btn-hero-secondary, .btn-hero-primary { width: 100%; min-width: 0; white-space: normal; }
}

/* Portrait tablets (iPad 768–834px portrait, confirmed on a physical device) render Slide 1's
   photo at the shared 380px mobile cap, which crops partway through Dr. Emily's face before the
   turquoise copy panel begins — on these wider/taller viewports the carousel has much more
   unused height available (Slide 2's copy is taller here) than a phone does at the same 380px
   cap. Raising just Slide 1's image height uses that existing slack so her full face and head
   clear the photo before the copy panel starts, while staying safely under Slide 2's height so
   the shared carousel outer height (set by Slide 2) does not change. Landscape iPad widths are
   all >860px already excluded above; orientation:portrait is an explicit extra guard per spec. */
@media (min-width: 768px) and (max-width: 860px) and (orientation: portrait) {
  .hero-slide--1 .hero-slide-photo img { max-height: 560px; }
}

/* Cookie consent banner + preferences panel */
.rxr-consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--white); border-top: 1px solid rgba(1, 154, 178, 0.35);
  box-shadow: 0 -4px 16px rgba(36, 32, 42, 0.12);
  padding: 1.1rem 1.25rem; max-width: 100%; box-sizing: border-box;
}
.rxr-consent-banner-inner {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1rem;
}
.rxr-consent-banner-copy { flex: 1 1 320px; min-width: 0; }
.rxr-consent-title { font-weight: 700; color: var(--purple); margin: 0 0 0.25rem; font-family: var(--font-sans); }
.rxr-consent-banner-copy p { margin: 0; font-size: 0.92rem; }
.rxr-consent-banner-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rxr-consent-banner-actions .btn { padding: 0.55rem 1rem; font-size: 0.88rem; white-space: nowrap; }

.rxr-consent-overlay {
  position: fixed; inset: 0; background: rgba(36, 32, 42, 0.5); z-index: 210;
}
.rxr-consent-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 220; background: var(--white); border-radius: 14px;
  width: min(480px, calc(100vw - 2rem)); max-height: min(600px, calc(100vh - 2rem));
  overflow-y: auto; box-shadow: 0 12px 40px rgba(36, 32, 42, 0.3); box-sizing: border-box;
}
.rxr-consent-panel-inner { padding: 1.5rem; }
.rxr-consent-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rxr-consent-panel-close {
  background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--ink);
  cursor: pointer; padding: 0.1rem 0.4rem;
}
.rxr-consent-panel-close:focus-visible, .rxr-consent-banner button:focus-visible, .rxr-consent-panel button:focus-visible {
  outline: 2px solid var(--purple); outline-offset: 2px;
}
.rxr-consent-category { border-top: 1px solid var(--lavender); padding: 0.9rem 0; }
.rxr-consent-category-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rxr-consent-category-label { font-weight: 700; font-size: 0.95rem; }
.rxr-consent-category-desc { font-size: 0.85rem; margin: 0.35rem 0 0; color: var(--ink); }
.rxr-consent-category input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.rxr-consent-panel-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.rxr-consent-panel-actions .btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

@media (max-width: 480px) {
  .header-inner { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .brand-logo { height: 49px; }
  .rxr-consent-banner-actions { width: 100%; }
  .rxr-consent-banner-actions .btn { flex: 1 1 auto; }

  /* At the narrowest phone widths (confirmed at 320px), an unbreakable price
     run inside .detail-line/.price-line/.checklist forces the page wider than the
     viewport even though it visually appears to fit — white-space:nowrap contributes its full
     unbroken width to the container's scrollable overflow. Letting it wrap only at this width
     removes the overflow; at 375px and wider it already fits and keeps its intended single-line
     styling. Scoped to the five existing price contexts only, not every .nowrap use, since
     .nowrap is a general utility class that may be applied to unrelated content later. */
  .detail-line .nowrap, .price-line .nowrap, .checklist .nowrap { white-space: normal; }
}