/* KG's & INCH's - components */

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--step-0); font-weight: 600; line-height: 1;
  padding: 0.875rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* The primary button is the one thing on a page that is allowed to glow. The
   gradient is a single hue lit from above, not a two-colour ramp, and the
   shadow is green so the button sits in its own light. */
.btn-primary {
  background: linear-gradient(180deg, #7FBA38 0%, var(--green) 52%, var(--green-deep) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 66, 120, .10), 0 8px 18px -10px rgba(90, 135, 38, .60);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(26, 66, 120, .12), 0 14px 26px -12px rgba(90, 135, 38, .70);
}
.btn-primary:active { box-shadow: 0 1px 2px rgba(26, 66, 120, .12); }

.btn-navy {
  background: linear-gradient(180deg, #23538F 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 66, 120, .12), 0 8px 18px -10px rgba(26, 66, 120, .55);
}
.btn-navy:hover {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(26, 66, 120, .14), 0 14px 26px -12px rgba(26, 66, 120, .65);
}

.btn-outline {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
  border-color: var(--green);
  color: var(--green-deep);
  box-shadow: var(--shadow-sm);
}

.btn-ghost { background: transparent; color: var(--navy); padding-inline: var(--sp-3); }
.btn-ghost:hover { color: var(--green-deep); }

.btn-sm { padding: 0.625rem 1.125rem; font-size: var(--step--1); }
.btn-lg { padding: 1.0625rem 2rem; font-size: var(--step-1); }
.btn-block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}

/* ---------- pills & badges ---------- */

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--green-soft); color: var(--green-deep);
}
.pill-navy { background: var(--navy-soft); color: var(--navy); }

.badge {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--green); color: #fff;
}
.badge-out { background: var(--danger-soft); color: var(--danger); }

/* ---------- cards ---------- */

/* A card is one link. Nothing inside it underlines on hover - the lift and
   the image zoom are what say it is clickable. This replaces the per-card
   rules that each card type used to carry, one of which the product card was
   missing, which is why only that name underlined. */
a.card,
a.card:hover,
a.card *,
a.card:hover * { text-decoration: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Resting elevation. A card with only a hairline reads as a wireframe; a
     card that only lifts on hover reads as flat until you touch it. */
  box-shadow: var(--shadow-xs);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease),
              border-color .22s var(--ease);
}
.card-hover:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  border-color: var(--line-strong);
}
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }

.card-media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-hover:hover .card-media img { transform: scale(1.04); }
.card-media img { transition: transform .35s var(--ease); }

/* ---------- product card ---------- */

.product-card .card-media { aspect-ratio: 1 / 1; }

/* The price is the one thing a shopper scans for, so it is the only green on
   the card - everything else is navy or grey - and it sits on a soft chip so
   it reads at a glance down a column of twelve. */
.product-card .p-price {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--green-deep);
  background: var(--green-soft);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.8rem;
}

/* ---------- program / service card ---------- */

/* The program card is already a .card - it only needs its own proportions. */
.program-card { position: relative; }
.program-card .card-media { aspect-ratio: 3 / 2; }
.program-card .card-body { gap: var(--sp-2); }

/* ---------- testimonial ---------- */

.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.quote blockquote { margin: 0; color: var(--ink-2); font-size: var(--step-0); }
.quote figcaption { display: flex; align-items: center; gap: var(--sp-3); }
.quote .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--step--1);
  flex: none;
}
.quote .who { font-weight: 600; color: var(--navy); font-size: var(--step--1); }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }

.input, .select, .textarea {
  width: 100%;
  /* A <select> reports the width of its widest option as its minimum, and a
     grid track sized from that kept the contact form wider than a small
     phone. */
  min-width: 0;
  font-family: var(--font-body); font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem var(--sp-4);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.textarea { min-height: 130px; resize: vertical; }

.form-note { font-size: var(--step--1); color: var(--muted); }

.alert {
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  border: 1px solid;
}
.alert-ok { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }
.alert-err { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  min-height: 92px;
}

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand img { height: 56px; width: auto; }
.brand:hover { text-decoration: none; }

.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-sub {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-deep);
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .header-inner { min-height: 76px; }
  .brand img { height: 44px; }
  .brand-title { font-size: 1.1875rem; }
  .brand-sub { font-size: 0.625rem; letter-spacing: .13em; }
}
/* The wordmark used to be hidden below 560px, which left a bare tree icon in
   the corner - recognisable to somebody who already knows the clinic, and
   nothing at all to somebody who has just landed from a search. It stays, at a
   smaller size: the header at 360px has room for a 38px mark and the name
   beside it once the account label is dropped. */
