/*
 * viequesworx.com — the splash page.
 *
 * Hand-written CSS, no framework, no build step. The page is one document and
 * about 20 KB of styles; a utility framework would ship more than that in class
 * names alone, and the whole point of this page is that it loads instantly on a
 * phone signal.
 *
 * The palette is the app's, and the roles mean the same thing here as they do
 * in the app: amber is the worker path, coral is the employer path and the
 * primary call to action, teal is the product. Using either accent
 * decoratively is what makes the other stop meaning anything.
 */

/* ── Fonts ────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400-700-3c9511.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400-700-e2e017.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: 'Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('/fonts/syne-700-800-48dc66.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('/fonts/syne-700-800-d542d4.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;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  --teal: #0E6B72;
  --teal-deep: #07545B;
  --amber: #F59E0B;
  --coral: #FF5A5F;
  --coral-press: #F04A50;
  --cream: #FAFAF8;
  --white: #FFFFFF;
  --navy: #1A1A2E;
  --muted: #667085;
  --mint: #DFF4F1;
  --soft-amber: #FFF3D6;
  --soft-coral: #FFE4E3;
  --line: #E5E7EB;

  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Syne', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  --wrap: 1140px;
  --radius: 20px;
  --radius-sm: 14px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

/*
 * ── Syne at 700, never 800, and no negative tracking ────────────────────────
 *
 * Syne 800 is its heaviest weight and its letterforms are already wide and
 * tightly fitted. Adding -0.02em on top closed the counters — the holes in
 * a/e/o/p — until a word like "profile" read as one solid block rather than
 * six letters. It was legible at 34px on a laptop and squashed on a phone,
 * which is the whole audience.
 *
 * 700 with normal tracking keeps every bit of the face's character and opens
 * it back up. Compared side by side before changing it; the difference is not
 * subtle.
 */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0; }

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }

/* The focus ring is the only navigation a keyboard user has. Never removed,
   and dark enough to be visible on cream, white, mint and teal alike. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-teal :focus-visible, .sec-teal :focus-visible { outline-color: var(--white); }

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

/* 16px of gutter is the spec's floor; 20 reads better and still leaves 335px of
   content at 375px. */
@media (max-width: 400px) { .wrap { padding: 0 16px; } }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 248, 0.92);
  /* No glassmorphism — a plain blur behind a solid-ish colour, which keeps the
     header legible over a teal section without becoming a decoration. */
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0; }

