/* PharmaSnap.AI home page. Apple product-page conventions, the brand's own orange.

   🚨 ONE LIGHT LOOK, ON PURPOSE. The photography is lit on light grounds —
   the bottle sits on #F3F3F3, the jars on a warm #F1F0EA — so a dark theme
   would turn every image into a white slab. This page therefore paints its own
   background and colours explicitly and does not load the dark-mode tokens the
   legal pages use. The legal pages keep _style.css and their dark mode.

   🚨 NO PHONE MOCKUPS. Screens shown to the public must be real captures and
   there are none yet. The photography is product imagery (unbranded capsules,
   no text, no packs), and the one diagram draws the mechanism rather than
   imitating a screen.

   🚨 NOTHING WAITS ON AN ANIMATION TO APPEAR. Every section is visible in the
   first painted frame. */

:root {
  color-scheme: light;
  --ink: #1D1D1F;
  --ink2: #6E6E73;
  --ink3: #86868B;
  --tile: #F5F5F7;
  --photo: #F4F4F4;      /* matched to the bottle photograph's own background */
  --warm: #F1F0EA;       /* matched to the jar photographs */
  --line: #D2D2D7;
  --brand: #F26B1D;      /* the app's orange, and the capsules' */
  --brand-ink: #C2500F;  /* same hue, dark enough for small text on white */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: #FFFFFF; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px; line-height: 1.47; letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }

/* ── The bar: translucent, sticky, 52px — the Apple global nav, quieter ───── */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.bar .wrap { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.logo { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo svg { flex: none; }
.bar nav { display: flex; gap: 26px; font-size: 13px; }
.bar nav a { color: var(--ink); opacity: .82; }
.bar nav a:hover { opacity: 1; text-decoration: none; }
@media (max-width: 640px) { .bar nav a.hide-sm { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { background: var(--photo); text-align: center; overflow: hidden; }
.hero .wrap { padding-top: 64px; }
.eyebrow { font-size: 19px; font-weight: 600; color: var(--brand-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.hero h1 {
  font-size: clamp(48px, 9vw, 96px); line-height: 1.02; font-weight: 700;
  letter-spacing: -.045em; margin: 0 0 14px; text-wrap: balance;
}
.hero .lede { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; color: var(--ink); font-weight: 400; margin: 0 auto 26px; max-width: 26ch; letter-spacing: -.02em; }
.ctas { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 17px; }
.soon {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
}
.soon svg { width: 15px; height: 15px; }
.more::after { content: " \203A"; }
/* display:block is load-bearing: <picture> is inline by default, which ignores
   the width and lets the 2k bottle render 1300px tall. The mask feathers the
   photograph's edges so no rectangle shows against the hero ground. */
.hero-shot { display: block; margin: 20px auto 0; width: min(520px, 88%); }
.hero-shot img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.sec { padding: 104px 0; }
.sec.tint { background: var(--tile); }
.sec h2 {
  font-size: clamp(36px, 5.6vw, 56px); line-height: 1.07; font-weight: 700;
  letter-spacing: -.04em; margin: 0 0 12px; text-wrap: balance;
}
.sec .sub { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.33; color: var(--ink2); margin: 0 0 48px; max-width: 34ch; letter-spacing: -.02em; }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

/* Bento: one big photo tile, four small icon tiles. */
.bento { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .bento { grid-template-columns: 1.15fr 1fr; } }
.tile { background: var(--tile); border-radius: 28px; overflow: hidden; }
.tile.photo { background: var(--warm); display: flex; align-items: center; justify-content: center; }
.tile.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.tile.photo.wide img { aspect-ratio: 4 / 3; }
.minis { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.mini { padding: 26px 22px; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; }
.mini .ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.mini b { display: block; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; margin-top: 18px; }
.mini span { display: block; font-size: 15px; color: var(--ink2); margin-top: 4px; }

/* The mechanism, drawn. */
.figure { background: #fff; border-radius: 28px; padding: clamp(24px, 5vw, 56px); max-width: 860px; margin: 0 auto; box-shadow: 0 2px 30px rgba(0,0,0,.05); }
.figure svg { width: 100%; height: auto; display: block; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 860px; margin: 26px auto 0; text-align: center; }
.steps div { font-size: 15px; color: var(--ink2); }
.steps b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; margin-bottom: 2px; }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Split: words one side, photograph the other. */
.split { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } .split.flip > :first-child { order: 2; } }
.split .tile img { width: 100%; height: auto; }

.langs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.langs b {
  font-weight: 500; font-size: 19px; letter-spacing: -.01em; line-height: 1;
  padding: 11px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.langs b.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.langs i { font-style: normal; font-size: 15px; color: var(--ink3); align-self: center; padding-left: 4px; }

.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.nots li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.nots .x { width: 34px; height: 34px; border-radius: 50%; background: rgba(242,107,29,.12); color: var(--brand-ink); display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.nots b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.nots span { display: block; font-size: 16px; color: var(--ink2); margin-top: 2px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot { background: var(--tile); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink3); letter-spacing: -.01em; }
.foot .wrap { padding-top: 22px; padding-bottom: 34px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
.foot a { color: var(--ink2); }
.foot .links { display: flex; gap: 18px; }
.foot p { margin: 0; }