/* LIVE 1.2.0 — one mobile-first presentation system.
 * This final cascade layer owns layout, type and component presentation.
 * Medical values, time-window geometry and the approved brand are unchanged.
 */

body.sw-app-page {
  --sw-space-xs: 8px;
  --sw-space-sm: 12px;
  --sw-space-md: 18px;
  --sw-space-lg: 24px;
  --sw-space-xl: 36px;
  --sw-radius-control: 12px;
  --sw-radius-card: 18px;
  --sw-radius-panel: 24px;
  --sw-panel-shadow: 0 12px 36px rgba(47, 53, 52, .045);
  --sw-border: rgba(62, 91, 83, .17);
  --sw-warning-ink: #7a4835;
  --sw-warning-surface: #f6ece3;
  --sw-warning-border: #c99680;
  background: var(--v2-ivory, #f7f4ec);
  color: var(--v2-ink, #2f3534);
  font-size: 17px;
  line-height: 1.6;
}

/* Containment comes from shrinkable tracks and border boxes, never clipping.
 * This also exposes regressions to document-width QA instead of hiding them. */
html:has(body.sw-app-page),
body.sw-app-page,
body.sw-app-page :where(main, .v2-main, .fs-main, .pc-main) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: visible;
}

.sw-app-page *,
.sw-app-page *::before,
.sw-app-page *::after {
  box-sizing: border-box;
}

.sw-app-page :where(main, section, article, aside, form, fieldset, figure, dl, details),
.sw-app-page :where(.container, .v2-shell, .sw-content-shell),
.sw-app-page :where(form, fieldset, .calculator-layout, .v2-hero-grid, .v2-journal-layout, .pc-layout, .fs-entry-grid) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.sw-app-page :where(form, fieldset) {
  min-width: 0;
}

/* Give the approved lockup its own explicit track. An auto-width image inside
 * a fit-content flex link can otherwise collapse when navigation is wide. */
.sw-app-page .sw-site-header-inner {
  grid-template-columns: max-content minmax(0, 1fr);
}

.sw-app-page .sw-site-header .site-brand {
  width: 188px;
  min-width: 188px;
  max-width: none;
  flex-shrink: 0;
  justify-self: start;
}

.sw-app-page .sw-site-header .site-brand-lockup {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 128;
  flex: none;
}

.sw-app-page .sw-site-header :is(.sw-header-action, .sw-site-header-actions) {
  justify-self: end;
}

.sw-app-page :where(.sw-control-wrap, .input-wrap, .v2-field-row, .body-signal-select, .pc-field, .pc-event > label) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.sw-app-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-block-size: 52px !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 12px 14px;
  border: 1px solid rgba(62, 91, 83, .28);
  border-radius: var(--sw-radius-control);
  background-color: #fff;
  color: var(--v2-ink, #2f3534);
  font-size: 17px !important;
  line-height: 1.35;
  box-shadow: none;
}

.sw-app-page select {
  padding-inline-end: 30px;
}

.sw-app-page .v2-input-suffix {
  border-radius: var(--sw-radius-control);
  border-color: rgba(62, 91, 83, .28);
  background: #fff;
}

.sw-app-page .v2-input-suffix input {
  border: 0;
  background: transparent;
}

.sw-app-page input.input-with-suffix[type="number"] {
  padding-inline-end: 64px;
  appearance: textfield;
  -moz-appearance: textfield;
}

.sw-app-page :where(input.input-with-suffix[type="number"], .v2-input-suffix input[type="number"])::-webkit-inner-spin-button,
.sw-app-page :where(input.input-with-suffix[type="number"], .v2-input-suffix input[type="number"])::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Auto sizing lets the wrapper's Grid track stretch the native iOS border box.
 * It must win over every earlier percentage-width temporal-control rule. */
.sw-app-page .sw-control-wrap > :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]) {
  inline-size: auto !important;
  width: auto !important;
  justify-self: stretch;
}

