/* ==========================================================================
   EasyPrinter — print-craft landing page
   Palette: paper / ink / carbonless white-pink-yellow / stamp red
   ========================================================================== */

:root {
  --paper: #f7f4ee;
  --ink: #201b15;
  --ink-soft: #6b6257;
  --sheet-white: #fffdf9;
  --pink: #f3c3d0;
  --pink-deep: #d98ba1;
  --yellow: #f2dd9b;
  --yellow-deep: #c9a94e;
  --stamp: #bf3b26;
  --line: #d9d2c5;

  --font-display: "Suez One", serif;
  --font-body: "Assistant", sans-serif;
  --font-label: "Miriam Libre", monospace;

  --radius: 6px;
  --container: 1120px;

  /* section rhythm: one tint strength, alternating tinted / plain down the page */
  --tint-rose: rgba(243, 195, 208, 0.10);
  --tint-warm: rgba(242, 221, 155, 0.10);
  --pad-major: clamp(48px, 6vw, 80px);
  --pad-minor: clamp(32px, 4.5vw, 56px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 72px; color-scheme: light; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }

body {
  overflow-x: clip;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  /* subtle paper grain */
  background-image:
    repeating-linear-gradient(0deg, rgba(32, 27, 21, 0.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(32, 27, 21, 0.012) 0 1px, transparent 1px 4px);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- copy chips (the product's מקור/העתק/ספח chips as section eyebrows) ---------- */
.chip {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 14px 5px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.18);
}
.chip-white { background: var(--sheet-white); }
.chip-pink { background: var(--pink); }
.chip-yellow { background: var(--yellow); }

/* ---------- perforation divider ---------- */
.perf {
  height: 2px;
  background-image: radial-gradient(circle, var(--ink-soft) 1.1px, transparent 1.2px);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  opacity: 0.45;
  max-width: var(--container);
  margin-inline: auto;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-primary {
  background: var(--ink);
  color: var(--sheet-white);
  box-shadow: 3px 3px 0 var(--pink-deep);
}
.btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pink-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.15);
}
.btn-ghost:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(32, 27, 21, 0.2); }
/* play glyph: media controls are not mirrored in RTL */
.btn-play::before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  margin-inline-end: 10px;
  vertical-align: -1px;
}
.btn:focus-visible, a:focus-visible {
  outline: 3px solid var(--stamp);
  outline-offset: 3px;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  z-index: 100;
  background: var(--ink);
  color: var(--sheet-white);
  font-weight: 700;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus-visible { top: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

/* rubber-stamp logo mark */
.logo-stamp {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  color: var(--stamp);
  border: 2.5px solid var(--stamp);
  border-radius: 4px;
  padding: 2px 12px 3px;
  text-decoration: none;
  transform: rotate(-2deg);
  -webkit-mask-image: radial-gradient(circle at 30% 60%, black 96%, transparent 100%);
          mask-image: radial-gradient(circle at 30% 60%, black 96%, transparent 100%);
}

.site-nav {
  display: flex;
  align-items: center;
  /* the floor keeps the row inside the header just above the nav
     collapse (820px), where the fallback font is wider than the loaded one */
  gap: clamp(10px, 2.4vw, 32px);
}
.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  padding-block: 4px;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-nav a.is-current:not(.nav-cta) {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--stamp);
}
.site-nav .nav-cta {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 5px 16px;
  background: var(--yellow);
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.18);
}
.site-nav .nav-cta:hover { text-decoration: none; }
/* desktop row: the links sit beside the logo, the CTA holds the far end */
@media (min-width: 821px) {
  .site-nav { flex: 1; margin-inline-start: clamp(12px, 2.5vw, 32px); }
  .site-nav .nav-cta { margin-inline-start: auto; }
}

/* language switcher: the other built languages, each in its own script */
/* one compact control (native details/summary, no script): the current language's own name,
   the other built languages in a small dropdown */
.lang-switch {
  position: relative;
  flex: none;
}
.lang-switch summary,
.lang-switch a {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 3px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.lang-switch summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after {
  content: "";
  display: inline-block;
  margin-inline-start: 8px;
  vertical-align: 0.15em;
  border-inline: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.lang-switch[open] summary::after { transform: scaleY(-1); }
.lang-switch summary:hover,
.lang-switch a:hover { background: var(--yellow); }
.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(32, 27, 21, 0.15);
}
.lang-menu a { display: block; text-align: center; border-color: var(--line); }

/* mobile nav toggle — styled like the copy chips, hidden on desktop */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 16px 6px;
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.18);
  cursor: pointer;
}
.nav-toggle-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}
.nav-toggle-lines i {
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.nav-open .nav-toggle-lines i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-open .nav-toggle-lines i:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-lines i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-lines i { transition: none; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(56px, 9vw, 110px) clamp(56px, 8vw, 100px); overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}
.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  line-height: 1.12;
  margin-block: 20px 0;
}
/* English runs longer: at phone width keep the wrapped line clear of the slot bar */
@media (max-width: 520px) {
  [dir="ltr"] .hero-copy h1 { font-size: 2.3rem; line-height: 1.22; }
  [dir="ltr"] .print-word { top: -10px; }
}

/* the printed word: "במסך אחד" on a sheet sliding out of a press slot */
.print-word {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  top: -18px; /* tuck the slot up against the first line */
}
.pw-slot {
  display: block;
  align-self: stretch;
  margin-inline: -16px;
  height: 15px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  /* CMYK control strip: the press's own colors */
  background: linear-gradient(to left,
    #00a0df 0 25%,
    #e6007a 25% 50%,
    #ffd400 50% 75%,
    #201b15 75% 100%);
  position: relative;
  z-index: 1;
}
.pw-clip {
  overflow: hidden;
  padding: 0 6px 14px;
  margin-top: -4px;
}
.pw-sheet {
  display: block;
  background: var(--sheet-white);
  border: 1px solid rgba(32, 27, 21, 0.2);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 4px 22px 8px;
  box-shadow: 0 10px 22px rgba(32, 27, 21, 0.18);
}

.hero-sub {
  font-size: 1.1875rem;
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 32px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- hero paper fan ---------- */
.hero-visual { display: flex; justify-content: center; }

/* press-sheet trim marks framing the fan */
.press-area {
  --mark: rgba(32, 27, 21, 0.42);
  position: relative;
  padding: 40px 46px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark));
  background-size:
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px;
  background-position:
    left 0 top 26px,     left 26px top 0,
    right 0 top 26px,    right 26px top 0,
    left 0 bottom 26px,  left 26px bottom 0,
    right 0 bottom 26px, right 26px bottom 0;
}
.paper-fan {
  position: relative;
  width: min(300px, 70vw);
  aspect-ratio: 148 / 200;
}
.sheet {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1px solid rgba(32, 27, 21, 0.14);
  box-shadow: 0 14px 30px rgba(32, 27, 21, 0.16);
  transform-origin: bottom center;
}
.sheet-yellow { background: var(--yellow); transform: rotate(9deg) translateX(-6px); }
.sheet-pink { background: var(--pink); transform: rotate(4.5deg) translateX(-3px); }
.sheet-white { background: var(--sheet-white); }

