/* ==========================================================================
   Landing page
   ========================================================================== */

/* ================================================================ HERO */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.25rem, 3vw, 3rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  overflow: clip;
}
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 3rem); position: relative; }
.hero__copy { position: relative; z-index: 3; display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 2rem); }
.hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero__title { font-size: var(--fs-mega); }
.hero__title .serif { font-size: 1.04em; margin-left: -0.02em; }
.hero__sub { display: grid; gap: 1.5rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hide-sm { display: none; }

/* Stage: arch window + layered mockups */
.hero__stage {
  position: relative; z-index: 1;
  height: clamp(540px, 120vw, 640px);
  margin-inline: calc(var(--gutter) * -0.25);
}
.hero__arch {
  position: absolute; inset: 0 4% 0 4%;
  border-radius: 999px 999px var(--r-xl) var(--r-xl);
  background: linear-gradient(170deg, var(--peach-soft) 0%, var(--peach) 55%, var(--peach-deep) 120%);
  overflow: hidden;
}
.hero__arch .blob { filter: blur(50px); }
.hero__leaf {
  position: absolute; width: 46%; right: -6%; bottom: -4%;
  color: var(--mint-deep); opacity: 0.55; rotate: 18deg;
}
.hero__passport, .hero__phone, .hero__w { position: absolute; will-change: transform; }
.hero__passport { left: 2%; top: 14%; z-index: 1; }
.hero__passport .passport { --bw: clamp(170px, 42vw, 250px); rotate: -11deg; }
.hero__phone { left: 50%; top: 5%; margin-left: calc(var(--pw-half, 0px) * -1); z-index: 2; }
.hero__phone .phone { --pw: clamp(230px, 58vw, 290px); rotate: 4deg; translate: -38% 0; }
.hero__w { z-index: 4; }
.hero__w .widget { min-width: 168px; }
.hero__w--allergy { left: 0; bottom: 18%; }
.hero__w--allergy .widget__value { color: var(--alert); }
.hero__w--allergy .widget__icon { background: rgba(168, 67, 42, 0.12); color: var(--alert); }
.hero__w--lang { right: 0; top: 10%; }
.hero__w--lang [data-hero-lang] { display: inline-block; transition: opacity 220ms, filter 220ms, translate 220ms; }
.hero__w--lang [data-hero-lang].is-swapping { opacity: 0; filter: blur(4px); translate: 0 6px; }
.hero__w--lang .widget__icon { background: rgba(255, 255, 255, 0.6); }
.hero__w--qr { right: 2%; bottom: 4%; }
.widget--qr { width: 132px; min-width: 0 !important; gap: 0.2rem; }
.hero__qr { width: 100%; padding: 2px; margin-bottom: 0.4rem; }
.hero__w--qr .widget__value { font-variant-numeric: tabular-nums; font-size: 1rem; }
.hero__w--blood { display: none; }
.hero__w--blood .widget__icon { background: rgba(255, 255, 255, 0.55); }

/* Tactile stones */
.stone {
  position: absolute; z-index: 3; pointer-events: none;
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  box-shadow: inset -8px -10px 18px rgba(60, 35, 20, 0.22), inset 8px 8px 14px rgba(255, 255, 255, 0.55), 0 18px 30px -10px rgba(60, 35, 20, 0.35);
}
.stone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain); opacity: 0.35; mix-blend-mode: multiply; }
.stone--peach { background: radial-gradient(circle at 35% 30%, var(--peach-soft), var(--peach) 55%, var(--peach-deep)); }
.stone--mint { background: radial-gradient(circle at 35% 30%, var(--mint-soft), var(--mint) 55%, var(--mint-deep)); }
.stone--gray { background: radial-gradient(circle at 35% 30%, var(--gray-soft), var(--warm-gray) 60%, #b8ada6); }
.hero__stone-a { width: 64px; height: 54px; left: 40%; bottom: -14px; rotate: -12deg; }
.hero__stone-b { width: 38px; height: 34px; left: 54%; bottom: 10px; rotate: 20deg; }

.hero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.hero__scroll { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); font-weight: 600; }
.hero__scroll svg { width: 18px; height: 18px; rotate: 90deg; animation: bob 2.4s var(--ease-in-out) infinite; }
.hero__facts { display: none; }

/* In-phone app UI */
.app { padding: 1.3em 1.15em 1em; display: flex; flex-direction: column; gap: 0.85em; height: calc(100% - 2em); }
.app__top { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4em; }
.app__hello { font-weight: 700; font-size: 1.45em; letter-spacing: -0.04em; line-height: 1.1; }
.app__where { display: flex; align-items: center; gap: 0.3em; font-size: 0.82em; color: var(--muted); margin-top: 0.15em; }
.app__avatar { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--mint); font-weight: 700; font-size: 0.85em; }
.app__pass {
  position: relative; overflow: hidden;
  border-radius: 1.2em; padding: 1em 1.05em;
  background: var(--black); color: var(--cream);
  display: grid; gap: 0.45em;
}
.app__pass::after {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -25%; top: -45%; border-radius: 50%;
  background: radial-gradient(circle, var(--peach), transparent 65%); opacity: 0.55;
}
.app__pass-head { display: flex; justify-content: space-between; font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.app__pass-name { font-family: var(--font-serif); font-style: italic; font-size: 1.65em; line-height: 1; margin-top: 0.4em; }
.app__pass-meta { display: flex; justify-content: space-between; font-size: 0.72em; opacity: 0.7; }
.app__label { font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.app__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.app__tile { display: grid; gap: 0.15em; padding: 0.75em 0.8em; border-radius: 1em; background: var(--white); }
.app__tile span { font-size: 0.72em; color: var(--muted); }
.app__tile b { font-size: 0.95em; letter-spacing: -0.02em; line-height: 1.15; }
.app__tile--alert { background: rgba(168, 67, 42, 0.1); }
.app__tile--alert b { color: var(--alert); }
.app__tile--mint { background: var(--mint); }
.app__tile--peach { background: var(--peach); }
.app__share {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  height: 3.2em; border-radius: 99px; background: var(--black); color: var(--cream);
  font-weight: 600; font-size: 0.92em;
}

/* ================================================================ MARQUEE */
.marquee {
  overflow: hidden;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-block: 1px solid var(--line);
  background: var(--cream);
}
.marquee__track {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem);
  width: max-content;
  animation: marquee 50s linear infinite;
  font-size: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
  font-weight: 700; letter-spacing: -0.05em; line-height: 1;
  white-space: nowrap;
}
.marquee__track .serif { font-weight: 400; color: var(--peach-deep); }
.marquee__dot { color: var(--mint-deep); }
.marquee__dot svg { width: 0.5em; height: 0.5em; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ================================================================ PROBLEM */
.problem__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.problem__aside { display: grid; gap: 1rem; align-content: start; }
.problem__note { color: var(--muted); max-width: 26ch; font-size: var(--fs-sm); }
.problem__quote { max-width: 30ch; }
.problem__muted { color: rgba(0, 0, 0, 0.38); }
.problem__cards { display: grid; gap: 0.75rem; }
.problem__card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: var(--r-lg); }
.problem__card svg { width: 28px; height: 28px; margin-bottom: 1.5rem; }
.problem__card h3 { font-size: 1.3rem; letter-spacing: -0.035em; line-height: 1.1; }
.problem__card p { color: var(--ink-2); font-size: var(--fs-sm); }

/* ================================================================ FEATURE HEAD */
.feature__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.feature__title .serif { display: inline-block; }
.feature__head--split { align-items: end; }

/* ================================================================ 01 PASSPORT · bento */
.bento { display: grid; gap: 0.75rem; }
.bento > .card { min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.bento__label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bento__hint { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.bento__title { max-width: 16ch; }
.bento__icon { width: 34px; height: 34px; }
.bento__c p, .bento__d p { color: var(--ink-2); max-width: 30ch; }

.bento__a { min-height: 520px !important; cursor: pointer; }
.docs { position: relative; height: 270px; }
.doc {
  position: absolute; left: 50%; top: 50%;
  width: min(220px, 62%); aspect-ratio: 0.78;
  padding: 1rem;
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 0.35rem;
  transition: transform 800ms var(--ease-spring);
  translate: -50% -50%;
}
.doc__type { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; opacity: 0.55; }
.doc b { font-size: 1.05rem; letter-spacing: -0.03em; }
.doc__lines { display: grid; gap: 7px; margin-top: 0.8rem; }
.doc__lines i { display: block; height: 6px; border-radius: 4px; background: var(--gray-soft); }
.doc__stamp {
  margin-top: auto; align-self: flex-end;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--peach); font-weight: 700; font-family: var(--font-serif); font-style: italic; font-size: 1.1rem;
}
.doc__stamp--mint { background: var(--mint); }
.doc__stamp--alert { background: rgba(168, 67, 42, 0.12); color: var(--alert); font-style: normal; font-family: var(--font-sans); }
.doc--1 { transform: rotate(-8deg) translate(-6px, 6px); z-index: 1; }
.doc--2 { transform: rotate(4deg) translate(6px, 0); z-index: 2; }
.doc--3 { transform: rotate(-1deg); z-index: 3; }
.bento__a:hover .doc--1, .bento__a.is-open .doc--1 { transform: rotate(-16deg) translate(-58%, 4%); }
.bento__a:hover .doc--2, .bento__a.is-open .doc--2 { transform: rotate(13deg) translate(58%, 2%); }
.bento__a:hover .doc--3, .bento__a.is-open .doc--3 { transform: rotate(0deg) translateY(-8%); }

.scan { position: relative; width: min(180px, 70%); aspect-ratio: 0.78; margin: 0.5rem auto 0; }
.scan__paper {
  position: absolute; inset: 12%; border-radius: 10px; background: var(--cream);
  padding: 14% 12%; display: grid; gap: 8px; align-content: start; rotate: -4deg;
}
.scan__paper span { display: block; height: 6px; border-radius: 4px; background: var(--warm-gray); width: 100%; }
.scan__line {
  position: absolute; left: 4%; right: 4%; top: 10%; height: 2px; border-radius: 2px;
  background: var(--mint); box-shadow: 0 0 20px 4px rgba(193, 222, 186, 0.6);
  animation: scan 2.8s var(--ease-in-out) infinite alternate;
}
@keyframes scan { to { top: 88%; } }
.scan__corner { position: absolute; width: 22px; height: 22px; border: 2.5px solid var(--mint); }
.scan__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.scan__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.scan__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.scan__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }

.cats { display: grid; gap: 0; align-self: stretch; }
.cats li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
  font-weight: 600; letter-spacing: -0.02em;
  transition: padding var(--dur-2) var(--ease-out);
}
.cats li:last-child { border-bottom: 0; }
.cats li:hover { padding-inline: 0.5rem; }
.cats span { display: flex; align-items: center; gap: 0.75rem; }
.cats svg { width: 20px; height: 20px; }
.cats b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.8rem; letter-spacing: -0.02em; line-height: 1; }

