/* ==========================================================================
   InstaMart marketing site. Vanilla CSS, logical properties only (RTL-native).
   Tokens mirror the storefront (frontend/store/styles.css) so the site reads
   as the brand layer around the product. Shape rule: controls 12px, cells 14px,
   device frames 40px. Dials: VARIANCE 6 · MOTION 3 · DENSITY 4.
   ========================================================================== */

/* ---------- fonts (shared with the storefront; CSP font-src 'self') ---------- */
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-arabic-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011; }
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-arabic-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011; }
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-arabic-600-normal.woff2") format("woff2");
  font-weight: 600; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011; }
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-arabic-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011; }
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("/store/fonts/cairo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;
  /* brand board: #16A34A primary. Fills/bands use the AA-safe #15803D for white text; the bright green carries icons, numerals and the logo. */
  --brand: #15803d;
  --brand-strong: #166534;
  --brand-bright: #16a34a;
  --brand-deep: #15803d;            /* fixed band colour, same in both modes */
  --on-brand: #fff;
  --brand-tint: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --brand-tint-soft: color-mix(in srgb, var(--brand) 7%, var(--surface));

  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-sunk: #f3f1ec;
  --border: #e9e4dc;
  --border-strong: #ddd6ca;
  --text: #1c1a17;
  --text-2: #5b564d;
  --text-3: #948d81;
  --frame: #1c1a17;
  --frame-ring: transparent;

  --r-md: 12px; --r-lg: 14px; --r-frame: 40px;
  --shadow-frame: 0 30px 60px -28px rgba(28,26,23,.45);
  --shadow-sm: 0 1px 2px rgba(28,26,23,.06);
  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1180px;
  --nav-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #22c55e; --brand-strong: #4ade80; --brand-bright: #4ade80; --on-brand: #0b1a10;
    --bg: #141311; --surface: #1c1a17; --surface-sunk: #221f1a;
    --border: #2f2b25; --border-strong: #3d372f;
    --text: #f3f1ec; --text-2: #b8b1a6; --text-3: #857e72;
    --frame: #0d0c0b; --frame-ring: rgba(255,255,255,.12);
    --shadow-frame: 0 30px 60px -28px rgba(0,0,0,.8);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--nav-h) + 16px); }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Cairo", "SF Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text); background: var(--bg);
  font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
#sprite { display: none; }
.icon { inline-size: 1.25em; block-size: 1.25em; flex: 0 0 auto; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.wrap-narrow { max-width: 780px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* type scale: weight and colour carry hierarchy, not raw size */
h1 { font-size: clamp(2.25rem, 4.6vw, 3.625rem); line-height: 1.18; font-weight: 700; max-width: 15ch; }
h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.22; font-weight: 700; max-width: 26ch; }
h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; }
[dir="ltr"] h1, [dir="ltr"] h2 { letter-spacing: -0.02em; }
.lead { margin-block-start: 18px; font-size: 1.1875rem; line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.sub  { margin-block-start: 12px; font-size: 1.125rem; line-height: 1.6; color: var(--text-2); max-width: 58ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 50px; padding: 0 22px; border-radius: var(--r-md);
  font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn-sm { min-block-size: 40px; padding: 0 16px; font-size: .9375rem; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { background: var(--surface-sunk); }
.btn-onbrand { background: #fff; color: var(--brand-deep); }
.btn-onbrand:hover { background: #f3f1ec; }
.btn-outline-onbrand { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-onbrand:hover { background: rgba(255,255,255,.12); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; inset-block-start: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-block-end: 1px solid var(--border);
}
.nav-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px;
  block-size: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* The approved brand lockup is a stacked mark-above-wordmark composition
   (~1.63:1), not the wide lockup the old 34px sizing assumed; at 34px its
   wordmark was illegible. Sized up to stay readable inside the unchanged
   64px --nav-h bar. The <=480px source serves the mark alone, so it keeps
   its own smaller size. */
.brand img { block-size: 48px; inline-size: auto; display: block; }
.footer .brand img { block-size: 44px; }
@media (max-width: 480px) { .brand img { block-size: 34px; } }
.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; font-weight: 600; color: var(--text-2); }
.nav-links a:hover { color: var(--text); }
.nav-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); }
.lang button { padding: 4px 2px; }
.lang button[aria-current] { color: var(--brand); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.lang-sep { color: var(--border-strong); }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
}

/* ---------- skip link ---------- */
.skip { position: absolute; inset-inline-start: 16px; inset-block-start: -60px; z-index: 20;
  background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: var(--r-md); text-decoration: none; }
.skip:focus { inset-block-start: 12px; }

/* ---------- device frames (chrome only; contents are real captures) ---------- */
.phone {
  inline-size: 236px; padding: 9px; border-radius: var(--r-frame);
  background: var(--frame); box-shadow: 0 0 0 1px var(--frame-ring), var(--shadow-frame);
}
.phone img { inline-size: 100%; block-size: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top;
  border-radius: calc(var(--r-frame) - 9px); background: #fff; }
.phone-sm { inline-size: 200px; }
.browser { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-frame); }
.browser-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--surface-sunk); border-block-end: 1px solid var(--border); }
.browser-bar span { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--border-strong); }
.browser img { inline-size: 100%; block-size: auto; }

