/* ==========================================================================
   עברי - the landing page

   A single stylesheet for a single page, in the order the page is read: tokens, the elements
   everything is built from, then each section from the top of the document down.

   Two things here are worth knowing before changing anything.

   First, the calendar in the hero is not a picture. It is the product's own markup, generated by
   tools/site-demo.ts from the real engine, and it is drawn from the same custom properties the
   application's sheet is drawn from - `--cell-radius`, `--weekday-fill`, `--month-rule` and the
   rest. That is what lets the buttons under it hand over a palette or a design style straight from
   src/app/core/settings.ts and have the calendar redraw itself correctly. If a token is renamed
   there, it has to be renamed here.

   Second, everything is set in a right-to-left document. `start` and `end` are used rather than
   `left` and `right` wherever the difference matters, so a stray `margin-left` is almost always a
   bug rather than a choice.
   ========================================================================== */

:root {
  /* Ink and paper. The page is warm white rather than pure white on purpose: the product makes
     printed things, and a paper-coloured ground says so before a single word is read. */
  --paper: #fbfaf7;
  --paper-tint: #f3f1ea;
  --paper-card: #ffffff;

  --ink: #0b2137;
  --ink-soft: #33506b;
  --muted: #6b7f92;
  --line: #e5e1d8;
  --line-soft: #efece4;

  /* The brand, straight from the application's own palette. */
  --navy: #072038;
  --navy-2: #0e3a63;
  --blue: #065791;
  --teal: #1798ad;
  --teal-deep: #0f7d90;
  --teal-soft: #e0f1f4;
  --gold: #c8871a;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(11, 33, 55, 0.05), 0 4px 14px rgba(11, 33, 55, 0.05);
  --shadow: 0 2px 6px rgba(11, 33, 55, 0.06), 0 18px 46px rgba(11, 33, 55, 0.09);
  --shadow-lg: 0 30px 80px rgba(7, 32, 56, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 68px;

  /*
    The page speaks in a geometric sans and the calendar speaks in a bookface, which is the whole
    typographic idea here: the marketing voice is contemporary, and the artefact it is selling is
    printed matter. `--font-sheet` is used inside the hero calendar and nowhere else, because it is
    what the studio actually sets a sheet in - swapping it for the page's own face would make the
    demo a picture of a different product.
  */
  --font-body: 'Assistant', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Rubik', 'Assistant', 'Segoe UI', system-ui, sans-serif;
  --font-sheet: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
}

/* --------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.68;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

code {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
  font-size: 0.86em;
  background: var(--teal-soft);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  direction: ltr;
  display: inline-block;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  /* A geometric sans sets loose at display sizes. The tracking is negative and gets more so the
     larger the type, which is the difference between "a big font" and a headline. */
  letter-spacing: -0.022em;
  /* Hebrew headlines break badly on their own - three words on one line and one on the next.
     Where a browser knows how to balance them it does; where it does not, nothing changes. */
  text-wrap: balance;
}

h1 {
  letter-spacing: -0.035em;
}

/* One ring for every focusable thing, and only when the keyboard is what focused it. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  transition: top 0.2s var(--ease);
}

.skip:focus {
  top: 1rem;
}

/* --------------------------------------------------------------- layout */

.wrap {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

.wrap--narrow {
  width: min(780px, 100% - 2.5rem);
}

.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.section--tint {
  background: var(--paper-tint);
  border-block: 1px solid var(--line-soft);
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}

.section__head h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}

.section__lead {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  max-width: 40rem;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--teal-deep);
  text-transform: none;
}

