/* Homepage sections */

/* scaled stages: a visual drawn at one design size, scaled to its column */
.stage { position: relative; width: 100%; max-width: 100%; }
.stage-in { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--s, 1)); }

/* ---------- 2. FDA clearance: a heading and one muted paragraph on the left,
   two white metric cards side by side on the right ---------- */
.f2 { padding-block: clamp(72px, 9vw, 128px); background: var(--paper); overflow-x: clip; }
.f2-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px clamp(40px, 6vw, 96px); max-width: 1240px; margin-inline: auto; padding-left: max(56px, env(safe-area-inset-left, 0px)); padding-right: max(56px, env(safe-area-inset-right, 0px)); }
.f2-vis { min-width: 0; order: 2; }
.f2-c { position: absolute; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 24px 50px -24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.04); font-family: var(--ui); color: #1d1d1f; }
.f2-back { top: 0; left: 0; width: 240px; height: 290px; }
.f2-front { top: 0; left: 260px; width: 240px; height: 290px; }
.f2-n { display: flex; flex-direction: column; padding: 28px 28px 0; overflow: hidden; }
.f2-n p { font: 400 14px/20px var(--font); color: var(--mute); }
.f2-n b { margin-top: 10px; font: 360 58px/1 var(--font); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #1d1d1f; }
.f2-n small { margin-top: 8px; font: 500 13px/1 var(--font); color: var(--mute); }
.f2-tr { display: block; max-width: none; width: calc(100% + 56px); height: 72px; margin: auto -28px 22px; }
.f2-t { max-width: 600px; min-width: 0; }
.f2-h { font: 450 clamp(30px, 2.8vw, 40px)/1.15 var(--font); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.f2-p { margin-top: 14px; font: 400 18px/26px var(--font); color: var(--mute); text-wrap: pretty; }
.f2-ln { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font: 450 16px/24px var(--font); color: var(--red); text-decoration: none; }
.f2-ln::after { content: "\2197"; }
.f2-k { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--paper-2); font: 500 13px/1 var(--font); color: var(--ink); }
/* The page's pills share one warm gray, after the demo card's. */
.f2-k { background: #efeeec; }
.f2-k + .f2-h { margin-top: 18px; }
.f2-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 24px; }
.f2-a .f2-ln { margin-top: 0; }
.f2-a span { font: 400 14px/20px var(--font); color: var(--mute); }
/* The FDA section lines up with the explainer card above it: its text starts where
   the card's text does (the section's 16px, the card's 12px and the copy's own
   inset), and its cards end the same distance in from the card's right edge (the
   user's note: equal gaps at both sides). */
@media (min-width: 900px) {
  /* Sized and placed as F2 (Introducing eSSESSMENT): its 1232px column, 52px heading and 17px body. */
  #fda .f2-in { max-width: 1232px; padding-inline: 24px; box-sizing: content-box; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); }
  #fda .f2-h { font: 450 clamp(38px, 3.6vw, 52px)/1.05 var(--font); letter-spacing: -0.025em; }
  #fda .f2-p { font-size: 17px; line-height: 26px; color: var(--ink); }
  /* The two cards sit at the column's right edge. */
  #fda .stage { width: min(100%, 550px); margin-inline: auto; }   /* 500 wide at its 1.1 limit, centred on its card */
}
/* Narrower, the FDA text and cards sit 28px inside the explainer card's edges, as its text does. */
/* The two metric cards sit on a warm gray card, as F2's demo does, filling the right column. */
#fda .f2-vis { padding: 56px 40px; border-radius: 24px; background: #f1f1f3; }
@media (max-width: 899px) { #fda .f2-t { padding-inline: 20px; } #fda .f2-vis { padding: 32px 16px; border-radius: 20px; } #fda .f2-h { font: 450 38px/1.05 var(--font); letter-spacing: -0.025em; } #fda .f2-p { font-size: 17px; line-height: 26px; color: var(--ink); } }
@media (max-width: 899px) {
  .f2-in { grid-template-columns: minmax(0, 1fr); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .f2-t { order: -1; }
}

/* ---------- 2. film: a row like the ones below it, copy left and the film
   centered in the square on the right ---------- */
.film-s .bx-vis .film { width: 100%; }
.film { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r-lg); background: #f4f4f6; box-shadow: 0 0 0 1px var(--line); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; background: none; }
.film-play svg { width: 76px; height: 76px; padding: 26px 24px 26px 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.25); color: #111113; transition: transform 0.2s var(--ease); }
.film-play:hover svg { transform: scale(1.05); }
.film.on .film-play { display: none; }
.film-ctl { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; }
.film-b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.25); color: #111113; }
.film-b svg { width: 18px; height: 18px; }
.film:not(.on) .film-ctl { display: none; }
.film-b .fpy, .film.paused .film-b .fpz { display: none; }
.film.paused .film-b .fpy { display: block; }
.film-b .fsn, .film-b[aria-pressed="true"] .fso { display: none; }
.film-b[aria-pressed="true"] .fsn { display: block; }

/* ---------- 3 to 10: rows laid out like B ----------
   Each row is a band with a square visual and a short text, so every module
   is the same height. Bands alternate gray and white, and the visual
   alternates sides, starting on the left under the film. */
.bx { padding-block: 56px; overflow-x: clip; }
.bx.g { background: var(--paper-2); }
.bx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; max-width: 1440px; margin-inline: auto; padding-left: max(56px, env(safe-area-inset-left, 0px)); padding-right: max(56px, env(safe-area-inset-right, 0px)); }
.bx.flip .bx-vis { order: 2; }
.bx-vis { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: min(632px, 80vh); aspect-ratio: 1; margin: 0 auto; min-width: 0; }
.bx-t { max-width: 632px; min-width: 0; }
.bx-h { font: 450 clamp(30px, 2.8vw, 40px)/1.15 var(--font); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.bx-p { max-width: 576px; margin-top: 12px; font: 400 18px/26px var(--font); color: var(--mute); text-wrap: pretty; }
.bx-lns { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.bx-t > .bx-ln { margin-top: 28px; }
.bx-ln { display: inline-flex; align-items: center; gap: 6px; font: 450 16px/24px var(--font); color: var(--red); text-decoration: none; }
.bx-ln::after { content: "\2192"; transition: transform 0.15s ease; }
.bx-ln:hover::after { transform: translateX(3px); }
.bx-ln.k { color: var(--ink); }

/* the white cards the visuals are made of */
.vc { border-radius: 20px; background: var(--s-bg); color: var(--s-ink); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04), 0 22px 48px -18px rgba(0, 0, 0, 0.22); font-family: var(--ui); }
.bx:not(.g) .vc { box-shadow: 0 0 0 1px var(--s-line), 0 22px 48px -22px rgba(0, 0, 0, 0.2); }
.vc-h { font: 600 15px/1.3 var(--ui); }

/* 3. the map, stacked: two ways in, one engine underneath */
.vm { display: grid; gap: 14px; width: min(100%, 460px); }
.vm-card { padding: 18px 18px 20px; border-radius: 20px; background: var(--s-bg); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 22px 48px -22px rgba(0, 0, 0, 0.22); font-family: var(--ui); color: var(--s-ink); }
.vm-k { font: 500 12px/1 var(--ui); color: var(--s-mute); }
.vm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 14px; }
.vm-node { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--s-fill); }
.vm-node b { font: 600 14px/1.2 var(--ui); }
.vm-node small { font: 400 12px/1.3 var(--ui); color: var(--s-mute); }
.vm-ar { font: 500 16px/1 var(--ui); color: #b51f2a; }
.vm-base { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 84px; padding: 0 18px; overflow: hidden; border-radius: 20px; background: #111113; color: #f2f2f4; font-family: var(--ui); }
.vm-base b { display: block; font: 600 14px/1.2 var(--ui); }
.vm-base small { display: block; margin-top: 4px; font: 400 12px/1.3 var(--ui); color: #9c9da6; }
.vm-base canvas { width: 100%; height: 56px; }

/* 4. the four steps, two by two */
.v4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, 520px); }
.v4 > li { display: grid; gap: 10px; }
.v4-n { display: flex; align-items: center; gap: 8px; font: 450 15px/1 var(--font); color: var(--ink); }
.v4-n b { font: 500 13px/1 var(--font); color: var(--red); }
.fv { position: relative; height: 200px; overflow: hidden; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-family: var(--ui); color: var(--s-ink); }
.fv-build { padding: 16px; }
.fv-t { font: 650 13px/1.2 var(--ui); }
.fv-t em { display: block; margin-top: 3px; font: 400 11.5px/1 var(--ui); font-style: normal; color: var(--s-mute); }
.fv-build ul { display: grid; gap: 5px; margin-top: 12px; }
.fv-build li { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 8px; box-shadow: 0 0 0 1px var(--s-line); font: 500 11.5px/1 var(--ui); }
.fv-build li em { font-style: normal; color: var(--s-mute); }
.fv-build li.on { box-shadow: 0 0 0 1.5px #b51f2a; }
.fv-inv { display: grid; align-content: center; gap: 8px; padding: 16px; }
.fv-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 5px 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--s-line); font: 400 12px/1 var(--ui); color: var(--s-ink); }
.fv-f b { display: grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 7px; background: #1d1d1f; font: 600 11.5px/1 var(--ui); color: #fff; }
.fv-f.lnkf { color: var(--s-mute); }
.fv-f.lnkf b { background: var(--s-fill); color: var(--s-ink); }
.fv-s { margin-top: 6px; font: 500 11.5px/1.3 var(--ui); color: var(--s-mute); }
.fv-run { display: grid; place-items: end center; }
.fv-ph { display: flex; flex-direction: column; gap: 10px; width: 150px; height: 182px; padding: 18px 14px; border-radius: 26px 26px 0 0; background: #101114; color: #fff; box-shadow: 0 0 0 5px #e2e2e6; }
.fv-q { padding: 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.95); font: 650 10.5px/1.25 var(--ui); color: #1d1d1f; }
.fv-sc { display: flex; gap: 4px; }
.fv-sc i { flex: 1; height: 16px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); }
.fv-sc i.s { background: #e0323b; }
.fv-r { display: flex; gap: 6px; margin-top: auto; font: 500 10px/1 var(--ui); color: rgba(255, 255, 255, 0.7); }
.fv-r b { margin-left: 4px; font: 700 15px/1 var(--ui); color: #fff; }
.fv-r b:first-child { margin-left: 0; }
.fv-rev canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fv-tag { position: absolute; top: 14px; left: 54%; translate: -100% 0; height: 22px; padding: 0 9px; border-radius: 99px; background: #b51f2a; font: 600 11px/22px var(--ui); color: #fff; white-space: nowrap; }
.v4 .fv { height: 200px; }
.v4 .fv-ph { width: 140px; height: 176px; }

/* 5. example programs */
.vw { width: min(100%, 440px); padding: 20px 20px 10px; }
.vw ul { margin-top: 12px; }
.vw li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; padding: 13px 0; border-top: 1px solid var(--s-line); }
.vw li b { font: 600 14px/1.25 var(--ui); }
.vw li span { grid-column: 1; font: 400 12.5px/1.35 var(--ui); color: var(--s-mute); }
.vw li em { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding: 5px 9px; border-radius: 99px; background: var(--s-fill); font: 500 11.5px/1 var(--ui); font-style: normal; color: var(--s-ink); }

/* 6. the quick start, a dark code panel */
.code { min-width: 0; overflow: hidden; border-radius: 16px; background: var(--band-2); box-shadow: 0 0 0 1px var(--band-line); }
.code-bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--band-line); }
.code-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.code-tabs button { height: 30px; padding: 0 14px; border-radius: 999px; font: 500 13.5px/1 var(--font); color: var(--band-mute); }
.code-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, 0.14); color: var(--band-ink); }
.code-copy { margin-left: auto; height: 32px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--band-line); font: 500 13px/1 var(--font); color: var(--band-ink); }
.code-copy:hover { background: rgba(255, 255, 255, 0.06); }
.code-p { margin: 0; padding: 22px 22px 24px; overflow-x: auto; font: 400 13.5px/1.75 var(--mono); color: var(--code-ink); tab-size: 4; }
.code-p .k { color: var(--code-k); } .code-p .s { color: var(--code-s); } .code-p .c { color: var(--code-c); }
.code-f { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 22px; border-top: 1px solid var(--band-line); font: 500 13.5px/1.3 var(--font); }
.code-f a { color: var(--band-ink); text-decoration: none; }
.code-f a::after { content: " \2197"; color: var(--band-mute); }
.code-f a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bx-vis .code { width: min(100%, 540px); box-shadow: 0 0 0 1px var(--band-line), 0 30px 60px -30px rgba(0, 0, 0, 0.45); }
.bx-vis .code-p { font-size: 13px; }

/* 7. measures, with the study laid over the list as in B4 */
.vms { position: relative; width: min(100%, 470px); padding-bottom: 118px; }
.vm-list { width: 86%; margin-left: auto; padding: 20px 22px 40px; }
.vm-g { margin-top: 14px; font: 500 12px/1 var(--ui); color: var(--s-mute); }
.vm-list ul { margin-top: 6px; }
.vm-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--s-line); font: 500 13.5px/1.3 var(--ui); }
.vm-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b51f2a; }
.vm-ev { position: absolute; left: 0; bottom: 0; width: 62%; padding: 18px 20px; }
.vm-ev-k { font: 500 12px/1.2 var(--ui); color: var(--s-mute); }
.vm-ev-n { margin-top: 8px; font: 700 34px/1 var(--ui); letter-spacing: -0.02em; }
.vm-ev-n small { font: 500 14px/1 var(--ui); color: var(--s-mute); }
.vm-ev-s { margin-top: 8px; font: 400 12.5px/1.4 var(--ui); color: var(--s-mute); }

