/* Amanets careers & referrals, in the home page's look: night backdrop with the starfield and
   grain, frosted cards, rose/peach light, Space Grotesk, the eclipse mark. Rose is for action
   and for the one full-bleed partner band the CEO asked to be the biggest thing after the video. */
:root {
  --bg: #141118;
  --bg-deep: #0d0b10;
  --ink: #f4eef2;
  --ink-soft: #b6aab4;
  --ink-faint: #8f8592;
  --rose: #ef8296;
  --rose-hot: #ff9aa8;
  --rose-deep: #d4607e;
  --peach: #ffd2a8;
  --on-rose: #2a1119;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --card: rgba(255, 255, 255, .045);
  --card-hi: rgba(255, 255, 255, .07);
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1180px;
  --radius: 12px;
  --ease: cubic-bezier(.22, .68, .24, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  color-scheme: dark;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg-deep); color: var(--ink);
  font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body:has(dialog[open]) { overflow: hidden; }
::selection { background: rgba(239, 130, 150, .35); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; background: var(--rose); color: var(--on-rose); border-radius: var(--radius); }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ── Backdrop: the home page's night sky ─────────────────
   Painted as a fixed layer rather than `background-attachment: fixed`, which stutters on iOS
   Safari while the address bar collapses. The canvas is drawn by starfield.js. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(239, 130, 150, .10), transparent 60%),
    radial-gradient(90% 70% at 50% 108%, rgba(120, 60, 90, .22), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 1%); } }
.bar, main, .foot { position: relative; z-index: 3; }

/* ── Header ────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter); padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(20, 17, 24, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 0 12px rgba(239, 130, 150, .5)); }
.logo-mark svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .logo-mark svg { animation: spin 22s linear infinite; } }
.logo-type { font-weight: 700; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; }
.logo-type i { color: var(--rose); font-style: normal; }
.bar-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lang-switch button {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 11px;
  border: 0; border-radius: 11px; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  transition: background-color .16s ease, color .16s ease, transform .16s var(--ease-out);
}
.lang-switch button:active { transform: scale(.96); }
.lang-switch button[aria-pressed="true"] { background: var(--card-hi); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.flag { width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); flex: none; }

/* ── Buttons: the home page's rose button, plus a frosted secondary ── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius);
  font: 700 15px/1.1 var(--font); letter-spacing: .04em; text-decoration: none; text-align: center;
  transition: transform .16s var(--ease-out), box-shadow .22s var(--ease), filter .22s var(--ease), background-color .2s ease, border-color .2s ease;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .7; cursor: progress; }
.btn[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-red {
  background: linear-gradient(135deg, var(--rose-hot), var(--rose-deep)); color: var(--on-rose);
  box-shadow: 0 8px 26px rgba(239, 130, 150, .3);
}
.btn-red::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
}
.btn-ink, .btn-line, .btn-line-light {
  background: var(--card); border-color: var(--line-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn-red:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(239, 130, 150, .42); filter: brightness(1.05); }
  .btn-red:hover::before { transform: translateX(120%); transition: transform .75s var(--ease); }
  .btn-ink:hover, .btn-line:hover, .btn-line-light:hover { border-color: rgba(239, 130, 150, .5); background: var(--card-hi); }
}
.linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--peach); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* The home page's status pill — used for small labels above content. */
.pill {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
@media (prefers-reduced-motion: no-preference) { .pill .dot { animation: ping 2.2s var(--ease) infinite; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(239, 130, 150, .55); } 70% { box-shadow: 0 0 0 9px rgba(239, 130, 150, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 130, 150, 0); } }

/* ── Hero ──────────────────────────────────────────────── */
/* The video is what the CEO asked for first, so it is the largest thing on the screen; the
   headline sits above it on two full-width lines, the pitch and the two doors beside it. */
.hero {
  display: grid; gap: 22px; max-width: var(--max); margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(40px, 7vw, 88px);
  grid-template-areas: "copy" "video" "side";
}
.hero-copy { grid-area: copy; display: grid; gap: 14px; }
.hero h1 {
  font-size: clamp(2rem, 5.6vw, 4.6rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 0 26px rgba(255, 170, 180, .28);
}
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--peach); }
.hero-side { grid-area: side; display: grid; gap: 18px; align-content: end; }
.hero-lede { max-width: 30em; font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-soft); }
.invite { padding: 12px 14px; border: 1px solid rgba(239, 130, 150, .35); border-radius: var(--radius); background: rgba(239, 130, 150, .08); font-size: 15px; }
.video { grid-area: video; margin: 0; display: grid; gap: 12px; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px;
  background: radial-gradient(120% 120% at 32% 78%, #241d27 0%, #191420 42%, #120f16 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 205, 190, .32), 0 0 34px 2px rgba(255, 150, 165, .22), inset 0 0 40px rgba(255, 150, 165, .08);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.video-frame video { object-fit: contain; background: #090909; }
.video-frame[data-state="loading"] video { opacity: 0; }
.video-frame[data-state="ready"] .video-loading { display: none; }
.video-frame[data-state="error"] video { display: none; }
.video-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; background: #090909; color: #bdbdbd; text-align: center; }
.video-loading p { max-width: 30em; font-size: 14px; }
.video-spinner { width: 32px; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.2); border-top-color: #ed1c24; border-radius: 50%; animation: video-spin .8s linear infinite; }
@keyframes video-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .video-spinner { animation: none; } }
.video-empty, .video-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 20px; text-align: center; }
.video-empty { background: #090909; color: #bdbdbd; }
.video-empty .video-spinner { border-color: rgba(255,255,255,.2); border-top-color: #ed1c24; }
/* A small copy of the home page's eclipse, built from round gradients so its glow never shows
   a box: soft corona that breathes, a crisp rim, a flare that orbits, the dark disc on top. */
.orb { position: relative; width: clamp(76px, 13vw, 120px); aspect-ratio: 1; }
.orb > * { position: absolute; border-radius: 50%; }
.orb-corona { inset: -30%; background: radial-gradient(circle, transparent 40%, rgba(255, 154, 168, .42) 52%, rgba(180, 80, 110, .2) 62%, transparent 76%); filter: blur(12px); }
.orb-ring { inset: 0; box-shadow: 0 0 0 1.5px rgba(255, 205, 190, .6), 0 0 22px 2px rgba(255, 150, 165, .45), inset 0 0 26px rgba(255, 150, 165, .12); }
.orb-orbit { inset: 0; }
.orb-orbit i { position: absolute; top: -9%; left: 60%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--peach) 26%, rgba(255, 140, 160, .55) 55%, transparent 72%); filter: blur(5px); }
.orb-disc { inset: 0; background: radial-gradient(120% 120% at 32% 78%, #241d27 0%, #191420 42%, #120f16 100%); box-shadow: inset 0 -12px 30px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: no-preference) {
  .orb-corona { animation: breathe 7s ease-in-out infinite; }
  .orb-orbit { animation: spin 16s linear infinite; }
}
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.video-empty p { max-width: 30em; font-size: 15px; color: var(--ink-soft); }
.video-play { border: 0; background: transparent; color: var(--ink); }
.video-play .orb { opacity: .45; }
.video-play-icon {
  position: absolute; width: 74px; height: 74px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-hot), var(--rose-deep)); box-shadow: 0 10px 30px rgba(239, 130, 150, .45);
  transition: transform .16s var(--ease-out);
}
.video-play:active .video-play-icon { transform: scale(.94); }
.video-play-icon::after { content: ""; position: absolute; left: 30px; top: 23px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--on-rose); }
.hero-actions { display: grid; gap: 10px; }
@media (min-width: 560px) and (max-width: 899px) { .hero-actions { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.75fr) minmax(250px, 1fr); grid-template-areas: "copy copy" "video side"; column-gap: clamp(28px, 4vw, 56px); row-gap: 28px; }
  .hero-copy { margin-bottom: 6px; }
}

/* The page's one orchestrated moment, borrowed from the home page's title: the headline blurs
   up into place, then the eclipse rises in the video frame and keeps breathing. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  .video-empty .orb { opacity: 0; transform: scale(.85); }
  .ready .hero h1 span { opacity: 1; transform: none; filter: none; transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
  .ready .hero h1 span + span { transition-delay: .14s; }
  .ready .video-empty .orb { opacity: 1; transform: none; transition: opacity .9s var(--ease) .4s, transform 1.1s var(--ease) .4s; }
}

/* ── Scroll reveal (set up by referral.js) ──────────────
   Blocks rise 22px and fade in once as they enter the screen; "stagger" blocks cascade their
   children 70ms apart (capped at 8). Opacity and transform only, so it stays smooth on cheap
   phones. Nothing is hidden until the script has run (.reveal-ready), and reduced motion skips it. */
