/* ---------------------------------------------------------------------------
   payday.benbasha.com — "paper & ink", the web identity of Payday
   (com.benbasha.payday).

   Tokens are copied verbatim from the app's LIGHT palette (src/theme/tokens.ts,
   DESIGN-BRIEF §3): warm paper #F7F3EA, ink #1A1916, one green for what is safe
   #0F6B50 and one red for what is due #B4341B, plus the card indigo #3F4FC4 and
   the savings ochre #8C6608. Type is the app's own pairing (§4): Manrope for
   display and every number, Rubik for body text in all 15 languages including
   Hebrew.

   LIGHT ONLY — deliberately. "Money apps are used in daylight, at the checkout,
   one-handed. Light theme is primary" (§3). A dark landing page would be a
   different product's identity; the app's dark mode lives in the app.

   THE ONE RULE CARRIED OVER FROM THE APP (§3 semantic rule): `safe` and `due`
   are the ONLY two hues that carry meaning. Nothing on this page is coloured
   for decoration. No emoji anywhere — every glyph is a drawn SVG.
--------------------------------------------------------------------------- */

:root {
  --paper: #F7F3EA;
  --surface: #FFFFFF;
  --surface-alt: #EFE9DC;
  --ink: #1A1916;
  --ink-soft: #6B675E;
  --ink-faint: #6F6A5F;

  /* The only two meaning-carrying hues. */
  --safe: #0F6B50;
  --due: #B4341B;

  /* Supporting accents, used exactly as the app uses them. */
  --card: #3F4FC4;
  --savings: #8C6608;

  --line: #E4DDCF;
  --safe-soft: #E7F0EA;
  --due-soft: #F6E7E2;

  --shadow-soft: 0 8px 24px rgba(26, 25, 22, 0.08);
  --shadow-lift: 0 18px 48px rgba(26, 25, 22, 0.14);

  --display: 'Manrope', system-ui, -apple-system, sans-serif;
  --body: 'Rubik', system-ui, -apple-system, sans-serif;

  --radius-card: 18px;
  --content: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

/* Amounts align on the decimal here exactly as they do in the ledger (§4). */
.num {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------- brand ---------------------------------
   The mark is the app icon's geometry (DESIGN-BRIEF §9, transcribed from the
   clickable mock's icon tile): a Payday Strip of five pins, the third raised
   and `safe` green. No coin, no dollar sign, no shekel sign, so it reads the
   same in every storefront.
-------------------------------------------------------------------------- */

.mark {
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
}

.mark-lg {
  width: 74px;
  height: 74px;
  margin-inline: auto;
}

/* --------------------------------- header -------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.03em;
}

.header-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
}

.header-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.header-nav a:hover { color: var(--safe); }

.header-nav .lang {
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 13px;
}

/* ----------------------------- store badges ------------------------------
   Payday is on NEITHER store yet. The hrefs are the final URLs (the ASC app id
   and the Play package are already reserved), so they are real links, but the
   "Coming soon" tag stays until the listings are actually published.
-------------------------------------------------------------------------- */

.store-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  height: 54px;
  padding: 0 20px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border: 1px solid transparent;
}

.store-badge svg { width: 24px; height: 24px; flex: none; }

.store-badge .badge-copy { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge .badge-copy small { font-size: 11px; font-weight: 500; opacity: 0.78; }
.store-badge .badge-copy strong { font-size: 17px; font-weight: 600; font-family: var(--display); }

.store-badge.soon::after {
  content: attr(data-soon);
  position: absolute;
  top: -10px;
  inset-inline-end: -10px;
  background: var(--safe);
  color: var(--paper);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  white-space: nowrap;
}

/* --------------------------------- hero ---------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
}

/* Ledger rules, not a gradient: faint horizontal lines like a paper register,
   fading out before they reach the fold. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 37px,
    var(--line) 37px,
    var(--line) 38px
  );
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 78%);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: center;
}

.hero-copy > * {
  opacity: 0;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero-copy > *:nth-child(2) { animation-delay: 0.07s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.14s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.21s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.28s; }
.hero-copy > *:nth-child(6) { animation-delay: 0.35s; }
.hero-copy > *:nth-child(7) { animation-delay: 0.42s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-kicker::before {
  content: '';
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--safe);
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  margin: 18px 0 16px;
  text-wrap: balance;
}

.hero h1 .lands {
  color: var(--safe);
  position: relative;
  white-space: nowrap;
}

/* The hero number, on paper. Straight off the app's Home screen: label above,
   64px Manrope figure in `safe`, the per-day line beneath. */
.hero-figure {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 22px 18px;
  margin: 0 0 22px;
  box-shadow: var(--shadow-soft);
}

.hero-figure .label {
  font-size: 13px;
  color: var(--ink-soft);
}

.hero-figure .amount {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--safe);
}

.hero-figure .amount .sym {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--ink-soft);
}