.sw-app-page :where(input[type="date"], input[type="time"])::-webkit-date-and-time-value {
  min-inline-size: 0;
  text-align: start;
  margin: 0;
}

.sw-app-page :where(input[type="date"], input[type="time"])::-webkit-datetime-edit {
  min-inline-size: 0;
  padding: 0;
}

.sw-app-page :where(input, select, textarea):focus-visible {
  outline: 3px solid rgba(62, 91, 83, .22);
  outline-offset: 2px;
  border-color: var(--v2-sage-deep, #3e5b53);
}

.sw-app-page :where(button, summary, a[role="button"]) {
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 44px;
  touch-action: manipulation;
}

.sw-app-page :where(button, summary) {
  white-space: normal;
  line-height: 1.35;
}

.sw-app-page :where(.v2-submit, .calculate-button, .primary-button, .pc-primary-action, .body-signal-commit, .fs-check-submit) {
  min-height: 54px;
  padding: 14px 18px;
  border-radius: var(--sw-radius-control);
  font-size: 17px;
  line-height: 1.35;
  box-shadow: none;
}

.sw-app-page :where(.v2-field-row > label, .field-group > label, .pc-field > label, .body-signal-select > span),
.sw-app-page :where(.v2-segmented, .pattern-fields, .pc-fieldset) > legend {
  margin-bottom: 8px;
  color: var(--v2-ink, #2f3534);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.sw-app-page :where(.v2-field-row, .field-group) {
  margin-bottom: 20px;
}

.sw-app-page :where(.pattern-options, .v2-segmented, .body-signal-options-three, .pc-segmented) {
  gap: 8px;
}

.sw-app-page :where(.pattern-choice span, .v2-segmented span, .body-signal-options span, .pc-segmented span) {
  min-height: 48px;
  height: auto;
  padding: 10px 8px;
  border-radius: var(--sw-radius-control);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: normal;
}

/* Hierarchy uses sentence-case labels, a readable text rhythm, and restrained
 * surfaces. The original semantic sage/clay/plum roles remain intact. */
.sw-app-page :where(.v2-kicker, .v2-overline, .eyebrow, .sw-difference-eyebrow) {
  font-size: 12px;
  letter-spacing: .075em;
  line-height: 1.5;
}

.sw-app-page :where(.v2-lead, .pc-lead, .fs-lead, .calculator-intro > p, .v2-journal-heading > p) {
  font-size: 18px;
  line-height: 1.6;
}

/* These long text-bearing headings retain their normal typography. At larger
 * user text sizes they may wrap inside their existing column rather than
 * retaining an unbreakable German word wider than the viewport. */
.sw-app-page :is(#home-title, #sw-difference-title, #age-title, #age-distinction-title, #pregnancy-risks-title, #when-to-seek-help-title, #age-partners-title, #trying-result-title, #fs-title, #support-orientation-title, #support-no-blame-title),
.sw-app-page .v2-age-distinction-grid :is(h2, h3),
.sw-app-page .fs-switcher button,
.sw-app-page .v2-intent-card :is(strong, small),
.sw-app-page [data-result-window] :is(span, dt),
.sw-app-page .sw-app-global-footer :is(p, strong) {
  min-inline-size: 0;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  white-space: normal;
}

.sw-app-page .v2-intent-card > span:last-child {
  min-inline-size: 0;
}

.sw-app-page .fs-switcher button {
  height: auto;
  min-height: 48px;
  flex: 1 1 0;
}

.sw-app-page :where(.v2-quick-card, .calculator-form-panel, .result-panel, .context-panel, .v2-journal-workspace, .v2-journal-result, .v2-trying-card, .pc-workspace, .fs-entry-actions, .fs-check-workspace) {
  padding: 24px;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-panel);
  background: var(--v2-paper, #fffdf8);
  box-shadow: var(--sw-panel-shadow);
  overflow: visible;
}

.sw-app-page .v2-quick-card::before,
.sw-app-page .context-panel::after {
  content: none;
}

.sw-app-page :where(.v2-card-heading, .v2-result-topline, .result-topline, .pc-entry-topline) {
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.sw-app-page .v2-trying-card:has(#trying-result:not([hidden])) > .v2-card-heading {
  display: none;
}

.sw-app-page :is(.v2-intent-list, .v2-age-personal-grid, .fs-path-grid) {
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sw-app-page :is(.v2-intent-card, .v2-age-personal-grid > article, .fs-path) {
  border: 1px solid var(--sw-border);
  border-radius: 16px;
  background: var(--v2-paper, #fffdf8);
}

.sw-app-page :where(.v2-step-chip, .v2-data-basis-chip, .v2-evidence-badge, .fs-action-label) {
  max-inline-size: 100%;
  height: auto;
  white-space: normal;
  font-size: 12px;
  line-height: 1.4;
}

.sw-app-page :where(.v2-result-notice, .estimate-notice, .result-note, .v2-data-foundation, .v2-result-basis, .pc-boundary, .fs-central-boundary) {
  padding: 16px;
  border-radius: var(--sw-radius-card);
  box-shadow: none;
}

.sw-app-page :where(.result-lead, .v2-mini-result > p, .v2-journal-result-lead, .result-note p, .v2-data-foundation p, .body-signal-boundary, .pc-boundary p, .v2-result-notice span) {
  font-size: 16px;
  line-height: 1.55;
}

.sw-app-page :where(.result-note h2, .v2-data-foundation h3, .v2-result-basis h3) {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.35;
}

.sw-app-page :where(.sw-result-method > summary, .body-signal-accordion-toggle, .v2-age-band-list summary, .fs-topic summary) {
  min-height: 56px;
  gap: 16px;
  font-size: 16px;
  line-height: 1.4;
}

.sw-app-page .sw-result-method > summary {
  color: var(--v2-sage-deep, #3e5b53);
  opacity: 1;
}

/* The long German risk label must yield space to its disclosure control.
 * Hyphenation preserves a readable font size even in a 320 px viewport. */
.sw-app-page .v2-age-risk-list {
  overflow: visible;
}

.sw-app-page .v2-age-risk-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 12px;
  min-inline-size: 0;
  padding: 16px;
}

.sw-app-page .v2-age-risk-list summary > span:first-child {
  min-inline-size: 0;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
}

.sw-app-page .v2-age-risk-list summary > span[aria-hidden] {
  justify-self: end;
}

/* Each result range has a full readable row. This applies at every viewport:
 * desktop calculator panels can be narrower than a tablet viewport. */
.sw-app-page :where(.range-block, .range-stats, .v2-result-pairs, .v2-journal-window-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-inline-size: 0;
}

.sw-app-page :where(.range-block, .v2-result-pairs) {
  margin-block: 16px;
}

.sw-app-page [data-result-window] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-inline-size: 0;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--sw-border);
  border-inline-start: 4px solid var(--range-color);
  border-radius: 14px;
  background: var(--range-wash);
}

.sw-app-page [data-result-window][data-range="broad"] {
  padding-block: 18px;
}

.sw-app-page .v2-journal-window-broad {
  margin-block-end: 10px;
}

.sw-app-page .v2-journal-heading {
  flex-wrap: wrap;
}

.sw-app-page .v2-journal-heading > div:first-child {
  min-inline-size: 0;
  flex: 1 1 280px;
}

.sw-app-page .v2-history-count {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  inline-size: 154px;
  min-inline-size: 0;
  max-inline-size: 100%;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
}

.sw-app-page .v2-history-count span {
  min-inline-size: 0;
  font-size: 12px;
  line-height: 1.35;
  text-transform: none;
  overflow-wrap: anywhere;
}

.sw-app-page [data-result-window] :where(.range-label, .stat-label, span, dt) {
  display: block;
  margin: 0;
  color: var(--v2-ink, #2f3534);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.sw-app-page [data-result-window] :where(.range-value, .stat-value, strong, dd) {
  display: block;
  min-inline-size: 0;
  margin: 0;
  color: var(--v2-ink, #2f3534);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
  white-space: normal;
  overflow-wrap: normal;
}

.sw-app-page [data-result-window] small {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.sw-app-page .sw-result-range-explanation {
  margin: 16px 0 24px;
  font-size: 15px;
  line-height: 1.6;
}

.sw-app-page :where(.v2-home-result-scale, .result-timeline, .v2-journal-timeline) {
  margin: 24px 0;
  padding: 18px 0;
  border-block: 1px solid var(--sw-border);
}

.sw-app-page :where(.v2-home-result-scale figcaption, .v2-journal-timeline figcaption, .timeline-heading) {
  display: block;
  margin-bottom: 20px;
  color: var(--v2-ink, #2f3534);
  font-size: 16px;
  line-height: 1.4;
}

.sw-app-page .timeline-heading h2 {
  margin-bottom: 4px;
  font-size: 17px;
}

.sw-app-page .timeline-heading > span {
  display: block;
  font-size: 13px;
}

/* Direct labels replace the detached tiny legend. All bands retain exactly
 * the same track width and untouched inclusive-day geometry. Full dates are
 * above each band, so coincident boundaries never compete for axis space. */
.sw-app-page .result-scale-legend {
  display: none;
}

.sw-app-page .result-scale-bands {
  display: grid;
  gap: 20px;
}

.sw-app-page .result-scale-row {
  min-inline-size: 0;
}

.sw-app-page .result-scale-row-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}

.sw-app-page .result-scale-row-label > span {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.sw-app-page .result-scale-row-label strong {
  color: var(--v2-ink, #2f3534);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.sw-app-page .result-scale-band {
  height: 12px;
  border-radius: 4px;
  background: rgba(47, 53, 52, .065);
  overflow: visible;
}

.sw-app-page .result-scale-band > i {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(47, 53, 52, .12);
}

.sw-app-page .result-scale-axis,
.sw-app-page .result-scale[data-has-higher="false"] .result-scale-axis {
  height: 40px;
  margin-top: 12px;
  border-top: 1px solid var(--sw-border);
}

.sw-app-page .result-scale-marker > span {
  max-width: none;
}

.sw-app-page .result-scale-marker[data-marker="broad-start"] > span,
.sw-app-page .result-scale-marker[data-marker="broad-end"] > span,
.sw-app-page .result-scale[data-has-higher="false"] .result-scale-marker[data-marker="broad-start"] > span,
.sw-app-page .result-scale[data-has-higher="false"] .result-scale-marker[data-marker="broad-end"] > span {
  top: 8px;
}

.sw-app-page .result-scale-marker:not([data-marker="broad-start"]):not([data-marker="broad-end"]) > span,
.sw-app-page .result-scale-marker small {
  display: none;
}

.sw-app-page .result-scale-marker strong {
  color: var(--v2-muted, #66706d);
  font-size: 12px;
  font-weight: 500;
}

.sw-app-page .result-bottom {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* The signal modules use the same calm card system as the form. Illustrations
 * retain their whole canvas; explanatory text never sits over the artwork. */
.sw-app-page .body-signal-cards {
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sw-app-page .body-signal-card {
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-card);
  background: rgba(255, 253, 248, .9);
  box-shadow: none;
  overflow: visible;
}

.sw-app-page .body-signal-card.is-open {
  border-color: rgba(62, 91, 83, .3);
  background: #fffdf8;
}

.sw-app-page .body-signal-info-body {
  padding: 18px;
}

.sw-app-page .body-signal-info-body section + section {
  margin-top: 24px;
  padding-top: 24px;
}

.sw-app-page .body-signal-info-body :where(p, li) {
  font-size: 17px;
  line-height: 1.6;
}

.sw-app-page .body-signal-info-body :where(h5, h6) {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.35;
}

.sw-app-page :where(.body-mucus-visual-sequence > li, .body-finger-grid > figure, .sw-mucus-grid article) {
  border-radius: var(--sw-radius-card);
  border-color: var(--sw-border);
  box-shadow: none;
}

.sw-app-page :where(.body-mucus-state-art, .body-finger-art, .sw-mucus-grid img) {
  object-fit: contain;
}

.sw-app-page :where(.body-mucus-state-art, .body-mucus-visual-sequence > li img, .sw-mucus-grid img) {
  aspect-ratio: 3 / 2;
  height: auto;
}

.sw-app-page .body-signal-info-body .body-visual-caption {
  margin-block: 8px 18px;
  color: var(--v2-muted, #66706d);
  font-size: 14px;
  line-height: 1.5;
}

.sw-app-page .body-stretch-comparison {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.sw-app-page .body-stretch-comparison li {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-top: 1px solid var(--sw-border);
  font-size: 16px;
  line-height: 1.5;
}

.sw-app-page .body-stretch-comparison strong {
  color: var(--v2-ink, #2f3534);
}

.sw-app-page .body-mucus-traits > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding-block: 10px;
}

.sw-app-page .body-mucus-traits dt {
  font-size: 12px;
  letter-spacing: .04em;
  white-space: normal;
}

.sw-app-page .body-mucus-traits dd,
.sw-app-page .body-finger-grid figcaption p {
  font-size: 16px;
  line-height: 1.5;
}

.sw-app-page .body-mucus-context {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.sw-app-page .body-lh-test-svg text {
  stroke: none;
  fill: currentColor;
  font-size: 18px;
  font-weight: 500;
}

.sw-app-page .body-lh-test-svg text:first-child {
  transform: translateX(-6px);
}

.sw-app-page .body-lh-comparison {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.sw-app-page .body-lh-comparison article {
  padding: 16px 8px;
  gap: 6px;
}

.sw-app-page .body-lh-comparison article + article {
  border-left: 0;
  border-top: 1px solid var(--sw-border);
}

.sw-app-page .body-lh-test-svg {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

.sw-app-page .body-lh-comparison :where(strong, span) {
  font-size: 16px;
  line-height: 1.5;
}

/* Warm cues are local to genuine time-sensitive actions. General fertility
 * information keeps the approved sage, clay and plum color hierarchy. */
.sw-app-page .pc-path-choice.is-time-sensitive,
.sw-app-page .pc-urgent-steps,
.sw-app-page .sw-content-section.is-urgent {
  border-color: var(--sw-warning-border);
  background: var(--sw-warning-surface);
  color: var(--sw-warning-ink);
}

.sw-app-page .pc-path-choice.is-time-sensitive:hover {
  background: #f1e1d4;
}

.sw-app-page :where(.pc-path-choice, .pc-event, .pc-result, .pc-follow-up) {
  border-radius: var(--sw-radius-card);
}

.sw-app-page .pc-path-choice {
  min-height: 88px;
  padding: 16px;
  gap: 12px;
}

.sw-app-page :where(.pc-path-choice strong, .fs-path strong) {
  font-size: 17px;
  line-height: 1.35;
}

.sw-app-page :where(.pc-path-choice small, .fs-path small) {
  font-size: 14px;
  line-height: 1.45;
}

.sw-app-page :where(.sw-content-section p, .sw-direct-answer, .sw-content-section li) {
  font-size: 17px;
  line-height: 1.65;
}

.sw-app-page :where(.sw-source-panel, .sw-direct-answer, .sw-content-section.is-urgent, .sw-content-section.is-support, .sw-content-cta) {
  border-radius: var(--sw-radius-card);
}

.sw-app-page .sw-content-section {
  margin-bottom: 36px;
  padding-bottom: 36px;
}

.sw-app-page :where(.sw-related a, .sw-home-question-links a, .sw-context-link-grid a, .sw-context-links nav a) {
  min-height: 64px;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.45;
}

@media (min-width: 1000px) {
  .sw-app-page :where(.v2-hero-grid, .pc-layout, .fs-entry-grid) {
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }

  .sw-app-page :where(.v2-quick-card, .calculator-form-panel, .result-panel, .v2-journal-workspace, .v2-journal-result, .pc-workspace, .fs-entry-actions) {
    padding: 30px;
  }

  .sw-app-page .sw-content-layout {
    grid-template-columns: minmax(0, 740px) minmax(240px, 300px);
    gap: 56px;
  }
}

@media (max-width: 1100px) {
  .sw-app-page .sw-site-header {
    position: static;
  }

  .sw-app-page .sw-site-header-nav {
    display: none;
  }

  .sw-app-page .sw-site-header .sw-local-status {
    display: none;
  }
}

@media (max-width: 720px) {
  .sw-app-page .sw-site-header .site-brand {
    width: clamp(164px, 44vw, 178px);
    min-width: clamp(164px, 44vw, 178px);
  }

  .sw-app-page :where(.v2-hero, .pc-main, .fs-entry, .v2-choice-main) {
    padding-top: 26px;
  }

  .sw-app-page :where(.v2-quick-card, .calculator-form-panel, .result-panel, .context-panel, .v2-journal-workspace, .v2-journal-result, .v2-trying-card, .pc-workspace, .fs-entry-actions, .fs-check-workspace) {
    padding: 20px;
    border-radius: 20px;
  }

  .sw-app-page :where(.v2-hero-copy h1, .v2-choice-main h1, .v2-journal-heading h1, .v2-trying-intro h1, .v2-age-hero-copy h1, .v2-evidence-intro h1, .fs-entry-copy h1) {
    margin-block: 14px 18px;
    font-size: clamp(2.25rem, 10.5vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -.045em;
  }

  .sw-app-page :where(.v2-mini-result h2, .v2-journal-result h2, .result-panel #result-title) {
    font-size: clamp(2rem, 8.7vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .sw-app-page .sw-content-hero {
    margin-bottom: 36px;
  }

  .sw-app-page :where(.pc-field-grid, .two-fields, .v2-add-period-controls, .v2-add-period > div, .v2-age-input-row, .v2-trying-primary-grid, .body-temperature-row) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }

  .sw-app-page :where(.v2-signal-fields label, .body-temperature-row > label, .pc-field-grid > label) {
    grid-template-columns: minmax(0, 1fr);
  }

  .sw-app-page :where(.body-temperature-row [data-remove-temperature], .v2-add-period button, .v2-age-input-row button) {
    inline-size: 100%;
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .sw-app-page .body-signal-info-body {
    padding: 16px 12px;
  }

  .sw-app-page .body-finger-check {
    padding: 16px 12px;
  }

  .sw-app-page .v2-intent-card {
    border-radius: 16px;
    padding: 13px 14px;
  }

  .sw-app-page .fs-path-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sw-app-page .fs-path {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 88px;
    padding: 16px;
    border-radius: 16px;
  }

  .sw-app-page .fs-path > span {
    grid-row: 1 / 3;
    margin: 0;
  }

  .sw-app-page .fs-path small {
    grid-column: 2;
    margin: 0;
  }
}

@media (max-width: 360px) {
  .sw-app-page .sw-site-header .site-brand {
    width: 150px;
    min-width: 150px;
  }

  .sw-app-page :where(.v2-quick-card, .calculator-form-panel, .result-panel, .v2-journal-workspace, .v2-journal-result, .v2-trying-card, .pc-workspace, .fs-entry-actions) {
    padding-inline: 16px;
  }

  .sw-app-page [data-result-window] {
    padding-inline: 13px;
  }

  .sw-app-page [data-result-window] :where(.range-value, .stat-value, strong, dd) {
    font-size: 22px;
  }

  .sw-app-page :where(.v2-hero-copy h1, .v2-choice-main h1, .v2-journal-heading h1, .v2-trying-intro h1, .v2-age-hero-copy h1, .v2-evidence-intro h1, .fs-entry-copy h1) {
    font-size: 2.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw-app-page *,
  .sw-app-page *::before,
  .sw-app-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}