/* ============================================================
   CannaMed OG — Rx P.T.33 2026
   English guidance page /rx-pt33/.

   Continues the light visual system of the 2026 homepage, strain
   pages and CBD section. Every rule is scoped to the body class
   `inc/rx-2026.php` adds, so nothing can reach another route.
   ============================================================ */

body.cmog-rx-2026 {
  --cmog-green: #153f34;
  --cmog-deep: #12362c;
  --cmog-sage: #eef2ec;
  --cmog-gold: #b99a62;
  --cmog-ink: #21312b;
  --cmog-text: #5d6d66;
  --cmog-paper: #f7f7f3;
  --cmog-line: #dfe6df;
  --cmog-serif: Georgia, "Times New Roman", serif;
  --cmog-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--cmog-paper);
}

body.cmog-rx-2026 .cmog-rx {
  background: var(--cmog-paper);
  color: var(--cmog-ink);
  font-family: var(--cmog-sans);
}

body.cmog-rx-2026 .cmog-rx .container {
  width: min(1360px, calc(100% - 64px));
  margin: 0 auto;
}

body.cmog-rx-2026 .cmog-rx h1,
body.cmog-rx-2026 .cmog-rx h2,
body.cmog-rx-2026 .cmog-rx h3 {
  margin: 0 0 12px;
  font-family: var(--cmog-serif);
  font-weight: 400;
  color: var(--cmog-green);
  letter-spacing: -0.02em;
}

body.cmog-rx-2026 .cmog-rx p {
  margin: 0 0 14px;
  color: var(--cmog-text);
  font-size: 15px;
  line-height: 1.75;
}

body.cmog-rx-2026 .cmog-rx a {
  color: inherit;
}

body.cmog-rx-2026 .cmog-rx img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- shared pieces ---------- */

body.cmog-rx-2026 .cmog-rx .cmog-rx-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  font-family: var(--cmog-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5f7c70;
}

body.cmog-rx-2026 .cmog-rx-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  font-size: 13px;
  color: #66736e;
}

body.cmog-rx-2026 .cmog-rx-breadcrumbs a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

body.cmog-rx-2026 .cmog-rx-breadcrumbs a:hover,
body.cmog-rx-2026 .cmog-rx-breadcrumbs a:focus-visible {
  border-bottom-color: currentColor;
}

