/* MyBuddy landing page.
   Figma: sVmc6qC98HAwTNlL9GqEJ1, node 303:3047 (page) and 312:2832 (waitlist card).
   The file defines no Figma variables, so the values below are lifted from the raw
   hex in the design rather than mapped onto a token system that does not exist. */

/* ---------- tokens ---------- */
:root {
  --ink: #162238;
  --body: #4e5d78;
  --primary: #00bac6;
  --amber: #ffae34;
  --muted: #94a3b8;
  --line: #e2e8f0;
  --surface: #f8fafc;
  --teal-soft: #ebfbfa;
  --teal-line: #bcefef;
  --teal-tint: #f0fdfa;
  --white: #fff;

  /* Offering card icon wells — one tint per card, in design order. */
  --well-1: #eff6ff;
  --well-2: #ecfdf5;
  --well-3: #fff7ed;
  --well-4: #f5f3ff;
  --well-5: #fdf2f8;

  --gutter: 80px;
  --card-shadow: 0 10px 16px rgba(22, 34, 56, 0.04);
}

/* ---------- faces ----------
   Both are variable fonts, latin subset only — the copy on this page is all latin.
   Self-hosted rather than fetched from Google so a healthcare page makes no
   third-party request. OFL, see fonts/LICENSE-*.txt. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Any author `display` beats the UA stylesheet's [hidden] rule, and both modal
   states set display:flex — without this the success card renders underneath
   the form it just replaced. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: Manrope, ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* height:auto matters because every image below carries width/height attributes:
   without it the attribute height beats an author width and the art renders at
   the wrong aspect. Element rules further down still override it. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: Outfit, ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  margin: 0;
}

.container {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

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

:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-weight: 700; text-align: center;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--primary); color: var(--white); }
.btn-outline { background: var(--white); color: var(--primary); border: 2px solid var(--primary); }

.btn-lg { font-size: 16px; padding: 16px 24px; border-radius: 30px; }
.btn-sm { font-size: 14px; padding: 12px 20px; border-radius: 24px; }

/* ---------- navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 24px;
}
/* Sized by height, never width — the lockup keeps its own aspect that way.
   flex:0 0 auto is load-bearing: the logo is an SVG exported with
   preserveAspectRatio="none", so a shrinking flex item stretches the artwork
   rather than letterboxing it. It squeezed to 110x44 at 390px without this. */
.brand { flex: 0 0 auto; display: flex; align-items: center; }
.brand img { height: 44px; width: auto; }

/* 390 draws a text lockup instead of the SVG one — a teal tile with an "m" beside
   the wordmark. Both ship; the breakpoint picks. */
.brand-compact { display: none; align-items: center; gap: 6px; }
.brand-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--primary); color: var(--white);
  font-family: Outfit, sans-serif; font-size: 18px; font-weight: 900; line-height: 1;
}
.brand-word {
  font-family: Outfit, sans-serif; font-size: 18px; font-weight: 800; color: var(--ink);
}

/* The nav CTA is "Get Early Access" at 1440 and "Join Free" at 390. */
.label-narrow { display: none; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 14px; font-weight: 600; color: var(--body);
  padding: 8px 4px; white-space: nowrap;
}
.nav-links a:hover { color: var(--primary); }

/* Drawn 34x34; built 44x44 so it is a real touch target, which is the one
   deliberate departure from the mobile frame. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--surface); border: 0; cursor: pointer; border-radius: 8px;
}
.nav-toggle:hover { background: var(--teal-soft); }

/* ---------- hero ---------- */
/* At 1440 the art sits beside the copy; at 390 it sits *inside* it, between the
   lede and the buttons. So the copy blocks live in a wrapper that dissolves with
   display:contents at the small breakpoint, and `order` places all four. A grid
   spanning the art across three rows was the other option and it stretched the
   rows to the art's height, spreading the copy apart. */
.hero {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding-block: 40px 80px;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; width: 580px; }
.hero-text { display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: 54px; font-weight: 800; line-height: 1.15; }
.hero h1 .accent { color: var(--primary); }
.hero-lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.safety-badge {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 500; color: var(--body);
}
/* The render is square; the design frames it in a 600x540 box and crops. Without
   the explicit ratio the hero grows 60px taller than drawn and the robot reads
   smaller than it should. */
.hero-art { width: 600px; max-width: 100%; flex: 0 0 auto; }
.hero-art img {
  width: 100%; aspect-ratio: 600 / 540;
  object-fit: cover; border-radius: 32px;
}

/* ---------- offerings ---------- */
.offerings { background: var(--surface); }
.offerings .container { padding-block: 80px; }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: 32px; font-weight: 800; line-height: 1.25; }
.section-head .accent { color: var(--primary); }