/* hero load sequence: the fan opens and the word's copies peel out with it */
@media (prefers-reduced-motion: no-preference) {
  html.js .sheet-pink { transition: transform 800ms cubic-bezier(0.2, 0.8, 0.3, 1) 250ms; }
  html.js .sheet-yellow { transition: transform 900ms cubic-bezier(0.2, 0.8, 0.3, 1) 330ms; }
  html.js:not(.loaded) .sheet-pink,
  html.js:not(.loaded) .sheet-yellow { transform: rotate(0deg) translateX(0); }

  html.js .pw-sheet {
    transition: transform 950ms cubic-bezier(0.3, 0.6, 0.3, 1) 600ms;
  }
  html.js:not(.loaded) .pw-sheet { transform: translateY(-103%); }
}

/* mock invoice on the top sheet — a faithful miniature of the product's
   tax_receipt.html (חשבונית מס/קבלה) output, ~0.54 scale of A5.
   Fixed px sizes: the sheet itself is a fixed-size prop. */
.mock-doc {
  position: absolute;
  inset: 2% 2.7% 2.5%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.45;
}
/* wide letterhead: name row (logo at the far end), details spread across */
.mock-hdr {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 6px 4px;
  border-bottom: 1px solid var(--ink);
}
.mock-hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.mock-logo { width: 30px; height: 30px; flex-shrink: 0; }
.mock-bizrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  font-size: 7px;
}
.mock-bizrow span { white-space: nowrap; }
.mock-bizrow span:nth-child(even) { justify-self: end; }
.mock-bizname { font-weight: 700; font-size: 16px; line-height: 1.25; }
.mock-bizline { font-size: 7px; }
.mock-biznum { font-size: 7px; margin-top: 2px; }
.mock-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 3px 6px;
}
.mock-doctitle { font-weight: 700; font-size: 10px; }
.mock-copytag { font-weight: 700; font-size: 8px; }
.mock-recip {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 3px 6px 4px;
  border-bottom: 1px solid var(--ink);
}
.mock-rlbl { font-weight: 700; font-size: 7.5px; white-space: nowrap; }
.mock-rfill { flex: 3; border-bottom: 1px solid var(--ink); height: 11px; }
.mock-rfill.sm { flex: 1; }
/* items table exactly like the generator: full width, collapsed borders,
   totals as footer rows — the סכום column keeps its bordered cells while
   the wide cell hides its rules and the label hugs the column */
.mock-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.mock-tbl th, .mock-tbl td {
  border: 1px solid var(--ink);
  padding: 0 3px;
}
.mock-tbl th {
  font-size: 6.5px;
  font-weight: 700;
  text-align: center;
  background: #f0efea;
  height: 15px;
}
.mock-tbl .c-qty { width: 8.6%; }
.mock-tbl .c-unit { width: 15.7%; }
.mock-tbl .c-amt { width: 25%; }
.mock-tr td { height: 15px; }
.mock-tf td { height: 13px; }
.mock-tbl .tf-lbl {
  border-bottom-style: hidden;
  border-inline-start-style: hidden; /* the table's right edge ends with the body */
  text-align: end; /* beside the amount column in both directions */
  font-size: 6.5px;
  font-weight: 600;
  vertical-align: bottom;
  padding-bottom: 2px;
}
.mock-tf + .mock-tf .tf-lbl { border-top-style: hidden; }
.mock-tbl .tf-lbl em {
  display: inline-block;
  width: 20px;
  height: 7px;
  border-bottom: 1px solid var(--ink);
  margin-inline: 2px;
}
.mock-pay {
  padding: 3px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mock-payrow {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  font-size: 7px;
  font-weight: 700;
}
.mock-payrow span { white-space: nowrap; }
.mock-payrow .sub { font-weight: 400; font-size: 6.5px; }
.mock-payrow i { flex: 1; border-bottom: 1px solid var(--ink); height: 9px; }
.mock-payrow i.w32 { flex: 0 0 32px; }
.mock-payrow i.w28 { flex: 0 0 28px; }

/* ---------- shared section bits ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin-block: 14px 36px;
}

/* ---------- feature trailer (lightbox) ---------- */
html:has(.trailer-dialog[open]) { overflow: hidden; }
.trailer-dialog {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.trailer-dialog::backdrop { background: rgba(32, 27, 21, 0.74); }
.trailer-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* a portrait card in the same paper-and-ink frame as the mockups, sized to the 4:5 clip */
.trailer-frame {
  /* as large as the viewport allows while the whole 4:5 clip stays on screen */
  width: min(440px, 88vw, calc((100dvh - 120px) * 0.8));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 rgba(32, 27, 21, 0.12);
}
.trailer-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trailer-caption {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  color: var(--sheet-white);
}
.trailer-close {
  position: absolute;
  top: -16px;
  inset-inline-end: -16px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font: 700 1.4rem/1 var(--font-body);
  color: var(--ink);
  background: var(--sheet-white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--pink-deep);
  cursor: pointer;
}
.trailer-close:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; }

/* ---------- showcase tabs ----------
   Jump links above the showcases. With JS (html.tabs-js) they become tabs,
   the showcases share one stage, and only the chosen one is shown. */
.showcase-nav { padding-top: var(--pad-minor); }
/* seven teaser cards: the title plus the story's promise, four to a row, the odd row centred */
.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.showcase-tabs a {
  flex: 0 1 230px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  padding: 14px 16px 15px;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.showcase-tabs strong {
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.showcase-tabs span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.showcase-tabs a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.22); }
.showcase-tabs a[aria-selected="true"] {
  background: var(--ink);
  color: var(--sheet-white);
  box-shadow: 3px 3px 0 var(--pink-deep);
}
.showcase-tabs a[aria-selected="true"] span { color: rgba(255, 252, 245, 0.82); }
html.tabs-js .showcase { background: linear-gradient(var(--tint-warm), var(--tint-warm)); }
html.tabs-js .showcase > section {
  background: none;
  padding-top: clamp(32px, 4.5vw, 52px);
}
html.tabs-js .showcase > section[hidden] { display: none; }
/* previous / next at the foot of a panel, so nobody scrolls back up to switch */
.showcase-pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
}
.showcase-pager a {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px dashed var(--ink-soft);
}
.showcase-pager a:hover { border-bottom-style: solid; }
.showcase-pager .pager-next { margin-inline-start: auto; }

/* ---------- how it works ---------- */
.how { padding-block: clamp(48px, 7vw, 90px); }
.flow + .flow { margin-top: clamp(40px, 6vw, 64px); }
.flow-title {
  font-size: 1.3rem;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  counter-reset: step;
}
.step { position: relative; padding-top: 8px; }
/* dotted feed-path between steps: the sheet travels station to station */
@media (min-width: 821px) {
  .step + .step::before {
    content: "";
    position: absolute;
    top: 100px;
    inset-inline-end: calc(100% + 3px);
    width: clamp(14px, 2.4vw, 30px);
    border-top: 2px dotted rgba(107, 98, 87, 0.55);
  }
}
.step-num {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.5rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.2);
}
.step h4 { font-size: 1.25rem; margin-block: 16px 6px; }
.step p { color: var(--ink-soft); font-size: 1rem; }

/* mini mockup cards */
.step-mock { min-height: 190px; display: flex; }
.mini-card {
  flex: 1;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(32, 27, 21, 0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-titlebar {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.8rem;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 6px;
}
.mini-bar { height: 9px; border-radius: 5px; background: var(--line); display: inline-block; }
.mini-bar.w40 { width: 40%; }
.mini-bar.w50 { width: 50%; }
.mini-bar.w70 { width: 70%; }
.mini-bar.w80 { width: 80%; }
.mini-filerow { display: flex; align-items: center; gap: 8px; }
.mini-fileicon {
  width: 22px; height: 28px;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: 2px 6px 2px 2px;
  flex-shrink: 0;
}
.mini-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-chip {
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  padding: 1px 9px 2px;
  background: var(--paper);
}
.mini-btn {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 4px;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
}
.mini-btn.dark { background: var(--ink); color: var(--sheet-white); }
.mini-btn.ghost { background: transparent; }
.mini-statusflow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mini-chip.lit { background: var(--yellow); border-color: var(--ink); font-weight: 700; }
.mini-jobhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-end: 26px; }
.mini-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 10px 2px;
  border-radius: 999px;
  background: var(--pink);
  border: 1px solid var(--ink);
}
.mini-actions { margin-top: auto; display: flex; gap: 8px; }
.mini-actions .mini-btn { margin-top: 0; }