.eyebrow::before {
  content: '';
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.ink-accent {
  color: var(--teal-deep);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--solid {
  background: linear-gradient(180deg, var(--blue), #04416d);
  color: #fff;
  box-shadow: 0 8px 22px rgba(6, 87, 145, 0.28);
}

.btn--solid:hover {
  box-shadow: 0 14px 30px rgba(6, 87, 145, 0.34);
}

.btn--ghost {
  border-color: var(--line);
  background: var(--paper-card);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}

.btn--quiet {
  color: var(--ink-soft);
}

.btn--quiet:hover {
  color: var(--teal-deep);
}

.btn--lg {
  padding: 0.85rem 1.8rem;
  font-size: 1.02rem;
}

.btn--block {
  display: flex;
  width: 100%;
  margin-top: auto;
}

/* --------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

/* Set by the script once the page has been scrolled - the bar only earns its edge when there is
   something above it to separate from. */
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.brand img {
  border-radius: 9px;
}

.nav__links {
  display: flex;
  gap: 1.6rem;
  margin-inline-start: 1rem;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.nav__links a {
  position: relative;
  padding-block: 0.4rem;
}

.nav__links a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform 0.22s var(--ease);
}

.nav__links a:hover {
  color: var(--ink);
}

.nav__links a:hover::after {
  transform: scaleX(1);
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  margin-inline-start: auto;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

.nav.is-open .nav__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav.is-open .nav__burger span:nth-child(2) {
  opacity: 0;
}

.nav.is-open .nav__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

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

.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* The light behind the headline. Two soft fields rather than one, so the corner it comes from is
   the corner the eye starts in - the top of the right-hand side, in a Hebrew page. */
.hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  /* Capped in pixels as well as in viewport heights: on a very tall window `70vh` stretches the
     wash halfway down the page, where it reads as a stain rather than as light. */
  height: min(70vh, 760px);
  pointer-events: none;
  background:
    radial-gradient(46% 55% at 82% 18%, rgba(23, 152, 173, 0.22), transparent 62%), radial-gradient(40% 50% at 30% 0%, rgba(6, 87, 145, 0.16), transparent 60%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero h1 {
  font-size: clamp(2.6rem, 5.8vw, 4.6rem);
  font-weight: 800;
  line-height: 1.06;
  margin-bottom: 1.4rem;
}

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34rem;
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.hero__note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.stats li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.stats b {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  /* Figures of the same width, so four numbers in a row line up as a row rather than as four
     separate facts that happen to be near each other. */
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}

.stats span {
  font-size: 0.9rem;
  color: var(--muted);
}

/* --------------------------------------------------------------- the calendar in the hero

   Everything below mirrors the application's own sheet: the same token names, the same fallback
   values, the same meaning. It is deliberately a copy rather than a shared file - this page ships
   no build step and must stand on its own - and the tokens are the contract that keeps the two
   from drifting apart in appearance.
   -------------------------------------------------------------------- */

.hero__art {
  position: relative;
}

.sheet {
  /* The palette. Replaced wholesale by the script when a colour scheme is picked; these are the
     values of the scheme the application opens with. */
  --sheet-ink: #102a43;
  --sheet-muted: #618eb3;
  --sheet-accent: #065791;
  --sheet-accent-soft: #e4eef5;
  --sheet-holiday: #1798ad;
  --sheet-shabbat: #f2f8fa;
  --sheet-paper: #ffffff;
  --sheet-grid: #d8e5ec;
  --sheet-personal: #c8871a;

  /* The two faces the studio hands a sheet, under the names it hands them: a bookface for the
     numbers and the month, the page's own text face for everything else. The page around this
     card is set in something else entirely, and that is the point. */
  --sheet-display: var(--font-sheet);
  --sheet-font: var(--font-body);

  /* Everything on a printed sheet is measured in millimetres, and so is everything here. The one
     screen-only value is this multiplier, which is what stops a 3mm holiday name from being
     unreadable on a phone. */
  --sheet-scale: 0.78;

  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.4rem);
  border-radius: var(--radius);
  background: var(--sheet-paper);
  color: var(--sheet-ink);
  font-family: var(--sheet-font);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  font-size: calc(3.1mm * var(--sheet-scale));
  line-height: 1.3;
  overflow: hidden;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease);
}

.sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: var(--month-align, space-between);
  gap: 1rem;
  margin-bottom: 1.4mm;
  padding: var(--month-pad, 0 0 1.4mm);
  background: var(--month-fill, transparent);
  border-radius: var(--month-radius, 0mm);
  border-bottom: var(--month-rule, 0.4mm) var(--month-rule-style, solid) var(--month-color, var(--sheet-accent));
}

.sheet__month {
  font-family: var(--sheet-display);
  font-weight: 700;
  font-size: calc(var(--month-name-size, 5mm) * var(--sheet-scale));
  color: var(--month-color, var(--sheet-accent));
}

.sheet__span {
  display: block;
  font-size: calc(2.8mm * var(--sheet-scale));
  color: var(--month-span-color, var(--sheet-muted));
}

.sheet__year {
  text-align: end;
  color: var(--month-color, var(--sheet-accent));
}

.sheet__year b {
  display: block;
  font-family: var(--sheet-display);
  font-size: calc(4.6mm * var(--sheet-scale));
  line-height: 1.1;
}

.sheet__year i {
  font-style: normal;
  font-size: calc(2.6mm * var(--sheet-scale));
  color: var(--month-span-color, var(--sheet-muted));
}

.sheet__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--cell-gap, 0.4mm);
  margin-bottom: max(0.4mm, var(--cell-gap, 0.4mm));
  background: var(--weekday-fill, transparent);
  border-radius: var(--weekday-radius, 0mm);
  border-bottom: var(--weekday-rule, 0mm) solid var(--cell-line, var(--sheet-grid));
}