.offerings-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.offering {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px;
}
.icon-well {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
}
.offering:nth-child(1) .icon-well { background: var(--well-1); }
.offering:nth-child(2) .icon-well { background: var(--well-2); }
.offering:nth-child(3) .icon-well { background: var(--well-3); }
.offering:nth-child(4) .icon-well { background: var(--well-4); }
.offering:nth-child(5) .icon-well { background: var(--well-5); }
.offering h3 { font-size: 18px; font-weight: 700; }
.offering p { margin: 0; font-size: 14px; line-height: 1.5; }

/* ---------- how it works ---------- */
.how .container { padding-block: 80px; }
.how h2 { font-size: 32px; font-weight: 800; text-align: center; margin-bottom: 56px; }
.steps { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 220px; text-align: center; }
.step-icon {
  position: relative; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 36px; background: var(--teal-tint);
}
.step-badge {
  position: absolute; top: 0; left: 0;
  padding: 2px 6px; border-radius: 10px;
  background: var(--primary); color: var(--white);
  font-family: Outfit, sans-serif; font-size: 11px; font-weight: 800; line-height: 1.3;
}
.step h3 { font-size: 16px; font-weight: 700; }
.step p { margin: 6px 0 0; font-size: 13px; line-height: 1.4; }
.step-link { flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; }
.step-chevron { display: none; }

/* ---------- trust banner ---------- */
.trust .container { padding-block: 0; }
.trust-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--teal-soft); border: 1px solid var(--teal-line);
  border-radius: 20px; padding: 24px;
}
.trust-left { display: flex; align-items: center; gap: 16px; }
.trust-shield {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 20px; background: var(--primary);
}
.trust-left p {
  margin: 0; font-family: Outfit, sans-serif;
  font-size: 16px; font-weight: 800; color: var(--ink);
}
.trust-checks { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.trust-checks li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.trust-checks { list-style: none; margin: 0; padding: 0; }

/* ---------- testimonials ---------- */
.testimonials .container { padding-block: 100px; }
.testimonials h2 { font-size: 32px; font-weight: 800; text-align: center; margin-bottom: 48px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial {
  display: flex; flex-direction: column; gap: 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px; padding: 32px;
}
.testimonial .mark {
  font-family: Outfit, sans-serif; font-size: 48px; font-weight: 900;
  line-height: .8; color: var(--primary);
}
.testimonial blockquote { margin: 0; font-size: 15px; line-height: 1.6; }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial figcaption img { width: 48px; height: 48px; border-radius: 24px; }
.testimonial .who {
  font-family: Outfit, sans-serif; font-size: 14px; font-weight: 700; color: var(--ink);
}
.testimonial .role { font-size: 12px; color: var(--muted); }

/* ---------- closing call to action ---------- */
.cta .container { padding-block: 0 80px; }
.cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--primary); border-radius: 32px; padding: 48px 64px;
}
/* The supplied render carries its own teal backdrop that does not match this card
   (rgb(62,139,143) against rgb(0,186,198)), and the Figma node is a rounded
   rectangle. Clipping it to a rounded tile is what keeps that from reading as a
   stray square; removing the backdrop would mean cutting into art the same hue. */
.cta-mascot { flex: 0 0 auto; width: 240px; border-radius: 24px; overflow: hidden; }
.cta-mascot img { width: 100%; }
.cta-copy { width: 480px; color: var(--white); }
.cta-copy h2 { font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--white); }
.cta-copy p { margin: 12px 0 0; font-size: 16px; opacity: .9; }
.cta-form { display: flex; flex-direction: column; gap: 12px; width: 320px; flex: 0 0 auto; }
.cta-form input {
  width: 100%; padding: 12px 16px; border: 0; border-radius: 24px;
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 14px; min-height: 44px;
}
.cta-form input::placeholder { color: var(--muted); }
.cta-form .btn { background: var(--amber); color: var(--white); font-weight: 800; width: 100%; min-height: 44px; }