/* tiled business cards on a sheet (flow A, step 2) */
.bc-sheet {
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--sheet-white);
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.bc-card {
  height: 25px;
  border: 1px dashed var(--ink-soft); /* the cut lines */
  border-radius: 2px;
  background:
    radial-gradient(circle at 82% 46%, var(--pink) 3.5px, transparent 4.2px) no-repeat,
    linear-gradient(var(--line), var(--line)) 28% 36% / 42% 3.5px no-repeat,
    linear-gradient(var(--line), var(--line)) 24% 66% / 30% 3.5px no-repeat,
    var(--sheet-white);
}

/* tray diagram */
.tray {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
}
.tray-white { background: var(--sheet-white); }
.tray-pink { background: var(--pink); }
.tray-yellow { background: var(--yellow); }
.tray-out {
  margin-top: auto;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--stamp);
}

/* book flow: sheet-layout rows (step 2) */
.book-row { display: flex; align-items: center; gap: 7px; }
.bs-tag {
  width: 52px;
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.book-sheet {
  flex: 1;
  display: flex;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
  background: var(--sheet-white);
}
.book-sheet.back { background: var(--paper); }
.book-sheet span {
  flex: 1;
  text-align: center;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 4px 0 5px;
  white-space: nowrap;
}
.book-sheet span:first-child { border-inline-end: 1.5px dashed var(--ink-soft); }

/* book flow, step 3: the two outputs side by side, joined by "או" */
.book-done {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.bd-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.bd-or {
  flex-shrink: 0;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.72rem;
  width: 27px; height: 27px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  color: var(--ink-soft);
}
.bd-cap { font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
/* folded, stapled spread */
.bd-spread {
  position: relative;
  width: 100%;
  max-width: 116px;
  height: 82px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.12);
  /* faint text lines + the center fold */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 10px, var(--line) 10px 12px);
  background-size: 64% 56%;
  background-position: 50% 55%;
  background-repeat: no-repeat;
  background-color: var(--sheet-white);
}
.bd-spread::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px;
  left: 50%;
  border-inline-start: 1.5px dashed var(--ink-soft);
}
.bd-staple {
  position: absolute;
  left: calc(50% - 2px);
  width: 4px;
  height: 11px;
  background: var(--ink);
  border-radius: 2px;
}
.bd-staple:first-child { top: 14px; }
.bd-staple:last-child { bottom: 14px; }
/* loose duplex stack, spiral holes on the binding (right) edge */
.bd-loose {
  position: relative;
  width: 64px;
  height: 82px;
}
.bd-loose i {
  position: absolute;
  inset: 0;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}
.bd-loose i:nth-child(1) { transform: translate(-8px, 8px); background: var(--paper); }
.bd-loose i:nth-child(2) { transform: translate(-4px, 4px); }
.bd-loose i:nth-child(3) {
  /* text lines + a column of spiral holes along the right edge */
  background-image:
    radial-gradient(circle, var(--ink-soft) 1.3px, transparent 1.6px),
    repeating-linear-gradient(0deg, transparent 0 9px, var(--line) 9px 11px);
  background-size: 5px 8px, 62% 60%;
  background-position: top 4px right 3px, 55% 55%;
  background-repeat: repeat-y, no-repeat;
}

/* finished pad (flow B, step 3) */
.pad-stack { position: relative; flex: 1; min-height: 170px; }
.pad-layer {
  position: absolute;
  inset: 12px 10px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
}
.pad-yellow { background: var(--yellow); transform: translate(-10px, 12px); }
.pad-pink { background: var(--pink); transform: translate(-5px, 6px); }
.pad-top {
  background: var(--sheet-white);
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.pad-num {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--stamp);
}
.pad-chips {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pad-chips .chip { font-size: 0.62rem; padding: 1px 8px 2px; box-shadow: 1px 1px 0 rgba(32, 27, 21, 0.18); }

/* ---------- upload portal showcase ---------- */
.uploadx {
  padding-block: var(--pad-major);
  background: linear-gradient(var(--tint-warm), var(--tint-warm));
}
.uploadx-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.uploadx-copy > p { color: var(--ink-soft); max-width: 34em; }

.upload-mock {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 148px;
}
.uf-card {
  width: min(340px, 100%);
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 rgba(32, 27, 21, 0.12);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uf-title {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 8px;
}
.uf-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px dashed var(--ink-soft);
  border-radius: var(--radius);
  padding: 14px 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper);
}
.uf-fileicon {
  width: 24px; height: 30px;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: 2px 7px 2px 2px;
  flex-shrink: 0;
}
.uf-field { position: relative; }
.uf-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.uf-input {
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--sheet-white);
}
.uf-caret {
  display: inline-block;
  width: 1.5px; height: 0.95em;
  background: var(--ink);
  vertical-align: text-bottom;
  margin-inline-start: 1px;
}
.uf-suggest {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin-top: 3px;
  z-index: 2;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.15);
}
.uf-field { margin-bottom: 34px; }
.uf-specs { display: flex; flex-wrap: wrap; gap: 7px; }
.uf-spec {
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  padding: 2px 11px 3px;
  background: var(--paper);
  color: var(--ink-soft);
}
.uf-spec.on {
  background: var(--pink);
  border-color: var(--ink);
  color: var(--ink);
}
.uf-submit {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--sheet-white);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--pink-deep);
}

