/* XERF / BEHAP — soft rose preview, owner direction 2026-09-13.
   Palette sampled from evidence/Xerf Salebook.pdf cover: pink #FCD2D3,
   pale #FEF5F6, wordmark brown #5C2F1C. Supporting tints derived for UI.
   Owner authorized media-derived palette; not an official Brand Guide.
   Loaded only by xerf-landing.html; shared brand tokens stay unchanged. */
:root {
  --xerf-petal: #FEF5F6;
  --xerf-blush: #FCE5E5;
  --xerf-rose: #FCD2D3;
  --xerf-berry: #5C2F1C;
  --xerf-ink: #5C2F1C;
  --ivory-white: #FEF5F6;
  --soft-champagne: #FCE5E5;
  --green-mist: #FCE5E5;
  --ivory-deep: #F7E1DF;
  --champagne-soft: #FFF0F0;
  --cocoa-taupe: #65534D;
  --graphite-ink: #332B28;
  --sand-line: #DDBEB5;
  --line-hair: rgba(92,47,28,.14);
  --shadow-xs: 0 1px 3px rgba(92,47,28,.04);
  --shadow-sm: 0 4px 18px rgba(92,47,28,.045);
  --shadow-md: 0 12px 32px rgba(92,47,28,.065);
  --shadow-lg: 0 22px 60px rgba(92,47,28,.10);
}