/* ================================================================ 02 TRANSLATION · dark */
.feature--dark {
  background: var(--black); color: var(--cream);
  border-radius: var(--r-xl);
  margin-inline: clamp(0.5rem, 1vw, 1rem);
  overflow: hidden;
}
.feature--dark::before { opacity: 0.5; mix-blend-mode: overlay; }
.feature--dark .lead { color: rgba(251, 243, 235, 0.72); }
.feature--dark .feature__title .serif { color: var(--peach); }

.translator { display: grid; gap: 1.25rem; position: relative; z-index: 1; }
.translator__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.translator__status { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); color: rgba(251, 243, 235, 0.7); }
.translator__status .dot-live { background: var(--mint); }
.translator__cols { display: grid; gap: 0.75rem; position: relative; }
.translator__swap {
  justify-self: center;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--mint); color: var(--black);
  margin-block: -1.6rem; z-index: 2; rotate: 90deg;
  box-shadow: 0 0 0 6px var(--black);
}
.translator__swap svg { width: 20px; height: 20px; }
.translator__note { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: rgba(251, 243, 235, 0.5); }

.sheet {
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--cream); color: var(--black);
  display: grid; gap: 1rem; align-content: start;
}
.sheet--orig { background: var(--warm-gray); }
.sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong); }
.sheet__src { font-size: var(--fs-xs); color: var(--muted); }
.sheet__rows { display: grid; margin: 0; }
.sheet__row {
  display: grid; gap: 0.15rem;
  padding: 0.85rem 0.75rem; margin-inline: -0.75rem;
  border-radius: 14px;
  transition: background var(--dur-2) var(--ease-out);
}
.sheet__row + .sheet__row { border-top: 1px solid var(--line); }
.sheet__row dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sheet--orig .sheet__row dt { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.sheet__row dd { margin: 0; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.sheet__row.is-alert dd { color: var(--alert); }
.sheet__row.is-linked { background: rgba(193, 222, 186, 0.55); }
.sheet__row.is-typing dd, .sheet__row.is-typing dt { animation: type-in 700ms var(--ease-out) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes type-in {
  from { opacity: 0; filter: blur(8px); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); }
}

/* ================================================================ 03 EMERGENCY */
.emergency { display: grid; gap: 0.75rem; }
.map {
  min-height: 520px; padding: 0 !important;
  background: var(--cream-2);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__road { fill: none; stroke: var(--white); stroke-width: 3.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.map__road--main { stroke-width: 7; }
.map__road--thin { stroke-width: 1.5; opacity: 0.8; }
.map__road { stroke-width: 6px; }
.map__road--main { stroke-width: 12px; }
.map__road--thin { stroke-width: 3px; }
.map__park { fill: var(--mint); opacity: 0.7; }
.map__me {
  position: absolute; width: 18px; height: 18px; translate: -50% -50%;
  border-radius: 50%; background: var(--black); box-shadow: 0 0 0 4px var(--white);
}
.map__me span { position: absolute; inset: 0; border-radius: 50%; background: var(--black); animation: pulse-ring 2.2s var(--ease-out) infinite; }
.map__pin {
  position: absolute; translate: -50% -100%;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50% 50% 50% 4px; rotate: -45deg;
  background: var(--white); box-shadow: var(--shadow-md);
  transition: background var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring);
}
.map__pin svg { width: 20px; height: 20px; rotate: 45deg; }
.map__pin:hover { scale: 1.08; }
.map__pin.is-active { background: var(--black); color: var(--cream); scale: 1.15; }
.map__panel {
  position: relative; z-index: 1;
  margin: 0.75rem; padding: 1rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
}
.map__panel-head { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0.5rem 0.75rem; }
.map__list button {
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.7rem 0.75rem; border-radius: 16px; min-height: var(--tap);
  transition: background var(--dur-1) var(--ease-out);
}
.map__list button:hover { background: var(--cream); }
.map__list button[aria-pressed="true"] { background: var(--mint); }
.map__list b { display: block; letter-spacing: -0.02em; line-height: 1.2; }
.map__list small { color: var(--muted); font-size: var(--fs-xs); }
.map__dist { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; white-space: nowrap; }

.access { display: grid; gap: 1.25rem; align-content: start; }
.access__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.access__state { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--mint); }
.access__state .dot-live { background: var(--mint); }
.access__qr-wrap { position: relative; width: min(230px, 75%); aspect-ratio: 1; margin: 0.5rem auto; display: grid; place-items: center; }
.access__qr {
  width: 76%; padding: 8%; border-radius: 22px; background: var(--cream);
  transition: filter var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}
.access__ring { position: absolute; inset: 0; rotate: -90deg; }
.access__ring circle { fill: none; stroke-width: 3; stroke: rgba(251, 243, 235, 0.14); }
.access__ring [data-ring] { stroke: var(--mint); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.access__timer { display: flex; justify-content: space-between; align-items: baseline; }
.access__timer .label { opacity: 0.6; }
.access__timer b { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.access__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; font-size: var(--fs-xs); color: rgba(251, 243, 235, 0.7); }
.access__steps li { display: grid; gap: 0.35rem; padding: 0.7rem; border-radius: 14px; background: rgba(251, 243, 235, 0.07); line-height: 1.25; }
.access__steps span { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--peach); }
.access.is-revoked .access__qr { filter: blur(6px) grayscale(1); opacity: 0.35; }
.access.is-revoked .access__state { color: var(--peach); }

.sos { display: flex; gap: 1.25rem; align-items: flex-start; }
.sos .label { opacity: 0.65; }
.sos__num { display: block; font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem); letter-spacing: -0.07em; line-height: 0.95; margin: 0.4rem 0 0.6rem; }
.sos p { color: var(--ink-2); font-size: var(--fs-sm); max-width: 28ch; }

/* ================================================================ 04 INSURERS */
.feature--insurers { background: linear-gradient(180deg, var(--cream) 0%, var(--gray-soft) 45%, var(--gray-soft) 60%, var(--cream) 100%); }
.insurers { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.insurers__copy { display: grid; gap: 1.5rem; align-content: start; }
.insurers__copy .feature__title { margin-block: 0.25rem; }
.flow { display: grid; gap: 0.75rem; counter-reset: flow; }
.flow__step {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; align-items: center;
  padding: 1.25rem 1.5rem !important; border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease-out);
}
.flow__step:hover { transform: translateX(6px); }
.flow__step > svg { width: 30px; height: 30px; grid-row: span 2; display: none; }
.flow__n {
  grid-row: span 2;
  font-family: var(--font-serif); font-style: italic; font-size: 2.6rem; line-height: 1;
  width: 3rem;
}
.flow__step h3 { font-size: 1.3rem; letter-spacing: -0.035em; line-height: 1.1; }
.flow__step p { color: inherit; opacity: 0.72; font-size: var(--fs-sm); }

/* ================================================================ CTA */
.cta-wrap { padding-top: 0; }
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--black); color: var(--cream);
  padding: clamp(2rem, 1rem + 5vw, 6rem);
  display: grid; gap: 3rem;
}
.cta::before { opacity: 0.5; mix-blend-mode: overlay; }
.cta .blob { filter: blur(80px); }
.cta__copy { position: relative; z-index: 1; display: grid; gap: 1.5rem; }
.cta__title .serif { color: var(--peach); }
.cta .lead { color: rgba(251, 243, 235, 0.7); }
.cta__visual { position: relative; z-index: 1; display: grid; place-items: center; min-height: 300px; }
.cta__passport { --bw: clamp(190px, 50vw, 260px); rotate: 8deg; background: linear-gradient(160deg, var(--peach-soft), var(--peach) 60%, var(--peach-deep)); color: var(--black); }
.cta__passport .passport__crest { color: var(--black); }
.cta__stamp {
  position: absolute; left: 50%; bottom: 8%; translate: -90% 0; rotate: -10deg;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--mint); color: var(--black); font-weight: 700;
  box-shadow: var(--shadow-md);
  animation: bob 6s var(--ease-in-out) infinite;
}
.cta__stamp svg { width: 18px; height: 18px; }