/* custom-size tiling: the tiled sheet emerges from a printer */
.uf-machine {
  position: absolute;
  bottom: 0;
  inset-inline-end: clamp(0px, 3vw, 20px);
  width: 186px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.uf-print-sheet {
  position: relative;
  z-index: 0;
  width: 124px;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  padding: 8px 8px 14px;
  margin-bottom: -14px;
}
.uf-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.uf-tile-grid span {
  height: 26px;
  border: 1px solid var(--ink-soft);
  border-radius: 3px;
  background:
    linear-gradient(var(--line), var(--line)) 50% 30% / 70% 4px no-repeat,
    linear-gradient(var(--line), var(--line)) 50% 55% / 50% 4px no-repeat,
    var(--paper);
}
.uf-printer-body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 46px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 8px 8px 6px 6px;
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.12);
}
.uf-slot {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 136px;
  height: 5px;
  background: var(--ink);
  border-radius: 3px;
}
/* motion dashes flanking the sheet as it exits the slot */
.uf-printer-body::before,
.uf-printer-body::after {
  content: "";
  position: absolute;
  top: -22px;
  width: 2px;
  height: 14px;
  background: var(--ink-soft);
  border-radius: 2px;
}
.uf-printer-body::before { inset-inline-start: 13px; }
.uf-printer-body::after { inset-inline-end: 13px; }
.uf-light {
  position: absolute;
  bottom: 9px;
  inset-inline-start: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow-deep);
  border: 1px solid var(--ink);
}
.uf-tile-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--stamp);
}
/* the sheet slides out of the slot when the section reveals */
html.js .upload-mock .uf-print-sheet {
  transform: translateY(72px);
  transition: transform 1600ms cubic-bezier(0.3, 0.6, 0.3, 1) 350ms;
}
html.js .upload-mock.is-visible .uf-print-sheet { transform: none; }
/* busy light while the section is in view */
@media (prefers-reduced-motion: no-preference) {
  html.js .upload-mock.is-visible .uf-light { animation: uf-blink 1.4s steps(1) 4; }
}
@keyframes uf-blink {
  0%, 100% { background: var(--yellow-deep); }
  50% { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .upload-mock .uf-print-sheet { transform: none; transition: none; }
}

/* ---------- feature grid ---------- */
.features {
  padding-block: var(--pad-minor);
  background: linear-gradient(var(--tint-rose), var(--tint-rose));
}
.feature-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.feature-card {
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.07);
  position: relative;
}
/* NCR sheet-edge: each card carries the triplet on its top edge */
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(to left, var(--sheet-white) 33%, var(--pink) 33% 66%, var(--yellow) 66%);
  border-bottom: 1px solid var(--line);
}
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 6px;
  transform: rotate(-3deg);
  margin-bottom: 12px;
}
.feature-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(3deg); /* keep the glyph level inside the tilted stamp frame */
}
.feature-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.feature-card p { color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- booklet showcase ---------- */
.booklets {
  padding-block: var(--pad-major);
}
.booklets-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.booklets-copy > p { color: var(--ink-soft); max-width: 34em; }
/* The copy column runs to several paragraphs now, and the reset zeroes margins. */
.booklets-copy > p + p { margin-top: 14px; }
.booklets-copy > p strong { color: var(--ink); }
.booklets-reorder,
.sheets-note,
.book-note {
  margin-top: 22px;
  padding: 12px 16px;
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.07);
}
.booklets-reorder strong,
.sheets-note strong,
.book-note strong { color: var(--ink); }
/* One column by default; the second is added only above the width where every
   one of these lists — the narrowest copy column is #book's and #sheets' — can
   still give a column ~250px. Keeping it a breakpoint rather than auto-fit means
   the four identical sections always agree with each other. */
.booklet-options {
  list-style: none;
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
}
@media (min-width: 1080px) {
  .booklet-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.booklet-options li {
  position: relative;
  padding-inline-start: 26px;
  font-weight: 600;
  font-size: 0.9375rem;
}
.booklet-options li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  font-size: 0.65rem;
  background: var(--yellow);
  border: 1px solid var(--ink);
  border-radius: 50%;
}

/* ---------- sheet layout showcase ---------- */
.sheets {
  padding-block: var(--pad-major);
  background: linear-gradient(var(--tint-warm), var(--tint-warm));
}
.sheets-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.sheets-copy > p { color: var(--ink-soft); max-width: 34em; }