/* 8. plans, the production card offset over the trial */
.vpl { position: relative; width: min(100%, 470px); padding-bottom: 150px; }
.vpl-c { width: 78%; padding: 22px 22px 16px; }
.vpl-c:first-child { padding-bottom: 44px; }
.vpl-c.dk { position: absolute; right: 0; bottom: 0; background: #111113; color: #f2f2f4; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.vpl-k { font: 600 12px/1 var(--ui); letter-spacing: 0.02em; color: #b51f2a; }
.vpl-c.dk .vpl-k { color: #ff7b84; }
.vpl-t { margin-top: 8px; font: 600 17px/1.3 var(--ui); }
.vpl-c ul { margin-top: 12px; }
.vpl-c li { padding: 8px 0; border-top: 1px solid var(--s-line); font: 400 13px/1.35 var(--ui); color: var(--s-mute); }
.vpl-c.dk li { border-top-color: #2b2b32; color: #b5b6bd; }

/* 9. the latest from the newsroom */
.vnews { width: min(100%, 470px); padding: 6px 20px; }
.vnews li + li { border-top: 1px solid var(--s-line); }
.vnews a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 16px 0; color: inherit; text-decoration: none; }
.vnews time { font: 500 12px/1.2 var(--ui); color: var(--s-mute); }
.vnews .news-c { justify-self: end; font: 500 12px/1.2 var(--ui); color: #b51f2a; }
.vnews b { grid-column: 1 / -1; font: 600 14.5px/1.35 var(--ui); }
.vnews a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* 10. the close, centered as B ends */
.bx-end { padding-block: clamp(96px, 12vw, 180px); text-align: center; }
.bx-end-in { display: grid; justify-items: center; gap: 0; max-width: 760px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.bx-end .bx-p { margin-inline: auto; }
.bx-end .btns { justify-content: center; margin-top: 32px; }
.bx-end .copy-mail { margin-top: 20px; }

@media (max-width: 1023px) { .bx-in { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
@media (max-width: 899px) {
  .bx { padding-block: 48px; }
  .bx-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bx.flip .bx-vis { order: 0; }
  .bx-t { order: -1; max-width: none; }
  .bx-vis { max-width: 520px; aspect-ratio: auto; }
}
@media (max-width: 639px) {
  .bx-in { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  /* Phones: the cards stack instead of overlapping, and the steps go one per row. */
  .v4 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .v4 .fv { height: 190px; }
  .vms, .vpl { padding-bottom: 0; }
  .vm-list, .vpl-c { width: 100%; }
  .vm-list { padding-bottom: 14px; }
  .vpl-c:first-child { padding-bottom: 16px; }
  .vm-ev, .vpl-c.dk { position: static; width: 100%; margin-top: 12px; }
  .vm-base { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px 10px; }
  .vm-base canvas { height: 44px; }
}

/* ---------- 4. Model cards, after the Muse "Get inspired" row: tall cards that run
   off the page's right edge, each with its caption under it, and an arrow to the
   next card; the heading, line and button sit above them. ---------- */
.mc { padding-block: 112px; background: var(--paper); overflow-x: clip; }
/* The copy sits above the cards, centred, in F3's header style: a gray pill, the
   36px heading and the muted 18px lead, in F3's 1280px column. */
.mc-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1280px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.mc-t { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 720px; margin: 0 auto 56px; text-align: center; }
.mc-k { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; background: #efeeec; font: 500 13px/1 var(--font); color: var(--ink); }
.mc-h { font: 450 36px/40px var(--font); letter-spacing: -0.36px; color: var(--ink); text-wrap: balance; }
.mc-p { font: 400 18px/29.25px var(--font); color: var(--mute); text-wrap: pretty; }
/* F4's selector: a pill for each card, in one row (it scrolls sideways when the
   window is too narrow for all six); the pill for the card in view is dark. */
.mc-pills { display: flex; gap: 8px; justify-content: safe center; margin: -16px 0 40px; overflow-x: auto; scrollbar-width: none; }
.mc-pills::-webkit-scrollbar { display: none; }
.mc-pill { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: #efeeec; font: 500 14px/1 var(--font); color: var(--ink); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.mc-pill:hover { background: #e7e6e3; }
.mc-pill[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* The cards that aren't selected fade back (once the script has marked one). */
.mc-c { transition: opacity 0.3s ease, filter 0.3s ease; }
.mc-track[data-mc-dim] .mc-c:not(.is-on) { opacity: 0.2; filter: saturate(0.2); }
.mc-track[data-mc-dim] .mc-c:not(.is-on):hover { opacity: 0.5; }
/* The row reaches the window's right edge: past the column's padding, and past the
   margin beside the 1280px column on wide windows. */
/* --cw is a card's width and --cv its least height (340 by 500 in proportion). */
.mc-r { --cw: clamp(260px, 25vw, 340px); --cv: calc(var(--cw) * 500 / 340); position: relative; min-width: 0; margin-right: min(-24px, calc((1280px - 100vw) / 2 - 24px)); }
/* One column a card; the cards share two rows (picture, caption), so every picture is as tall as the tallest. */
.mc-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cw); grid-template-rows: auto auto; column-gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 56px; }
.mc-track::-webkit-scrollbar { display: none; }
.mc-c { display: grid; grid-row: span 2; grid-template-rows: subgrid; scroll-snap-align: start; }
/* At least 340 by 500 in proportion, taller when a card's text needs it (on phones). */
.mc-v { display: flex; min-height: var(--cv); padding: 14px; border-radius: 28px; }
.mc-v-a { background: linear-gradient(135deg, #fbd8d2, #e6c9f2 50%, #b7c3ff); }
.mc-v-b { background: linear-gradient(135deg, #efe4f7, #c8dafb 45%, #8eb6f4); }
.mc-v-c { background: linear-gradient(135deg, #cfd8ff, #a9a6f4 50%, #c7d6ff); }
.mc-s { flex: 1; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -14px rgba(42, 31, 74, 0.35); color: var(--ink); }
.mc-tag { display: flex; justify-content: space-between; font: 500 12px/16px var(--font); color: var(--mute); }
.mc-tag span { font-family: var(--mono); font-weight: 400; }
.mc-n { margin-top: 12px; font: 450 20px/26px var(--font); text-wrap: balance; }
.mc-big { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.mc-big b { font: 360 52px/1 var(--font); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.mc-big span { font: 500 13px/1 var(--font); color: var(--mute); }
.mc-2 { margin-top: 8px; font: 400 14px/20px var(--font); color: var(--mute); font-variant-numeric: tabular-nums; }
.mc-tr { display: block; width: 100%; height: 64px; margin-block: auto; overflow: visible; }
.mc-f { display: grid; gap: 10px; }
.mc-f dt { font: 500 12px/16px var(--font); color: var(--mute); }
.mc-f dd { margin: 2px 0 0; font: 400 14px/20px var(--font); }
.mc-cond { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 400 12px/16px var(--font); color: var(--mute); }
/* Each caption is centred under its card (the user's note). */
.mc-cap { max-width: 44ch; margin: 14px auto 0; font: 400 15px/22px var(--font); color: var(--mute); text-align: center; text-wrap: pretty; }
.mc-cap b { font-weight: 500; color: var(--ink); }
/* Each card ends with its model card link. */
.mc-l { align-self: flex-start; margin-top: 12px; font: 450 14px/20px var(--font); color: var(--red); text-decoration: none; }
.mc-l::after { content: " \2197"; }
.mc-l:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The arrow sits on the row's right, level with the middle of the cards. */
.mc-nx { position: absolute; top: calc(var(--cv) / 2 - 22px); right: 32px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(29, 29, 31, 0.6); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mc-nx:hover { background: rgba(29, 29, 31, 0.78); }
.mc-nx svg { width: 22px; height: 22px; }
.mc-note { max-width: 860px; margin: 40px auto 0; font: 400 13px/20px var(--font); color: var(--mute); text-align: center; }
/* F5, F4 again with its copy placed as on F2: the same two columns, gap, width and
   padding as .f2-in, the copy at the left and the cards at the right, running off
   the page's right edge. */
/* Trimmed so the module is close to F3's height (the cards set its least height). */
.mc.mc2 { padding-block: 112px clamp(40px, 4vw, 56px); }   /* 112px down to the pill, as in F3 above */
.mc2 .mc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px clamp(40px, 6vw, 96px); max-width: 1240px; padding-left: max(56px, env(safe-area-inset-left, 0px)); padding-right: max(56px, env(safe-area-inset-right, 0px)); }
.mc2 .mc-r { margin-right: min(-56px, calc((1240px - 100vw) / 2 - 56px)); }
/* Its copy starts where F2's and F3's do: the same box as F3's (1355px at most, the
   same side inset), the cards still running off the window's right edge. */
@media (min-width: 900px) {
  /* F2's and F3's 1232px column and split; the cards run on to the window's right edge. */
  .mc2 .mc-in { max-width: 1232px; padding-inline: 24px; box-sizing: content-box; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); }
  .mc2 .mc-r { margin-right: calc(-1 * max(24px, (100vw - 1232px) / 2)); }
}
.mc2 .mc-note { grid-column: 1 / -1; margin: 0; text-align: left; }
/* F5's cards are wider: one card and half the next fill the row from its left
   edge to the window's edge (the row is the container, 100cqw wide). They are
   as tall as their content, with a shorter trace and tighter spacing than F4's,
   so they read more as rectangles. */
@media (min-width: 900px) {
  /* Each card is F3's gray card: as wide as the right column and as tall (56px + the metric cards + 56px). */
  .mc2 .mc-r { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); --cv: calc(112px + min(550px, var(--cw) - 80px) * 0.58); }
  .mc2 .mc-s { padding: 20px 22px 18px; }
  .mc2 .mc-big { margin-top: 12px; }
  .mc2 .mc-tr { height: 40px; margin-block: 12px; }
  .mc2 .mc-f { gap: 8px; }
  .mc2 .mc-cond { margin-top: 10px; padding-top: 10px; }
  .mc2 .mc-nx { top: calc(var(--cv) / 2 - 22px); }
}
/* F5's copy starts level with the top of the cards instead of centred on them. */
.mc2 .f2-t { align-self: start; }
@media (min-width: 1200px) { .mc2 .mc-v { height: var(--cv); } }   /* exactly F3's card height where the text fits */
/* F5's pills sit under its copy, in the left column, wrapping onto more rows there. */
/* F4's pills stack, one a row, on one left edge (wrapped, they fell unevenly). */
.mc2 .mc-pills { flex-direction: column; align-items: flex-start; gap: 8px; margin: 28px 0 0; padding: 0; overflow: visible; }
@media (max-width: 899px) {
  .mc2 .mc-in { grid-template-columns: minmax(0, 1fr); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .mc2 .mc-r { margin-right: calc(-1 * max(24px, env(safe-area-inset-right, 0px))); }
  .mc2 .f2-t { padding-inline: 20px; }   /* as F2's and F3's text on narrow screens */
  .mc.mc2 { padding-top: 80px; }
  .mc2 .mc-pills { flex-direction: row; overflow-x: auto; margin-right: -20px; padding-right: 20px; }
}
@media (max-width: 639px) {
  .mc { padding-block: 80px; }
  .mc-t { margin-bottom: 40px; }
  .mc-pills { justify-content: flex-start; margin: -8px calc(-1 * max(24px, env(safe-area-inset-right, 0px))) 32px 0; padding-right: 24px; }
  .mc-h { font-size: 30px; line-height: 36px; letter-spacing: -0.3px; }
  .mc-p { font-size: 16px; line-height: 26px; }
}
@media (max-width: 900px) {
  .mc-r { --cw: min(76vw, 320px); --cv: calc(var(--cw) * 500 / 340); margin-right: calc(-1 * max(24px, env(safe-area-inset-right, 0px))); }
  .mc-track { column-gap: 16px; padding-right: 24px; }
  .mc-nx { display: none; }
}

/* ---------- 6. Pricing: two columns after the user's reference (the copy at the
   left, one card per product at the right) in the site's theme: F2's copy styles,
   white cards with a hairline on the light gray band, red check marks and the
   site's buttons. ---------- */
/* White, so the bands alternate (the explainer above is gray). */
/* On the light gray (the user's call), the copy at the left and the two cards at the right. */
.pr { padding-block: clamp(72px, 9vw, 128px); background: #f1f1f3; }
.pr .f2-k { background: #fff; }
.pr-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: start; gap: 48px clamp(40px, 6vw, 96px); max-width: 1240px; margin-inline: auto; padding-left: max(56px, env(safe-area-inset-left, 0px)); padding-right: max(56px, env(safe-area-inset-right, 0px)); }
/* The plans at the left, the words at the right (above the plans on phones). */
.pr-t { min-width: 0; }
.pr-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; min-width: 0; }
.pr-c { display: flex; flex-direction: column; padding: 32px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 12px 32px -18px rgba(0, 0, 0, 0.14); color: var(--ink); }
.pr-n { font: 450 24px/30px var(--font); letter-spacing: -0.01em; }
.pr-s { margin-top: 10px; font: 400 15px/22px var(--font); color: var(--mute); }
/* The price under each product's name; the fine print sits above the button. */
.pr-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 20px; }
.pr-p b { font: 450 36px/1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-p span { font: 400 14px/20px var(--font); color: var(--mute); }
.pr-f { margin: -16px 0 24px; font: 400 13px/18px var(--font); color: var(--mute); }
.pr-f a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.pr-l { display: grid; gap: 14px; margin: 28px 0 36px; padding: 28px 0 0; border-top: 1px solid var(--line); list-style: none; }
.pr-l li { display: flex; gap: 12px; font: 400 15px/22px var(--font); }
.pr-l svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--red); }
.pr-b { width: 100%; margin-top: auto; }
@media (max-width: 899px) {
  .pr-in { grid-template-columns: minmax(0, 1fr); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .pr-t { padding-inline: 20px; }   /* as F2's, F3's and F5's text on narrow screens */
}
/* Its copy starts where F2's, F3's and F5's does, in F3's box; the cards end the same distance in from the right. */
@media (min-width: 900px) {
  .pr-in { max-width: 1355.31px; padding-inline: calc(28px + clamp(28px, 4vw, 56px)); }
}
/* Side by side, the two cards share their rows (name, line, price, list, fine
   print, button), so each part lines up across them. */
@media (min-width: 640px) {
  .pr-g { grid-template-rows: repeat(6, auto); row-gap: 0; }
  .pr-c { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  .pr-b { align-self: end; }
  .pr-l, .pr-p { align-content: start; }
}
@media (max-width: 639px) {
  .pr-g { grid-template-columns: minmax(0, 1fr); }
  .pr-c { padding: 28px 24px; }
}

/* ---------- 2. The explainer video, after Muse's small-business card: one white
   card (F4's fill, a firm hairline and soft shadow, its 24px corners) as wide as F4's white card (1323px at most), the copy at the left (a red eyebrow, the
   heading, one line, a red button), the 16:9 film inset 12px at the right with
   small round mute and pause buttons at its foot. ---------- */
/* Last on the page: room above it (after "Get started") and below it (before the footer). */
.vd { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 112px max(16px, env(safe-area-inset-left, 0px)); background: var(--paper); }
@media (max-width: 639px) { .vd { padding-bottom: 80px; } }
.vd-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: center; max-width: 1323.31px; margin-inline: auto; padding: 12px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 12px 32px -18px rgba(0, 0, 0, 0.14); }
.vd-t { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 24px 32px clamp(28px, 4vw, 56px); }
.vd-k { font: 500 14px/20px var(--font); color: var(--red); }
.vd-h { margin-top: 10px; font: 450 36px/40px var(--font); letter-spacing: -0.36px; color: var(--ink); text-wrap: balance; }
.vd-p { margin-top: 16px; font: 400 17px/26px var(--font); color: var(--ink-2); text-wrap: pretty; }
.vd-b { margin-top: 24px; }
.vd-f { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 4, 9, 0.08), 0 24px 56px -32px rgba(0, 4, 9, 0.22); }   /* a hairline and soft shadow to hold its edge on white */
.vd-f video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-ctl { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.vd-ctl button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(60, 64, 72, 0.72); color: #fff; cursor: pointer; transition: background-color 0.15s ease; }
.vd-ctl button:hover { background: rgba(40, 42, 48, 0.88); }
.vd-ctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vd-ctl .vd-play { fill: currentColor; stroke: none; }
/* Before it starts: a play button in the middle, and no small controls. */
.vd-go { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; background: none; cursor: pointer; }
.vd-go span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.14); transition: transform 0.15s ease; }
.vd-go:hover span { transform: scale(1.05); }
.vd-go svg { width: 22px; height: 22px; margin-left: 3px; fill: #111112; }
.vd-f.on .vd-go, .vd-f:not(.on) .vd-ctl { display: none; }
[data-vd-snd] .vd-on, [data-vd-snd][aria-pressed="true"] .vd-off, [data-vd-pp] .vd-play, [data-vd-pp][aria-pressed="true"] .vd-pause { display: none; }
[data-vd-snd][aria-pressed="true"] .vd-on, [data-vd-pp][aria-pressed="true"] .vd-play { display: block; }
/* The film sits as far in from the card's right edge (and its top and bottom) as
   the text does from its left (12px + the copy's inset), so it ends where F3's cards do. */
@media (min-width: 900px) { .vd-c { --pi: calc(12px + clamp(28px, 4vw, 56px)); padding: var(--pi) var(--pi) var(--pi) 12px; } }   /* and as far in from its top and bottom */
@media (max-width: 899px) {
  .vd-c { grid-template-columns: minmax(0, 1fr); padding: 8px 8px 28px; border-radius: 20px; }
  .vd-f { margin-inline: 20px; }   /* 28px in from the card's sides, as the text */
  .vd-t { padding: 28px 20px 24px; }
  .vd-h { font-size: 30px; line-height: 36px; letter-spacing: -0.3px; }
  .vd-p { font-size: 16px; line-height: 24px; }
  .vd-f { border-radius: 22px; }
  .vd-ctl { right: 12px; bottom: 12px; }
}

/* ---------- 1. Hero, copy only, after the user's xAI reference: an eyebrow, a two-line
   heading, two lines of subcopy and two buttons, centred on white, with a gray
   hairline under them as wide as F4's card. No card behind it. ---------- */
.h0 { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); background: var(--paper); }
.h0-in { display: flex; flex-direction: column; align-items: center; max-width: 1323.31px; margin-inline: auto; padding-block: 96px 56px; border-bottom: 1px solid var(--line); text-align: center; }   /* the hairline is back (the user's call) */
.h0-k { display: flex; align-items: center; gap: 8px; font: 400 14px/20px var(--font); color: var(--mute); }
.h0-k svg { width: 18px; height: 18px; color: var(--red); }
.h0-k b { font-weight: 500; color: var(--ink); }
.h0-k i { width: 1px; height: 12px; margin-inline: 8px; background: var(--line-2); }
/* One line, with the pulse mark between the two halves (as on the hero); sized to fit. */
.h0-h { margin-top: 20px; font: 450 min(68px, calc((100vw - 48px) / 14.2))/1.04 var(--font); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.h0-mk { display: inline-block; width: 0.92em; height: 0.92em; margin: 0 0.06em; vertical-align: -0.13em; }
.h0-mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.h0-mk .disc { fill: #0a0a0a; }
.h0-mk path { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.h0-h em { font-style: normal; color: var(--red); }
.h0-p { margin-top: 24px; font: 400 18px/29px var(--font); color: var(--ink-2); text-wrap: pretty; }
.h0-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.h0-go { background: var(--ink); color: #fff; }
.h0-go:hover { background: #2a2a2e; }
.h0-go svg { width: 14px; height: 14px; rotate: -90deg; }
.h0-film { border: 0; background: #efeeec; color: var(--ink); cursor: pointer; }
.h0-film:hover { background: #e7e6e3; }
/* The demo card starts 40px under the hairline (32px on phones). */
.h0 + .d-sec#top { margin-top: 40px; }
@media (max-width: 639px) {
  .h0-in { padding-block: 64px 40px; }
  .h0 + .d-sec#top { margin-top: 32px; }
  .h0-h { font-size: 40px; white-space: normal; text-wrap: balance; }   /* phones: two lines, the mark ending the first */
  .h0-k span, .h0-k i { display: none; }
  .h0-p { font-size: 16px; line-height: 26px; }
}

/* ---------- Capabilities, after the live site's "Discover what you can measure"
   (its words verbatim) in this page's design: the copy at the left in F2's style
   and left edge, two white cards at the right, their tops colour blocks (our red
   with a faint heartbeat, our ink) with a line icon and title, then the metrics on
   hairlines with light red "FDA cleared" tags. ---------- */
.cp { padding-block: 112px; background: var(--paper); }
.cp-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 48px clamp(40px, 5vw, 80px); max-width: 1232px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); box-sizing: content-box; }
.cp .f2-t { min-width: 0; }
.cp-r { min-width: 0; }
.cp-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.cp-c { overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 12px 32px -18px rgba(0, 0, 0, 0.14); }
.cp-top { position: relative; display: flex; align-items: center; gap: 16px; min-height: 160px; padding: 28px 32px; overflow: hidden; color: #fff; }
.cp-red { background: var(--red); }
.cp-ink { background: #1d1d1f; }
.cp-i { flex: none; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-top h3 { position: relative; font: 450 22px/27px var(--font); letter-spacing: -0.01em; text-wrap: balance; }
.cp-tr { position: absolute; right: 0; bottom: 14px; left: 0; width: 100%; height: 40px; }
.cp-tr polyline { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.6; stroke-linejoin: round; }
.cp-l { display: grid; margin: 0; padding: 20px 28px 28px; list-style: none; }
.cp-l li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding-block: 10px; border-top: 1px solid var(--line); font: 400 15px/22px var(--font); color: var(--ink); }
.cp-fda { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--red-soft); font: 500 12px/1 var(--font); color: var(--red); }
.cp-fda svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-note { margin-top: 20px; font: 400 13px/20px var(--font); color: var(--mute); }
@media (max-width: 899px) {
  .cp-in { grid-template-columns: minmax(0, 1fr); }
  .cp .f2-t { padding-inline: 20px; }
}
@media (max-width: 639px) {
  .cp { padding-block: 80px; }
  .cp-g { grid-template-columns: minmax(0, 1fr); }
  .cp-top { min-height: 120px; padding: 24px; }
  .cp-l { padding: 12px 20px 20px; }
}

/* ---------- Introducing eSSESSMENT, sized and placed after x.ai's "One API. Every
   modality." (the user's screenshot at 1710px): a 1232px column (239px margins at
   1710), a small gray eyebrow, a two-line 52px heading, 17px body and the checks
   at the left; the live demo on a warm gray card at the right. ---------- */
.ie { padding-block: 0 112px; background: var(--paper); }
.ie-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px clamp(40px, 5vw, 80px); max-width: 1232px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); box-sizing: content-box; }
@media (max-width: 1280px) { .ie-in { box-sizing: border-box; max-width: none; } }
.ie-t { min-width: 0; }
.ie-k { display: flex; align-items: center; gap: 8px; font: 400 15px/20px var(--font); color: var(--mute); }
.ie-i { flex: none; width: 16px; height: 16px; color: var(--red); }
.ie-h { margin-top: 16px; font: 450 clamp(38px, 3.6vw, 52px)/1.05 var(--font); letter-spacing: -0.025em; color: var(--ink); }
.ie-p { max-width: 46ch; margin-top: 20px; font: 400 17px/26px var(--font); color: var(--ink); text-wrap: pretty; }
.ie-l { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.ie-l li { display: flex; gap: 12px; font: 400 15px/22px var(--font); color: var(--ink-2); }
.ie-l svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--red); }
.ie-v { min-width: 0; padding: 40px 32px 48px 24px; border-radius: 24px; background: #f1f1f3; }
/* F2's card in F5's eSSESSMENT picture colours: pink to lavender to blue, with its soft white glow at the top left. */
/* The card is F5's picture's shape (540 by 420); the demo fills it, placed as F5's phone and browser. */
#introducing .ie-v { position: relative; aspect-ratio: 540 / 420; padding: 0; overflow: hidden; }
#introducing .ie-v > .d-host { position: absolute; inset: 0; }
#introducing .ie-v { background: radial-gradient(70% 70% at 25% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom right, #fbd8d2 0%, #e6c9f2 50%, #b7c3ff 100%); }
/* F1's line, then this section, then the demo card. */
.h0 + .ie { padding-top: 96px; }
/* The FDA module follows it directly: its own top space trimmed so the gap stays even. */
.ie + .f2 { padding-top: 16px; }
@media (max-width: 899px) {
  .ie-in { grid-template-columns: minmax(0, 1fr); }
  .ie-t { padding-inline: 20px; }
}
@media (max-width: 639px) {
  .ie { padding-bottom: 80px; }
  .h0 + .ie { padding-top: 64px; }
  .ie-v { padding: 24px 16px 32px 12px; border-radius: 20px; }
}

/* The SDK section (F3) uses F2's .ie layout, with F5's SDK picture at the right. */
.sd-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-v { padding: 0; overflow: hidden; background: none; }   /* F5's SDK picture fills the column */
.sd-v .vxs { display: block; width: 100%; height: auto; }
.sd-v .vxs-n { display: none; }
@media (max-width: 639px) { .sd-v .vxs-w { display: none; } .sd-v .vxs-n { display: block; } }

/* ---------- Narrow screens, after america.gov's mobile page: the picture first,
   then the eyebrow, headline and copy, set 20px in from the card's edge, one
   headline size and even gaps between the sections. ---------- */
@media (max-width: 899px) {
  .ie-in, #fda .f2-in, .mc2 .mc-in, .cp-in, .pr-in { row-gap: 0; }
  .ie-v, #fda .f2-vis, .mc2 .mc-r, .cp-r, .pr-g { order: 1; }
  .ie-t, #fda .f2-t, .mc2 .f2-t, .cp .f2-t, .pr-t { order: 2; margin-top: 36px; padding-inline: 20px; }
  .ie-h, #fda .f2-h, .mc2 .f2-h, .cp .f2-h, .pr .f2-h { font: 450 32px/1.08 var(--font); letter-spacing: -0.022em; }
  .ie-p, #fda .f2-p, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { margin-top: 20px; }
  .mc2 .mc-pills { flex-flow: row wrap; margin: 24px 0 0; padding: 0; overflow: visible; }
  .ie, .ie + .f2, .mc.mc2, .cp { padding-top: 72px; padding-bottom: 8px; }
  /* Only the card in view keeps its caption, so the copy sits close under it. */
  .mc2 .mc-c:not(.is-on) .mc-cap { display: none; }
}

/* The model cards are as tall as F4's gray card at every width. Below 1200px that
   leaves no room for the stacked card, so its parts sit in a grid: the name across
   the top, the metric at the left beside the facts, the conditions and link last,
   with the trace left out. */
@media (max-width: 1199px) {
  .mc2 .mc-v { height: var(--cv); min-height: 0; }
  .mc2 .mc-s { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto 1fr auto auto; column-gap: 14px; align-content: start; }
  .mc2 .mc-tag, .mc2 .mc-n, .mc2 .mc-cond, .mc2 .mc-l { grid-column: 1 / -1; }
  .mc2 .mc-big { grid-column: 1; grid-row: 3; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
  .mc2 .mc-2 { grid-column: 1; grid-row: 4; }
  .mc2 .mc-tr { display: none; }
  .mc2 .mc-f { grid-column: 2; grid-row: 3 / span 2; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .mc2 .mc-s { padding: 18px 20px; }
  .mc2 .mc-n { margin-top: 8px; font-size: 18px; line-height: 23px; }
  .mc2 .mc-big { margin-top: 14px; }
  .mc2 .mc-big b { font-size: 40px; }
  .mc2 .mc-f { margin-top: 14px; }
  .mc2 .mc-cond { margin-top: 12px; }
}
@media (max-width: 899px) {
  .mc2 .mc-r { --cw: calc(100vw - 48px); --cv: calc(64px + min(550px, 100vw - 80px) * 0.58); }
  .mc2 .mc-track { column-gap: 16px; padding-right: 24px; }
  .mc2 .mc-v { padding: 8px; border-radius: 20px; }
  .mc2 .mc-s { padding: 12px 14px; border-radius: 13px; }
  .mc2 .mc-tag { font-size: 11px; line-height: 14px; }
  .mc2 .mc-n { margin-top: 4px; font-size: 15px; line-height: 19px; }
  .mc2 .mc-big { margin-top: 8px; }
  .mc2 .mc-big b { font-size: 30px; }
  .mc2 .mc-big span { font-size: 11px; line-height: 14px; }
  .mc2 .mc-2 { margin-top: 4px; font-size: 11px; line-height: 14px; }
  .mc2 .mc-f { gap: 6px; margin-top: 8px; }
  .mc2 .mc-f dt { font-size: 10.5px; line-height: 13px; }
  .mc2 .mc-f dd { margin-top: 1px; font-size: 12px; line-height: 15px; }
  .mc2 .mc-cond { margin-top: 8px; padding-top: 6px; font-size: 10.5px; line-height: 13px; }
  .mc2 .mc-l { margin-top: 4px; font-size: 12px; line-height: 15px; }
  .mc2 .mc-nx { top: calc(var(--cv) / 2 - 18px); right: 12px; width: 36px; height: 36px; }
}

/* F2's and F3's cards are as tall as F4's gray card: its stage (0.58 of the column
   less its padding, 550 wide at most) plus its padding, at every width. */
#introducing .ie-v, #sdk .ie-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); aspect-ratio: auto; }
@media (max-width: 899px) { #introducing .ie-v, #sdk .ie-v { height: calc(64px + min(550px, 100vw - 80px) * 0.58); } }
.sd-v .vxs { height: 100%; }

/* Phones, after america.gov: the picture cards (F2, F3, F4 and the model cards) are
   square, with rounded corners. */
@media (max-width: 639px) {
  #introducing .ie-v, #sdk .ie-v { height: auto; aspect-ratio: 1; border-radius: 20px; }
  #fda .f2-vis { display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1; border-radius: 20px; }
  .mc2 .mc-r { --cv: calc(100vw - 48px); }
  .mc2 .mc-s { grid-template-rows: auto auto auto auto 1fr auto auto; padding: 16px 18px; }
  .mc2 .mc-n { margin-top: 6px; font-size: 17px; line-height: 22px; }
  .mc2 .mc-big { margin-top: 12px; }
  .mc2 .mc-big b { font-size: 36px; }
  .mc2 .mc-2 { font-size: 12px; line-height: 16px; }
  .mc2 .mc-f { gap: 8px; margin-top: 12px; }
  .mc2 .mc-f dt { font-size: 11px; line-height: 14px; }
  .mc2 .mc-f dd { font-size: 13px; line-height: 17px; }
  .mc2 .mc-tr { display: block; grid-column: 1 / -1; grid-row: 5; align-self: center; height: 44px; margin: 8px 0; }
  .mc2 .mc-cond { grid-row: 6; font-size: 11px; line-height: 14px; }
  .mc2 .mc-l { grid-row: 7; font-size: 13px; line-height: 17px; }
}

/* Phones, measured from america.gov's mobile page (390px wide): the card 89% of the
   screen (21px margins), square, 18px corners; the text 21px in from the card's edge,
   the headline 35px under the card at 26px, the copy 22px under it at 16/24; about
   72px from one section's last line to the next card. The eyebrows are left out
   there, so the headline comes first under the picture. */
@media (max-width: 639px) {
  .ie-in, #fda .f2-in, .mc2 .mc-in, .cp-in, .pr-in { padding-left: max(21px, env(safe-area-inset-left, 0px)); padding-right: max(21px, env(safe-area-inset-right, 0px)); }
  .mc2 .mc-r { --cw: calc(100vw - 42px); --cv: calc(100vw - 42px); margin-right: calc(-1 * max(21px, env(safe-area-inset-right, 0px))); }
  .mc2 .mc-track { padding-right: 21px; }
  #introducing .ie-v, #sdk .ie-v, #fda .f2-vis, .mc2 .mc-v { border-radius: 18px; }
  .mc2 .mc-s { border-radius: 11px; }
  .ie-k, #fda .f2-k, .mc2 .f2-k, .cp .f2-k, .pr .f2-k { display: none; }
  .ie-t, #fda .f2-t, .mc2 .f2-t, .cp .f2-t, .pr-t { margin-top: 35px; padding-inline: 21px; }
  .ie-h, #fda .f2-h, .mc2 .f2-h, .cp .f2-h, .pr .f2-h { margin-top: 0; font: 450 26px/1.07 var(--font); letter-spacing: -0.02em; }
  .ie-p, #fda .f2-p, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { margin-top: 22px; font-size: 16px; line-height: 24px; }
  .ie-l, #fda .f2-a { margin-top: 28px; }
  .ie, .ie + .f2, .mc.mc2, .cp { padding-top: 72px; padding-bottom: 0; }
}
@media (max-width: 379px) { .mc2 .mc-tr { display: none; } }   /* the smallest phones: no room for the trace */
/* Phones: no bullet lists outside pricing (F2's and F3's checks), and F2's and F3's titles on one line. */
@media (max-width: 639px) { .ie-l { display: none; } .ie-h br { display: none; } .ie-h { font-size: min(26px, calc((100vw - 84px) / 11.8)); } }   /* 26px, a touch smaller on the smallest phones so the line fits */
.cp-pic, .cp-key { display: none; }
/* Phones: the picture is Homepage v2's grid of app icons (tools/cp.py), our eight
   metrics as iOS-style icons on a white square card, each name under its icon,
   "FDA cleared" as a red badge, a faded blurred row above and below. The groups'
   names are a key under the card; then the headline, copy and note. */
@media (max-width: 639px) {
  .cp-r { display: contents; }
  .cp-pic { container-type: inline-size; position: relative; display: block; order: 1; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e9e8e5; }
  .cp-apps { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 21.8cqw); align-content: center; justify-content: center; gap: 4cqw 2.3cqw; }
  .cp-a { display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; min-width: 0; }
  .cp-a-bl { filter: blur(5px); opacity: 0.4; }
  .cp-ic { position: relative; display: grid; place-items: center; flex: none; width: 16.1cqw; height: 16.1cqw; border-radius: 24%; background: linear-gradient(160deg, var(--g1), var(--g2)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 14px -6px rgba(0, 0, 0, 0.28); }
  .cp-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); pointer-events: none; }
  .cp-ic-bp { --g1: #ff8a75; --g2: #e5484d; }
  .cp-ic-hr { --g1: #ff5f6d; --g2: #c3173a; }
  .cp-ic-br { --g1: #ffcf70; --g2: #f39a1e; }
  .cp-ic-pw { --g1: #ff9fb0; --g2: #ee4f78; }
  .cp-ic-hrv { --g1: #ffab6e; --g2: #f0612f; }
  .cp-ic-face { --g1: #b9a2ff; --g2: #7254ef; }
  .cp-ic-lip { --g1: #8a9bff; --g2: #4652e0; }
  .cp-ic-blink { --g1: #7ee0cf; --g2: #23a28c; }
  .cp-v { position: relative; z-index: 1; display: block; width: 66%; height: 33%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cp-v-dots { fill: #fff; stroke: none; }
  .cp-badge { position: absolute; top: -1.6cqw; right: -4.2cqw; z-index: 2; display: grid; place-items: center; height: 4.6cqw; padding: 0 1.6cqw; border-radius: 99px; background: #ff3b30; box-shadow: 0 0 0 1.5px #fff; font: 600 max(8px, 2.4cqw)/1 var(--font); font-style: normal; color: #fff; white-space: nowrap; }
  .cp-a p { width: 100%; font: 500 max(9.5px, 3cqw)/1.22 var(--font); color: var(--ink); text-align: center; }
  .cp-key { display: flex; order: 1; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; padding-inline: 21px; font: 500 12px/16px var(--font); color: var(--mute); }
  .cp-key span { display: inline-flex; align-items: center; gap: 6px; }
  .cp-key span::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(160deg, #ff8a75, #e5484d); }
  .cp-key .cp-key-k::before { background: linear-gradient(160deg, #b9a2ff, #7254ef); }
  .cp .f2-t { order: 2; }
  .cp-g { display: none; }
  .cp .cp-note { order: 3; margin-top: 20px; padding-inline: 21px; font-size: 13px; line-height: 19px; }
}

.mc-dd { display: none; }
/* Phones: F5's pills become a dropdown (site.js), centred at the top of the gradient
   frame like Apple's "Compare with" picker; the white model card sits inside wider
   margins and leaves out its trace there. */
@media (max-width: 639px) {
  .mc2 .mc-pills { display: none; }
  .mc-dd { position: absolute; top: 16px; left: 0; z-index: 3; display: flex; justify-content: center; width: var(--cw); pointer-events: none; }
  .mc-dd select { max-width: calc(var(--cw) - 28px); height: 40px; padding: 0 36px 0 16px; overflow: hidden; border: 1px solid rgba(29, 29, 31, 0.3); border-radius: 99px; background: rgba(255, 255, 255, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 13px; font: 500 13.5px/1 var(--font); color: var(--ink); text-overflow: ellipsis; white-space: nowrap; -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer; }
  .mc2 .mc-v { padding: 70px 14px 14px; }
  .mc2 .mc-tr { display: none; }
  .mc2 .mc-s { grid-template-rows: auto auto auto 1fr auto auto; }
  .mc2 .mc-cond { grid-row: auto; }
  .mc2 .mc-l { grid-row: auto; }
}
@media (max-width: 379px) { .mc2 .mc-v { padding: 62px 12px 12px; } .mc-dd { top: 13px; } .mc-dd select { height: 36px; font-size: 13px; } }   /* the smallest phones */
/* Phones: each section's headline above its picture, the copy under it. */
@media (max-width: 639px) {
  .ie-t, #fda .f2-t, .mc2 .f2-t, .cp .f2-t, .pr-t { display: contents; }
  .ie-h, #fda .f2-h, .mc2 .f2-h, .cp .f2-h, .pr .f2-h { order: 0; margin: 0 21px 28px; }
  .ie-v, #fda .f2-vis, .mc2 .mc-r, .cp-pic, .cp-key, .pr-g { order: 1; }
  .ie-p, #fda .f2-p, #fda .f2-a, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { order: 2; margin-inline: 21px; }
  .ie-p, #fda .f2-p, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { margin-top: 28px; }
  #fda .f2-a { margin-top: 20px; }
  .cp .cp-note { order: 3; }
}
/* Phones: the headline, picture and copy share one left edge. */
@media (max-width: 639px) {
  .ie-h, #fda .f2-h, .mc2 .f2-h, .cp .f2-h, .pr .f2-h { margin-inline: 0; }
  .ie-p, #fda .f2-p, #fda .f2-a, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { margin-inline: 0; }
  .cp .cp-note, .cp-key { padding-inline: 0; }
  .cp-key { justify-content: flex-start; }
  .mc2 .mc-cap { margin-inline: 0; text-align: left; }
}
/* Phones: the copy under each picture as Apple sets it: set in a little from the
   picture's edge, gray, its first sentence in ink. */
.lp { font-weight: inherit; }
@media (max-width: 639px) {
  .ie-p, #fda .f2-p, #fda .f2-a, .mc2 .f2-p, .cp .f2-p, .pr .f2-p, .cp .cp-note { margin-inline: 14px; }
  .ie-p, #fda .f2-p, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { font-size: 17px; line-height: 1.42; color: var(--mute); }
  .lp { color: var(--ink); }
}
/* Phones: the model's name is in the dropdown above, so the card leaves it out. */
@media (max-width: 639px) { .mc2 .mc-n { display: none; } }
/* Phones: Apple's side margins (6.25% of the screen, about 24px), for every card and line. */
@media (max-width: 639px) {
  .ie-in, #fda .f2-in, .mc2 .mc-in, .cp-in, .pr-in { padding-left: max(6.25vw, env(safe-area-inset-left, 0px)); padding-right: max(6.25vw, env(safe-area-inset-right, 0px)); }
  .mc2 .mc-r { --cw: 87.5vw; --cv: 87.5vw; margin-right: calc(-1 * max(6.25vw, env(safe-area-inset-right, 0px))); }
  .mc2 .mc-track { padding-right: 6.25vw; }
}
@media (max-width: 639px) { .h0, .vd { padding-left: max(6.25vw, env(safe-area-inset-left, 0px)); padding-right: max(6.25vw, env(safe-area-inset-right, 0px)); } }
/* F5: the card's number links out (site.js); on phones it replaces the red link. */
.mc-id { font-family: var(--mono); font-weight: 400; color: var(--red); text-decoration: none; }
.mc-id:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 639px) { .mc2 .has-id-link .mc-l { display: none; } }
/* Phones: section headlines at Apple's size and weight (28px semibold, 32px lines). */
@media (max-width: 639px) {
  .ie-h, #fda .f2-h, .mc2 .f2-h, .cp .f2-h, .pr .f2-h, .vd-h { font: 600 28px/32px var(--font); letter-spacing: -0.01em; }
  .ie-h { font-size: min(28px, calc((100vw - 12.5vw) / 12.4)); }   /* F2's and F3's one-line titles still fit */
}
@media (max-width: 639px) {
  .mc2 .mc-cond { grid-row: 5; }   /* stays under the facts with the name left out */
  .mc2 .mc-l { grid-row: 6; }
  .mc-dd select { max-width: calc(var(--cw) - 16px); padding: 0 32px 0 14px; font-size: 13px; background-position: right 12px center; }
}
/* Wider screens: capabilities uses the phones' app-icon card too, in the right
   column, as tall as F4's gray card (the same formula), the key under it. */
@media (min-width: 640px) {
  .cp-g { display: none; }
  .cp-pic { position: relative; display: block; height: calc(64px + min(550px, 100vw - 80px) * 0.58); overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #e9e8e5; }
  .cp-apps { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 112px); align-content: center; justify-content: center; gap: 26px 18px; }
  .cp-a { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
  .cp-a-bl { filter: blur(6px); opacity: 0.4; }
  .cp-ic { position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 24%; background: linear-gradient(160deg, var(--g1), var(--g2)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 18px -8px rgba(0, 0, 0, 0.3); }
  .cp-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); pointer-events: none; }
  .cp-ic-bp { --g1: #ff8a75; --g2: #e5484d; }
  .cp-ic-hr { --g1: #ff5f6d; --g2: #c3173a; }
  .cp-ic-br { --g1: #ffcf70; --g2: #f39a1e; }
  .cp-ic-pw { --g1: #ff9fb0; --g2: #ee4f78; }
  .cp-ic-hrv { --g1: #ffab6e; --g2: #f0612f; }
  .cp-ic-face { --g1: #b9a2ff; --g2: #7254ef; }
  .cp-ic-lip { --g1: #8a9bff; --g2: #4652e0; }
  .cp-ic-blink { --g1: #7ee0cf; --g2: #23a28c; }
  .cp-v { position: relative; z-index: 1; display: block; width: 66%; height: 33%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cp-v-dots { fill: #fff; stroke: none; }
  .cp-badge { position: absolute; top: -7px; right: -22px; z-index: 2; display: grid; place-items: center; height: 18px; padding: 0 7px; border-radius: 99px; background: #ff3b30; box-shadow: 0 0 0 2px #fff; font: 600 10px/1 var(--font); font-style: normal; color: #fff; white-space: nowrap; }
  .cp-a p { width: 100%; font: 500 13px/16px var(--font); color: var(--ink); text-align: center; }
  .cp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font: 500 13px/18px var(--font); color: var(--mute); }
  .cp-key span { display: inline-flex; align-items: center; gap: 7px; }
  .cp-key span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(160deg, #ff8a75, #e5484d); }
  .cp-key .cp-key-k::before { background: linear-gradient(160deg, #b9a2ff, #7254ef); }
}
@media (min-width: 900px) {
  .cp-in { align-items: center; }
  .cp-pic { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); }
}
/* Phones: the copy under each picture set in less from the edges (7px, was 14px). */
@media (max-width: 639px) { .ie-p, #fda .f2-p, #fda .f2-a, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { margin-inline: 7px; } }
/* Phones: the copy under each picture set in 25px from both of its edges, as america.gov does. */
@media (max-width: 639px) { .ie-p, #fda .f2-p, #fda .f2-a, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { margin-inline: 25px; } }
/* Phones: no "View FDA clearance" link or its number under F4's copy. */
@media (max-width: 639px) { #fda .f2-a { display: none; } }
.f2-il { color: inherit; text-decoration: underline; text-decoration-color: rgba(173, 32, 41, 0.5); text-underline-offset: 3px; }
.f2-il:hover { color: var(--red); }
/* F4's clearance number links inline in its copy, so the separate link is gone at every width. */
#fda .f2-a { display: none; }
/* Capabilities: no blurred icons above and below the grid (the user's call). */
.cp-a-bl { display: none !important; }
/* Capabilities: no colour key under the card (the user's call). */
.cp-key { display: none !important; }
/* Phones: F5's pills are back, one sideways-scrolling row under the headline and
   above the card (the user's call), in place of the dropdown. */
@media (max-width: 639px) {
  .mc2 .mc-pills { display: flex; order: 0; flex-flow: row nowrap; gap: 8px; margin: 0 calc(-1 * max(6.25vw, env(safe-area-inset-right, 0px))) 20px 0; padding: 0 6.25vw 0 0; overflow-x: auto; scrollbar-width: none; }
  .mc2 .mc-pills::-webkit-scrollbar { display: none; }
  .mc-dd { display: none; }
  .mc2 .mc-v { padding: 14px; }
}
@media (max-width: 379px) { .mc2 .mc-v { padding: 12px; } }
/* Every card rounded like america.gov's picture (about 8% of its width): 28px on
   phones, 40px wider; cards inside a card take the outer radius less the gap. */
#introducing .ie-v, #sdk .ie-v, #fda .f2-vis, .mc2 .mc-v, .cp-pic, .pr-c, .vd-c { border-radius: 40px; }
.mc2 .mc-s { border-radius: 26px; }
@media (max-width: 639px) {
  #introducing .ie-v, #sdk .ie-v, #fda .f2-vis, .mc2 .mc-v, .cp-pic, .pr-c, .vd-c { border-radius: 28px; }
  .mc2 .mc-s { border-radius: 15px; }
}
@media (max-width: 639px) {
  .mc2 .mc-s { grid-template-rows: auto auto auto auto 1fr auto auto; }   /* the facts stay together; the space falls above the conditions */
  .mc2 .mc-cond { grid-row: 6; }
  .mc2 .mc-l { grid-row: 7; }
}
/* Phones: F5's pills wrap onto rows instead of sliding sideways. */
@media (max-width: 639px) { .mc2 .mc-pills { flex-wrap: wrap; margin-right: 0; padding-right: 0; overflow: visible; } }
/* Phones: F5's selected pill gray, the others white with a hairline. */
@media (max-width: 639px) {
  .mc2 .mc-pill { background: #fff; box-shadow: inset 0 0 0 1px #e2e1de; color: var(--ink); }
  .mc2 .mc-pill:hover { background: #fff; }
  .mc2 .mc-pill[aria-pressed="true"] { background: #efeeec; box-shadow: none; color: var(--ink); }
}
/* Phones: model cards in Apple's carousel shape: portrait (0.82 wide to tall), the
   next card peeking at the right, 16px apart. */
@media (max-width: 639px) {
  .mc2 .mc-r { --cw: 80vw; --cv: calc(80vw / 0.823); }
  .mc2 .mc-track { column-gap: 16px; }
}
@media (max-width: 639px) { .mc2 .mc-tr { display: block; grid-column: 1 / -1; grid-row: 5; align-self: center; height: 56px; margin: 12px 0; } }   /* the taller card has room for the trace again */
@media (max-width: 379px) { .mc2 .mc-tr { height: 40px; margin: 6px 0; } }
@media (max-width: 379px) { .mc2 .mc-tr { height: 30px; margin: 4px 0; } }
/* Phones: model cards square again and smaller, one and a half on screen (a card,
   12px, then half the next); their parts in one column at small sizes, no trace. */
@media (max-width: 639px) {
  .mc2 .mc-r { --cw: calc((93.75vw - 12px) / 1.5); --cv: var(--cw); }
  .mc2 .mc-track { column-gap: 12px; }
  .mc2 .mc-v { padding: 8px; border-radius: 24px; }
  .mc2 .mc-s { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 16px; }
  .mc2 .mc-tag { font-size: 10px; line-height: 13px; }
  .mc2 .mc-big { margin-top: 6px; column-gap: 5px; }
  .mc2 .mc-big b { font-size: 26px; }
  .mc2 .mc-big span, .mc2 .mc-2 { font-size: 10px; line-height: 13px; }
  .mc2 .mc-2 { margin-top: 2px; }
  .mc2 .mc-tr { display: none; }
  .mc2 .mc-f { gap: 5px; margin-top: 8px; }
  .mc2 .mc-f dt { font-size: 9.5px; line-height: 12px; }
  .mc2 .mc-f dd { font-size: 10.5px; line-height: 13px; }
  .mc2 .mc-cond { margin-top: auto; padding-top: 5px; font-size: 9.5px; line-height: 12px; }
  .mc2 .mc-l { margin-top: 3px; font-size: 10.5px; line-height: 13px; }
  .mc2 .mc-cap { font-size: 13px; line-height: 18px; }
}
@media (max-width: 379px) { .mc2 .mc-r { --cw: calc((93.75vw - 12px) / 1.3); } }   /* the smallest phones: a little more than one card, so the longest still fits */
/* F2's and F3's checks in gray, text and marks. */
.ie-l li, .ie-l svg { color: var(--mute); }
.ie-i { color: var(--mute); }   /* the eyebrows' marks gray, like the checks */
#introducing .ie-i { display: none; }   /* F2's eyebrow without its pulse mark; F3 keeps its code mark */
.cp-apps .cp-a-bl { display: flex !important; filter: blur(10px); opacity: 0.25; }   /* the blurred rows back, fainter */
/* F4's eyebrow set like F2's and F3's: plain gray text, no pill. */
#fda .f2-k { display: flex; align-items: center; height: auto; padding: 0; border-radius: 0; background: none; font: 400 15px/20px var(--font); color: var(--mute); }
@media (min-width: 900px) { #fda .f2-h { margin-top: 16px; } }
/* Wider screens: the model cards back to their first width (25vw, 260 to 340px),
   kept at F4's card height; the row shows more of them. */
@media (min-width: 900px) { .mc2 .mc-r { --cw: clamp(260px, 25vw, 340px); } }
@media (min-width: 900px) { .mc2 .mc-r { --cv: calc(112px + min(550px, (min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12 - 80px) * 0.58); } .mc2 .mc-v { height: var(--cv); min-height: 0; } }   /* the height stays F4's */
@media (max-width: 639px) { .mc2 .f2-p { display: none; } }   /* phones: no copy under the model cards */
/* Wider screens, narrower model cards: their parts in the compact grid at every
   width (name across, metric beside the facts, conditions and link last), no trace. */
@media (min-width: 900px) {
  .mc2 .mc-s { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr auto auto; column-gap: 12px; align-content: start; padding: 16px 18px; }
  .mc2 .mc-tag, .mc2 .mc-n, .mc2 .mc-cond, .mc2 .mc-l { grid-column: 1 / -1; }
  .mc2 .mc-big { grid-column: 1; grid-row: 3; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; margin-top: 12px; }
  .mc2 .mc-big b { font-size: 34px; }
  .mc2 .mc-2 { grid-column: 1; grid-row: 4; font-size: 13px; line-height: 17px; }
  .mc2 .mc-tr { display: none; }
  .mc2 .mc-f { grid-column: 2; grid-row: 3 / span 2; gap: 8px; margin-top: 12px; }
  .mc2 .mc-f dt { font-size: 11.5px; line-height: 15px; }
  .mc2 .mc-f dd { font-size: 13px; line-height: 17px; }
  .mc2 .mc-n { margin-top: 8px; font-size: 16px; line-height: 21px; }
  .mc2 .mc-cond { margin-top: 10px; padding-top: 8px; font-size: 11.5px; line-height: 15px; }
  .mc2 .mc-l { margin-top: 6px; font-size: 13px; line-height: 17px; }
}
@media (min-width: 900px) and (max-width: 999px) { .mc2 .mc-s { padding: 13px 14px; } }
@media (min-width: 900px) and (max-width: 999px) { .mc2 .mc-f dd { font-size: 12.5px; line-height: 16px; } }
@media (min-width: 900px) and (max-width: 999px) { .mc2 .mc-n { margin-top: 5px; } .mc2 .mc-big { margin-top: 8px; } .mc2 .mc-f { margin-top: 8px; } }
/* ---------- F6: the model cards as an app window (tools/mcx.py): the six cards
   listed at the left, the selected one whole at the right under a title bar, on
   a white card as tall as F4's. ---------- */
.mcx { padding-top: 112px; }
@media (max-width: 639px) { .mcx { padding-top: 72px; } }
#model-cards-app .ie-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); padding: 0; overflow: hidden; border-radius: 40px; background: #fff; box-shadow: 0 0 0 1px #e9e8e5, 0 12px 32px -18px rgba(0, 0, 0, 0.14); }
.mx-win { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); height: 100%; }
.mx-side { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 18px 12px; overflow-y: auto; border-right: 1px solid #ececef; background: #fbfbfa; scrollbar-width: none; }
.mx-head { margin: 4px 10px 10px; font: 500 13px/18px var(--font); color: var(--mute); }
.mx-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; }
.mx-row:hover { background: #f3f2f0; }
.mx-row.is-on { background: #efeeec; }
.mx-row span { display: grid; min-width: 0; }
.mx-row b { overflow: hidden; font: 500 13.5px/18px var(--font); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.mx-row small { overflow: hidden; font: 400 12px/16px var(--font); color: var(--mute); white-space: nowrap; text-overflow: ellipsis; }
.mx-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.mx-dot.mc-v-a { background: linear-gradient(135deg, #fbd8d2, #e6c9f2 50%, #b7c3ff); }
.mx-dot.mc-v-b { background: linear-gradient(135deg, #efe4f7, #c8dafb 45%, #8eb6f4); }
.mx-dot.mc-v-c { background: linear-gradient(135deg, #cfd8ff, #a9a6f4 50%, #c7d6ff); }
.mx-main { display: flex; min-width: 0; min-height: 0; }
.mx-pane { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.mx-pane[hidden] { display: none; }
.mx-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #ececef; font: 500 14px/18px var(--font); color: var(--ink); }
.mx-top .mx-dot { width: 22px; height: 22px; }
.mx-body { flex: 1; min-height: 0; padding: 16px; overflow-y: auto; scrollbar-width: none; }
.mx-body .mc-s { display: flex; flex-direction: column; height: 100%; padding: 16px 18px; border-radius: 22px; box-shadow: 0 0 0 1px #ececef; }
.mx-body .mc-n { display: none; }
.mx-body .mc-big { margin-top: 10px; }
.mx-body .mc-big b { font-size: 40px; }
.mx-body .mc-tr { height: 40px; margin-block: auto; }
.mx-body .mc-f { gap: 8px; }
.mx-body .mc-cond { margin-top: 10px; padding-top: 10px; }
.mx-body .mc-l { margin-top: 8px; }
@media (max-width: 899px) { #model-cards-app .ie-v { height: calc(64px + min(550px, 100vw - 80px) * 0.58); } }
@media (max-width: 639px) {
  #model-cards-app .ie-v { height: auto; aspect-ratio: 1; border-radius: 28px; }
  .mx-win { grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); }
  .mx-side { padding: 10px 6px; }
  .mx-head { margin: 2px 6px 6px; font-size: 11px; line-height: 14px; }
  .mx-row { gap: 0; padding: 7px 8px; border-radius: 10px; }
  .mx-row .mx-dot { display: none; }
  .mx-row b { font-size: 11px; line-height: 14px; white-space: normal; }
  .mx-row small { display: none; }
  .mx-top { padding: 10px 12px; font-size: 12px; line-height: 15px; }
  .mx-top .mx-dot { width: 16px; height: 16px; }
  .mx-body { padding: 8px; }
  .mx-body .mc-s { padding: 10px; border-radius: 14px; }
  .mx-body .mc-tag, .mx-body .mc-big span, .mx-body .mc-2, .mx-body .mc-cond, .mx-body .mc-f dt { font-size: 9.5px; line-height: 12px; }
  .mx-body .mc-big b { font-size: 24px; }
  .mx-body .mc-f dd, .mx-body .mc-l { font-size: 10.5px; line-height: 13px; }
  .mx-body .mc-tr { display: none; }
  .mx-body .mc-cond { margin-top: auto; }
}
@media (max-width: 639px) { .mcx { padding-top: 72px; } }
/* ---------- Capabilities, after Homepage v2's platform grid (tools/cp.py): no
   card; 60px flat icons with 16px corners on a 6-column grid, 22px apart; the
   ends of the middle rows blurred 5px at 60%, the rows above and below 9px at 45%;
   each metric's name under its icon. Phones: 52px icons, 16px apart, five columns
   (the right-hand one dropped), as v2 does. ---------- */
.cp-pic.cp-pic2 { container-type: normal; position: static; display: flex; align-items: center; justify-content: center; height: auto; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.cp-pic2 .cp-apps { position: static; display: grid; grid-template-columns: repeat(6, 60px); align-items: start; justify-content: center; gap: 22px; padding: 20px 0; }
.cp-pic2 .cp-a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 60px; }
.cp-pic2 .cp-a-bl, .cp-apps .cp-pic2 .cp-a-bl { display: flex !important; filter: blur(5px); opacity: 0.6; }
.cp-pic2 .cp-a-bl2 { display: flex; filter: blur(9px); opacity: 0.45; }
.cp-pic2 .cp-ic { width: 60px; height: 60px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 6px 14px -6px rgba(0, 0, 0, 0.2); }
.cp-pic2 .cp-ic::after { display: none; }
.cp-pic2 .cp-ic-hr { background: #e5484d; }
.cp-pic2 .cp-ic-br { background: #f39a1e; }
.cp-pic2 .cp-ic-hrv { background: #f05138; }
.cp-pic2 .cp-ic-bp { background: #cb3837; }
.cp-pic2 .cp-ic-pw { background: #ee4f78; }
.cp-pic2 .cp-ic-face { background: #7f52ff; }
.cp-pic2 .cp-ic-lip { background: #0078d4; }
.cp-pic2 .cp-ic-blink { background: #3ddc84; }
.cp-pic2 .cp-v { width: 60%; height: 30%; stroke-width: 2; }
.cp-pic2 .cp-badge { top: -7px; right: -20px; height: 17px; padding: 0 6px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--paper); }
.cp-pic2 .cp-a p { width: 82px; font: 500 11.5px/14px var(--font); color: var(--ink); text-align: center; }
.cp-pic2 + .cp-key { display: none !important; }
@media (max-width: 639px) {
  .cp-pic2 .cp-apps { grid-template-columns: repeat(5, 52px); gap: 16px; padding: 8px 0; }
  .cp-pic2 .cp-apps > :nth-child(6n) { display: none !important; }
  .cp-pic2 .cp-a { width: 52px; }
  .cp-pic2 .cp-ic { width: 52px; height: 52px; border-radius: 14px; }
  .cp-pic2 .cp-a p { width: 66px; font-size: 10px; line-height: 12.5px; }
  .cp-pic2 .cp-badge { right: -16px; height: 15px; font-size: 8.5px; }
}
.mx-body .mc-s { padding: 4px 6px; border-radius: 0; box-shadow: none; }   /* no card inside the window: the selected card sits on its pane */
.mx-top .mx-dot { display: none; }   /* the pane's title bar without the dot */
.mx-name { font: 500 15px/20px var(--font); color: var(--ink); }   /* the card's name where its label was */
.mx-body { padding-top: 22px; }
@media (max-width: 639px) { .mx-name { font-size: 12px; line-height: 15px; } .mx-body { padding-top: 12px; } }
.mx-name { font-weight: 400; }
.mx-body .mc-tag > span:not(.mx-name), .mx-body .mc-id { display: none; }   /* no card numbers in the app window */
/* Capabilities' grid fills the same box as the cards above it: the right column's
   width and F4's card height (square on phones), its columns spread across it. */
.cp-pic.cp-pic2 { position: relative; display: block; height: calc(64px + min(550px, 100vw - 80px) * 0.58); overflow: hidden; }
.cp-pic2 .cp-apps { position: absolute; inset: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: center; justify-items: center; column-gap: 0; row-gap: 20px; padding: 0; }
.cp-pic2 .cp-a { width: 100%; }
.cp-pic2 .cp-a p { width: 88px; }
@media (min-width: 900px) { .cp-pic.cp-pic2 { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); } .cp-in { align-items: center; } }
@media (max-width: 639px) {
  .cp-pic.cp-pic2 { height: auto; aspect-ratio: 1; }
  .cp-pic2 .cp-apps { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 14px; }
  .cp-pic2 .cp-a p { width: 66px; }
}
/* F6: no gray border on the window; it sits on a warm gray card like F4's. */
#model-cards-app .ie-v { padding: 24px; background: #f1f1f3; box-shadow: none; }
.mx-win { overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.18); }
@media (max-width: 639px) { #model-cards-app .ie-v { padding: 12px; } .mx-win { border-radius: 18px; } }
/* F6: the window runs off the gray card's bottom edge, as F2's and F3's pictures do. */
#model-cards-app .ie-v { padding-bottom: 0; }
.mx-win { height: calc(100% + 40px); border-radius: 26px 26px 0 0; }
.mx-body { padding-bottom: 52px; }
.mx-side { padding-bottom: 52px; }
@media (max-width: 639px) { .mx-win { height: calc(100% + 24px); border-radius: 18px 18px 0 0; } .mx-body, .mx-side { padding-bottom: 32px; } }
/* F6 placed like F3's code window: in 7.4% from the left and 6.3% from the top,
   running off the gray card's right and bottom edges. */
#model-cards-app .ie-v { padding: 6.3% 0 0 7.4%; }
.mx-win { width: calc(100% + 40px); }
.mx-main { padding-right: 40px; }
@media (max-width: 639px) { .mx-win { width: calc(100% + 24px); } .mx-main { padding-right: 24px; } }
#model-cards-app .ie-v { background: #17171a; }   /* the card behind the window black */
/* F6: the window in from the right as far as from the left (7.4%); it still runs off the bottom. */
#model-cards-app .ie-v { padding-right: 7.4%; }
.mx-win { width: 100%; border-radius: 26px 26px 0 0; }
.mx-main { padding-right: 0; }
@media (max-width: 639px) { .mx-win { width: 100%; border-radius: 18px 18px 0 0; } .mx-main { padding-right: 0; } }
.mx-body .mc-f dt { color: var(--ink); } .mx-body .mc-f dd { color: var(--mute); }   /* labels dark, values gray */
#fda .f2-vis { background: #17171a; }   /* black like F6's card */
#fda .f2-vis { background: #1b7bc4; }   /* the blue from the user's swatch */
/* F6: each card's description (the old caption) under its name. */
.mx-cap { margin-top: 6px; font: 400 13px/18px var(--font); color: var(--mute); text-wrap: pretty; }
@media (max-width: 639px) { .mx-cap { margin-top: 4px; font-size: 10px; line-height: 13px; } }
.mx-cap { font-size: 12.5px; line-height: 17px; }
.mx-body .mc-tr { height: 30px; }
@media (max-width: 1199px) {
  .mx-body .mc-tr { display: none; }
  .mx-cap { font-size: 11.5px; line-height: 15px; }
  .mx-body .mc-big b { font-size: 30px; }
  .mx-body .mc-f dt, .mx-body .mc-cond { font-size: 11px; line-height: 14px; }
  .mx-body .mc-f dd, .mx-body .mc-l { font-size: 12px; line-height: 16px; }
  .mx-row b { font-size: 12.5px; } .mx-row small { font-size: 11px; }
}
@media (max-width: 639px) { .mx-cap { font-size: 10px; line-height: 13px; } .mx-body .mc-big b { font-size: 24px; } .mx-body .mc-f dt, .mx-body .mc-cond { font-size: 9.5px; line-height: 12px; } .mx-body .mc-f dd, .mx-body .mc-l { font-size: 10.5px; line-height: 13px; } }
.mx-body { scrollbar-width: thin; }   /* the longest card scrolls inside its pane where it runs over */
/* F6: the description under the card's hairline (it takes the line from the conditions). */
.mx-body .mx-cap { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.mx-body .mc-cond { margin-top: 6px; padding-top: 0; border-top: 0; }
@media (max-width: 639px) { .mx-body .mx-cap { padding-top: 6px; } .mx-body .mc-cond { margin-top: 4px; } }
/* F3: the SDKs under the picture, as tabs: Swift (the one shown) on a gray pill, the
   others gray text; each opens its docs. */
.sd-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; }
.sd-tabs a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 99px; font: 400 16px/1 var(--font); color: var(--mute); text-decoration: none; }
.sd-tabs a:hover { color: var(--ink); }
.sd-tabs a.is-on { background: #efeeec; color: var(--ink); }
@media (min-width: 900px) { #sdk .sd-tabs { grid-column: 2; } #sdk .ie-in { row-gap: 0; } }
@media (max-width: 899px) { #sdk .sd-tabs { order: 1; margin-top: 16px; } }
@media (max-width: 639px) { .sd-tabs a { height: 34px; padding: 0 14px; font-size: 14px; } }
/* F3's tabs switch the quick start: only the chosen language's picture shows. */
.sd-tabs button { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: none; font: 400 16px/1 var(--font); color: var(--mute); cursor: pointer; }
.sd-tabs button:hover { color: var(--ink); }
.sd-tabs button.is-on { background: #efeeec; color: var(--ink); }
@media (max-width: 639px) { .sd-tabs button { height: 34px; padding: 0 14px; font-size: 14px; } }
.sd-v .vxs[data-lang] { display: none !important; }
.sd-v[data-lang="swift"] .vxs-w[data-lang="swift"], .sd-v[data-lang="kotlin"] .vxs-w[data-lang="kotlin"], .sd-v[data-lang="cpp"] .vxs-w[data-lang="cpp"], .sd-v[data-lang="node"] .vxs-w[data-lang="node"] { display: block !important; }
@media (max-width: 639px) {
  .sd-v .vxs-w[data-lang] { display: none !important; }
  .sd-v[data-lang="swift"] .vxs-n[data-lang="swift"], .sd-v[data-lang="kotlin"] .vxs-n[data-lang="kotlin"], .sd-v[data-lang="cpp"] .vxs-n[data-lang="cpp"], .sd-v[data-lang="node"] .vxs-n[data-lang="node"] { display: block !important; }
}
/* F4's blue card with some depth: light from the top left, a deeper blue toward the
   bottom right, and a faint dot grid. */
#fda .f2-vis { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(75% 65% at 18% 0%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 62%), radial-gradient(70% 70% at 100% 100%, rgba(8, 45, 98, 0.45), rgba(8, 45, 98, 0) 72%), #1b7bc4; }
#fda .f2-vis::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); }
.mx-row small { display: none; } .mx-row b { white-space: normal; }   /* the list shows only names, wrapping when long */
/* F6: everything under the big number at the description's size. */
.mx-body .mc-2, .mx-body .mc-f dt, .mx-body .mc-f dd, .mx-body .mx-cap, .mx-body .mc-cond, .mx-body .mc-l { font-size: 12.5px; line-height: 17px; }
@media (max-width: 1199px) { .mx-body .mc-2, .mx-body .mc-f dt, .mx-body .mc-f dd, .mx-body .mx-cap, .mx-body .mc-cond, .mx-body .mc-l { font-size: 11.5px; line-height: 15px; } }
@media (max-width: 639px) { .mx-body .mc-2, .mx-body .mc-f dt, .mx-body .mc-f dd, .mx-body .mx-cap, .mx-body .mc-cond, .mx-body .mc-l { font-size: 10px; line-height: 13px; } }
/* F3: a pill link to the developer site at the far right of the tabs' row. */
.sd-tabs { align-items: center; }
.sd-dev { display: inline-flex; align-items: center; height: 40px; margin-left: auto; padding: 0 18px; border-radius: 99px; box-shadow: inset 0 0 0 1px #d9d8d5; font: 500 15px/1 var(--font); color: var(--ink); text-decoration: none; white-space: nowrap; }
.sd-dev::after { content: " \2197"; margin-left: 4px; }
.sd-dev:hover { background: #f5f4f2; }
@media (max-width: 639px) { .sd-dev { height: 34px; padding: 0 14px; font-size: 13.5px; } }
/* F6: the big number a step smaller. */
.mx-body .mc-big b { font-size: 32px; }
@media (max-width: 1199px) { .mx-body .mc-big b { font-size: 26px; } }
@media (max-width: 639px) { .mx-body .mc-big b { font-size: 20px; } }
.mx-body .mc-tr { display: none !important; }   /* no traces in the app window's cards */
/* F3: the developer-site pill under the text at the left. */
.ie-t .sd-dev { margin: 28px 0 0; align-self: flex-start; }
@media (max-width: 639px) { #sdk .sd-dev { order: 2; justify-self: start; margin: 24px 0 0 25px; } }
/* ---------- F3: the explainer video in F2's card size and layout, its copy at the
   left with "Watch with sound". ---------- */
#explainer-tour .ie-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); position: relative; height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); padding: 0; overflow: hidden; border-radius: 40px; background: #f4f4f6; }
#explainer-tour .vd-f { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; }
#explainer-tour .vd-f video { width: 100%; height: 100%; object-fit: cover; }
.ivd-b { margin-top: 28px; }
@media (max-width: 899px) { #explainer-tour .ie-v { height: calc(64px + min(550px, 100vw - 80px) * 0.58); } }
@media (max-width: 639px) { #explainer-tour .ie-v { height: auto; aspect-ratio: 1; border-radius: 28px; } .ivd-b { order: 2; justify-self: start; margin: 24px 0 0 25px; } #explainer-tour .ie-k { display: none; } }
/* F3: the video smaller in its card, whole at 16:9, centred with the card's gray around it. */
#explainer-tour .ie-v { background: #f1f1f3; }
#explainer-tour .vd-f { inset: 50% 7.4% auto; aspect-ratio: 16 / 9; translate: 0 -50%; overflow: hidden; border-radius: 18px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.25); }
@media (max-width: 639px) { #explainer-tour .vd-f { inset: 50% 6% auto; border-radius: 12px; } }
/* F3: the video and its card read as one: the card takes the video's own gray (its
   edges, #eeeef0, lighter toward the middle) and the frame loses its corners and shadow. */
#explainer-tour .ie-v { background: radial-gradient(70% 70% at 50% 50%, #f3f3f5, #eeeef0); }
#explainer-tour .vd-f { border-radius: 0; box-shadow: none; }
/* F3: the explainer card's scrub bar under the video (site.js), red where it has played. */
.ivd-bar { position: absolute; right: 7.4%; bottom: 6%; left: 7.4%; z-index: 3; height: 4px; margin: 0; border-radius: 99px; background: linear-gradient(90deg, var(--red) var(--p, 0%), rgba(29, 29, 31, 0.14) var(--p, 0%)); -webkit-appearance: none; appearance: none; cursor: pointer; }
.ivd-bar::-webkit-slider-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.2); -webkit-appearance: none; appearance: none; }
.ivd-bar::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.2); }
#explainer-tour .vd-f { translate: 0 -56%; }   /* lifted a little to leave room for the bar */
@media (max-width: 639px) { .ivd-bar { right: 6%; left: 6%; bottom: 8%; } }
/* F3's player bar (site.js), after the user's reference: over the foot of the video,
   white icons and time on a soft dark fade, a thin white scrub line under them. */
#explainer-tour .vd-ctl, #explainer-tour .ie-v > .ivd-bar { display: none !important; }
#explainer-tour .vd-f { translate: 0 -50%; }
.ivd-ctl { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 28px 10px 8px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.38)); color: #fff; }
.ivd-ctl button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.ivd-ctl button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ivd-ctl .ivd-pp { width: 34px; height: 34px; background: rgba(29, 29, 31, 0.72); }
.ivd-ctl .ivd-pp svg { width: 14px; height: 14px; }
.ivd-t { margin-left: 6px; font: 400 12.5px/1 var(--font); font-variant-numeric: tabular-nums; }
.ivd-sp { flex: 1; }
.ivd-ctl .ivd-bar { position: static; flex-basis: 100%; height: 3px; margin: 6px 6px 0; border-radius: 99px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, 0.35) var(--p, 0%)); -webkit-appearance: none; appearance: none; cursor: pointer; }
.ivd-ctl .ivd-bar::-webkit-slider-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; -webkit-appearance: none; appearance: none; }
.ivd-ctl .ivd-bar::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
@media (max-width: 639px) { .ivd-ctl { padding: 16px 6px 5px; gap: 0; } .ivd-ctl button { width: 26px; height: 26px; } .ivd-ctl .ivd-pp { width: 28px; height: 28px; } .ivd-t { font-size: 10.5px; } }
.ivd-b { display: none !important; }   /* no "Watch with sound" button beside the explainer card */
/* F3's explainer before it plays: only the first frame and a small cream play button;
   the player bar appears once it starts. */
#explainer-tour .vd-f:not(.on) .ivd-ctl { display: none; }
#explainer-tour .vd-go span { width: 56px; height: 56px; background: rgba(245, 240, 232, 0.92); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25); }
#explainer-tour .vd-go svg { width: 18px; height: 18px; margin-left: 2px; }
@media (max-width: 639px) { #explainer-tour .vd-go span { width: 44px; height: 44px; } #explainer-tour .vd-go svg { width: 15px; height: 15px; } }
/* F3's explainer before it plays: the first frame and only the bar's play button, in
   the same spot it keeps once the video runs; the rest of the bar comes in on play. */
#explainer-tour .vd-go { display: none; }
#explainer-tour .vd-f:not(.on) .ivd-ctl { display: flex; background: none; }
#explainer-tour .vd-f:not(.on) .ivd-ctl > :not(.ivd-pp) { visibility: hidden; }
/* F3: the explainer's card is the light blue desktop wallpaper from the eSSESSMENT tutorial. */
#explainer-tour .ie-v { background: linear-gradient(#f6f5f2 0%, #f1f0ee 45%, #dfe1ee 82%, #b9c1ec 100%); }   /* same card background as the model cards below */
#explainer-tour .vd-f { border-radius: 16px; box-shadow: 0 14px 34px -16px rgba(20, 50, 100, 0.35); }   /* on the wallpaper the video is a window again */
/* ---------- F3's card as a Mac desktop: the light blue wallpaper, a menu bar along
   the top, the video in a window with the three lights, a dock at the foot. ---------- */
.mac-menu { position: absolute; top: 0; right: 0; left: 0; z-index: 4; display: flex; align-items: center; gap: 14px; height: 24px; padding: 0 16px; background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 400 11px/1 var(--font); color: #1d1d1f; }
.mac-menu b { font-weight: 600; }
.mac-menu em { margin-left: auto; font-style: normal; }
#explainer-tour .mac-win { position: absolute; top: calc(24px + 7%); left: 9%; right: 9%; z-index: 2; overflow: hidden; border-radius: 12px; background: #f6f6f7; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 22px 44px -18px rgba(20, 50, 100, 0.45); }
.mac-tb { position: relative; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; background: #ececee; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.mac-tb i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.mac-tb i:nth-child(2) { background: #febc2e; }
.mac-tb i:nth-child(3) { background: #28c840; }
.mac-tb span { position: absolute; left: 50%; translate: -50% 0; font: 500 11px/1 var(--font); color: #4a4a4f; white-space: nowrap; }
#explainer-tour .mac-win .vd-f { position: relative; inset: auto; translate: none; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.mac-dock { position: absolute; bottom: 10px; left: 50%; z-index: 3; display: flex; gap: 7px; padding: 6px 8px; border-radius: 16px; translate: -50% 0; background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5); }
.mac-dock i { width: 26px; height: 26px; border-radius: 7px; background: var(--c); box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.3); }
@media (max-width: 639px) {
  .mac-menu { gap: 9px; height: 18px; padding: 0 10px; font-size: 8.5px; }
  .mac-menu span:nth-child(n+5) { display: none; }
  #explainer-tour .mac-win { top: calc(18px + 8%); left: 6%; right: 6%; border-radius: 8px; }
  .mac-tb { height: 18px; gap: 5px; padding: 0 8px; } .mac-tb i { width: 7px; height: 7px; } .mac-tb span { font-size: 8.5px; }
  .mac-dock { bottom: 7px; gap: 5px; padding: 4px 6px; border-radius: 11px; } .mac-dock i { width: 18px; height: 18px; border-radius: 5px; }
}
#explainer-tour .mac-win { left: 12%; right: 12%; top: calc(24px + 6%); }
@media (max-width: 639px) { #explainer-tour .mac-win { left: 7%; right: 7%; top: calc(18px + 9%); } }
.mac-dock { display: none; }   /* no dock (the user's call) */
/* F3's desktop: the menu bar's ends in from the card's rounded corners; the window
   bigger, centred in the space under the menu bar. */
.mac-menu { padding: 0 36px; }
#explainer-tour .mac-win { top: calc(50% + 12px); right: 6%; left: 6%; translate: 0 -50%; }
@media (max-width: 639px) { .mac-menu { padding: 0 24px; } #explainer-tour .mac-win { top: calc(50% + 9px); right: 4%; left: 4%; } }
.mac-menu { padding-left: 16px; } @media (max-width: 639px) { .mac-menu { padding-left: 10px; } }   /* Presage back at its first spot; the time stays in */
.mac-menu { padding-left: 36px; } .mac-menu span { display: none; } @media (max-width: 639px) { .mac-menu { padding-left: 24px; } }   /* just Presage and the time, both in from the corners */
@media (max-width: 639px) { .ie-p, .f2-p, .pr .f2-p { text-wrap: wrap; } }   /* phones: copy runs the full measure */
/* Even spacing between the modules: 112px from one module's last line or card to the
   next one's first, on desktop and tablet; 72px on phones. */
@media (min-width: 640px) {
  .h0 + .ie, .ie, .ie + .f2, #fda, .mcx, .cp, .pr { padding-top: 112px; }
  .ie, #fda, .mcx, .cp { padding-bottom: 0; }
}
@media (max-width: 639px) { .h0 + .ie { padding-top: 72px; } }
/* Phones: each section's headline back under its picture, then the copy. */
@media (max-width: 639px) {
  .ie-h, #fda .f2-h, .mc2 .f2-h, .cp .f2-h, .pr .f2-h { order: 2; margin: 32px 0 0; }
  .ie-p, #fda .f2-p, .mc2 .f2-p, .cp .f2-p, .pr .f2-p { margin-top: 16px; }
}
@media (max-width: 639px) { .ie-h, #fda .f2-h, .mc2 .f2-h, .cp .f2-h, .pr .f2-h { margin-inline: 25px; } }   /* headlines set in like the copy under them */
/* ---------- The header, as america.gov's: it scrolls away with the page (not
   sticky); the logo at the left and one dark "Menu" pill at the right at every
   width. The menu opens as a white rounded panel floating at the top right (near
   full width on phones) over the page, which blurs behind it: big centred links,
   a round close button, the sign-up buttons on a gray card at the foot. ---------- */
.hd { position: relative; top: auto; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.hd.sc .hd-in { height: 76px; }
.hd .nav, .hd-r .dd, .hd-r .btn { display: none !important; }
.hd .menu-b { display: inline-flex; height: 44px; padding: 0 20px; background: var(--ink); box-shadow: none; font: 500 15px/1 var(--font); color: #fff; }
.hd .menu-b:hover, .hd .menu-b[aria-expanded="true"] { background: #2c2c30; }
.mm { inset: 0; padding: 0; background: rgba(240, 240, 238, 0.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mm.on { display: block; }
.mm-p { position: absolute; top: 44px; right: 32px; display: flex; flex-direction: column; width: min(436px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); overflow-y: auto; padding: 40px; border-radius: 36px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04); }
.mm-t { justify-content: flex-end; height: auto; }
.mm-t .logo { display: none; }
.mm-t .menu-b { display: inline-flex; width: 36px; height: 36px; background: #f0f0f2; box-shadow: none; }
.mm-l { justify-items: center; gap: 4px; margin-top: 4px; }
.mm-l a { display: block; padding: 2px 0; border: 0; font: 450 30px/1.3 var(--font); letter-spacing: -0.02em; text-align: center; color: var(--ink); }
.mm-l a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.mm-l a small { display: none; }
.mm-b { gap: 8px; margin-top: 36px; padding: 16px; border-radius: 18px; background: #f3f3f5; }
@media (max-width: 639px) {
  .hd .menu-b { height: 40px; padding: 0 18px; font-size: 14px; }
  .mm-p { top: 44px; right: 16px; left: 16px; width: auto; padding: 24px; }
  .mm-l a { font-size: 28px; }
}
@media (max-width: 639px) { #fda .f2-k { display: none; } }   /* no "Regulatory milestone" on phones */
/* america.gov's header, measured: it stays pinned to the top, slides up out of view
   while you scroll down and slides back in (0.3s) as soon as you scroll up; no
   background or blur of its own. */
.hd { position: sticky; top: 0; transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.hd.hd-up { translate: 0 -100%; visibility: hidden; }
/* When it comes back over the page, the header sits on the page's own white,
   solid behind the logo and Menu and fading out below them (as america.gov). */
.hd::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(var(--paper) 62%, color-mix(in srgb, var(--paper) 0%, transparent)); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.hd.sc::before { opacity: 1; }
.ie-how::after { content: none; }   /* an internal link: no ↗ */
@media (max-width: 639px) { #introducing .ie-how { order: 2; justify-self: start; margin: 24px 0 0 25px; } }
/* "See how it works" as america.gov sets it: plain semibold ink text, no pill. */
.sd-dev.ie-how { height: auto; padding: 0; border-radius: 0; box-shadow: none; background: none; font: 600 17px/24px var(--font); color: var(--ink); }
.sd-dev.ie-how:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) { #introducing .ie-how { margin-top: 32px; font-size: 16px; } }
@media (max-width: 639px) { #sdk .sd-dev { height: auto; padding: 0; border-radius: 0; box-shadow: none; background: none; margin-top: 32px; font: 600 16px/24px var(--font); color: var(--ink); } }   /* phones: a plain text link like "See how it works" */
/* F4: the FDA link back under the copy, as a plain text link like "See how it works"
   (no number beside it; the number links inline in the copy). */
#fda .f2-a { display: block; margin: 28px 0 0; }
#fda .f2-a span { display: none; }
#fda .f2-a .f2-ln { font: 600 17px/24px var(--font); color: var(--ink); text-decoration: none; }
#fda .f2-a .f2-ln::after { content: " \2197"; }
#fda .f2-a .f2-ln:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) { #fda .f2-a { display: block !important; order: 2; margin: 32px 25px 0; } #fda .f2-a .f2-ln { font-size: 16px; } }
.sd-dev::after, #fda .f2-a .f2-ln::after { content: none !important; }   /* the text links without arrows */
#model-cards-app .mx-all { margin-top: 28px; }
@media (max-width: 639px) { #model-cards-app .mx-all { order: 2; justify-self: start; margin: 32px 0 0 25px; font-size: 16px; } }
/* ---------- The design study's black tab bar, folded into a hamburger beside Menu:
   a round button; it opens the study's pages as a small white panel under it. ---------- */
.rv-hb { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #efeeec; color: var(--ink); cursor: pointer; }
.rv-hb:hover, .rv-hb[aria-expanded="true"] { background: #e5e4e1; }
.rv-hb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hd-r { gap: 10px; }
.rv { position: fixed; top: 84px; right: max(64px, env(safe-area-inset-right, 0px)); z-index: 80; display: none; width: 280px; max-height: calc(100dvh - 100px); overflow-y: auto; padding: 14px; border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05); color: var(--ink); }
.rv.rv-open { display: block; }
.rv .rv-in { display: grid; gap: 2px; max-width: none; height: auto; margin: 0; padding: 0; background: none; color: var(--ink); }
.rv .rv-in > b { padding: 6px 10px 8px; font: 500 12px/16px var(--font); color: var(--mute); }
.rv a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; font: 400 15px/20px var(--font); color: var(--ink); text-decoration: none; }
.rv a:hover, .rv a[aria-current="page"] { background: #f3f2f0; }
.rv a i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #e9e8e5; font: 600 11px/1 var(--font); font-style: normal; color: var(--ink); }
.rv .rv-dd { position: static; }
.rv .rv-db { display: none; }
.rv .rv-m { position: static; display: grid; gap: 2px; margin-top: 6px; padding: 6px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; translate: none; }
.rv .rv-note { padding: 10px 10px 4px; font: 400 12px/16px var(--font); color: var(--mute); }
@media (max-width: 639px) { .rv-hb { width: 40px; height: 40px; } .rv { top: 68px; right: 16px; left: 16px; width: auto; } }
.rv a, .rv a[aria-current="page"] { color: var(--ink) !important; } .rv a[aria-current="page"] i { background: var(--ink); color: #fff; } .rv .rv-note { text-align: left; }
.h0-go { display: none; }   /* the hero keeps only "Watch the 1-minute film" */
.h0-b { display: none; }   /* no buttons in the hero */
.h0-in { border-bottom: 0; }   /* no hairline under the hero */
/* Phones: the hero after x.ai's mobile hero: the eyebrow in an outlined pill with a
   "New" tag; a big centred headline on three lines, the last words underlined in a
   red gradient; the copy in ink; the two buttons side by side. */
@media (max-width: 639px) {
  .h0-in { padding-block: 40px 8px; }
  .h0-k { gap: 10px; height: 40px; padding: 0 16px 0 5px; border-radius: 99px; box-shadow: inset 0 0 0 1px #e6e5e2; font: 400 14px/1 var(--font); color: var(--ink); }
  .h0-k::before { content: "New"; display: grid; place-items: center; height: 28px; padding: 0 11px; border-radius: 99px; background: #fdecec; font: 500 13px/1 var(--font); color: var(--red); }
  .h0-k span { display: inline !important; }
  .h0-h { margin-top: 28px; font-size: 44px; line-height: 1.05; letter-spacing: -0.035em; }
  .h0-h em { position: relative; display: inline-block; }
  .h0-h em::after { content: ""; position: absolute; right: 0.3em; bottom: -0.14em; left: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #c4357a, #e5484d 45%, #f39a1e 75%, #d4d4d4); }
  .h0-p { max-width: 30ch; margin-top: 28px; font-size: 18px; line-height: 28px; color: var(--ink); }
  .h0-b { display: flex !important; flex-wrap: nowrap; gap: 10px; margin-top: 32px; }
  .h0-b .btn { display: inline-flex !important; height: 50px; padding: 0 22px; font-size: 16px; }
}
@media (max-width: 379px) { .h0-b .btn { padding: 0 16px; font-size: 14.5px; } .h0-h { font-size: 40px; } .h0-k { font-size: 13px; } }
/* Phones: x.ai's mobile hero sizes, measured from the screenshot (3x): pill 37px tall
   with 14.5px regular text; headline 44px regular on 40px lines; copy 19px regular on
   29px lines; buttons 44px tall with 16px regular text. */
@media (max-width: 639px) {
  .h0-k { height: 37px; font: 400 14.5px/1 var(--font); }
  .h0-k::before { height: 27px; font: 400 14px/1 var(--font); }
  .h0-h { font-weight: 450; font-size: 44px; line-height: 40px; letter-spacing: -0.04em; }
  .h0-p { font: 400 19px/29px var(--font); letter-spacing: -0.01em; }
  .h0-b .btn { height: 44px; padding: 0 20px; font: 400 16px/1 var(--font); }
}
@media (max-width: 379px) { .h0-h { font-size: 40px; line-height: 38px; } .h0-b .btn { padding: 0 14px; font-size: 14.5px; } .h0-k { font-size: 13px; } }
/* Phones: the buttons at x.ai's size: 44px tall, 22px side padding, 12px apart,
   the primary with its chevron. */
@media (max-width: 639px) {
  .h0-b { gap: 12px; }
  .h0-b .btn { height: 44px; padding: 0 22px; gap: 10px; }
  .h0-go svg { display: inline-block !important; width: 14px; height: 14px; }
}
@media (max-width: 379px) { .h0-b { gap: 8px; } .h0-b .btn { padding: 0 14px; gap: 6px; } }
@media (max-width: 639px) { .h0-h { font-size: 38px; line-height: 40px; letter-spacing: -0.03em; } }   /* x.ai: capitals about 27px tall, lines 40px apart */
/* Phones: the pill measured against x.ai's at 3x: "New" tag 38 x 17px with 11px text,
   the line beside it at 13.5px. */
@media (max-width: 639px) {
  .h0-k { gap: 12px; padding: 0 16px 0 10px; font-size: 13.5px; }
  .h0-k::before { height: 17px; padding: 0 8px; font-size: 11px; }
}
@media (min-width: 380px) and (max-width: 639px) { .h0-b .btn { font-size: 15px; } }   /* x.ai button text, measured: 15px */
/* Phones: the model cards window's list in smaller type so all six fit; each card's
   link kept in view above the window's cut-off foot. */
@media (max-width: 639px) {
  .mx-head { font-size: 10px; }
  .mx-row { padding: 6px 7px; }
  .mx-row b { font-size: 10.5px; line-height: 13px; font-weight: 450; }
  .mx-body { padding-bottom: 40px; }
  .mx-body .mc-l { margin-top: 6px; }
}
@media (max-width: 639px) { #model-cards-app .ie-v { aspect-ratio: 4 / 5; } }   /* phones: a little taller than square so every card keeps its link in view */
/* iPhone Safari enlarges small text on its own ("text inflation"), which made the model
   cards window's text bigger on a real phone than designed; keep sizes as set. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Phones: the description follows the facts directly (no stretch above its hairline). */
@media (max-width: 639px) { .mx-body .mx-cap { margin-top: 12px; } }
/* Phones: the model cards window shorter again (1 : 1.15, was 4 : 5), its card tighter so the longest one still ends inside it. */
@media (max-width: 639px) {
  #model-cards-app .ie-v { aspect-ratio: 1 / 1.15; padding-top: 4%; }
  .mx-body { padding: 10px 10px 6px; }
  .mx-body .mx-cap { margin-top: 8px; padding-top: 6px; }
  .mx-body .mc-f { gap: 4px; }
  .mx-body .mc-big { margin-top: 4px; }
}
@media (max-width: 379px) { #model-cards-app .ie-v { aspect-ratio: 1 / 1.3; } }
/* ---------- F7: the model cards as drawers (tools/mcd.py), after the user's iOS
   settings list in white: one white rounded card on F4's warm gray, hairlines
   between rows inset from the edges, each row the name, its number and a chevron
   that turns when the drawer opens. ---------- */
#model-cards-drawers .ie-in { align-items: start; }
.md-list { overflow: hidden; padding: 6px 0; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px #e9e8e5, 0 16px 40px -24px rgba(0, 0, 0, 0.18); }
.md-row + .md-row summary { box-shadow: inset 0 1px 0 #ecebe8; }
.md-row + .md-row { margin-top: 0; }
.md-row summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 16px; margin: 0 28px; padding: 22px 0; list-style: none; cursor: pointer; }
.md-row summary::-webkit-details-marker { display: none; }
.md-n { font: 450 17px/22px var(--font); color: var(--ink); }
.md-v { font: 400 14px/20px var(--font); color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.md-v b { font-weight: 500; color: var(--ink); }
.md-ch { width: 20px; height: 20px; fill: none; stroke: #b1b0ad; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.2s ease; }
.md-row[open] .md-ch { rotate: 90deg; }
.md-row:hover summary .md-n { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9c8c5; }
.md-d { display: grid; gap: 12px; margin: -6px 28px 0; padding: 0 0 24px; }
.md-d .md-2 { font: 400 14px/20px var(--font); color: var(--mute); }
.md-d .mc-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 20px; margin: 0; padding: 16px 18px; border-radius: 16px; background: #f1f1f3; }
.md-d .mc-f dt { font: 500 13px/18px var(--font); color: var(--ink); }
.md-d .mc-f dd { margin: 2px 0 0; font: 400 13px/18px var(--font); color: var(--mute); }
.md-cap { font: 400 14px/21px var(--font); color: var(--mute); text-wrap: pretty; }
.md-cond { font: 400 12.5px/18px var(--font); color: var(--mute); }
.md-d .mc-l { justify-self: start; margin: 0; font: 600 14px/20px var(--font); color: var(--ink); text-decoration: none; }
.md-d .mc-l::after { content: none; }
.md-d .mc-l:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
  .md-list { order: 1; border-radius: 24px; }
  .md-row summary { grid-template-columns: minmax(0, 1fr) 18px; gap: 10px; margin: 0 18px; padding: 16px 0; }
  .md-v { display: none; }
  .md-n { font-size: 15.5px; line-height: 20px; }
  .md-d { margin: -2px 18px 0; padding-bottom: 18px; }
  .md-d .mc-f { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  #model-cards-drawers .mx-all { order: 2; justify-self: start; margin: 32px 0 0 25px; font-size: 16px; }
}
/* F7's white drawer list on a black card, like F6's window. */
.md-list { box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5); }
.md-wrap { padding: 32px; border-radius: 40px; background: #17171a; }
@media (max-width: 639px) { .md-wrap { order: 1; padding: 14px; border-radius: 28px; } }
/* F7 on phones: every drawer closed in the list; the picked one slides in from the
   right over it with a back button and the model's name (site.js). */
.md-back, .md-t { display: none; }
@media (max-width: 639px) {
  .md-list { position: relative; }
  .md-row .md-d { display: none; }
  .md-row[open] .md-ch { rotate: 0deg; }
  .md-row.is-act .md-d { position: absolute; inset: 0; z-index: 2; display: grid; align-content: start; gap: 12px; margin: 0; padding: 14px 18px 20px; overflow-y: auto; background: #fff; animation: md-in 0.32s cubic-bezier(0.32, 0.72, 0, 1); }
  .md-list.md-in > .md-row > summary { visibility: hidden; }
  .md-back { display: inline-flex; align-items: center; gap: 2px; justify-self: start; margin-left: -6px; padding: 4px 6px; border: 0; background: none; font: 500 14px/20px var(--font); color: var(--red); cursor: pointer; }
  .md-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .md-t { display: block; font: 500 19px/24px var(--font); color: var(--ink); }
}
@keyframes md-in { from { translate: 100% 0; } to { translate: 0 0; } }
.md-big { display: none; }
@media (max-width: 639px) { .md-big { display: block; margin-top: -4px; font: 400 13px/18px var(--font); color: var(--mute); } .md-big b { margin-right: 4px; font: 400 30px/1 var(--font); letter-spacing: -0.02em; color: var(--ink); } }
/* F5's carousel back (the user's call): on phones one card a screen with the next
   peeking in at the right, as tall as F2's and F3's cards. */
@media (max-width: 639px) {
  .mc2 .mc-r { --cw: 80vw; --cv: 87.5vw; }
  .mc2 .mc-track { column-gap: 12px; }
}
/* Phones: F5's pills set like F3's SDK tabs and placed as they are, right under the
   cards: plain gray text, the selected one on a gray pill, one row sliding sideways. */
@media (max-width: 639px) {
  .mc2 .mc-pills { order: 1; flex-flow: row nowrap; gap: 4px; margin: 16px calc(-1 * max(6.25vw, env(safe-area-inset-right, 0px))) 0 0; padding: 0 6.25vw 0 0; overflow-x: auto; scrollbar-width: none; }
  .mc2 .mc-pill { height: 34px; padding: 0 14px; border-radius: 99px; background: none; box-shadow: none; font: 400 14px/1 var(--font); color: var(--mute); }
  .mc2 .mc-pill:hover { background: none; color: var(--ink); }
  .mc2 .mc-pill[aria-pressed="true"] { background: #efeeec; box-shadow: none; color: var(--ink); }
  .mc2 .mc-r { order: 1; }
  .mc2 .f2-h { order: 2; }
}
@media (max-width: 639px) { .mc2 .mc-r { order: 1; } .mc2 .mc-pills { order: 2; } .mc2 .f2-h { order: 3; } .mc2 .f2-p { order: 4; } }
/* Phones: F5's description moves into the card (under its facts), so the SDK-style
   tabs sit right under the cards. */
.mc-capin { display: none; }
@media (max-width: 639px) {
  .mc2 .mc-cap { display: none !important; }
  .mc2 .mc-capin { display: block; grid-column: 1 / -1; grid-row: 6; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font: 400 12px/17px var(--font); color: var(--mute); }
  .mc2 .mc-cond { grid-row: 7; margin-top: 6px; padding-top: 0; border-top: 0; }
  .mc2 .mc-s { grid-template-rows: auto auto auto auto 1fr auto auto; }
}
/* F5: the first card lists the six models (tap one to slide to its card), so the
   pills go. */
.mc2 .mc-pills { display: none !important; }
.ms-s { display: flex !important; flex-direction: column; gap: 0; padding-bottom: 8px !important; }
.ms-s .mc-tag { margin-bottom: 6px; }
.ms-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid #ecebe8; background: none; text-align: left; cursor: pointer; }
.ms-i:first-of-type { border-top: 0; }
.ms-i span { display: grid; min-width: 0; }
.ms-i b { font: 450 14px/18px var(--font); color: var(--ink); }
.ms-i small { font: 400 12px/16px var(--font); color: var(--mute); }
.ms-i svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #b1b0ad; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-i:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) { .ms-i { padding: 7px 0; } .ms-i b { font-size: 13px; line-height: 16px; } .ms-i small { font-size: 11px; line-height: 14px; } }
@media (min-width: 640px) and (max-width: 1199px) { .ms-i small { display: none; } .ms-i { padding: 8px 0; } .ms-i b { font-size: 13px; line-height: 17px; } } @media (max-width: 379px) { .ms-i small { display: none; } }
/* ---------- F5's cards designed like F6's window: each card black, its white panel
   set in from the top and sides and running off the bottom edge; the selector card's
   panel is F6's warm white list (labels at its top, rows with soft gray hover);
   the inside type as F6's: name, number, gray facts. ---------- */
.mc2 .mc-v, .mc2 .mc-v-a, .mc2 .mc-v-b, .mc2 .mc-v-c { overflow: hidden; padding: 7% 7% 0; border-radius: 32px; background: #17171a; box-shadow: none; }
.mc2 .mc-s { margin-bottom: -40px; padding-bottom: 56px !important; border-radius: 20px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5); }
.mc2 .mc-tag { color: var(--mute); }
.mc2 .mc-f dt { color: var(--ink); }
.mc2 .mc-f dd { color: var(--mute); }
.mc2 .mc-sel .mc-s { background: #fbfbfa; }
.ms-s .mc-tag { margin: 0 0 8px; font: 500 12px/16px var(--font); }
.ms-i { margin: 0 -10px; width: calc(100% + 20px); padding: 9px 10px; border: 0; border-radius: 12px; }
.ms-i:hover { background: #f0efec; }
.ms-i:hover b { text-decoration: none; }
@media (max-width: 639px) { .mc2 .mc-v, .mc2 .mc-v-a, .mc2 .mc-v-b, .mc2 .mc-v-c { border-radius: 24px; } .mc2 .mc-s { border-radius: 14px; } .ms-i { padding: 7px 10px; } }
@media (max-width: 639px) {
  .ms-i small { display: none; }   /* the selector's six names fit the card on phones */
  /* the text links one line closer to the copy above them */
  #introducing .ie-how, #sdk .sd-dev, #model-cards-app .mx-all, #model-cards-drawers .mx-all { margin-top: 10px; }
  #fda .f2-a { margin-top: 10px; }
}
/* ---------- F5's selector card designed like F3's SDK picture: the lilac gradient,
   a dark editor window set in from the top and left and running off the right and
   bottom, its title bar with the three lights; each numbered line a model card
   (its name, then its number in the editor's string colour). A line slides the row
   to that card. ---------- */
.mc2 .mc-sel .mc-v { padding: 9% 0 0 9%; background: linear-gradient(135deg, #cfd8ff, #a9a6f4 50%, #c7d6ff); }
.mc2 .mc-sel .mc-s.ms-s { position: relative; margin: 0 -40px -40px 0; padding: 40px 0 56px !important; border-radius: 14px 0 0 0; background: #1e1e22; box-shadow: 0 18px 40px -20px rgba(30, 20, 80, 0.5); counter-reset: ln; }
.ms-s::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px 0 0 0; background: #2a2a2f radial-gradient(circle at 16px 15px, #ff5f57 4.3px, transparent 4.8px), radial-gradient(circle at 29px 15px, #febc2e 4.3px, transparent 4.8px) #2a2a2f; }
.ms-s::after { content: ""; position: absolute; top: 15px; left: 42px; width: 8.6px; height: 8.6px; border-radius: 50%; background: #28c840; translate: -50% -50%; }
.mc2 .mc-sel .ms-s .mc-tag { position: absolute; top: 8px; left: 64px; margin: 0; font: 500 11px/14px var(--mono); color: #c9c9cf; }
.mc2 .mc-sel .ms-i { counter-increment: ln; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 0; width: 100%; padding: 6px 24px 6px 10px; border: 0; border-radius: 0; font-family: var(--mono); }
.mc2 .mc-sel .ms-i::before { content: counter(ln); align-self: start; padding-top: 1px; font: 400 11px/17px var(--mono); color: #5f5f68; text-align: right; }
.mc2 .mc-sel .ms-i:hover { background: #2f2f36; }
.mc2 .mc-sel .ms-i b { font: 400 12px/17px var(--mono); color: #dfdfe0; }
.mc2 .mc-sel .ms-i small { font: 400 11.5px/16px var(--mono); color: #ff8170; }
.mc2 .mc-sel .ms-i svg { display: none; }
.mc2 .mc-sel .ms-i:first-of-type b::before { content: ""; }
@media (max-width: 639px) { .mc2 .mc-sel .ms-i { padding: 5px 16px 5px 6px; gap: 8px; } .mc2 .mc-sel .ms-i b { font-size: 11px; line-height: 15px; } }
.ms-s::before { background: radial-gradient(circle at 16px 15px, #ff5f57 4.3px, transparent 4.8px), radial-gradient(circle at 29px 15px, #febc2e 4.3px, transparent 4.8px), #2a2a2f; }
.ms-s::after { left: 42px; }
.mc2 .mc-sel .ms-i b { white-space: normal; overflow-wrap: anywhere; }
.mc2 .mc-sel .ms-i { padding-right: 56px; }
@media (max-width: 639px) { .mc2 .mc-sel .ms-i { padding-right: 52px; } }
#model-cards-app .ie-v { background: #f1f1f3; }   /* the window back on warm gray, not black (the user's call) */
/* Phones: the carousel's first card is F6's left panel: warm white, "Model cards" at
   the top, each model a row with its soft dot and name; no editor. */
.ms-i .mx-dot { display: none; }
@media (max-width: 639px) {
  .mc2 .mc-sel .mc-v { padding: 7% 7% 0; background: #f1f1f3; }
  .mc2 .mc-sel .mc-s.ms-s { margin: 0 0 -40px; padding: 14px 8px 56px !important; border-radius: 14px; background: #fbfbfa; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 14px 30px -18px rgba(0, 0, 0, 0.2); }
  .mc2 .mc-sel .ms-s::before, .mc2 .mc-sel .ms-s::after { display: none; }
  .mc2 .mc-sel .ms-s .mc-tag { position: static; margin: 0 8px 6px; font: 500 11px/14px var(--font); color: var(--mute); }
  .mc2 .mc-sel .ms-i { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-family: var(--font); }
  .mc2 .mc-sel .ms-i::before { content: none; }
  .mc2 .mc-sel .ms-i .mx-dot { display: block; width: 22px; height: 22px; }
  .mc2 .mc-sel .ms-i b { font: 450 12.5px/16px var(--font); color: var(--ink); }
  .mc2 .mc-sel .ms-i:hover { background: #f0efec; }
}
@media (max-width: 639px) {
  .mc2 .mc-sel .ms-i { justify-content: flex-start; }
  .mc2 .mc-sel .ms-i span { flex: 1; text-align: left; }
  .mc2 .mc-sel .ms-i .mx-dot { flex: none; padding: 0; border-radius: 50%; box-shadow: none; }
  .mc2 .mc-sel .ms-i .mx-dot.mc-v-a { background: linear-gradient(135deg, #fbd8d2, #e6c9f2 50%, #b7c3ff); }
  .mc2 .mc-sel .ms-i .mx-dot.mc-v-b { background: linear-gradient(135deg, #efe4f7, #c8dafb 45%, #8eb6f4); }
  .mc2 .mc-sel .ms-i .mx-dot.mc-v-c { background: linear-gradient(135deg, #cfd8ff, #a9a6f4 50%, #c7d6ff); }
}
/* Phones: a chevron at the right edge of each row in the first card, and every other
   card in the same theme: warm gray card, white panel set in and running off the foot. */
@media (max-width: 639px) {
  .mc2 .mc-sel .ms-i svg { display: block; flex: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: #b1b0ad; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mc2 .mc-v, .mc2 .mc-v-a, .mc2 .mc-v-b, .mc2 .mc-v-c { background: #f1f1f3; }
  .mc2 .mc-s { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 14px 30px -18px rgba(0, 0, 0, 0.2); }
  .mc2 .mc-sel .mc-s.ms-s { background: #fbfbfa; }
}
/* Phones: the first card's list with even rows and hairlines between them, inset from
   the name (as in an iOS list); the label set apart above. */
@media (max-width: 639px) {
  .mc2 .mc-sel .mc-s.ms-s { padding: 16px 0 56px !important; }
  .mc2 .mc-sel .ms-s .mc-tag { margin: 0 16px 8px; }
  .mc2 .mc-sel .ms-i { position: relative; gap: 12px; min-height: 0; margin: 0; width: 100%; padding: 10px 14px 10px 16px; border: 0; border-radius: 0; }
  .mc2 .mc-sel .ms-i + .ms-i::after { content: ""; position: absolute; top: 0; right: 0; left: 50px; height: 1px; background: #ecebe8; }
  .mc2 .mc-sel .ms-i .mx-dot { width: 22px; height: 22px; }
  .mc2 .mc-sel .ms-i:hover { background: #f3f2f0; }
}
@media (max-width: 379px) { .mc2 .mc-sel .ms-i { padding-block: 7px; } }
/* Phones: F5's cards show their names and their "Model card" links again. */
@media (max-width: 639px) {
  .mc2 .mc-n { display: block; grid-column: 1 / -1; margin-top: 4px; font: 500 15px/19px var(--font); color: var(--ink); }
  .mc2 .has-id-link .mc-l, .mc2 .mc-l { display: block; grid-column: 1 / -1; grid-row: 8; margin-top: 6px; font: 600 12.5px/16px var(--font); color: var(--ink); text-decoration: none; }
  .mc2 .mc-l::after { content: none; }
  .mc2 .mc-s { grid-template-rows: auto auto auto auto auto 1fr auto auto auto; }
  .mc2 .mc-big { grid-row: 3; } .mc2 .mc-2 { grid-row: 4; } .mc2 .mc-f { grid-row: 5; }
  .mc2 .mc-capin { grid-row: 7; } .mc2 .mc-cond { grid-row: 8; } .mc2 .mc-l { grid-row: 9; }
}
/* ---------- F8: the model cards dialog (tools/mcf.py), after america.gov's passport
   flow: a soft card fading from warm white into lilac at its foot, a white pill label
   at its top left, a floating white dialog: a small bold title, outlined choice rows
   (the picked one ringed in ink), a round back button and a dark Continue pill. ---------- */
#model-cards-steps .ie-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); position: relative; display: grid; place-items: center; min-height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); padding: 72px 40px 40px; overflow: hidden; border-radius: 40px; background: linear-gradient(#f6f5f2 0%, #f1f0ee 45%, #dfe1ee 82%, #b9c1ec 100%); }
.mf-tag { position: absolute; top: 20px; left: 20px; display: inline-grid; place-items: center; height: 38px; padding: 0 18px; border-radius: 99px; background: #fff; font: 400 15px/1 var(--font); color: var(--ink-2); }
.mf-d { display: grid; gap: 14px; width: min(100%, 420px); padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 50px -22px rgba(30, 30, 60, 0.35); }
.mf-s1 { display: grid; gap: 12px; }
.mf-s1[hidden], .mf-c[hidden] { display: none; }
.mf-h { font: 600 14px/19px var(--font); color: var(--ink); }
.mf-os { display: grid; gap: 8px; }
.mf-o { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e3e6; font: 400 13.5px/18px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.mf-o:hover { box-shadow: inset 0 0 0 1px #c9c9ce; }
.mf-o.is-on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mf-o .mx-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.mf-c { display: grid; gap: 10px; }
.mf-big { font: 400 13px/18px var(--font); color: var(--mute); }
.mf-big b { margin-right: 4px; font: 400 30px/1 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.mf-c .mc-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px 16px; margin: 0; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px #e3e3e6; }
.mf-c .mc-f dt { font: 500 12px/16px var(--font); color: var(--ink); }
.mf-c .mc-f dd { margin: 2px 0 0; font: 400 12px/16px var(--font); color: var(--mute); }
.mf-cap { font: 400 12.5px/18px var(--font); color: var(--mute); text-wrap: pretty; }
.mf-cond { font: 400 11.5px/16px var(--font); color: var(--mute); }
.mf-c .mc-l { justify-self: start; margin: 0; font: 600 13px/18px var(--font); color: var(--ink); text-decoration: none; }
.mf-c .mc-l::after { content: none; }
.mf-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.mf-back { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #f0f0f2; color: var(--ink); cursor: pointer; }
.mf-back:disabled { opacity: 0.45; cursor: default; }
.mf-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mf-go { height: 34px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--ink); font: 500 13.5px/1 var(--font); color: #fff; cursor: pointer; }
.mf-go[hidden] { display: none; }
@media (max-width: 639px) {
  #model-cards-steps .ie-v { order: 1; min-height: 0; aspect-ratio: auto; padding: 64px 14px 28px; border-radius: 28px; }
  .mf-tag { top: 14px; left: 14px; height: 32px; padding: 0 14px; font-size: 13px; }
  .mf-d { padding: 16px; border-radius: 18px; }
  .mf-c .mc-f { grid-template-columns: minmax(0, 1fr); }
  #model-cards-steps .mx-all { order: 2; justify-self: start; margin: 10px 0 0 25px; font-size: 16px; }
}
.mf-back:disabled { visibility: hidden; }   /* no back button on the first step */
#model-cards-steps .ie-v { padding-top: 40px; }   /* no pill label above the dialog */

/* The dialog keeps one size: the list and every card share one cell, so it is as tall as the
   tallest step, and picking a model only swaps what shows (width is fixed above). */
.mf-d { align-content: start; }
.mf-d > .mf-s1, .mf-d > .mf-c { grid-area: 1 / 1; align-content: start; }
.mf-d > .mf-ft { grid-area: 2 / 1; align-self: end; }
.mf-s1[hidden], .mf-c[hidden] { display: grid; visibility: hidden; }

#explainer-tour .mac-menu { display: none; }   /* no menu bar across the top of the card (note, Oct 23) */
/* Try: the whole card is the video. The Mac window, its title bar and the menu bar drop away;
   the video fills the card edge to edge (the card's corners clip it). */
#explainer-tour .mac-tb { display: none; }
#explainer-tour .mac-win { top: 0; right: 0; bottom: 0; left: 0; translate: none; border-radius: 0; background: none; box-shadow: none; }
#explainer-tour .mac-win .vd-f { position: absolute; inset: 0; aspect-ratio: auto; width: auto; height: auto; }
#explainer-tour .vd-f video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) { #explainer-tour .mac-win { top: 0; right: 0; left: 0; } }
/* The front card is the "Contactless vitals for everyone" frame without the logo, zoomed out a
   little: the card takes the frame's own gray so the smaller frame has no edge. */
#explainer-tour .ie-v { background: #f1f1f3; }
#explainer-tour .vd-f video { transform: scale(0.88); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 3%), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }   /* centred across the card; the phone keeps running off the foot; the frame's top, left and right melt into the card */
#explainer-tour .mac-win, #explainer-tour .mac-win .vd-f { background: transparent; }
/* Always in full view: the 16:9 frame is sized to fit inside the card at any width (never cropped),
   centred, with the card's gray around it; all four edges melt into the card. */
#explainer-tour .ie-v { container-type: size; }
#explainer-tour .mac-win .vd-f { inset: 0; width: min(100cqw, 100cqh * 16 / 9); height: auto; margin: auto; aspect-ratio: 16 / 9; }
#explainer-tour .vd-f video { object-fit: contain; transform: none; transform-origin: 50% 50%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Capabilities: room under the module before the gray pricing band begins. */
#measure { padding-bottom: 112px; }
@media (max-width: 899px) { #measure { padding-bottom: 72px; } }
/* The play button and player bar sit along the foot of the card, not the foot of the fitted video:
   the frame stops being their positioning box, so they anchor to the card-sized wrapper. */
#explainer-tour .mac-win { display: grid; place-items: center; }
#explainer-tour .mac-win .vd-f { position: static; inset: auto; margin: 0; }
/* Capabilities: larger tiles that carry just the words (no waveform symbols); the FDA badge stays. */
.cp-pic2 .cp-a { position: relative; gap: 0; }
.cp-pic2 .cp-ic { width: min(100%, 90px); height: auto; aspect-ratio: 1; border-radius: 22px; }
.cp-pic2 .cp-ic .cp-v { display: none; }
.cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { position: absolute; top: 0; left: 50%; z-index: 1; display: grid; place-items: center; width: min(100%, 90px); aspect-ratio: 1; padding: 8px; box-sizing: border-box; translate: -50% 0; font: 500 12.5px/1.2 var(--font); letter-spacing: -0.005em; color: #fff; text-align: center; text-wrap: balance; pointer-events: none; }
.cp-pic2 .cp-badge { z-index: 2; }
@media (max-width: 899px) { .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { font-size: 11px; padding: 6px; } }
@media (max-width: 639px) {
  .cp-pic.cp-pic2 { height: auto; overflow: visible; }
  .cp-pic2 .cp-apps { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 14px; padding: 4px 0; }
  .cp-pic.cp-pic2 .cp-apps > .cp-a.cp-a-bl, .cp-pic.cp-pic2 .cp-apps > .cp-a.cp-a-bl2 { display: none !important; }
  .cp-pic.cp-pic2 .cp-apps > .cp-a:not(.cp-a-bl):not(.cp-a-bl2) { display: flex !important; }
  .cp-pic2 .cp-ic { width: 100%; border-radius: 20px; }
  .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { width: 100%; font-size: 12px; }
  .cp-pic2 .cp-badge { right: -4px; }
}
@media (min-width: 640px) {
  .cp-pic2 .cp-ic, .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { width: min(calc(100% - 10px), 90px); }
}
/* Capabilities' label like the other cards' (plain muted text, no pill). */
#measure .f2-k { display: flex; align-items: center; height: auto; padding: 0; border-radius: 0; background: none; font: 400 15px/20px var(--font); color: var(--mute); }
@media (max-width: 639px) { #measure .f2-k { display: none; } }
/* Capabilities' tiles by meaning: blood and heart in reds, breathing in blue, face and speech in violets, eyes in green. */
.cp-pic2 .cp-ic-hr { background: #e5484d; }
.cp-pic2 .cp-ic-hrv { background: #ef6a5b; }
.cp-pic2 .cp-ic-pw { background: #d6336c; }
.cp-pic2 .cp-ic-bp { background: #b91c2e; }
.cp-pic2 .cp-ic-br { background: #2f7de1; }
.cp-pic2 .cp-ic-face { background: #7f52ff; }
.cp-pic2 .cp-ic-lip { background: #a06bf0; }
.cp-pic2 .cp-ic-blink { background: #23a28c; }
/* Less space between the hero and Introducing eSSESSMENT. */
#introducing { padding-top: 48px; }
@media (max-width: 639px) { #introducing { padding-top: 32px; } }
#sdk .sd-dev::after { content: " \2197" !important; margin-left: 4px; }   /* the developer site opens elsewhere: an arrow after it */

/* SD2: the SDK module again, below the first, as a black browser with scrolling code. Its layout
   rules are the #sdk ones, copied. */
#sdk-dark .ie-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); aspect-ratio: auto; }
@media (max-width: 899px) {
  #sdk-dark .ie-v { height: calc(64px + min(550px, 100vw - 80px) * 0.58); }
}
@media (max-width: 639px) {
  #sdk-dark .ie-v { height: auto; aspect-ratio: 1; border-radius: 20px; }
}
@media (max-width: 639px) {
  #sdk-dark .ie-v { border-radius: 18px; }
}
#sdk-dark .ie-v { border-radius: 40px; }
@media (max-width: 639px) {
  #sdk-dark .ie-v { border-radius: 28px; }
}
@media (min-width: 900px) {
  #sdk-dark .sd-tabs { grid-column: 2; }
  #sdk-dark .ie-in { row-gap: 0; }
}
@media (max-width: 899px) {
  #sdk-dark .sd-tabs { order: 1; margin-top: 16px; }
}
@media (max-width: 639px) {
  #sdk-dark .sd-dev { order: 2; justify-self: start; margin: 24px 0 0 25px; }
}
@media (max-width: 639px) {
  #sdk-dark .sd-dev { height: auto; padding: 0; border-radius: 0; box-shadow: none; background: none; margin-top: 32px; font: 600 16px/24px var(--font); color: var(--ink); }
}
@media (max-width: 639px) {
  #sdk-dark .sd-dev { margin-top: 10px; }
}
#sdk-dark .sd-dev::after { content: " \2197" !important; margin-left: 4px; }
#sdk-dark .ie-v.sd-dk { display: flex; flex-direction: column; padding: 9% 7% 0; overflow: hidden; background: linear-gradient(#f6f5f2, #e9e9ec); }
@media (max-width: 639px) { #sdk-dark .ie-v.sd-dk { padding: 8% 6% 0; } }
.sdw-b { position: relative; z-index: 1; display: flex; flex: none; align-items: center; height: 40px; padding: 0 14px; border-radius: 14px 14px 0 0; background: #1b1b1d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sdw-d { display: flex; gap: 7px; }
.sdw-d i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.sdw-d i + i { background: #febc2e; }
.sdw-d i + i + i { background: #28c840; }
.sdw-u { position: absolute; left: 50%; max-width: 56%; height: 24px; padding: 0 14px; overflow: hidden; border-radius: 99px; translate: -50% 0; background: #2a2a2d; font: 400 12px/24px var(--font); color: #a1a1a8; white-space: nowrap; text-overflow: ellipsis; }
.sdw { display: none; flex: 1; flex-direction: column; min-height: 0; background: #0b0b0c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sd-dk[data-lang="swift"] .sdw[data-lang="swift"], .sd-dk[data-lang="kotlin"] .sdw[data-lang="kotlin"], .sd-dk[data-lang="cpp"] .sdw[data-lang="cpp"], .sd-dk[data-lang="node"] .sdw[data-lang="node"] { display: flex; }
.sdw-f { flex: none; padding: 0 16px; border-bottom: 1px solid #1f1f22; font: 500 12px/36px var(--font); color: #c9c9cf; }
.sdw-c { flex: 1; min-height: 0; padding: 14px 0 28px; overflow: auto; font: 400 14px/24px "Geist Mono", ui-monospace, Menlo, monospace; color: #e4e4e7; scrollbar-width: thin; scrollbar-color: #3a3a3f transparent; outline: none; overscroll-behavior: contain; }
.sdw-c::-webkit-scrollbar { width: 10px; height: 10px; }
.sdw-c::-webkit-scrollbar-thumb { border: 2px solid #0b0b0c; border-radius: 99px; background: #3a3a3f; }
.sdw-c::-webkit-scrollbar-corner { background: transparent; }
.sdw-l { display: flex; width: max-content; min-width: 100%; }
.sdw-l i { flex: none; width: 48px; padding-right: 16px; font-style: normal; text-align: right; color: #5f5f68; user-select: none; }
.sdw-l code { padding-right: 24px; font: inherit; white-space: pre; }
@media (max-width: 639px) { .sdw-c { font-size: 12px; line-height: 21px; } .sdw-l i { width: 36px; padding-right: 10px; } .sdw-u { font-size: 11px; } }
/* No gray card: the black browser is the whole card, edge to edge. */
#sdk-dark .ie-v.sd-dk { padding: 0; background: #0b0b0c; }
@media (max-width: 639px) { #sdk-dark .ie-v.sd-dk { padding: 0; } }
.sd-dk .sdw-b { height: 48px; padding: 0 22px; border-radius: 0; box-shadow: none; }
.sd-dk .sdw { box-shadow: none; }
.sd-dk .sdw-f { padding: 0 22px; }
.sd-dk .sdw-c { padding-bottom: 32px; }
@media (max-width: 639px) { .sd-dk .sdw-b { height: 42px; padding: 0 16px; } .sd-dk .sdw-f { padding: 0 16px; } }
/* Capabilities' subcopy in the higher cards' style (ink, 26px lines), a touch smaller. */
@media (min-width: 640px) { #measure .f2-p { font-size: 16px; line-height: 25px; color: var(--ink); } }
@media (max-width: 639px) { #measure .f2-p { font-size: 16px; line-height: 23px; } }
/* The browser's address pill is a link to the docs page of the language on show. */
.sdw-u { display: none; z-index: 1; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.sd-dk[data-lang="swift"] .sdw-u[data-lang="swift"], .sd-dk[data-lang="kotlin"] .sdw-u[data-lang="kotlin"], .sd-dk[data-lang="cpp"] .sdw-u[data-lang="cpp"], .sd-dk[data-lang="node"] .sdw-u[data-lang="node"] { display: block; }
.sdw-u::after { content: " \2197"; margin-left: 2px; color: #6c6c74; }
.sdw-u:hover { background: #38383c; color: #fff; }
.sdw-u:focus-visible { outline: 2px solid #8a8a92; outline-offset: 2px; }
/* Capabilities on phones: smaller tiles (88px at most), still three across. */
@media (max-width: 639px) {
  .cp-pic2 .cp-apps { justify-items: center; row-gap: 12px; }
  .cp-pic2 .cp-ic, .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { width: min(100%, 88px); }
  .cp-pic2 .cp-ic { border-radius: 18px; }
  .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { padding: 4px; font-size: 10.5px; line-height: 1.2; }
  .cp-pic2 .cp-badge { right: -3px; height: 14px; padding: 0 5px; font-size: 8px; }
}
/* The address pill reads as a link: brighter text, an outline, and a white "Open docs" chip. */
.sd-dk .sdw-u { align-items: center; gap: 10px; max-width: 72%; height: 30px; padding: 0 5px 0 14px; border-radius: 99px; background: #2a2a2d; box-shadow: inset 0 0 0 1px #4a4a50; font: 400 12.5px/30px var(--font); color: #e4e4e7; text-overflow: clip; }
.sd-dk[data-lang="swift"] .sdw-u[data-lang="swift"], .sd-dk[data-lang="kotlin"] .sdw-u[data-lang="kotlin"], .sd-dk[data-lang="cpp"] .sdw-u[data-lang="cpp"], .sd-dk[data-lang="node"] .sdw-u[data-lang="node"] { display: flex; }
.sd-dk .sdw-u::after { content: none; }
.sdw-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdw-go { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 99px; background: #fff; font: 500 12px/1 var(--font); color: #0b0b0c; white-space: nowrap; transition: background-color 0.15s ease; }
.sdw-go svg { width: 10px; height: 10px; }
.sd-dk .sdw-u:hover { background: #333337; box-shadow: inset 0 0 0 1px #6a6a72; color: #fff; }
.sd-dk .sdw-u:hover .sdw-go { background: #e9e9ee; }
@media (max-width: 639px) { .sd-dk .sdw-u { max-width: 80%; height: 28px; padding: 0 4px 0 10px; gap: 8px; font-size: 11px; } .sdw-go { height: 20px; padding: 0 8px; font-size: 11px; } }
.sd-dk .sdw-u { width: max-content; max-width: calc(100% - 170px); }
@media (max-width: 639px) { .sd-dk .sdw-u { left: 84px; right: 12px; width: auto; max-width: none; translate: none; } }
/* Capabilities on phones, evenly: the eight tiles in two full rows of four, one gap everywhere,
   every tile the same square, the words scaling with the screen. */
@media (max-width: 639px) {
  .cp-pic2 .cp-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px; justify-items: stretch; padding: 0; }
  .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) { width: 100%; }
  .cp-pic2 .cp-ic, .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { width: 100%; }
  .cp-pic2 .cp-ic { border-radius: 16px; }
  .cp-pic2 .cp-a:not(.cp-a-bl):not(.cp-a-bl2) p { padding: 3px; font-size: clamp(9.5px, 2.5vw, 13px); line-height: 1.2; }
  .cp-pic2 .cp-badge { top: -6px; right: -3px; height: 13px; padding: 0 5px; font-size: 7.5px; }
}
@media (max-width: 639px) { .cp-pic.cp-pic2 { aspect-ratio: auto; height: auto; } }   /* no empty square under the tiles */
/* Open docs sits at the bar's top right, quiet: dark with a hairline, not a white chip. The address
   pill goes back to plain (still a link, but it doesn't ask for the click). */
.sd-dk .sdw-u { gap: 0; max-width: calc(100% - 300px); height: 26px; padding: 0 14px; background: #2a2a2d; box-shadow: none; font: 400 12px/26px var(--font); color: #a1a1a8; }
.sd-dk .sdw-u:hover { background: #333337; box-shadow: none; color: #d4d4d8; }
.sd-dk .sdw-go { display: none; position: absolute; top: 50%; right: 16px; z-index: 2; height: 26px; padding: 0 11px; translate: 0 -50%; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px #3f3f45; font: 400 12px/1 var(--font); color: #b4b4bb; text-decoration: none; }
.sd-dk[data-lang="swift"] .sdw-go[data-lang="swift"], .sd-dk[data-lang="kotlin"] .sdw-go[data-lang="kotlin"], .sd-dk[data-lang="cpp"] .sdw-go[data-lang="cpp"], .sd-dk[data-lang="node"] .sdw-go[data-lang="node"] { display: inline-flex; }
.sd-dk .sdw-go:hover { background: #232326; color: #fff; box-shadow: inset 0 0 0 1px #5a5a62; }
.sd-dk .sdw-go:focus-visible { outline: 2px solid #8a8a92; outline-offset: 2px; }
.sdw-b { position: relative; }
@media (max-width: 639px) {
  .sd-dk .sdw-u { display: none !important; }
  .sd-dk .sdw-go { right: 12px; height: 24px; padding: 0 10px; font-size: 11.5px; }
}
/* Pricing's label like the other cards' (plain muted text, no pill). */
#pricing .f2-k { display: flex; align-items: center; height: auto; padding: 0; border-radius: 0; background: none; font: 400 15px/20px var(--font); color: var(--mute); }
@media (max-width: 639px) { #pricing .f2-k { display: none; } }
/* A little more room around Open docs and the lights. */
.sd-dk .sdw-b { height: 52px; padding: 0 24px; }
.sd-dk .sdw-go { right: 24px; height: 28px; padding: 0 14px; }
.sd-dk .sdw-f { padding: 0 24px; }
@media (max-width: 639px) { .sd-dk .sdw-b { height: 46px; padding: 0 18px; } .sd-dk .sdw-go { right: 18px; height: 26px; padding: 0 12px; } .sd-dk .sdw-f { padding: 0 18px; } }
/* Blood pressure's tile: the name on two lines, "(uncalibrated)" smaller beneath, all centred with room at the sides. */
.cp-pic2 .cp-ic-bp + *, .cp-pic2 .cp-a:has(.cp-ic-bp) p { padding-inline: 12px; text-wrap: balance; }
.cp-pic2 .cp-sub { display: block; margin-top: 3px; font-size: 0.84em; opacity: 0.85; white-space: nowrap; }
@media (max-width: 639px) { .cp-pic2 .cp-a:has(.cp-ic-bp) p { padding-inline: 4px; } .cp-pic2 .cp-sub { margin-top: 2px; } }
.cp-pic2 .cp-a:has(.cp-ic-bp) p { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* Pricing, after the reference: a plain card. The plan name in bold, the product and who it is for in
   gray beneath it, a small gray note, the points with check marks (no lines, no pills), and a full-width
   dark pill button at the foot. The SDK card is the same card in black. */
#pricing .pr-g { padding-top: 0; row-gap: 20px; column-gap: 20px; }
@media (min-width: 640px) { #pricing .pr-g { grid-template-rows: repeat(6, auto); row-gap: 0; } #pricing .pr-c { grid-row: span 6; grid-template-rows: subgrid; } }
#pricing .pr-c { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 6px; padding: 34px 32px 32px; border-radius: 24px; text-align: left; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 44px -28px rgba(20, 20, 40, 0.28); color: #1d1d1f; }
#pricing .pr-c::before { content: none; }
#pricing .pr-p { display: contents; }
#pricing .pr-p b { grid-column: 1 / -1; grid-row: 1; font: 700 32px/38px var(--font); letter-spacing: -0.02em; white-space: nowrap; color: #1d1d1f; }
#pricing .pr-n { grid-column: 1; grid-row: 2; position: static; display: block; margin: 8px 0 0; font: 400 17px/24px var(--font); letter-spacing: 0; color: #7a7479; }
#pricing .pr-tag { grid-column: 2; grid-row: 2; align-self: start; display: block; height: auto; margin: 8px 0 0; padding: 0; border-radius: 0; background: none; font: 400 17px/24px var(--font); text-transform: lowercase; color: #7a7479; }
#pricing .pr-s { display: none; }
#pricing .pr-p span { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; font: 400 14.5px/20px var(--font); color: #7a7479; }
#pricing .pr-l { grid-column: 1 / -1; grid-row: 4; align-self: start; display: grid; gap: 14px; margin: 30px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
#pricing .pr-l li { align-items: flex-start; gap: 14px; padding: 0; border: 0; border-radius: 0; font: 400 16px/23px var(--font); color: #1d1d1f; }
#pricing .pr-l li::before { content: none; display: none; }
#pricing .pr-l svg { display: block; flex: none; width: 17px; height: 17px; margin: 3px 0 0; padding: 0; background: none; color: #9b3b3b; }
#pricing .pr-f { grid-column: 1 / -1; grid-row: 5; align-self: end; margin: 18px 0 0; font: 400 12.5px/17px var(--font); color: #7a7479; text-align: left; }
#pricing .pr-b { grid-column: 1 / -1; grid-row: 6; align-self: end; justify-self: stretch; width: auto; height: 54px; margin: 26px 0 0; padding: 0 24px; background: #1d1d1f; color: #fff; font: 500 17px/1 var(--font); }
#pricing .pr-b:hover { background: #38383c; }
/* the SDK card, in black */
#pricing .pr-c:nth-child(2) { background: #0e0e10; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -28px rgba(0, 0, 0, 0.5); color: #fff; }
#pricing .pr-c:nth-child(2) .pr-p b, #pricing .pr-c:nth-child(2) .pr-l li { color: #fff; }
#pricing .pr-c:nth-child(2) .pr-n, #pricing .pr-c:nth-child(2) .pr-tag, #pricing .pr-c:nth-child(2) .pr-p span, #pricing .pr-c:nth-child(2) .pr-f { color: #8f8f98; }
#pricing .pr-c:nth-child(2) .pr-f a { color: #fff; }
#pricing .pr-c:nth-child(2) .pr-l svg { color: #e08a8a; }
#pricing .pr-c:nth-child(2) .pr-b { background: #fff; color: #0e0e10; }
#pricing .pr-c:nth-child(2) .pr-b:hover { background: #e4e4e8; }
@media (max-width: 639px) {
  #pricing .pr-c { grid-template-rows: none; grid-row: auto; padding: 26px 22px 24px; border-radius: 20px; }
  #pricing .pr-p b { font-size: 28px; line-height: 34px; }
  #pricing .pr-n, #pricing .pr-tag { font-size: 16px; }
  #pricing .pr-l { gap: 12px; margin-top: 24px; }
  #pricing .pr-l li { font-size: 15.5px; }
  #pricing .pr-b { height: 50px; margin-top: 22px; }
}
/* Who it is for leads each card as a pill; the product name follows the plan name. */
@media (min-width: 640px) { #pricing .pr-g { grid-template-rows: repeat(7, auto); } #pricing .pr-c { grid-row: span 7; } }
#pricing .pr-tag { grid-column: 1 / -1; grid-row: 1; align-self: start; justify-self: start; display: inline-flex; align-items: center; height: 28px; margin: 0 0 22px; padding: 0 13px; border-radius: 99px; background: #f1f1f2; font: 500 13px/1 var(--font); text-transform: none; white-space: nowrap; color: #55555b; }
#pricing .pr-c:nth-child(2) .pr-tag { background: rgba(255, 255, 255, 0.12); color: #e9e9ee; }
#pricing .pr-p b { grid-row: 2; }
#pricing .pr-n { grid-column: 1 / -1; grid-row: 3; }
#pricing .pr-p span { grid-row: 4; }
#pricing .pr-l { grid-row: 5; }
#pricing .pr-f { grid-row: 6; }
#pricing .pr-b { grid-row: 7; }
@media (max-width: 639px) { #pricing .pr-tag { margin-bottom: 18px; } }
/* Pill, then the product name, then the plan. */
#pricing .pr-n { grid-row: 2; margin: 0; font: 600 19px/26px var(--font); letter-spacing: -0.005em; color: #1d1d1f; }
#pricing .pr-c:nth-child(2) .pr-n { color: #fff; }
#pricing .pr-p b { grid-row: 3; margin-top: 18px; }
#pricing .pr-p span { grid-row: 4; margin-top: 12px; }
#pricing .pr-n { font-size: 26px; line-height: 32px; letter-spacing: -0.015em; }
#pricing .pr-p b { margin-top: 14px; }
@media (max-width: 639px) { #pricing .pr-n { font-size: 23px; line-height: 29px; } }
/* FDA cleared: the two traces run slowly across their cards, like a live monitor. The waveform is drawn
   twice, end to end, and slid one length to the left, over and over; the fade-in at the left is a mask on
   the svg so it stays put while the line moves. */
#fda .f2-tr { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%); mask-image: linear-gradient(90deg, transparent 0, #000 25%); }
#fda .f2-run { animation: f2-run 18s linear infinite; }
#fda .f2-front .f2-run { animation-duration: 26s; }
@keyframes f2-run { to { transform: translateX(-240px); } }
@media (prefers-reduced-motion: reduce) { #fda .f2-run { animation: none; } }
/* Pricing: a hairline between the plan and the points. */
#pricing .pr-l { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
#pricing .pr-c:nth-child(2) .pr-l { border-top-color: rgba(255, 255, 255, 0.16); }
/* A line on who each plan is for, under the product name. */
@media (min-width: 640px) { #pricing .pr-g { grid-template-rows: repeat(8, auto); } #pricing .pr-c { grid-row: span 8; } }
#pricing .pr-s { display: block; grid-column: 1 / -1; grid-row: 3; position: static; margin: 8px 0 0; font: 400 16px/23px var(--font); color: #7a7479; }
#pricing .pr-c:nth-child(2) .pr-s { color: #8f8f98; }
#pricing .pr-p b { grid-row: 4; margin-top: 22px; }
#pricing .pr-p span { grid-row: 5; }
#pricing .pr-l { grid-row: 6; }
#pricing .pr-f { grid-row: 7; }
#pricing .pr-b { grid-row: 8; }
/* FDA traces one notch faster (18s to 14s, 26s to 20s a length). */
#fda .f2-run { animation-duration: 14s; }
#fda .f2-front .f2-run { animation-duration: 20s; }
/* Pricing: the points a size smaller. */
#pricing .pr-l { gap: 12px; }
#pricing .pr-l li { gap: 12px; font-size: 14.5px; line-height: 21px; }
#pricing .pr-l svg { width: 15px; height: 15px; margin-top: 3px; }
@media (max-width: 639px) { #pricing .pr-l li { font-size: 14px; } }
/* Pricing: a second hairline, between who the plan is for and the plan itself. */
#pricing .pr-s { padding-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
#pricing .pr-c:nth-child(2) .pr-s { border-bottom-color: rgba(255, 255, 255, 0.16); }
#pricing .pr-p b { margin-top: 22px; }
/* Pricing: the check marks in ink (white on the black card). */
#pricing .pr-l svg { color: #1d1d1f; }
#pricing .pr-c:nth-child(2) .pr-l svg { color: #fff; }
/* Pricing: three points up top; the rest sit at the foot in smaller type. */
@media (min-width: 640px) { #pricing .pr-g { grid-template-rows: repeat(9, auto); } #pricing .pr-c { grid-row: span 9; } }
#pricing .pr-m { grid-column: 1 / -1; grid-row: 7; align-self: start; display: grid; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
#pricing .pr-m li { font: 400 12.5px/18px var(--font); color: #7a7479; }
#pricing .pr-c:nth-child(2) .pr-m li { color: #8f8f98; }
#pricing .pr-f { grid-row: 8; margin-top: 10px; }
#pricing .pr-b { grid-row: 9; }
#pricing .pr-m a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#pricing .pr-c:nth-child(2) .pr-m a { color: #fff; }
/* The fine print starts on the same line in both cards. */
#pricing .pr-m, #pricing .pr-f { grid-column: 1 / -1; grid-row: 8; align-self: start; margin: 18px 0 0; }
#pricing .pr-m li, #pricing .pr-f { font: 400 12.5px/18px var(--font); }
/* ...and on the bottom row: the last lines of the fine print sit level, right above the buttons. */
#pricing .pr-m, #pricing .pr-f { align-self: end; margin-top: 18px; }
/* Pricing on phones: the plan name is a drawer. Closed, only the pill, name, line and the plan row show,
   with the button; open, the note, the points and the fine print drop down between them. */
@media (max-width: 639px) {
  #pricing .pr-fold .pr-p b { display: flex; align-items: center; justify-content: space-between; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #pricing .pr-fold .pr-p b::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 8px 5px 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; }
  #pricing .pr-fold.pr-open .pr-p b::after { margin-bottom: -3px; transform: rotate(-135deg); }
  #pricing .pr-fold:not(.pr-open) .pr-l, #pricing .pr-fold:not(.pr-open) .pr-m, #pricing .pr-fold:not(.pr-open) .pr-f { display: none; }
  #pricing .pr-fold .pr-b { margin-top: 22px; }
}
/* Capabilities on phones: the faint blurred tiles are back, one row above and one below the eight, ever so
   subtle (a light blur, low opacity). */
@media (max-width: 639px) {
  .cp-pic.cp-pic2 .cp-apps > .cp-a.cp-a-bl2:nth-child(-n+4) { display: flex !important; order: -1; filter: blur(5px); opacity: 0.4; }
  .cp-pic.cp-pic2 .cp-apps > .cp-a.cp-a-bl2:nth-last-child(-n+4) { display: flex !important; order: 99; filter: blur(5px); opacity: 0.4; }
  .cp-pic2 .cp-apps { row-gap: 12px; }
}
#pricing .pr-p span strong { font-weight: 600; color: #1d1d1f; }
/* The links are back in the top bar on wide screens: eSSESSMENT, SmartSpectra SDK, Docs, Research and
   Newsroom beside the logo; the Menu pill stays at the right (and carries them on narrower screens). */
@media (min-width: 1100px) { .hd .nav { display: flex !important; margin-left: 28px; } }
/* Breathing: two breaths a length, and the length in 12s, so a breath every 6s (it was one every 20s). */
#fda .f2-front .f2-run { animation-duration: 12s; }

/* SDK tabs: after the tabs, a divider and an outlined link to the chosen platform's docs (desktop only) */
.sd-tabs .sd-od { position: relative; display: none; align-items: center; height: 40px; margin-left: 9px; padding: 0 18px; border-radius: 99px; box-shadow: inset 0 0 0 1px #d9d8d5; font: 500 15px/1 var(--font); color: var(--ink); text-decoration: none; }
.sd-tabs .sd-od:hover { background: #f1f1f3; }
.sd-tabs .sd-od::after { content: " \2197"; margin-left: 4px; }
.sd-tabs .sd-od::before { content: ""; position: absolute; left: -16px; top: 50%; width: 1px; height: 20px; translate: 0 -50%; background: #d9d8d5; }
.sd-v[data-lang="swift"] ~ .sd-tabs .sd-od[data-lang="swift"], .sd-v[data-lang="kotlin"] ~ .sd-tabs .sd-od[data-lang="kotlin"], .sd-v[data-lang="cpp"] ~ .sd-tabs .sd-od[data-lang="cpp"], .sd-v[data-lang="node"] ~ .sd-tabs .sd-od[data-lang="node"] { display: inline-flex; }
@media (max-width: 639px) { .sd-tabs .sd-od { display: none !important; } }

/* MCS: model cards as two cards on the gradient panel: the list, then the skin types */
.mcs .sk-v { display: grid; align-content: center; justify-items: center; gap: 16px; padding: 40px 24px; border-radius: 40px; background: linear-gradient(#f6f5f2 0%, #f1f0ee 45%, #dfe1ee 82%, #b9c1ec 100%); }
.sk-c { display: grid; gap: 12px; width: min(100%, 460px); padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 50px -22px rgba(30, 30, 60, 0.35); box-sizing: border-box; }
.sk-h { font: 600 15px/20px var(--font); color: var(--ink); }
.sk-s { margin-top: -6px; font: 400 13px/18px var(--font); color: var(--mute); }
.sk-o { text-decoration: none; color: var(--ink); }
.sk-o span { flex: 1; min-width: 0; text-align: left; }
.sk-o svg { width: 10px; height: 10px; flex: none; color: var(--mute); opacity: 0; transition: opacity 0.15s; }
.sk-o:hover svg { opacity: 1; }
.sk-f { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.sk-f li { display: grid; justify-items: center; gap: 6px; }
.sk-f img { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.sk-f span { font: 400 12px/1 var(--font); color: var(--mute); }
.sk-n { display: grid; gap: 6px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid #ececef; }
.sk-n div { display: flex; justify-content: space-between; gap: 12px; }
.sk-n dt { font: 400 13px/18px var(--font); color: var(--ink); }
.sk-n dd { margin: 0; font: 400 13px/18px var(--font); color: var(--mute); }
@media (max-width: 639px) { .mcs .sk-v { padding: 24px 14px; border-radius: 28px; } .sk-c { padding: 18px; } .sk-f { gap: 6px; } }
.mcs .ie-v.sk-v { height: auto; min-height: 0; aspect-ratio: auto; overflow: visible; }
.sk-n dd { white-space: nowrap; }
@media (max-width: 639px) { #model-cards-skin .ie-v { order: 1; padding: 20px 14px; } #model-cards-skin .mx-all { order: 2; justify-self: start; margin: 10px 0 0 25px; font-size: 16px; } }   /* phones: as the model cards above */
@media (max-width: 639px) { #skin-types .ie-v { order: 1; padding: 20px 14px; } #skin-types .mx-all { order: 2; justify-self: start; margin: 10px 0 0 25px; font-size: 16px; } }
/* Skin types: the standard grey panel (as the explainer video card), not the gradient */
#skin-types .ie-v.sk-v { background: #f1f1f3; }
/* Skin types: the panel as tall as the model cards panel above it */
#skin-types .ie-v.sk-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); min-height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); padding: 40px; box-sizing: border-box; }
@media (max-width: 639px) { #skin-types .ie-v.sk-v { min-height: 0; padding: 20px 14px; } }
#skin-types .ie-v.sk-v { min-height: 0; }   /* height comes from the model cards panel (script in home.html) */
/* Wide screens: the nav links show, so no Menu button; "Download the app" sits in the top right corner. Narrower screens keep Menu. */
@media (min-width: 1100px) { .hd-r .menu-b { display: none !important; } }
/* Pricing on phones and tablets: the headline and its line above the cards, not under them */
@media (max-width: 899px) { #pricing .pr-t { order: 0; margin-top: 0; } #pricing .pr-g { order: 1; margin-top: 28px; } }
@media (max-width: 639px) { #pricing .pr-t > * { order: 0; } #pricing .pr-t .f2-h { margin-top: 0; } }
@media (max-width: 639px) { #pricing .pr-t .f2-k { display: inline-flex; justify-self: start; order: 0; margin: 0 0 12px 25px; } }   /* phones: the small "Pricing" label above the headline */
/* Pricing on phones and tablets: the label, headline and line start at the cards' left edge */
@media (max-width: 899px) { #pricing .pr-t, #pricing .pr-t .f2-k, #pricing .pr-t .f2-h, #pricing .pr-t .f2-p { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }
@media (max-width: 639px) { #sdk-dark .sd-dev::after { content: none !important; } }   /* phones: the developer-site link without its arrow */

/* MCX: model cards and skin types in one white card on the gradient panel, the panel as big as Model cards' */
.mcx .ie-v.mcx-v { display: grid; place-items: center; padding: 32px; border-radius: 40px; background: linear-gradient(#f6f5f2 0%, #f1f0ee 45%, #dfe1ee 82%, #b9c1ec 100%); box-sizing: border-box; }
.mcx-c { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 22px; width: 100%; max-width: 600px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 50px -22px rgba(30, 30, 60, 0.35); box-sizing: border-box; }
.mcx-k { font: 600 13px/18px var(--font); color: var(--ink); }
.mcx-os { display: grid; gap: 7px; margin-top: 12px; }
.mcx-o { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e3e6; font: 400 13px/17px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.mcx-o:hover { box-shadow: inset 0 0 0 1px #c9c9ce; }
.mcx-o.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mcx-o .mx-dot { width: 14px; height: 14px; }
.mcx-d { display: flex; flex-direction: column; padding-left: 22px; border-left: 1px solid #ececef; }
.mcx-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.mcx-big b { font: 400 38px/1 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.mcx-big span { font: 400 13px/18px var(--font); color: var(--mute); }
.mcx-n { margin-top: 6px; font: 400 13px/18px var(--font); color: var(--mute); }
.mcx-k2 { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ececef; }
.mcx-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mcx-f li { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.mcx-f img { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.mcx-f b { font: 600 14px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.mcx-f span { font: 400 11px/1.2 var(--font); color: var(--mute); }
.mcx-a { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 16px; font: 600 13px/1 var(--font); color: var(--ink); text-decoration: none; }
.mcx-a svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mcx-a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) { .mcx .ie-v.mcx-v { padding: 24px; } }
@media (max-width: 639px) {
  .mcx .ie-v.mcx-v { order: 1; height: auto; padding: 18px 12px; border-radius: 28px; }
  .mcx .mx-all { order: 2; justify-self: start; margin: 10px 0 0 25px; font-size: 16px; }
  .mcx-c { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; border-radius: 18px; }
  .mcx-d { padding: 16px 0 0; border-left: 0; border-top: 1px solid #ececef; }
}
/* MCX: the result line is gone; the skin types lead the right column, spread over its height */
.mcx-d { justify-content: flex-start; }
.mcx-f { gap: 18px 8px; margin-top: 16px; }
.mcx-f li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; }
.mcx-f img { width: 40px; height: 40px; }
.mcx-f b { font-size: 16px; }
.mcx-f { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }   /* two across, three down: fills the column beside the list */
@media (max-width: 639px) { .mcx-f { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; } .mcx-f li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; } .mcx-f img { width: 32px; height: 32px; } .mcx-f b { font-size: 14px; } }
/* MCX: no counts, just the six skin types, each with a check: tested on all of them */
.mcx-s { margin-top: 4px; font: 400 12px/16px var(--font); color: var(--mute); }
.mcx-f { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; margin-top: 20px; }
.mcx-f li { position: relative; display: grid; grid-template-columns: none; grid-template-rows: none; justify-items: center; gap: 6px; }
.mcx-f img { grid-row: auto; width: 56px; height: 56px; }
.mcx-f li::after { content: ""; position: absolute; top: 38px; left: calc(50% + 14px); width: 18px; height: 18px; border-radius: 50%; background: #17171a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px #fff; }
.mcx-f span { font: 500 12px/1 var(--font); color: var(--mute); }
@media (max-width: 639px) { .mcx-f { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .mcx-f img { width: 40px; height: 40px; } .mcx-f li::after { top: 26px; left: calc(50% + 9px); width: 15px; height: 15px; background-size: 10px; } .mcx-f li { grid-template-columns: none; } }
.mcx-f li::after { content: none !important; }   /* no check badges on the portraits */
/* MCX: "Open model card" sits under the list it belongs to */
.mcx-l .mcx-a { margin-top: 14px; padding-top: 0; }
/* MCX: on the solid grey panel, like the homepage skin types card */
.mcx .ie-v.mcx-v { background: #f1f1f3; }
/* Phones: menu items left-aligned (note, Oct 30). */
@media (max-width: 639px) { .mm-l { justify-items: start; align-items: flex-start; } .mm-l a, .mm-l .mm-h { text-align: left; } }