/* Additions for the 2026-10 copy. Uses the site's own variables and type. */
.footer-indication { margin-bottom: .6em; }
.footer-indication p { margin-bottom: .4em; }
.footer-refs-label { margin-bottom: .2em; font-weight: 600; }
.form-rx-note { color: #f3ebe0; opacity: .85; margin-top: 1.2em; margin-bottom: 0; }
.how-sample-note { margin-top: 1em; }
.evidence-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; width: 100%; }
.evidence-copy .evidence-block p { margin-bottom: 0; }
.evidence-copy .evidence-block .text-tag.data { margin: 0; }
.evidence-trademark { grid-column: 1 / -1; margin: 0; }
@media screen and (max-width: 767px) {
  .evidence-copy { grid-template-columns: 1fr; gap: 2em; }
}
/* overflow guards (restored, fix 1) */
.evidence-copy > * { min-width: 0; }
.footer-bottom .rich-text-block a { color: inherit; overflow-wrap: anywhere; }

/* Fix pass 1, 2026-10-16 */
/* regulatory lines: never below 12px at any width */
.footer-bottom .rich-text-block { font-size: max(12px, .94em); }
.body-paragraph.small.var-font.form-rx-note { font-size: max(12px, .81em); }
.nowrap { white-space: nowrap; }
/* Home: mechanism drawing labels clear the card edge */
@media screen and (min-width: 480px) {
  .how-it-works-wrapper:not(.why-better) { padding-bottom: 32px; }
}
@media screen and (max-width: 479px) {
  .sampler-position-mobile.third { top: calc(14.6em + 12px); left: 3.8em; }
}
/* About: the held card's empty column takes no space on phones */
@media screen and (max-width: 767px) {
  .about-key-figure-wrapper[aria-hidden="true"] { display: none; }
}
/* Evidence: the single resource card, centred */
.problem-grid.resources-single { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.problem-grid.resources-single .resource-block { width: calc((100% - 2.5em) / 3); }
@media screen and (max-width: 479px) {
  .problem-grid.resources-single .resource-block { width: 100%; }
}
/* Form: State required, sending state */
.fs-selectcustom_dropdown-toggle.is-invalid { box-shadow: 0 0 0 3px #f0573f; border-radius: .5em; }
.form-submit-wrapper .button-link.is-sending { opacity: .6; cursor: progress; }
.form-submit-wrapper .button-link.is-sending input[type=submit] { cursor: progress; }
.form-submit-wrapper .button-link.is-sending .arrow { animation: utp-sending .8s ease-in-out infinite alternate; }
@keyframes utp-sending { from { transform: translateX(0); } to { transform: translateX(.5em); } }
@media (prefers-reduced-motion: reduce) { .form-submit-wrapper .button-link.is-sending .arrow { animation: none; } }
.w-form-done:focus { outline: none; }

/* Fix pass 2, 2026-10-16 */
/* Evidence, phones: "From the cervix / to the preservative." on two lines, no word alone */
@media screen and (max-width: 479px) {
  .h3-heading.for-her { font-size: 2.25em; }
}
/* Evidence: the Cook trademark line gets the same 12px floor as the indication */
.body-paragraph.small.var-font.evidence-trademark { font-size: max(12px, .81em); }
/* About, phones: the decorative curve sits behind the card text, not across it */
@media screen and (max-width: 479px) {
  .movement-block .movement-pattern { z-index: -1; }
  .movement-block.c .movement-pattern.b.mobile { top: -2.2em; }
}

/* Sunday changes, 2026-10-19 */
/* Request a Demonstration: berry instead of lilac (Maya, MAYA-BUTTON.md) */
.button-link.pastel { background-color: var(--berry-body); color: var(--white); transition: background-color .2s ease; }
.button-link.pastel .arrow { filter: brightness(0) invert(1); } /* arrow PNG is berry; without this it disappears */
.button-link.pastel:hover, .button-link.pastel:focus-visible { background-color: var(--brown); }
/* footer: the longer label wrapped both footer buttons to 2 lines at every width 768-1920 */
@media screen and (min-width: 480px) { .footer-top-right-content { width: 32em; } }
/* Form: two checkboxes (demonstration, bench test report), stacked */
.form-check-box { flex-direction: column; align-items: flex-start; grid-row-gap: .75em; }
/* "Contact Utepreva" is longer than "Contact Sales": the 13.13em hero buttons wrapped it to two lines at 1440 */
@media screen and (min-width: 480px) { .button-link.fixed-width:not(.nav) { width: auto; min-width: 13.13em; white-space: nowrap; } }
/* About, Vision for Growth: the longer mission paragraph (R19) ran into the decorative curve.
   Curve and goal cards move down together by 9em (fluid em), so they keep their relation to each other. */
@media screen and (min-width: 480px) {
  .vision-growth .pattern-vision { top: 19.9em; }
  .vision-growth .movement-grid { margin-top: -1.36em; }
}
@media screen and (min-width: 1920px) {
  .vision-growth .pattern-vision.large { top: 17.3em; }
  .vision-growth .movement-grid { margin-top: -.06em; }
}
/* fix pass 1 (2026-10-19), Maya M1: About goal cards, right padding matched to left so the R22 line clears the stripe */
.movement-block { padding-right: 1.8em; }
@media screen and (max-width: 479px) { .movement-block { padding-right: 1.8em; } }  /* overrides the Webflow 6em */
@media screen and (min-width: 1920px) { .body-paragraph.movement { font-size: 1.85em; } } /* 1920 type is larger; without this "before" sits alone */
/* Maya S2: hover parity on the orange button (darker orange fails contrast, so a ring) */
.button-link.fixed-width { transition: box-shadow .2s ease; }
.button-link.fixed-width:hover, .button-link.fixed-width:focus-visible { box-shadow: inset 0 0 0 2px var(--berry-body); }
/* Maya S3: About vision heading, no lone "cancer" on phones */
@media screen and (max-width: 479px) { .h3-heading.vision br { display: none; } }
/* fix pass 1: Home H1 on phones flows as one sentence ("One endometrial / sampler. Three ways / ...") so no word sits alone */
@media screen and (max-width: 479px) { .h1-heading.home-h1 br { display: none; } }

/* 10/23 Damian (Android): phones only. The hero's bottom spacer and How It Collects' top spacer are both Webflow
   .spacer.large.mobile-variant (8em each, 218px together) and the hero art they make room for is hidden below 480px,
   so the phone showed an empty band. Shorten both. The How It Collects CTA pair repeated the hero pair two lines
   later; hide it on phones (desktop unchanged). */
@media screen and (max-width: 479px) {
  .hero > .spacer.large.mobile-variant { height: 3em; }
  .problem > .spacer.large.mobile-variant { height: 4em; }
  .problem .hero-button-wrappr { display: none; }
}

/* 10/23 Jeanetta: Evidence hero band variants, switched on by build.py EVIDENCE_HERO (default pink = no class).
   cream = the Home .hero texture, orange = the .hero.about texture; ribbon art untouched. */
.hero.why-better.hero-cream { background-color: transparent; background-image: url("/assets/img/69dd6e226e450b23364f1d03_Group-1000002753.avif"); }
.hero.why-better.hero-orange { background-color: transparent; background-image: url("/assets/img/69dfee2c852615b13c12417b_Frame-96.avif"); }
.hero.why-better.hero-orange .courage-red { color: var(--berry-body); }

/* 10/23 Maya: phone card heights (Damian "tiles come 1 after another"). Phones only.
   .problem-top is scoped to .problem-block: the Evidence resource card reuses .problem-top.
   .resource-block keeps 5.5em bottom padding because its link is position:absolute; bottom:0. */
@media screen and (max-width: 479px) {
  .problem-grid:not(.resources-single) { row-gap: .75em; }
  .problem-block { height: auto; padding: 1.25em 1.5em; gap: .6em; }
  .problem-block .problem-top { flex-direction: row; align-items: baseline; column-gap: .6em; }
  .problem-block .key-figures { font-size: 3em; }
  .resource-block { height: auto; padding-bottom: 5.5em; }
  .evidence .container > .spacer.medium { height: 2.5em; }
  /* Maya 5: footer column ran 6px past the .container right edge (fixed 27em width); fit it to the container */
  .footer-top-right-content { width: 100%; }
}
/* 10/23 Maya final: iPad type floor. body is font-size:1vw from 480 to 1919px, so at 768 every
   .9em label renders at 7px. Floors only; max() keeps the designed size wherever it is larger. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .nav-link { font-size: max(13px, .9em); }
  .text-tag:not(.data):not(.resources-text) { font-size: max(10.5px, .94em); }
  .button-link:not(.large) { font-size: max(11px, .94em); }
  .problem-block .body-paragraph.small.var-font { font-size: max(11px, .81em); }
  .body-paragraph.medium.light, .download-text { font-size: max(12px, 1.25em); }
  .checkbox-label, .text-field, .select-field, .fs-selectcustom_dropdown-toggle { font-size: max(12px, 1em); }
  .form-field-wrapper { height: max(40px, 3.13em); }
  .w-checkbox-input.checkbox { width: max(16px, 1.63em); height: max(16px, 1.63em); }
  .footer-links, .footer-text { font-size: max(12px, .94em); }
  .footer-top-right-content { width: auto; }
}

/* 10/23 Maya final: no word alone on a line. */
.body-paragraph.large, .problem-block .body-paragraph.small.var-font, .body-paragraph.mission-block, .body-paragraph.medium.light { text-wrap: pretty; }
@media screen and (max-width: 479px) {
  .h2-heading { font-size: 2.7em; }
  .h2-heading.about { font-size: 2.9em; }
  .how-it-works-wrapper { padding-left: 1em; padding-right: 1em; }
  .h2-heading.line-spacer { font-size: 1.85em; }
}

/* 10/23 Baron: on desktop the hero plus the white gap filled a ~960px window and How It Collects stayed
   hidden until a scroll (its Webflow fade only fires once the block's top is above 80% of the window).
   Desktop only (992px and up; tablet and phone unchanged). The hero's two .spacer.large blocks shrink with
   the window height so the How It Collects top lands at about 76% of the window (Maya: margin under the 80% trigger), never above 15em (the
   Webflow value, so tall windows look as before) or below 5em. How It Collects' top spacer goes 15em to 13em:
   the pink ribbon reaches 10.8em into that section, so the tag keeps clear of it.
   Hero chrome above How It Collects = nav 5.14em + content 20.3em + 13em = 38.44em; 38vh - 19.22em is half
   of (76vh - 38.44em). */
@media screen and (min-width: 992px) {
  .hero:not(.about):not(.why-better) > .spacer.large { height: clamp(5em, calc(38vh - 19.22em), 15em); }
  .hero:not(.about):not(.why-better) + .problem > .spacer.large.mobile-variant { height: 13em; }
}

/* 10/24 Baron (Maya rec): on desktop the How It Collects block (tag, heading, paragraph, buttons) shows on load
   instead of waiting for its Webflow slide-in, which never fired on the first screen at 16:9 laptop sizes.
   Home only, 992px and up; tablet and phone keep the animation. !important beats the inline styles IX2 writes. */
@media screen and (min-width: 992px) {
  .hero:not(.about):not(.why-better) + .problem .p-cntent-wrapper { opacity: 1 !important; transform: none !important; }
}