/* live workspace mock: settings column (right in RTL) + preview canvas */
.sheets-mock { display: flex; justify-content: center; }
.sl-window {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 14px;
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--yellow), 12px 12px 0 var(--pink);
  padding: 14px;
}
.sl-settings { display: flex; flex-direction: column; gap: 12px; }
.sl-field { display: flex; flex-direction: column; gap: 4px; }
.sl-lbl { font-family: var(--font-label); font-size: 0.75rem; color: var(--ink-soft); }
.sl-toggle {
  display: flex;
  border: 1px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
}
.sl-toggle span { flex: 1; text-align: center; padding: 3px 6px; background: var(--sheet-white); }
.sl-toggle span.active { background: var(--yellow); }
.sl-select {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.75rem;
  background: var(--paper);
}
.sl-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 14px 12px;
}
.sl-live {
  position: absolute;
  top: -10px;
  inset-inline-start: 12px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  padding: 2px 9px;
  background: var(--pink);
  border: 1px solid var(--ink);
  border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
  .sl-live { animation: sl-pulse 2.4s ease-in-out infinite; }
}
@keyframes sl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 139, 161, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(217, 139, 161, 0); }
}
/* the press sheet: SRA3 landscape, two page slots, fold at center */
.sl-sheet {
  position: relative;
  width: min(240px, 100%);
  aspect-ratio: 450 / 320;
  background: var(--sheet-white);
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px;
}
/* fold marks: dashed ticks in the top/bottom sheet margins */
.sl-sheet::before,
.sl-sheet::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 11px;
  border-inline-start: 1px dashed rgba(32, 27, 21, 0.5);
}
.sl-sheet::before { top: 2px; }
.sl-sheet::after { bottom: 2px; }
/* trim marks: one element per corner, mirrored by transform */
.sl-corner { position: absolute; width: 24px; height: 24px; }
.sl-corner::before,
.sl-corner::after { content: ""; position: absolute; background: rgba(32, 27, 21, 0.5); }
.sl-corner::before { top: 15px; left: 0; width: 10px; height: 1px; }
.sl-corner::after { top: 0; left: 15px; width: 1px; height: 10px; }
.sl-corner.tl { top: 0; left: 0; }
.sl-corner.tr { top: 0; right: 0; transform: scaleX(-1); }
.sl-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.sl-corner.br { bottom: 0; right: 0; transform: scale(-1); }
.sl-slot {
  display: grid;
  place-items: center;
  background: #fff; /* a touch brighter than the sheet, so the page slots read as content */
  border: 1px dashed var(--line);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink-soft);
}
/* thumbnail rail of all four sheet sides */
.sl-rail { display: flex; gap: 10px; }
.sl-thumb { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sl-thumb-pg {
  width: 46px;
  aspect-ratio: 450 / 320;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sheet-white);
  border: 1px solid var(--line);
}
.sl-thumb-pg i {
  font-style: normal;
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  color: var(--ink-soft);
}
.sl-thumb-pg i:first-child { border-inline-end: 1px dashed var(--line); }
.sl-thumb.active .sl-thumb-pg { border-color: var(--ink); box-shadow: 0 0 0 2px var(--yellow); }
.sl-thumb em {
  font-style: normal;
  font-family: var(--font-label);
  font-size: 0.55rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* N-up / step-and-repeat: many images ganged on one press sheet */
.sl-sheet.sl-nup {
  display: block;
  padding: 14px;
}
.sl-sheet.sl-nup::before,
.sl-sheet.sl-nup::after { display: none; } /* no fold marks when ganging images */
.sl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
}
.sl-img {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
.sl-img::before { /* sun */
  content: "";
  position: absolute;
  top: 14%;
  inset-inline-end: 15%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
}
.sl-img::after { /* mountain silhouette */
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 48%;
  background:
    linear-gradient(122deg, transparent 42%, rgba(217, 139, 161, 0.6) 42%),
    linear-gradient(58deg, transparent 42%, rgba(32, 27, 21, 0.4) 42%);
  background-color: rgba(32, 27, 21, 0.1);
}
/* sheet-layout summary counts, replacing the booklet-spread rail.
   The stats wrap rather than push past the preview panel: between 821px and
   the 2-column collapse the preview column is narrower than three stats. */
.sl-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  max-width: 100%;
}
.sl-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sl-stat strong { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; }
.sl-stat em {
  font-style: normal;
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- book finishing showcase ---------- */
.bookshow {
  padding-block: var(--pad-major);
}
.bookshow-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.bookshow-copy > p { color: var(--ink-soft); max-width: 34em; }

/* finishing scene: job card (right in RTL) -> finished stapled booklet */
.bookshow-mock { display: flex; justify-content: center; }
.bk-scene {
  display: grid;
  /* the job card carries the labels, so it gets the wider column */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  width: min(560px, 100%);
}
/* Below the container's cap the card's own column is too narrow to hold the
   three finishing chips on one row, so the scene stacks. One threshold rather
   than a band, so narrowing the window never un-stacks and re-stacks it. */
@media (max-width: 1120px) {
  .bk-scene { grid-template-columns: 1fr; justify-items: center; }
}
.bk-card {
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--pink);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bk-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.bk-fname { font-weight: 700; font-size: 0.85rem; }
.bk-badge {
  font-family: var(--font-label);
  font-size: 0.75rem;
  padding: 2px 8px;
  background: var(--yellow);
  border: 1px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.bk-row { display: flex; flex-direction: column; gap: 4px; }
.bk-lbl { font-family: var(--font-label); font-size: 0.75rem; color: var(--ink-soft); }
.bk-toggle {
  display: flex;
  border: 1px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
}
.bk-toggle span { flex: 1; text-align: center; padding: 3px 6px; background: var(--sheet-white); white-space: nowrap; }
.bk-toggle span.active { background: var(--yellow); }
.bk-spec { font-size: 0.85rem; font-weight: 600; }
.bk-fin { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  white-space: nowrap;
}
.bk-chip.active { background: var(--pink); border-color: var(--ink); }
.bk-result { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bk-book { position: relative; width: min(160px, 100%); aspect-ratio: 148 / 210; }
.bk-page {
  position: absolute;
  inset: 0;
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.bk-page.p1 { transform: rotate(2deg) translate(-3px, 1px); }
.bk-page.p2 { transform: rotate(4deg) translate(-6px, 3px); }
.bk-cover {
  position: absolute;
  inset: 0;
  background: var(--sheet-white);
  border: 1px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* the printed area sits clear of the spine; physical sides, not logical —
     the booklet is bound on its physical right edge regardless of text flow */
  padding: 26px 22px 20px 14px;
  overflow: hidden;
}
/* the fold itself: a creased, shaded strip down the bound edge */
.bk-spine {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 13px;
  background: linear-gradient(to left,
    rgba(32, 27, 21, 0.18),
    rgba(32, 27, 21, 0.05) 60%,
    transparent);
  border-left: 1px solid rgba(32, 27, 21, 0.18);
}
.bk-title-line { width: 100%; height: 8px; background: var(--pink); border-radius: 3px; }
.bk-title-line.short { width: 62%; height: 8px; background: var(--yellow); margin-top: 6px; }
.bk-cover-rule {
  width: 70%;
  height: 1px;
  background: rgba(32, 27, 21, 0.32);
  margin-block: 14px 12px;
}
.bk-text-line {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(32, 27, 21, 0.16);
  margin-bottom: 6px;
}
.bk-text-line.short { width: 55%; margin-inline-end: auto; }
/* two staples clenched on the fold — physical right edge, the spine of a
   right-bound book — sitting on the crease rather than flush off the sheet */
.bk-staple {
  position: absolute;
  right: 4px;
  z-index: 2;
  width: 4px;
  height: 22px;
  border-radius: 1px;
  background: linear-gradient(to left, #7a736a, #201b15 45%, #554e45);
  box-shadow: 0 0 0 0.5px rgba(32, 27, 21, 0.5);
}
.bk-staple.s1 { top: 20%; }
.bk-staple.s2 { bottom: 20%; }
.bk-tag {
  font-family: var(--font-label);
  font-size: 0.75rem;
  padding: 3px 12px;
  background: var(--sheet-white);
  border: 1px dashed var(--ink);
  border-radius: 999px;
}

/* booklet page mockup — a faithful miniature of the product's invoice.html
   (חשבונית מס) output, ~0.59 scale of A5 */
.booklet-mock { display: flex; justify-content: center; }
.bm-page {
  width: min(330px, 100%);
  background: var(--sheet-white);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--yellow);
  padding: 10px 10px 14px;
  position: relative;
}
.bm-doc {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
}
/* wide letterhead: name row (logo at the far end), details spread across */
.bm-hdr {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 7px 5px;
  border-bottom: 1px solid var(--ink);
}
.bm-hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.bm-bizname { font-weight: 700; font-size: 19px; line-height: 1.25; }
.bm-bizrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  font-size: 7.5px;
}
.bm-bizrow span { white-space: nowrap; }
.bm-bizrow span:nth-child(even) { justify-self: end; }
.bm-logo {
  width: 38px; height: 38px;
  flex-shrink: 0;
}
.bm-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 7px;
}
.bm-doctitle { font-weight: 700; font-size: 11px; }
.bm-copytag { font-weight: 700; font-size: 8.5px; }
.bm-recip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 7px 5px;
  border-bottom: 1px solid var(--ink);
}
.bm-rrow { display: flex; align-items: flex-end; gap: 5px; }
.bm-rlbl { font-weight: 700; font-size: 8px; white-space: nowrap; }
.bm-rfill { flex: 1; border-bottom: 1px solid var(--ink); height: 12px; }
.bm-rfill.w62 { flex: 0 0 62px; }
.bm-rfill.w40 { flex: 0 0 40px; }
.bm-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.bm-tbl th, .bm-tbl td {
  border: 1px solid var(--ink);
  padding: 0 3px;
}
.bm-tbl th {
  font-size: 7px;
  font-weight: 700;
  text-align: center;
  background: #f0efea;
  height: 17px;
}
.bm-tbl .c-qty { width: 8.6%; }
.bm-tbl .c-unit { width: 15.7%; }
.bm-tbl .c-amt { width: 19.3%; }
.bm-tr td { height: 17px; }
.bm-tf td { height: 17px; }
.bm-tbl .tf-lbl {
  border-bottom-style: hidden;
  border-inline-start-style: hidden; /* the table's right edge ends with the body */
  text-align: end;
  font-size: 7px;
  font-weight: 700;
  vertical-align: bottom;
  padding-bottom: 2px;
}
.bm-tf + .bm-tf .tf-lbl { border-top-style: hidden; }
.bm-tbl .tf-lbl em {
  display: inline-block;
  width: 28px;
  height: 8px;
  border-bottom: 1px solid var(--ink);
  margin-inline: 2px;
}
.bm-sigrow {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 5px 7px 6px;
  font-size: 8px;
  font-weight: 700;
}
.bm-sigrow span { white-space: nowrap; }
.bm-sigrow i { flex: 0 1 50%; border-bottom: 1px solid var(--ink); height: 10px; }
.bm-chips {
  position: absolute;
  bottom: -16px;
  inset-inline-start: 18px;
  display: flex;
  gap: 8px;
}

/* ---------- design studio ---------- */
.design {
  padding-block: var(--pad-major);
  background: linear-gradient(var(--tint-rose), var(--tint-rose));
}
.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.path { position: relative; }
/* "או" separator between alternative paths (they are options, not steps) */
.path:not(:last-child)::after {
  content: "או";
  position: absolute;
  top: 76px;
  inset-inline-end: calc(-1 * clamp(10px, 1.5vw, 18px) - 14px);
  z-index: 2;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.8rem;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  color: var(--ink-soft);
}
:lang(en) .path:not(:last-child)::after { content: "or"; }
:lang(es) .path:not(:last-child)::after { content: "o"; }
:lang(fr) .path:not(:last-child)::after { content: "ou"; }
:lang(pt) .path:not(:last-child)::after { content: "ou"; }
:lang(ar) .path:not(:last-child)::after { content: "أو"; }

/* Arabic: faces with Arabic glyphs; money and percentages stay one left-to-right run */
:lang(ar) {
  --font-display: "Lalezar", "Suez One", serif;
  --font-body: "Noto Sans Arabic", "Assistant", sans-serif;
  --font-label: "Noto Kufi Arabic", "Miriam Libre", monospace;
}
:lang(ar) [data-price-text],
:lang(ar) .promo-intro { unicode-bidi: isolate; }
.path h3 { font-size: 1.25rem; margin-block: 16px 6px; }
.path p { color: var(--ink-soft); font-size: 1rem; }
.path-mock { min-height: 180px; display: flex; }

/* path 1: template gallery tiles */
.dg-tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}
.dg-tile {
  position: relative;
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.08);
  padding: 12px 8px 30px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dg-tile.active { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--yellow-deep); }