/* ---------- footer ---------- */
.site-footer .container { padding-block: 48px; }
.site-footer .inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.site-footer .brand img { height: 44px; width: auto; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
/* Drawn on the 390 frame only. Kept to that frame rather than promoted to every
   width, because promoting it would be inventing placement for an unreviewed
   clinical claim — see the note in index.html. */
.footer-legal { display: none; }
/* Lets the links and the socials sit as direct children of .inner at 1440, and
   become their own row at 390, without two different markup shapes. */
.footer-meta { display: contents; }
.footer-links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.footer-links a { display: block; padding: 8px 4px; font-size: 14px; font-weight: 600; color: var(--body); }
.footer-links a:hover { color: var(--primary); }
.social { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
.social a {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 16px; background: var(--surface);
}
.social a:hover { background: var(--teal-soft); }

/* ---------- waitlist modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex;
  padding: 24px;
  background: rgba(22, 34, 56, .45);
  overflow-y: auto;
}
.modal-card {
  margin: auto;
  display: flex; flex-direction: column; gap: 24px;
  width: 440px; max-width: 100%; padding: 32px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 24px; box-shadow: var(--card-shadow);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 20px;
}
.modal-head img { height: 32px; width: auto; }
.badge {
  padding: 4px 10px; border-radius: 12px;
  background: var(--teal-soft); color: var(--primary);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.modal h2 { font-size: 24px; font-weight: 800; }
.modal-lede { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }

/* The card's own children are spaced by the flex gaps below rather than by
   margins, so the 24px rhythm the design uses survives the state swap. */
#waitlist-form-state,
#waitlist-success-state { display: flex; flex-direction: column; gap: 24px; }
#waitlist-form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.field input {
  width: 100%; padding: 12px 16px; min-height: 44px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 14px; color: var(--ink);
}
.field input::placeholder { color: var(--muted); }
.field input:focus-visible { border-color: var(--primary); }

.modal .btn-submit {
  width: 100%; min-height: 48px; padding: 14px 24px; border-radius: 24px;
  background: var(--primary); color: var(--white);
  font-size: 16px; font-weight: 700;
}
.modal .btn-submit[disabled] { opacity: .6; cursor: progress; }

.form-status { margin: 0; font-size: 13px; font-weight: 700; min-height: 18px; color: var(--primary); }
.form-status.error { color: #db2777; }
.privacy-note { margin: 0; font-size: 11px; line-height: 1.4; text-align: center; color: var(--muted); }

/* Real people never fill this; Web3Forms drops anything that does. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success-body { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 12px; text-align: center; }
.success-check {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 32px;
  background: var(--teal-soft); border: 1px solid var(--teal-line);
}
.success-body p { margin: 0; font-size: 14px; line-height: 1.6; }
.success-body .next { color: var(--primary); font-weight: 600; }
.modal-foot { border-top: 1px solid var(--line); padding-top: 12px; text-align: center; }
.back-home {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--primary);
}

/* ---------- 980 and below ----------
   No phone or tablet frame was supplied — 1440 is the only width drawn, so every
   rule below this line is the development team's and not the designer's. */
@media (max-width: 980px) {
  :root { --gutter: 40px; }

  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--white); border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; }
  .nav { position: sticky; }
  .nav-inner { position: relative; }

  .hero { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 32px 64px; }
  .hero-copy { display: contents; }
  .hero-text { order: 1; }
  .hero-art { order: 2; width: 100%; }
  .hero-actions { order: 3; }
  .safety-badge { order: 4; }
  .hero h1 { font-size: 40px; }

  .offerings-grid { grid-template-columns: repeat(2, 1fr); }
  .offerings .container,
  .how .container { padding-block: 64px; }

  .steps { flex-wrap: wrap; justify-content: center; gap: 40px 24px; }
  .step { width: calc(50% - 12px); }
  .step-link { display: none; }

  .trust-banner { flex-direction: column; align-items: flex-start; }
  .trust-checks { gap: 12px 24px; }

  .testimonials .container { padding-block: 72px; }
  .testimonial-grid { grid-template-columns: 1fr; }

  .cta-card { flex-direction: column; text-align: center; padding: 40px 32px; }
  .cta-copy { width: 100%; }
  .cta-form { width: 100%; max-width: 420px; }

  .site-footer .inner { flex-direction: column; }
  /* Touch context from here down, so the footer links earn a full target. */
  .footer-links a { padding: 12px 8px; }
}

