/* Page CSS shared by index.html and features.html: only what sits inside a visual and the kit lacks
   (the phone frame for the client's real app screenshots, a phone beside or on a photograph), the spacing a
   recipe names, and the tablet and phone stacking of the picture rows. */

/* the phone: one real app screenshot in a plain device frame (sections-library.md, Heroes: .device) */
.device { flex: none; width: var(--dev-w, 216px); max-width: 100%; padding: 8px; border-radius: 32px; background: #0f1512; }
.device > img { display: block; width: 100%; height: auto; border-radius: 24px; }

/* one drawn picture of one to five phones, top-aligned, cut by its frame's foot */
.phones { display: flex; justify-content: center; align-items: flex-start; gap: var(--s-5); width: 100%; }
.frame.phone-frame { align-items: flex-start; min-height: 0; padding: var(--s-6) var(--s-5) 0; border-color: transparent; background: var(--ground-bg); }
.frame.phone-frame > .phones { align-self: flex-start; }
.tile__media.phone-media { display: flex; align-items: flex-start; min-width: 0; min-height: 0; padding: var(--s-6) var(--s-5) 0; background: var(--ground-bg); }
.phone-media > .phones { min-height: 0; }

/* a phone on a photograph: at the picture's lower corner, cut by the frame's foot */
.frame > .device.over, .hero__media > .device.over, .hero__art > .device.over {
  position: absolute; z-index: 1; left: var(--s-5); top: auto; bottom: calc(-1 * var(--over-cut, 88px)); --dev-w: 184px;
}
.frame > .device.over--right, .hero__media > .device.over--right, .hero__art > .device.over--right { left: auto; right: var(--s-5); }
.device.over[hidden] { display: none; }

/* the features hero: the photograph fills the art frame */
.hero__art > .art-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }

/* a picture row under a section's head: the photograph and the phones, as tall as the screen leaves */
.media { margin-top: var(--s-7); grid-template-rows: minmax(0, 1fr); }
.media > .frame { min-height: 0; }
.wide-frame { margin-top: var(--s-6); }
@media (min-width: 1280px) { .phones--3 > .device { --dev-w: 264px; } }
.below { margin-top: var(--s-5); }
.cols { margin-top: var(--s-7); }

/* pinned-chapters: a step's picture is a phone on the lit ground, or the photograph beside the phone */
main [data-moment="pinned-chapters"] .mo-pc__visual.mo-pc__visual--lit.phone-top { align-items: flex-start; padding-bottom: 0; }
main [data-moment="pinned-chapters"] .mo-pc__visual.mo-pc__visual--lit.duo { padding: 0; gap: 0; align-items: stretch; justify-content: flex-start; }
main [data-moment="pinned-chapters"] .mo-pc__visual.duo > img.duo__photo { width: 56%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; flex: none; }
main [data-moment="pinned-chapters"] .mo-pc__visual.duo > .duo__phone { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: flex-start; padding: var(--s-5) var(--s-4) 0; overflow: hidden; }
.mo-pc__visual .device { --dev-w: 200px; }

/* a split's right column as a photograph beside one phone */
.pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--card-gap); height: 100%; min-height: 0; }
.pair > .frame { min-height: 0; }
.pair .device { --dev-w: 176px; }

