/* ============================================================
   ARRGROW — page layout for index, method, systems, products (brand v5)
   Depends on tokens-v5.css + tokens.css + components.css. The homepage hero
   lives in neural-hero.css (generated). This file holds section rhythm,
   the subpage hero and the page-specific grids.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-canvas); scroll-behavior: smooth; }
body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-family-sans);
  font-weight: var(--w-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img { max-width: 100%; display: block; }
a { color: inherit; }
.g { background: var(--amber-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
em { font-style: normal; color: var(--amber); }

.skip-nav {
  position: fixed; top: -100%; inset-inline-start: 16px; z-index: 100;
  background: var(--brand); color: var(--text-on-brand);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-flash) var(--ease-ignite);
}
.skip-nav:focus { top: 16px; }

/* ---------- Nav (shared) ---------- */
@media (max-width: 760px) {
  .nav { gap: 16px; padding-block: 14px; }
  .nav__logo { font-size: 18px; }
  .nav__links { gap: 16px; }
  .nav__link { font-size: 14px; }
}

/* ---------- Section rhythm ---------- */
.wrap { position: relative; max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 64px); }
section { position: relative; }
.section-pad { padding-block: clamp(64px, 12vh, 128px); }
.section.tone-canvas { background: var(--bg-canvas); }
.section.tone-surface { background: var(--bg-surface); border-block: 1px solid var(--border-subtle); }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2, .grow-strip h2 {
  font-weight: var(--w-head); font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.02em; margin-top: 14px; text-wrap: balance;
}
.section-head p { color: var(--text-secondary); font-size: 1.1rem; margin-top: 16px; max-width: 46ch; }

/* ---------- Subpage hero ---------- */
.page-hero { padding-block: clamp(96px, 18vh, 180px) clamp(48px, 8vh, 96px); }
.page-hero h1 {
  font-weight: var(--w-head); font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.02em; margin-top: 18px; max-width: 20ch; text-wrap: balance;
}
.page-hero .lede { color: var(--text-secondary); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 300; line-height: 1.6; margin-top: 24px; max-width: 46ch; }
.page-hero .badge { margin-top: 28px; }

/* ---------- Offer rows (homepage): one hairline-ruled list, not a card row ---------- */
.offers { border-top: 1px solid var(--border-default); }
.offer {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: clamp(16px, 3vw, 40px);
  align-items: baseline; padding-block: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--border-default);
  text-decoration: none; transition: background var(--dur-flash) var(--ease-ignite);
}
.offer:hover { background: var(--bg-hover); }
.offer__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--mono-tracking); color: var(--graphite); direction: ltr; text-align: end; }
.offer__title { font-weight: var(--w-head); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; }
.offer__body { color: var(--text-secondary); font-size: 1.05rem; max-width: 44ch; }
.offer__go { font-size: 15px; color: var(--text-secondary); white-space: nowrap; transition: color var(--dur-flash) var(--ease-ignite); }
.offer:hover .offer__go { color: var(--amber); }
@media (max-width: 760px) {
  .offer { grid-template-columns: 1fr; gap: 10px; }
  .offer__num { text-align: start; }
}

/* ---------- Method: the formula ---------- */
.formula { font-weight: var(--w-head); font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1.1; }
.formula span { color: var(--graphite); font-weight: 300; padding-inline: .3em; }
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 5vw, 56px); }
.term { border-top: 1px solid var(--border-default); padding-top: 20px; }
.term h3 { font-weight: var(--w-sub); font-size: 1.3rem; }
.term p { color: var(--text-secondary); margin-top: 10px; max-width: 40ch; }

/* ---------- Two-up grids (method downloads, systems proof) ---------- */
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.two-up .card h3 { margin-top: 16px; }
.two-up .card .btn { margin-top: 24px; }

/* ---------- Proof cards ---------- */
.proof-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.proof-card__result { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--brand); direction: ltr; }
.proof-stats { display: flex; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.proof-stat b { display: block; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: 1.4rem; color: var(--text-primary); font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.proof-stat span { display: block; font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }

/* ---------- Biz'o feature card (products) ---------- */
.bizo-card { max-width: 640px; }
.bizo-card h3 { font-weight: var(--w-sub); font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 16px; line-height: 1.25; }
.bizo-card__lede { color: var(--text-secondary); font-size: 1.05rem; margin-top: 10px; max-width: 40ch; }
.bizo-card ul { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.bizo-card li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--text-secondary); }
.bizo-card li svg { flex: none; margin-top: 5px; width: 14px; height: 14px; color: var(--brand); }
.bizo-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Pricing (products) ---------- */
.trial-note { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px; font-family: var(--font-he); font-size: 13px; letter-spacing: 0; text-transform: none; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.tier__name-he { font-weight: var(--w-sub); font-size: 1.15rem; direction: ltr; text-align: end; }
.tier__name-en { font-size: 13px; font-weight: 400; color: var(--text-tertiary); margin-top: 2px; display: block; direction: rtl; }
.tier__price { display: flex; align-items: baseline; gap: 6px; margin-block: 18px; }
.tier__amt { font-family: var(--font-mono); font-weight: var(--w-mono); font-size: 2.1rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tier__per { font-size: 13px; color: var(--text-tertiary); }
.tier__specs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; font-size: .95rem; color: var(--text-secondary); }
.tier__specs b { color: var(--text-primary); font-family: var(--font-mono); font-weight: var(--w-mono); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.contact-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.contact-card__label { font-size: 13px; color: var(--text-tertiary); }
.contact-card__value { font-weight: var(--w-sub); font-size: 1.1rem; color: var(--text-primary); transition: color var(--dur-flash) var(--ease-ignite); direction: ltr; text-align: end; }
.contact-card:hover .contact-card__value { color: var(--brand-bright); }

/* ---------- Final CTA ---------- */
.grow-strip { text-align: center; padding-block: clamp(80px, 14vh, 144px); }
.grow-strip h2 { max-width: 16ch; margin-inline: auto; }
.grow-strip p { color: var(--text-secondary); margin: 18px auto 0; max-width: 44ch; }
.grow-strip .btn { margin-top: 34px; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-inset); border-top: 1px solid var(--border-subtle); padding-block: 48px 32px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 32px; }
.footer__brand .wm { font-size: 22px; direction: ltr; display: inline-block; }
.footer__tagline { font-size: 14px; color: var(--text-tertiary); margin-top: 10px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { font-size: 14px; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-flash) var(--ease-ignite); }
.footer__links a:hover { color: var(--text-primary); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-tertiary); }
.footer__bottom a { color: var(--text-tertiary); text-decoration: none; font-family: var(--font-mono); font-size: 12px; }
.footer__bottom a:hover { color: var(--text-secondary); }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-travel) var(--ease-ignite), transform var(--dur-travel) var(--ease-ignite); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 640px) {
  .bizo-card__actions .btn { flex: 1 1 auto; justify-content: center; }
}