.dg-tile-lines { display: flex; flex-direction: column; gap: 5px; }
.dg-tile-lines span { height: 6px; border-radius: 3px; background: var(--line); }
.dg-tile-lines span:nth-child(2) { width: 75%; }
.dg-tile-lines span:nth-child(3) { width: 55%; }
.dg-tile-name {
  position: absolute;
  bottom: 8px;
  inset-inline: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-tile-badge {
  position: absolute;
  top: -8px;
  inset-inline-start: -6px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--yellow);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 1px 7px 2px;
}

/* path 2: number placement on imported artwork */
.dg-place {
  position: relative;
  flex: 1;
  max-width: 210px;
  margin-inline: auto;
}
.dg-art {
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(32, 27, 21, 0.12);
  height: 100%;
  min-height: 170px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  opacity: 0.85;
}
.dg-art-line { height: 7px; border-radius: 4px; background: var(--line); }
.dg-art-line.w70 { width: 70%; }
.dg-art-line.w50 { width: 50%; }
.dg-art-line.w40 { width: 40%; margin-top: auto; }
.dg-art-box { flex: 1; border: 1px solid var(--line); border-radius: 3px; }
.dg-numchip, .dg-copychip {
  position: absolute;
  font-family: var(--font-label);
  font-weight: 700;
  background: var(--paper);
  border: 1.5px dashed var(--stamp);
  border-radius: 4px;
  color: var(--stamp);
  padding: 2px 9px 3px;
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.15);
}
.dg-numchip { top: 14px; inset-inline-end: -18px; font-size: 0.78rem; transform: rotate(-2deg); }
.dg-copychip { bottom: 26px; inset-inline-start: -14px; font-size: 0.75rem; transform: rotate(2deg); }

/* path 3: canvas editor */
.dg-canvas {
  flex: 1;
  display: flex;
  gap: 8px;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(32, 27, 21, 0.12);
  padding: 10px;
}
.dg-palette {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline-end: 8px;
  border-inline-end: 1px solid var(--line);
}
.dg-palette span {
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  padding: 3px 8px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: grab;
}
.dg-page {
  flex: 1;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(32,27,21,0.04) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(32,27,21,0.04) 11px 12px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dg-block { border-radius: 3px; }
.dg-letterhead { height: 20px; background: var(--pink); border: 1px solid var(--ink); }
.dg-table {
  flex: 1;
  border: 1.5px dashed var(--stamp);
  background: var(--sheet-white);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-inline: 6px;
}
.dg-table i { display: block; height: 1px; background: var(--line); }
.dg-table.selected::before, .dg-table.selected::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  background: var(--sheet-white);
  border: 1.5px solid var(--stamp);
  border-radius: 50%;
}
.dg-table.selected::before { top: -4px; inset-inline-start: -4px; }
.dg-table.selected::after { bottom: -4px; inset-inline-end: -4px; }
.dg-sig { height: 12px; width: 55%; background: var(--yellow); border: 1px solid var(--ink); margin-inline-start: auto; }

/* ---------- trust block ---------- */
.trust { padding-block: var(--pad-minor); }
.trust-inner {
  display: grid;
  justify-items: center;
  gap: 28px;
  text-align: center;
}
.trust-card {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  text-align: start;
  padding: 16px 22px;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(32, 27, 21, 0.10);
}
/* same tilted rubber-stamp frame the feature cards use */
.trust-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px; height: 44px;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 6px;
  transform: rotate(-3deg);
}
.trust-icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(3deg);
}
.trust-line {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.45;
}
.trust-vendors-lbl {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-bottom: 12px;
}
.vendor-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 10px;
}
.vendor-chips .chip {
  direction: ltr;
  unicode-bidi: embed;
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.12);
}