@media (max-width: 560px) {
  .brand { gap: var(--sp-2); }
  .brand img { height: 38px; }
  .brand-title { font-size: 1rem; }
  .brand-sub { font-size: 0.5rem; letter-spacing: .1em; }
}

/* Narrower still - the small Androids and the old SE. The line under the name
   is the first thing to go; the name itself does not. The header's own padding
   and gaps are tightened at the same time, because at 320px the brand and the
   three action buttons together are wider than the screen once 24px of padding
   sits either side of them. */
@media (max-width: 340px) {
  .brand-sub { display: none; }
  .brand-title { font-size: 0.9375rem; }
  .header-inner { padding-inline: var(--sp-3); gap: var(--sp-3); }
  .header-actions { gap: var(--sp-2); }
  .nav-toggle { padding: var(--sp-2); }
}

.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav a {
  font-size: var(--step-0); font-weight: 500; color: var(--navy);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav a:hover { color: var(--green-deep); background: var(--green-soft); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--green-deep); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.cart-link { position: relative; display: grid; place-items: center; padding: var(--sp-2); color: var(--navy); }
.cart-count {
  position: absolute; top: 0; right: 0;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--green); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem; font-weight: 700; line-height: 19px;
  text-align: center;
}

.nav-toggle {
  display: none;
  background: transparent; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; color: var(--navy);
}

@media (max-width: 1000px) {
  /* The panel hangs off the bottom of the header, so it has to follow the
     header when it tightens on scroll - otherwise a 2px strip of the page
     shows through the seam. */
  .site-header { --nav-top: 76px; }
  .site-header.is-stuck { --nav-top: 74px; }

  .nav-toggle { display: grid; place-items: center; }
  .nav {
    position: fixed; inset: var(--nav-top) 0 auto 0;
    flex-direction: column; align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-4);
    gap: var(--sp-1);
    box-shadow: var(--shadow);
    display: none;
    /* A phone held sideways is about 360px tall, and the panel is taller than
       that - without this the appointment button at the foot of it sat below
       the screen with no way to reach it. */
    max-height: calc(100vh - var(--nav-top));
    max-height: calc(100dvh - var(--nav-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open { display: flex; }
  .nav a { padding: var(--sp-3) var(--sp-4); }
}

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

.site-footer {
  background: var(--navy-deep);
  color: #C6D2E4;
  padding-block: var(--sp-8) var(--sp-5);
}
.site-footer h4 {
  color: #fff; font-family: var(--font-body);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: #C6D2E4; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

/* A line of text is a 20px-tall tap target, which is half of what a thumb
   reliably hits. Only a coarse pointer gets the extra height - on a mouse the
   footer keeps its tighter rhythm. */
@media (pointer: coarse) {
  .footer-links { gap: 0; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .link-more { padding-block: var(--sp-2); }
}
.footer-brand img {
  height: 64px; width: auto; background: #fff;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
}
.social-row {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--sp-3);
}
.social-row a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  /* The marks carry their own colours, so the ring stays quiet and only the
     ground changes on hover. */
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.social-row a:hover {
  background: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .social-row a { transition: none; }
  .social-row a:hover { transform: none; }
}

.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--1);
}

/* ---------- breadcrumb ---------- */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); color: var(--muted);
  list-style: none; padding: 0;
}
.crumbs li::after { content: "/"; margin-left: var(--sp-2); color: var(--line-strong); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--green-deep); }

/* ---------- horizontal carousel ----------
   Used for recipes, blogs and testimonials. The track is a native
   scroll-snap area, so it works with touch, trackpad and keyboard even
   before the arrow buttons are wired up. */

.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--sp-2);
  /* room so a focus ring on the first/last card is not clipped */
  padding-inline: 3px;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

.carousel-track > * {
  scroll-snap-align: start;
  flex: 0 0 clamp(240px, 24%, 300px);
}
.carousel-track.wide > * { flex: 0 0 clamp(280px, 32%, 380px); }

/* Arrows sit on the sides of the track, half over the first and last card,
   so a click reads as "move the row" rather than a control below it. */
.carousel-nav { display: contents; }

.carousel-btn.side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-shadow: var(--shadow);
}
.carousel-btn.side.is-prev { left: calc(var(--sp-5) * -1); }
.carousel-btn.side.is-next { right: calc(var(--sp-5) * -1); }

@media (max-width: 1300px) {
  .carousel-btn.side.is-prev { left: -6px; }
  .carousel-btn.side.is-next { right: -6px; }
}
/* Below this the cards fill the width; swipe is the natural gesture. */
@media (max-width: 720px) {
  .carousel-btn.side { display: none; }
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), opacity .18s var(--ease);
}
.carousel-btn:hover:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.carousel-btn:disabled { opacity: .35; cursor: default; }

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

