/* Hallmark · checked: 2026-11-15 · genre: editorial (inferred)
 * built: the project · redesign: polish · v2.0.0 */
/* The paper and tinted light sit behind the glass, including on the home hero. */
body[data-page] {
  --glass-fill: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(255 255 255 / 39%));
  --glass-edge: rgb(99 108 153 / 22%);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 5px 18px -9px rgb(36 45 94 / 24%);
  --glass-blur: blur(14px) saturate(120%);
  --glass-blue: linear-gradient(155deg, #535fc4f5, #3949b7f5 55%, #2e3b92);
  --glass-lime: linear-gradient(145deg, #f3ffcfee, #d8eca4ed);
  background: radial-gradient(ellipse at 88% 4%, #bfcaf1 0, transparent 48%),
              radial-gradient(ellipse at 5% 65%, #e1ebbf 0, transparent 42%), var(--paper);
  background-size: 100% clamp(920px, 100vw, 1450px);
  background-repeat: no-repeat;
}
body[data-page] .hero { background: transparent !important; }
body[data-page] :is(#approach, #journey) { background: transparent; }

:is(.brand-slab, .glass-nav, .menu-toggle, .care-replay, .feature-tabs, .feature-panel,
    .doctor-profile, .tool-panel, .brief-guide-copy, .brief-faq-list, .menu-dialog,
    .brief-notice, #approach .brief-topics article) {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-nav a[aria-current="page"] { color: #3443a9; }
:is(.doctor-profile, .brief-guide-copy, .brief-faq-list) { border-radius: 22px; }
.doctor-profile { padding: clamp(12px, 1.6vw, 24px); }
.brief-guide-copy { padding: clamp(20px, 3vw, 48px); }
.brief-faq-list { padding-inline: clamp(16px, 2.2vw, 36px); }
.brief-faq-list details:first-child { border-top: 0; }
:is(.menu-dialog, .brief-notice) { background-color: #f4f6f1e8; }
:is(.menu-dialog, .brief-notice)::backdrop { background: #19213666; }

:is(.feature-tabs button[aria-selected="true"], .care-map,
    .tool-display, .brief-guide-cover) {
  background: var(--glass-blue);
  color: white;
  box-shadow: inset 0 1px 1px #ffffff78, 0 4px 14px -7px #222c634f;
}
.film-caption {
  background: var(--glass-lime);
  color: var(--ink);
  box-shadow: inset 0 1px 0 #ffffffe8, 0 4px 16px -5px #20301733;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.brief-footer { background: linear-gradient(115deg, #242a29 25%, #29313b 75%, #343d55); }
/* WhatsApp is the same booking action wherever it appears. */
.brief-cta[data-whatsapp] {
  background-color: var(--lime);
  background-color: color-mix(in srgb, var(--lime) 90%, transparent);
  background-image: linear-gradient(155deg, #ffffff60, transparent 56%, #6e951519);
  border: 1px solid #69853470;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 800;
  box-shadow: inset 0 1px 1px #ffffffe0, 0 3px 10px -5px #32411866;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@media (hover: hover) {
  .brief-cta[data-whatsapp]:hover {background-color: var(--lime); color: var(--ink)}
}
@media (prefers-reduced-transparency: reduce) {
  body[data-page] {
    --glass-fill: #fafbf7;
    --glass-shadow: none;
    --glass-blur: none;
    --glass-blue: #3846ad;
    --glass-lime: #e2f39e;
    background: var(--paper);
  }
  :is(.tool-choice, .tool-actions button, .video-toggle) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: white;
  }
  .video-toggle { background: var(--ink); }
  .brief-cta[data-whatsapp] {background: var(--lime);box-shadow: none}
}

html {scroll-padding-top:96px}
.header.wrap {
  position:sticky;
  top:0;
  z-index:20;
  padding-block:12px;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
.header .brief-cta.header-cta {display:inline-flex;flex-shrink:0}
.header .glass-nav {gap:clamp(12px,1.7vw,30px)}
@media (min-width:901px) and (max-width:1120px) {
  .header.wrap {gap:12px;padding-inline:20px}
  .header .glass-nav {padding-inline:14px;gap:14px}
}
@media (max-width:700px) {
  html {scroll-padding-top:72px}
  .header.wrap {padding:8px 12px;gap:8px}
  .header .brand-slab {width:clamp(68px,21vw,108px);height:46px;flex-shrink:0}
  .header .brand-slab img {width:83%;height:auto}
  .header .header-actions {gap:6px}
  .header .brief-cta.header-cta {min-height:44px;padding:8px 12px;gap:6px;font-size:12px}
  .header .wa-icon {width:18px;height:18px}
  .header .menu-toggle {width:44px;height:44px}
}
@media (max-width:700px) {
  .header .header-actions {min-width:0}
  .header .brief-cta.header-cta {flex-shrink:1;min-width:0}
  .header .menu-toggle {flex:none}
}

.feature-art.art-calculators {
  display:grid;
  height:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;
  gap:10px;
  padding:clamp(16px,3vw,40px);
  background:var(--glass-blue);
}
.calculator-shortcut {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  border:1px solid #ffffff55;
  border-radius:12px;
  background:#ffffff10;
  color:white;
  font-size:14px;
  font-weight:600;
}
.calculator-shortcut svg {width:38px;flex:none;color:var(--lime)}
.calculator-shortcut:hover,.calculator-shortcut:focus-visible {background:#ffffff29}
@media (max-width:480px) {
  .home-explore .feature-tabs:not([hidden]) {display:grid;grid-template-columns:1fr 1fr;border-radius:20px}
  .calculator-shortcut {flex-direction:column;align-items:flex-start;font-size:13px}
}

body[data-page] main :is(h1,h2,h3) {text-wrap:balance;min-width:0;overflow-wrap:break-word}
.hero-film {margin-inline:0}
.feature-link, .hero-secondary {text-decoration:underline;text-underline-offset:.2em}
.feature-tabs button:focus-visible {outline:3px solid var(--ink);outline-offset:2px}
.tool-fields :is(input,select) {border-color:var(--muted)}
@media(max-width:430px) {
  .header.wrap {gap:4px;padding-inline:8px}
  .header .brief-cta.header-cta {padding-inline:7px;gap:4px;white-space:nowrap}
}