/* ==========================================================================
   vetcare.health — wireframe landing page
   Mobile first. Minimal design: neutral palette, 1px rules, no decoration.
   Breakpoints: 600px (small tablet), 900px (desktop).
   ========================================================================== */

:root {
  /* VetCare.Health brand system — see styleguide.md.
     Composition target: 75-80% white, 15-20% black/grey, only 5-8% green. */
  --brand:      #087F6D;   /* CTAs, links, checks, focus, live status */
  --brand-dark: #056354;   /* hover, pressed */
  --mint:       #E8F6F2;   /* assistant messages, supportive surfaces */

  --ink:        #171717;   /* headlines and primary text */
  --ink-2:      #666666;   /* supporting copy */
  --ink-3:      #8C8C8C;   /* placeholders and fine print (scale extension) */
  --line:       #E3E5E4;   /* inputs, dividers, neutral outlines */
  --line-2:     #EDEFEE;   /* lighter divider (scale extension) */
  --bg:         #ffffff;
  --bg-2:       #F5FBF9;   /* Mint White — alternating section backgrounds */

  --accent:     var(--brand);
  --live:       var(--brand);
  --gold:       #F59E0B;   /* ratings only */
  --urgent:     #D92D20;   /* genuine urgency, errors — not for conversion */

  /* type scale — every font-size on the page resolves to one of these.
     xs  fine print       · sm  supporting · md  body
     lg  emphasis / input · xl  subhead    · 2xl section heading
     3xl display headline (steps up at 600px and 900px) */
  --fs-xs:      12px;
  --fs-sm:      13px;
  --fs-md:      15px;
  --fs-lg:      16px;
  --fs-xl:      18px;
  --fs-2xl:     26px;
  --fs-3xl:     28px;

  --gap:        12px;
  --gap-lg:     18px;
  --pad:        18px;
  --radius:     14px;
  --wrap:       720px;
}

*, *::before, *::after { box-sizing: border-box; }

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

/* Anchor targets clear the pinned notice and keep a little breathing room
   above them. --pin-offset is the notice's measured height, set in main.js,
   and is 0 when the notice is in flow or dismissed. */
#top, #join, #how-it-works {
  scroll-margin-top: calc(var(--pin-offset, 0px) + 16px);
}

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* room for the fixed cookie banner */
  padding-bottom: 0;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* visible keyboard focus — accessibility baseline */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-2);
}
.section--tight { padding: 12px 0; }
/* the first screen reads as one surface: no dividers between logo, team,
   rating and chat. The terms notice supplies the only rule, at the fold. */
.hero .section { border-bottom: 0; }

/* Masthead band: header + team + rating share one Mint White surface, so the
   white chat card below reads as the page's focus. Mint White is the guide's
   section-background tone; Care Mint stays reserved for the assistant. */
.band { background: var(--bg-2); }

/* rule between the mint masthead band and the white chat surface */
.hero__chat { border-top: 1px solid var(--line); }

/* First screen: team + proof + chat + notice fill the viewport, so the chat
   card grows to meet the notice sitting on the fold. Phones/tablets only. */
@media (max-width: 899px) and (max-height: 1000px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .hero__chat { flex: 1 1 auto; display: flex; }
  .hero__chat > .wrap { display: flex; flex-direction: column; width: 100%; }
  .hero__chat .chat { flex: 1 1 auto; }
  /* the conversation absorbs the slack; the greeting stays under the bullets
     and the empty space sits below it until a thread starts */
  .hero__chat .convo { flex: 1 1 auto; }

  /* first-screen-only trims, to claw back the height the larger type cost.
     Scoped to .hero so the rest of the page keeps its normal rhythm. */
  .hero .section--tight { padding: 9px 0; }
  .hero__chat { padding: 22px 0 12px; }
  .hero .chat { gap: 11px; }
  .hero .benefits { gap: 9px; }
  .hero .bubble__text { padding: 7px 10px; }
}
/* Deliberately below the guide's 48-72 mobile / 80-120 desktop range: on a
   720px single column those gaps read far heavier than they do in the 1200px
   12-column layout the guide was written for. See decisions.md. */
.hero ~ .section { padding: 24px 0; border-bottom: 0; }
.hero ~ .section:nth-of-type(even) { background: var(--bg-2); }