/* ---------- contact: a work ticket, like the product prints ---------- */
.contact { padding-block: clamp(56px, 8vw, 100px); }
.ticket {
  max-width: 620px;
  margin-inline: auto;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 7px 7px 0 var(--pink), 14px 14px 0 var(--yellow);
  text-align: center;
}
.ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.85rem;
}
.ticket-num { color: var(--stamp); }
.ticket-body { padding: clamp(26px, 5vw, 40px) clamp(20px, 5vw, 44px) clamp(26px, 5vw, 36px); }
.ticket-body .section-title { margin-bottom: 12px; }
.contact-sub { color: var(--ink-soft); font-size: 1.125rem; margin-bottom: 28px; }
/* the ticket grew into a three-step start card (sign up, download, work) */
.ticket-wide { max-width: 960px; }
.ticket-wide .contact-sub { max-width: 40em; margin-inline: auto; }
.start-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  text-align: start;
  margin-top: 10px;
}
.start-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 20px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--tint-warm);
}
/* the step number sits on the card's top edge, like the stamp on the plan card */
.start-num {
  position: absolute;
  top: -16px;
  inset-inline-start: 16px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.2);
}
.start-step h3 { font-size: 1.15rem; }
.start-step p { color: var(--ink-soft); font-size: 0.9375rem; flex: 1; }
.start-step .btn { align-self: start; margin-top: 4px; text-align: center; }
@media (max-width: 900px) {
  .start-steps { grid-template-columns: 1fr; gap: 30px; }
}
.ticket-stub {
  position: relative;
  border-top: 2px dashed var(--line);
  padding: 13px 20px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  color: var(--ink-soft);
  font-weight: 600;
}
/* punch holes where the stub tears off */
.ticket-stub::before, .ticket-stub::after {
  content: "";
  position: absolute;
  top: -9.5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
.ticket-stub::before { inset-inline-start: -9.5px; }
.ticket-stub::after { inset-inline-end: -9.5px; }
.stub-lbl { font-weight: 600; }
.stub-item { direction: ltr; unicode-bidi: embed; text-decoration: underline; text-underline-offset: 4px; }
.stub-item:hover { text-decoration-thickness: 2px; color: var(--ink); }

/* ---------- accessibility statement page ---------- */
.page-prose { padding-block: clamp(40px, 6vw, 72px); }
.page-prose .container { max-width: 760px; }
.page-prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  margin-block: 32px 10px;
}
.page-prose p { margin-bottom: 12px; }
.page-prose ul { margin: 0 0 12px; padding-inline-start: 22px; }
.page-prose li { margin-bottom: 7px; }
.page-prose a { text-underline-offset: 3px; }
.a11y-updated { margin-top: 30px; color: var(--ink-soft); font-size: 0.9375rem; }
.footer-a11y { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(48px, 7vw, 90px);
  padding-block: 28px;
  background: rgba(32, 27, 21, 0.03);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-logo { font-family: var(--font-label); font-weight: 700; color: var(--stamp); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a { text-decoration: none; font-size: 0.9375rem; }
.footer-nav a:hover { text-decoration: underline; }
.footer-copy { color: var(--ink-soft); font-size: 0.875rem; }
/* the page ends on the carbonless edge: white, pink, yellow */
.site-footer::after {
  content: "";
  display: block;
  height: 8px;
  margin-top: 26px;
  margin-bottom: -28px; /* cancel the footer's bottom padding so the edge sits flush */
  border-top: 1px solid var(--line);
  background: linear-gradient(to left,
    var(--sheet-white) 33.4%,
    var(--pink) 33.4% 66.7%,
    var(--yellow) 66.7%);
}

/* ---------- scroll reveal (visible by default; JS opts in) ---------- */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
/* gentle stagger inside grids that reveal as a row */
html.js .steps .reveal:nth-child(2),
html.js .paths .reveal:nth-child(2),
html.js .feature-grid .reveal:nth-child(3n + 2) { transition-delay: 110ms; }
html.js .steps .reveal:nth-child(3),
html.js .paths .reveal:nth-child(3),
html.js .feature-grid .reveal:nth-child(3n + 3) { transition-delay: 220ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- envelope showcase ---------- */
.envelopes {
  padding-block: var(--pad-major);
}
.envelopes-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.envelopes-copy > p { color: var(--ink-soft); max-width: 34em; }
/* the self-design flow: three numbered stops on the same dotted feed-path as .steps */
.envelopes-steps {
  list-style: none;
  margin-top: 24px;
  display: grid;
  gap: 16px;
  counter-reset: ev-step;
}
.envelopes-steps li {
  position: relative;
  padding-inline-start: 46px;
  counter-increment: ev-step;
}
.envelopes-steps li::before {
  content: counter(ev-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.2);
}
.envelopes-steps li + li::after {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  bottom: calc(100% - 2px);
  height: 18px;
  border-inline-start: 2px dotted rgba(107, 98, 87, 0.55);
}
.envelopes-steps h3 { font-size: 1.05rem; margin-bottom: 2px; }
.envelopes-steps p { color: var(--ink-soft); font-size: 0.9375rem; }
/* the steps already carry the copy, so the list is a short tail under them */
.envelopes-copy .booklet-options { grid-template-columns: 1fr; }

/* design scene: the customer's form (right in RTL) -> the same details on the envelope preview */
.envelopes-mock { display: flex; justify-content: center; }
.ev-scene {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  width: min(580px, 100%);
}
.ev-card {
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--yellow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ev-card-title {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ev-row { display: flex; flex-direction: column; gap: 4px; }
.ev-lbl { font-family: var(--font-label); font-size: 0.75rem; color: var(--ink-soft); }
.ev-toggle {
  display: flex;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 600;
}
.ev-toggle span { flex: 1; text-align: center; padding: 3px 6px; background: var(--sheet-white); white-space: nowrap; }
.ev-toggle span.active { background: var(--yellow); }
.ev-toggle-4 { font-size: 0.72rem; }
.ev-field,
.ev-file {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
.ev-field[dir="ltr"] { text-align: right; }
.ev-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 0.72rem;
  border-style: dashed;
  border-color: var(--ink-soft);
}
.ev-file .ev-logo { width: 14px; }
.ev-file b { margin-inline-start: auto; color: var(--stamp); }
.ev-price {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.ev-price strong { font-size: 0.95rem; font-weight: 700; white-space: nowrap; }
.ev-price .ev-lbl { flex: 1; min-width: 0; }
.ev-result { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* DL envelope, front side: flap edge at the top, stamp box top-left, the
   branded sender block top-right, the recipient lines in the middle */
.ev-envelope {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 2 / 1;
  background: var(--sheet-white);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  box-shadow: 6px 6px 0 var(--pink);
  overflow: hidden;
  container-type: inline-size;
}
.ev-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(to bottom, rgba(32, 27, 21, 0.08), transparent);
}
.ev-stampbox {
  position: absolute;
  top: 9%; left: 5%;
  width: 12%;
  aspect-ratio: 4 / 5;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 2px;
}
.ev-sender {
  position: absolute;
  top: 10%; right: 5%;
  width: 46%;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.ev-logo {
  flex-shrink: 0;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--stamp);
  transform: rotate(-3deg);
}
.ev-sender-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* what was typed in the form, printed: real text, not placeholder lines */
.ev-text {
  display: block;
  font-size: 0.5625rem;
  font-size: 3.4cqw;
  line-height: 1.25;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ev-text.bold { font-size: 0.625rem; font-size: 3.9cqw; font-weight: 700; color: var(--ink); }
.ev-text[dir="ltr"] { text-align: right; }
.ev-addr {
  position: absolute;
  top: 54%; right: 22%;
  width: 56%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ev-line { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--line); }
.ev-line.short { width: 55%; }
.ev-tag {
  font-family: var(--font-label);
  font-size: 0.75rem;
  padding: 3px 12px;
  background: var(--sheet-white);
  border: 1px dashed var(--ink);
  border-radius: 999px;
}
@media (max-width: 1120px) {
  .ev-scene { grid-template-columns: 1fr; justify-items: center; }
  .ev-card,
  .ev-result { width: min(320px, 100%); }
}

/* ---------- pricing, payment, ledger ---------- */
.pricing {
  padding-block: var(--pad-major);
  background: linear-gradient(var(--tint-rose), var(--tint-rose));
}
.pricing-lead {
  color: var(--ink-soft);
  max-width: 34em;
  margin-top: -18px; /* pull up under the title's bottom margin */
  margin-bottom: 32px;
}
.price-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.price-card {
  background: var(--sheet-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 3px 3px 0 rgba(32, 27, 21, 0.07);
  position: relative;
}
.price-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(to left, var(--sheet-white) 33%, var(--pink) 33% 66%, var(--yellow) 66%);
  border-bottom: 1px solid var(--line);
}
.price-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.price-card ul {
  list-style: none;
  display: grid;
  gap: 8px;
}
.price-card li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.price-card li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  font-size: 0.65rem;
  color: var(--ink);
  background: var(--yellow);
  border: 1px solid var(--ink);
  border-radius: 50%;
}
html.js .price-grid .reveal:nth-child(2n + 2) { transition-delay: 110ms; }
@media (max-width: 820px) {
  .envelopes-inner { grid-template-columns: 1fr; }
  .envelopes-mock { margin-top: 24px; }
  .price-grid { grid-template-columns: 1fr; }
  html.js .price-grid .reveal:nth-child(2n + 2) { transition-delay: 0ms; }
}

/* ---------- plans (one EasyPrinter subscription as a launch promo; prices filled by js/pricing.js) ---------- */
.plans-section { padding-block: var(--pad-major); }
/* one wide card: the offer on the start side, the all-included checklist beside it */
.promo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--sheet-white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--pink-deep);
  position: relative;
}
.promo::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(to left, var(--sheet-white) 33%, var(--pink) 33% 66%, var(--yellow) 66%);
  border-bottom: 1px solid var(--line);
}
.promo-offer {
  display: flex;
  flex-direction: column;
  padding: 34px 26px 26px;
}
/* the launch offer, stamped over the card's top edge; hidden with .is-promo when the free months end */
.promo-stamp {
  position: absolute;
  top: -17px;
  inset-inline-start: 22px;
  z-index: 1;
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stamp);
  background: var(--sheet-white);
  border: 2.5px solid var(--stamp);
  border-radius: 4px;
  padding: 4px 14px 5px;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(32, 27, 21, 0.12);
  -webkit-mask-image: radial-gradient(circle at 30% 60%, black 96%, transparent 100%);
          mask-image: radial-gradient(circle at 30% 60%, black 96%, transparent 100%);
}
/* the free months are the headline while the promo runs */
.promo-free {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.1;
  margin-bottom: 10px;
}
.promo-intro {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.promo-price {
  font-weight: 700;
  font-size: 1.125rem;
}
/* without free months the price itself is the headline */
.promo:not(.is-promo) .promo-price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.1;
}
.plan-for {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-block: 14px 22px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.plan-cta {
  margin-top: auto;
  display: grid;
  gap: 10px;
}
.plan-cta .btn { text-align: center; padding-inline: 18px; }
#plans [hidden] { display: none !important; }
.promo-all {
  padding: 30px 26px 26px;
  border-inline-start: 1px dashed var(--ink-soft);
  background: var(--tint-warm);
  border-start-end-radius: calc(var(--radius) - 2px);
  border-end-end-radius: calc(var(--radius) - 2px);
}
.promo-note {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.promo-all h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.1;
  margin-bottom: 16px;
}
.promo-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
.promo-list li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 0.9375rem;
}
.promo-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  font-size: 0.65rem;
  color: var(--ink);
  background: var(--yellow);
  border: 1px solid var(--ink);
  border-radius: 50%;
}
@media (max-width: 900px) {
  /* the offer stacks above the checklist; the dashed divider turns horizontal */
  .promo { grid-template-columns: 1fr; }
  .promo-all {
    border-inline-start: 0;
    border-top: 1px dashed var(--ink-soft);
    border-start-end-radius: 0;
    border-end-start-radius: calc(var(--radius) - 2px);
  }
}
@media (max-width: 560px) {
  .promo-list { grid-template-columns: 1fr; }
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  /* re-key the stagger so the cascade still runs along the rendered row */
  html.js .feature-grid .reveal:nth-child(3n + 2),
  html.js .feature-grid .reveal:nth-child(3n + 3) { transition-delay: 0ms; }
  html.js .feature-grid .reveal:nth-child(2n + 2) { transition-delay: 110ms; }
}
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; }
  .paper-fan { width: min(250px, 68vw); }
  /* the denser invoice: fewer table rows on small screens */
  .mock-tr:nth-child(n + 7) { display: none; }
  .steps { grid-template-columns: 1fr; max-width: 480px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booklets-inner { grid-template-columns: 1fr; }
  .sheets-inner { grid-template-columns: 1fr; }
  .sheets-mock { margin-top: 24px; }
  .bookshow-inner { grid-template-columns: 1fr; }
  .bookshow-mock { margin-top: 24px; }
  .booklet-mock { margin-top: 24px; padding-inline-end: 12px; }
  .uploadx-inner { grid-template-columns: 1fr; }
  .upload-mock { order: 2; margin-top: 8px; }
  .paths { grid-template-columns: 1fr; max-width: 480px; gap: 40px; }
  .path:not(:last-child)::after {
    top: auto;
    bottom: -36px;
    inset-inline-end: calc(50% - 16px);
  }
  .dg-place { margin-block: 0 8px; }
  .dg-numchip { inset-inline-end: -8px; }
  .dg-copychip { inset-inline-start: -6px; }
}
@media (max-width: 520px) {
  .feature-grid { grid-template-columns: 1fr; gap: 12px; }
  /* one column: the stamp sits beside the text, so six cards stay short */
  .feature-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px 16px 16px;
  }
  .feature-icon { grid-row: 1 / span 2; margin-bottom: 0; }
  /* phone: two compact cards to a row */
  .showcase-tabs { gap: 10px; }
  .showcase-tabs a { flex-basis: calc(50% - 5px); padding: 11px 12px 12px; gap: 4px; }
  .showcase-tabs strong { font-size: 0.875rem; }
  .showcase-tabs span { font-size: 0.8125rem; }
  .sl-window { grid-template-columns: 1fr; }
  /* one column: nothing reveals as a row, so nothing should trail behind */
  html.js .feature-grid .reveal:nth-child(2n + 2) { transition-delay: 0ms; }
}
/* mobile nav: five links fit the row down to the page-layout collapse. Below it
   the תפריט button opens the nav as a dropped paper sheet.
   Without JS (no html.nav-js) the links simply wrap into rows instead. */
