/* Soft clinical layer — rounded, airy, blue/teal. Loaded after theme-light.css on redesigned pages. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px;
  --color-bg: #ffffff;
  --color-surface: #f3f7fa;
  --color-teal: #129c95; --color-teal-100: #e6f6f4; --color-teal-700: #0b6d68;
  --color-divider: #e3e9ef;
  --shadow-sm: 0 1px 3px rgba(23,33,43,.06), 0 1px 2px rgba(23,33,43,.04);
  --shadow-md: 0 8px 24px rgba(23,63,90,.08), 0 2px 6px rgba(23,63,90,.05);
  --shadow-lg: 0 20px 48px rgba(23,63,90,.14), 0 4px 12px rgba(23,63,90,.06);
}
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; }
.btn { border-radius: 999px !important; padding-inline: 20px; font-weight: 700; transition: transform .15s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary { background: linear-gradient(135deg, var(--color-accent), var(--color-teal)); border-color: transparent; }
.btn-primary:hover { background: linear-gradient(135deg, var(--color-accent-600), var(--color-teal-700)); }
.btn-secondary { border-radius: 999px; border: 1.5px solid var(--color-neutral-300); background: #fff; }
.tag { border-radius: 999px; }
.input, textarea.input, select.input { border-radius: 12px; border: 1.5px solid var(--color-neutral-300); background: #fff; }
.input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-100); outline: none; }
.seg { border-radius: 999px; overflow: hidden; }
.seg-opt { border-radius: 999px; }
.card, .dialog { border-radius: var(--radius-lg); }
.table { border-radius: var(--radius-md); overflow: hidden; }
details summary::-webkit-details-marker { display: none; }

@keyframes reveal { from { opacity: 0; transform: translateY(36px) scale(.98); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  [data-reveal] { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { [data-reveal], .marquee-track { animation: none !important; } }
@keyframes kb { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.14) translate(-2%,-2%); } }
.kenburns { animation: kb 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@media (prefers-reduced-motion: reduce) { .kenburns { animation: none; } }

@keyframes icoBeat { 0%,100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(.95); } 36% { transform: scale(1.14); } 50% { transform: scale(1); } }
@keyframes icoBreathe { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.1); } }
@keyframes icoDrip { 0% { transform: translateY(-5px) scale(.85,1.1); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateY(1px) scale(1.08,.92); } 75%,100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes icoWiggle { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-5deg) scale(1.04); } 75% { transform: rotate(5deg) scale(.97); } }
@keyframes icoSway { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes icoBounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 55% { transform: translateY(0) scale(1.06,.94); } 70% { transform: translateY(-1.5px); } }
@keyframes icoSpin { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg) scale(1.06); } }
@keyframes icoGlow { 0%,100% { box-shadow: 0 6px 16px -6px var(--ico-c, rgba(0,0,0,.3)); } 50% { box-shadow: 0 10px 26px -4px var(--ico-c, rgba(0,0,0,.45)); } }
.study-ico { animation: icoGlow 2.6s ease-in-out infinite; background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); }
.study-ico svg { transform-origin: 50% 55%; will-change: transform; }
.ico-beat { animation: icoBeat 1.3s ease-in-out infinite; }
.ico-breathe { animation: icoBreathe 3.2s ease-in-out infinite; }
.ico-drip { animation: icoDrip 2.2s cubic-bezier(.3,.7,.4,1) infinite; }
.ico-wiggle { animation: icoWiggle 2.4s ease-in-out infinite; }
.ico-sway { animation: icoSway 3s ease-in-out infinite; transform-origin: 50% 20% !important; }
.ico-bounce { animation: icoBounce 1.8s ease-in-out infinite; }
.ico-spin { animation: icoSpin 2.6s ease-in-out infinite; }
a:hover .study-ico svg { animation-duration: .9s; }
@media (prefers-reduced-motion: reduce) { .study-ico, .study-ico svg { animation: none !important; } }

/* Phone layer */
@media (max-width: 640px) {
  body { overflow-x: clip; }
  [data-journey] [data-frame] { left: 16px !important; right: 16px !important; width: auto !important; top: 124px !important; }
  [data-journey] section { align-items: flex-end !important; justify-content: flex-start !important; padding: 0 16px 6vh !important; }
  [data-journey] section > div { max-width: 100% !important; padding: 20px !important; }
  [data-journey] section:first-child > div { background: color-mix(in srgb, #fff 88%, transparent); backdrop-filter: blur(14px); border-radius: 24px; box-shadow: var(--shadow-lg); }
  [data-journey] section:first-child { align-items: flex-start !important; padding-top: calc(124px + (100vw - 32px) * 0.75 + 16px) !important; }
  [data-journey] h1 { font-size: 38px !important; }
  [data-m="doc-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  form[data-m="two-col"] { grid-template-columns: minmax(0, 1fr) !important; }
  form[data-m="two-col"] > * { grid-column: auto !important; }
  [data-m="tall-img"] { height: 260px !important; min-height: 0 !important; }
  [data-m="h-xl"] { font-size: 40px !important; }
  .dialog { padding: 20px !important; }
}

@media (max-width: 900px) { [data-m="sticky"] { position: static !important; } }