.footer-brand-lockup { display: flex; align-items: center; gap: var(--sp-3); }
.footer-brand-lockup img { height: 58px; width: auto; }
.footer-brand-lockup .fb-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  white-space: nowrap;
}
.footer-brand-lockup .fb-sub {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9FD46A;
  white-space: nowrap;
}

/* ---------- one heading standard ----------
   Card titles were drifting apart - the blog card was set in the display face
   a size larger than the recipe card next to it, and the product name was a
   span at a different weight again. Every card title is now the same thing:
   body face, one size up from small, bold, navy.

   Level by level:
     h1              page title, display face, fluid
     h2              section title, display face, fluid
     h3              block title inside a section (--step-1)
     card title      --step-0, body face, 700
     .eyebrow        the label above a heading, uppercase and tracked
*/

.card h3,
.card .p-name,
.p-name {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--navy);
  margin: 0;
}

/* Block titles - the cards that are panels rather than links. */
.value-card h3,
.clinic-card h3,
.aside-card h3,
.enquiry-box h2,
.contact-form-card h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}

/* The header on a phone.
   The appointment button used to live up here and, at 390px, it pushed the
   menu button off the right edge - the navigation could not be opened at all.
   The button has since been taken out of the header altogether, so what is
   left below 560px is the mark, the account icon and the menu. */

/* The account link in the header. Icon and word together, because an outline
   of a person on its own is read as "profile", "settings" or nothing at all
   depending on who is looking. */
.header-account {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.header-account:hover { color: var(--green-deep); background: var(--green-soft); }
.header-account[aria-current="page"] { color: var(--green-deep); }

/* Below 760px the word goes and the icon stays. Unlike the appointment button
   it is narrow enough to keep at any width, and it is the one control a
   returning client comes to the site to press, so it does not go in a menu
   they have to open first. */
@media (max-width: 760px) {
  .header-account span { display: none; }
  .header-account { padding: var(--sp-2); }
}


/* ---------- enquiry popup (home page) ----------
   The contact form again, over the page, fifteen seconds in.

   Three shapes, chosen by the room there is rather than by a device name:

     tall and narrow   a sheet against the bottom edge, the shape people
                       already know from every app on the phone
     tall and wide     a centred card
     short             a centred card that scrolls inside itself - a phone held
                       sideways, or a small laptop, has less height than a
                       phone has upright, and a bottom sheet there leaves the
                       send button somewhere below the fold

   Heights are in dvh, not vh. On a phone vh is the height of the window with
   the browser's own bars hidden, so a sheet sized in vh runs under the address
   bar, and it does not shrink when the keyboard comes up - which is exactly
   when the send button needs to still be reachable. vh is kept underneath for
   browsers that do not know dvh.

   The whole thing is [hidden] in the markup and stays that way if the script
   never runs, so nothing here can leave a modal stuck over the home page. */

.popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Never let a notch or a home indicator sit on top of the sheet. */
  padding:
    max(var(--sp-4), env(safe-area-inset-top, 0px))
    max(var(--sp-4), env(safe-area-inset-right, 0px))
    max(var(--sp-4), env(safe-area-inset-bottom, 0px))
    max(var(--sp-4), env(safe-area-inset-left, 0px));
  background: rgba(17, 44, 80, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s var(--ease);
  overscroll-behavior: contain;
}
.popup[hidden] { display: none; }
.popup.is-open { opacity: 1; }

.popup-sheet {
  position: relative;
  /* Grows with the screen and then stops: past about 30 characters a line the
     form starts reading as a page rather than as a question being asked. */
  width: min(460px, 100%);
  max-height: 100%;
  /* A flex column so the body can scroll while the sheet itself does not,
     which is what keeps the close button from scrolling away with it. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  /* The body scrolls inside the sheet, so its content has to be clipped to
     the rounded corners rather than run over them. */
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98);
  transition: transform .28s var(--ease);
}
.popup.is-open .popup-sheet { transform: none; }

.popup-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  /* Named, because the action row below bleeds back out through it. */
  --pad: clamp(var(--sp-4), 4vw, var(--sp-6));
  padding: var(--pad);
  /* Only this scrolls, and only when it has to. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.popup-body h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--step-1), 4.5vw, var(--step-2));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy);
  /* Room for the close button, so a long heading never runs under it. */
  padding-right: var(--sp-7);
}

.popup-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.popup-close:hover {
  color: var(--danger);
  border-color: var(--line-strong);
  background: var(--surface-2);
}