body.cmog-rx-2026 .cmog-rx-breadcrumb-current {
  color: var(--cmog-green);
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--cmog-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn-primary {
  background: var(--cmog-green);
  border-color: var(--cmog-green);
  color: #fff;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn-primary:hover {
  background: var(--cmog-deep);
  border-color: var(--cmog-deep);
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn-outline {
  background: transparent;
  border-color: #bfcac2;
  color: var(--cmog-green);
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn-outline:hover {
  background: #fff;
  border-color: var(--cmog-green);
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn:focus-visible,
body.cmog-rx-2026 .cmog-rx a:focus-visible {
  outline: 2px solid var(--cmog-gold);
  outline-offset: 3px;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-btn-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-section-head {
  max-width: 820px;
  margin: 0 0 28px;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-section-head h2 {
  font-size: 40px;
  line-height: 1.12;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-section-head p {
  margin: 0;
  font-size: 16px;
}

/* ---------- hero ---------- */

body.cmog-rx-2026 .cmog-rx-hero {
  padding: 34px 0 48px;
}

body.cmog-rx-2026 .cmog-rx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 400px;
  column-gap: 34px;
  /* No row gap: the rest of the restriction and the QR note each join the
     block above them into one card, so spacing is set per block instead. */
  row-gap: 0;
  align-items: start;
}

/* The markup is written in the order a phone reads it. A wide screen puts the
   same blocks where the design wants them, by row, so reading order and visual
   order never disagree and no `order` is needed. */
body.cmog-rx-2026 .cmog-rx-head {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 22px;
}

body.cmog-rx-2026 .cmog-rx-intro {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 22px;
}

body.cmog-rx-2026 .cmog-rx-alert {
  grid-column: 1;
  grid-row: 3;
}

body.cmog-rx-2026 .cmog-rx-alert-detail {
  grid-column: 1;
  grid-row: 4;
  margin-bottom: 22px;
}

body.cmog-rx-2026 .cmog-rx-hero-actions {
  grid-column: 1;
  grid-row: 5;
  margin-bottom: 22px;
}

body.cmog-rx-2026 .cmog-rx-notes {
  grid-column: 1;
  grid-row: 6;
}

/* The card spans the rows the copy beside it fills, so its height never
   stretches a single row and leaves a hole in the left column; the sentence
   that explains it sits in the next row, directly underneath. */
body.cmog-rx-2026 .cmog-rx-qr-panel {
  grid-column: 2;
  grid-row: 1 / span 4;
  /* Fills its rows so the sentence underneath joins the card instead of
     floating below it. */
  align-self: stretch;
}

body.cmog-rx-2026 .cmog-rx-qr-panel .cmog-rx-qr-card {
  height: 100%;
}

body.cmog-rx-2026 .cmog-rx-qr-note-block {
  grid-column: 2;
  grid-row: 5;
}

body.cmog-rx-2026 .cmog-rx-hero-grid > * {
  min-width: 0;
}

body.cmog-rx-2026 .cmog-rx-hero-actions .cmog-rx-actions {
  margin: 0;
}

body.cmog-rx-2026 .cmog-rx-intro p:last-child {
  margin-bottom: 0;
}

body.cmog-rx-2026 .cmog-rx-head h1 {
  max-width: 14ch;
  margin-bottom: 0;
  font-size: 58px;
  line-height: 1.05;
}

body.cmog-rx-2026 .cmog-rx-lead {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.65;
  color: #334841;
}

body.cmog-rx-2026 .cmog-rx-alert,
body.cmog-rx-2026 .cmog-rx-alert-detail {
  padding: 24px 26px;
  border: 1px solid var(--cmog-line);
  background: linear-gradient(180deg, #fff, #f9fbf8);
}

body.cmog-rx-2026 .cmog-rx-alert {
  border-radius: 24px 24px 0 0;
  border-bottom: 0;
  padding-bottom: 14px;
}

body.cmog-rx-2026 .cmog-rx-alert-detail {
  border-radius: 0 0 24px 24px;
  border-top: 0;
  padding-top: 0;
}

body.cmog-rx-2026 .cmog-rx-alert-title {
  margin: 0 0 10px;
  text-wrap: balance;
  font-family: var(--cmog-serif);
  font-size: 30px;
  line-height: 1.16;
  color: var(--cmog-green);
}

body.cmog-rx-2026 .cmog-rx-alert-body {
  margin: 0;
}

/* ---------- QR panel ---------- */

body.cmog-rx-2026 .cmog-rx-qr-card {
  padding: 24px 24px 20px;
  border: 1px solid var(--cmog-line);
  border-radius: 24px 24px 0 0;
  border-bottom: 0;
  background: #fff;
}

body.cmog-rx-2026 .cmog-rx-qr-note-block {
  padding: 0 24px 22px;
  border: 1px solid var(--cmog-line);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: #fff;
}

body.cmog-rx-2026 .cmog-rx-qr-title {
  margin: 0 0 4px;
  font-size: 26px;
  line-height: 1.2;
}

body.cmog-rx-2026 .cmog-rx-qr-frame {
  margin: 16px 0 0;
  padding: 18px;
  border: 1px solid var(--cmog-line);
  border-radius: 22px;
  background: #fff;
}

body.cmog-rx-2026 .cmog-rx-qr-frame img {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 8px;
  image-rendering: pixelated;
}

body.cmog-rx-2026 .cmog-rx-qr-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- independent service and fee ---------- */

body.cmog-rx-2026 .cmog-rx-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

body.cmog-rx-2026 .cmog-rx-note-card,
body.cmog-rx-2026 .cmog-rx-fee-card {
  padding: 22px;
  border: 1px solid var(--cmog-line);
  border-radius: 24px;
  background: #fff;
}

body.cmog-rx-2026 .cmog-rx-note-card h3 {
  font-size: 23px;
  line-height: 1.26;
}

body.cmog-rx-2026 .cmog-rx-note-card p:last-child,
body.cmog-rx-2026 .cmog-rx-fee-note {
  margin-bottom: 0;
}

body.cmog-rx-2026 .cmog-rx-fee-card {
  background: var(--cmog-sage);
}

body.cmog-rx-2026 .cmog-rx-fee {
  display: block;
  margin: 6px 0 6px;
  font-family: var(--cmog-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--cmog-green);
}

body.cmog-rx-2026 .cmog-rx-fee-note {
  font-size: 14px;
}

body.cmog-rx-2026 .cmog-rx-points {
  margin: 14px 0 0;
  padding-left: 18px;
}

body.cmog-rx-2026 .cmog-rx-points li {
  margin: 0 0 10px;
  color: var(--cmog-text);
  font-size: 14px;
  line-height: 1.6;
}

body.cmog-rx-2026 .cmog-rx-points li:last-child {
  margin-bottom: 0;
}

/* ---------- how it works ---------- */

body.cmog-rx-2026 .cmog-rx-steps {
  padding: 56px 0;
  border-top: 1px solid var(--cmog-line);
}

body.cmog-rx-2026 .cmog-rx-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

body.cmog-rx-2026 .cmog-rx-step {
  padding: 24px 22px;
  border: 1px solid var(--cmog-line);
  border-radius: 24px;
  background: #fff;
}

body.cmog-rx-2026 .cmog-rx-step-no {
  display: block;
  margin: 0 0 14px;
  font-family: var(--cmog-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cmog-gold);
}

body.cmog-rx-2026 .cmog-rx-step h3 {
  font-size: 21px;
  line-height: 1.22;
}

body.cmog-rx-2026 .cmog-rx-step p:last-child {
  margin-bottom: 0;
}

/* ---------- information and terms ---------- */

body.cmog-rx-2026 .cmog-rx-cards {
  padding: 56px 0;
}

body.cmog-rx-2026 .cmog-rx-cards.cmog-rx-soft {
  background: var(--cmog-sage);
}

body.cmog-rx-2026 .cmog-rx-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

body.cmog-rx-2026 .cmog-rx-card {
  padding: 26px 24px;
  border: 1px solid var(--cmog-line);
  border-radius: 24px;
  background: #fff;
}

body.cmog-rx-2026 .cmog-rx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 0 14px;
  border: 1px solid var(--cmog-line);
  border-radius: 14px;
  background: var(--cmog-paper);
  font-size: 19px;
  line-height: 1;
}

body.cmog-rx-2026 .cmog-rx-card h3 {
  font-size: 22px;
  line-height: 1.22;
}

body.cmog-rx-2026 .cmog-rx-card p:last-child {
  margin-bottom: 0;
}

/* ---------- support ---------- */

body.cmog-rx-2026 .cmog-rx-support {
  padding: 56px 0 64px;
  border-top: 1px solid var(--cmog-line);
}

body.cmog-rx-2026 .cmog-rx-support-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

body.cmog-rx-2026 .cmog-rx-support-grid > div:first-child {
  max-width: 760px;
}

body.cmog-rx-2026 .cmog-rx-support h2 {
  font-size: 38px;
  line-height: 1.14;
}

body.cmog-rx-2026 .cmog-rx-support p {
  margin: 0;
  font-size: 16px;
}

body.cmog-rx-2026 .cmog-rx-support .cmog-rx-actions {
  margin: 0;
  flex: 0 0 auto;
}

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
  body.cmog-rx-2026 .cmog-rx-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column, in markup order: heading, the key restriction, the code, the
     two actions, then everything that explains them. Nothing is reordered
     here — the markup already reads this way. */
  body.cmog-rx-2026 .cmog-rx-hero-grid {
    display: flex;
    flex-direction: column;
    /* Stacked blocks take the full width; without this the row of actions
       shrinks to its content and the two buttons fall under each other. */
    align-items: stretch;
  }

  /* Stacked, so each block closes itself instead of joining the one above. */
  body.cmog-rx-2026 .cmog-rx-alert,
  body.cmog-rx-2026 .cmog-rx-alert-detail {
    border: 1px solid var(--cmog-line);
    border-radius: 20px;
    padding: 18px 20px;
    margin-bottom: 16px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-card {
    border: 1px solid var(--cmog-line);
    border-radius: 20px;
    padding: 18px 18px 20px;
    margin-bottom: 16px;
  }

  /* The sentence explaining the code reads as plain text under the actions,
     not as a second card. */
  body.cmog-rx-2026 .cmog-rx-qr-note-block {
    padding: 0;
    border: 0;
    background: none;
    margin-bottom: 16px;
  }

  body.cmog-rx-2026 .cmog-rx-head,
  body.cmog-rx-2026 .cmog-rx-intro,
  body.cmog-rx-2026 .cmog-rx-hero-actions {
    margin-bottom: 16px;
  }

  body.cmog-rx-2026 .cmog-rx-head h1 {
    max-width: 18ch;
    font-size: 46px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-card {
    display: grid;
    justify-items: start;
  }

  body.cmog-rx-2026 .cmog-rx-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.cmog-rx-2026 .cmog-rx-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cmog-rx-2026 .cmog-rx-support-grid {
    display: block;
  }

  body.cmog-rx-2026 .cmog-rx-support .cmog-rx-actions {
    margin-top: 22px;
  }
}

/* ---------- phone ---------- */

@media (max-width: 760px) {
  body.cmog-rx-2026 .cmog-rx .container {
    width: calc(100% - 32px);
  }

  body.cmog-rx-2026 .cmog-rx-hero {
    padding: 22px 0 32px;
  }

  body.cmog-rx-2026 .cmog-rx-breadcrumbs {
    margin-bottom: 12px;
  }

  body.cmog-rx-2026 .cmog-rx-head h1 {
    max-width: none;
    font-size: 29px;
    line-height: 1.12;
  }

  body.cmog-rx-2026 .cmog-rx-head .cmog-rx-eyebrow {
    margin-bottom: 8px;
  }

  body.cmog-rx-2026 .cmog-rx-head,
  body.cmog-rx-2026 .cmog-rx-intro,
  body.cmog-rx-2026 .cmog-rx-hero-actions,
  body.cmog-rx-2026 .cmog-rx-qr-card,
  body.cmog-rx-2026 .cmog-rx-qr-note-block {
    margin-bottom: 14px;
  }

  body.cmog-rx-2026 .cmog-rx-lead {
    font-size: 16px;
  }

  /* The first screen has to carry the key restriction, the code and both
     actions, so every block above the code is kept tight. */
  body.cmog-rx-2026 .cmog-rx-alert,
  body.cmog-rx-2026 .cmog-rx-alert-detail {
    padding: 16px 18px;
    margin-bottom: 14px;
  }

  body.cmog-rx-2026 .cmog-rx-alert-title {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    /* On a narrow column balancing leaves a short second line; filling each
       line reads better and costs nothing in height. */
    text-wrap: wrap;
  }

  /* Side by side while both fit, stacked on the narrowest screens. */
  body.cmog-rx-2026 .cmog-rx .cmog-rx-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    gap: 10px;
  }

  body.cmog-rx-2026 .cmog-rx .cmog-rx-btn {
    width: 100%;
    padding-inline: 12px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-card {
    display: block;
    padding: 16px 16px 18px;
    border-radius: 20px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-title {
    margin: 0;
    font-size: 21px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-card .cmog-rx-eyebrow {
    margin-bottom: 6px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-frame {
    margin: 12px 0 0;
    padding: 10px;
    border-radius: 16px;
  }

  /* Measured, not guessed: the code still decodes at this size — the browser
     pass reads it back from the pixels the page paints. */
  body.cmog-rx-2026 .cmog-rx-qr-frame img {
    width: 100%;
    max-width: 210px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-note {
    font-size: 13.5px;
  }

  body.cmog-rx-2026 .cmog-rx-notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.cmog-rx-2026 .cmog-rx-note-card,
  body.cmog-rx-2026 .cmog-rx-fee-card,
  body.cmog-rx-2026 .cmog-rx-step,
  body.cmog-rx-2026 .cmog-rx-card {
    padding: 20px;
    border-radius: 20px;
  }

  body.cmog-rx-2026 .cmog-rx-note-card h3 {
    font-size: 21px;
  }

  body.cmog-rx-2026 .cmog-rx-fee {
    font-size: 42px;
  }

  body.cmog-rx-2026 .cmog-rx-steps,
  body.cmog-rx-2026 .cmog-rx-cards,
  body.cmog-rx-2026 .cmog-rx-support {
    padding: 36px 0;
  }

  body.cmog-rx-2026 .cmog-rx-steps-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cmog-rx-2026 .cmog-rx .cmog-rx-section-head {
    margin-bottom: 22px;
  }

  body.cmog-rx-2026 .cmog-rx .cmog-rx-section-head h2,
  body.cmog-rx-2026 .cmog-rx-support h2 {
    font-size: 30px;
  }
}

/* ---------- short phones ---------- */

/* On a short screen (an iPhone SE is 667 px tall) the same five things still
   have to share the first view: heading, the key restriction, the code and the
   two actions. Only this height band is tightened, so taller phones keep the
   larger code. */
@media (max-width: 760px) and (max-height: 720px) {
  body.cmog-rx-2026 .cmog-rx-breadcrumbs {
    margin-bottom: 8px;
  }

  body.cmog-rx-2026 .cmog-rx-head h1 {
    font-size: 25px;
  }

  body.cmog-rx-2026 .cmog-rx-head,
  body.cmog-rx-2026 .cmog-rx-alert,
  body.cmog-rx-2026 .cmog-rx-qr-card {
    margin-bottom: 10px;
  }

  body.cmog-rx-2026 .cmog-rx-alert {
    padding: 12px 16px;
  }

  body.cmog-rx-2026 .cmog-rx-alert-title {
    font-size: 20px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-card {
    padding: 12px 14px 14px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-title {
    font-size: 18px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-frame {
    margin-top: 10px;
    padding: 8px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-frame img {
    max-width: 168px;
  }
}

/* On the shortest screens still in use (320 x 568) the two actions cannot
   share the frame with the code: the measurements are in the report. The code
   itself is kept inside it, because scanning is what this screen is for. */
@media (max-width: 760px) and (max-height: 620px) {
  body.cmog-rx-2026 .cmog-rx-breadcrumbs {
    margin-bottom: 4px;
  }

  body.cmog-rx-2026 .cmog-rx-head,
  body.cmog-rx-2026 .cmog-rx-alert {
    margin-bottom: 8px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-title {
    font-size: 16px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-frame {
    padding: 6px;
  }

  body.cmog-rx-2026 .cmog-rx-qr-frame img {
    max-width: 144px;
  }
}

/* ---------- narrow phones ---------- */

@media (max-width: 380px) {
  /* Keeps both actions on one line beside each other, which is what lets the
     code and the actions share the first screen on a 360 px phone. */
  body.cmog-rx-2026 .cmog-rx .cmog-rx-btn {
    gap: 7px;
    font-size: 13px;
  }
}

/* ============================================================
   0.1.211 — one block for the independent service and its fee,
   and the visitor FAQ as the last section before the footer.
   The hero rows above (heading, restriction, QR code, actions,
   note) are untouched: this block takes the sixth row, which the
   old pair of cards used, across both columns.
   ============================================================ */

body.cmog-rx-2026 .cmog-rx-service {
  grid-column: 1 / -1;
  grid-row: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  margin-top: 10px;
  border: 1px solid var(--cmog-line);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}

body.cmog-rx-2026 .cmog-rx-service-main {
  padding: 30px 34px 30px;
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-pill {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cmog-sage);
  font-family: var(--cmog-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a6557; /* 5.6:1 on the pill */
}

body.cmog-rx-2026 .cmog-rx .cmog-rx-service-title {
  max-width: 30ch;
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.22;
}

body.cmog-rx-2026 .cmog-rx-service-main p {
  max-width: 68ch;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.7;
  color: #3e5048;
}

body.cmog-rx-2026 .cmog-rx-service-main p:last-child {
  margin-bottom: 0;
}

body.cmog-rx-2026 .cmog-rx-service-fee {
  padding: 30px 30px 28px;
  border-left: 1px solid var(--cmog-line);
  background: #fafbf8;
}

body.cmog-rx-2026 .cmog-rx-service-fee .cmog-rx-eyebrow {
  color: #4a6557;
}

body.cmog-rx-2026 .cmog-rx-service-fee .cmog-rx-fee {
  margin: 4px 0 8px;
  font-size: 50px;
}

body.cmog-rx-2026 .cmog-rx-service-fee .cmog-rx-fee-note {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cmog-green);
}

body.cmog-rx-2026 .cmog-rx-fee-detail {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: #3e5048;
}

body.cmog-rx-2026 .cmog-rx-fee-help {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--cmog-line);
  font-size: 14px;
  line-height: 1.6;
  color: #4b5c55; /* 6.5:1 on #fafbf8 */
}

/* ---------- FAQ ---------- */

body.cmog-rx-2026 .cmog-rx-faq {
  padding: 58px 0 66px;
  background: #fff;
  border-top: 1px solid var(--cmog-line);
}

body.cmog-rx-2026 .cmog-rx-faq .cmog-rx-eyebrow {
  color: #4a6557;
}

body.cmog-rx-2026 .cmog-rx-faq-list {
  display: grid;
  gap: 10px;
  max-width: 1000px;
}

body.cmog-rx-2026 .cmog-rx-faq-item {
  border: 1px solid var(--cmog-line);
  border-radius: 14px;
  background: #fff;
}

body.cmog-rx-2026 .cmog-rx-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
  font-family: var(--cmog-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--cmog-green);
}

body.cmog-rx-2026 .cmog-rx-faq-item summary::-webkit-details-marker {
  display: none;
}

body.cmog-rx-2026 .cmog-rx-faq-item summary::marker {
  content: "";
}

body.cmog-rx-2026 .cmog-rx-faq-item summary:focus-visible {
  outline: 3px solid var(--cmog-gold);
  outline-offset: 3px;
  border-radius: 14px;
}

body.cmog-rx-2026 .cmog-rx-faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

body.cmog-rx-2026 .cmog-rx-faq-mark::before,
body.cmog-rx-2026 .cmog-rx-faq-mark::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  background: #4a6557;
  transition: transform 0.18s ease;
}

body.cmog-rx-2026 .cmog-rx-faq-mark::after {
  transform: rotate(90deg);
}

body.cmog-rx-2026 .cmog-rx-faq-item[open] .cmog-rx-faq-mark::after {
  transform: rotate(0deg);
}

body.cmog-rx-2026 .cmog-rx-faq-answer {
  padding: 0 20px 18px;
}

body.cmog-rx-2026 .cmog-rx-faq-answer p {
  max-width: 78ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #3e5048;
}

@media (max-width: 1100px) {
  body.cmog-rx-2026 .cmog-rx-service {
    margin-top: 6px;
  }
}

@media (max-width: 760px) {
  body.cmog-rx-2026 .cmog-rx-service {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 20px;
  }

  body.cmog-rx-2026 .cmog-rx-service-main {
    padding: 22px 20px 20px;
  }

  body.cmog-rx-2026 .cmog-rx .cmog-rx-service-title {
    font-size: 25px;
  }

  body.cmog-rx-2026 .cmog-rx-service-main p {
    font-size: 15px;
  }

  body.cmog-rx-2026 .cmog-rx-service-fee {
    padding: 20px 20px 22px;
    border-left: 0;
    border-top: 1px solid var(--cmog-line);
  }

  body.cmog-rx-2026 .cmog-rx-service-fee .cmog-rx-fee {
    font-size: 42px;
  }

  body.cmog-rx-2026 .cmog-rx-faq {
    padding: 40px 0 48px;
  }

  body.cmog-rx-2026 .cmog-rx-faq-item summary {
    padding: 14px 16px;
    font-size: 15px;
  }

  body.cmog-rx-2026 .cmog-rx-faq-answer {
    padding: 0 16px 16px;
  }

  body.cmog-rx-2026 .cmog-rx-faq-answer p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cmog-rx-2026 .cmog-rx-faq-mark::before,
  body.cmog-rx-2026 .cmog-rx-faq-mark::after {
    transition: none;
  }
}