/* Clearview Clinic — healthcare. Reference pattern: Daylight Health (warm sunlit gradient, gentle serif, steps, care by life situation). */
:root {
  --bg: #fdf8ee; --fg: #17312e; --muted: #4c6460; --surface: #f7eedb; --card: #ffffff; --line: #e6dcc6;
  --accent: #1d6a63; --accent-fg: #ffffff; --sun: #f6d27d;
  --font-head: "DM Serif Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif;
  --h-weight: 400; --h-track: -0.01em; --radius: 22px;
}
body { font-size: 1.125rem; }
.btn { border-radius: 999px; }
.eyebrow { color: var(--accent); font-weight: 700; }
.section--warm { background: linear-gradient(180deg, var(--surface), var(--bg)); }

/* Floating pill navigation */
.pill-nav { position: sticky; top: .75rem; z-index: 20; padding-inline: var(--gutter); margin-top: .75rem; }
.pill-nav__inner { display: flex; align-items: center; gap: 2rem; max-width: 1000px; margin-inline: auto; padding: .5rem .5rem .5rem 1.5rem; background: rgb(255 255 255 / .8); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px -15px rgb(23 49 46 / .25); }
.nav__brand { margin-right: auto; font: 400 1.4rem/1 var(--font-head); }
.nav__brand span { font-style: italic; color: var(--accent); }

/* Hero: sunlit gradient */
.hero { padding-top: clamp(3rem, 2rem + 4vw, 6rem); background: radial-gradient(ellipse 80% 70% at 50% 0%, var(--sun) 0%, rgb(246 210 125 / .35) 45%, transparent 75%), var(--bg); }
.hero__copy { text-align: center; max-width: 52rem; }
.hero__title { font: 400 clamp(2.75rem, 1.5rem + 5vw, 5.5rem)/1 var(--font-head); letter-spacing: -.02em; }
.hero__title em { color: var(--accent); }
.hero__copy .lead { margin: 1.5rem auto 0; color: var(--muted); }
.hero__copy .actions { justify-content: center; }
.hero__img { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); aspect-ratio: 16 / 8; border-radius: 32px; overflow: hidden; box-shadow: 0 40px 80px -40px rgb(23 49 46 / .45); }

/* Reassurance points */
.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.points li { padding: 1.75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.points__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--sun); color: var(--fg); font-weight: 700; font-size: .875rem; }
.points h3 { font: 400 1.5rem/1.15 var(--font-head); margin-bottom: .5rem; }
.points p { color: var(--muted); font-size: 1rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: s; }
.steps li { position: relative; padding: 2rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.steps__num { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; margin-bottom: 1.25rem; }
.steps h3 { font: 400 1.6rem/1.15 var(--font-head); margin-bottom: .5rem; }
.steps p:last-child { color: var(--muted); font-size: 1rem; }

/* Care tabs */
.care { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.care__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1.25rem; }
.care__list [role="tab"] { padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 .9375rem/1 var(--font-body); cursor: pointer; }
.care__list [role="tab"][aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.care__panel { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); font-size: 1.125rem; }
.care__panel[hidden] { display: none; }
.care__img { aspect-ratio: 4 / 5; border-radius: 200px 200px var(--radius) var(--radius); overflow: hidden; }

/* Doctors */
.doctors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.doctor { padding: 1rem 1rem 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.doctor__img { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; margin-bottom: 1.25rem; }
.doctor h3 { font: 400 1.6rem/1.15 var(--font-head); padding-inline: .5rem; }
.doctor p { padding-inline: .5rem; font-size: 1rem; }
.doctor__role { color: var(--accent); font-weight: 600; margin-block: .25rem .5rem; }
.doctor--cta { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 2rem; background: var(--sun); border-color: transparent; }
.doctor--cta .btn { align-self: flex-start; }

/* Visit */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.visit__img { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; }
.hours li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.hours li span:last-child { font-weight: 600; }

/* Book */
.book { background: var(--accent); color: var(--accent-fg); border-radius: 32px; margin: 0 var(--gutter) var(--gutter); }
.book .demo-note { background: transparent; border-color: rgb(255 255 255 / .4); }
.book a { color: #fff; font-weight: 700; }

@media (max-width: 1000px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pill-nav__inner { padding-left: 1rem; gap: 1rem; }
  .steps, .doctors, .care, .visit { grid-template-columns: 1fr; }
  .hero__img { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) { .points { grid-template-columns: 1fr; } }