.section--flush-bottom { padding-bottom: 0; border-bottom: 0; }
.section--flush-top { padding-top: 10px; }
.section:last-of-type { border-bottom: 0; }

/* ----------------------------------------------------------- typography */

.h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--gap);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------- logo */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}
/* the mark supplies its own circular outline, so no border or radius here */
.logo__mark {
  display: block;
  width: 40px; height: 40px;
}
.logo__accent { color: var(--brand); }
.chat__headline em { font-style: normal; color: var(--brand); }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.burger {
  flex: none;
  width: 44px; height: 44px;
  margin-right: -10px;         /* optical alignment with the page edge */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.burger__bar {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { width: 14px; }

/* Below 900px the menu is a full-screen overlay; from 900px it is an inline
   row of links and the burger disappears. */
.nav {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg);
  padding: 12px var(--pad) var(--pad);
  display: none;
  flex-direction: column;
}
.nav.is-open { display: flex; }

.nav__close {
  align-self: flex-end;
  width: 44px; height: 44px;
  margin-right: -10px;
  display: grid; place-items: center;
  font: inherit;
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.nav__links {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 16px;
}
.nav__links a {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.nav__links a:hover { color: var(--ink-2); }

/* Urgent Red marks the emergency route, paired with an icon and the word
   "Urgent" so the meaning never rests on colour alone. */
.nav__links a.nav__urgent { color: var(--urgent); }
.nav__links a.nav__urgent:hover { color: #B0251B; }
/* brand green, not a new blue: green is the guide's colour for links and
   actions, and a text link stays far weaker than the filled Start chat pill */
.nav__links a.nav__local { color: var(--brand); }
.nav__links a.nav__local:hover { color: var(--brand-dark); }
/* any nav link carrying an icon */
.nav__withicon {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.nav__icon {
  flex: none;
  width: 1em;
  height: 1em;
}

/* -------------------------------------------------- vets w/ credentials */

.avatar {
  display: block;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  object-fit: cover;          /* photos fill the circle; empty spans stay plain */
  flex: none;
}
.avatar--sm { width: 28px; height: 28px; }

.team {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* three circles, each overlapping the one before it */
.team__stack { display: flex; flex: none; }

/* each avatar is its own positioning context so it can carry a badge; the
   overlap moved here from .avatar */
.team__slot { position: relative; flex: none; display: block; }
/* the circles stay stacked one over the next */
.team__slot + .team__slot { margin-left: -16px; }

/* Verification shield on the lower-right of the last avatar. No z-index
   needed: it is in the last slot, so tree order already paints it on top. */
.team__badge {
  position: absolute;
  right: -2px;
  bottom: -5px;
  width: 22px; height: 22px;
  /* doubled so the white edge follows the shield outline, not a box */
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff);
}
.team__stack .avatar {
  width: 52px; height: 52px;
  box-shadow: 0 0 0 2px var(--bg);   /* ring separates the overlap */
}


.team__text { min-width: 0; }

/* live indicator — the only saturated colour on the page */
.live {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--live);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(8, 127, 109, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(8, 127, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(8, 127, 109, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live { animation: none; }
}
.team__count { font-size: var(--fs-lg); color: var(--ink-2); }
.team__count strong { color: var(--ink); font-weight: 600; }
.team__creds { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.team__more { color: var(--ink-2); }

/* -------------------------------------------------------- social proof */

.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.proof strong { color: var(--ink); font-weight: 600; }
.proof__item { white-space: nowrap; }
.stars { font-size: var(--fs-xs); letter-spacing: 0; color: var(--gold); }

/* ---------------------------------------------------------------- chat */

.chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat__headline {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.benefits { display: flex; flex-direction: column; gap: 10px; }
.benefit {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-md);
  color: var(--ink-2);
}
/* green check instead of a bullet */
.benefit::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 5px; height: 9px;
  border: solid var(--live);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* No inner scroller: the thread grows the card, it does not scroll inside it.
   Opening state: the greeting sits directly under the benefit bullets, with
   the free space below it. Once a real thread starts, the app adds
   .convo--threaded and messages anchor to the composer, growing upward. */
.convo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 10px;   /* sets the bullets off from the first message */
  min-height: 0;
}
.convo--threaded { justify-content: flex-end; }

.bubble {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bubble__body { min-width: 0; }
/* scoped to the bubble so testimonial avatars keep their smaller size */
.bubble .avatar--sm { width: 42px; height: 42px; }

.bubble__who {
  font-size: var(--fs-lg);
  color: var(--ink-3);
  margin-bottom: 2px;
}
.bubble__who strong { color: var(--ink-2); font-weight: 600; }

.bubble__text {
  background: var(--mint);
  border: 1px solid var(--mint);
  border-radius: var(--radius);
  border-top-left-radius: 3px;
  padding: 10px 13px;
  font-size: var(--fs-xl);
}

.composer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.composer__input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
  resize: vertical;
  font: inherit;
  font-size: var(--fs-lg);
  color: var(--ink);
  background: transparent;
}
.composer__input::placeholder { color: var(--ink-3); }
.composer__input:focus { outline: none; }
.composer__input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(8, 127, 109, 0.16);
}

.composer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 8px;
}
.composer__meta {
  display: flex;
  align-items: center;
  gap: 0 5px;
  /* below 600px the two facts stack so they still sit LEFT of the button.
     Tight leading keeps both lines shorter than the 36px button, so the
     button governs the row height. */
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}
.composer__meta > span { white-space: nowrap; }
.composer__meta .sep { display: none; }   /* stacked below 600px */
.composer__meta a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.composer__foot .btn { margin-left: auto; }
.sep { color: var(--line); }

/* -------------------------------------------------------------- button */

.btn {
  font: inherit;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
}
.composer__foot .btn {
  font-size: var(--fs-xl);
  padding: 10px 14px;
  min-height: 44px;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* -------------------------------------------------------- join / payment */

#join[hidden] { display: none; }

.join__title { margin-bottom: 4px; }
.join__sub {
  font-size: var(--fs-lg);
  color: var(--ink-2);
  margin-bottom: var(--gap-lg);
}

.pay {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Labels are screen-reader-only; the field's own placeholder carries the
   visible text. Selects use a disabled first option instead, and read as
   placeholder-grey while it is still selected. */
.field { min-width: 0; }
.field__input {
  width: 100%;
  font: inherit;
  font-size: var(--fs-xl);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
  min-height: 46px;
}
.field__input::placeholder { color: var(--ink-3); }
.field__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(8, 127, 109, 0.16);
}
/* appearance:none removes the native arrow, so draw one back in */
select.field__input {
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
select.field__input:invalid { color: var(--ink-3); }

.field__wrap { position: relative; }

/* brand name, not a network logo: the real marks are trademarked assets */
.cc-brand {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  pointer-events: none;
}
.cc-brand[hidden] { display: none; }
/* room for the chip so digits never run under it */
.field__wrap .field__input { padding-right: 12px; }

.field__input.is-valid { border-color: var(--brand); }
.field__input.is-invalid { border-color: var(--urgent); }
.field__input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14); }

/* urgent colour is always paired with text, never used alone for state */
.field__msg {
  font-size: var(--fs-sm);
  color: var(--urgent);
}
.field__msg[hidden] { display: none; }

.pay__row { display: grid; gap: 10px; }
.pay__row--card { grid-template-columns: 1fr; }
.pay__row--exp  { grid-template-columns: 1fr 1fr 1fr; }

.pay__legal {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.pay__legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.btn--block { display: block; width: 100%; border-radius: var(--radius); font-size: var(--fs-xl); padding: 13px 18px; }

/* Placeholder marks: the real BBB, Google, Trustpilot and Stripe artwork is
   not in the repo, and displaying it needs the actual assets and permission. */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--gap-lg);
}
.trust__item {
  flex: 1 1 0;
  min-width: 72px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* -------------------------------------------------------- how it works */

/* the section now holds two headed groups */
.steps-group + .steps-group { margin-top: 34px; }
.steps-group__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.steps-group__sub {
  font-size: var(--fs-md);
  color: var(--ink-2);
  margin-bottom: 14px;
}

.steps { display: flex; flex-direction: column; gap: 16px; }
.step {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-areas:
    "num title"
    ".   body";
  column-gap: 10px;
  row-gap: 2px;
  /* without this the shorter step in a two-column row stretches its own rows
     to match its neighbour, opening a gap between title and body */
  align-content: start;
}
.step__num {
  grid-area: num;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.step__title { grid-area: title; font-size: var(--fs-xl); font-weight: 600; align-self: center; }
.step__body  { grid-area: body; font-size: var(--fs-md); color: var(--ink-2); }

/* ------------------------------------------------------ what's included */

.included { display: grid; gap: 16px 28px; }
.included__item { }
.included__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: 2px;
  padding-left: 22px;
  position: relative;
}
.included__title::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 14px; height: 14px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
}
.included__body { font-size: var(--fs-md); color: var(--ink-2); padding-left: 22px; }

/* -------------------------------------------------------- testimonials */

.testimonials {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad) 4px;
}
.testimonials::-webkit-scrollbar { display: none; }

.testimonial {
  flex: 0 0 82%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.testimonial .stars { font-size: var(--fs-sm); }
.testimonial__title {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.testimonial__quote { font-size: var(--fs-md); }
.testimonial__by {
  margin-top: auto;          /* byline sits at the card's foot */
  padding-top: 4px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--ink-2);
}

/* -------------------------------------------------------------- footer */

.footer { padding-bottom: 24px; }
.footer__nav {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: var(--fs-md); color: var(--ink-2);
  margin-bottom: 8px;
}
.footer__note { font-size: var(--fs-sm); color: var(--ink-3); }

/* ------------------------------------------------------- cookie banner */

.cookies {
  background: var(--ink);
  color: #fff;
  border-top: 1px solid var(--ink);
  /* rule spans the viewport; the content inside is held to --wrap like
     every other band */
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.cookies[hidden] { display: none; }
.cookies__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cookies__text { flex: 1 1 auto; font-size: var(--fs-xs); color: rgba(255,255,255,0.82); }
.cookies__text a { color: #fff; }

.cookies__close {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font: inherit;
  font-size: var(--fs-xl);
  line-height: 1;
  color: rgba(255,255,255,0.7);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.cookies__close:hover { color: #fff; background: rgba(255,255,255,0.14); }

/* Under 390px the wait-time line cannot fit beside the button at this size;
   let it wrap and take its own row rather than colliding with the button. */
@media (max-width: 389px) {
  .composer__meta > span { white-space: normal; }
}

/* ==================================================== 600px and wider == */
@media (min-width: 600px) {
  :root { --fs-3xl: 40px; }
  .chat__headline { line-height: 1.1; }

  /* room for a 16-digit number at 18px plus the brand chip */
  .pay__row--card { grid-template-columns: 1fr 104px; }

  .proof { gap: 6px; }

  .composer__meta {
    flex-direction: row;
    align-items: center;
    font-size: var(--fs-lg);
    line-height: 1.5;
    flex: 0 1 auto;
  }
  .composer__meta .sep { display: inline; }
  .composer__foot { gap: 10px var(--gap); }
  .composer__foot .btn { padding: 10px 20px; min-height: 46px; }

  .included { grid-template-columns: 1fr 1fr; }

  .testimonial { flex: 0 0 300px; }
}

/* ==================================================== 900px and wider == */
@media (min-width: 900px) {
  :root { --pad: 24px; }

  .section { padding: 32px 0; }
  .section--tight { padding: 8px 0; }

  :root { --fs-3xl: 52px; }

  .testimonials { overflow: visible; margin: 0; padding: 0; }
  .testimonial { flex: 1 1 0; }

  .hero ~ .section { padding: 30px 0; }

  /* From 900px the terms notice pins to the top of the viewport. main.js adds
     matching padding to <body> so it never covers the header. */
  .cookies {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    border-top: 0;
    border-bottom: 1px solid var(--ink);
    padding: 6px 0;
  }
  /* The 44px close is a *touch* target. On a desktop pointer WCAG 2.5.8 asks
     for 24px, so 28px keeps it compliant and stops the button dictating a
     65px-tall bar. */
  .cookies__close { width: 28px; height: 28px; }
  .cookies__text { line-height: 1.45; }

  .hero__chat { padding: 44px 0 20px; }

  .burger { display: none; }
  .nav {
    position: static;
    inset: auto;
    z-index: auto;
    margin-left: auto;
    padding: 0;
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .nav__close { display: none; }
  .nav__links {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin-top: 0;
  }
  .nav__links a {
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--ink-2);
  }
  .nav__links a:hover { color: var(--ink); }

  .steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 36px;
  }
}