.hero-figure .sub { font-size: 14px; color: var(--ink-faint); }

.hero-lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 33em;
  margin: 0 0 24px;
}

.hero-note {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 18px 0 0;
  max-width: 36em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--safe);
  background: var(--safe-soft);
  border: 1px solid color-mix(in srgb, var(--safe) 24%, transparent);
  border-radius: 999px;
  padding: 5px 14px;
}

/* A drawn tick, not a character and not an emoji. */
.chips li::before {
  content: '';
  width: 11px;
  height: 6px;
  /* Physical left/bottom on purpose: a tick is a symbol, not a text run, and
     must not mirror on the Hebrew page. */
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* --------------------------- phone frame + shots ------------------------- */

.hero-shot {
  justify-self: center;
  opacity: 0;
  animation: rise 0.8s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.phone {
  width: min(300px, 78vw);
  aspect-ratio: 402 / 874;
  border-radius: 46px;
  padding: 9px;
  background: var(--ink);
  border: 1px solid #0E0D0B;
  box-shadow: var(--shadow-lift);
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 38px;
  background: var(--paper);
}

/* -------------------------------- benefits -------------------------------
   Three rows, not a grid of six cards: the brief's three promises, each with
   the evidence next to it (§1 "against" list).
-------------------------------------------------------------------------- */

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 10px;
  text-align: center;
  text-wrap: balance;
}

.section-sub {
  color: var(--ink-soft);
  margin: 0 auto 40px;
  max-width: 40em;
  font-size: 18px;
  text-align: center;
}

.benefits { padding: 34px 0 56px; }

.benefit-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.benefit {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 20px;
  align-items: center;
  padding: 26px 26px;
  border-bottom: 1px solid var(--line);
}

.benefit:last-child { border-bottom: 0; }

.benefit .icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  border-radius: 14px;
}

.benefit .icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit.safe .icon { background: var(--safe-soft); }
.benefit.safe .icon svg { stroke: var(--safe); }

.benefit h3 { font-size: 20px; margin-bottom: 6px; }
.benefit p { margin: 0; font-size: 16px; color: var(--ink-soft); }

.benefit .evidence {
  font-size: 14.5px;
  color: var(--ink-faint);
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 18px;
}

.benefit .evidence .num { color: var(--ink); font-size: 17px; }

/* -------------------------------- gallery -------------------------------- */

.gallery { padding: 14px 0 64px; }

.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(232px, 1fr);
  gap: 18px;
  overflow-x: auto;
  padding: 6px 24px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-alt) transparent;
}

.gallery-strip figure {
  margin: 0;
  scroll-snap-align: center;
}

.gallery-strip img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.gallery-strip figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}

/* ------------------------------- free/pro -------------------------------- */

.pricing { padding: 6px 0 70px; }

.pricing .wrap { max-width: 860px; }

.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 34px 34px 36px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.price-card h2 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 10px; }

.price-card .price-lead {
  color: var(--ink-soft);
  margin: 0 auto 24px;
  max-width: 38em;
}

.price-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: start;
}

.price-col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px 24px;
}

.price-col.pro { border-color: color-mix(in srgb, var(--safe) 34%, transparent); }

.price-col .tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.price-col.pro .tag { color: var(--safe); }

.price-col h4 { font-size: 17px; margin: 10px 0 4px; }

.price-col .price {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.price-col.pro .price { color: var(--safe); }

.price-col .price small {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
}

.price-col ul { margin: 8px 0 0; padding: 0; list-style: none; }

.price-col li {
  position: relative;
  padding-inline-start: 24px;
  margin: 9px 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.price-col li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--safe);
  border-bottom: 2px solid var(--safe);
  transform: rotate(-45deg);
}

.price-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-faint);
}