/* A finger is not a mouse pointer. Anything under 44px is a button people miss
   and then hit the backdrop behind it instead. */
@media (pointer: coarse), (max-width: 560px) {
  .popup-close { width: 44px; height: 44px; }
  .popup-body h2 { padding-right: var(--sp-8); }
}

/* The message box is the one field that can be given up. It starts generous
   and is allowed to shrink to two lines when the screen is short. */
.popup .textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.popup .alert[hidden] { display: none; }

/* Sent: the form goes and the thank-you takes its place, so the rule under the
   heading is separating the heading from nothing. */
.popup-body.is-sent .rule { display: none; }

/* The send button and the line under it, held against the bottom edge of the
   sheet while the fields scroll behind them. Five fields do not fit on a 568px
   phone, and the button is the whole point of the popup - it does not get to be
   the part that is off the screen.

   It bleeds back out through the body padding so the surface behind it reaches
   both edges, or fields would show down the sides as they scroll under. */
.popup-actions {
  position: sticky;
  /* Pulled down by its own negative bottom margin, so the row lands flush on
     the sheet edge and the fields pass fully behind it. */
  bottom: calc(var(--pad) * -1);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 calc(var(--pad) * -1) calc(var(--pad) * -1);
  padding: var(--sp-3) var(--pad) var(--pad);
  background: var(--surface);
}

/* The lip that says there is more above. Only where the form is near certain
   to be scrolling - on a screen tall enough to hold the whole form there is
   nothing passing underneath to separate it from. */
@media (max-height: 760px) {
  .popup-actions { box-shadow: 0 -10px 18px -14px rgba(26, 66, 120, .5); }
}

/* ---- a phone held upright: a sheet off the bottom edge ---- */
@media (max-width: 560px) and (min-height: 561px) {
  .popup {
    align-items: flex-end;
    padding: 0;
  }
  .popup-sheet {
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .popup-actions {
    padding-bottom: max(var(--pad), calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)));
    margin-bottom: calc(var(--pad) * -1);
  }
}

/* ---- a small phone: 320px wide leaves 272px of form after the padding ---- */
@media (max-width: 380px) {
  .popup-body { gap: var(--sp-3); --pad: var(--sp-4); }
  .popup .textarea { min-height: 4.5rem; }
  .popup .form-note { font-size: 0.8125rem; }
}

/* ---- short: a phone on its side, or a laptop with little height ----
   Centred rather than bottom-anchored, because a sheet rising off the bottom
   of a 360px-tall window is the whole window. Everything tightens and the body
   scrolls. */
@media (max-height: 560px) {
  .popup { align-items: center; padding: var(--sp-3); }
  .popup-sheet {
    width: min(460px, 100%);
    max-height: 100%;
    border-radius: var(--radius);
    transform: translateY(10px) scale(.98);
  }
  .popup-body {
    gap: var(--sp-3);
    --pad: var(--sp-4);
  }
  .popup-body h2 { font-size: var(--step-1); }
  .popup .textarea { min-height: 3.5rem; }
  /* The rule and the reassurance under the button are the two things worth
     the height they cost only when there is height to spare. */
  .popup-body > .rule { display: none; }
}

/* ---- shorter still: a landscape phone, ~320px of height ---- */
@media (max-height: 420px) {
  .popup-body { gap: var(--sp-2); --pad: var(--sp-3); }
  .popup .form-note { display: none; }
  .popup-close { top: var(--sp-2); right: var(--sp-2); }
}

/* ---- a large screen: the sheet stops growing, the type does not shrink ---- */
@media (min-width: 1400px) {
  .popup-sheet { width: min(500px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .popup,
  .popup-sheet { transition: none; }
  .popup-sheet,
  .popup.is-open .popup-sheet { transform: none; }
}

/* ---------- WhatsApp ----------
   Used where the point is to start a chat that is already saying something -
   a program, a package. WhatsApp's own green (#25D366) is close enough to the
   brand green to clash rather than harmonise, so the button is drawn in the
   brand's own colours and the mark alone carries the recognition. */

.btn-whatsapp {
  background: var(--surface);
  color: var(--green-deep);
  border: 1.5px solid var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.btn-whatsapp:hover {
  background: var(--green-soft);
  border-color: var(--green-deep);
}
.btn-whatsapp svg { flex: 0 0 auto; }

/* The quieter one under a package price - a third full-width button in every
   card would compete with the one that actually starts the plan. */
.plan-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: none;
  transition: color .15s var(--ease);
}
.plan-wa:hover { color: var(--navy); text-decoration: underline; }
.plan-wa svg { flex: 0 0 auto; }