/* ---------- hero ---------- */
.hero { padding-block: 40px 56px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.hero-stage { position: relative; padding-block-end: 36px; }
.hero-stage::before {
  /* flat tinted panel behind the composition, no gradient */
  content: ""; position: absolute; inset: 24px -24px 60px 8%; border-radius: var(--r-lg);
  background: var(--brand-tint-soft); z-index: -1;
}
.browser-hero { inline-size: 90%; margin-inline-start: auto; }
.browser-hero img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.phone-hero { position: absolute; inset-inline-start: 0; inset-block-end: 24px; inline-size: 32%; max-inline-size: 196px; }
.hero-stage figcaption { margin-block-start: 16px; text-align: end; font-size: .875rem; color: var(--text-3); }
@media (max-width: 900px) {
  .hero { padding-block: 32px 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-stage { margin-inline: 0; }
  .browser-hero { inline-size: 92%; }
}
@media (max-width: 480px) {
  .phone-hero { inline-size: 38%; inset-block-end: 40px; }
  .hero-stage::before { inset-inline: -16px; }
}

/* ---------- strip: four facts on brand ---------- */
.strip { background: var(--brand-deep); color: #fff; padding-block: 20px; }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 28px; margin: 0; }
.strip dt { font-size: .8125rem; color: rgba(255,255,255,.72); }
.strip dd { margin: 0; font-weight: 700; }
@media (max-width: 860px) { .strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .strip-grid { grid-template-columns: 1fr; } }

/* ---------- sections ---------- */
section { padding-block: 80px; }
@media (max-width: 760px) { section { padding-block: 56px; } }

/* journey: four screens */
.screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-block-start: 40px; }
.screens li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.screens h3 { margin-block-start: 18px; font-size: 1.0625rem; }
.screens p { margin-block-start: 4px; color: var(--text-2); font-size: .9375rem; max-width: 26ch; }
@media (max-width: 900px) {
  .screens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    scroll-padding-inline: 20px; padding-block-end: 8px; }
  .screens li { flex: 0 0 auto; inline-size: 236px; scroll-snap-align: start; }
}

/* order: customer -> InstaMart -> merchant dashboard */
.order { background: var(--surface); border-block: 1px solid var(--border); }
.order-stage { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 28px; margin-block-start: 40px; }
.order-side, .order-main { display: flex; flex-direction: column; align-items: center; }
.order-main .browser { inline-size: 100%; }
.order-label { margin-block-start: 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-2); }
.order-label .icon { color: var(--brand); }
.order-link { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-3); }
.order-link .icon { inline-size: 26px; block-size: 26px; transform: rotate(90deg); }
[dir="rtl"] .order-link .icon-flip { transform: rotate(90deg); }
.order-mm { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--brand);
  border-radius: var(--r-lg); color: var(--brand); font-weight: 700; white-space: nowrap; background: var(--surface); }
.order-mm img { inline-size: 24px; block-size: auto; }
.order-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 36px; }
.order-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.order-points .icon { color: var(--brand-bright); stroke-width: 2.25; margin-block-start: 3px; }
@media (min-width: 861px) {
  .order-link { flex-direction: row; }
  .order-link .icon, [dir="rtl"] .order-link .icon-flip { transform: none; }
  [dir="rtl"] .order-link .icon-flip { transform: scaleX(-1); }
}
@media (max-width: 860px) {
  .order-stage { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .order-points { grid-template-columns: 1fr; gap: 14px; }
}

/* keep: positioning + the catalog behind it */
.keep { background: var(--surface-sunk); }
.keep-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.browser-catalog img { aspect-ratio: 1220 / 970; }
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }
.flow li { padding: 12px 20px; border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); font-weight: 600; }
.flow .flow-arrow { padding: 0; border: 0; background: none; color: var(--text-3); display: flex; }
.flow .flow-arrow .icon { inline-size: 24px; block-size: 24px; }
.flow .flow-mm { display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid var(--brand); color: var(--brand); padding-block: 11px; }
.flow .flow-mm img { inline-size: 26px; block-size: auto; }
.proof { margin-block-start: 28px; max-width: 60ch; color: var(--text-2);
  padding-inline-start: 18px; border-inline-start: 3px solid var(--brand); }
@media (max-width: 960px) { .keep-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 640px) {
  .flow { flex-direction: column; align-items: stretch; }
  .flow li { text-align: center; justify-content: center; }
  .flow .flow-arrow { justify-content: center; }
  .flow .flow-arrow .icon, [dir="rtl"] .flow .flow-arrow .icon { transform: rotate(90deg); }
}