.reveal-ready [data-reveal]:not([data-reveal="stagger"]),
.reveal-ready [data-reveal="stagger"] > * {
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-ready [data-reveal]:not([data-reveal="stagger"]):not(.in),
.reveal-ready [data-reveal="stagger"]:not(.in) > * { opacity: 0; transform: translateY(22px); }

/* ── Partner band: the loudest block, in the home page's rose light ── */
.partner-band { background: linear-gradient(135deg, var(--rose-hot) 0%, var(--rose) 45%, var(--rose-deep) 100%); color: var(--on-rose); }
.partner-inner { display: grid; gap: 26px; max-width: var(--max); margin: 0 auto; padding: clamp(48px, 8vw, 104px) var(--gutter); }
.partner-band h2 { font-size: clamp(2rem, 6.6vw, 4rem); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; max-width: 12em; }
.partner-body { display: grid; gap: 22px; max-width: 38em; font-size: clamp(16px, 2vw, 19px); }
.partner-body .btn { justify-self: start; background: var(--bg); color: var(--ink); border-color: transparent; box-shadow: 0 10px 28px rgba(42, 17, 25, .35); }
@media (hover: hover) and (pointer: fine) { .partner-body .btn:hover { background: #1f1a24; } }
@media (min-width: 900px) { .partner-inner { grid-template-columns: 1.15fr 1fr; align-items: end; column-gap: 64px; } .partner-band .steps { grid-column: 1 / -1; } }

.steps { counter-reset: step; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 2px 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-weight: 600; font-size: 22px; letter-spacing: .06em; color: var(--rose); font-variant-numeric: tabular-nums; }
.steps b { font-size: 17px; }
.steps span { color: var(--ink-soft); }
.steps-on-red li { border-top-color: rgba(42, 17, 25, .25); }
.steps-on-red li::before { color: var(--on-rose); }
.steps-on-red span { color: rgba(42, 17, 25, .82); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); column-gap: 28px; } }

/* ── Careers ───────────────────────────────────────────── */
.careers { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 8vw, 104px) var(--gutter); }
.careers-head { display: grid; gap: 12px; margin-bottom: 26px; }
.careers h2, .merida h2, .how h2 { font-size: clamp(1.9rem, 5.6vw, 3.2rem); }
.careers-head p { max-width: 36em; color: var(--ink-soft); }
.roles {
  margin: 0; padding: 4px 18px; list-style: none; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.roles > li { border-bottom: 1px solid var(--line); }
.roles > li:last-child { border-bottom: 0; }
.roles-empty { display: grid; justify-items: start; gap: 14px; padding: 22px 0; color: var(--ink-soft); }
.roles-retry { min-height: 44px; }
.role {
  position: relative; display: grid; gap: 6px; width: 100%; padding: 20px 60px 20px 0;
  border: 0; background: none; text-align: left; transition: transform .16s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.role:active { transform: scale(.985); }
.role:active .role-go { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
/* Placeholder rows shaped like the list, so nothing jumps when the roles arrive. */
.roles-skel { display: grid; gap: 10px; padding: 22px 0; }
.roles-skel i { display: block; height: 18px; width: 58%; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.roles-skel i + i { height: 12px; width: 22%; }
@media (prefers-reduced-motion: no-preference) { .roles-skel i { animation: pulse 1.4s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .45; } }
.role-title { font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 1.3; }
.role-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.role-desc { max-width: 52em; color: var(--ink-soft); font-size: 15px; }
.role-go { position: absolute; right: 0; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.role-go::after { content: ""; position: absolute; left: 13px; top: 15px; width: 12px; height: 12px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .role:hover .role-go { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
  .role:hover .role-title { color: var(--peach); }
}
.careers-foot { display: grid; gap: 14px; justify-items: start; margin-top: 26px; color: var(--ink-soft); }
@media (min-width: 760px) {
  .careers-foot { grid-template-columns: 1fr auto; align-items: center; }
  .roles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 4px 26px; }
  .roles > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ── Mérida ────────────────────────────────────────────── */
.merida { padding: clamp(48px, 8vw, 104px) var(--gutter); }
.merida > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.merida-head { display: grid; gap: 14px; }
.merida h2 { max-width: 15em; }
.merida-grid { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.merida-grid article {
  display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.merida-grid h3 { font-size: 1.12rem; letter-spacing: -.01em; }
.merida-grid p { color: var(--ink-soft); max-width: 34em; }
.merida-lead { background: linear-gradient(135deg, rgba(239, 130, 150, .14), rgba(255, 210, 168, .06)) !important; border-color: rgba(239, 130, 150, .28) !important; }
.merida-lead h3 { font-size: clamp(1.35rem, 3.2vw, 1.9rem); }
.merida-lead p { font-size: clamp(16px, 2vw, 18px); color: var(--ink); }
.merida-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (min-width: 760px) { .merida-grid { grid-template-columns: repeat(2, 1fr); } .merida-lead { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .merida-grid { grid-template-columns: repeat(3, 1fr); } .merida-lead { grid-column: span 3; } }

/* ── How it works, privacy, footer ─────────────────────── */
.how, .privacy { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 0; }
.how h2 { margin-bottom: 22px; }
.privacy { padding-bottom: clamp(48px, 7vw, 88px); }
.privacy h2 { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.privacy p { max-width: 44em; color: var(--ink-faint); font-size: 15px; }
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; justify-content: space-between;
  padding: 22px var(--gutter); padding-bottom: max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 13px; letter-spacing: .08em;
}
.foot .logo-type { color: var(--ink); font-size: .85rem; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Sheet (forms) ─────────────────────────────────────── */
.sheet {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  background: radial-gradient(110% 60% at 50% 0%, rgba(239, 130, 150, .10), transparent 60%), var(--bg);
  color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(8, 6, 10, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (min-width: 760px) { .sheet { left: auto; right: 0; width: min(600px, 100%); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0, 0, 0, .5); } }
/* In on the iOS drawer curve; out faster than in, so closing never feels like waiting. */
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in .4s var(--ease-drawer); }
  .sheet[open]::backdrop { animation: fade .3s ease; }
  .sheet.is-closing { animation: sheet-out .2s var(--ease-out) forwards; }
  .sheet.is-closing::backdrop { animation: fade .2s ease reverse forwards; }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes sheet-out { to { transform: translateY(24px); opacity: 0; } }
@media (min-width: 760px) {
  @keyframes sheet-in { from { transform: translateX(56px); opacity: 0; } }
  @keyframes sheet-out { to { transform: translateX(40px); opacity: 0; } }
}
@keyframes fade { from { opacity: 0; } }
.sheet-body { display: grid; gap: 18px; padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom)); }
@media (min-width: 760px) { .sheet-body { padding: 0 36px 36px; } }
.sheet-tools {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(20, 17, 24, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .sheet-tools { margin: 0 -36px; padding: 12px 36px; } }
.sheet-top { display: grid; gap: 8px; padding-top: 6px; }
.sheet-close { position: relative; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); transition: transform .16s var(--ease-out); }
.sheet-close:active { transform: scale(.94); }
.sheet-close::before, .sheet-close::after { content: ""; position: absolute; left: 13px; top: 21px; width: 17px; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
.sheet-close::after { transform: rotate(-45deg); }
.sheet-top h2 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.sheet-intro { color: var(--ink-soft); font-size: 15px; }

.form { display: grid; gap: 24px; }
.group { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.group legend { padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
@media (min-width: 560px) { .group { grid-template-columns: 1fr 1fr; column-gap: 12px; } .group legend { grid-column: 1 / -1; } .field.wide, .group > .field:has(textarea) { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 15px; font-weight: 600; }
.req { color: var(--rose); }
/* Inputs in the home page's frosted style. 16px text: iOS zooms the page into anything smaller. */
.field input:not([type="checkbox"]):not([type="file"]), .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font-size: 16px; line-height: 1.3;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field textarea { min-height: 96px; resize: vertical; }
.field select {
  appearance: none; padding-right: 40px; text-overflow: ellipsis;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23b6aab4' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.field select option, .field select optgroup { background: var(--bg); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(239, 130, 150, .6); box-shadow: 0 0 0 4px rgba(239, 130, 150, .14); background-color: var(--card-hi); }
.field [aria-invalid="true"] { border-color: var(--rose-hot) !important; }
.field-error { color: var(--rose-hot); font-size: 14px; font-weight: 600; }
.field-hint { color: var(--ink-faint); font-size: 14px; }
/* The closed picker shows just "+58"; tapping it opens the phone's own full country list. */
.phone { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.phone-code-wrap { position: relative; }
.phone-code-face {
  display: flex; align-items: center; gap: 6px; height: 100%; min-height: 52px; padding: 0 36px 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23b6aab4' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.phone-code-face small { color: var(--ink-faint); font-size: 12px; font-weight: 600; }
.field .phone-code-wrap .phone-code { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.phone-code-wrap:has(.phone-code:focus-visible) .phone-code-face { border-color: rgba(239, 130, 150, .6); box-shadow: 0 0 0 4px rgba(239, 130, 150, .14); }
.cv-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.field:has(.cv-input) label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.field:has(.cv-input:focus-visible) .btn { outline: 2px solid var(--peach); outline-offset: 3px; }
.cv-row { display: flex; gap: 12px; align-items: center; font-size: 15px; min-height: 0; }
.cv-name { overflow-wrap: anywhere; font-weight: 500; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.consent.is-invalid { border-color: var(--rose-hot); }
.consent label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--ink-soft); }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rose); }
.consent-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 -10px 36px; font-size: 14px; font-weight: 600; color: var(--peach); }
.form-foot {
  display: grid; gap: 10px; position: sticky; bottom: 0; margin: 0 calc(var(--gutter) * -1);
  padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 78%, rgba(20, 17, 24, 0));
}
@media (min-width: 760px) { .form-foot { margin: 0 -36px; padding: 14px 36px 18px; } }
.form-status { color: var(--rose-hot); font-weight: 600; font-size: 15px; }
.form-status:empty { display: none; }

/* Success: one centred column. `safe center` centres when it fits and scrolls from the top
   when it doesn't (a phone in landscape), instead of pushing the top off-screen. */
.done {
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 16px;
  min-height: 100dvh; max-width: 440px; margin: 0 auto; padding-top: max(40px, env(safe-area-inset-top)); padding-bottom: max(40px, env(safe-area-inset-bottom));
  text-align: center;
}
.done-check { width: 88px; height: 88px; margin-bottom: 8px; filter: drop-shadow(0 10px 30px rgba(239, 130, 150, .45)); }
.done-check circle { fill: url(#done-grad); }
.done-check path { fill: none; stroke: var(--on-rose); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.done h2 { font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
.done p { color: var(--ink-soft); max-width: 26em; }
.done-actions { display: grid; gap: 10px; width: 100%; margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .done-check circle { transform-origin: center; animation: badge-in .45s var(--ease-out) both; }
  .done-check path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .4s var(--ease-out) .25s forwards; }
  .done > :not(.done-check) { animation: rise .45s var(--ease-out) both; }
  .done > h2 { animation-delay: .3s; }
  .done > p { animation-delay: .36s; }
  .done > .done-actions { animation-delay: .42s; }
}
@keyframes badge-in { from { transform: scale(.6); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }

/* ── Partner dashboard ─────────────────────────────────── */
.dash { display: grid; gap: 22px; max-width: var(--max); margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(48px, 7vw, 80px); min-height: 70vh; align-content: start; }
.dash-loading { padding: 40px 0; color: var(--ink-soft); }
.dash-head { display: grid; gap: 10px; }
.dash-head h1 { font-size: clamp(2rem, 7.4vw, 3.6rem); }
.dash-head p { color: var(--ink-soft); }
.dash-save, .dash-card {
  display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dash-save { border-color: rgba(239, 130, 150, .35); background: linear-gradient(135deg, rgba(239, 130, 150, .12), rgba(255, 210, 168, .04)); }
.dash-save h2 { font-size: 1.1rem; margin-bottom: 4px; }
.dash-save p { color: var(--ink-soft); font-size: 15px; }
.dash-save .btn { justify-self: start; }
@media (min-width: 760px) { .dash-save { grid-template-columns: 1fr auto; align-items: center; } }
.dash-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.dash-card h2 { font-size: 1.25rem; }
.dash-card > p { color: var(--ink-soft); font-size: 15px; }
.dash-notice { justify-items: start; max-width: 40em; }
.dash-notice h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.dash-url { display: block; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(0, 0, 0, .2); font: 500 15px/1.4 var(--font); color: var(--peach); overflow-wrap: anywhere; }
.dash-share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-qr { display: grid; justify-items: start; gap: 10px; margin: 6px 0 0; }
/* A QR code needs a light ground to scan, so it keeps a white tile on the dark page. */
.dash-qr img { width: 220px; padding: 10px; background: #fff; border-radius: var(--radius); image-rendering: pixelated; }
.dash-people-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash-count { font-weight: 700; font-size: 2rem; line-height: 1; color: var(--rose); font-variant-numeric: tabular-nums; }
.dash-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.dash-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dash-list li > div { display: grid; gap: 2px; min-width: 0; }
.dash-list b { overflow-wrap: anywhere; }
.dash-list span { color: var(--ink-soft); font-size: 15px; }
.dash-list small { grid-column: 1 / -1; color: var(--ink-faint); font-size: 13px; }
.chip { align-self: start; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card-hi); color: var(--ink) !important; font-size: 13px !important; font-weight: 600; white-space: nowrap; }
.chip-hired, .chip-started { background: linear-gradient(135deg, var(--rose-hot), var(--rose-deep)); border-color: transparent; color: var(--on-rose) !important; }
.chip-not-selected, .chip-left-after-starting { background: transparent; color: var(--ink-faint) !important; }
.dash-empty { padding: 18px 0; color: var(--ink-soft); }
.dash-auto { color: var(--ink-faint); font-size: 13px; }

/* ── Small phones ──────────────────────────────────────── */
@media (max-width: 480px) {
  .bar-cta, .bar .logo-type { display: none; }
  .lang-switch button { padding: 0 9px; font-size: 13px; }
  .hero-actions .btn, .merida-actions .btn, .partner-body .btn, .careers-foot .btn { width: 100%; }
  .merida-actions { display: grid; }
  .roles { padding: 2px 14px; }
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }


/* Public homepage: match the approved black, white and red Amanet direction. */
:root {
  --bg: #090909;
  --bg-deep: #050505;
  --ink: #f5f5f5;
  --ink-soft: #bdbdbd;
  --ink-faint: #888;
  --rose: #d71920;
  --rose-hot: #ed1c24;
  --rose-deep: #b9151b;
  --peach: #fff;
  --on-rose: #fff;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);
  --card: #111;
  --card-hi: #191919;
}
body:not(.dash-page)::before { background: #090909; }
body:not(.dash-page) #starfield, body:not(.dash-page) .grain { display: none; }
::selection { background: rgba(215,25,32,.42); }
:focus-visible { outline-color: var(--rose-hot); }
.bar { min-height: 78px; padding-inline: max(var(--gutter), calc((100vw - 1320px) / 2)); background: #fff; color: #101010; border-bottom: 0; }
.brand { gap: 18px; color: #101010; }
.brand-logo { display: block; width: clamp(138px, 15vw, 180px); height: auto; }
.brand-tag { padding-left: 18px; border-left: 1px solid #d7d7d7; color: #111; font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.4; }
.lang-switch { background: #f5f5f5; border-color: #e7e7e7; }
.lang-switch button { color: #575757; }
.lang-switch button[aria-pressed="true"] { background: #111; color: #fff; box-shadow: none; }
.btn-red, .bar .bar-cta, .bar .btn-red { background: #d71920; border-color: #d71920; color: #fff; box-shadow: none; }
.btn-lg { min-height: 50px; padding-inline: 22px; font-size: 15px; }
.hero { background: #090909; }
.hero h1 { font-size: clamp(3rem, 4.6vw, 6rem); text-transform: none; text-shadow: none; }
.hero-eyebrow { padding: 10px 18px; border: 1px solid rgba(255,255,255,.65); border-radius: 0; background: transparent; color: #fff; font-size: 12px; letter-spacing: .16em; }
.hero-eyebrow .dot { background: #e31e25; }
.hero .video figcaption { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #ddd; }
.hero .btn-line { border-radius: 0; background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.hero .proof, .hero-side .invite { color: #bbb; }
.hero-side { align-content: start; }
.hero h1 span + span { color: #fff; }
.hero .video-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 2px; background: #151515; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .btn { min-width: 190px; }
.partner-band { background: #101010; color: var(--ink); border-block: 1px solid #252525; }
.partner-band .steps li::before, .partner-band .steps-on-red li::before { color: var(--rose-hot); }
.partner-band .steps-on-red li { border-top-color: var(--line); }
.partner-band .steps-on-red span { color: var(--ink-soft); }
.partner-body .btn { background: #d71920; border-color: #d71920; color: #fff; box-shadow: none; }
.partner-body .btn:hover { background: #b9151b; }
.roles { border-radius: 2px; background: #101010; }
.role:hover .role-title { color: #fff; }
.role:active .role-go, .role:hover .role-go { background: var(--rose); border-color: var(--rose); color: #fff; }
.merida { background: #0d0d0d; }
.merida-grid article, .merida-lead { background: #111 !important; border-color: #292929 !important; border-radius: 2px; }
.merida-lead { box-shadow: inset 3px 0 #d71920; }
.merida-actions .btn-line-light { color: #fff; border-color: var(--line-strong); }
.how { padding-top: clamp(56px, 8vw, 104px); }
.privacy p { color: #a6a6a6; }
.foot { background: #090909; border-color: #262626; }
.sheet { background: #0a0a0a; }
.sheet::backdrop { background: rgba(0,0,0,.72); }
.sheet-tools { background: rgba(10,10,10,.96); }
.group legend, .req, .form-status, .field-error, .consent-link { color: #ff555b; }
.field input:not([type="checkbox"]):not([type="file"]), .field select, .field textarea, .phone-code-face, .consent { background-color: #151515; border-color: #3b3b3b; border-radius: 2px; }
.field input:focus, .field select:focus, .field textarea:focus, .phone-code-wrap:has(.phone-code:focus-visible) .phone-code-face { border-color: #ed1c24; box-shadow: 0 0 0 3px rgba(237,28,36,.16); background-color: #171717; }
.form-foot { background: linear-gradient(to top, #0a0a0a 78%, rgba(10,10,10,0)); border-top: 1px solid #292929; }
.form-foot .btn { min-height: 50px; border-radius: 2px; background: #d71920; color: #fff; box-shadow: none; }
.form-foot .btn:hover { background: #b9151b; }
.done-check circle { fill: #d71920; }
.done-check path { stroke: #fff; }
.dash-save { border-color: #3a2223; background: #151111; }
.dash-url { color: #fff; }
.dash-count { color: #ed1c24; }
.chip-hired, .chip-started { background: #d71920; color: #fff !important; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy video" "side video"; column-gap: clamp(36px, 5vw, 72px); row-gap: 18px; }
  .hero .video { width: 100%; max-width: 720px; justify-self: end; }
  .hero .video-frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .hero .video-frame { aspect-ratio: 16 / 9; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; min-width: 0; }
  .partner-inner { padding-block: 44px; }
  .partner-band h2 { text-transform: none; letter-spacing: -.03em; }
  .merida-actions .btn, .partner-body .btn, .careers-foot .btn { min-height: 48px; }
  .form-foot .btn { min-height: 48px; }
}
body.dash-page::before { background: #090909; }
body.dash-page #starfield, body.dash-page .grain { display: none; }
.btn-red:hover { box-shadow: none; filter: brightness(1.06); }

@media (max-width: 380px) { .lang-switch button { width: 44px; padding-inline: 0; } .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 340px) { .lang-switch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ── Mérida benefits: bento layout with icon tiles ─────────
   Zig-zag 7/5, 5/7, 7/5 on desktop so no two rows share a rhythm. The lead card gets a blueprint
   grid, the dollar card is solid red, the referral card is dashed (an invitation, not a fact).
   Hover only animates the icon tile and the top rule, never the card, so it can't fight the reveal. */
.merida .merida-grid { grid-template-columns: 1fr; gap: 12px; }
.merida .merida-grid article {
  position: relative; overflow: hidden; gap: 10px; padding: 24px 22px 28px;
}
.merida .merida-grid article::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: #d71920;
  transform: scaleX(.14); transform-origin: left; transition: transform .6s var(--ease-out);
}
.merida .merida-grid article:hover::before { transform: scaleX(1); }
.merida .ico {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px;
  border: 1px solid #3a3a3a; color: #ed1c24; transition: background-color .25s, color .25s, border-color .25s;
}
.merida .ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.merida .merida-grid article:hover .ico { background: #d71920; border-color: #d71920; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .merida .ico svg { transition: transform .35s var(--ease-out); }
  .merida .merida-grid article:hover .ico svg { transform: rotate(-8deg) scale(1.1); }
}

.merida .merida-lead {
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(135deg, rgba(215,25,32,.16), rgba(17,17,17,0) 60%), #111 !important;
}
.merida .merida-lead::before { transform: scaleX(1); }
.merida .merida-lead .ico { width: 60px; height: 60px; border-color: #d71920; }
.merida .merida-lead .ico svg { width: 30px; height: 30px; }

.merida .merida-usd { background: #d71920 !important; border-color: #d71920 !important; color: #fff; }
.merida .merida-usd::before { background: #fff; transform: scaleX(.14); }
.merida .merida-usd p { color: rgba(255,255,255,.92); }
.merida .merida-usd .ico { border-color: rgba(255,255,255,.55); color: #fff; }
.merida .merida-usd:hover .ico { background: #fff; border-color: #fff; color: #d71920; }
.merida .merida-usd::after {
  content: "USD"; content: "USD" / ""; position: absolute; right: -.04em; bottom: -.22em; font-size: clamp(5.5rem, 14vw, 8.5rem);
  font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #fff; opacity: .13; pointer-events: none;
}

.merida .merida-refer { background: transparent !important; border: 1px dashed #5c5c5c !important; }

@media (min-width: 760px) {
  .merida .merida-grid { grid-template-columns: repeat(2, 1fr); }
  .merida .merida-lead, .merida .merida-refer { grid-column: 1 / -1; }
  .merida .merida-lead { min-height: 220px; align-content: end; }
}
@media (min-width: 1100px) {
  .merida .merida-grid { grid-template-columns: repeat(12, 1fr); }
  .merida .merida-lead { grid-column: span 7; min-height: 280px; padding: 32px 30px; }
  .merida .merida-usd { grid-column: span 5; }
  .merida .merida-students { grid-column: span 5; }
  .merida .merida-uni { grid-column: span 7; }
  .merida .merida-team { grid-column: span 7; }
  .merida .merida-refer { grid-column: span 5; }
  .merida .merida-usd h3 { font-size: 1.5rem; }
}

/* Footer on phones: logo on its own line, then © and the privacy link on one row, not three stacked. */
@media (max-width: 640px) {
  .foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; }
  .foot .footer-logo { grid-column: 1 / -1; }
}

/* ── Hero: video first, over the Mérida valley ─────────────
   The video is the one thing the page asks for, so it leads: top of the screen on phones, the
   large right-hand column on desktop. Its thumbnail is a real frame from the recording, and the
   red play button pulses so the eye lands on it before anything else. The player itself loads
   only on tap. Reduced motion keeps the button, drops the ripple. */
.hero-stage { position: relative; isolation: isolate; overflow: hidden; background: #090909; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 36%; }
.hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,9,9,.3) 0%, rgba(9,9,9,.74) 42%, #090909 90%);
}
.hero-stage .hero { background: transparent; max-width: 1320px; grid-template-areas: "video" "copy" "side"; gap: 20px; padding-top: 18px; padding-bottom: clamp(40px, 7vw, 88px); }
.hero-stage .hero-eyebrow { display: none; }
.hero-stage .hero h1 { font-size: clamp(2.3rem, 9.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.03em; }
.hero-stage .hero h1 span + span { color: #ff4a50; }
.hero-stage .video { gap: 10px; max-width: none; justify-self: stretch; }
.hero-stage .video-frame { border-radius: 16px; background: #0b0b0b; box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.22); }

.video-start { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #0b0b0b; color: #fff; font: inherit; cursor: pointer; }
.video-start:focus-visible { outline-offset: -5px; }
.video-poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.video-start::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(9,9,9,.55) 0%, rgba(9,9,9,0) 38%);
}
.video-cta { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding-left: 52%; } /* the thumbnail keeps the right side free for the button */
.play-btn {
  position: relative; display: grid; place-items: center; width: clamp(76px, 12vw, 108px); aspect-ratio: 1; border-radius: 50%;
  background: #d71920; box-shadow: 0 12px 38px rgba(215,25,32,.55), 0 0 0 7px rgba(215,25,32,.22);
  transition: transform .25s var(--ease-out);
}
.play-btn::after {
  content: ""; margin-left: 7%; border-style: solid; border-color: transparent transparent transparent #fff;
  border-width: clamp(13px, 2vw, 19px) 0 clamp(13px, 2vw, 19px) clamp(22px, 3.3vw, 31px);
}
.play-btn i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(237,28,36,.9); opacity: 0; pointer-events: none; }
.video-cta-label {
  padding: 9px 14px; border: 1px solid rgba(255,255,255,.3); background: rgba(9,9,9,.74);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.video-start:hover .play-btn, .video-start:focus-visible .play-btn { transform: scale(1.08); }
.video-start:hover .video-poster { transform: scale(1.03); }
@media (prefers-reduced-motion: no-preference) {
  .play-btn i { animation: play-ripple 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
  .play-btn i + i { animation-delay: 1.2s; }
  .play-btn { animation: play-nudge 2.4s ease-in-out infinite; }
  .video-start:hover .play-btn { animation: none; }
}
@media (min-width: 560px) { .video-cta-label { font-size: 13px; letter-spacing: .16em; } }
@keyframes play-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes play-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (min-width: 900px) {
  .hero-stage::after { background: linear-gradient(90deg, rgba(9,9,9,.92) 0%, rgba(9,9,9,.7) 38%, rgba(9,9,9,.16) 82%), linear-gradient(0deg, #090909 0%, rgba(9,9,9,0) 22%); }
  .hero-stage .hero {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.3fr); grid-template-areas: "copy video" "side video";
    grid-template-rows: auto auto; align-content: center; column-gap: clamp(32px, 4vw, 64px); row-gap: 22px;
    min-height: min(calc(100vh - 64px), 820px); padding-top: clamp(32px, 5vw, 64px);
  }
  .hero-stage .hero-eyebrow { display: inline-flex; }
  .hero-stage .hero-copy { align-self: end; margin: 0; }
  .hero-stage .hero-side { align-self: start; align-content: start; }
  .hero-stage .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-stage .hero-actions .btn { width: auto; min-width: 0; padding-inline: 22px; white-space: nowrap; }
  .hero-stage .hero h1 { font-size: clamp(2.5rem, 3.9vw, 4.4rem); }
  .hero-stage .hero .video { max-width: none; width: 100%; justify-self: stretch; align-self: center; }
}

/* The tagline has no room beside the language switch on phones; at 440px it was crushed and clipped. */
@media (max-width: 700px) { .brand-tag { display: none; } }

/* ── Partner band: one heading style, one content edge, and the product on show ──
   Sections used to start at three different left edges (padding sat inside the width cap in some
   and outside in others), and this heading alone was uppercase. Now every section shares the
   hero's 1180px content edge, and the band shows what a partner actually gets: a personal link
   and QR. The card is an example (labelled), hidden from assistive tech: the steps say it all. */
.hero-stage .hero { max-width: 1292px; }
.partner-band { padding-inline: var(--gutter); }
.partner-inner { padding-inline: 0; }
.careers, .how, .privacy { max-width: none; padding-inline: var(--gutter); }
.careers > *, .how > *, .privacy > * { max-width: var(--max); margin-inline: auto; }
.partner-band h2 { font-size: clamp(1.9rem, 5.6vw, 3.2rem); font-weight: 700; letter-spacing: -.03em; text-transform: none; max-width: 13em; }

.ref-card {
  display: grid; gap: 16px; width: 100%; max-width: 460px; padding: 22px;
  border: 1px solid #303030; border-radius: 16px; background: linear-gradient(160deg, #1a1a1a 0%, #111 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.ref-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.ref-card-top b { font-weight: 600; color: #fff; }
.ref-card-top em { font-style: normal; font-size: 11px; padding: 4px 9px; border: 1px dashed rgba(255,255,255,.4); color: var(--ink-soft); white-space: nowrap; }
.ref-card-main { display: flex; align-items: center; gap: 18px; }
.ref-qr { flex: none; width: 112px; height: 112px; padding: 6px; border-radius: 10px; background: #fff; image-rendering: pixelated; }
.ref-link { display: grid; gap: 6px; min-width: 0; }
.ref-host { font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.ref-code { font-size: clamp(18px, 4.6vw, 22px); font-weight: 600; letter-spacing: .02em; color: #ff4a50; }
.ref-card p { padding-top: 14px; border-top: 1px solid #2a2a2a; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

@media (min-width: 900px) {
  .partner-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "title card" "body card" "steps steps";
    align-items: center; row-gap: 22px; column-gap: clamp(32px, 5vw, 72px);
  }
  .partner-inner > h2 { grid-area: title; align-self: end; }
  .partner-inner > .partner-body { grid-area: body; align-self: start; }
  .partner-inner > .ref-card { grid-area: card; justify-self: end; }
  .partner-inner > .steps { grid-area: steps; margin-top: 18px; }
}

/* ── Scroll motion: hero out, partner band in ─────────────
   motion.js feeds two variables: --hp (hero scrolled away, 0 to 1) and --bp (band arriving).
   Parallax: the photo drifts slower than the text, the copy lifts faster than the video, and the
   hero dims as it leaves. In the band a red rule draws across, the card tilts up, a scan line
   crosses the QR once, the code types in, and each step's rule fills in turn.
   All transform and opacity. Nothing here runs for reduced motion. */
.ref-qr-wrap { position: relative; display: block; flex: none; width: 112px; height: 112px; border-radius: 10px; overflow: hidden; }
.ref-qr-wrap .ref-qr { display: block; width: 100%; height: 100%; }
.steps li { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .hero-stage::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: #090909; opacity: calc(var(--hp, 0) * .8);
  }
  .hero-photo img { transform: translate3d(0, calc(var(--hp, 0) * 5%), 0) scale(1.12); will-change: transform; }
  .hero-stage .hero-copy, .hero-stage .hero-side { transform: translate3d(0, calc(var(--hp, 0) * -64px), 0); }
  .hero-stage .video { transform: translate3d(0, calc(var(--hp, 0) * -26px), 0); }

  .partner-band { position: relative; }
  .partner-band::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, #d71920 0%, #ff4a50 60%, transparent 100%);
    transform: scaleX(var(--bp, 0)); transform-origin: left; opacity: var(--bp, 0);
  }

  .partner-inner { perspective: 1200px; }
  .reveal-ready .partner-inner > .ref-card[data-reveal]:not(.in) { transform: translateY(34px) rotateX(11deg) scale(.96); transform-origin: 50% 100%; }

  .ref-qr-wrap::after {
    content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 3px; opacity: 0; pointer-events: none;
    background: #ed1c24; box-shadow: 0 0 14px 3px rgba(237, 28, 36, .75);
  }
  .ref-card.in .ref-qr-wrap::after { animation: qr-scan 1.5s cubic-bezier(.4, 0, .2, 1) .6s 1 both; }
  .reveal-ready .ref-code { clip-path: inset(0 100% 0 0); }
  .reveal-ready .ref-card.in .ref-code { animation: code-type .9s steps(14, end) 1.3s both; }

  .reveal-ready .steps li::after {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #d71920; pointer-events: none;
    transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out) calc(.4s + var(--i, 0) * .2s);
  }
  .reveal-ready .steps.in li::after { transform: scaleX(1); }
}
@keyframes qr-scan { 0% { top: 6px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 9px); opacity: 0; } }
@keyframes code-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── Jobs: one card per role ───────────────────────────────
   The list used to sit in one shared box with equal-height rows, so a short role next to a long
   one left a hole, the last row kept a stray divider, and the vacancy count hid in grey caps.
   Each role is now its own card (same language as the benefits cards): vacancies as a chip, the
   description fills the middle, and the action sits in a footer whose arrow slides on hover. */
.roles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px;
  padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.roles > li, .roles > li:last-child, .roles > li:nth-last-child(2):nth-child(odd) {
  position: relative; overflow: hidden; border: 1px solid #2c2c2c; border-radius: 14px; background: #111;
  transition: border-color .25s;
}
.roles > li.sr-only { border: 0; background: none; border-radius: 0; }
.roles > li:not(.sr-only):not(.roles-skel)::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: #d71920; pointer-events: none;
  transform: scaleX(.12); transform-origin: left; transition: transform .6s var(--ease-out);
}
.roles > li:hover { border-color: #5a2326; }
.roles > li:hover::before { transform: scaleX(1); }
.roles > li.roles-skel { padding: 22px; }
.roles > li.roles-empty { grid-column: 1 / -1; padding: 22px; }
.role { height: 100%; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 8px; padding: 22px; }
.role-meta { align-items: center; }
.role-chip { padding: 3px 9px; border: 1px solid rgba(215, 25, 32, .65); border-radius: 999px; color: #ff6a6f; font-size: 12px; letter-spacing: .08em; }
.role-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 14px; border-top: 1px solid #262626; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.role-foot .role-go { position: relative; right: auto; top: auto; width: 38px; height: 38px; margin: 0; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .3s var(--ease-out); }
.role-foot .role-go::after { left: 11px; top: 13px; width: 10px; height: 10px; }
@media (hover: hover) and (pointer: fine) { .role:hover .role-foot .role-go { transform: translateX(4px); } }

/* ── Mérida benefits: photo mosaic, icons and boxes kept ───────
   Two cards carry real Mérida photos (the dusk skyline behind the office, the cable car behind the
   university); the other four keep the dark box. Every card keeps its icon tile. Photo cards sit
   the text at the bottom over a deep shade so it stays readable, and the icon tile gets a dark
   backing so it holds up on the picture. Desktop: office 7x2, dollars 5, university 5 on top,
   then students, team and referral in three equal boxes. */
.merida .merida-grid { grid-auto-rows: minmax(190px, auto); }
.merida .merida-grid article.has-photo { display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; }
.merida .merida-grid .merida-lead.has-photo { background: #111 !important; }
.m-photo { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; }
.m-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(9,9,9,.94) 0%, rgba(9,9,9,.62) 34%, rgba(9,9,9,.08) 78%);
}
.merida-uni .m-photo::after { background: linear-gradient(0deg, rgba(9,9,9,.96) 0%, rgba(9,9,9,.86) 44%, rgba(9,9,9,.08) 80%); }
.merida-lead .m-photo img { object-position: 50% 35%; }
.merida-uni .m-photo img { object-position: 50% 28%; }
.merida .has-photo > :not(.m-photo) { position: relative; z-index: 1; }
.merida .has-photo .ico { margin-bottom: auto; background: rgba(9,9,9,.86); border-color: #ff4a50; color: #ff4a50; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.merida .merida-grid article.has-photo::before { z-index: 2; }
.merida .has-photo p { color: #e4e4e4; }
@media (prefers-reduced-motion: no-preference) {
  .m-photo img { transition: transform 1s var(--ease-out); }
  .merida .merida-grid article.has-photo:hover .m-photo img { transform: scale(1.05); }
}

@media (min-width: 760px) {
  .merida .merida-lead { grid-column: 1 / -1; min-height: 300px; align-content: initial; }
  .merida .merida-uni { grid-column: 1 / -1; min-height: 260px; }
  .merida .merida-refer { grid-column: auto; }
}
@media (min-width: 1100px) {
  .merida .merida-lead { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 0; padding: 32px 30px; }
  .merida .merida-usd { grid-column: 8 / span 5; grid-row: 1; }
  .merida .merida-uni { grid-column: 8 / span 5; grid-row: 2; min-height: 0; }
  .merida .merida-students { grid-column: 1 / span 4; grid-row: 3; }
  .merida .merida-team { grid-column: 5 / span 4; grid-row: 3; }
  .merida .merida-refer { grid-column: 9 / span 4; grid-row: 3; }
}

/* ── How to apply: scroll story ────────────────────────────
   Left: the heading, a step counter, a progress bar and the Apply button, pinned while you read.
   Right: the three steps, large. The one crossing the middle of the screen lights up in red; the
   others stay readable (not faded to near-invisible). Without script every step shows at full
   strength, and the text is always in the page for assistive tech. On phones the side column
   dissolves into the flow: heading, steps, then the button. */
.how { position: relative; padding-block: clamp(56px, 8vw, 104px); background: #090909; }
.how > .how-bg { position: absolute; inset: 0; max-width: none; margin: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.how-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; opacity: .34; filter: saturate(.85); }
.how-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #090909 14%, rgba(9,9,9,.5) 62%, rgba(9,9,9,.7)), linear-gradient(0deg, #090909, transparent 24%, transparent 76%, #090909);
}
.how > .how-wrap { position: relative; z-index: 1; display: grid; gap: 8px; }
.how-side { display: contents; }
.how-side h2 { margin-bottom: 14px; }
.how-count, .how-prog { display: none; }
.how-cta { justify-self: start; margin-top: 22px; order: 3; }
.how-steps { order: 2; }

.how-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.how-step { display: grid; grid-template-columns: 52px 1fr; gap: 6px 18px; padding: 26px 0; border-top: 1px solid #262626; align-content: center; }
.how-n { padding-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: .18em; color: #bdbdbd; font-variant-numeric: tabular-nums; }
.how-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border: 1px solid #d71920; color: #ed1c24; }
.how-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.how-step h3 { margin-bottom: 10px; font-size: clamp(1.7rem, 7vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05; }
.how-step p { max-width: 30em; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: #d6d6d6; }

/* With script: the step in the middle band is lit, the rest sit back but stay legible (4.9:1). */
.how-js .how-step:not(.is-active) h3, .how-js .how-step:not(.is-active) p { color: #9c9c9c; }
.how-js .how-step:not(.is-active) .how-ico { border-color: #3a3a3a; color: #6d6d6d; }
.how-js .how-step.is-active h3 { color: #ff4a50; }
.how-js .how-step.is-active .how-n { color: #ff4a50; }
.how-js .how-step.is-done .how-n { color: #d71920; }
@media (prefers-reduced-motion: no-preference) {
  .how-js .how-step h3, .how-js .how-step p, .how-js .how-n, .how-js .how-ico { transition: color .4s ease, border-color .4s ease; }
  .how-js .how-step > div { transition: transform .5s var(--ease-out); }
  .how-js .how-step.is-active > div { transform: translateX(8px); }
  .how-count b { display: inline-block; animation: how-tick .35s var(--ease-out); }
}
@keyframes how-tick { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 899px) {
  .how-js .how-step { padding: 22px 0; }
}
@media (min-width: 900px) {
  .how > .how-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 80px); align-items: start; }
  .how-side { display: grid; gap: 18px; align-content: start; position: sticky; top: 112px; }
  .how-side h2 { margin-bottom: 0; max-width: 8em; }
  .how-count { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #bdbdbd; }
  .how-count b { font-size: clamp(2.4rem, 4vw, 3rem); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
  .how-prog { display: block; width: min(240px, 100%); height: 3px; background: #2c2c2c; }
  .how-prog i { display: block; height: 100%; width: 33.3%; background: #d71920; transition: width .6s var(--ease-out); }
  .how-cta { margin-top: 10px; }
  .how-step { min-height: clamp(220px, 42vh, 400px); padding: 30px 0; grid-template-columns: 64px 1fr; gap: 6px 22px; }
}

/* ── Closing call to action, privacy points, footer ────────
   The page used to end on a grey paragraph and a three-item footer. Now it finishes with a bold red
   sign-off (the hero's own headline and the two buttons), the privacy notice split into its three
   sentences with an icon each (same words, easier to scan), and a footer with the logo, tagline,
   legal link and a way back to the top. No contact details are shown because none are published. */
.closing { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 112px) var(--gutter); background: linear-gradient(135deg, #d71920 0%, #b9151b 100%); color: #fff; }
.closing::before {
  content: ""; position: absolute; right: -10%; top: -45%; width: min(640px, 70vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 0 56px rgba(255,255,255,.045), 0 0 0 112px rgba(255,255,255,.03);
}
.closing-inner { position: relative; display: grid; gap: 22px; max-width: var(--max); margin: 0 auto; }
.closing .pill { justify-self: start; border-color: rgba(255,255,255,.65); background: transparent; color: #fff; }
.closing .pill .dot { background: #fff; }
.closing h2 { max-width: 11em; font-size: clamp(2.5rem, 7.4vw, 5.6rem); font-weight: 700; line-height: .98; letter-spacing: -.04em; text-transform: none; }
.closing h2 span { display: block; }
.closing h2 span + span { color: #1a0508; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-white { background: #fff; border-color: #fff; color: #111; box-shadow: none; }
.btn-outline-white { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-white:hover { background: #f1f1f1; }
  .btn-outline-white:hover { background: rgba(255,255,255,.12); }
}
@media (max-width: 640px) { .closing-actions { display: grid; } .closing-actions .btn { width: 100%; } }

.privacy { padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px); }
.privacy h2 { margin-bottom: 26px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.privacy-grid { display: grid; gap: 12px; }
.privacy-pt { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; row-gap: 6px; align-content: start; padding: 20px; border: 1px solid #2c2c2c; border-radius: 14px; background: #111; }
.pv-ico { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #d71920; color: #ed1c24; }
.pv-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.privacy-pt b { align-self: end; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #ff6a6f; }
.privacy .privacy-pt p { max-width: none; font-size: 15px; line-height: 1.55; color: #cfcfcf; }
@media (min-width: 900px) {
  .privacy-grid { grid-template-columns: repeat(3, 1fr); }
  .privacy-pt { grid-template-columns: 1fr; }
  .pv-ico { grid-row: auto; margin-bottom: 8px; }
  .privacy-pt b { align-self: start; }
}

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 32px max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-bottom: max(32px, env(safe-area-inset-bottom)); border-top: 1px solid #262626; background: #090909; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-tag { padding-left: 16px; border-left: 1px solid #333; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #bdbdbd; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 13px; letter-spacing: .06em; color: var(--ink-faint); }
.foot-links a { color: #d6d6d6; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
  .foot { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .foot-tag { display: none; }
}

/* ── Phone readability pass (reference screen: iPhone 16 Pro Max, 440 x 956) ──
   Measured at that size: side margins 20px and line lengths of 38 to 48 characters were fine, but
   (1) card titles were 17.9px against 17px body text, (2) the "How to apply" step titles matched the
   section headings, (3) the six Mérida cards used about 1,500px because each stacks its icon above
   the title, (4) sections were 96px apart against 12px between cards, and (5) some labels were 11px.
   Desktop is unchanged. */
.partner-inner { padding-block: clamp(40px, 8vw, 104px); }
.careers, .merida { padding-block: clamp(40px, 8vw, 104px); }
.how { padding-block: clamp(44px, 8vw, 104px); }
.privacy { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.video-cta-label { font-size: 12px; }
.ref-card-top em { font-size: 12px; }

@media (max-width: 899px) {
  .how-step h3 { font-size: clamp(1.5rem, 6vw, 1.8rem); }
}
@media (max-width: 759px) {
  .merida .merida-grid h3 { font-size: 1.25rem; }
  .merida .merida-lead h3 { font-size: 1.5rem; }
  /* Plain cards: icon beside the text instead of above it. Photo cards keep the icon on top. */
  .merida .merida-grid article:not(.has-photo) {
    grid-template-columns: 46px 1fr; column-gap: 16px; row-gap: 6px; align-content: start; padding: 20px;
  }
  .merida .merida-grid article:not(.has-photo) .ico { grid-row: span 2; margin: 0; align-self: start; }
  .merida .merida-grid article:not(.has-photo) h3 { align-self: center; }
}

/* ── Partner dashboard v2 ──────────────────────────────────
   What a new partner sees right after signing up. It now matches the homepage (same header, footer, cards,
   icon tiles), opens with a welcome band and three at-a-glance numbers drawn from their own list, makes
   "save your private link" the loudest thing on the page (it is the only way back in), pins the share card
   beside the list, and shows each person's stage as a five-step bar. The empty state tells a first-time
   partner exactly what to do next. */
.dash { display: block; max-width: none; margin: 0; padding: 0; min-height: 70vh; }
.dash-inner { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.dash-loading { padding: 40px 0; color: var(--ink-soft); }

.dash-hero { position: relative; isolation: isolate; overflow: hidden; background: #090909; padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 44px); }
.dash-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dash-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; opacity: .32; filter: saturate(.85); }
.dash-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090909 12%, rgba(9,9,9,.55) 62%, rgba(9,9,9,.78)), linear-gradient(0deg, #090909, transparent 30%); }
.dash-hero .dash-inner { display: grid; gap: 28px; }
.dash-head { display: grid; gap: 14px; justify-items: start; }
.dash-head h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1; letter-spacing: -.035em; }
.dash-intro { max-width: 28em; font-size: clamp(16px, 1.8vw, 18px); color: #d6d6d6; }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid #2c2c2c; border-radius: 14px; background: rgba(17,17,17,.86); }
.stat-ico { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #3a3a3a; color: #bdbdbd; }
.stat-ico svg, .dash .pv-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stat b { font-size: clamp(2rem, 8vw, 3rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span:last-child { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.stat.hot b, .stat.hot .stat-ico { color: #ff4a50; }
.stat.hot .stat-ico { border-color: #d71920; }
@media (min-width: 900px) { .dash-hero .dash-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: end; column-gap: 56px; } }

.dash-body { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 88px); background: #090909; }
.dash-body .dash-inner { display: grid; gap: 18px; }
.dash-save, .dash-card {
  display: grid; gap: 14px; padding: clamp(18px, 3vw, 26px); border: 1px solid #2c2c2c; border-radius: 14px; background: #111;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dash-save { grid-template-columns: auto 1fr; align-items: center; border-color: #5a2326; border-left: 4px solid #d71920; background: linear-gradient(90deg, rgba(215,25,32,.14), #111 60%); }
.dash-save h2 { margin-bottom: 4px; font-size: 1.15rem; }
.dash-save p { font-size: 15px; color: #d0d0d0; }
.dash-save .btn { grid-column: 1 / -1; justify-self: start; }
.dash .pv-ico { grid-row: auto; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; border: 1px solid #d71920; color: #ed1c24; }
@media (min-width: 760px) { .dash-save { grid-template-columns: auto 1fr auto; } .dash-save .btn { grid-column: auto; } }

.dash-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } .dash-link { position: sticky; top: 100px; } }
.dash-card-top { display: flex; align-items: center; gap: 14px; }
.dash-card h2 { font-size: 1.25rem; }
.dash-card > p { font-size: 15px; color: var(--ink-soft); }
.dash-url { display: block; padding: 12px 14px; border: 1px dashed #4a4a4a; border-radius: 10px; background: rgba(0,0,0,.35); font: 500 15px/1.4 var(--font); color: #fff; overflow-wrap: anywhere; }
.dash-qr { display: grid; justify-items: start; gap: 10px; margin: 4px 0 0; }
.dash-qr img { width: 200px; height: 200px; padding: 8px; background: #fff; border-radius: 10px; image-rendering: pixelated; }
.dash-notice { justify-items: start; max-width: 40em; }
.dash-notice h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }

.dash-people-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash-count { font-size: 2rem; font-weight: 700; line-height: 1; color: #ff4a50; font-variant-numeric: tabular-nums; }
.dash-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #2c2c2c; }
.dash-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; align-items: start; padding: 16px 0; border-bottom: 1px solid #262626; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #3a3a3a; background: #171717; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.who { display: grid; gap: 2px; min-width: 0; }
.who b { font-size: 16px; overflow-wrap: anywhere; }
.who span { font-size: 15px; color: var(--ink-soft); }
.dash-list li > .stage, .dash-list li > small { grid-column: 2 / -1; }
.dash-list small { font-size: 13px; color: var(--ink-faint); }
.stage { display: flex; gap: 4px; }
.stage i { flex: 1; height: 4px; border-radius: 2px; background: #2c2c2c; }
.stage i.on { background: #d71920; }
.stage-off i { background: #202020; }
.chip { align-self: start; padding: 4px 10px; border-radius: 999px; border: 1px solid #3a3a3a; background: #171717; color: #fff !important; font-size: 13px !important; font-weight: 600; white-space: nowrap; }
.chip-hired, .chip-started { background: #d71920; border-color: #d71920; }
.chip-not-selected, .chip-left-after-starting { background: transparent; color: #8f8f8f !important; }

.dash-empty { display: grid; justify-items: start; gap: 14px; padding: 8px 0 4px; }
.dash-empty > p { max-width: 32em; color: #d0d0d0; }
.dash-hints { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: hint; }
.dash-hints li { counter-increment: hint; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 14px 0; border-top: 1px solid #262626; }
.dash-hints li::before { content: counter(hint, decimal-leading-zero); grid-row: span 2; font-weight: 600; letter-spacing: .08em; color: #ed1c24; }
.dash-hints b { font-size: 16px; }
.dash-hints span { color: var(--ink-soft); font-size: 15px; }
.dash-auto { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-faint); }
.live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d71920; }
@media (prefers-reduced-motion: no-preference) { .live { animation: ping-red 2s ease-out infinite; } }
@keyframes ping-red { 0% { box-shadow: 0 0 0 0 rgba(215,25,32,.6); } 70% { box-shadow: 0 0 0 8px rgba(215,25,32,0); } 100% { box-shadow: 0 0 0 0 rgba(215,25,32,0); } }
@media (max-width: 480px) {
  .dash-stats { gap: 8px; }
  .stat { padding: 12px; }
  .stat span:last-child { letter-spacing: .06em; }
}
body.dash-page .bar-cta { white-space: nowrap; }
@media (max-width: 560px) { body.dash-page .bar-cta { display: none; } }

/* ── Dashboard: process on the left, sharing on the right ──
   Left: the three steps as a vertical path, ending on "they get hired and you get paid". Right: the share card
   with the link, Share and Copy, direct-send tiles (WhatsApp, Telegram, SMS, Email) and the QR beside them on
   wide screens. The referral list now has its own full-width row, so nothing leaves an empty block. */
.dash-grid { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .dash-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; }
  .dash-link { position: static; }
}
.dash-how { align-content: start; gap: 22px; }
.dash-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.dash-steps li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; padding-bottom: 28px; }
.dash-steps li:last-child { padding-bottom: 0; }
.dash-steps li::before { content: ""; position: absolute; left: 22px; top: 50px; bottom: 4px; width: 2px; background: linear-gradient(#d71920, #3a3a3a); }
.dash-steps li:last-child::before { display: none; }
.dash .step-ico { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #d71920; color: #ed1c24; background: #111; z-index: 1; }
.dash .step-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dash-steps .is-last .step-ico { background: #d71920; border-color: #d71920; color: #fff; box-shadow: 0 0 0 5px rgba(215,25,32,.18); }
.dash-steps div { display: grid; gap: 2px; align-content: start; padding-top: 2px; }
.dash-steps small { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: #ff6a6f; }
.dash-steps b { font-size: 1.1rem; letter-spacing: -.01em; }
.dash-steps .is-last b { color: #ff4a50; }
.dash-steps span { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

.dash-link-grid { display: grid; gap: 22px; align-items: start; }
.dash-link-main { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1100px) { .dash-link-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; } }
.send { display: grid; gap: 10px; }
.send-title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.send-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.send-tile { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border: 1px solid #2c2c2c; border-radius: 12px; background: #151515; color: #e8e8e8; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .02em; transition: border-color .2s, background-color .2s, transform .25s var(--ease-out); }
.send-ico { display: grid; place-items: center; width: 40px; height: 40px; }
.send-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.send-wa .send-ico { color: #25d366; }
.send-tg .send-ico { color: #5bb8f0; }
.send-sms .send-ico, .send-mail .send-ico { color: #ff6a6f; }
@media (hover: hover) and (pointer: fine) { .send-tile:hover { border-color: #d71920; background: #1b1b1b; transform: translateY(-2px); } }
.send-tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.dash-qr { justify-items: start; }

.dash-people { padding-bottom: clamp(18px, 3vw, 26px); }
@media (min-width: 1100px) {
  .dash-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
.dash-empty { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 16px; padding: 6px 0; }
.dash-empty > p { margin: 0; max-width: 38em; }

/* ── Dashboard on phones: share first ──────────────────────
   On a phone the first thing a new partner should see under the welcome band is the share card with the QR.
   Order: share card, How it works, the private-link reminder, then the people list at the bottom. The grid
   wrapper dissolves so its two cards can be ordered with the others. Desktop keeps the reminder on top. */
@media (max-width: 899px) {
  .dash-body .dash-inner > .form-status { order: 0; }
  .dash-grid { display: contents; }
  .dash-link { order: 1; }
  .dash-how { order: 2; }
  .dash-save { order: 3; }
  .dash-people { order: 4; }
}

/* ── Share card: QR first, small send icons underneath ─────
   The direct-send buttons sit at the bottom of the card, beneath the QR and its download link, as small icon
   buttons (44px tap size). The app name is the hover label and stays in the page for screen readers. */
.dash-link-side { display: grid; gap: 16px; justify-items: start; align-content: start; }
.send { gap: 8px; }
.send-row { display: flex; flex-wrap: wrap; gap: 10px; }
.send-tile { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 12px; }
.send-tile > span:not(.send-ico) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.send-ico { width: 24px; height: 24px; }
.send-ico svg { width: 22px; height: 22px; }
@media (min-width: 1100px) { .dash-link-grid { align-items: center; } }

/* ── Dashboard loading: a spinner in the middle of the page ── */
.dash-loading { display: grid; place-items: center; min-height: min(60vh, 520px); padding: 0; }
.dash-spinner { width: 56px; height: 56px; border: 4px solid rgba(255,255,255,.16); border-top-color: #d71920; border-radius: 50%; animation: dash-spin .8s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dash-spinner { animation: dash-pulse 1.6s ease-in-out infinite; } }
@keyframes dash-pulse { 50% { opacity: .35; } }

/* ── About the team ────────────────────────────────────────
   A company introduction, not a roster: a featured card with the company line, then one photo card per area
   (sales, customer support, recruiting, administration, marketing) and a closing "find your place" card. All
   photos are stock images and show no named people. Desktop: feature on the left, a 3 x 2 grid on the right.
   Phone: feature on top, then two columns. */
.team { padding: clamp(40px, 8vw, 104px) var(--gutter); background: #090909; border-top: 1px solid #1c1c1c; }
.team-wrap { display: grid; gap: 26px; max-width: var(--max); margin: 0 auto; }
.team-head { display: grid; gap: 14px; justify-items: start; }
.team-head h2 { font-size: clamp(1.9rem, 5.6vw, 3.2rem); max-width: 12em; }
.team-head > p:last-child { max-width: 34em; color: var(--ink-soft); }
.team-feature, .team-card { position: relative; overflow: hidden; border: 1px solid #2c2c2c; border-radius: 14px; background: #111; isolation: isolate; }
.team-feature { min-height: 360px; display: flex; align-items: flex-end; }
.team-feature .m-photo img { object-position: 52% 40%; }
.team-cap { position: relative; z-index: 1; display: grid; gap: 10px; padding: 22px; max-width: 26em; }
.team-tag { justify-self: start; padding: 5px 9px; background: #d71920; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.team-cap p { font-size: clamp(1.15rem, 3.4vw, 1.5rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.team-card { aspect-ratio: 4 / 5; display: flex; align-items: flex-end; }
.team-area { position: relative; z-index: 1; padding: 14px; font-size: clamp(.95rem, 3.6vw, 1.05rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.team-area::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 8px; background: #d71920; }
.team-ventas .m-photo img { object-position: 30% 50%; }
.team-atencion .m-photo img { object-position: 68% 40%; }
.team-reclutamiento .m-photo img { object-position: 60% 50%; }
.team-admin .m-photo img { object-position: 45% 45%; }
.team-marketing .m-photo img { object-position: 50% 50%; }
.team-cta { flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px; padding: 16px; background: linear-gradient(135deg, #d71920, #b9151b); border-color: #d71920; }
.team-cta h3 { font-size: clamp(1.25rem, 4.8vw, 1.6rem); line-height: 1.05; letter-spacing: -.02em; }
.team-cta .btn { min-height: 44px; padding-inline: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .team-card .m-photo img, .team-feature .m-photo img { transition: transform 1s var(--ease-out); }
  .team-card:hover .m-photo img, .team-feature:hover .m-photo img { transform: scale(1.05); }
}
@media (min-width: 900px) {
  .team-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: clamp(28px, 4vw, 56px); align-items: stretch; }
  .team-head { grid-column: 1 / -1; }
  .team-feature { min-height: 0; }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* ── About the team: mission, vision and culture tiles ─────
   Each tile now carries a label (Mission, Vision, Culture), a short title and one line, over a photo that suits
   it. The text is a draft built only from facts already on the page and lives in assets/i18n.js (team.k*, team.t*,
   team.d*) so it is easy to edit. A deeper shade keeps the longer text readable. */
.team-card .m-photo::after { background: linear-gradient(0deg, rgba(9,9,9,.97) 0%, rgba(9,9,9,.88) 46%, rgba(9,9,9,.22) 100%); }
.team-card { aspect-ratio: 3 / 4; }
.team-body { position: relative; z-index: 1; display: grid; gap: 5px; padding: 14px; }
.team-kind { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff6a6f; }
.team-title { font-size: clamp(1rem, 4vw, 1.15rem); line-height: 1.1; letter-spacing: -.01em; }
.team-desc { font-size: 13.5px; line-height: 1.4; color: #d8d8d8; }
.team-mision .m-photo img { object-position: 60% 50%; }
.team-vision .m-photo img { object-position: 50% 40%; }
.team-personas .m-photo img { object-position: 68% 35%; }
.team-estudio .m-photo img { object-position: 50% 40%; }
.team-juntos .m-photo img { object-position: 35% 50%; }
@media (min-width: 900px) { .team-card { aspect-ratio: 4 / 5; } .team-body { padding: 16px; } }

/* ── Merida cards: photo, red, photo, red ──────────────────
   The six cards now alternate a photo card and a solid red card so the grid reads as a rhythm, not a pile.
   Order: office (photo), dollars (red), students (photo), team (red), university (photo), referral (red).
   Phone: one column in that order. Tablet and desktop: a checkerboard, so no two photos or two reds touch
   side to side. The red treatment is shared by .merida-red; the "USD" watermark stays on the dollar card only. */
.merida .merida-red { background: #d71920 !important; border: 1px solid #d71920 !important; border-style: solid !important; color: #fff; }
.merida .merida-red::before { background: #fff; transform: scaleX(.14); }
.merida .merida-red p { color: rgba(255,255,255,.92); }
.merida .merida-red .ico { border-color: rgba(255,255,255,.55); color: #fff; }
.merida .merida-red:hover .ico { background: #fff; border-color: #fff; color: #d71920; }
.merida-students .m-photo::after { background: linear-gradient(0deg, rgba(9,9,9,.96) 0%, rgba(9,9,9,.86) 44%, rgba(9,9,9,.08) 80%); }
.merida-students .m-photo img { object-position: 50% 38%; }
@media (min-width: 760px) {
  .merida .merida-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .merida .merida-lead, .merida .merida-uni, .merida .merida-usd, .merida .merida-students, .merida .merida-team, .merida .merida-refer { grid-column: auto; grid-row: auto; }
  .merida .merida-lead { order: 1; min-height: 300px; align-content: initial; }
  .merida .merida-usd { order: 2; }
  .merida .merida-team { order: 3; }
  .merida .merida-students { order: 4; }
  .merida .merida-uni { order: 5; min-height: 270px; }
  .merida .merida-refer { order: 6; }
}
@media (min-width: 1100px) {
  .merida .merida-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .merida .merida-lead { grid-column: 1 / span 7; grid-row: 1; padding: 32px 30px; min-height: 300px; }
  .merida .merida-usd { grid-column: 8 / span 5; grid-row: 1; }
  .merida .merida-team { grid-column: 1 / span 5; grid-row: 2; }
  .merida .merida-students { grid-column: 6 / span 7; grid-row: 2; min-height: 300px; padding: 32px 30px; }
  .merida .merida-uni { grid-column: 1 / span 7; grid-row: 3; min-height: 300px; padding: 32px 30px; }
  .merida .merida-refer { grid-column: 8 / span 5; grid-row: 3; }
  .merida .merida-red h3 { font-size: 1.5rem; }
}

/* ── About the team: logo in the red card ─────────────────
   The closing "Find your place" card carries the white Amanet logo at the top so it is not a plain red box. */
.team-cta { position: relative; }
.team-logo { align-self: flex-start; display: block; width: min(100%, 150px); height: auto; margin-bottom: auto; }

/* Referral card: faded Amanet logo as a watermark, in the same spirit as the "USD" mark on the dollar card. */
.merida .merida-refer::after, .merida .merida-team::after {
  content: ""; position: absolute; right: -12%; bottom: 6%; width: 96%; aspect-ratio: 392 / 72;
  background: url("/assets/brand/amanet-white.png") center / contain no-repeat; opacity: .13; pointer-events: none;
}

/* ── Job cards: icon header, tags, strong Apply button ─────
   Each card now opens with a role icon (picked from the title) and the openings badge, then the title, tags
   for place and schedule (read from the location text), the description, and a full-width red Apply button.
   The whole card is still one button. The icon tile and the button react to hover, nothing else moves. */
.role { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.role-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.role-ico {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid #3a3a3a; color: #ed1c24;
  transition: background-color .25s, color .25s, border-color .25s;
}
.role-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.role-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: rgba(215, 25, 32, .16); border-color: #d71920; color: #ff8a8f; font-size: 13px; font-weight: 700; }
.role-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4a50; }
@media (prefers-reduced-motion: no-preference) { .role-chip::before { animation: pulse 1.6s ease-in-out infinite; } }
.role-meta { gap: 8px; margin-bottom: 2px; text-transform: none; letter-spacing: 0; }
.role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid #353535; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #e2e2e2; }
.role-tag svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #ed1c24; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-desc { margin-bottom: 8px; }
.role .role-foot {
  margin-top: auto; padding: 0 18px; min-height: 48px; border: 0; border-radius: 10px; background: #d71920; color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .01em; transition: background-color .18s ease;
}
.role .role-foot .role-go, .role:hover .role-foot .role-go, .role:active .role-foot .role-go {
  position: relative; right: auto; top: auto; width: 18px; height: 20px; margin: 0; border: 0; border-radius: 0; background: none; color: #fff;
}
.role .role-foot .role-go::before { content: ""; position: absolute; left: 0; top: 9px; width: 17px; height: 2px; background: currentColor; }
.role .role-foot .role-go::after { left: 7px; top: 5.5px; width: 9px; height: 9px; }
.role:active .role-foot { background: #b9151b; }
@media (hover: hover) and (pointer: fine) {
  .role:hover .role-foot { background: #ed1c24; }
  .role:hover .role-ico { background: #d71920; border-color: #d71920; color: #fff; }
}

/* ── Job cards: Apply now + Share job ──────────────────────
   The footer is now two buttons side by side: a shorter red "Apply now" and an outlined "Share job" that opens
   WhatsApp with a ready-made message about the role. The share link sits beside the card button (a link cannot
   live inside a button), pinned over the footer's right end. On narrow phones it shrinks to the icon alone. */
.role .role-foot { margin-right: 152px; }
.role-share {
  position: absolute; right: 22px; bottom: 22px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 142px; min-height: 48px; border: 1px solid #3f3f3f; border-radius: 10px; background: #161616; color: #f1f1f1;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.role-share svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #25d366; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.role-share:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }
.role-share:active { background: rgba(37, 211, 102, .16); border-color: #25d366; }
@media (hover: hover) and (pointer: fine) { .role-share:hover { background: rgba(37, 211, 102, .12); border-color: #25d366; } }
@media (max-width: 400px) {
  .role .role-foot { margin-right: 58px; }
  .role-share { width: 48px; }
  .role-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Partner share card, desktop: the link, Share and Copy buttons and the "Send it directly" icons now stack on the
   left, directly under the description, and the QR takes the right column alone. Before, the left column was
   centred against the taller QR column, which left a gap above the link and the icons stranded at the bottom right. */
@media (min-width: 1100px) {
  .dash-link-grid { align-items: start; align-content: start; grid-template-rows: auto 1fr; row-gap: 18px; }
  .dash-link-side { display: contents; }
  .dash-link-main { grid-column: 1; grid-row: 1; }
  .dash-link-side .send { grid-column: 1; grid-row: 2; }
  .dash-link-side .dash-qr { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── /salesagent: Puerto Rico sales agents ─────────────────
   Same system as the home page (hero stage, alternating photo and red cards, scroll story, red closing band),
   with the island worked in: the Puerto Rico flag as a small mark, the flag's red, white and blue in thin
   accents only, the "787" area code as the watermark, and plain, confident sales language. Photos are Old San
   Juan stock images. The page has no partner band, so motion.js is not loaded here. */
.pr-flag { display: inline-block; width: 26px; height: 17px; flex: none; margin-right: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.hero-stage .sa-hero .hero-eyebrow { display: inline-flex; align-items: center; justify-self: start; }
.hero-photo img { object-position: 42% 40%; }
/* the red cards: "787" and the logo as watermarks */
.sa-why .merida-usd::after { content: "787"; content: "787" / ""; }
/* manifesto */
.sa-manifesto { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 120px) var(--gutter); background: #090909; }
.sa-manifesto::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #ed0000 0 33.34%, #fff 33.34% 66.67%, #0050f0 66.67%); }
.sa-manifesto::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(120px, 34vw, 460px); background: #0050f0; opacity: .2;
  clip-path: polygon(100% 0, 0 50%, 100% 100%); pointer-events: none;
}
.sa-manifesto-inner { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; max-width: var(--max); margin: 0 auto; }
.sa-manifesto h2 { max-width: 12em; font-size: clamp(2.2rem, 7vw, 4.8rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.sa-manifesto p { max-width: 30em; font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--ink-soft); }

/* phones: a deeper shade so the intro text holds up over the bright coast photo */
@media (max-width: 899px) { .hero-stage:has(> .sa-hero)::after { background: linear-gradient(180deg, rgba(9,9,9,.62) 0%, rgba(9,9,9,.84) 42%, #090909 92%); } }

/* Privacy notice popup: short text, so a compact bottom sheet on phones and a centred card on larger screens
   (the application form keeps the full-height drawer). */
#privacy-sheet { height: auto; max-height: 85%; inset: auto 0 0 0; border-radius: 18px 18px 0 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 760px) {
  #privacy-sheet { inset: 0; margin: auto; width: min(560px, 92vw); max-height: 80%; border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
}

/* ── /salesagent: video in the hero, and the "Are you a fit?" checklist ─
   The hero now matches the home page (video first on phones, large on the right on desktop). The checklist moved
   out of the hero into its own section: tick the four items and a congratulations card with the Apply button
   appears. It is a self-check, not an approval. */
.sa-fit-sec { padding: clamp(44px, 8vw, 104px) var(--gutter); background: #0d0d0d; border-top: 1px solid #1c1c1c; }
.sa-fit-wrap { display: grid; gap: 26px; max-width: var(--max); margin: 0 auto; }
.sa-fit-head { display: grid; gap: 14px; align-content: start; }
.sa-fit-head h2 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.03em; }
.sa-fit-head > p:nth-of-type(1) { max-width: 26em; color: var(--ink-soft); }
.fit-meter { height: 6px; max-width: 320px; border-radius: 999px; background: #262626; overflow: hidden; }
.fit-meter i { display: block; width: 0; height: 100%; background: #d71920; transition: width .35s var(--ease-out); }
.fit-count { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #bdbdbd; }
.sa-fit-body { display: grid; gap: 16px; align-content: start; }
.fit-list { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fit-row {
  position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: center; min-height: 64px; padding: 14px 18px;
  border: 1px solid #2c2c2c; border-radius: 14px; background: #111; font-size: 1.05rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background-color .2s; -webkit-tap-highlight-color: transparent;
}
.fit-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fit-box { display: block; width: 30px; height: 30px; border: 2px solid #4a4a4a; border-radius: 50%; transition: background-color .2s, border-color .2s; }
.fit-row.on { border-color: #d71920; background: rgba(215, 25, 32, .12); }
.fit-row.on .fit-box {
  border-color: #d71920; background: #d71920 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.5 4.5L18.5 7.5'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.fit-row:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.fit-hint { color: var(--ink-soft); font-size: 15px; }
.fit-result { display: grid; gap: 10px; justify-items: start; padding: 24px; border-radius: 16px; background: linear-gradient(135deg, #d71920, #b9151b); color: #fff; box-shadow: 0 18px 50px rgba(215, 25, 32, .35); }
.fit-result[hidden], .fit-hint[hidden] { display: none; }
.fit-result h3 { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; }
.fit-result p { color: rgba(255, 255, 255, .92); }
.fit-result .btn { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) { .fit-result:not([hidden]) { animation: fit-pop .5s var(--ease-out) .3s both; } }
@keyframes fit-pop { 0% { opacity: 0; transform: translateY(10px) scale(.97); } 100% { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .sa-fit-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
}

/* Checklist, round two: Puerto Rico first, the options fold away once the visitor qualifies (Puerto Rico plus at
   least two more), and the congratulations card carries the Amanet logo. The fold animates the list's height with
   the grid-rows trick and fades it; the card then rises in. Reduced motion gets the same states without movement. */
.fit-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease-out), opacity .35s ease, margin .55s var(--ease-out); }
.fit-collapse-in { min-height: 0; overflow: hidden; }
.sa-fit-body.qualified .fit-collapse { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.sa-fit-body { transition: row-gap .55s var(--ease-out); }
.sa-fit-body.qualified { row-gap: 0; }
.sa-fit-body.qualified .fit-row { visibility: hidden; transition: visibility 0s .55s; }
.fit-result { position: relative; overflow: hidden; }
.fit-result > * { position: relative; z-index: 1; }
.fit-logo { display: block; width: min(60%, 170px); height: auto; margin-bottom: 6px; }
.fit-result::after {
  content: ""; position: absolute; right: -14%; bottom: -4%; width: 90%; aspect-ratio: 392 / 72; z-index: 0; pointer-events: none;
  background: url("/assets/brand/amanet-white.png") center / contain no-repeat; opacity: .12;
}
.fit-tick { width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: #fff; fill: none; stroke: #d71920; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fit-result svg.fit-tick { margin-top: 4px; }
.fit-edit { padding: 6px 0; border: 0; background: none; color: rgba(255,255,255,.9); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .fit-collapse, .sa-fit-body.qualified .fit-row { transition: none; } }
.fit-result h3, .fit-result p { text-align: left; }

/* Once the visitor qualifies, the heading, helper text and counter go away and only the congratulations card stays,
   centred on larger screens. "Review my answers" brings them all back. */
.sa-fit-sec.qualified .sa-fit-head { display: none; }
@media (min-width: 900px) {
  .sa-fit-sec.qualified .sa-fit-wrap { grid-template-columns: minmax(0, 1fr); }
  .sa-fit-sec.qualified .sa-fit-body { width: 100%; max-width: 680px; margin-inline: auto; }
}

/* ── /developers: software developers in Kosovo ────────────
   Same system as the other pages (hero stage, scroll story, alternating photo and red cards, red closing band),
   with developer furniture: an editor window in the hero, track tabs, a test-runner review panel, sample
   challenge snippets and stack tags. The Kosovo flag is the small mark; the page is English only. */
body[data-page="developers"] .lang-switch { display: none; }
.ks-flag { display: inline-block; width: 26px; height: 17px; flex: none; margin-right: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.hero-stage .dev-hero { grid-template-areas: "copy" "side" "code"; }
.hero-stage .dev-hero .hero-eyebrow { display: inline-flex; align-items: center; justify-self: start; }
.dev-code { grid-area: code; border: 1px solid #2c2c2c; border-radius: 14px; background: rgba(10,10,12,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 28px 70px rgba(0,0,0,.55); overflow: hidden; min-width: 0; }
.dev-code-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #222; }
.dev-code-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.dev-code-bar i:first-child { background: #d71920; }
.dev-code-bar span { margin-left: 8px; font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #9a9a9a; }
.dev-code pre, .dev-snip { margin: 0; overflow-x: auto; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e6e6e6; tab-size: 2; }
.dev-code pre { padding: 16px 18px 20px; }
.dev-code code, .dev-snip code { display: block; font: inherit; white-space: pre; }
.dev-code .ln { display: block; }
.dev-code b, .dev-snip b { font-weight: 400; }
.k { color: #ff6a6f; } .s { color: #8fd3a8; } .n { color: #f2a65a; } .f { color: #79b8ff; } .c { color: #7f7f88; } .o { color: #e6e6e6; }
.caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px; background: #ff4a50; }
@media (prefers-reduced-motion: no-preference) {
  .dev-code .ln { opacity: 0; transform: translateY(4px); animation: ln-in .45s var(--ease-out) forwards; animation-delay: calc(var(--n) * .32s + .5s); }
  .caret { animation: blink 1s steps(2, start) infinite; }
}
@keyframes ln-in { to { opacity: 1; transform: none; } }
@keyframes blink { to { visibility: hidden; } }
@media (min-width: 900px) {
  .hero-stage .dev-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "copy code" "side code"; }
  .dev-code { align-self: center; }
  .dev-code pre { font-size: 14px; padding: 22px 24px 26px; }
}
/* process: stage tags above the step titles */
.dev-stage { margin: 0 0 4px !important; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; color: #ff6a6f; }
/* sections */
.dev-sec { padding: clamp(44px, 8vw, 104px) var(--gutter); background: #0d0d0d; border-top: 1px solid #1c1c1c; }
.dev-alt { background: #090909; }
.dev-wrap { display: grid; gap: 28px; max-width: var(--max); margin: 0 auto; }
.dev-head { display: grid; gap: 12px; }
.dev-head h2 { font-size: clamp(1.9rem, 5.6vw, 3.2rem); letter-spacing: -.03em; max-width: 14em; }
.dev-head p { max-width: 36em; color: var(--ink-soft); }
/* track tabs */
.dev-tracks { display: grid; gap: 14px; }
.dev-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dev-tabs::-webkit-scrollbar { display: none; }
.dev-tabs button {
  flex: none; min-height: 44px; padding: 0 18px; border: 1px solid #353535; border-radius: 999px; background: #121212; color: #ddd;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.dev-tabs button[aria-selected="true"] { background: #d71920; border-color: #d71920; color: #fff; }
.dev-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dev-panel { display: grid; gap: 14px; justify-items: start; padding: clamp(20px, 4vw, 34px); border: 1px solid #2c2c2c; border-radius: 14px; background: #111; }
.dev-panel[hidden] { display: none; }
.dev-panel h3 { font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -.02em; }
.dev-panel > p:not(.dev-trk) { max-width: 40em; color: var(--ink-soft); font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) { .dev-panel:not([hidden]) { animation: fit-pop .4s var(--ease-out); } }
.dev-trk { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; color: #ff6a6f; }
.dev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dev-tags li { padding: 5px 11px; border: 1px solid #353535; border-radius: 6px; background: #151515; font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #dedede; }
/* challenges */
.dev-chals, .dev-projs { display: grid; gap: 12px; }
.dev-chal, .dev-proj { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid #2c2c2c; border-radius: 14px; background: #111; min-width: 0; }
.dev-chal h3, .dev-proj h3 { font-size: 1.3rem; letter-spacing: -.01em; }
.dev-chal > p:not(.dev-chal-meta), .dev-proj > p:not(.dev-trk) { color: var(--ink-soft); font-size: 15px; }
.dev-chal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; color: #cfcfcf; }
.dev-chal-meta span { padding: 4px 8px; border: 1px solid #353535; border-radius: 4px; }
.dev-chal-meta em { margin-left: auto; padding: 3px 8px; border: 1px dashed rgba(255,255,255,.45); font-style: normal; font-size: 11px; color: #bbb; }
.dev-snip { padding: 14px 16px; border: 1px solid #222; border-radius: 10px; background: #0a0a0c; font-size: 12.5px; }
/* review: a test-runner readout */
.dev-review { align-items: center; }
.dev-run { display: grid; gap: 0; border: 1px solid #2c2c2c; border-radius: 14px; background: #0a0a0c; overflow: hidden; font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-width: 0; }
.dev-run p { margin: 0; padding: 12px 16px; border-bottom: 1px solid #1c1c1c; }
.dev-run p:last-child { border-bottom: 0; }
.dev-run-top { color: #bdbdbd; background: #101012; }
.dev-run-top b { margin-right: 8px; padding: 2px 7px; background: #d71920; color: #fff; font-weight: 600; }
.dev-run-row { display: grid; grid-template-columns: 22px minmax(0, 150px) 1fr; gap: 10px; align-items: baseline; }
.dev-run-row i { font-style: normal; color: #3ddc84; font-weight: 700; }
.dev-run-row b { color: #fff; font-weight: 600; }
.dev-run-row span { color: #9d9da5; }
.dev-run-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; color: #9d9da5; background: #101012; }
.dev-run-sum b { color: #3ddc84; font-weight: 600; }
.dev-run-sum span:first-child b { color: #fff; }
@media (max-width: 560px) { .dev-run-row { grid-template-columns: 22px 1fr; } .dev-run-row span { grid-column: 2; } }
@media (min-width: 900px) {
  .dev-chals, .dev-projs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dev-review { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 5vw, 72px); }
  .dev-tracks { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
  .dev-tabs { flex-direction: column; overflow: visible; }
  .dev-tabs button { justify-content: flex-start; text-align: left; border-radius: 12px; }
}
/* Kosovo cards: "</>" watermark on the first red card, logo on the others (shared rules above) */
.dev-ks .merida-usd::after { content: "</>"; content: "</>" / ""; }

/* phones: deeper shade over the hero photo so the headline holds up */
@media (max-width: 899px) { .hero-stage:has(> .dev-hero)::after { background: linear-gradient(180deg, rgba(9,9,9,.62) 0%, rgba(9,9,9,.84) 42%, #090909 92%); } }
.dev-code code { white-space: normal; }
.dev-code .ln { white-space: pre; }
@media (max-width: 480px) { .dev-code pre { font-size: 12px; padding: 14px 14px 18px; } }