/* ─────────────────────────────────────────────────────────────────────────────
   HORIZON HEALTH ADVISORS
   The design is taken off the logo rather than invented beside it.

   Read straight from Health Advisors_.png:
     · a near-black ground, not white
     · a chrome/silver high-contrast serif wordmark, widely letterspaced
     · one accent: the cyan of the horizon arc and of "HEALTH ADVISORS"
     · the arc itself — a rising light on a horizon — as the brand device
     · everything uppercase and spaced; nothing shouty, nothing rounded

   ⚠ NO WEBFONTS, DELIBERATELY. The footer promises "no analytics and no
   cookies", and a Google Fonts link is a third-party request on every visit
   that reports the visitor's IP and referrer. A promise on the page that the
   page's own markup breaks is worse than not making it. So the display face is
   a system serif stack that lands on Didot / Bodoni where they exist and
   Georgia everywhere else — all high-contrast serifs, all already on the
   machine.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ink:        #06070a;   /* the logo's ground */
  --ink-2:      #0b0d12;   /* raised bands */
  --panel:      #0e1218;
  --line:       rgba(255, 255, 255, .09);
  --line-warm:  rgba(34, 211, 238, .22);

  --text:       #e8ecf1;
  --text-dim:   #9aa6b4;
  --text-faint: #6b7684;

  --cyan:       #22d3ee;
  --cyan-deep:  #0e7490;
  --chrome-hi:  #ffffff;
  --chrome-lo:  #8b96a5;

  --serif: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --r: 14px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The whole page sits on a very slow radial lift, so the black is not flat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(90% 50% at 50% 0%, rgba(255, 255, 255, .05), transparent 70%);
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }

a { color: var(--cyan); text-decoration-color: rgba(34, 211, 238, .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--cyan); }

.skip {
  position: absolute; left: -9999px;
  background: var(--cyan); color: #04212a; padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip:focus { left: 0; top: 0; z-index: 50; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ── THE HORIZON RULE ────────────────────────────────────────────────────────
   The logo's arc, reduced to a divider: a hairline that brightens to cyan in
   the middle and fades at both ends, with a single point of light on it. It is
   the one ornament this design uses, so it is used sparingly and always means
   "a section ended here". */
.horizon {
  position: relative;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.10) 22%, var(--cyan) 50%, rgba(255,255,255,.10) 78%, transparent);
  opacity: .8;
}
.horizon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px var(--cyan), 0 0 18px 6px rgba(34, 211, 238, .55);
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */

header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6, 7, 10, .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.nav { display: flex; align-items: center; gap: 1.5rem; padding: .85rem 0; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }

/* ⚠ THE HEADER AND FOOTER USE mark.png, NOT logo.png. The full lockup is a
   1254px square carrying the H, the wordmark, the rule and the tagline; at the
   34px a header allows, all four collapse into an unreadable smudge. mark.png
   is the H-and-arc device cropped out of that same file, so the small mark is
   legible at 34px and is still literally the logo rather than a redrawing. */
.brand img { display: block; height: 34px; width: auto; }

.brand .nm {
  display: flex; flex-direction: column; line-height: 1.05;
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--chrome-hi) 8%, var(--chrome-lo) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .nm small {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .34em;
  color: var(--cyan);
  -webkit-text-fill-color: var(--cyan);
  margin-top: .32rem;
}

header nav { margin-left: auto; display: flex; gap: 1.6rem; }
header nav a {
  color: var(--text-dim); text-decoration: none;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem 0; border-bottom: 1px solid transparent;
}
header nav a:hover { color: var(--text); }
header nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--cyan); }

/* ⚠ THE HEADER IS WHAT OVERFLOWS ON A PHONE, AND ONLY THE MEASUREMENT SAID SO.
   At 420px the brand plus three widely-letterspaced links measured 442px wide,
   which is where the page's 22px of horizontal scroll came from — nothing in
   the body was ever too wide. So the nav drops to its own row instead of being
   squeezed, and the brand's tracking tightens to buy back the difference. */
@media (max-width: 620px) {
  .nav { flex-wrap: wrap; gap: .55rem 1.1rem; }
  header nav { margin-left: 0; width: 100%; gap: 1.15rem; padding-bottom: .1rem; }
  header nav a { font-size: .72rem; letter-spacing: .12em; }
  .brand .nm { font-size: 1rem; letter-spacing: .16em; }
  .brand img { height: 30px; }
}

/* ── HERO ────────────────────────────────────────────────────────────────── */

.hero { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }

.hero-mark {
  display: block;
  width: min(340px, 62vw);
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  /* The logo is already on black; this only deepens the seam. */
  filter: drop-shadow(0 12px 40px rgba(34, 211, 238, .18));
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--cyan);
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: 0 0 1.1rem;
  background: linear-gradient(180deg, #fff 20%, #a9b4c2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 em { font-style: italic; color: var(--cyan); -webkit-text-fill-color: var(--cyan); }

.lead { font-size: 1.08rem; color: var(--text-dim); max-width: 60ch; margin: 0 0 1.6rem; }

.hero-grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.cta-row { margin: 0 0 .7rem; }

.btn {
  display: inline-block;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  color: #04212a;
  background: linear-gradient(180deg, #7ee9fb, var(--cyan) 55%, #0fb6d6);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(34, 211, 238, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 38px rgba(34, 211, 238, .38); }
.btn:active { transform: translateY(0); }

.cta-note { color: var(--text-faint); font-size: .88rem; margin: 0; }

/* ── PANELS AND BANDS ────────────────────────────────────────────────────── */

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.panel h2 {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}

.band { padding: clamp(2.75rem, 7vw, 4.5rem) 0; }
.band.alt { background: var(--ink-2); border-block: 1px solid var(--line); }
.band.close { text-align: center; }
.band.close .lead { margin-inline: auto; }

.band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 .7rem;
  color: #f2f5f8;
}
.band p { color: var(--text-dim); margin: 0 0 1rem; max-width: 62ch; }
.band.close p { margin-inline: auto; }

.cols { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .cols { grid-template-columns: 1fr; } }

.cols article {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  position: relative;
}
/* A short cyan tick where each column begins — the arc, at its smallest. */
.cols article::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 1px;
  background: var(--cyan); box-shadow: 0 0 8px rgba(34,211,238,.8);
}

/* ── LISTS ───────────────────────────────────────────────────────────────── */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ticks li {
  position: relative; padding-left: 1.7rem; color: var(--text-dim); max-width: 68ch;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--cyan) 55%, var(--cyan-deep));
  box-shadow: 0 0 8px rgba(34, 211, 238, .7);
}

.small { font-size: .9rem; color: var(--text-faint); }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--line);
  background: #040507;
  padding: clamp(2rem, 5vw, 3rem) 0 2.5rem;
  margin-top: clamp(2rem, 6vw, 4rem);
}
.foot-brand {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--serif); letter-spacing: .2em; text-transform: uppercase;
  font-size: .92rem; color: #cfd6de; margin: 0 0 1.2rem;
}
.foot-brand img { height: 26px; width: auto; display: block; }

.disc { display: grid; gap: .6rem; max-width: 74ch; }
.disc p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--text-faint); }

/* ── PROSE PAGES (how-it-works, contact) ─────────────────────────────────── */