/* features: bento, 6 cells on a 4-column grid */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(280px, auto);
  gap: 16px; margin-block-start: 36px; }
.cell { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden; display: flex; flex-direction: column; }
.cell-wide { grid-column: span 2; }
.cell-text { padding: 20px 22px 22px; }
.cell-text p { margin-block-start: 6px; color: var(--text-2); font-size: .9375rem; }
.cell-img img { inline-size: 100%; block-size: 200px; object-fit: cover; object-position: top;
  border-block-end: 1px solid var(--border); }
/* wide image cells: the image is taken out of flow so the row height comes
   from the text (and the 280px minimum), then the image fills that height */
.cell-img.cell-wide { display: grid; grid-template-columns: 56% 1fr; position: relative; }
.cell-img.cell-wide img { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 56%; block-size: 100%;
  border-block-end: 0; border-inline-end: 1px solid var(--border); }
.cell-img.cell-wide .cell-text { grid-column: 2; align-self: center; }
/* the desktop capture is RTL: its brand + department rail sit at the physical right */
.cell-desktop img { object-position: right top; }
.cell-links img { object-position: right top; object-fit: cover; }
.cell-admin img { object-position: right top; }
.cell-tint { background: var(--brand-tint-soft); border-color: transparent; justify-content: center; }
.cell-tint h3 { font-size: 1.25rem; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .cell-img.cell-wide { grid-template-columns: 46% 1fr; min-block-size: 260px; }
  .cell-img.cell-wide img { inline-size: 46%; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .cell-wide { grid-column: auto; }
  .cell-img.cell-wide { display: flex; flex-direction: column; }
  .cell-img.cell-wide img { position: static; inline-size: 100%; block-size: 200px; border-inline-end: 0; border-block-end: 1px solid var(--border); }
  .cell-tint { min-block-size: 0; padding-block-start: 8px; }
}

/* how: numbered stack beside the real readiness panel */
.how-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 48px; align-items: center; }
.browser-readiness img { aspect-ratio: 930 / 340; }
.steps { counter-reset: step; margin-block-start: 20px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding-block: 24px; }
.steps li::before { grid-row: 1 / span 2; content: counter(step); font-size: 2.5rem; font-weight: 700; line-height: 1;
  color: var(--brand-bright); font-variant-numeric: tabular-nums; }
.steps h3, .steps p { grid-column: 2; }
.steps li + li { border-block-start: 1px solid var(--border); }
.steps h3 { font-size: 1.25rem; }
.steps p { margin-block-start: 6px; color: var(--text-2); max-width: 48ch; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; gap: 32px; } }

/* pricing: placeholder plans */
.pricing { background: var(--surface); border-block: 1px solid var(--border); }
.plans { display: grid; grid-template-columns: minmax(0, 480px); justify-content: center; gap: 16px; margin-block-start: 36px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--bg); }
.plan-featured { background: var(--brand-tint-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.plan-badge { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; padding: 4px 10px; border-radius: var(--r-md);
  background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; }
.plan h3 { font-size: 1.25rem; }
.plan-desc { margin-block-start: 6px; color: var(--text-2); font-size: .9375rem; min-block-size: 3em; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-block: 18px 6px; }
.plan-price strong { font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--text-2); }
.plan ul { display: grid; gap: 10px; margin-block: 18px 26px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; }
.plan .icon { color: var(--brand-bright); stroke-width: 2.25; margin-block-start: 3px; }
.plan .btn { margin-block-start: auto; }
.pricing-note { margin-block-start: 18px; color: var(--text-3); font-size: .875rem; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .plan-desc { min-block-size: 0; } }

/* faq: native disclosure */
.faq details { border-block-start: 1px solid var(--border); }
.faq details:last-of-type { border-block-end: 1px solid var(--border); }
.faq h2 { margin-block-end: 24px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 18px; font-weight: 700; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; inline-size: 14px; block-size: 14px; color: var(--text-3);
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--brand); }
.faq details p { padding-block: 0 20px; color: var(--text-2); max-width: 62ch; }

/* start: brand band */
.start { background: var(--brand-deep); color: #fff; }
.start .sub { color: rgba(255,255,255,.86); }

/* footer */
.footer { padding-block: 32px; border-block-start: 1px solid var(--border); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { text-decoration: none; color: var(--text-2); font-weight: 500; }
.footer-links a:hover { color: var(--text); }
.footer-rights { margin-inline-start: auto; color: var(--text-3); font-size: .875rem; }

/* ---------- motion (MOTION 3): one reveal, hover/active feedback, nothing looping ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px);
    transition: opacity .55s ease, transform .6s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .hero-stage { animation: rise .7s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}