.hdr-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hdr-nav a.navlink {
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.hdr-nav a.navlink:hover { background: var(--mint); color: var(--teal-deep); }

.lang { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; }
.lang a, .lang span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.lang [aria-current='true'] { background: var(--navy); color: var(--white); }
.lang a:not([aria-current]) { color: var(--muted); }
.lang a:not([aria-current]):hover { color: var(--navy); }
.lang-sep { color: var(--line); padding: 0 2px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.btn:active { transform: translateY(1px); }
/* A call to action that wraps onto two lines doubles the header's height and
   pushes the page down. Spanish labels are longer than English ones, which is
   where this first showed up. */
.btn { white-space: nowrap; }

.btn-teal { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--white); }

.btn-amber { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.btn-amber:hover { background: #E08E05; border-color: #E08E05; color: var(--navy); }

.btn-coral { background: var(--coral); color: var(--white); border-color: var(--coral); }
.btn-coral:hover { background: var(--coral-press); border-color: var(--coral-press); color: var(--white); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }

/* `btn-sm` is smaller in PADDING, never in TARGET: 48px is the floor for every
   button on this page, including the one in the header. */
.btn-sm { padding: 0 18px; font-size: 0.95rem; }

.btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ── Store badges ─────────────────────────────────────────────────────────── */

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  /* Apple's and Google's own artwork, at their own proportions. The badge is
     never rebuilt as a text button — both stores' guidelines forbid it and a
     fake badge reads as a scam on a page asking for a download. */
  line-height: 0;
}
.store-badge img { height: 54px; width: auto; }
.store-badge:focus-visible { outline-offset: 4px; }

/*
 * De-emphasis, not removal.
 *
 * On an iPhone the Play badge stays on the page at reduced weight and vice
 * versa. Hiding the other store entirely is how a household with one of each
 * ends up believing the app is iPhone-only.
 */
.store-badge.dim { opacity: 0.55; }
.store-badge.dim:hover, .store-badge.dim:focus-visible { opacity: 1; }

.stores-note { margin-top: 14px; color: var(--muted); font-size: 0.92rem; font-weight: 500; }

/* Until a listing exists. See content.mjs — a store button that 404s is worse
   than one that says it is not ready. */
.store-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 20px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

/*
 * Vertical rhythm. The floor was 56px, which meant 112px of empty page between
 * every pair of sections on a phone — generous on a desktop and a lot of
 * thumb-work on a 375px screen where nothing is side by side.
 */
section { padding: clamp(40px, 8vw, 104px) 0; }
/* The header is sticky and 68px tall, so an anchor jump would land with the
   heading underneath it. */
section[id], [id] { scroll-margin-top: 90px; }
.sec-cream { background: var(--cream); }
.sec-white { background: var(--white); }
.sec-teal { background: var(--teal); color: var(--white); }
.sec-teal h2 { color: var(--white); }
.sec-teal a { color: var(--white); }

.eyebrow {
  display: inline-block;
  /* The card is a flex column, and a flex item stretches to the cross axis by
     default — which made `inline-block` a full-width bar rather than a pill.
     `align-self` is inert everywhere else it is used. */
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.eyebrow-amber { background: var(--soft-amber); color: #8A5300; }
.eyebrow-coral { background: var(--soft-coral); color: #A3242B; }
.eyebrow-teal { background: var(--mint); color: var(--teal-deep); }

.lede { margin-top: 18px; max-width: 60ch; color: var(--muted); font-size: 1.05rem; }
.sec-teal .lede { color: rgba(255, 255, 255, 0.88); }

.sec-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 52px); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { padding-top: clamp(40px, 6vw, 72px); overflow: hidden; }
.hero-in { display: grid; gap: clamp(36px, 6vw, 56px); align-items: center; }

.hero-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 6.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.hero-promise {
  margin-top: 14px;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 700;
  color: var(--teal);
}
.hero-body { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: 1.05rem; }
.hero-cta { margin-top: 30px; }

/* The phone. A soft mint disc behind it so the screenshot has somewhere to
   sit — not a 3-D scene, not a hand. */
.hero-shot { position: relative; justify-self: center; max-width: 330px; }
.hero-shot::before {
  content: '';
  position: absolute;
  inset: -8% -14% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mint), rgba(223, 244, 241, 0));
  z-index: 0;
}
.hero-shot img { position: relative; z-index: 1; border-radius: 34px; }

/*
 * A second screen peeking out from behind, suggesting depth. Hidden on a
 * phone, where it would only crowd the one that matters.
 *
 * The selector has to out-specify `.hero-shot img` above, which sets
 * `position: relative` — with a bare `.hero-behind` this element stayed in
 * normal flow and stacked UNDER the hero instead of behind it, doubling the
 * height of the section.
 */
.hero-shot img.hero-behind {
  display: none;
  position: absolute;
  top: 12%;
  right: -20%;
  width: 56%;
  z-index: 0;
  opacity: 0.5;
  transform: rotate(6deg);
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(26, 26, 46, 0.12);
}

@media (min-width: 900px) {
  .hero-in { grid-template-columns: 45fr 55fr; }
  .hero-shot { max-width: 340px; justify-self: end; margin-right: 9%; }
  .hero-shot img.hero-behind { display: block; }
}

/* ── Audience cards ───────────────────────────────────────────────────────── */

.cards { display: grid; gap: 22px; }
@media (min-width: 860px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Hover only where there is a pointer: on a touch screen it fires on tap and
   reads as lag. */
@media (hover: hover) and (min-width: 860px) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(26, 26, 46, 0.08); }
}

/* The role is carried by a top rule AND by the eyebrow's words, never by
   colour alone. */
.card-worker { border-top: 4px solid var(--amber); }
.card-employer { border-top: 4px solid var(--coral); }

.card p { margin-top: 14px; color: var(--muted); }
.card ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.card li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-weight: 500; }
.card li svg { margin-top: 3px; }
.card-worker li svg { color: var(--amber); }
.card-employer li svg { color: var(--coral); }
.card .btn { margin-top: 28px; align-self: flex-start; }

@media (max-width: 520px) { .card .btn { align-self: stretch; } }

/* ── How it works ─────────────────────────────────────────────────────────── */

.steps { display: grid; gap: 26px; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 34px; } }

.step { position: relative; }
.step-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: var(--mint);
  color: var(--teal);
}
.step-n {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.step p { margin-top: 10px; color: var(--muted); }

/* ── App preview ──────────────────────────────────────────────────────────── */

/*
 * ── A swipe gallery on a phone, three columns on a desktop ──────────────────
 *
 * Stacked vertically these three screenshots were 2,459px — nearly a third of
 * the whole page, and all of it the same idea repeated. Scroll-snap turns that
 * into one screen you swipe, which is also how somebody looks at three phone
 * screens in real life.
 *
 * Negative margins let the strip bleed to the edges while the page keeps its
 * gutter, so the next card peeks in and the row reads as scrollable without a
 * row of dots to explain it.
 */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 74vw);
  gap: 18px;
  margin: 0 -20px;
  padding: 4px 20px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shot { scroll-snap-align: center; }