.sheet__weekdays span {
  text-align: center;
  padding: var(--weekday-pad, 0.8mm 0);
  font-size: calc(var(--weekday-size, 2.7mm) * var(--sheet-scale));
  font-weight: var(--weekday-weight, 700);
  letter-spacing: var(--weekday-spacing, 0);
  color: var(--weekday-color, var(--sheet-muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet__weekdays span:last-child {
  color: var(--weekday-shabbat, var(--sheet-accent));
}

.sheet__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(48px, 7.5vw, 82px), auto);
  gap: var(--cell-gap, 0.4mm);
}

.cell {
  display: flex;
  flex-direction: column;
  gap: 0.3mm;
  min-width: 0;
  overflow: hidden;
  padding: var(--cell-pad, 1mm 1.2mm);
  border: var(--cell-border, 0.25mm) solid var(--cell-line, var(--sheet-grid));
  border-bottom-width: calc(var(--cell-border, 0.25mm) + var(--cell-rule, 0mm));
  border-radius: var(--cell-radius, 1mm);
  background: var(--cell-fill, var(--sheet-paper));
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.cell--blank {
  border-color: transparent;
  background: transparent;
}

.cell--shabbat {
  background: var(--cell-shabbat, var(--sheet-shabbat));
}

.cell--holiday {
  background: var(--cell-holiday, var(--sheet-accent-soft));
  border-color: var(--cell-holiday-line, var(--sheet-holiday));
}

/* The eve of a month that opens on Shabbat or on a festival. Blank, because the day belongs to the
   month before - and still carrying the time candles were lit, because it is printed nowhere else
   on the page. */
.cell--eve {
  justify-content: space-between;
  border-color: transparent;
  background: transparent;
  color: var(--sheet-muted);
}

.cell__eve-num {
  font-family: var(--sheet-display);
  font-size: calc(3mm * var(--sheet-scale));
  line-height: 1;
  opacity: 0.75;
}

.cell__eve-time {
  font-size: calc(2.5mm * var(--sheet-scale));
}

.cell__eve-time b,
.cell__time b {
  color: var(--sheet-ink);
}

.cell__top {
  display: flex;
  flex-direction: var(--top-dir, row);
  align-items: var(--top-align, baseline);
  justify-content: var(--top-justify, space-between);
  gap: 1mm;
}

.cell__num {
  font-family: var(--sheet-display);
  font-size: calc(var(--num-size, 4.4mm) * var(--sheet-scale));
  font-weight: var(--num-weight, 700);
  color: var(--num-color, var(--sheet-ink));
  line-height: 1;
}

.cell__alt {
  font-style: normal;
  font-size: calc(2.5mm * var(--sheet-scale));
  color: var(--sheet-muted);
  white-space: nowrap;
}

.cell__marks {
  display: flex;
  flex-direction: column;
  gap: 0.2mm;
  min-width: 0;
}

.mark {
  font-style: normal;
  font-size: calc(2.5mm * var(--sheet-scale));
  font-weight: var(--mark-weight, 600);
  line-height: 1.2;
  color: var(--sheet-holiday);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mark--parasha {
  color: var(--sheet-accent);
}

.mark--roshChodesh {
  color: var(--sheet-accent);
}

.mark--personal {
  color: var(--sheet-personal);
}

.cell__time {
  margin-top: auto;
  font-size: calc(2.4mm * var(--sheet-scale));
  color: var(--sheet-muted);
  white-space: nowrap;
}

.sheet__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3mm;
  padding-top: 2mm;
  border-top: 0.3mm solid var(--cell-line, var(--sheet-grid));
  font-size: calc(2.6mm * var(--sheet-scale));
  color: var(--sheet-muted);
}

/* --------------------------------------------------------------- the studio strip */

.studio {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.studio__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.studio__label {
  flex: none;
  width: 5.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

/* Wrapped rather than scrolled. Twenty-seven palettes are a claim the page makes two sections
   further down, and a row that hides twenty of them behind a scrollbar quietly contradicts it. */
.studio__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

/* A palette, as four bands of its own ink - the same shape the studio's own picker uses. */
.chip {
  flex: none;
  display: flex;
  width: 44px;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(11, 33, 55, 0.14);
  transition:
    transform 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.chip span {
  flex: 1;
}

.chip:hover {
  transform: translateY(-2px);
}

.chip[aria-checked='true'] {
  border-color: var(--blue);
}

.pill {
  flex: none;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all 0.16s var(--ease);
}

.pill:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}

.pill[aria-checked='true'] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* --------------------------------------------------------------- cards */

.cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: var(--radius);
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--teal) 40%, var(--line));
}

.card h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

.card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.card__num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.3rem;
  border-radius: 13px;
  background: var(--teal-soft);
  color: var(--teal-deep);
}

