/* Unique Care Hub — landing page. Harbor palette, Village house style. */

:root {
  --bg: hsl(180 30% 97%);
  --fg: hsl(195 40% 11%);
  --muted: hsl(192 15% 40%);
  --card: #fff;
  --border: hsl(185 24% 90%);
  --primary: hsl(174 88% 26%);
  --primary-dark: hsl(176 92% 20%);
  --accent-soft: hsl(176 52% 92%);
  --accent-fg: hsl(178 72% 24%);
  --amber: hsl(17 88% 40%);
  --green: hsl(160 84% 34%);
  --shadow-card: 0 1px 2px hsl(195 40% 18% / 0.05), 0 8px 24px -12px hsl(195 40% 18% / 0.18);
  --shadow-lift: 0 2px 4px hsl(195 40% 18% / 0.06), 0 18px 40px -20px hsl(195 40% 18% / 0.26);
  --r: 16px;
  --r-lg: 24px;
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); }
h3 { font-size: 1.09rem; line-height: 1.35; letter-spacing: -0.012em; }
p { margin: 0; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }
.lede { color: var(--muted); font-size: 1.06rem; max-width: 62ch; }
.eyebrow {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-fg);
}

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: hsl(186 60% 97% / 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
header.site.stuck { border-bottom-color: var(--border); }
.nav { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.06rem; text-decoration: none; letter-spacing: -0.02em; }
.brand svg { color: var(--primary); flex: none; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a.signin { color: var(--fg); font-weight: 600; white-space: nowrap; }
.nav-links.compact { display: none; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav-links a:hover { color: var(--fg); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }
.nav-links a.btn-ghost, .nav-links a.btn-ghost:hover { color: var(--fg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 13px 26px; font-size: 0.97rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  font-family: Inter, sans-serif; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 4px hsl(174 88% 18% / 0.20), 0 10px 24px -12px hsl(174 84% 26% / 0.42); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-ghost { background: var(--card); color: var(--fg); border-color: var(--border); box-shadow: var(--shadow-card); }
.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-sm { padding: 10px 20px; font-size: 0.92rem; }

/* ---------- hero ---------- */
.hero { padding: 56px 0 72px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { margin: 14px 0 18px; font-size: clamp(1.95rem, 3.3vw, 2.75rem); max-width: 20ch; }
.hero .lede { font-size: 1.08rem; max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-note { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }
.hero-art { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--card); }
.hero-art img { display: block; width: 100%; height: auto; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 20px; margin-top: 40px; }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 26px 24px; box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.97rem; }
.card .ico { color: var(--primary); margin-bottom: 14px; display: block; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 24px; margin-top: 44px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.step img { display: block; width: 100%; height: 208px; flex: none; object-fit: cover; object-position: center 58%; }
.step-body { padding: 22px 24px 26px; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-fg); font-size: 0.83rem; font-weight: 700; font-family: Poppins, sans-serif;
  margin-bottom: 12px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.97rem; }

/* ---------- holds list ---------- */
.holds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: 40px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.hold { background: var(--card); padding: 22px 24px; }
.hold-t { display: flex; align-items: center; gap: 10px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.012em; }
.hold-t svg { color: var(--primary); flex: none; }
.hold p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
.section-close { margin-top: 28px; color: var(--muted); font-size: 0.98rem; max-width: 66ch; }

/* ---------- banded sections ---------- */
.band-white { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band-deep { background: hsl(192 46% 13%); color: hsl(180 24% 96%); }
.band-deep .lede, .band-deep .card p, .band-deep li { color: hsl(188 26% 78%); }
.band-deep .eyebrow { color: hsl(172 62% 68%); }
.band-deep .card { background: hsl(192 34% 18%); border-color: hsl(190 24% 27%); box-shadow: none; }
.band-deep .card .ico, .band-deep .hold-t svg { color: hsl(172 62% 66%); }

/* ---------- boundaries ---------- */
.bounds { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 12px; max-width: 76ch; }
.bounds li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.bounds li svg { flex: none; margin-top: 4px; color: hsl(188 30% 60%); }

/* ---------- status ---------- */
.status { display: grid; gap: 14px; margin-top: 36px; max-width: 78ch; }
.status-row { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--shadow-card); }
.status-row svg { flex: none; margin-top: 3px; }
.band-white .status-row { background: var(--bg); box-shadow: none; }
.status-row p { font-size: 0.99rem; }
.dot-green { color: var(--green); }
.dot-amber { color: var(--amber); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split-art { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.split-art img { display: block; width: 100%; height: auto; }
.mini { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.mini li { display: flex; gap: 12px; align-items: flex-start; }
.mini svg { flex: none; margin-top: 4px; color: var(--primary); }
.mini b { font-family: Poppins, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.mini span { color: var(--muted); }

/* ---------- faq ---------- */
.faq { margin-top: 40px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 20px 24px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.012em; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid hsl(188 22% 58%); border-bottom: 2px solid hsl(188 22% 58%); transform: rotate(45deg); flex: none; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .ans { padding: 0 24px 22px; color: var(--muted); font-size: 0.99rem; max-width: 74ch; }

/* ---------- form ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.access { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-lift); display: grid; gap: 18px; }
.band-deep .access { background: hsl(192 34% 18%); border-color: hsl(190 24% 27%); }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.005em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.97rem; color: var(--fg); background: #fff;
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; width: 100%;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: hsl(186 24% 96%); color: hsl(190 14% 48%); cursor: not-allowed; }

/* The early-access form sits on the dark panel, where the light disabled fill
   above reads as an ordinary active input and invites typing that goes nowhere.
   Inside that panel the disabled state has to be darker than its surroundings,
   not lighter. */
.access .field input:disabled,
.access .field select:disabled,
.access .field textarea:disabled {
  background: hsl(186 40% 16%);
  border-color: hsl(186 30% 28%);
  color: hsl(190 20% 62%);
}
.access .btn:disabled {
  opacity: .62;
  cursor: not-allowed;
  box-shadow: none;
}
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.band-deep a:focus-visible, .band-deep button:focus-visible { outline-color: hsl(172 66% 70%); }
.notice { display: flex; gap: 13px; align-items: flex-start; background: hsl(186 60% 97%); border: 1px solid hsl(188 41% 88%); border-radius: var(--r); padding: 17px 19px; margin-bottom: 20px; color: hsl(186 40% 20%); font-size: 0.95rem; line-height: 1.55; }
.notice svg { flex: none; margin-top: 2px; color: var(--amber); }
.notice b { color: hsl(186 48% 14%); }
.field-hint { margin-top: 6px; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.band-deep .field-hint { color: hsl(188 26% 74%); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-note { font-size: 0.86rem; color: hsl(188 26% 74%); }
.band-deep .field label { color: hsl(186 34% 92%); }
.thanks { display: none; background: hsl(192 34% 18%); border: 1px solid hsl(190 24% 27%); border-radius: var(--r-lg); padding: 34px 30px; }
.thanks h3 { font-size: 1.3rem; margin-bottom: 10px; }
.thanks p { color: hsl(188 26% 78%); }

/* ---------- footer ---------- */
footer.site { background: var(--card); border-top: 1px solid var(--border); padding: 46px 0 54px; }
.foot { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 0.92rem; }
.foot-links a:hover { color: var(--fg); }
.foot-legal { margin-top: 26px; color: var(--muted); font-size: 0.85rem; max-width: 78ch; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .split, .form-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.c3, .steps { grid-template-columns: minmax(0, 1fr); }
  .nav-links { display: none; }
  .nav-links.compact { display: flex; margin-left: auto; }
  .nav-links:not(.compact) { display: none; }
  section { padding: 56px 0; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cards.c2, .cards.c4, .holds, .row2 { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding: 0 18px; }
  .access { padding: 22px; }
  .hero { padding: 44px 0 56px; }
  .nav { gap: 12px; height: 66px; }
  .nav-links.compact { gap: 13px; }
  .nav-links a.signin { font-size: 0.9rem; }
  .nav-links.compact .btn-sm { padding: 9px 14px; font-size: 0.85rem; }
  .brand { font-size: 0.94rem; white-space: nowrap; gap: 7px; }
  .brand svg { width: 24px; height: 24px; }
  .btn { white-space: nowrap; }
  .btn-sm { padding: 9px 16px; font-size: 0.88rem; }
}

@media (max-width: 400px) {
  .nav { gap: 9px; }
  .nav-links.compact { gap: 10px; }
  .brand { font-size: 0.87rem; gap: 6px; }
  .brand svg { width: 21px; height: 21px; }
  .nav-links a.signin { font-size: 0.84rem; }
  .nav-links.compact .btn-sm { padding: 8px 12px; font-size: 0.8rem; }
}

@media (max-width: 344px) {
  .brand span { display: none; }
}

/* ---------- optional-field marker ---------- */
.field label .opt { font-weight: 400; font-size: 0.82rem; color: var(--muted); margin-left: 6px; }
.band-deep .field label .opt { color: hsl(188 26% 70%); }

/* The leaf mark reads as the brand at any size; the wordmark stays ink. */
.brand svg { color: hsl(174 96% 33%); flex: none; }
footer.site .brand svg { color: hsl(174 88% 30%); }