.prose { padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.prose h1 { margin-bottom: 1.4rem; }
.prose h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin: 2.4rem 0 .6rem; color: #f2f5f8;
}
.prose p, .prose li { color: var(--text-dim); max-width: 66ch; }
.prose ol { padding-left: 1.2rem; display: grid; gap: .7rem; }
.prose ol::marker { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ── THE LOGO IS BLACK-ON-BLACK, SO THE BLACK MUST GO ───────────────────────
   Health Advisors_.png is supplied on its own near-black square. Dropped onto a
   page whose background is a fraction lighter — and this one carries a radial
   lift, so it is never flat — that square reads as a hard-edged box around the
   mark. It is the single most obvious "pasted in" tell on the page.

   ⚠ SCREEN BLENDING RATHER THAN A MATCHED BACKGROUND. Matching the page colour
   to the logo's black would work only where the gradient happens to be that
   exact value, and would break the moment the section behind it changed. Under
   `screen`, black contributes nothing at all and lighter pixels pass through —
   so the chrome and the cyan survive and the square simply stops existing,
   whatever is behind it.

   ⚠ AND IT IS SAFE HERE PRECISELY BECAUSE THE GROUND IS DARK. Screen over a
   light background would wash the mark out, so this is scoped to the three
   places the logo sits on the near-black shell and nowhere else. */
.hero-mark,
.brand img,
.foot-brand img {
  mix-blend-mode: screen;
}

/* ⚠ THE HERO MARK IS ALSO TOO BIG ONCE THE BOX IS GONE. With the square
   removed the glyph reads much larger than its pixel dimensions suggest, and
   the logo already contains the wordmark and the tagline — so the page was
   saying "Horizon Health Advisors, private health coverage specialists" three
   times before the headline. Smaller, and the eyebrow below it stops being a
   repetition and starts being a caption. */
.hero-mark { width: min(260px, 52vw); }

/* ⚠ THE BLEND ABOVE CANNOT WORK, AND NEITHER CAN A MASK — THE FIX BELONGS IN
   THE IMAGE. Two renders settled this. `mix-blend-mode: screen` composited
   against a transparent backdrop and did nothing; the before/after shots were
   pixel-identical. A feathered radial mask DID remove the square, but the
   artwork reaches almost the full width of its own canvas, so the fade that
   killed the corners also ate the outer strokes of HORIZON and both ends of
   the tagline rule. There is no radius that clears the black without clipping
   the mark — the two demands are the same pixels.

   So logo-mark.png is logo.png with a real alpha channel recovered: the source
   is artwork composited over black, so straight alpha is max(r,g,b) and the
   colour is un-premultiplied back out by dividing through. 86.4% of the image
   is now fully transparent, the chrome and the cyan survive untouched, and the
   logo sits correctly on any ground with no mask, no blend and no geometry to
   tune. Keep logo.png — it is the original the client sent. */
.hero-mark,
.brand img,
.foot-brand img {
  mix-blend-mode: normal;
  -webkit-mask-image: none;
          mask-image: none;
}

/* ⚠ THE SOURCE IS SQUARE (1254×1254) AND THE HTML CARRIES height="340". A
   presentational attribute is a used height, so `width: 260px` alone left the
   mark rendering 260×340 — stretched 31% vertically. Measured, not read. */
.hero-mark { height: auto; }

/* ⚠ THE NOTE UNDER EACH BUTTON WAS BELOW AA. rgb(107,118,132) on the near-black
   shell is 4.2:1, and it is 14px text, which needs 4.5:1. It is the line that
   tells a visitor there is no form and no call centre, so it is not decoration. */
.cta-note { color: #93a0b1; }

/* ── TWO ARTICLES SHOULD NOT LEAVE A THIRD OF THE PAGE EMPTY ───────────────
   .cols was pinned at `repeat(3, 1fr)`, which is right on the home page and
   wrong on contact.html, where there are two articles: the third track stayed
   open and the whole band sat in the left two-thirds with dead space beside it.
   auto-fit lays as many tracks as fit and COLLAPSES the empty ones, so three
   articles still make three columns and two make two full-width ones. */
.cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* A note following a tick list is a new thought, not the last bullet. Without
   this it rendered flush to the list at bullet indent and read as a run-on
   sentence off the final item. index.html was patching this inline; this makes
   it a property of the pairing instead. */
.ticks + .small,
.ticks + p { margin-top: 1.4rem; }

/* ⚠ A READING MEASURE NEEDS SOMETHING BESIDE IT, OR IT READS AS A BUG.
   `.ticks li` caps at 68ch, which is correct for readability — but in a 1120px
   band with nothing in the other half, the render looked like the layout had
   failed rather than like a decision. The heading moves into the empty column,
   so the measure is now a column rather than a short line on a wide page. */
.split {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.split > div:first-child h2 { margin-top: 0; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ── `.hero small` WAS A CLASS THAT DID NOTHING ────────────────────────────
   how-it-works.html and contact.html both say <section class="hero small">,
   and no rule ever matched `.small` there — so the inner pages carried the home
   page's full hero padding (6.5rem) on top of .band's own 4.5rem, and the
   render showed roughly 180px of dead black between the intro sentence and the
   first step. The class now means what its name says. */
.hero.small { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem); }

/* ── THE FOUR STEPS WERE AN UNSTYLED <ol> ──────────────────────────────────
   Browser-default markers rendered as small grey digits hanging outside the
   text, which read as an accident rather than a sequence. The counter is drawn
   in the page's own cyan, at the size of the eyebrows, and each step gets the
   same hairline the .cols articles use so the rhythm matches the rest. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.4rem 0 0 3.4rem;
  border-top: 1px solid var(--line);
  max-width: 68ch;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1.25rem;
  font: 600 .78rem/1 var(--sans, inherit);
  letter-spacing: .12em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(34, 211, 238, .55);
}
.steps li h2 { margin-top: 0; }

/* ⚠ THE STEP ROWS WERE USING LESS THAN HALF THE PAGE, AND THE RULE GAVE IT AWAY.
   `max-width: 68ch` on the <li> capped the whole row — number, heading AND the
   hairline above it — at about 630px of a 1120px band, so the render showed
   four short rules stacked in the left half with the right half empty. It read
   as a broken grid rather than a reading measure.

   The row now spans the band and the MEASURE moves onto the text inside it, so
   the hairline and the number use the full width while the prose still breaks
   at a comfortable line length. Above 900px the body sits beside the heading,
   which is what the empty right half was always for. */
.steps li { max-width: none; }
.steps li p { margin-bottom: 0; }

@media (min-width: 900px) {
  .steps li {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: start;
  }
  .steps li h2 { margin-bottom: 0; }
}