/* ==========================================================
   Light theme — loaded only by light.html, on top of styles.css,
   to compare against the dark site (index.html).
   Same layout and markup; only colors change. The featured pricing card
   and the final CTA panel stay black as the page's two accents. Black and white only: no color tokens.
   ========================================================== */
:root {
  --bg: #f4f4f4;
  --card-bg: #fff;
  --hero-bg: #f4f4f4;               /* hero and page are one surface */
  --surface: rgba(11, 11, 11, 0.04);
  --surface-strong: rgba(11, 11, 11, 0.07);
  --border: rgba(11, 11, 11, 0.1);
  --border-strong: rgba(11, 11, 11, 0.2);
  --text: #0b0b0b;
  --text-muted: #4a4a4a;
  --text-dim: #7c7c7c;
  --accent: #0b0b0b;
  --accent-soft: #0b0b0b;           /* checks, focus rings: ink */
}

/* Buttons: dark with white text everywhere (white buttons vanish on light) */
.btn-primary { color: #fff; background: var(--ink); box-shadow: 0 8px 24px rgba(11, 11, 11, 0.14); }
.btn-primary:hover { background: #262626; box-shadow: 0 10px 28px rgba(11, 11, 11, 0.2); }

/* Header: dark text always; light glass once scrolled */
.site-header.is-scrolled { background: rgba(244, 244, 244, 0.82); border-bottom-color: var(--border); }
.site-header .btn-primary { box-shadow: none; }
.menu-toggle span { background: var(--ink); }
@media (max-width: 960px) {
  .main-nav ul { background: #fff; box-shadow: 0 16px 40px rgba(11, 11, 11, 0.12); border: 1px solid var(--border); }
}

/* About: words fill from light gray to ink */
.fill-text .w { color: rgba(11, 11, 11, 0.18); }

/* Packages: white cards on a faint grid */
.packages { --grid-line: #e6e6e6; }
.plan:not(.plan-featured) { background: #fff; }

/* The two dark accents keep their original light-on-dark colors */
.plan-featured,
.cta-panel {
  --text: #f5f5f5;
  --text-muted: #b3b3b3;
  --text-dim: #8a8a8a;
  --accent-soft: #f5f5f5;
  --border: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.plan-featured .btn-primary,
.cta-panel .btn-primary {
  color: #0b0b0b;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 18px rgba(255, 255, 255, 0.35), 0 0 42px rgba(255, 255, 255, 0.12);
}
.plan-featured .btn-primary:hover,
.cta-panel .btn-primary:hover { background: #f1f1f1; }

/* Bottom blur: a light tint instead of the dark one */
.bottom-blur::after { background: linear-gradient(to bottom, transparent, rgba(244, 244, 244, 0.35)); }

/* Hero headline (light version only, user request): ~90px on desktop, line-height 0.9, in three lines
   at every width: "אתרים שתהיו / גאים לשלוח / [word]", so the rotating word has its own line. The h1's
   <br>s are, in order: after שתהיו and after לשלוח (.br-phone, shown here) and after גאים (.br-wide, hidden). */
.hero h1 { line-height: 0.9; }
@media (min-width: 601px) {
  .hero h1 { font-size: clamp(44px, 7vw, 90px); }
  .hero h1 .br-phone { display: inline; }
  .hero h1 .br-wide { display: none; }
}
/* With a 0.9 line height a one-line clip would cut the tops of ל and the tails of ק, so the rotating word
   gets a taller clip (1.25em) whose extra height is taken back with negative margins: the line still
   spaces at 0.9, and the letters still travel fully out of the window above and below. */
.hero .rotator { height: 1.25em; margin-block: -0.175em; }
.hero .rotator-word { line-height: 1.25; }
/* Reel version: its words pass through the whole window, and the window's extra top reaches the line
   above, so the reel's top is clipped at 0.22em: the tops of ל sit 0.25em down at rest and the line above
   ends at 0.11em (measured with the real font), so passing letters stay clear of the line above. */
.hero .rotator-reel { clip-path: inset(0.22em 0 0 0); }

/* Pricing: the Figma block stays lighter than the white main cards (page-colored fill) */
.plan.plan-figma { background: var(--bg); }