/*
 * pillo.center landing page (index.html): the layout that only this page has.
 *
 * Everything shared (tokens, Inter, the type scale, header, footer, buttons, store badges, chips,
 * cards, the foil card, the dose well) is in /site.css, which every page links. This file is linked
 * from index.html alone, so it must not hold a rule another page would also need (h2, h3, .lede
 * lived here until review 1: a page linking only site.css got the browser's heading sizes).
 * Source: docs/design/2026-10-01-blister-2-site-mockups.html, #home (desktop) and #home-phone.
 *
 * THE DRAWN PHONE AND LOCK SCREEN CARD are illustrations, not a screenshot: built from the same
 * components as the app (foil card, wells, chips), and carried to a screen reader as ONE image whose
 * label says what it shows. They never take focus and nothing in them is a control.
 *
 * ORDER ON A PHONE. The day card comes straight after the store buttons, and the figures under them
 * (16 000+, the doctor aside) come after it. The markup is desktop order; `.hero-copy` dissolves
 * (display: contents) below 900 px so the stage can sit between its own children.
 *
 * BREAKPOINTS ARE IN EM, as in site.css and the other sheets (W7 review 1): a media query's em is the browser's
 * own font size, so a switch moves with the reader's text size, and at the default size it is the pixel value it
 * was (px / 16: 359 -> 22.4375em, 479 -> 29.9375em, 560 -> 35em, 720 -> 45em, 760 -> 47.5em, 899 / 900 ->
 * 56.1875 / 56.25em, 960 -> 60em). The «900 px» in a comment here means 56.25em at the default size.
 */

/* ============================== sections ============================== */

.sec {
  padding-block: clamp(44px, 6.5vw, 84px);
  border-top: 1px solid var(--line);
}
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

/* ============================== hero ============================== */

.hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: clamp(24px, 3.4vw, 48px) clamp(36px, 5vw, 72px);
}
.hero-copy {
  display: contents;
}
.hero-copy > * {
  min-width: 0;
}
.hero > .hero-stage {
  order: 1;
}
.hero-copy > .hero-facts {
  order: 2;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The shared .chip never wraps (site.css), but «Базовий тариф безкоштовний» is wider than a 320 px
   phone's gutter at Largest text (39 px over at root 150 %), so the hero's own chips may break onto a
   second line instead of pushing the page sideways. line-height 1.25 and 6 px of block padding keep the
   one-line chip exactly its 34 px minimum height. */
.hero-chips .chip {
  padding-block: 6px;
  line-height: 1.25;
  white-space: normal;
}
/* The landing headline is larger than the site's base h1 (site.css). */
.hero h1 {
  font-size: 2.125rem;
  font-size: clamp(2.125rem, 1.375rem + 3.4vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.stores {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stores .store {
  justify-content: center;
}

.qr {
  display: none;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.qr-frame {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--qr-paper);
  line-height: 0;
}
.qr-frame svg {
  display: block;
  width: 96px;
  height: 96px;
  color: var(--qr-ink);
}
.qr figcaption {
  max-width: 16ch;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.4;
}

.hero-facts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.stat b {
  flex: none;
  color: var(--brand-ink);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat > span {
  max-width: 34ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}
.aside-doc {
  color: var(--muted);
  font-size: 1rem;
}
.aside-doc a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--brand-ink);
  font-weight: 700;
}

@media (max-width: 29.9375em) {
  .stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
@media (min-width: 45em) {
  .stores {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .qr {
    display: flex;
  }
}
@media (min-width: 56.25em) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .hero > .hero-stage,
  .hero-copy > .hero-facts {
    order: 0;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-stage {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ============================== the drawn phone ============================== */

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 8px 0 28px;
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 4% 2% 2% 12%;
  border-radius: 48px;
  background: radial-gradient(80% 70% at 60% 40%, var(--brand-tint), transparent 70%);
}
.stage-art {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 26rem;
}

/* The phone frame and its day card. On a narrow screen the frame itself is dropped and only the
   day card and the Lock Screen card remain, stacked: a 344 px rotated frame would eat the whole
   first screen of a 390 px phone. */
.mock-phone {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  color: var(--ink);
}
.mock-sb,
.mock-top,
.mock-card {
  display: none;
}
.mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.big {
  white-space: nowrap;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.big small {
  margin-left: 6px;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.mock-wells {
  display: flex;
  justify-content: space-around;
}
.mock-wells > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pl {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.mock-la {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--la-line);
  border-radius: 26px;
  background: var(--la-bg);
  box-shadow: 0 18px 40px -16px var(--shadow-strong);
  color: var(--la-text);
}
.mock-la-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mock-la .w {
  width: 48px;
  height: 48px;
  border: 2px solid var(--la-ok);
  background: var(--la-line);
  box-shadow: 0 0 0 3px var(--la-ring);
  color: var(--la-text);
  font-size: 1.0625rem;
}
/* The Lock Screen card's well pulses on the CARD's own dark glass, as the mockup's `pulse3` does
   (3 px to 6 px of the card's green): the shared `well-pulse` peaks at 8 px of the PAGE's pale
   --brand-tint, which on a dark card is a mint halo in the light theme. */
.mock-la .w-n {
  animation-name: la-pulse;
}
@keyframes la-pulse {
  50% {
    box-shadow: 0 0 0 6px var(--la-ring-peak);
  }
}
.mock-la-name {
  min-width: 0;
  flex: 1;
}
.mock-la-name b {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.mock-la-name span {
  display: block;
  color: var(--la-dim);
  font-size: .8125rem;
}
.mock-la-time {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.mock-la-btns {
  display: flex;
  gap: 8px;
}
.mock-la-btns span {
  flex: 1;
  padding: 11px 0;
  border-radius: 999px;
  background: var(--la-btn);
  color: var(--la-text);
  font-size: .9375rem;
  font-weight: 700;
  text-align: center;
}
.mock-la-btns .ok {
  background: var(--la-ok);
  color: var(--la-on-ok);
}

@media (min-width: 35em) and (max-width: 56.1875em) {
  .stage-art {
    max-width: 22rem;
  }
}
/* The full frame starts at 56.25em: 900 px at the default text size, written in em because the frame is
   drawn in rem (the phone is 21.5rem, the Lock Screen card 21.75rem) and a media query's em is the
   BROWSER's font size, so at Chrome's Large / Very large (20 / 24 px) it starts at 1125 / 1350 px
   instead of squeezing a 1.25x / 1.5x frame into the 900 px column and spilling 30 / 117 px past the
   page (measured, review 2 follow-up). The same switch is in the hero grid above and below.
   Below it the two drawn cards stack, and the day card's number row and the Lock Screen card's head
   and buttons hold nowrap pieces that add up to 243-248 px at the default text size and grow with it:
   at Large / Largest text (root font 130 % / 150 %) they are 40 px wider than a 360 px phone at 150 %,
   and at 130 % a 300 px viewport. So they wrap rather than push the page into a horizontal scroll,
   at EVERY width below the frame and not only the narrowest (review 2: the wrapping once sat under
   360 px and a 360-412 px phone at Large text scrolled sideways). */
@media (max-width: 56.1875em) {
  .stage-art {
    min-width: 0;
  }
  .mock-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .mock-la-head,
  .mock-la-btns {
    flex-wrap: wrap;
  }
}
@media (max-width: 22.4375em) {
  .mock-la-time {
    font-size: 1.375rem;
  }
}

/* From 56.25em (900 px at the default size, see above): the full frame, tilted, with the Lock Screen card
   in front of it. */
@media (min-width: 56.25em) {
  .stage-art {
    display: block;
    max-width: none;
    width: 100%;
    height: 38.75rem;
  }
  .mock-phone {
    position: absolute;
    left: 50%;
    top: 0;
    width: 21.5rem;
    height: 100%;
    margin-left: -10.75rem;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 44px;
    background: var(--paper);
    box-shadow: 0 1px 0 var(--glass-line), 0 24px 48px -20px var(--shadow-strong);
    overflow: hidden;
    transform: rotate(-2.5deg);
  }
  .mock-sb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px 6px;
    font-size: .8125rem;
    font-weight: 600;
  }
  .mock-sb i {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    opacity: .8;
  }
  .mock-sb i::after {
    content: "";
    position: absolute;
    inset: 1.5px 6px 1.5px 1.5px;
    border-radius: 1px;
    background: currentColor;
  }
  .mock-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .mock-eb {
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .mock-title {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
  }
  .mock-cal {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 3px 8px -5px var(--shadow-strong);
  }
  .mock-cal .ic {
    width: 18px;
    height: 18px;
  }
  .mock-scr {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 18px;
  }
  .mock-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 10px 24px -20px var(--shadow-strong);
  }
  .mock-med {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .capsule {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--well);
  }
  .capsule i {
    display: block;
    width: 23px;
    height: 10px;
    border: 1px solid var(--brand-ink);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand) 50%, var(--foil-hi) 50%);
    transform: rotate(-35deg);
  }
  .mock-med b {
    display: block;
    font-size: 1rem;
    line-height: 1.25;
  }
  .mock-med span {
    display: block;
    color: var(--muted);
    font-size: .8125rem;
  }
  .mock-stock {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .8125rem;
  }
  .meter {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
  }
  .meter i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: var(--warn-ink);
  }
  .mock-la {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 21.75rem;
    transform: rotate(2deg);
  }
}

/* ============================== how it works ============================== */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step p {
  color: var(--muted);
  font-size: 1rem;
}
.step-demo {
  margin-top: auto;
  padding-top: 6px;
}
.demo-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  font-size: 1rem;
  font-weight: 600;
}
.demo-field .ic {
  color: var(--muted);
}
.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-wells {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 60em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================== what Pillo does ============================== */

.feats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feat {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.feat > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.feat p {
  color: var(--muted);
  font-size: 1rem;
}
/* Where the register data comes from, with links to the originals: Google Play's Misleading Claims policy
   («Missing Source Link for Government Information», 2026-10) wants the source reachable wherever the app's
   government data is described. */
.feat .feat-src {
  font-size: .875rem;
}
@media (min-width: 47.5em) {
  .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================== the doctor band ============================== */

.band-sec {
  padding-block: 12px clamp(36px, 5vw, 64px);
}
.band {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--band-line);
  border-radius: 32px;
  background: var(--band-bg);
  color: var(--band-ink);
}
.band :focus-visible {
  outline-color: var(--band-accent);
}
.band-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}
.band .eyebrow {
  color: var(--band-accent);
}
.band h2 {
  color: var(--band-ink);
}
.band-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.0625rem;
}
.band-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}
.band-list .ic {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--band-accent);
}
.band-invite {
  color: var(--band-muted);
}
.band-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.btn-band {
  max-width: 100%;
  background: var(--band-btn);
  color: var(--band-on-btn);
  /* The longest button label on the site: on a 320 px screen it wraps rather than leaving the card. */
  white-space: normal;
  padding-block: 10px;
}
.btn-band:hover {
  background: var(--band-accent);
}
.band-url {
  color: var(--band-muted);
  font-family: var(--mono);
  font-size: .9375rem;
}

.band-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--band-line);
  border-radius: 22px;
  background: var(--band-card);
}
.band-panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--band-muted);
  font-size: .8125rem;
}
.band-panel-head span:first-child {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.band-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--band-line);
}
.band-row b {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.band-row span {
  display: block;
  font-size: .875rem;
}
.band-row .bad {
  color: var(--band-bad);
}
.band-row .low {
  color: var(--band-warn);
}
.band-row .fine {
  color: var(--band-muted);
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
}
.bars i {
  display: block;
  width: 4px;
  border-radius: 1.5px;
  background: var(--band-good);
}
.bars i.r {
  background: var(--band-bad);
}
.bars .h2 { height: 20%; }
.bars .h3 { height: 30%; }
.bars .h6 { height: 60%; }
.bars .h7 { height: 70%; }
.bars .h8 { height: 80%; }
.bars .h9 { height: 90%; }
.bars .h10 { height: 100%; }
.bars .h5 { height: 50%; }
@media (max-width: 29.9375em) {
  /* The names are too wide to share a row with 14 bars on a phone: the bars drop under the text. */
  .band-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 56.25em) {
  .band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

/* ============================== plans ============================== */

.tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tier-hot {
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 6px var(--brand-tint);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.price b {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.price small {
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 600;
}
.price-sub {
  margin-top: -6px;
  color: var(--muted);
  font-size: .9375rem;
}
.ticks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}
.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}
.ticks .ic {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--brand);
}
.pay-note {
  max-width: 80ch;
  margin-top: 28px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
.pay-note strong {
  color: var(--ink);
}
/* One column (below 900 px) the Family heading row may break its chip onto a second line, where a
   «Для родини» chip beside a 24 px heading is wider than a 320 px phone's card at Largest text. From
   900 px the three cards share rows and the title must stay on the row's one line, so it never wraps. */
@media (max-width: 56.1875em) {
  .tier-top {
    flex-wrap: wrap;
  }
}
@media (min-width: 56.25em) {
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
/* The three cards share ROWS, not just a row: a card is exactly four children (heading or heading
   row, price, price note, ticks), so each spans four rows of .tiers and the title, the price, the
   note and the first tick sit on one line across the row whatever wraps or whatever the Family
   card's chip and thicker border do to its own height. Where subgrid is unsupported the cards keep
   the plain flex column above, aligned at the top only. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 56.25em) {
    .tier {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      row-gap: 14px;
      align-content: start;
    }
    /* The Family heading row is as tall as its 34 px chip; the other two headings take the same
       height so the rows below them start together. */
    .tier > h3,
    .tier-top {
      min-height: 34px;
    }
    .tier > h3 {
      display: flex;
      align-items: center;
    }
    /* A 2 px border instead of 1 px: one pixel less padding keeps the content box the same size. */
    .tier-hot {
      padding: 23px;
    }
  }
}