/* Use-case pages (patterns, symptoms, after birth control, pill, private tracker):
   same palette and card language as the home page. Loaded after the inline page styles. */
:root {
  --bg: #fbeee8;
  --bg-soft: #f4e0d8;
  --card: #fff7f3;
  --brand: #4b2a1b;
  --brand-mid: #7a5a49;
  --brand-light: #d9a899;
  --accent: #b8705f;
  --accent-dark: #8f4a3a;
  --text-dark: #4b2a1b;
  --text-body: #6b4d3d;
  --text-muted: #7f6252;
  --ink: #4b2a1b;
  --rule: rgba(94, 54, 31, .13);
  --radius-card: 12px;
  --shadow: 0 6px 24px rgba(75, 42, 27, .07);
  --ff-mono: 'Plus Jakarta Sans', system-ui, sans-serif;
}
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.container { max-width: 1120px; }

/* Rhythm: one background, space instead of striped bands. */
.p-block, .p-block.alt { background: none; border: 0; padding-block: clamp(56px, 7vw, 96px); }
.p-hero { padding: 144px 0 clamp(48px, 6vw, 80px); }

/* Hero: text left with a real screen on the right, centered when there is no screen yet. */
.p-hero .container { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(32px, 6vw, 80px); }
.p-hero .breadcrumb { grid-column: 1 / -1; }
.p-hero .container:not(:has(.p-hero__shot)) { text-align: center; }
.p-hero .container:not(:has(.p-hero__shot)) .p-hero__h1,
.p-hero .container:not(:has(.p-hero__shot)) .p-hero__sub { margin-inline: auto; }
.p-hero .container:not(:has(.p-hero__shot)) .p-hero__ctas { justify-content: center; }
.p-hero .container:not(:has(.p-hero__shot)) .breadcrumb { text-align: left; }
.p-hero .container:has(.p-hero__shot) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.p-hero .container:has(.p-hero__shot) > *:not(.p-hero__shot):not(.breadcrumb) { grid-column: 1; }
.p-hero__shot { grid-column: 2; grid-row: 2 / span 6; margin: 0; justify-self: center; width: min(100%, 340px); }
.p-hero__shot img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 40px rgba(75, 42, 27, .12); }
.p-hero__shot figcaption { margin-top: 12px; font-size: 14px; color: var(--text-muted); text-align: center; }
.p-hero__note { font-family: inherit; font-size: 14px; color: var(--text-muted); }

/* Centered section headers. */
.p-h2, .p-intro { text-align: center; margin-inline: auto; }
.p-h2 { margin-bottom: 18px; }
.p-intro { max-width: 640px; margin-bottom: 40px; }

/* One card style: no outline, soft shadow, 12px. */
.recog-card, .track-card, .faq-item, .symptom-card, .read-card, .guard-card, .no-item,
.priv-strip, .arch, .cyclechart, .def-item, .arch-node, .arch-branch__node {
  border: 0; border-radius: 12px; box-shadow: var(--shadow); background: var(--card);
}
.def-item { border-radius: 0; box-shadow: none; background: none; border-bottom: 1px solid var(--rule); }
.arch-node, .arch-branch__node { background: var(--bg-soft); box-shadow: none; }
.arch-branch { border-top: 1px solid var(--rule); }
.arch-branch__label, .def-item dt { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--accent-dark); }
.recog-card:hover, .track-card:hover, .symptom-card:hover, .read-card:hover { transform: none; box-shadow: var(--shadow); }

/* No pastel icon tiles; chips become plain text. */
.track-card__icon, .symptom-card__icon { display: none; }
.symptom-card__tags { gap: 0; }
.symptom-card__tags span, .symptom-card__tags li { background: none; border: 0; padding: 0; border-radius: 0; font-size: 14px; color: var(--text-body); }
.symptom-card__tags span:not(:last-child)::after { content: '\00a0\00b7\00a0'; color: var(--text-muted); }
.track-card p, .symptom-card p, .read-card p { color: var(--text-body); font-size: 15px; }
.read-card__tag { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--accent-dark); }

/* Patterns chart: always visible, no scroll trigger needed. */
.cyclerow__hit { transform: translateY(-50%) scaleX(1) !important; opacity: 1 !important; }
.cyclerow__track { background: rgba(184, 112, 95, .14); }