@media (max-width: 820px) {
  .header-inner { flex-wrap: wrap; min-height: 56px; padding-block: 8px; }
  .nav-toggle { display: inline-flex; }
  /* first row: logo and menu button only (as before the language switcher);
     the switcher is the last line of the opened menu sheet */
  .nav-toggle { order: 2; }
  .site-nav { order: 3; }
  /* no menu button (no JS, accessibility pages): the switcher stays in the first row */
  .lang-switch { order: 1; margin-inline-start: auto; }
  /* in the opened sheet the menu is part of the flow: summary on top, the other languages below */
  html.nav-js .lang-switch { order: 4; width: 100%; text-align: center; padding-block: 0 12px; margin-inline-start: 0; display: none; }
  html.nav-js .site-header.nav-open .lang-switch { display: block; }
  html.nav-js .lang-menu {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  html.nav-js .lang-menu a { border-color: var(--ink); }
  .site-nav {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 4px;
    padding-block: 4px 12px;
  }
  html.nav-js .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 4px 18px;
  }
  html.nav-js .site-header.nav-open .site-nav {
    display: flex;
    animation: nav-sheet-drop 200ms ease-out;
  }
  html.nav-js .site-nav a {
    font-size: 1.0625rem;
    padding: 13px 10px;
  }
  /* perforation rule between links, from the .perf divider pattern */
  html.nav-js .site-nav a:not(.nav-cta) {
    background-image: radial-gradient(circle, rgba(107, 98, 87, 0.45) 1.1px, transparent 1.2px);
    background-size: 14px 2px;
    background-repeat: repeat-x;
    background-position: bottom right;
  }
  html.nav-js .site-nav .nav-cta {
    align-self: center;
    margin-top: 16px;
    padding: 8px 32px;
  }
}
@keyframes nav-sheet-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.nav-js .site-header.nav-open .site-nav { animation: none; }
}

/* abroad: the currency pill group in the price card, and hidden buttons stay hidden */
.btn[hidden] { display: none !important; }
.currency-switch {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.currency-switch button {
  min-height: 36px;
  padding: 4px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.currency-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper, #fff); }
.currency-switch button:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }

/* Accessibility pages of en / es / fr / pt / ar (no menu button there): seven link words are
   longer than in Hebrew / English, so the nav becomes one tidy row that fits at desktop
   widths and scrolls sideways inside itself when it cannot, at any width. The logo and the
   language menu stay in the first row; the page never scrolls sideways. Hebrew
   is not matched by these selectors. (English joined in the D3b final fixes: the English
   accessibility page scrolled sideways at 900 and 1024 px; the English index is unchanged.) */
html:is(:lang(en), :lang(es), :lang(fr), :lang(pt), :lang(ar)) .header-inner:not(:has(.nav-toggle)) .site-nav {
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 6px 6px 8px;
  margin-block: -6px -8px;
  gap: 8px 10px;
  margin-inline-start: 12px;
}
html:is(:lang(en), :lang(es), :lang(fr), :lang(pt), :lang(ar)) .header-inner:not(:has(.nav-toggle)) .site-nav a {
  flex: none;
  font-size: 0.8125rem;
}
@media (max-width: 820px) {
  html:is(:lang(en), :lang(es), :lang(fr), :lang(pt), :lang(ar)) .header-inner:not(:has(.nav-toggle)) .site-nav {
    order: 3;
    flex: 1 0 100%;
  }
}