/* ---------- 640 and below ----------
   Figma node 327:2827 `mybuddy-mobile`, drawn at 390. Unlike the 980 step above,
   these values are the designer's. Where this frame and the 1440 one disagree —
   the lockup, the nav CTA wording, the hero order, the step connector, the CTA
   form, the footer — both are built and the breakpoint chooses. */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  /* nav · 327:2828 */
  .nav-inner { padding-block: 16px; gap: 12px; }
  .brand-full { display: none; }
  .brand-compact { display: flex; }
  .label-wide { display: none; }
  .label-narrow { display: inline; }
  /* The frame puts the CTA before the burger; source order is the other way so the
     menu button follows the nav it controls for a screen reader. */
  .brand { order: 0; min-height: 44px; }
  .nav-cta { order: 1; font-size: 13px; padding: 10px 16px; border-radius: 16px; min-height: 44px; }
  .nav-toggle { order: 2; }
  .nav-links { order: 3; }

  /* hero · 327:2839 */
  .hero { gap: 24px; padding-block: 32px 48px; }
  .hero-text { gap: 16px; }
  .hero h1 { font-size: 36px; line-height: 1.2; }
  .hero-lede { font-size: 15px; }
  .hero-art {
    width: 100%; height: 242px;
    display: grid; place-items: center;
    border-radius: 24px; overflow: hidden;
  }
  .hero-art img {
    width: 302px; height: 278px; max-width: none;
    aspect-ratio: auto; object-fit: cover; border-radius: 0;
  }
  .hero-actions { flex-direction: column; gap: 12px; width: 100%; }
  .hero-actions .btn { width: 100%; font-size: 15px; padding: 14px 24px; }
  .safety-badge { font-size: 13px; align-items: flex-start; }

  /* offerings · 327:2858 */
  .offerings .container { padding-block: 48px; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: 24px; line-height: 1.3; }
  .offerings-grid { grid-template-columns: 1fr; gap: 16px; }
  .offering { padding: 20px; border-radius: 16px; gap: 12px; }
  .icon-well { width: 40px; height: 40px; border-radius: 10px; }
  .icon-well img { width: 20px; height: 20px; }
  .offering h3 { font-size: 16px; }
  .offering p { font-size: 13px; }

  /* how it works · 327:2897 — the row becomes a stack joined by chevrons */
  .how .container { padding-block: 48px; }
  .how h2 { font-size: 24px; margin-bottom: 32px; }
  .steps { flex-direction: column; gap: 24px; }
  .step { width: 100%; gap: 12px; }
  .step-icon { width: 64px; height: 64px; border-radius: 32px; }
  .step-icon > img { width: 26px; height: 26px; }
  .step-link { display: inline-flex; flex: none; width: 100%; }
  .step-arrow { display: none; }
  .step-chevron { display: block; }
  .step h3 { font-size: 16px; }
  .step p { margin-top: 4px; font-size: 13px; }

  /* trust banner · 327:2945 — shield over centred text, then a stacked list */
  .trust .container { padding-block: 12px; }
  .trust-banner { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
  .trust-left { flex-direction: column; gap: 12px; }
  .trust-shield { width: 40px; height: 40px; border-radius: 20px; }
  .trust-left p { font-size: 16px; line-height: 1.3; text-align: center; }
  .trust-checks { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trust-checks li { font-size: 13px; }

  /* testimonials · 327:2969 */
  .testimonials .container { padding-block: 48px; }
  .testimonials h2 { font-size: 22px; line-height: 1.3; margin-bottom: 32px; }
  .testimonial-grid { gap: 16px; }
  .testimonial { padding: 24px; border-radius: 20px; gap: 16px; }
  .testimonial .mark { font-size: 32px; }
  .testimonial blockquote { font-size: 14px; line-height: 1.5; }
  .testimonial figcaption img { width: 36px; height: 36px; border-radius: 18px; }
  .testimonial .who { font-size: 13px; }
  .testimonial .role { font-size: 11px; }

  /* closing CTA · 327:2996 — the inline email field is not drawn at this width,
     so the button alone opens the modal, which it already did */
  .cta .container { padding-block: 12px 48px; }
  .cta-card { flex-direction: column; gap: 24px; padding: 24px; border-radius: 24px; }
  .cta-mascot { width: 160px; }
  .cta-copy { width: 100%; }
  .cta-copy h2 { font-size: 24px; }
  .cta-copy p { font-size: 14px; }
  .cta-form { width: 100%; }
  .cta-form input { display: none; }
  .cta-form .btn { font-size: 14px; padding: 12px 24px; border-radius: 24px; }

  /* footer · 327:3008 */
  .site-footer .container { padding-block: 32px; }
  .site-footer .inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .site-footer .brand { min-height: 44px; }
  .footer-legal {
    display: block; margin: 0;
    font-size: 12px; line-height: 1.6; color: var(--muted);
  }
  .footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .footer-links { gap: 4px; flex-wrap: wrap; }
  .footer-links a { font-size: 12px; padding: 14px 8px; }
  .wide-only { display: none; }
  .social { gap: 8px; }
  /* Drawn as a 28px chip. Kept visually 28px but padded out to a 44px target —
     background-clip keeps the paint on the content box. */
  .social a {
    width: 44px; height: 44px; padding: 8px;
    border-radius: 22px; background-clip: content-box;
  }
  .social img { width: 14px; height: 14px; }

  /* waitlist card · 332:7364 / 332:7407 — still a card with air around it at this
     width, not the full-bleed sheet the previous breakpoint used */
  .modal { padding: 20px; }
  .modal-card { padding: 24px; gap: 20px; }
  .modal-head { padding-bottom: 16px; }
  #waitlist-form-state,
  #waitlist-success-state { gap: 20px; }
  #waitlist-form { gap: 14px; }
  .field input { min-height: 44px; }
}