/* #offer · the price (owner: S3; pass 7b: SECTIONS). The pass-2 design is back (owner, 2026-10-25): C's paper, the fitted
   two-line heading, three typographic tiers, the recommended one a sheet lifted off the page with its price a window into the
   film. Kept from pass 7: the worked example from the build ({{calc.*}}), no half-states (every beat on a clock, at rest within
   700 ms), the page's one reveal (data-in), 44 px targets, high contrast without a picture behind the numerals.
   Motion (motion sweep plan 006): the heading pours in (data-in="drop"); the ledger rows and the CTA rise (data-in); the numerals
   pour in glyph by glyph when their tier arrives (offer.js: .is-in); the recommended sheet lifts once on arrival (600 ms, every
   device). html.rm: still and complete. (The pass-7 dark card: archive/pass7-v9-sections-2026-10-25/css/offer.css.) */

.offer {
  --s3-hair: rgba(20, 18, 16, .16);
  --s3-copper: var(--copper-t, #8A5129);   /* C's copper for small text (5.2:1 on paper, AA) */
  --s3-ink3: var(--ink-3t, #686056);       /* C's ink-3 for small text (5.1:1) */
  position: relative; z-index: 2; padding: 16svh var(--gut) 10svh;
}

/* ---------- the head: a fitted two-line stack, like C's other display blocks (CSS ratios measured on the pinned face) ---------- */
.ofr__head { display: grid; gap: 18px; margin-bottom: 8svh; }
.ofr__h {
  --hw: calc(100vw - 2 * var(--gut));
  width: var(--hw); max-width: 100%; min-width: 0;
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none; line-height: .94; color: var(--ink);
}
.ofr__l { display: block; width: max-content; max-width: none; white-space: nowrap; transform-origin: 50% 0; }
.ofr__l:nth-child(1) { font-size: calc(var(--hw) * .1535); }
.ofr__l:nth-child(2) { font-size: calc(var(--hw) * .2550); margin-top: .02em; }
@media (min-width: 900px) {
  .offer { padding-top: 20svh; }
  .ofr__head { margin-bottom: 11svh; }
  .ofr__h { --hw: min(36vw, 600px); }
}

/* ---------- the tiers: three typographic cards on paper; the recommended one is a sheet lifted off the page ---------- */
.tiers { display: grid; grid-template-columns: minmax(0, 1fr); }
.tier {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  padding: 30px 0 34px; border-top: 1px solid var(--s3-hair);
}
.tier__tag {
  font: 500 var(--fs-s)/1.2 var(--text); letter-spacing: .04em; color: var(--s3-copper); margin-bottom: 12px;
}
.tier__name { font: 600 var(--fs-h4)/1.15 var(--text); color: var(--ink); letter-spacing: .005em; }
.tier__what { font: 400 var(--fs-body)/1.55 var(--text); color: var(--ink-2); margin-top: 8px; max-width: 30ch; }
.tier__price { margin-top: auto; padding-top: 24px; display: grid; justify-items: start; }
.tier__from { font: 400 var(--fs-s)/1.2 var(--text); color: var(--s3-ink3); margin-bottom: 4px; }
.tier__unit { font: 400 var(--fs-s)/1.45 var(--text); color: var(--ink-2); margin-top: 10px; }
.tier__unit .dot { padding: 0 .3em; }
.tier__win { display: block; position: relative; max-width: 100%; }
.tier__num {
  display: block; width: max-content; white-space: nowrap; color: var(--ink);
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  font-size: min(38vw, 172px); line-height: .86; padding: .07em .02em .03em; letter-spacing: 0;
}
.tier__g { display: inline-block; transform-origin: 50% 0; }
/* the shekel sign set small and high beside the numerals (a price, not a word) */
.tier__cur { display: inline-block; font-size: .4em; vertical-align: top; line-height: 1; margin-top: .3em; margin-inline-end: .1em; }

/* the recommended tier: a sheet of the same paper, lifted (a soft shadow under it, its own grain) */
.tier--rec {
  z-index: 1; border: 0; margin: 4px 0 30px; padding: 26px 22px 28px;
  background: var(--paper) url(../assets/paper.webp) 0 0 / 256px 256px;
  box-shadow: 0 0 0 1px rgba(20, 18, 16, .05);
  transform: translateY(-6px);
}
.tier--rec + .tier { border-top-color: transparent; }
.tier--rec::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 34px 50px -30px rgba(20, 18, 16, .42), 0 10px 22px -14px rgba(20, 18, 16, .2);
}
/* its price is a window into the film: the clip behind white paper with black type (screen), then the paper's own colour over
   all of it (multiply) — the same composite as C's last window (.end__win), so the film shows only through the numerals */
/* a white base inside the group, and the film held 3px inside the window: the knock's anti-aliased edges then stay paper (never
   a hairline of film or grey along the window's sides) */
.tier--rec .tier__win { isolation: isolate; overflow: hidden; width: max-content; background: #fff; }
.tier__film { position: absolute; inset: 3px; overflow: hidden; z-index: 0; }
/* the clip is sized like the page's film behind the hero's letters (about the screen, centred on the window), so this is the same
   film seen through a smaller window, not a thumbnail of it; a touch darker so the numerals always read */
.tier__vid {
  position: absolute; left: 50%; top: 50%; width: 128vw; height: 128vh; height: 128lvh; max-width: none;
  transform: translate(-50%, -50%); object-fit: cover; display: block; filter: brightness(.86) saturate(1.06);
}
.tier__knock { position: relative; z-index: 1; display: block; background: #fff; mix-blend-mode: screen; }
.tier--rec .tier__num { color: #000; }
/* the sheet's own paper over all of it, its grain lined up with the sheet's (offer.js sets --gx / --gy at layout time) */
.tier__paper {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply;
  background: var(--paper) url(../assets/paper.webp) var(--gx, 0px) var(--gy, 0px) / 256px 256px;
}

@media (min-width: 720px) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--s3-hair); border-bottom: 1px solid var(--s3-hair); }
  .tier, .tier:last-child { border: 0; padding: 40px clamp(18px, 2.6vw, 48px) 46px; }
  .tier[data-tier="collection"] { grid-column: 1; grid-row: 1; }
  .tier--rec { grid-column: 2; grid-row: 1; margin: -30px 0; padding-top: 70px; padding-bottom: 64px; transform: translateY(-10px); }
  .tier--rec .tier__tag { position: absolute; top: 34px; inset-inline-start: clamp(18px, 2.6vw, 48px); margin: 0; }
  .tier[data-tier="commission"] { grid-column: 3; grid-row: 1; }
  .tier__what { min-height: 3.1em; }
  .tier__num { font-size: clamp(88px, 10.2vw, 196px); }
}
@media (min-width: 720px) and (max-width: 899px) {
  .tier__num { font-size: clamp(80px, 12vw, 112px); }
}

/* ---------- the ledger: what is included, the worked example (with its math in mono), payments + the minimum ---------- */
.ledger { margin: 4svh 0 0; border-top: 1px solid var(--s3-hair); }
@media (min-width: 720px) { .ledger { margin-top: 9svh; } }
.ledger__row { display: grid; gap: 6px; padding: 18px 0 20px; border-bottom: 1px solid var(--s3-hair); }
.ledger__k { font: 500 var(--fs-s)/1.4 var(--text); color: var(--s3-copper); }
.ledger__v { margin: 0; font: 400 var(--fs-body)/1.65 var(--text); color: var(--ink-2); max-width: 60ch; }
.ledger__v bdi { font-variant-numeric: tabular-nums; }
.ledger__sum { font: 500 1em/1 var(--mono); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.ledger__math {
  display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px;
  font: 400 var(--fs-s)/1.5 var(--mono); color: var(--s3-ink3); letter-spacing: .02em;   /* (digits and signs only) */
}
.ledger__math b { font-weight: 500; color: var(--ink-2); }
@media (min-width: 900px) {
  .ledger__row { grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); column-gap: 4vw; padding: 22px 0 24px; align-items: baseline; }
}

/* ---------- the CTA ---------- */
.ofr__cta { display: grid; gap: 14px; justify-items: start; margin-top: 7svh; }
.ofr__micro { font: 400 var(--fs-s)/1.6 var(--text); color: var(--ink-2); max-width: 44ch; }
@media (min-width: 900px) {
  .ofr__cta { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; }
}
@media (max-width: 419px) { .ofr__cta .btn { width: 100%; } }


/* ---------- motion (motion sweep plan 006: on a clock, at rest within 700 ms; nothing scroll-linked) ---------- */
html.js .offer.is-live .tier--rec { transition: transform 600ms var(--ease-out); }
html.js .offer.is-live .tier--rec::after { transition: opacity 600ms var(--ease-out); }
html.js .offer.is-live .tier--rec:not(.is-in) { transform: translateY(14px); }
html.js .offer.is-live .tier--rec:not(.is-in)::after { opacity: 0; }
/* the numerals pour in, glyph by glyph, 40 ms apart (offer.js numbers them --gi), on the page's pour drop (css/c.css), a little
   shorter than a headline's so a four-glyph price is at rest within 640 ms */
html.js .offer.is-live .tier__g { opacity: 0; }
html.js .offer.is-live .tier.is-in .tier__g { animation: pourDrop 520ms both; animation-delay: calc(var(--gi, 0) * 40ms); }

/* reduced motion (the OS, ?rm=1, or the accessibility menu): everything in place */
html.rm .offer *, html.a11y-nomotion .offer * { animation: none !important; transition: none !important; }
html.rm .offer .tier__g, html.a11y-nomotion .offer .tier__g { opacity: 1 !important; transform: none !important; }
html.rm .offer .tier--rec::after, html.a11y-nomotion .offer .tier--rec::after { opacity: 1 !important; }

/* high contrast: no film behind the recommended price; plain numerals on the page's black */
html.a11y-contrast .tier--rec { background: #000 !important; }
html.a11y-contrast .tier__film, html.a11y-contrast .tier__paper { display: none !important; }
html.a11y-contrast .tier--rec .tier__win { background: none; }
html.a11y-contrast .tier__knock { background: none; mix-blend-mode: normal; }
html.a11y-contrast .tier--rec .tier__num { color: #fff; }