/* "Not this / Actually this" comparison. */
.guard-card--no { background: var(--bg-soft); }
.guard-card--yes { background: var(--card); }
.guard-card__label { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.guard-card--no p:not(.guard-card__label) { text-decoration: line-through; color: var(--text-muted); }
.guard-card--yes p:not(.guard-card__label) { color: var(--text-dark); }

/* Lists and FAQ stay readable, centered column. */
.faq-list, .def-list, .no-list { max-width: 760px; margin-inline: auto; }
.recog-grid, .track-grid, .symptom-grid, .read-grid, .guard-split { margin-inline: auto; }
.priv-strip { max-width: 760px; margin-inline: auto; }

/* Closing band: flat. */
.final-cta { background: var(--bg-soft); background-image: none; border: 0; }
.final-cta h2 em { color: var(--accent-dark); }

/* Footer text contrast. */
.footer, .footer a, .footer__inner { color: var(--text-muted); }

/* Higher specificity to beat the page styles: no bands, no section borders, caption always shown. */
section.p-block, section.p-block.alt { background: none; border-top: 0; padding-block: clamp(56px, 7vw, 96px); }
section.final-cta { border-top: 0; border-bottom: 0; }
.cyclechart__caption { opacity: 1 !important; transform: none !important; }

/* Comparison labels and check marks use the site accent, not the old green. */
.guard-card.guard-card--yes .guard-card__label, .guard-card.guard-card--no .guard-card__label { color: var(--accent-dark); }
.surface-list { max-width: 720px; margin-inline: auto; }
.surface-item__mark, .no-item__mark { color: var(--accent-dark); background: rgba(184, 112, 95, .14); }
.timeline { gap: 24px; }
.timeline__step { background: none; box-shadow: none; }

@media (max-width: 820px) {
  .p-hero .container:has(.p-hero__shot) { grid-template-columns: minmax(0, 1fr); }
  .p-hero .container:has(.p-hero__shot) > *:not(.p-hero__shot) { grid-column: 1; }
  .p-hero__shot { grid-column: 1; grid-row: auto; margin-top: 36px; width: min(100%, 300px); }
  .p-hero { padding-top: 112px; }
}

/* Two real screens side by side. */
.p-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 64px); max-width: 720px; margin-inline: auto; }
.p-pair__item { margin: 0; display: flex; flex-direction: column; align-items: center; }
.p-pair__item img { width: min(100%, 290px); height: auto; border-radius: 12px; box-shadow: 0 14px 40px rgba(75, 42, 27, .12); }
.p-pair__item figcaption { margin-top: 20px; max-width: 290px; display: flex; flex-direction: column; gap: 6px; }
.p-pair__item strong { font-family: var(--ff-serif); font-weight: 400; font-size: 20px; color: var(--text-dark); }
.p-pair__item span { font-size: 15px; line-height: 1.6; color: var(--text-body); }
@media (max-width: 700px) { .p-pair { grid-template-columns: 1fr; gap: 44px; } }

/* Phone-style screenshots: smaller, 36px corners, 8px white frame. */
.p-hero__shot img, .p-pair__item img {
  border: 8px solid #fff; border-radius: 36px; box-sizing: border-box; background: #fff;
  box-shadow: 0 14px 40px rgba(75, 42, 27, .12);
}
.p-hero__shot { width: min(100%, 270px); }
.p-pair__item img { width: min(100%, 230px); }
.p-pair__item figcaption { max-width: 230px; }
@media (max-width: 820px) { .p-hero__shot { width: min(100%, 250px); } }

/* Steps: equal cards with large serif numerals, no circles or arrows. */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.timeline__step, .timeline__step:not(:last-child) { padding: 28px 24px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); position: static; }
.timeline__step:not(:last-child)::after { display: none; content: none; }
.timeline__step .timeline__num {
  width: auto; height: auto; border-radius: 0; background: none; display: block; margin: 0 0 14px;
  font-family: var(--ff-serif); font-size: 30px; line-height: 1; color: var(--accent-dark);
}
.timeline__step h3 { font-size: 19px; margin-bottom: 10px; }
.timeline__step p { font-size: 15px; line-height: 1.65; color: var(--text-body); }

/* Link cards: equal height and a visible "read" cue. */
.read-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.read-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; }
.read-card h3 { font-size: 18px; line-height: 1.4; flex: 1; }
.read-card::after { content: 'Read \2192'; font-size: 15px; font-weight: 600; color: var(--accent-dark); }
html[lang="de"] .read-card::after { content: 'Lesen \2192'; }
.read-card:hover::after { text-decoration: underline; text-underline-offset: 4px; }

/* Calmer vertical rhythm. */
section.p-block, section.p-block.alt { padding-block: clamp(48px, 6vw, 72px); }
.p-h2 { margin-bottom: 36px; }
.p-h2:has(+ .p-intro) { margin-bottom: 14px; }
@media (max-width: 700px) { .timeline { grid-template-columns: 1fr; } }