/* ================================================================ Breakpoints */
@media (min-width: 560px) {
  .hide-sm { display: inline-flex; }
  .hero__w--blood { display: block; left: 4%; top: 4%; }
  .problem__cards { grid-template-columns: repeat(3, 1fr); }
  .problem__card { min-height: 260px; }
  .problem__card svg { margin-bottom: auto; }
}

@media (min-width: 760px) {
  .hero__stage { height: 660px; }
  .hero__phone .phone { --pw: 300px; }
  .hero__passport .passport { --bw: 250px; }
  .hero__passport { left: 6%; }
  .hero__w--allergy { left: 2%; bottom: 20%; }
  .hero__w--lang { right: 4%; top: 18%; }
  .hero__w--qr { right: 8%; bottom: 6%; }

  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__a { grid-column: span 6; }
  .bento__b { grid-column: span 3; }
  .bento__c { grid-column: span 3; }
  .bento__d { grid-column: span 6; }

  .translator__cols { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .translator__swap { align-self: center; margin: 0 -1.5rem; rotate: 0deg; }

  .emergency { grid-template-columns: 1.4fr 1fr; }
  .map { grid-row: span 2; min-height: 640px; }
  .map__panel { margin: 1rem; max-width: 420px; }

  .flow { grid-template-columns: 1fr 1fr; }
  .flow__step { min-height: 230px; grid-template-columns: 1fr; align-content: space-between; }
  .flow__n, .flow__step > svg { grid-row: auto; }
}

@media (min-width: 1080px) {
  .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 0; }
  .hero__copy { padding-block: 2rem; }
  .hero__title { font-size: clamp(5rem, 0.5rem + 7.5vw, 10.5rem); margin-right: -24%; }
  .hero__title .line { width: max-content; }
  .hero__sub { grid-template-columns: 1fr; max-width: 520px; }
  .hero__stage { height: min(78svh, 760px); min-height: 640px; margin: 0; }
  .hero__arch { inset: 0 0 0 6%; }
  .hero__phone .phone { --pw: clamp(280px, 9vw + 170px, 330px); }
  .hero__passport { left: -6%; top: 20%; }
  .hero__passport .passport { --bw: clamp(230px, 8vw + 140px, 290px); }
  .hero__w--allergy { left: -14%; bottom: 14%; }
  .hero__w--blood { left: 2%; top: 4%; }
  .hero__w--lang { right: -2%; top: 22%; }
  .hero__w--qr { right: 2%; bottom: 8%; }
  .hero__facts {
    display: flex; gap: clamp(1.5rem, 3vw, 3rem);
    font-size: var(--fs-sm); color: var(--ink-2);
  }
  .hero__facts li { display: flex; align-items: baseline; gap: 0.5rem; max-width: 24ch; line-height: 1.35; }
  .hero__facts b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--ink); }

  .problem__grid { grid-template-columns: 1fr 3fr; column-gap: 4rem; }
  .problem__quote { grid-column: 2; }
  .problem__cards { grid-column: 2; }

  .feature__head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
  .feature__head > :first-child { grid-column: 1 / -1; }
  .feature__head .feature__title { grid-column: 1; }
  .feature__head .lead { grid-column: 2; justify-self: end; }
  .feature__head--split { grid-template-columns: 1.3fr 1fr; }
  .feature__head--split > :first-child { grid-column: 1; }

  .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(250px, auto); }
  .bento__a { grid-column: 1 / span 7; grid-row: span 2; }
  .bento__b { grid-column: 8 / span 5; }
  .bento__c { grid-column: 8 / span 2; padding: 1.5rem !important; }
  .bento__c .bento__title { font-size: 1.45rem; }
  .bento__d { grid-column: 10 / span 3; padding: 1.25rem 1.5rem !important; justify-content: center; }
  .bento__d .cats li { padding: 0.65rem 0; font-size: 0.92rem; }
  .bento__d .cats b { font-size: 1.4rem; }
  .bento__b { flex-direction: row; align-items: center; }
  .bento__b .scan { margin: 0; width: 46%; flex: none; }
  .docs { height: 340px; }

  .insurers { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
  .flow__step:nth-child(even) { translate: 0 2.5rem; }
  .flow__step:nth-child(even):hover { transform: translateX(6px); }

  .cta { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .cta__visual { min-height: 420px; }
}

@media (min-width: 1400px) {
  .hero__w--allergy { left: -18%; }
}

/* Keep grid/flex children from forcing horizontal overflow on small screens */
.translator, .translator > *, .translator__cols > *, .translator__bar > *, .emergency > *, .bento > *, .flow > * { min-width: 0; }
.translator__bar .segmented { max-width: 100%; }