/* ==========================================================================
   Cal Habibi — landing-page layer

   The design system lives in styles.css and descends from
   lib/core/theme/tokens.dart: warm near-black ink on ivory, saffron as the
   supporting tone, coral→apricot as the brand gradient, Instrument Serif
   for English display and IBM Plex Sans Arabic for everything else.

   This file adds ONLY what the landing page introduces on top of that
   system — new elements, the one dark product section, and the light
   closing panel. It deliberately does not restate the palette, the type
   stack or the component styles; an override layer that repeats the
   system is how the system gets lost.
   ========================================================================== */

/* ===== Brand lockup ======================================================
   The wordmark is a cropped viewBox over the original artwork, so it needs
   explicit sizing and a taller header bar than the system default. */
/* The artwork is on a white canvas; multiply lets the ivory paper show
   through instead of a white box behind the wordmark. */
/* A transparent cut of the lockup. The full-canvas PNG it replaced was
   opaque white and relied on `mix-blend-mode: multiply` to disappear, which
   the header's backdrop-filter defeats — it showed as a white box on the
   ivory bar. */
/* `.mark .brand-lockup`, not `.brand-lockup`: the shared `.mark img` rule
   (a 31px square app icon) otherwise outranks it. */
.mark .brand-lockup { display: block; width: 202px; height: 44px; flex: none; border-radius: 0; }
.landing .hdr .wrap { min-height: 84px; }
.landing .mark { padding-block: 8px; line-height: 1; }
.landing .ftr .brand-lockup { width: 176px; height: 38px; }

/* ===== Hero additions ==================================================== */
.landing .hero { padding-block: clamp(48px, 7vw, 104px) clamp(72px, 8vw, 116px); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  margin-block-start: 38px;
}

/* The store's own badge, unaltered per Google's brand rules; only sized.
   The PNG is cropped to the badge edge so it lines up with the text column. */
.play-badge { display: inline-block; line-height: 0; border-radius: 10px; transition: transform .22s var(--ease); }
.play-badge:hover { transform: translateY(-2px); }
.play-badge img { display: block; width: auto; height: 54px; }
.get-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 30px; }
.get-stores .play-badge img { height: 60px; }
.landing .close-cta .stores-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* The secondary action is a text link, not a second button: two pill
   buttons side by side would give the hero two equal front doors. */
.text-link {
  font-size: 15.5px;
  font-weight: 600;
  padding-block: 12px;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: text-decoration-color .18s var(--ease);
}
.text-link:hover, .text-link:focus-visible { text-decoration-color: var(--coral); }

.launch-note {
  margin-block-start: 22px;
  font-size: 14px;
  color: var(--ink-3);
}

/* The disclaimer sits below the viewfinder, clear of the total card that
   overhangs the bottom edge. Absolute, so it never stretches the frame. */
.landing .scan { margin-block-end: 96px; }
.scan-caption {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  margin-block-start: 64px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ===== Bilingual menu board ==============================================
   These dishes, known by name, in both languages. English names are set in
   the display serif so the board reads like a menu, with the Arabic beside
   in Plex; the Arabic page reverses the lead. */
.landing .ticker {
  background: var(--band);
  border-block: none;
  padding-block: clamp(28px, 3.6vw, 44px);
}
.landing .ticker-seq { gap: clamp(32px, 4vw, 56px); padding-inline-end: clamp(32px, 4vw, 56px); }
.landing .ticker-item {
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  letter-spacing: -.01em;
}
.landing .ticker-item span {
  font-family: var(--font);
  font-size: .56em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}
.landing .ticker-sep { width: 6px; height: 6px; }

/* ===== Product summary ===================================================
   A plain-language definition of the product, set as a wide measure against
   a narrow label column. */
.product-intro {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(64px, 8vw, 112px);
  align-items: start;
}
.product-intro > p:not(.eyebrow) {
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--ink-2);
  max-width: 44ch;
}
.product-intro strong { font-weight: 600; color: var(--ink); }

/* At-a-glance facts: one short, quotable line each, for readers who scan
   and for search and AI answers that quote a page. Sits under the intro. */
.facts {
  grid-column: 2;
  display: grid;
  border-block-start: 1px solid var(--line);
  max-width: 62ch;
}
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr);
  gap: 16px;
  padding-block: 12px;
  border-block-end: 1px solid var(--line);
  font-size: 15px;
}
.facts dt { color: var(--ink-3); font-weight: 500; }
.facts dd { margin: 0; color: var(--ink); }
.facts a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.facts a:hover, .facts a:focus-visible { text-decoration-color: var(--coral); }

