/* ==========================================================================
   Cubie Health — For patients
   Different rules from the rest of the site: larger type, plainer language.
   The audience is often older, often anxious, and often checking whether we are
   a scam — so this page is a document, not a pitch.

   The page takes no card texture, no motifs, no banner and no chips, and
   nothing on it moves. A single static ambient wash at 8% alpha or less is
   permitted; anything that reads as a panel, a badge or an advertisement is not.
   ========================================================================== */

body { font-size: 1.125rem; line-height: 1.7; }

/* The ambient wash. One decorative layer, four stops, alternating sides so it
   reads as light falling across the page rather than as a border. Absolute, not
   fixed: it is anchored to the document, so different stops come into view as
   you scroll. The horizontal radius is capped at 86vw because a fixed 40rem is
   wider than a phone: uncapped, every stop floods the whole column and the
   effect stops reading as light from the side and becomes an overall tint.
   isolation keeps the z-index: -1 inside main rather than dropping it behind
   the page ground. */
main { position: relative; isolation: isolate; }
main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(min(40rem, 86vw) 26rem at -10% 12%, rgba(110, 76, 224, 0.08), transparent 70%),
    radial-gradient(min(36rem, 86vw) 24rem at 110% 38%, rgba(110, 76, 224, 0.07), transparent 70%),
    radial-gradient(min(38rem, 86vw) 26rem at  -8% 66%, rgba(110, 76, 224, 0.06), transparent 70%),
    radial-gradient(min(34rem, 86vw) 22rem at 108% 88%, rgba(110, 76, 224, 0.07), transparent 70%);
}

/* 760px INCLUDING the gutters, so the measure stays the same on every device
   rather than widening by 64px on desktop. box-sizing: border-box is global. */
.p-wrap { max-width: 760px; }

.p-hero { padding: var(--hero-top) 0 0; }
.p-hero h1 { font-size: 2.625rem; line-height: 1.14; margin-bottom: 16px; }
.p-lede { font-size: 1.125rem; color: var(--ink-soft); line-height: 1.7; }

/* The first thing to do is check with someone already trusted, so it is the
   first thing on the page after the introduction. A rule rather than a filled
   panel: a tinted box here reads as an advertisement, which is the opposite of
   what this section is for. */
.p-verify { margin-top: 24px; border-left: 2px solid var(--primary); padding-left: 20px; }
.p-verify h2 { font-size: 1.625rem; line-height: 1.2; margin-bottom: 12px; }
.p-verify p { margin-bottom: 12px; }
.p-email { margin: 4px 0 8px; }
.p-email a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1.25rem; font-weight: 600; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px; word-break: break-word;
}
.p-hint { font-size: 1rem; color: var(--ink-soft); }
.p-choice { margin-top: 24px; font-size: 1.125rem; font-weight: 600; }

.p-section { padding: 64px 0 90px; }
.p-group { margin-top: 64px; }
.p-group:first-child { margin-top: 0; }
.p-group > h2 { font-size: 1.625rem; line-height: 1.2; margin-bottom: 16px; }
.p-intro { margin-bottom: 16px; }

/* Every question after the first in a group carries a rule, so the page reads
   as a list of questions rather than one continuous wall. */
.qa { margin-top: 28px; }
.qa + .qa, .p-list + .qa { border-top: 1px solid var(--border); padding-top: 24px; }
.qa h3 { font-size: 1.3125rem; line-height: 1.3; font-weight: 700; margin-bottom: 12px; }
.qa p { font-size: 1.125rem; line-height: 1.7; margin-bottom: 14px; }
.qa p:last-child { margin-bottom: 0; }
.qa a, .p-list a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.p-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.p-list li { padding-left: 30px; position: relative; font-size: 1.125rem; line-height: 1.65; }
.p-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand-violet);
}

/* V23 preserved: pale red fill, dark red text, rounded, always expanded. */
.qa-emergency {
  background: #FBE7EB; border-radius: 16px; padding: 28px; margin-top: 40px;
}
.qa-emergency h2 { font-size: 1.625rem; line-height: 1.2; color: #8E1D30; margin-bottom: 12px; }
.qa-emergency p { font-size: 1.125rem; line-height: 1.7; margin-bottom: 14px; }
.qa-emergency p:last-child { margin-bottom: 0; }
.qa-emergency strong { color: #8E1D30; }

@media (max-width: 599px) {
  .p-hero h1 { font-size: 2.125rem; }
  .qa-emergency { padding: 24px; }
}

/* The wash is decoration, so it comes off on paper and under forced colors, the
   same way every other decorative layer on the site does in theme.css. Neither
   medium prints backgrounds reliably in the first place; these say so out loud
   rather than depending on that. Nothing on the page uses it for separation. */
@media print {
  main::before { display: none !important; }
}
@media (forced-colors: active) {
  main::before { display: none; }
}