.card__icon svg {
  width: 22px;
  height: 22px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1rem, 2vw, 1.6rem);
}

.card--wide h3 {
  font-size: 1.35rem;
}

/* The palettes, as a strip of ink. Filled by the script from the same catalogue the studio uses. */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.8rem;
}

.swatches span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(11, 33, 55, 0.12);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.8rem 0 0;
  list-style: none;
}

.pills li {
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- the three shapes */

.card--shape {
  gap: 0.9rem;
}

.mock {
  display: grid;
  gap: 3px;
  padding: 0.8rem;
  height: 118px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fff, var(--paper-tint));
  border: 1px solid var(--line-soft);
}

.mock span,
.mock i {
  background: #dfe7ec;
  border-radius: 3px;
}

.mock .is-on {
  background: var(--teal);
  opacity: 0.75;
}

.mock--grid {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.mock--rows {
  grid-template-rows: repeat(8, 1fr);
}

.mock--planner {
  grid-template-columns: repeat(7, 1fr);
  align-items: stretch;
}

.mock--planner i {
  background: repeating-linear-gradient(180deg, #dfe7ec 0 2px, transparent 2px 11px);
  border-radius: 2px;
}

.mock--planner i.is-on {
  background: repeating-linear-gradient(180deg, rgba(23, 152, 173, 0.7) 0 2px, transparent 2px 11px);
  opacity: 1;
}

/* --------------------------------------------------------------- print, on navy */

.print {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: radial-gradient(60% 60% at 85% 0%, rgba(23, 152, 173, 0.22), transparent 60%), linear-gradient(170deg, var(--navy-2), var(--navy));
  color: #eaf2f8;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.print h2,
.print h3 {
  color: #fff;
}

.section__head--dark .section__lead {
  color: #a9c6dd;
}

.print .eyebrow {
  color: var(--teal);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  padding: 1.6rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
}

.steps b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  margin: 0.4rem 0 0.5rem;
  font-size: 1.28rem;
}

.steps p {
  color: #a9c6dd;
  font-size: 0.98rem;
}

/* --------------------------------------------------------------- plans */

.plan {
  position: relative;
  gap: 0.5rem;
}

.plan h3 {
  font-size: 1.4rem;
}

.plan__for {
  min-height: 2.6em;
  font-size: 0.92rem !important;
  color: var(--muted) !important;
}

.plan ul {
  margin: 0.4rem 0 1.4rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.plan li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plan li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

.plan li.is-off {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.plan li.is-off::before {
  background: var(--line-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.plan--best {
  border-color: var(--blue);
  box-shadow: 0 18px 44px rgba(6, 87, 145, 0.16);
}

.plan__flag {
  position: absolute;
  top: -0.75rem;
  inset-inline-start: 1.4rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.plans__note {
  margin-top: 1.6rem;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------- faq */

.faq {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq details {
  padding: 0.2rem 1.3rem;
  border-radius: var(--radius);
  background: var(--paper-card);
  border: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}

.faq details[open] {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* The marker: a square with two sides, turned into a chevron pointing down at a closed answer and
   up at an open one. Physical sides rather than logical ones - the shape is a direction on the
   screen, not a reading order, and `border-inline-start` would flip it sideways in Hebrew. */
.faq summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border: 2px solid var(--teal-deep);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq p {
  padding-bottom: 1.1rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- cta and footer */

/* Paper, not the tint the section above it uses: two tinted blocks in a row read as one very long
   one, and the closing ask should look like its own page. */
.cta {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}

.cta__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 0.7rem;
}

.cta p {
  color: var(--ink-soft);
  max-width: 34rem;
}

.cta .hero__cta {
  justify-content: center;
}

.foot {
  padding-block: 2.5rem;
  background: var(--navy);
  color: #b8cee0;
  font-size: 0.92rem;
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.foot__brand img {
  border-radius: 10px;
}

.foot__brand b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.foot__links a:hover {
  color: #fff;
}

.foot__legal {
  margin-inline-start: auto;
  color: #7f9cb6;
}

/* --------------------------------------------------------------- motion */

/*
  Sections arrive as they are scrolled to. The class is added by the script, so a browser with no
  JavaScript never sees the starting state and the page simply reads - which is the reason the
  hidden state lives on `.reveal.is-armed` rather than on `.reveal` alone.
*/
.reveal.is-armed {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.reveal.is-armed.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal.is-armed {
    opacity: 1;
    transform: none;
  }
}

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

   The calendar is the piece that has to give way first: seven columns cannot narrow past the point
   where a Hebrew date fits in one, so the type multiplier steps down with the viewport rather than
   the grid losing a column - a six-column month is not a month.
   -------------------------------------------------------------------- */

@media (min-width: 700px) {
  .sheet {
    --sheet-scale: 0.92;
  }
}

@media (min-width: 1080px) {
  .sheet {
    --sheet-scale: 1.06;
  }
}

@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__copy {
    max-width: 40rem;
  }

  .cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .nav__links,
  .nav__end {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  /* Opened by the burger: the links drop out of the bar and become the page's own list. */
  .nav.is-open .nav__inner {
    height: auto;
    flex-wrap: wrap;
    padding-bottom: 1rem;
  }

  .nav.is-open .nav__links,
  .nav.is-open .nav__end {
    display: flex;
    width: 100%;
    margin-inline-start: 0;
  }

  .nav.is-open .nav__links {
    flex-direction: column;
    gap: 0.2rem;
    padding-block: 0.6rem;
    border-top: 1px solid var(--line);
  }

  .nav.is-open .nav__links a {
    padding-block: 0.55rem;
  }
}

@media (max-width: 640px) {
  .cards--3,
  .cards--4,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .studio__row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }

  .studio__label {
    width: auto;
  }

  .sheet__foot-note,
  .cell__alt {
    display: none;
  }

  .foot__legal {
    margin-inline-start: 0;
  }
}