@media (min-width: 860px) {
  .shots {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin: 0;
    padding: 0;
    overflow: visible;
    align-items: start;
    justify-items: center;
  }
}

.shot { max-width: 290px; text-align: center; }
.shot-frame {
  position: relative;
  padding: 9px;
  background: var(--navy);
  border-radius: 38px;
  box-shadow: 0 18px 44px rgba(26, 26, 46, 0.14);
}
.shot-frame img { border-radius: 30px; }
/* The speaker slot. Two pixels of detail that make a screenshot read as a
   phone rather than as a floating rectangle. */
.shot-frame::before {
  content: '';
  position: absolute;
  top: 18px; left: 50%;
  width: 62px; height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 2;
}
.shot-label { margin-top: 18px; font-weight: 700; }

/*
 * The middle screen sits slightly proud on desktop — asymmetry, used once.
 *
 * MARGIN, not transform: `.reveal.in` sets `transform: none` when a section
 * scrolls into view, which silently cancelled a transform here and left the
 * three screens dead level.
 */
@media (min-width: 860px) {
  .shot:nth-child(2) { margin-top: -22px; }
}

/* ── Trust points ─────────────────────────────────────────────────────────── */

.trust { display: grid; gap: 18px; margin-top: clamp(32px, 5vw, 48px); }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .trust { grid-template-columns: repeat(4, 1fr); } }

.trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}
.trust { list-style: none; padding: 0; margin-top: clamp(32px, 5vw, 48px); }
.trust svg { flex: none; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 12px; max-width: 800px; }

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .answer { padding: 0 22px 22px; color: var(--muted); }
.faq details[open] { border-color: var(--teal); }

/* ── Closing ──────────────────────────────────────────────────────────────── */

.closing { text-align: center; }
.closing .lede { margin-left: auto; margin-right: auto; }
.closing .stores { justify-content: center; margin-top: 32px; }
.closing .stores-note { text-align: center; }
.signoff {
  margin-top: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  letter-spacing: 0;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.ftr { padding: 56px 0 40px; background: var(--white); border-top: 1px solid var(--line); }
.ftr-in { display: grid; gap: 32px; }
@media (min-width: 760px) { .ftr-in { grid-template-columns: 1fr auto; align-items: start; } }

.ftr-tagline { margin-top: 12px; color: var(--muted); }
.ftr-links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.ftr-links a { color: var(--navy); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.ftr-links a:hover { color: var(--teal); text-decoration: underline; }
.ftr-stores { display: flex; gap: 10px; margin-top: 20px; }
.ftr-stores .store-badge img { height: 42px; }
.ftr-bottom {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Sticky mobile CTA ────────────────────────────────────────────────────── */

/*
 * A single action, pinned, on phones only.
 *
 * It appears once the hero has scrolled past — before that it would sit on top
 * of the store badges it duplicates. The class is toggled by a tiny
 * IntersectionObserver in the page; with JavaScript off it simply never
 * appears, and the page loses nothing it needs.
 */
.sticky-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: none;
  transform: translateY(140%);
  transition: transform 0.25s ease;
}
.sticky-cta .btn { width: 100%; box-shadow: 0 10px 30px rgba(26, 26, 46, 0.18); }
.sticky-cta.on { transform: translateY(0); }

@media (max-width: 859px) {
  .sticky-cta { display: block; }
  /* Room for the pinned button, or it covers the last line of the footer. */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Belt and braces: if the observer never runs, an element that started at
     opacity 0 would stay invisible. */
  .reveal { opacity: 1; transform: none; }
  .btn:active { transform: none; }
}

/* ── The header menu ──────────────────────────────────────────────────────── */

/*
 * Two copies of the same three links: one inline, one inside a <details>.
 * Only ever one is displayed, and the hidden one is `display: none` so it is
 * out of the accessibility tree too — a duplicate set of links that a screen
 * reader still reads is worse than no menu at all.
 */
.menu { position: relative; }
.menu summary {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--mint); }
.menu-bars { display: grid; gap: 4px; }
.menu-bars i { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--navy); }

.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(26, 26, 46, 0.12);
}
.menu-panel .navlink { display: block; }

.menu-links { display: none; }
.menu { display: block; }

@media (min-width: 900px) {
  .menu-links { display: flex; align-items: center; gap: 4px; }
  .menu { display: none; }
}

/*
 * Below the desktop layout the header has four things and room for three, so
 * the wordmark goes first — the icon alone is still the brand, and the page
 * title says the name two lines later. The language control never goes: the
 * plan asks for EN/ES at the top of the page at every width.
 */
@media (max-width: 560px) {
  .hdr-in { gap: 10px; min-height: 62px; }
  .brand span { display: none; }
  .lang a, .lang span { min-width: 36px; padding: 0 5px; }
  .btn-sm { padding: 0 15px; font-size: 0.9rem; }
}