/* the feature list: two columns of names where the column is narrow */
@media (max-width: 1279px) {
  .rows--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .rows--two > li { display: block; padding-block: 0; }
  .rows--two > li > .rows__name { display: flex; align-items: center; min-height: 48px; }
  .rows--two .rows__value { display: none; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* a tablet keeps the photograph and the phones side by side */
  .media { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .media > .span-8 { grid-column: auto / span 8; }
  .media > .span-4 { grid-column: auto / span 4; }
  .media > .span-6 { grid-column: auto / span 6; }
  .phone-frame .device, .phone-media .device { --dev-w: 176px; }
  .phones { gap: var(--s-4); }
  .phones--5 > .device:nth-child(n+5) { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .phones--5 > .device, .phones--3 > .device { --dev-w: 168px; }
  .phones { gap: var(--s-4); }
}
@media (max-width: 1023px) {
  .grid.fill:has(> .pair) { display: flex; flex-direction: column; gap: var(--s-6); }
  .grid.fill > .pair { flex: 1 1 0; height: auto; min-height: 240px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* three tiles across, a little taller */
  #moments .grid > .tile { grid-column: auto / span 4; --tile-ratio: 3 / 5; }
}
@media (max-width: 350px) {
  /* the bar at 320: the name, the main action and the menu button on one line */
  .nav__logo .mark { display: none; }
  .nav:not(.is-open) .nav__actions .btn { padding-inline: var(--s-2); font-size: 13px; gap: 0; }
  .nav:not(.is-open) .nav__actions .btn::after { display: none; }
  .grid.fill > .frame--fill { min-height: 150px; }
  #plan .panel { --p-h: 150px; }
}
@media (max-width: 639px) {
  .media { display: flex; flex-direction: column; gap: var(--s-3); }
  .media .phone-frame .device, .pair .phone-frame .device { --dev-w: 220px; }
  .pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
  #moments .grid > .tile { grid-column: 1 / -1; --tile-ratio: 8 / 9; }
  .phone-media .phones:has(> .device:only-child) > .device { --dev-w: 220px; }

  .media > * { flex: 1 1 0; min-height: 168px; }
  .phones { gap: var(--s-3); }
  .phone-frame .device, .phone-media .device { --dev-w: 148px; padding: 6px; border-radius: 24px; }
  .phone-frame .device > img, .phone-media .device > img { border-radius: 18px; }
  .phones--5 > .device:nth-child(n+3), .phones--3 > .device:nth-child(n+3) { display: none; }
  .frame.phone-frame, .tile__media.phone-media { padding: var(--s-5) var(--s-4) 0; }
  .frame > .device.over, .hero__media > .device.over, .hero__art > .device.over { --dev-w: 132px; padding: 6px; border-radius: 22px; --over-cut: 72px; left: var(--s-4); }
  .frame > .device.over--right, .hero__media > .device.over--right, .hero__art > .device.over--right { left: auto; right: var(--s-4); }
  .device.over > img { border-radius: 16px; }
  .mo-pc__visual .device { --dev-w: 132px; padding: 6px; border-radius: 22px; }
  .mo-pc__visual .device > img { border-radius: 16px; }
}

/* ---- the forest, cream and lime direction ---- */
/* a real card cropped from an app screenshot: a rounded picture with a soft shadow, never tilted */
.frag { display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -18px rgb(6 16 11 / .55), 0 2px 6px rgb(6 16 11 / .18); }
img.frag { width: 100%; height: auto; }
.stage > .fit > img.frag { max-width: 420px; margin-inline: auto; }
.frag > img { display: block; width: 100%; height: auto; }
.frag--next { margin-top: var(--s-3); }
/* on a photograph: at its lower left, 24px in (the split hero float card) */
.hero__media > .frag--float, .frame > .frag--float { position: absolute; z-index: 1; left: var(--s-5); bottom: var(--s-5); width: min(300px, 62%); }
.stage > .at-right > img.frag { width: 280px; }
.stage > .at-right > .device, .stage > .at-rise > .device, .stage > .at-corner > .device { --dev-w: 200px; }

/* ---- the home hero as in the approved mockup E1 ----
   The kit's hero--photo (the photograph over the whole first screen, the words on its calm left side) plus what
   the mockup adds: a forest scrim under the words, the brand line very large with its second sentence in lime,
   an outlined second button, a small note, and two real app cards tilted on the photograph. */
.mo-lt__type .lime { color: var(--p-accent); }
:root { --band-h: 86px; }
/* the lime band belongs to the first screen: the hero is a screen less the band (and grows when a low window
   cannot hold its words), so every section after it starts on a whole screen */
main > .hero.hero--e1 { background: var(--p-bg); overflow: clip; height: auto; min-height: calc(100vh - var(--band-h)); min-height: calc(100svh - var(--band-h));
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
main > .hero.hero--e1 > .wrap { height: auto; }
.hero--e1 > .hero__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(14 31 22 / .94) 0%, rgb(14 31 22 / .86) 24%, rgb(14 31 22 / .5) 44%, rgb(14 31 22 / .12) 62%, rgb(14 31 22 / 0) 74%),
    linear-gradient(180deg, rgb(14 31 22 / .5) 0%, rgb(14 31 22 / 0) 20%); }
.hero--e1 > .wrap { position: relative; z-index: 1; }
.hero.hero--e1 h1.mo-lt__type { font-size: clamp(44px, min(7.4vw, 12svh), 108px); font-weight: 600; line-height: 1; max-width: none; color: #fff; text-wrap: balance; }
.hero.hero--e1 .hero__text { width: min(700px, 56%); }
.hero.hero--e1 .hero__lead { max-width: 26em; margin-top: var(--s-6); color: #fff; }
.hero--e1 .hero__note { margin-top: var(--s-5); font-size: var(--t-label, 13px); color: rgb(255 255 255 / .72); }
/* the second button as the mockup draws it: an outlined pill, no arrow */
html[data-buttons="arrow"] .hero--e1 .btn--secondary { padding-inline: var(--s-5); border-color: rgb(255 255 255 / .6); border-radius: 999px; text-decoration: none; color: #fff; }
html[data-buttons="arrow"] .hero--e1 .btn--secondary:hover { border-color: var(--p-ink); background: var(--p-ink); color: var(--p-bg); }
html[data-buttons="arrow"] .hero--e1 .btn--secondary::after { display: none; }
.hero--e1 .btn { border-radius: 999px; height: 56px; padding-inline: var(--s-6); font-weight: 600; }
/* the two app cards: on the photograph between the words and the plate, tilted against each other */
.hero__cards { position: absolute; z-index: 1; left: max(45.2%, 624px); bottom: calc(var(--hpadb) + 4px); display: grid; justify-items: start; row-gap: var(--s-6); pointer-events: none; }
.hero__card { border-radius: 22px; background: #f2f2f7; box-shadow: 0 30px 60px -24px rgb(4 12 8 / .7), 0 4px 12px rgb(4 12 8 / .25); }
/* both cards whole: no card is cut by its own box (the client asked that nothing is cropped) */
.hero__card--a { width: 240px; rotate: -5deg; }
.hero__card--b { width: 280px; margin-left: 66px; rotate: 4deg; }
@media (hover: hover) and (pointer: fine) {
  .hero__card { pointer-events: auto; transition: rotate .5s var(--ease, ease), translate .5s var(--ease, ease); }
  .hero__card--a:hover { rotate: -2deg; translate: 0 -4px; }
  .hero__card--b:hover { rotate: 1.5deg; translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) { .hero__card { transition: none; } }
/* the header lies on the photograph while the page is at its top (the mockup); it takes its ground on scroll, hover and focus */
@media (min-width: 1024px) {
  html:has(.hero--e1) .nav { transition: background-color .3s var(--ease, ease), border-color .3s var(--ease, ease); }
  html.at-top:has(.hero--e1) .nav:not(.is-open, :hover, :focus-within) { background: transparent; border-bottom-color: transparent; }
}
/* a low or a narrower desktop screen: one card, further right */
@media (min-width: 1024px) and (max-height: 779px), (min-width: 1024px) and (max-width: 1279px) {
  .hero__card--a { display: none; }
  .hero__cards { left: 52%; }
  .hero__card--b { margin-left: 0; }
}
/* between 1024 and 1279 the woman stands nearer the words: the line a little smaller, clear of her */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero.hero--e1 h1.mo-lt__type { font-size: min(6.5vw, 12svh); }
  .hero.hero--e1 .hero__lead { max-width: 22em; }
}
/* a low desktop screen: the words stand nearer the header and the band */
@media (min-width: 1024px) and (max-height: 779px) { main > .hero.hero--e1 { --hgap: 24px; --hpadb: 32px; } }
/* a tablet and a phone: the photograph is a layer under the header, the words stand on the forest ground under it;
   the scrim only melts the photograph's foot into the ground, and one card lies on that foot */
@media (max-width: 1023px) {
  .hero.hero--e1 { --photo: min(40svh, 60vw); }
  .hero--e1 > .hero__scrim { inset: var(--nav) 0 auto 0; height: calc(var(--photo) + 2px); background: linear-gradient(180deg, rgb(14 31 22 / 0) 55%, rgb(14 31 22 / .7) 86%, var(--p-bg) 100%); }
  .hero.hero--e1 .hero__text { width: 100%; }
  .hero.hero--e1 .hero__lead { color: var(--p-ink); }
  .hero--e1 .hero__note { color: var(--p-muted); }
  html[data-buttons="arrow"] .hero--e1 .btn--secondary { color: var(--p-ink); border-color: color-mix(in oklab, var(--p-ink) 45%, transparent); }
  .hero__cards { left: var(--gut); bottom: auto; top: calc(var(--nav) + var(--photo) - 148px); }
  .hero__card--a { display: none; }
  .hero__card--b { width: 240px; margin-left: 0; rotate: -4deg; }
}
@media (max-width: 639px) {
  :root { --band-h: 60px; }
  .hero.hero--e1 { --photo: 34svh; }
  .hero--e1 .hero__note { margin-top: var(--s-4); }
  .hero__cards { top: calc(var(--nav) + var(--photo) - 116px); }
  .hero__card--b { width: 190px; border-radius: 16px; }
  .hero--e1 .btn { height: 52px; padding-inline: var(--s-5); }
}

/* ---- the lime band under the hero (mockup E1): the ways to log a meal on one running line ---- */
.band { display: flex; width: 100%; overflow: hidden; overflow: clip; contain: layout paint; background: var(--p-accent); color: var(--p-accent-ink); }
.band__run { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; min-width: 100%; justify-content: space-around; animation: band-run 38s linear infinite; }
.band__run > li { display: flex; align-items: center; height: var(--band-h); font: 600 28px/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.band__run > li::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline: var(--s-7); border-radius: 50%; background: currentColor; }
.band:hover > .band__run { animation-play-state: paused; }
@keyframes band-run { to { transform: translateX(-100%); } }
/* reduced motion: the line stands still, whole words, wrapped and centred */
@media (prefers-reduced-motion: reduce) {
  .band__run { animation: none; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; padding-block: var(--s-3); }
  .band__run[aria-hidden] { display: none; }
  .band__run > li { height: 44px; }
  .band__run > li:last-child::after { display: none; }
}
@media (max-width: 639px) {
  .band__run > li { font-size: 20px; }
  .band__run > li::after { width: 8px; height: 8px; margin-inline: var(--s-5); }
}

/* panels keep the kit lit ground (cards.css); the colour comes from the photographs, the effect and the app cards */
.card > .badge { align-self: flex-start; margin-bottom: var(--s-3); }
#plan .panel { --p-h: 300px; }
.bento--top .panel { --p-h: 340px; }
.bento--rest .panel { --p-h: 150px; }

/* the mosaic of the day: tall, two stacked, tall */
.mosaic { margin-top: var(--s-7); grid-template-rows: minmax(0, 1fr); }
.mosaic > .frame, .mosaic__stack { min-height: 0; }
.mosaic__stack { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--card-gap); }
.mosaic__stack > .frame { min-height: 0; }
.mosaic .frag--float { width: min(240px, 70%); }

/* features.html */
.tile--32 { --tile-ratio: 3 / 2; }
.group, .frame.phone-frame, .phones { min-width: 0; }

@media (max-width: 1279px) { .phones--5 > .device:nth-child(n+5) { display: none; } .stage > .at-right > img.frag { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  /* the three steps and the small bento cards stay three across */
  #plan .grid > .card.span-4, #features .bento--rest > .card.span-4 { grid-column: auto / span 4; }
  #features .bento--top > .card.span-8 { grid-column: auto / span 8; }
  #features .bento--top > .card.span-4 { grid-column: auto / span 4; }
  #plan .panel { --p-h: 190px; }
  .bento--top .panel { --p-h: 230px; }
  .bento--rest .panel { --p-h: 110px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #plan { --h: 2; }
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaic > * { grid-column: auto; }
  #features .bento--rest > .card.span-4 { grid-column: auto / span 6; }
  .bento--top .panel { --p-h: 24svh; }
  .bento--rest .panel { --p-h: 16svh; }
  .bento .card > p { display: none; }
  .footer .grid > .footer__col { grid-column: auto / span 6; }
  .tile--32 { --tile-ratio: 3 / 4; }
  .phones--5 > .device, .phones--3 > .device { --dev-w: 148px; }
}
@media (max-width: 639px) {
  .mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-3); }
  .mosaic > .frame { grid-column: auto; }
  .mosaic > .mosaic__stack { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: var(--s-3); }
  .mosaic .frag--float { display: none; }
  .hero__media > .frag--float { width: min(200px, 56%); left: var(--s-4); bottom: var(--s-4); }
  #plan .panel { --p-h: 200px; }
  #features .bento > .card.span-4 { grid-column: auto / span 6; }
  .bento .card > p { display: none; }
  .bento--top .panel { --p-h: 190px; }
  .bento--rest .panel { --p-h: 150px; }
  .form-card { padding: var(--s-4); }
  #features .bento--top > .card.span-4, #features .bento--top > .card.span-8 { grid-column: 1 / -1; }
  /* a phone: a section grows with what it holds, so its filling row is at least its content */
  main > .section > .wrap > .grid.fill { flex: 1 0 auto; }
  main > .section > .wrap > .group { flex: 0 0 auto; }
  main > .section > .wrap > .group > .grid.fill { flex: 1 0 auto; }
  main > .section.g2 > .wrap > .frame.fill, main > .section > .wrap > .group > .frame.fill { flex: 1 0 auto; min-height: 280px; }
  #data .tile--32 { --tile-ratio: 3 / 4; }
  #data .tile--32:has(> .phone-media) { --tile-ratio: 1 / 2; }
  .media > .frame--photo { flex: 2 1 0; }
  .media > .phone-frame { flex: 3 1 0; }
  .media .phone-frame .device { --dev-w: 256px; }
  #doctors .tile--32 { --tile-ratio: 1; }
  #waitlist .grid.fill > .frame--fill { min-height: 180px; }
  .stage > .at-right > .device, .stage > .at-rise > .device, .stage > .at-corner > .device { --dev-w: 120px; padding: 5px; border-radius: 20px; }
  .stage > .at-right > .device > img, .stage > .at-rise > .device > img, .stage > .at-corner > .device > img { border-radius: 15px; }
  .stage > .at-right > img.frag { display: none; }
  .tile--32 { --tile-ratio: 3 / 4; }
  .grid.fill > .phone-frame.frame--fill .device { --dev-w: 220px; }
  main [data-moment="pinned-chapters"] .mo-pc__visual.mo-pc__visual--lit { aspect-ratio: auto; height: 212px; min-height: 0; }
  main > #meal-analysis { min-height: calc(2 * 100lvh); }
}

/* ---- a tablet held upright (640 to 1023 wide): a section is as tall as what it holds ----
   The kit keeps every section at least one or two screens tall up to 1279. On an 820x1180 screen that left
   400 to 700px of empty ground under the content and inside the phone frames, so here the screens rule is
   released and each picture row gets its own height. */
@media (min-width: 640px) and (max-width: 1023px) {
  main > section.section:not(.is-live), main > #meal-analysis:not(.is-live) { min-height: 0; }
  main > section.section.g2 > .wrap { display: flex; flex-direction: column; row-gap: var(--s-8); }
  main > section.section.g2 > .wrap > * { align-self: stretch; }
  main > section.section > .wrap > .fill, main > section.section > .wrap > .group > .fill { flex: 0 0 auto; }
  /* the photograph beside one phone, the photograph alone, the row of phones, the mosaic */
  .media { height: 420px; }
  .grid.fill > .frame--fill { flex: 0 0 auto; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .frame.phone-frame.fill { height: 400px; overflow: hidden; }
  .mosaic { height: 600px; }
  /* the tracker photograph is upright: a taller frame, framed on the man and the phone */
  #tracker .grid.fill > .frame--fill { aspect-ratio: 5 / 4; }
  #tracker .frame--fill > .frame__img { object-position: 50% 28% !important; }
  /* GLP-1: the words, then the photograph beside the settings screen */
  #glp-1 .grid.fill { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6) var(--card-gap); }
  #glp-1 .grid.fill > .split-col { grid-column: 1 / -1; }
  #glp-1 .grid.fill > .frame--fill { grid-column: auto; aspect-ratio: auto; height: 420px; }
  /* the wide meal analysis card has room for its second app card again */
  #features .stage > .at-right > img.frag { display: block; }
}

/* ==================== the home page as in the approved mockup E1 ====================
   The client chose the Figma mockup over the kit's page rules, so these sections are drawn as the mockup draws them:
   as tall as what they hold (not one screen each), large semi-bold heads, cards with a 32px radius in the mockup's
   colours (forest, lime, cream, yellow, white), names set on the photographs, real app cards tilted on them. */
.btn { font-weight: 600; }
html[data-buttons="arrow"] .btn--primary::after { display: none; }
html[data-buttons="arrow"] .btn--primary { border-radius: 999px; }
.nav .nav__logo { font-weight: 600; }

main#top > section.e1 { position: relative; display: block; height: auto; min-height: 0; padding: clamp(72px, 8.4vw, 120px) 0; }
main#top > section.e1 > .wrap { display: block; height: auto; min-height: 0; flex: none; }
.e1--forest { background: var(--p-bg); color: var(--p-ink); --e1-muted: var(--p-muted); }
main#top > .e1--cream { background: #f3f1e7; color: #0e1f16; --e1-muted: #556157; }
main#top > .e1--white { background: #fff; color: #0e1f16; --e1-muted: #556157; }

/* a section's head: the line on the left six columns, a sentence or one button on the right, on the line's last row */
.e1-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--card-gap, 24px); align-items: end; margin-bottom: clamp(32px, 4.4vw, 64px); }
.e1-head > h2 { grid-column: 1 / span 7; margin: 0; font: 600 clamp(40px, 5vw, 72px)/1.06 var(--font-display); letter-spacing: -0.03em; color: inherit; text-wrap: balance; max-width: 9.5em; }
.e1-head > p { grid-column: 8 / -1; margin: 0 0 10px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--e1-muted); }
.e1-head > .btn { grid-column: 8 / -1; justify-self: end; margin-bottom: 14px; height: 52px; padding-inline: var(--s-6); }

/* how it works: three tall cards, the number in lime at the top, the words at the foot */
.e1-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap, 24px); margin: 0; padding: 0; list-style: none; }
.e1-step { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  height: clamp(520px, 43vw, 620px); padding: 32px; border-radius: 32px; background: var(--p-surface); }
.e1-step__n { position: absolute; left: 32px; top: 22px; z-index: 1; font: 600 clamp(64px, 6.7vw, 96px)/1 var(--font-display); letter-spacing: -0.04em; color: var(--p-accent); }
.e1-step__pic { position: absolute; inset: 0; z-index: -1; }
.e1-step__pic > img { width: 100%; height: 100%; object-fit: cover; }
.e1-step__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 31 22 / .38) 0%, rgb(14 31 22 / 0) 28%, rgb(14 31 22 / 0) 52%, rgb(14 31 22 / .92) 100%); }
.e1-step__ui { position: absolute; left: 32px; right: 32px; top: 51%; translate: 0 -50%; display: grid; justify-items: center; row-gap: 10px; }
.e1-step__ui > img { width: min(300px, 100%); height: auto; border-radius: 18px; box-shadow: 0 24px 48px -20px rgb(4 12 8 / .7), 0 3px 10px rgb(4 12 8 / .25); }
.e1-step__ui--a { rotate: -3deg; }
.e1-step__ui--b { rotate: 3deg; }
.e1-step > h3 { margin: 0; font: 600 clamp(22px, 1.9vw, 26px)/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.e1-step > p { margin: 10px 0 0; max-width: 22em; font-size: 16px; line-height: 1.5; color: var(--p-muted); }
.e1-step--photo > p { color: rgb(255 255 255 / .82); }

/* a day: four scenes, two of them tall; the time of day as a lime mark, the scene's name on the photograph */
.e1-day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--card-gap, 24px); height: clamp(540px, 46vw, 664px); }
.e1-shot { position: relative; display: block; min-height: 0; border-radius: 32px; color: #fff; }
.e1-shot--tall { grid-row: 1 / span 2; }
.e1-shot:nth-child(3) { grid-column: 2; grid-row: 2; }
.e1-shot:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.e1-shot__pic, .e1-card__pic { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.e1-card__pic { z-index: -1; }
.e1-shot__pic > img, .e1-card__pic > img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease, ease); }
.e1-shot__pic::after, .e1-card__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 31 22 / 0) 45%, rgb(14 31 22 / .88) 100%); }
.e1-shot__tag { position: absolute; left: 20px; top: 20px; z-index: 1; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--p-accent); color: var(--p-accent-ink); font: 600 13px/30px var(--font-text); }
.e1-shot__label { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; font: 600 clamp(22px, 1.9vw, 26px)/1.2 var(--font-display); letter-spacing: -0.02em; }
.e1-chip { position: absolute; z-index: 2; overflow: hidden; border-radius: 18px; background: #f2f2f7; box-shadow: 0 24px 48px -20px rgb(4 12 8 / .6), 0 3px 10px rgb(4 12 8 / .2); }
.e1-chip > img { display: block; width: 100%; height: auto; }
.e1-chip--weight { width: 250px; right: -92px; bottom: 150px; rotate: -4deg; }
.e1-chip--lunch { width: 270px; left: -112px; bottom: 122px; rotate: 3deg; }

/* everything in one app: seven cards on a twelve-column grid, 7 + 5, 4 + 4 + 4, 6 + 6 */
.e1-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--card-gap, 24px); }
.e1-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 36px; border-radius: 32px; color: #0e1f16; --c-muted: #48554a; transition: translate .3s var(--ease, ease); }
.e1-card > h3 { margin: 0; font: 600 clamp(26px, 2.4vw, 34px)/1.15 var(--font-display); letter-spacing: -0.025em; color: inherit; }
.e1-card > p { margin: 12px 0 0; max-width: 17.5em; font-size: 16px; line-height: 1.5; color: var(--c-muted); }
.e1-card--meal { grid-column: span 7; height: 500px; background: #17301f; color: #fff; --c-muted: #a9b5a6; }
.e1-card--food { grid-column: span 5; height: 500px; background: var(--p-accent); --c-muted: #2c3a22; }
.e1-card--tracker, .e1-card--glp, .e1-card--bee { grid-column: span 4; height: 480px; }
.e1-card--tracker { background: #f3f1e7; }
.e1-card--bee { background: #ffe8a3; --c-muted: #5a4a12; }
.e1-card--glp, .e1-card--doctor, .e1-card--data { justify-content: flex-end; color: #fff; --c-muted: rgb(255 255 255 / .82); }
.e1-card--doctor, .e1-card--data { grid-column: span 6; height: 300px; }
.e1-card--data { background: #0e1f16; --c-muted: #a9b5a6; }
.e1-card__more { margin-top: auto; font: 600 15px/1 var(--font-text); color: var(--p-accent); }
.e1-card__lock { position: absolute; left: 36px; top: 36px; width: 44px; height: auto; fill: none; stroke: var(--p-accent); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.e1-card__lock .dot { fill: var(--p-accent); stroke: none; }
.e1-card__phone { position: absolute; z-index: -1; }
/* every phone and app card stands whole inside its card: nothing is cut by the card's edge */
.e1-card--meal > .e1-card__phone { --dev-w: 196px; right: 9%; top: 28px; rotate: 4deg; box-shadow: 0 30px 60px -24px rgb(4 12 8 / .8); }
.e1-card--tracker > .e1-card__phone { --dev-w: 132px; right: 32px; bottom: 28px; padding: 6px; border-radius: 24px; }
.e1-card--tracker > .e1-card__phone > img { border-radius: 18px; }
.e1-card__ui { position: absolute; z-index: -1; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 48px -22px rgb(4 12 8 / .55), 0 3px 10px rgb(4 12 8 / .16); }
.e1-card__ui > img { display: block; width: 100%; height: auto; }
.e1-card--food > .e1-card__ui { width: 280px; right: 44px; bottom: 40px; rotate: -4deg; }
.e1-card--bee > .e1-card__ui { width: 250px; right: 32px; bottom: 28px; rotate: 3deg; }
@media (hover: hover) and (pointer: fine) {
  .e1-card:hover { translate: 0 -2px; }
  .e1-shot:hover .e1-shot__pic > img, .e1-card:hover .e1-card__pic > img { scale: 1.03; }
  .e1-card:hover .e1-card__more { text-decoration: underline; text-underline-offset: 4px; }
}
.e1-card:focus-visible, .e1-shot:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; }

/* the waitlist: the photograph over the whole section under a forest veil; the line left, the form on a white card right */
main#top > section.e1-wait { isolation: isolate; padding: 0; color: #fff; background: var(--p-bg); }
.e1-wait__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.e1-wait__bg > img { width: 100%; height: 100%; object-fit: cover; }
.e1-wait__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 31 22 / .78), rgb(14 31 22 / .5) 60%, rgb(14 31 22 / .55)), linear-gradient(180deg, rgb(14 31 22 / .55), rgb(14 31 22 / 0) 30%); }
.e1-wait__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--card-gap, 24px); align-items: center; min-height: min(820px, 92svh); padding-block: clamp(72px, 8.4vw, 120px); }
.e1-wait__text { grid-column: 1 / span 7; }
.e1-wait__text > h2 { margin: 0; max-width: 7em; font: 600 clamp(44px, 5.9vw, 84px)/1.03 var(--font-display); letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.e1-wait__text > p { margin: clamp(32px, 7vw, 104px) 0 0; max-width: 23em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: #fff; }
.e1-form-card.ground-inverse { grid-column: 8 / -1; padding: 40px; border-radius: 32px; background: #fff; color: #0e1f16; }
.e1-form-card > h3 { margin: 0 0 var(--s-5); font: 600 clamp(26px, 2.2vw, 32px)/1.15 var(--font-display); letter-spacing: -0.025em; color: inherit; }
.e1-form-card .form { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.e1-form-card .field :is(input) { height: 54px; border-radius: 14px; background: #fff; border: 1px solid #cfd4cc; }
.e1-form-card .field :is(input)::placeholder { color: #667268; }
#features .e1-head > h2 { grid-column: 1 / span 9; max-width: none; }
.e1-form-card .btn-row { margin-top: var(--s-2); }
.e1-form-card .btn--primary { width: 100%; height: 56px; border-radius: 999px; background: var(--p-accent); color: var(--p-accent-ink); }
.e1-form-card .btn--primary:hover { background: color-mix(in oklab, var(--p-accent) 86%, #0e1f16); }
.e1-form-card__note { margin: var(--s-4) 0 0; font-size: 13px; line-height: 1.5; color: #556157; }

/* the footer: the name and one line, three columns of links, the disclaimer */
.e1-foot { padding: 56px 0 44px; background: var(--p-bg); color: var(--p-ink); border-top: 1px solid rgb(243 241 231 / .08); }
.e1-foot__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--card-gap, 24px); row-gap: var(--s-7); }
.e1-foot__brand { grid-column: 1 / span 6; }
.e1-foot__logo { font: 600 22px/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.e1-foot__brand > p { margin: 8px 0 0; font-size: 16px; color: var(--p-muted); }
.e1-foot__col { grid-column: auto / span 2; }
.e1-foot__col > h3 { margin: 0 0 12px; font: 600 14px/1.4 var(--font-text); letter-spacing: 0; color: #fff; }
.e1-foot__col > ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.e1-foot__col a { color: var(--p-muted); transition: color .2s; }
.e1-foot__col a:hover { color: #fff; }
.e1-foot__legal { margin: var(--s-7) 0 0; font-size: 13px; line-height: 1.5; color: color-mix(in oklab, var(--p-muted) 80%, var(--p-bg)); }

@media (max-width: 1279px) {
  .e1-card--meal > .e1-card__phone { right: 5%; }
  .e1-card--meal > p { max-width: min(17.5em, calc(100% - 236px)); }
  .e1-card--tracker > .e1-card__phone { --dev-w: 120px; right: 20px; bottom: 24px; }
  .e1-card--bee > .e1-card__ui { width: 210px; right: 20px; }
  .e1-card--food > .e1-card__ui { width: 236px; right: 24px; }
  .e1-chip--weight { width: 210px; right: -70px; bottom: 104px; }
  .e1-chip--lunch { width: 224px; left: -84px; }
}
/* a tablet: heads stack, the steps and the scenes go two across, the cards 6 + 6 */
@media (max-width: 1023px) {
  .e1-head { align-items: start; row-gap: var(--s-4); }
  .e1-head > h2, .e1-head > p, .e1-head > .btn { grid-column: 1 / -1; }
  .e1-head > p { max-width: 34em; margin: 0; }
  .e1-head > .btn { justify-self: start; margin: 0; }
  .e1-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e1-step { height: 520px; }
  .e1-step--photo { grid-column: 1 / -1; height: 440px; }
  .e1-day { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 360px; height: auto; }
  .e1-day > .e1-shot { grid-column: auto; grid-row: auto; }
  .e1-chip--weight { right: 20px; bottom: 76px; width: 200px; }
  .e1-chip--lunch { left: auto; right: 20px; bottom: 76px; width: 210px; }
  .e1-card--meal, .e1-card--food, .e1-card--doctor, .e1-card--data { grid-column: 1 / -1; }
  .e1-card--tracker, .e1-card--glp, .e1-card--bee { grid-column: span 6; }
  .e1-card--bee { grid-column: 1 / -1; height: 300px; }
  .e1-card--food { height: 400px; }
  .e1-card--food > .e1-card__ui { bottom: 32px; }
  .e1-wait__in { row-gap: var(--s-7); min-height: 0; }
  .e1-wait__text, .e1-form-card.ground-inverse { grid-column: 1 / -1; }
  .e1-wait__text > p { margin-top: var(--s-5); }
  .e1-form-card.ground-inverse { max-width: 520px; }
  .e1-foot__brand { grid-column: 1 / -1; }
  .e1-foot__col { grid-column: auto / span 4; }
}
/* a phone: one column */
@media (max-width: 639px) {
  main#top > section.e1 { padding: 64px 0; }
  main#top > section.e1-wait { padding: 0; }
  .e1-steps, .e1-day { grid-template-columns: minmax(0, 1fr); }
  .e1-step, .e1-step--photo { height: 460px; padding: 24px; border-radius: 24px; }
  .e1-step__n { left: 24px; top: 18px; }
  .e1-step__ui { left: 24px; right: 24px; }
  .e1-step__ui > img { width: min(260px, 100%); }
  .e1-day { grid-auto-rows: 300px; }
  .e1-shot, .e1-card { border-radius: 24px; }
  .e1-chip--weight, .e1-chip--lunch { width: 176px; right: 16px; bottom: 72px; }
  .e1-card { padding: 24px; }
  .e1-card--tracker, .e1-card--glp, .e1-card--bee { grid-column: 1 / -1; }
  .e1-card--meal { height: 440px; }
  .e1-card--meal { height: 510px; }
  .e1-card--meal > .e1-card__phone { --dev-w: 124px; right: 16px; top: 200px; padding: 6px; border-radius: 24px; }
  .e1-card--meal > .e1-card__phone > img, .e1-card--tracker > .e1-card__phone > img { border-radius: 18px; }
  .e1-card--food { height: 430px; }
  .e1-card--food > .e1-card__ui { width: 230px; right: 20px; bottom: 28px; }
  .e1-card--tracker { height: 470px; }
  .e1-card--glp, .e1-card--bee { height: 340px; }
  .e1-card--tracker > .e1-card__phone { --dev-w: 128px; right: 20px; bottom: 24px; }
  .e1-card--bee > .e1-card__ui { width: 220px; right: 20px; bottom: 20px; }
  .e1-card--doctor, .e1-card--data { height: 260px; }
  .e1-card__lock { left: 24px; top: 24px; width: 36px; }
  .e1-form-card.ground-inverse { padding: 24px; border-radius: 24px; }
  .e1-foot__col { grid-column: auto / span 6; }
}
@media (prefers-reduced-motion: reduce) { .e1-card, .e1-shot__pic > img, .e1-card__pic > img { transition: none; } }

/* ==================== the features page as in the approved mockup E2 ====================
   features.html only (body.page-features). The client chose the Figma mockup E2, so the page is drawn as the mockup
   draws it: a photograph hero 700 tall at 1440, then eight sections as tall as what they hold on the mockup's grounds
   (forest, lime, cream, white, forest, yellow, white, forest), each with one composition of a photograph, real app
   screens in phone frames and real app cards, tilted where the mockup tilts them. A composition (.e2-vis) is the
   mockup's own box: its children carry the mockup's x, y, width and rotation as numbers, and one unit (--u) scales
   them with the box, so the picture keeps its proportions at every width. */
.page-features .nav__link[aria-current="page"] { color: var(--p-accent); font-weight: 600; }
.page-features .nav__link[aria-current="page"]::after { display: none; }

/* the hero: the home hero's layers (photograph, scrim, words), 700 tall at 1440, the words on its foot */
.page-features .hero.hero--e1 h1 { max-width: 6.75em; font-size: clamp(44px, 7.22vw, 104px); font-weight: 600; line-height: .94; letter-spacing: -0.045em; color: #fff; text-wrap: wrap; }
.page-features .hero.hero--e1 h1 .lime { color: var(--p-accent); }
.page-features .hero.hero--e1 .hero__lead { max-width: 26em; margin-top: 22px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.5; color: rgb(255 255 255 / .84); }
.page-features .hero.hero--e1 .e2-hero__chips { margin-top: 14px; }
@media (min-width: 1024px) {
  .page-features main > .hero.hero--e1 { min-height: clamp(560px, 48.6vw, 820px); padding-bottom: 56px; }
  .page-features .hero.hero--e1 > .wrap > .hero-text { justify-content: flex-end; }
  .page-features .hero.hero--e1 .hero__text { width: min(760px, 62%); }
  .page-features .hero--e1 > .hero__scrim { background: linear-gradient(90deg, rgb(14 31 22 / .96) 0%, rgb(14 31 22 / .85) 40%, rgb(14 31 22 / .3) 62%, rgb(14 31 22 / 0) 85%); }
}
@media (max-width: 1023px) {
  .page-features main > .hero.hero--e1 { min-height: 0; padding-bottom: 48px; }
  .page-features .hero.hero--e1 .e2-hero__chips { margin-top: 20px; }
}

/* a section: the mockup's 112px above and under (never less above than clears the fixed header when a link
   jumps to it), its own ink for the ground it stands on */
.page-features main#top > section.e2 { padding-block: max(clamp(64px, 7.78vw, 112px), calc(var(--nav) + 24px)) clamp(64px, 7.78vw, 112px); overflow: clip; color: var(--e2-ink);
  --e2-ink: #0e1f16; --e2-soft: rgb(14 31 22 / .8); --e2-faint: rgb(14 31 22 / .62); --e2-check: #1c3a27; --e2-line: rgb(14 31 22 / .45); }
.page-features main#top > section.e2--dark { --e2-ink: #fff; --e2-soft: rgb(255 255 255 / .76); --e2-faint: rgb(255 255 255 / .6); --e2-check: var(--p-accent); --e2-line: rgb(255 255 255 / .45); }
main#top > .e2--lime { background: #ddf25c; }
main#top > .e2--yellow { background: #ffe9a8; }

/* the words beside the composition: two columns in the mockup's own widths (three on GLP-1), centred on each other */
.page-features main#top > section.e2 > .e2-row { display: grid; align-items: center; row-gap: 48px; }
.e2-row { grid-template-columns: minmax(0, 1fr); }
.e2-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: end; }
@media (min-width: 1024px) {
  .page-features main#top > section.e2 > .e2-row, .e2-head { column-gap: clamp(32px, 4.44vw, 64px); }
  .e2-row.e2-row--meal { grid-template-columns: minmax(0, 520fr) minmax(0, 664fr); }
  .e2-row.e2-row--food { grid-template-columns: minmax(0, 620fr) minmax(0, 564fr); }
  .e2-row.e2-row--targets { grid-template-columns: minmax(0, 500fr) minmax(0, 684fr); }
  .e2-row.e2-row--glp { grid-template-columns: minmax(0, 500fr) minmax(0, 370fr) minmax(0, 250fr); }
  .e2-row.e2-row--bee { grid-template-columns: minmax(0, 520fr) minmax(0, 664fr); }
  .e2-row.e2-row--data { grid-template-columns: minmax(0, 560fr) minmax(0, 624fr); }
  .e2-row > .e2-vis--food, .e2-row > .e2-vis--glp { order: -1; }
  .e2-head.e2-head--tracker { grid-template-columns: minmax(0, 520fr) minmax(0, 664fr); }
  .e2-head.e2-head--doctor { grid-template-columns: minmax(0, 640fr) minmax(0, 544fr); }
}

/* the type: a 76px line (60 on GLP-1), a 20px sentence, a list with lime or forest ticks, a small note */
.page-features .e2-text > h2, .page-features .e2-head > h2 { margin: 0; max-width: none; font: 600 clamp(40px, 5.28vw, 76px)/1.04 var(--font-display); letter-spacing: -0.035em; color: var(--e2-ink); text-wrap: wrap; }
.page-features .e2-row--glp > .e2-text > h2 { font-size: clamp(36px, 4.17vw, 60px); }
.page-features .e2-lead { margin: 22px 0 0; max-width: 36em; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.5; color: var(--e2-soft); }
.page-features .e2-head .e2-lead { margin-top: 0; }
.page-features .e2-facts { margin: 16px 0 0; max-width: 36em; font-size: 15px; line-height: 1.5; color: var(--e2-faint); }
.page-features .e2-label { margin: 22px 0 0; font: 600 15px/1.2 var(--font-text); letter-spacing: 0; color: var(--e2-ink); }
.page-features .e2-note { margin: 22px 0 0; max-width: 36em; font-size: 14px; line-height: 1.45; color: var(--e2-faint); }
.e2-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.4; color: var(--e2-ink); }
.e2-list > li { position: relative; margin: 0; padding-left: 30px; }
.e2-list > li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--e2-check);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.e2-lock { display: block; width: 72px; height: 72px; margin-bottom: 22px; fill: var(--p-accent); }

/* pills: outlined (the hero's links, the seven ways), white (Bee's questions), forest (the tracker's tabs) */
.e2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.e2-chips > li { margin: 0; }
.e2-chips > li:not(:has(> a)), .e2-chips > li > a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--e2-line); border-radius: 999px; font: 500 15px/1 var(--font-text); white-space: nowrap; color: var(--e2-ink); }
.e2-chips.e2-chips--white > li, .e2-chips.e2-chips--solid > li { height: 36px; border: 0; }
.e2-chips.e2-chips--white { max-width: 500px; }   /* three, three and two questions, as the mockup sets them */
.e2-chips.e2-chips--white > li { background: #fff; }
.e2-chips.e2-chips--solid > li { background: #0e1f16; color: #fff; }
.e2-hero__chips { --e2-line: rgb(255 255 255 / .45); --e2-ink: #fff; }
.e2-hero__chips > li > a { text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.e2-hero__chips > li > a:hover { background: #fff; border-color: #fff; color: #0e1f16; }
.e2-hero__chips > li > a:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .e2-hero__chips > li > a { transition: none; } }

/* a composition: the mockup's box; --x, --y, --pw (width), --ph (a photograph's height) and --rot are the mockup's numbers */
.e2-vis { position: relative; container-type: inline-size; width: 100%; aspect-ratio: var(--w) / var(--h); --u: calc(100cqw / var(--w)); }
.e2-vis > * { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--pw) * var(--u)); max-width: none; rotate: var(--rot, 0deg); transform-origin: 0 0; }
.e2-vis > .e2-pic { height: calc(var(--ph) * var(--u)); overflow: hidden; border-radius: calc(36 * var(--u)); }
.e2-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.e2-vis > .e2-ui { overflow: hidden; border-radius: calc(22 * var(--u)); background: #f2f2f7; box-shadow: 0 calc(20 * var(--u)) calc(48 * var(--u)) rgb(0 0 0 / .3); }
.e2-ui > img { display: block; width: 100%; height: auto; }
.e2-vis > .e2-phone { padding: calc(5 * var(--u)); border-radius: calc(var(--pw) * .152 * var(--u)); background: #101512; box-shadow: 0 calc(20 * var(--u)) calc(48 * var(--u)) rgb(0 0 0 / .3); }
.e2-vis > .e2-phone > img { border-radius: calc((var(--pw) * .152 - 5) * var(--u)); }

.e2-vis--meal { --w: 664; --h: 660; }
.e2-vis--meal > .e2-pic { --x: 0; --y: 70; --pw: 380; --ph: 500; }
.e2-vis--meal > .e2-phone { --x: 370; --y: 0; --pw: 250; --rot: -5deg; }
.e2-vis--meal > .e2-ui--a { --x: 36; --y: 440; --pw: 270; --rot: 4deg; }
.e2-vis--meal > .e2-ui--b { --x: 400; --y: 540; --pw: 250; --rot: -3deg; }

.e2-vis--food { --w: 620; --h: 620; }
.e2-vis--food > .e2-pic--a { --x: 0; --y: 60; --pw: 340; --ph: 460; }
.e2-vis--food > .e2-pic--b { --x: 300; --y: 200; --pw: 320; --ph: 420; }
.e2-vis--food > .e2-ui { --x: 300; --y: -10; --pw: 290; --rot: -4deg; }

.e2-vis--targets { --w: 684; --h: 600; }
.e2-vis--targets > .e2-pic { --x: 0; --y: 90; --pw: 560; --ph: 380; }
.e2-vis--targets > .e2-phone { --x: 450; --y: 0; --pw: 230; --rot: -5deg; }
.e2-vis--targets > .e2-ui { --x: 36; --y: 420; --pw: 300; --rot: 3deg; }

.e2-vis--glp { --w: 500; --h: 600; }
.e2-vis--glp > .e2-pic { --x: 0; --y: 0; --pw: 440; --ph: 580; }
.e2-vis--glp > .e2-ui { --x: 220; --y: 400; --pw: 290; --rot: -3deg; }
.e2-vis--glp2 { --w: 250; --h: 560; }
.e2-vis--glp2 > .e2-phone { --x: 14; --y: 10; --pw: 236; --rot: -4deg; }

.e2-vis--bee { --w: 664; --h: 600; }
.e2-vis--bee > .e2-pic { --x: 0; --y: 100; --pw: 560; --ph: 380; }
.e2-vis--bee > .e2-phone { --x: 430; --y: 0; --pw: 240; --rot: -5deg; }
.e2-vis--bee > .e2-ui { --x: 30; --y: 430; --pw: 290; --rot: 3deg; }

.e2-vis--data { --w: 624; --h: 580; }
.e2-vis--data > .e2-phone { --pw: 250; }
.e2-vis--data > .e2-phone--1 { --x: 50; --y: 10; --rot: 5deg; }
.e2-vis--data > .e2-phone--2 { --x: 330; --y: 40; --rot: -5deg; }

/* the tracker: the head, the five tabs, one cream panel with the photograph on its left and the five screens fanned */
.e2-chips.e2-chips--solid, .e2-panel, .e2-vis--doctor { margin-top: clamp(28px, 3.34vw, 48px); }
.e2-panel { display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 868fr); overflow: hidden; border-radius: clamp(24px, 2.5vw, 36px); background: #f3f1e7; }
.e2-panel__pic { position: relative; }
.e2-panel__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e2-vis--tracker { --w: 868; --h: 580; }
/* the five phones stand whole inside the panel: the tilted outer two keep 16 units clear of its edges (the mockup let
   the last one run under the panel's right edge; the client asked that no screen is cut) */
.e2-vis--tracker > .e2-phone { --pw: 160; }
.e2-vis--tracker > .e2-phone--1 { --x: 42; --y: 112; --rot: 4deg; }
.e2-vis--tracker > .e2-phone--2 { --x: 200; --y: 96; --rot: 2deg; }
.e2-vis--tracker > .e2-phone--3 { --x: 356; --y: 88; }
.e2-vis--tracker > .e2-phone--4 { --x: 512; --y: 92; --rot: -2deg; }
.e2-vis--tracker > .e2-phone--5 { --x: 666; --y: 104; --rot: -4deg; }

/* the report: the photograph of the visit, three screens fanned over its right edge */
.e2-vis--doctor { --w: 1248; --h: 560; }
.e2-vis--doctor > .e2-pic { --x: 0; --y: 40; --pw: 720; --ph: 480; }
.e2-vis--doctor > .e2-phone { --pw: 200; }
.e2-vis--doctor > .e2-phone--1 { --x: 690; --y: 70; --rot: 4deg; }
.e2-vis--doctor > .e2-phone--2 { --x: 870; --y: 24; }
.e2-vis--doctor > .e2-phone--3 { --x: 1046; --y: 60; --rot: -4deg; }

/* a tablet: the words, then the composition under them, centred; GLP-1 keeps its photograph beside its screen */
@media (max-width: 1023px) {
  .e2-row > .e2-vis { width: min(100%, 640px); justify-self: center; }
  .e2-row > .e2-vis--targets, .e2-row > .e2-vis--bee { width: min(90%, 600px); }
  .e2-row.e2-row--glp { grid-template-columns: minmax(0, 500fr) minmax(0, 250fr); column-gap: 32px; }
  .e2-row--glp > .e2-text { grid-column: 1 / -1; }
  .e2-row--glp > .e2-vis { width: 100%; }
}
/* a phone: one column; the tracker's photograph over its five screens, three over two; the report's three screens under its photograph */
@media (max-width: 639px) {
  .page-features main#top > section.e2 > .e2-row { row-gap: 40px; }
  .e2-list { font-size: 16px; }
  .e2-row > .e2-vis--targets, .e2-row > .e2-vis--bee { justify-self: start; }
  .e2-row.e2-row--glp { grid-template-columns: minmax(0, 1fr); }
  .e2-row--glp > .e2-vis--glp2 { width: 62%; }
  .e2-panel { grid-template-columns: minmax(0, 1fr); }
  .e2-panel__pic { aspect-ratio: 4 / 5; }
  .e2-vis--tracker { --w: 400; --h: 566; }
  .e2-vis--tracker > .e2-phone { --pw: 112; }
  .e2-vis--tracker > .e2-phone--1 { --x: 22; --y: 30; --rot: 3deg; }
  .e2-vis--tracker > .e2-phone--2 { --x: 144; --y: 22; --rot: 0deg; }
  .e2-vis--tracker > .e2-phone--3 { --x: 268; --y: 36; --rot: -3deg; }
  .e2-vis--tracker > .e2-phone--4 { --x: 84; --y: 292; --rot: 2deg; }
  .e2-vis--tracker > .e2-phone--5 { --x: 208; --y: 296; --rot: -2deg; }
  .e2-vis--doctor { --w: 400; --h: 530; }
  .e2-vis--doctor > .e2-pic { --x: 0; --y: 0; --pw: 400; --ph: 268; }
  .e2-vis--doctor > .e2-phone { --pw: 124; }
  .e2-vis--doctor > .e2-phone--1 { --x: 24; --y: 228; }
  .e2-vis--doctor > .e2-phone--2 { --x: 138; --y: 208; }
  .e2-vis--doctor > .e2-phone--3 { --x: 250; --y: 244; }
}

/* ==================== the language switch (in the footer) and the Russian page ====================
   English is the default; i18n.js lays Russian over the page and sets <html lang="ru">. Russian words are longer,
   so the largest lines are set a little smaller there. */
html.i18n-wait body { visibility: hidden; }
.e1-foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); margin-top: var(--s-7); }
.e1-foot__bottom > .e1-foot__legal { flex: 1 1 320px; margin: 0; }
.lang { display: inline-flex; flex: none; gap: 2px; padding: 4px; border: 1px solid rgb(243 241 231 / .2); border-radius: 999px; }
.lang__btn { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--p-muted); font: 500 14px/1 var(--font-text); cursor: pointer; transition: background-color .2s, color .2s; }
.lang__btn:hover { color: #fff; }
.lang__btn[aria-pressed="true"] { background: var(--p-accent); color: var(--p-accent-ink); }
.lang__btn:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
@media (max-width: 639px) { .lang__btn { height: 44px; padding: 0 20px; } }

html[lang="ru"] .hero.hero--e1 h1.mo-lt__type { font-size: clamp(34px, min(6vw, 10svh), 88px); }
@media (max-width: 1023px) { html[lang="ru"] .hero.hero--e1 h1.mo-lt__type { font-size: clamp(30px, 10.4vw, 64px); } }

/* the steps: the app card stands in the flow between the number and the words, so a longer heading (Russian, a
   narrow screen) pushes the card up instead of running under it; a step grows when its words need more room */
.e1-steps > .e1-step { height: auto; min-height: clamp(520px, 43vw, 620px); }
.e1-steps > .e1-step > .e1-step__ui { position: static; translate: none; flex: 1 1 auto; align-content: center; margin: clamp(84px, 7.6vw, 112px) 0 var(--s-5); }
@media (max-width: 1023px) { .e1-steps > .e1-step { min-height: 520px; } .e1-steps > .e1-step--photo { min-height: 440px; } }
@media (max-width: 639px) { .e1-steps > .e1-step, .e1-steps > .e1-step--photo { min-height: 460px; } .e1-steps > .e1-step > .e1-step__ui { margin-top: 76px; } }

/* the two app cards on the day's photographs keep clear of the "Night" mark and of a two-line name */
.e1-chip--weight { bottom: calc(50% - 190px); }
@media (max-width: 1279px) { .e1-chip--weight { bottom: calc(50% - 174px); } }
@media (max-width: 1023px) { .e1-chip--weight, .e1-chip--lunch { bottom: 104px; } }
@media (max-width: 639px) { .e1-chip--weight, .e1-chip--lunch { bottom: 96px; } }
/* a phone: the meal card grows with its words; its app screen stands under them, whole */
@media (max-width: 639px) {
  .e1-bento > .e1-card--meal { height: auto; padding-bottom: 60px; }
  .e1-card--meal > .e1-card__phone { position: static; align-self: flex-end; margin-top: var(--s-5); z-index: 0; }
  .e1-card--meal > .e1-card__more { position: absolute; left: 24px; bottom: 24px; margin: 0; }
  .e1-card--meal > p { max-width: none; }
}