/* -------------------------------- support -------------------------------- */

.support { padding: 6px 0 70px; }

.support .wrap { max-width: 860px; }

.support-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px 34px 34px;
  box-shadow: var(--shadow-soft);
}

.support-card h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 10px; }

.support-card > p { color: var(--ink-soft); margin: 0 0 22px; max-width: 44em; }

.support-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--safe);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: 14px;
  padding: 13px 22px;
  margin-bottom: 26px;
}

.support-mail svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.faq { display: grid; gap: 16px; }

.faq h3 { font-size: 16px; margin-bottom: 5px; }

.faq p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

.faq a { color: var(--safe); }

/* ------------------------------- final cta ------------------------------- */

.final-cta {
  text-align: center;
  padding: 6px 0 88px;
}

.final-cta .mark-lg { margin-bottom: 24px; }

.final-cta h2 {
  font-size: clamp(30px, 4.4vw, 42px);
  margin: 0 auto 24px;
  max-width: 16em;
  text-wrap: balance;
}

.final-cta .store-badges { justify-content: center; }

/* --------------------------------- footer -------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  padding: 42px 0 50px;
}

.site-footer .wrap { display: grid; gap: 10px; }

.site-footer a { color: var(--ink); text-decoration-color: var(--line); }

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 8px;
}

.footer-brand .mark { width: 30px; height: 30px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-weight: 500;
}

/* ------------------------------ legal pages ------------------------------
   English is primary and LTR. The Hebrew column is a separate <article> with
   its own lang/dir, so RTL can never leak into the English one. Rubik covers
   both scripts (§4), so unlike the Arc site there is no second font to load.
-------------------------------------------------------------------------- */

.legal-main { padding: 40px 0 80px; }
.legal-main .wrap { max-width: 780px; }

.legal-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 26px;
  font-size: 15px;
  font-weight: 500;
  background: var(--surface);
}

.legal-toggle a {
  padding: 8px 22px;
  text-decoration: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.legal-toggle a.active { background: var(--ink); color: var(--paper); font-weight: 600; }

.legal-doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 36px 40px 44px;
  box-shadow: var(--shadow-soft);
}

.legal-doc h1 { font-size: 34px; margin-bottom: 4px; }

.legal-doc .effective {
  color: var(--ink-faint);
  font-size: 14px;
  margin: 0 0 24px;
}

.legal-doc h2 {
  font-size: 21px;
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}

.legal-doc h3 { font-size: 17px; margin: 22px 0 6px; }

.legal-doc p, .legal-doc li { color: var(--ink-soft); }
.legal-doc strong { color: var(--ink); }
.legal-doc ul { padding-inline-start: 22px; }
.legal-doc li { margin: 6px 0; }

.legal-doc a {
  color: var(--safe);
  text-decoration-color: color-mix(in srgb, var(--safe) 55%, transparent);
  text-decoration-thickness: 2px;
}

/* The support button also appears inside .legal-doc on support.html, where
   `.legal-doc a` (0,2,0) would otherwise win and paint green-on-green. */
.legal-doc a.support-mail {
  color: var(--paper);
  text-decoration: none;
}

.callout {
  background: var(--safe-soft);
  border: 1px solid color-mix(in srgb, var(--safe) 26%, transparent);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 18px 0 4px;
}

.callout, .callout strong { color: var(--ink); }

/* ------------------------------- responsive ------------------------------ */

@media (max-width: 900px) {
  .hero { padding: 44px 0 52px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-shot { order: -1; }
  .benefit { grid-template-columns: 48px minmax(0, 1fr); row-gap: 14px; }
  .benefit .evidence {
    grid-column: 2;
    border-inline-start: 2px solid var(--line);
  }
  .price-cols { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .header-nav .opt { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  /* The language pill must never be the thing that gets clipped: drop the
     nav links that also live in the footer before it does. */
  .header-nav .opt-sm { display: none; }
  .gallery-strip { grid-auto-columns: minmax(200px, 74vw); padding-inline: 24px; }
  .legal-doc { padding: 26px 22px 32px; }
  .price-card, .support-card { padding: 26px 22px 30px; }
  .benefit { padding: 22px 20px; }
  .header-nav { gap: 12px; font-size: 14px; }
  .store-badge { height: 50px; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy > *, .hero-shot { animation: none; opacity: 1; }
}