body { background: var(--xerf-petal); }
.page-header { background: rgba(254,245,246,.96); }
.hero {
  background: radial-gradient(ellipse at 86% 32%, #FCD2D3 0, transparent 55%),
    linear-gradient(120deg, #FFFAF8 10%, #FEECEC 70%, #FCD2D3 100%);
  border-bottom: 1px solid var(--line-hair);
}
.hero::after { background: none; }
.hero-in { padding-inline: 24px; gap: clamp(32px, 4vw, 60px); }
.hero h1 { color: var(--xerf-ink); }
.hero .eyebrow, .section:not(.cta-band) > .wrap > .eyebrow,
.head-center .eyebrow, .split .eyebrow { color: var(--xerf-berry); }
.hero .eyebrow::before, .head-center .eyebrow::before { background: var(--xerf-berry); }
.sec-title { color: var(--xerf-ink); }
.hero-visual { max-width: 430px; }
.hero-visual::before {
  inset: 18px -14px -18px 14px;
  background: #FCD2D3;
  border: 1px solid rgba(92,47,28,.08);
}
.portrait { border: 1px solid rgba(255,255,255,.8); }
.freq-chip, .comfort-photo .photo-tag { background: rgba(255,250,248,.96); }
.depth-badge { border: 1px solid var(--line-hair); }
.avail-badge { background: rgba(255,255,255,.70); border: 1px solid var(--line-hair); }

/* A gentle alternation keeps a long educational page easy to scan. */
.section.alt { background: var(--xerf-blush); }
.section.mist { background: #FFF7F4; }
.section { border-bottom: 1px solid rgba(92,47,28,.06); }
.bf-grid, .freq-card, .mode, .ev-card, .rev-card,
.doctor-card, .proc-stat, .proc-result { background: #FFFCFA; }
.bf-ic, .benefit-card .ic { background: #FCE5E5; color: var(--xerf-berry); }
.bf-cell .bf-tag { background: #FCE5E5; color: var(--xerf-berry); }
.bf-cell:hover { background: #FFF0F0; }
.bf-cell::before { background: var(--xerf-berry); }
.bf-num { color: var(--xerf-berry); }
.freq-card .mhz, .g-num, .ev-card h3 { color: var(--xerf-berry); }
.ev-gauge .prog { stroke: var(--xerf-berry); }
.ev-gauge .halo { fill: var(--xerf-blush); }
.ev-gauge .tick { stroke: var(--xerf-berry); }
.g-ic { background: var(--xerf-berry); color: #FFFFFF; }
.research-note { background: #FCDDDD; border-left: 3px solid var(--xerf-berry); }
.research-note p, .research-note svg { color: var(--xerf-ink); }
.rf-myth { background: #FCE5E5; color: var(--xerf-ink); box-shadow: none; border: 1px solid var(--line-hair); }
.rf-myth .q, .rf-myth h3, .rf-myth p, .rf-myth p b { color: var(--xerf-ink); }
.cmp thead th.xerf { background: var(--xerf-berry); color: #FFFFFF; }
.cmp td.xerf { background: #FFF0F0; }
.price-card { background: #FFFFFF; border: 1px solid #EACEC5; box-shadow: var(--shadow-md); }
.faq-list { background: rgba(255,255,255,.65); border: 1px solid var(--line-hair); border-radius: 20px; padding: 0 26px; }
.faq-item:last-child { border-bottom: 0; }
.faq-item.open .faq-q { color: var(--xerf-berry); }
.jr-card .jr-top { background: #FCDDDD; }
.jr-card.feat .jr-top { background: var(--xerf-berry); }
.jr-card.feat .jr-cat { color: #FFFFFF; }
.jr-card .jr-cat { color: var(--xerf-ink); }

/* The close remains light; the green action is the visual destination. */
.cta-band {
  background: linear-gradient(115deg, #FCDDDD, #FEF5F6);
  color: var(--xerf-ink);
}
.cta-band::after { background: none; }
.cta-band h2, .cta-incl .c { color: var(--xerf-ink); }
.cta-band p, .cta-band .disc { color: var(--cocoa-taupe); }
.cta-band .eyebrow, .cta-incl .c svg { color: var(--xerf-berry); }
.cta-band .eyebrow::before, .cta-band .disc { border-color: var(--sand-line); }
.cta-band .eyebrow::before { background: var(--xerf-berry); }
.cta-contact { background: #FFFCFA; border: 1px solid rgba(255,255,255,.9); }
.footer { background: #FAF7F0; }
.mobile-cta { background: rgba(254,245,246,.97); }
.btn-primary { box-shadow: 0 7px 20px rgba(15,63,54,.12); }
:is(a,button):focus-visible { outline: 3px solid var(--xerf-berry); outline-offset: 4px; }
[id] { scroll-margin-top: 100px; }

@media (max-width: 880px) {
  .hero-in { padding: 34px 24px 52px; }
  .hero-visual { max-width: 300px; }
  .hero h1 { font-size: clamp(1.85rem, 5.3vw, 2.7rem); }
}
@media (max-width: 520px) {
  .wrap { padding-inline: 20px; }
  .hero-in { padding-inline: 20px; gap: 38px; }
  .hero-visual { max-width: 260px; }
  .hero-visual::before { inset: 12px -10px -12px 10px; }
  .hero-actions .btn { white-space: normal; text-align: center; justify-content: center; width: 100%; }
  .hero .support { gap: 10px; }
  .faq-list { padding-inline: 18px; }
  .cta-contact { padding: 24px; }
  .ph-right { gap: 8px; }
  .ph-logo img { height: 40px; }
  .lang-seg button { padding-inline: 11px; }
}

/* Preserve BEHAP Method contrast inside its retained green band. */
.method .eyebrow { color: #F4EFE6; }
.method .eyebrow::before { background: rgba(244,239,230,.6); }
.method :is(a,button):focus-visible { outline-color: #F4EFE6; }
.doctor-card > *, .split > *, .cta-in > * { min-width: 0; }
.price-card .btn { max-width: 100%; white-space: normal; justify-content: center; }
@media (max-width: 520px) {
  .ph-right > .btn { display: none; }
  .ph-logo { flex-shrink: 0; }
  .ph-logo img { width: 100px; height: auto; }
  .doctor-card { grid-template-columns: minmax(0, 1fr); }
}

/* Owner revision: soften green contrast with BEHAP Ivory, Champagne, Cocoa.
   Legacy green-named UI aliases are mapped only within this page theme. */
:root {
  --behap-ivory: #FAF7F0;
  --behap-champagne: #F1E7D8;
  --behap-cocoa: #2C211D;
  --deep-green: var(--behap-cocoa);
  --deep-green-90: #46362E;
  --deep-green-80: #5C473C;
  --deep-green-08: rgba(44,33,29,.08);
  --deep-green-04: rgba(44,33,29,.04);
  --shadow-green: 0 8px 24px rgba(44,33,29,.12);
  --soft-champagne: var(--behap-champagne);
  --green-mist: var(--behap-champagne);
  --ivory-deep: #F1E7D8;
}
body { background: var(--behap-ivory); }
.page-header, .mobile-cta { background: rgba(250,247,240,.97); }
.section.mist { background: var(--behap-ivory); }
.bf-grid, .freq-card, .mode, .ev-card, .rev-card,
.doctor-card, .proc-stat, .proc-result, .cta-contact { background: var(--behap-ivory); }
.cred, .bf-ic, .benefit-card .ic, .bf-cell .bf-tag { background: var(--behap-champagne); }
.hero-invite, .hero .support { color: #65534D; }
.btn-primary, .mobile-cta .mc-line { background: var(--behap-cocoa); color: var(--behap-ivory); box-shadow: 0 6px 18px rgba(44,33,29,.12); }
.btn-primary:hover { background: #46362E; box-shadow: 0 8px 24px rgba(44,33,29,.16); }
.lang-seg { background: var(--behap-champagne); }
.lang-seg button.on { background: var(--behap-cocoa); color: var(--behap-ivory); }
.method {
  background: var(--behap-champagne);
  --text-on-green: #2C211D;
  --text-on-green-mut: #65534D;
  --line-on-green: rgba(44,33,29,.16);
  color: var(--behap-cocoa);
}
.method::after { background: none; }
.method .eyebrow { color: var(--xerf-ink); }
.method .eyebrow::before { background: #B49A87; }
.method .sec-title, .method-card h3, .method-card .quote { color: var(--behap-cocoa); }
.method-card { background: var(--behap-ivory); border-color: rgba(44,33,29,.12); }
.method-card:hover { background: #FFFCF7; }
.method-card .ic { background: var(--behap-champagne); color: var(--behap-cocoa); }
.method .btn-light { background: var(--behap-cocoa); color: var(--behap-ivory); }
.method :is(a,button):focus-visible { outline-color: var(--behap-cocoa); }
.price-card { background: var(--behap-champagne); }
.jr-card .jr-top { background: var(--behap-champagne); }
.jr-card.feat .jr-top { background: var(--xerf-ink); }
.footer { background: var(--behap-ivory); }

/* Current owner direction: pink backgrounds throughout, with tonal depth.
   UI tints derived from the selected media pink; Cocoa remains text/action. */
:root {
  --pink-50: #FFF7F8;
  --pink-100: #FCE9EB;
  --pink-200: #F9DADD;
  --pink-300: #F4C6CC;
  --ivory-white: var(--pink-50);
  --soft-champagne: var(--pink-100);
  --green-mist: var(--pink-200);
  --ivory-deep: var(--pink-200);
  --champagne-soft: var(--pink-100);
}
body { background: var(--pink-50); }
.page-header, .mobile-cta { background: rgba(255,247,248,.97); }
.section { background: var(--pink-50); }
.section.alt { background: var(--pink-100); }
.section.mist { background: var(--pink-200); }
.hero { background: radial-gradient(ellipse at 85% 35%, var(--pink-300), transparent 62%), linear-gradient(115deg,var(--pink-50),var(--pink-100)); }
.hero-visual::before { background: var(--pink-300); }
.bf-grid, .freq-card, .mode, .ev-card, .rev-card,
.doctor-card, .proc-stat, .proc-result, .cta-contact,
.method-card, .price-card, .jr-card { background: var(--pink-50); }
.cred, .bf-ic, .benefit-card .ic, .bf-cell .bf-tag,
.method-card .ic, .lang-seg, .jr-card .jr-top { background: var(--pink-200); }
.method { background: linear-gradient(135deg,var(--pink-200),var(--pink-300)); }
.method-card { border-color: rgba(92,47,28,.12); box-shadow: 0 8px 26px rgba(120,55,65,.035); }
.method-card:hover, .bf-cell:hover { background: #FFF1F3; }
.method .eyebrow::before { background: #BA858C; }
.research-note, .rf-myth { background: var(--pink-200); }
.cta-band { background: linear-gradient(115deg,var(--pink-300),var(--pink-100)); }
.footer { background: var(--pink-100); }
.jr-card.feat .jr-top { background: var(--pink-300); }
.jr-card.feat .jr-cat { color: var(--xerf-ink); }
.jr-card.feat .jr-emblem { filter: none; opacity: .16; }
.sd-smas { background: var(--pink-300); }

/* Owner refinement: cream accents within the dominant tonal-pink page. */
:root { --cream-surface: #FAF7F0; }
.page-header, .mobile-cta { background: rgba(250,247,240,.97); }
.bf-grid, .freq-card, .mode, .ev-card, .rev-card,
.doctor-card, .proc-stat, .proc-result, .cta-contact,
.method-card, .price-card, .jr-card, .faq-list { background: var(--cream-surface); }
.method-card:hover, .bf-cell:hover { background: #FFFDF8; }
.footer { background: var(--cream-surface); }

/* Selected case-count card: rose instead of the dark Cocoa surface. */
.case-ticker {
  background: var(--pink-200);
  border: 1px solid rgba(92,47,28,.12);
  box-shadow: 0 6px 20px rgba(120,55,65,.06);
  --line-on-green: rgba(92,47,28,.12);
}
.case-ticker .ct-num, .case-ticker .ct-label { color: var(--xerf-ink); }
.case-ticker .ct-label small { color: #65534D; }
.case-ticker .ct-slot { background: var(--pink-100); }