/* ===== How it works: the dark product section ============================
   The page's one dark surface and its one bold moment: the app's real
   nutrition screen, lit on a stage, beside the three steps that produce
   it. The mockup ships on white at 512×768; it is multiplied onto the
   stage so the white becomes the stage's own light, and capped at 280px
   wide so a 2× screen upscales it by under 10%. The artwork crops the
   phone flat at its lower edge, so the phone sits on the stage's bottom
   edge and reads as rising out of frame rather than cut off in mid-air. */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.how-grid .sec-head { margin-block-end: clamp(32px, 4vw, 48px); }
.how-stage {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 440px;
  justify-self: center;
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #FFFDF9 0%, #F5EDE2 58%, #E7D9C7 100%);
  box-shadow:
    0 0 0 1px rgba(246, 239, 230, .08),
    0 0 140px -30px rgba(232, 163, 61, .45),
    0 70px 120px -50px rgba(255, 94, 98, .4);
}
.how-stage img {
  width: min(66%, 280px);
  height: auto;
  mix-blend-mode: multiply;
}

/* ===== Circles ===========================================================
   The social feature, shown as the real leaderboard screen. The screen is
   dark, so it stands on the same warm stage as the nutrition screen above,
   rising from the stage's lower edge with the top of the board in view. */
.circles-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.circles-grid .sec-head { margin-block-end: clamp(28px, 3.5vw, 40px); }
.circles-list { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.circles-list li { padding-block: 15px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); border-block-start: 1px solid var(--line); }
.circles-list li:first-child { border-block-start: none; padding-block-start: 0; }
.circles-list b { font-weight: 600; color: var(--ink); }
[lang="ar"] .circles-list li { line-height: 1.85; }
.circles-stage {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 440px;
  justify-self: center;
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: start center;
  padding-block-start: 9%;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #FFFDF9 0%, #F5EDE2 58%, #E7D9C7 100%);
  box-shadow: var(--shadow-m);
}
.circles-stage img {
  width: min(64%, 280px);
  height: auto;
  border-radius: 30px;
  box-shadow: 0 0 0 6px #17120F, 0 40px 70px -30px rgba(23, 18, 15, .55);
}

/* ===== Closing section ===================================================
   The system's closing block is a dark panel. This page already spends its
   one dark surface on the product, so the panel is rebuilt on the warm
   band instead of reversed out. */
.landing .close-cta {
  background: var(--band);
  color: var(--ink);
  box-shadow: none;
  padding-block: clamp(64px, 8vw, 112px);
}
.landing .close-cta::before { display: none; }
.landing .close-cta p { color: var(--ink-2); }
.landing .close-cta .stores-note { color: var(--ink-3); font-size: 13.5px; }
.landing .close-cta .eyebrow { justify-content: center; margin-block-end: 22px; }


/* ===== Motion ============================================================
   The system also fades and lifts every section in on scroll. Eight of those
   in a row is wallpaper, and because the class starts at opacity 0 and is
   cleared by script.js, a failed script hides the page outright — this copy
   is meant to read without JavaScript. The hero's load sequence stays (pure
   CSS, ends visible) and the moving menu board stays. Everything else is
   simply present. */
.landing .reveal,
.landing .stagger > * { opacity: 1; transform: none; transition: none; }

.landing section[id] { scroll-margin-top: 96px; }

/* ===== Arabic ============================================================
   Plex carries the Arabic, so the menu board swaps its lead: Arabic names
   in Plex, English beside them in the serif. */
[lang="ar"] .landing .ticker-item {
  font-family: var(--font);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: 0;
}
[lang="ar"] .landing .ticker-item span {
  font-family: var(--serif);
  font-size: 1em;
  color: var(--ink-3);
}
[lang="ar"] .landing .product-intro > p:not(.eyebrow) { letter-spacing: 0; line-height: 1.8; font-size: clamp(19px, 2.1vw, 24px); }
[lang="ar"] .landing .text-link { text-underline-offset: 4px; }

/* ===== Responsive ======================================================== */
@media (max-width: 1100px) {
  .mark .brand-lockup { width: 180px; height: 39px; }
}

@media (max-width: 1000px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-stage { max-width: 420px; }
  .circles-grid { grid-template-columns: 1fr; }
  .circles-stage { max-width: 420px; }
}

@media (max-width: 850px) {
  .product-intro { grid-template-columns: 1fr; gap: 16px; }
  .facts { grid-column: 1; margin-block-start: 8px; }
}

@media (max-width: 760px) {
  .landing .hdr .wrap { min-height: 72px; }
  .landing .scan { margin-block-end: 88px; }
  .scan-caption { margin-block-start: 58px; }
}

@media (max-width: 560px) {
  .mark .brand-lockup { width: 164px; height: 36px; }
  .hero-actions { gap: 10px 22px; margin-block-start: 30px; }
  .scan-caption { font-size: 12.5px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .landing .ticker-item { gap: 10px; }
}