@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;500;600;700&family=Fredoka:wght@400;500;600&family=Rubik:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════
   RayClock design tokens — the "Organic" system: warm sand
   ground, terracotta accent, sage second accent, rounded
   everything. Shared with the web app shell.
   Source: design_handoff_rayclock_landing_organic/README.md (in git history; removed from the tree 2026-10-02)
   Light-only by design; there is no dark theme.
   ═══════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── Organic roles ─────────────────────────────────────── */
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps, one shared lightness scale across all three roles. */
  --n-100: #f9f4ed;
  --n-200: #eee7db;
  --n-300: #dcd3c4;
  --n-400: #c0b6a5;
  --n-500: #a19786;
  --n-600: #82796a;
  --n-700: #645c50;
  --n-800: #474238;
  --n-900: #2e2b25;

  --a-100: #fff2eb;
  --a-200: #ffe1d0;
  --a-300: #ffc6a5;
  --a-400: #f6a06b;
  --a-500: #d67f48;
  --a-600: #b2622d;
  --a-700: #8c491a;
  --a-800: #643312;
  --a-900: #402310;

  --s-100: #f0fae1;
  --s-200: #e1eecc;
  --s-300: #ccdbb2;
  --s-400: #aebf92;
  --s-500: #8fa073;
  --s-600: #728157;
  --s-700: #56633f;
  --s-800: #3d472b;
  --s-900: #272e1b;

  /* ── Surfaces ──────────────────────────────────────────── */
  --rc-ground: var(--color-bg);
  --rc-surface: var(--color-surface);
  /* "Light" surfaces are neutral-100 — there is no pure white anywhere. */
  --rc-surface-subtle: var(--n-100);
  --rc-surface-hover: color-mix(in srgb, var(--color-text) 7%, transparent);
  --rc-chip: var(--n-200);

  /* ── Text ramp ─────────────────────────────────────────── */
  --rc-ink: var(--color-text);
  --rc-ink-2: var(--n-800);
  --rc-body: var(--n-800);
  --rc-tertiary: var(--n-700);
  --rc-quiet: var(--n-700);
  --rc-faint: var(--n-600);
  --rc-faintest: var(--n-500);
  --rc-bullet: var(--s-400);

  /* ── Lines ─────────────────────────────────────────────── */
  --rc-hairline: var(--color-divider);
  --rc-border-card: var(--color-divider);
  --rc-border-input: var(--color-divider);
  --rc-rule: color-mix(in srgb, var(--color-text) 10%, transparent);
  --rc-rule-light: color-mix(in srgb, var(--color-text) 7%, transparent);

  /* ── Accent ────────────────────────────────────────────── */
  --rc-accent: var(--color-accent);
  --rc-accent-hover: var(--a-600);
  --rc-accent-active: var(--a-700);
  --rc-tint: var(--a-100);
  --rc-tint-border: var(--a-200);
  --rc-on-tint: var(--a-700);
  --rc-on-tint-deep: var(--a-800);
  --rc-selection: color-mix(in srgb, var(--color-accent) 30%, transparent);

  /* ── Sage voice ────────────────────────────────────────── */
  --rc-sage-tint: var(--s-100);
  --rc-on-sage: var(--s-800);
  --rc-on-sage-deep: var(--s-900);

  /* ── Dark panel (sage-900, not black) ──────────────────── */
  --rc-dark: var(--s-900);
  --rc-dark-fg: var(--color-bg);
  --rc-dark-body: var(--s-200);
  --rc-dark-border: color-mix(in srgb, #f5ead8 35%, transparent);
  --rc-dark-hover: color-mix(in srgb, #f5ead8 10%, transparent);
  --rc-dark-blob: var(--s-800);

  /* ── Status ────────────────────────────────────────────── */
  --rc-attention: var(--a-600);
  --rc-pill-signed-bg: var(--s-100);
  --rc-pill-signed-fg: var(--s-800);
  --rc-pill-wait-bg: var(--a-100);
  --rc-pill-wait-fg: var(--a-800);
  --rc-pill-submitted-bg: var(--n-100);
  --rc-pill-submitted-fg: var(--n-800);
  --rc-pill-open-bg: var(--a-100);
  --rc-pill-open-fg: var(--a-800);

  /* ── Shadows — only floating mock cards lift; content cards are flat. ── */
  --rc-shadow-sm: 0 1px 2px rgba(46, 43, 37, 0.14);
  --rc-shadow-md: 0 3px 10px rgba(46, 43, 37, 0.16);
  --rc-shadow-lg: 0 12px 32px rgba(46, 43, 37, 0.22);
  --rc-shadow-flat: none;
  --rc-shadow-btn: var(--rc-shadow-sm);
  --rc-shadow-panel: var(--rc-shadow-lg);
  --rc-shadow-float: var(--rc-shadow-lg);
  --rc-shadow-tilt: var(--rc-shadow-lg);
  --rc-shadow-dark: none;
  --rc-shadow-cta: none;

  /* ── Radii — the frame is soft; small controls go pill. ── */
  --rc-r-sm: 8px;
  --rc-r-md: 16px;
  --rc-r-card: 28px;
  --rc-r-panel: 40px;
  --rc-r-pill: 999px;

  /* ── Type ──────────────────────────────────────────────── */
  /* Fredoka 600 carries every heading (v2 handoff). Caprasimo has no
     Hebrew glyphs and is kept only for the Latin "RayClock" wordmark;
     leading with it put Caprasimo digits inside Hebrew headings. Rubik
     sits under Figtree for body copy. */
  --rc-display: "Fredoka", "Caprasimo", system-ui, sans-serif;
  /* Small mixed-script UI text (buttons, tabs, pills) skips Caprasimo:
     its numerals carry a long crossbar that reads as a strikethrough next
     to Hebrew — "ל-14 יום" looked struck out. Fredoka is the same display
     voice and already renders every Hebrew glyph in the stack. */
  --rc-display-ui: "Fredoka", "Figtree", system-ui, sans-serif;
  --rc-font: "Figtree", "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --rc-num: var(--rc-font);

  /* ── Frame ─────────────────────────────────────────────── */
  --rc-column: 1360px;
  --rc-rhythm: 96px;

  /* Fluid frame of the v2 marketing pages: side padding inside the
     1360px column, outer gutter around the 1600px full-bleed panels,
     and the space between sections. */
  --v-pad: clamp(20px, 4vw, 56px);
  --v-gutter: clamp(12px, 2vw, 32px);
  --v-rhythm: clamp(96px, 11vw, 160px);
  --v-display: "Fredoka", "Caprasimo", system-ui, sans-serif;

  /* ── Legacy aliases ──────────────────────────────────────
     pricing/trial/demo/blog/legal pages still reference these
     names; pointing them at the new palette re-themes those
     pages without touching their markup. */
  --bg: var(--rc-ground);
  --bg-alt: var(--rc-surface-subtle);
  --fg: var(--rc-ink);
  --muted: var(--rc-body);
  --accent: var(--rc-accent);
  --accent-2: var(--color-accent-2);
  --violet: var(--rc-accent-hover);
  --accent-fg: var(--color-bg);
  --tan: var(--rc-tint);
  --btn-bg: var(--rc-accent);
  --btn-bg-hover: var(--rc-accent-hover);
  --btn-fg: var(--color-bg);
  --border: var(--rc-hairline);
  --card-bg: var(--rc-surface);
  --card-shadow: none;
  --card-shadow-hover: none;
  --grid-line: var(--rc-rule);
  --success-bg: var(--rc-sage-tint);
  --success-fg: var(--rc-on-sage);
  --radius: var(--rc-r-card);
  --max-width: var(--rc-column);
  --mono: var(--rc-num);
  --tint-lavender: var(--rc-surface-subtle);
  --tint-blue: var(--rc-surface-subtle);
  --tint-cream: var(--rc-surface-subtle);
  --tint-mint: var(--rc-sage-tint);
  --tint-peach: var(--rc-tint);
  --tint-ink: var(--rc-ink);
  --tint-border: var(--rc-hairline);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* No rubber-band past the footer (or above the header) on phones. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--rc-ground);
  color: var(--rc-ink);
  font-family: var(--rc-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--rc-on-tint); text-decoration: none; }
a:hover { color: var(--rc-on-tint-deep); }

img { max-width: 100%; }

*:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; }
::selection { background: var(--rc-selection); }

/* The display face carries headings and the big numbers, never body copy. */
h1, h2, h3, h4 {
  font-family: var(--rc-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Same 1360px column and fluid side padding as the nav and the v2 pages,
   so every page's content lines up under the header. */
.container {
  max-width: var(--rc-column);
  margin: 0 auto;
  padding: 0 var(--v-pad);
}

/* Numerals never jitter: tabular figures wherever digits carry meaning. */
.num { font-variant-numeric: tabular-nums; }

/* Decorative blobs. Always partly clipped by their section, which is why
   every section that carries one sets overflow: hidden. */

/* ═══ Sticky header ════════════════════════════════════════
   Shared by every page. Source: design_handoff_rayclock_marketing_v2 (in git history; removed from the tree 2026-10-02),
   "Site Nav". Below 1000px the menu folds into a drawer (nav.js). */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--rc-font);
}
.nav-inner {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px var(--v-pad);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Caprasimo", serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--rc-ink);
  flex: none;
}
.brand:hover { color: var(--rc-ink); }
.brand-logo { width: 34px; height: 34px; display: block; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--rc-ink);
  cursor: pointer;
  border-radius: var(--rc-r-pill);
}
.nav-toggle svg { display: block; }

.nav-menu { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex: 1; }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}
.nav-links a { color: var(--rc-ink); }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--a-700); }
.nav-ctas { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-login,
.nav-cta {
  display: inline-flex;
  align-items: center;
  border-radius: var(--rc-r-pill);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-nav .nav-login { padding: 10px 18px; color: var(--a-700); }
.site-nav .nav-login:hover { color: var(--a-800); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.site-nav .nav-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 40px; height: 40px; border-radius: var(--rc-r-pill);
  color: #1a8f47; font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background-color 0.2s ease;
}
.site-nav .nav-wa:hover { color: #157a3c; background: color-mix(in srgb, #25d366 14%, transparent); }
.site-nav .nav-wa svg { flex: none; }
.site-nav .nav-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 40px; height: 40px; border-radius: var(--rc-r-pill);
  color: var(--a-700); font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background-color 0.2s ease;
}
.site-nav .nav-tel:hover { color: var(--a-800); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.site-nav .nav-tel svg { flex: none; }
/* Icon only in the desktop bar; the drawer below shows the label. */
.nav-wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-nav .nav-cta { padding: 12px 22px; background: var(--color-accent); color: var(--color-bg); }
.site-nav .nav-cta:hover { background: var(--a-600); color: var(--color-bg); }

/* Skip link: off-screen until a keyboard user tabs onto it (first stop on every page). */
.skip-link {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--rc-r-pill);
  background: var(--rc-accent);
  color: var(--color-bg);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--color-bg); }

/* Language switcher: three links to this same page in he / en / ru. The markup
   is stamped into every page by scripts/landing-i18n.mjs. */
.lang-switch { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; }
.lang-switch a {
  min-width: 34px;
  padding: 8px 8px;
  border-radius: var(--rc-r-pill);
  text-align: center;
  color: color-mix(in srgb, var(--rc-ink) 70%, transparent);
}
.lang-switch a:hover { color: var(--a-800); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.lang-switch a[aria-current="true"] { color: var(--a-700); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }

/* Fredoka and Caprasimo have no Cyrillic, so Russian headings would drop to
   whatever system-ui is. Rubik (already loaded for body copy) covers it. */
html:lang(ru) {
  --rc-display: "Rubik", system-ui, sans-serif;
  --rc-display-ui: "Rubik", system-ui, sans-serif;
  --v-display: "Rubik", system-ui, sans-serif;
}

/* ═══ Buttons ══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rc-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  padding: 0 22px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--rc-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.btn-primary {
  background: var(--rc-accent);
  color: var(--color-bg);
  box-shadow: var(--rc-shadow-md);
}
.btn-primary:hover { background: var(--rc-accent-hover); color: var(--color-bg); }
.btn-primary:active { background: var(--rc-accent-active); }
.btn-secondary {
  background: transparent;
  border-color: var(--color-divider);
  color: var(--rc-ink);
}
.btn-secondary:hover { background: var(--rc-surface-hover); color: var(--rc-ink); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-lg { height: 58px; padding: 0 28px; font-size: 17px; }

.cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ═══ Tags ═════════════════════════════════════════════════
   accent-2 = present / ok · accent = needs attention · neutral = quiet.
   Only the modifiers carry the shape, so the bare `.tag` used by the blog
   and article eyebrows keeps its own look. */

/* ═══ Hero ═════════════════════════════════════════════════ */
/* Secondary pages (calculators, guides index, 404) keep a short,
   single-column hero, sized like the v2 page heroes. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 88px) 0 40px;
  text-align: start;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(42px, 5.6vw, 84px);
  line-height: 1.04;
}
.hero h1:first-child { margin-top: 0; }
.hero p.lead {
  margin: 22px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  max-width: 40ch;
}
.hero .cta-row { margin-top: 28px; }

/* ═══ Sections ═════════════════════════════════════════════ */
/* No alternating bands — whitespace alone separates the sections. */
/* :where() keeps these at their old specificity while leaving the v2
   pages, which space their sections with rc- classes, alone. */
:where(body:not(.v2)) section { padding: var(--rc-rhythm) 0 0; }
:where(body:not(.v2)) section:last-of-type { padding-bottom: 0; }
/* The block directly under a page hero is part of that first screen, so it
   takes the shorter 56px opener rather than the full section rhythm. */
.hero + section { padding-top: 56px; }
.section-alt { background: transparent; }

.section-header { max-width: none; margin: 0 0 40px; text-align: start; }
/* Eyebrows and article tags are the v2 kicker: a sage pill. */
.eyebrow,
.doc-side .tag,
.article .tag {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--rc-r-pill);
  background: var(--s-200);
  color: var(--s-800);
  font-size: 13px;
  font-weight: 600;
}
.section-header h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.06;
  max-width: 24ch;
}
.section-header p {
  margin: 15px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--rc-body);
  max-width: 60ch;
}
/* The second line of a heading, in the terracotta accent. */

/* ═══ Cards ════════════════════════════════════════════════ */
/* Content cards are flat fills — no border, no shadow. */
.card {
  background: var(--rc-surface);
  border-radius: 32px;
  padding: 32px;
  transition: background-color 150ms ease;
}
.card h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.15; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--rc-body); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* Numbered step marker ("שלב 01"), a pill on amendment-24's checklist. */
.method-index {
  display: inline-flex;
  align-items: center;
  font-family: var(--rc-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--a-700);
  background: var(--a-100);
  padding: 5px 13px;
  border-radius: var(--rc-r-pill);
  line-height: 1.3;
  white-space: nowrap;
}

/* ═══ Tinted note — the sage voice ═════════════════════════ */
.callout {
  margin: 28px 0 0;
  background: var(--s-200);
  border-radius: 28px;
  padding: 28px 32px;
}
.callout h4 {
  margin: 0 0 8px;
  font-family: var(--rc-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--rc-on-sage-deep);
}
.callout p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--rc-on-sage); max-width: 88ch; }
.callout .cta-row { margin-top: 20px; }

/* ═══ Closing CTA — the v2 terracotta banner ═══════════════ */
.cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  border-radius: 44px;
  padding: clamp(56px, 7vw, 112px) clamp(28px, 5vw, 80px);
}
/* One decorative circle bleeding off the end edge. It is positioned, so
   every direct child has to be lifted above it; some pages put plain
   blocks straight into the panel. */
.cta-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--a-400);
  opacity: 0.6;
  left: -10%;
  top: -40%;
  pointer-events: none;
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.04;
  color: var(--color-bg);
}
.cta-panel p {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-bg);
  max-width: 52ch;
}
.cta-panel p a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }
.cta-panel .cta-row { gap: 12px; margin-top: 32px; }
.cta-panel .btn { height: 58px; padding: 0 28px; font-size: 17px; }
.cta-panel .btn-primary { background: var(--color-bg); color: var(--rc-ink); }
.cta-panel .btn-primary:hover { background: var(--n-100); color: var(--rc-ink); }
.cta-panel .btn-secondary {
  background: transparent;
  border: 2px solid var(--color-bg);
  color: var(--color-bg);
}
.cta-panel .btn-secondary:hover { background: color-mix(in srgb, var(--color-bg) 14%, transparent); color: var(--color-bg); }

/* ═══ Volume ladder table (job-percentage calculator) ══════ */
.ladder-table { table-layout: fixed; font-size: 13.5px; }
.ladder-table th,
.ladder-table td { padding: 8px 10px; }
.ladder-table tbody tr.is-current { background: var(--color-bg); }
.ladder-table tbody tr.is-current th,
.ladder-table tbody tr.is-current td {
  color: var(--rc-ink);
  font-weight: 600;
}
/* ═══ Blog ═════════════════════════════════════════════════ */
.blog-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
/* The link card: the whole card is the anchor. Guide cards open with a
   washed photo that bleeds to the card's edges; calculator cards have none. */
.blog-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  background: var(--n-100);
  overflow: hidden;
  transition: background-color 150ms ease;
}
.blog-card:hover { color: inherit; background: var(--a-100); }
.blog-card-photo {
  display: block;
  margin: -32px -32px 24px;
  aspect-ratio: 16 / 10;
  width: calc(100% + 64px);
  height: auto;
  max-width: none;
  object-fit: cover;
  filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.blog-card:hover .blog-card-photo { transform: scale(1.03); }
.blog-card .tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 14px;
  margin-bottom: 14px;
  border-radius: var(--rc-r-pill);
  background: var(--s-200);
  color: var(--s-800);
  font-size: 13px;
  font-weight: 600;
}
.blog-card h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; }
.blog-card p { font-size: 15px; line-height: 1.55; color: var(--rc-body); }

/* ═══ Text pages (legal + blog articles) ═══════════════════
   Title, date and a sticky table of contents at the start; the prose at
   the end. The TOC is generated at build time and scroll-spied by nav.js. */
.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
}
/* Grid and flex children default to min-width:auto, which would let the
   TOC's widest link set the column width instead of letting it scroll. */
.doc-grid > * { min-width: 0; }
.doc-side { position: sticky; top: 96px; min-width: 0; }
.doc-side h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.06;
}
.doc-side .tag { margin-bottom: 16px; }
.doc-updated,
.doc-side .meta { margin: 0; font-size: 15px; color: var(--rc-faint); }
.doc-toc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 28px;
}
.doc-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: var(--rc-r-pill);
  font-size: 14px;
  line-height: 1.4;
  color: var(--rc-body);
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-toc a:hover { background: var(--rc-surface); color: var(--rc-ink); }
.doc-toc a.is-current {
  background: var(--rc-surface);
  color: var(--rc-ink);
  font-weight: 500;
}
.doc-toc-num {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--rc-accent);
}

.article { max-width: 68ch; }
.article .tag { margin-bottom: 16px; }
.article h1 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.06;
  margin: 0 0 12px;
}
.article .meta { color: var(--rc-faint); font-size: 15px; margin-bottom: 40px; }
.article .lead { color: var(--rc-body); font-size: 20px; line-height: 1.6; }
.article h2 { margin: 44px 0 12px; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; }
.article h3 { font-size: 22px; margin: 28px 0 8px; }
/* Opening photo of a guide: the same washed, rounded frame as the v2 pages. */
.doc-photo {
  margin: 0 0 32px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--s-200);
  aspect-ratio: 16 / 9;
}
.doc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}
.article p, .article ul, .article ol { color: var(--rc-body); font-size: 17px; line-height: 1.7; }
.article a { color: var(--rc-on-tint); text-decoration: underline; text-underline-offset: 3px; }
/* Side-by-side comparison in a guide; scrolls sideways on a phone. */
.compare-wrap { overflow-x: auto; margin: 24px 0 32px; }
.compare-wrap:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 4px; }
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.compare-table th,
.compare-table td {
  text-align: start;
  vertical-align: top;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rc-body);
  font-weight: 400;
  border-bottom: 1px solid var(--rc-rule-light);
}
.compare-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-faint);
  border-bottom: 1px solid var(--rc-rule);
}
.compare-table tbody th { font-weight: 600; color: var(--rc-ink); }

/* ═══ Calculators ══════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.calc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  max-width: 68rem;
  margin: 0 auto;
  align-items: start;
}
.calc-card,
.calc-result {
  background: var(--n-100);
  border-radius: 40px;
  padding: clamp(28px, 3vw, 40px);
}
.calc-card { background: var(--color-surface); box-shadow: var(--rc-shadow-md); }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 18px;
}
.calc-field { display: flex; flex-direction: column; }
.calc-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--rc-ink);
  margin-bottom: 7px;
}
.calc-field input,
.calc-field select {
  font: inherit;
  font-size: 16px;
  min-height: 46px;
  color: var(--rc-ink);
  caret-color: var(--rc-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--rc-r-pill);
  padding: 10px 16px;
  width: 100%;
}
.calc-field input:hover,
.calc-field select:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.calc-field input:focus,
.calc-field select:focus {
  outline: 2px solid var(--rc-accent);
  outline-offset: 0;
  border-color: var(--rc-accent);
}
.calc-hint { font-size: 12px; color: var(--rc-faint); margin-top: 6px; }
.calc-error {
  margin: 18px 0 0;
  color: var(--rc-on-tint);
  font-size: 13.5px;
}
/* Result tiles: the headline figure, then the accent one beside it. */
.calc-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 12px;
  padding-bottom: 0;
  margin-bottom: 22px;
  border-bottom: 0;
}
.calc-summary-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--rc-surface);
  border-radius: var(--rc-r-card);
  padding: 22px 24px;
}
.calc-summary-item:first-child { background: var(--s-200); }
.calc-summary-item:nth-child(2) { background: var(--a-100); }
.calc-summary-item:nth-child(2) .calc-summary-value { color: var(--a-900); }
.calc-summary-label { font-size: 13px; color: var(--rc-tertiary); }
.calc-summary-value {
  font-family: var(--rc-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--rc-ink);
}
.calc-table { width: 100%; border-collapse: collapse; }
.calc-table th,
.calc-table td {
  text-align: start;
  padding: 10px 0;
  font-size: 14.5px;
  color: var(--rc-body);
  font-weight: 400;
  border-bottom: 1px solid var(--rc-rule-light);
}
.calc-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rc-faint);
  border-bottom: 1px solid var(--rc-rule);
}
.calc-table tbody th { font-weight: 500; color: var(--rc-ink); }
.calc-table tfoot th,
.calc-table tfoot td {
  border-top: 1px solid var(--rc-rule);
  border-bottom: 0;
  font-weight: 600;
  color: var(--rc-ink);
}
.calc-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rc-faint);
}
.calc-disclaimer {
  max-width: 100ch;
  margin: 22px auto 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--rc-faint);
}

/* Employee-count slider. Held at direction: ltr even though the page is RTL —
   a numeric scale reads low-to-high left-to-right in Hebrew too, and it keeps
   the track fill, the thumb and the arrow keys agreeing with each other
   (browsers mirror the range control in an RTL context, background included).
   --fill is the filled fraction, set from JS. */
.price-range {
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--rc-accent);
  direction: ltr;
  width: 100%;
  height: 6px;
  margin: 22px 0 8px;
  border-radius: var(--rc-r-pill);
  background: linear-gradient(
    to right,
    var(--rc-accent) var(--fill, 0%),
    var(--n-300) var(--fill, 0%)
  );
  cursor: pointer;
}
.price-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--rc-accent);
  box-shadow: var(--rc-shadow-sm);
  cursor: pointer;
}
.price-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--rc-accent);
  box-shadow: var(--rc-shadow-sm);
  cursor: pointer;
}
.price-range:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: 4px;
}

@media (max-width: 860px) {
  .calc-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calc-card,
  .calc-result { padding: 26px 22px; }
  .calc-summary-value { font-size: 34px; }
}

/* ═══ Footer ═══════════════════════════════════════════════ */
/* Shared by every page. Source: design_handoff_rayclock_marketing_v2 (in git history; removed from the tree 2026-10-02),
   "Site Footer" — wordmark, product links, © line. A quieter second row
   carries the guides, calculators and legal links the design leaves out. */
.site-footer {
  margin-top: 112px;
  font-family: var(--rc-font);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.v2 .site-footer { margin-top: 0; }
.footer-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 40px var(--v-pad) 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer-brand {
  font-family: "Caprasimo", serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--rc-ink);
}
.site-footer .footer-brand:hover { color: var(--rc-ink); }
.footer-links,
.footer-sub { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.site-footer .footer-links a,
.site-footer .footer-sub a,
.site-footer .footer-meta a { color: inherit; }
.site-footer .footer-links a:hover,
.site-footer .footer-sub a:hover,
.site-footer .footer-meta a:hover { color: var(--a-700); }
.footer-sub {
  flex-basis: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}
/* Legacy footer shapes still used by secondary pages. */

/* ═══ Scroll-reveal ════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════
   Responsive. Not part of the approved desktop design — built
   to the handoff's stated intent and flagged for review.
   ═══════════════════════════════════════════════════════════ */

/* Below 1024px the hero stacks: text first, mock after, blobs off. */
@media (max-width: 1024px) {
  .hero p.lead { max-width: 56ch; }
  .calc-wrap { grid-template-columns: 1fr; }

  /* The feature hero's card moves under the copy and the circle goes. */

  /* Sign-up pages stack: pitch, then form. */

  /* The sticky TOC becomes a horizontal chip row above the article. */
  .doc-grid { grid-template-columns: 1fr; gap: 32px; }
  .doc-side { position: static; }
  .doc-toc {
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    gap: 8px;
    margin-top: 24px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  /* Chips keep a fill so the row reads as controls; the current one stays
     the stronger surface tone. */
  .doc-toc a { flex: none; max-width: 22ch; white-space: nowrap; background: var(--n-100); }
  .doc-toc a span:not(.doc-toc-num) { overflow: hidden; text-overflow: ellipsis; }
  .doc-toc a.is-current { background: var(--rc-surface); }
}

/* Desktop bar: the accessibility button sits before the language switcher,
   so the header is tightened a little to keep the English labels on one line. */
@media (min-width: 1201px) {
  .a11y-bar { margin-inline-end: 4px; }
  .a11y-toggle { width: 36px; height: 36px; }
  .nav-ctas { gap: 4px; }
  .site-nav .nav-login { padding: 10px 12px; }
}
@media (min-width: 1361px) {
  .nav-inner, .nav-menu { gap: 28px; }
  .nav-links { gap: 22px; }
}

/* The language switcher and the longer English/Russian labels need the room:
   tighter spacing on mid-size screens, and the drawer a little earlier. */
@media (max-width: 1360px) {
  .nav-inner, .nav-menu { gap: 20px; }
  .nav-links { gap: 16px; font-size: 14px; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  /* In the drawer: a full-width button like Log in, panel opening inline. */
  .site-nav .a11y-toggle { width: 100%; height: auto; gap: 8px; padding: 13px 22px; border-radius: var(--rc-r-pill); font: inherit; font-size: 16px; font-weight: 600; }
  .site-nav .a11y-label { display: inline; }
  .site-nav .a11y-panel { position: static; width: auto; max-width: none; margin-top: 10px; box-shadow: none; border: 1px solid var(--color-divider); }
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline: var(--v-gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px;
    background: var(--color-surface);
    border-radius: var(--rc-r-card);
    box-shadow: var(--rc-shadow-lg);
  }
  .nav-menu.is-open { display: flex; }
  /* The header is sticky, so a tall drawer (e.g. with the accessibility panel
     open) scrolls inside itself rather than running off the screen. */
  .nav-menu { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-links { flex-direction: column; gap: 4px; font-size: 18px; }
  .nav-links a { padding: 8px 4px; }
  .nav-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .nav-login, .nav-cta { justify-content: center; padding: 14px 22px; font-size: 16px; }
  .nav-login { border: 1px solid var(--color-divider); }
  .site-nav .nav-wa, .site-nav .nav-tel { width: auto; height: auto; padding: 13px 22px; font-size: 16px; border: 1px solid var(--color-divider); }
  .nav-wa-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .lang-switch { justify-content: center; font-size: 15px; }
  .lang-switch a { padding: 10px 14px; }
}

@media (max-width: 768px) {
  :root { --rc-rhythm: 64px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .hero p.lead { font-size: 17.5px; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-row .btn { width: 100%; }
  .cta-panel .cta-row { align-items: stretch; }
  .section-header p { font-size: 17px; }
  .grid, .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .cta-panel { border-radius: 32px; }
  .card { padding: 24px 22px; }
  .blog-card-photo { margin: -24px -22px 20px; width: calc(100% + 44px); }
  .doc-photo { border-radius: 24px; }
  .site-footer { margin-top: 72px; }
  .v2 .site-footer { margin-top: 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { gap: 14px 20px; }
}

/* ═══════════════════════════════════════════════════════════
   v2 marketing pages — image-led, Fredoka display, big rounded
   panels. Source: design_handoff_rayclock_marketing_v2/README.md (in git history; removed from the tree 2026-10-02).
   A page opts in with <body class="v2">; everything below is
   scoped to the rc- prefix so the guides, calculators and legal
   pages keep their own look.
   ═══════════════════════════════════════════════════════════ */
body.v2 { text-wrap: pretty; overflow-x: clip; }
.v2 a { color: var(--rc-ink); }
.v2 a:hover { color: var(--a-700); }
.v2 :is(h1, h2, h3) {
  font-family: var(--v-display);
  font-weight: 600;
  letter-spacing: normal;
  margin: 0;
}
.v2 p { margin: 0; }

/* ── Frame ─────────────────────────────────────────────── */
.rc-wrap { max-width: 1360px; margin-inline: auto; padding-inline: var(--v-pad); }
.rc-sec { padding-top: var(--v-rhythm); }
.rc-bleed { padding-inline: var(--v-gutter); }
.rc-panel {
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  border-radius: 44px;
  overflow: hidden;
}
.rc-box { position: relative; border-radius: 44px; overflow: hidden; }
.rc-grid {
  display: grid;
  gap: var(--gap, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr));
}
.rc-split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 440px)), 1fr));
  align-items: center;
}
.rc-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap, 20px); }
.rc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rc-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 36px;
}

/* ── Fills. Dark fills switch the text to the ground colour. ── */
.rc-fill-bg { background: var(--color-bg); }
.rc-fill-surface { background: var(--color-surface); }
.rc-fill-a200 { background: var(--a-200); }
.rc-fill-a300 { background: var(--a-300); }
.rc-fill-s200 { background: var(--s-200); }
.rc-fill-s300 { background: var(--s-300); }
.rc-fill-accent,
.rc-fill-ink,
.rc-fill-s600,
.rc-fill-s800 { color: var(--color-bg); }
.rc-fill-accent { background: var(--color-accent); }
.rc-fill-ink { background: var(--rc-ink); }
.rc-fill-s600 { background: var(--s-600); }
.rc-fill-s800 { background: var(--s-800); }
.rc-fill-accent :is(h1, h2, h3), .rc-fill-s800 :is(h1, h2, h3) { color: var(--color-bg); }

/* ── Type ──────────────────────────────────────────────── */
.rc-h1 { font-size: clamp(42px, 6vw, 96px); line-height: 1.02; letter-spacing: -0.01em; }
.rc-h1--sm { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.04; }
.rc-h1--lg { font-size: clamp(42px, 6.4vw, 104px); line-height: 1; }
.rc-h1--xl { font-size: clamp(46px, 7vw, 112px); line-height: 1; }
.rc-h1--home { font-size: clamp(48px, 7.6vw, 120px); }
.rc-h2 { font-size: clamp(32px, 4vw, 60px); line-height: 1.06; }
/* Long Russian words (e.g. "распределительном") are wider than a phone at
   display sizes: let headings hyphenate rather than push the page sideways. */
.rc-h1, .rc-h2 { overflow-wrap: anywhere; hyphens: auto; }
.rc-h2--lg { font-size: clamp(36px, 4.8vw, 72px); line-height: 1.04; }
.rc-h2--md { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; }
.rc-h2--sm { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
.rc-h3 { font-size: 24px; line-height: 1.15; }
.rc-h3--lg { font-size: 26px; }
.rc-ch11 { max-width: 11ch; }
.rc-ch12 { max-width: 12ch; }
.rc-ch13 { max-width: 13ch; }
.rc-ch14 { max-width: 14ch; }
.rc-ch16 { max-width: 16ch; }
.rc-accent-text { color: var(--color-accent); }
.rc-lead {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  max-width: 32ch;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.rc-lead--sm { font-size: clamp(17px, 1.4vw, 20px); max-width: 34ch; }
.rc-statement {
  font-family: var(--v-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.3;
  max-width: 26ch;
}
.rc-body { font-size: 16px; line-height: 1.6; max-width: 40ch; }
.rc-small { font-size: 15px; line-height: 1.55; }
.rc-meta { font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.rc-fine { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.rc-label { font-size: 13px; font-weight: 700; color: var(--s-800); }
.rc-kicker {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: var(--rc-r-pill);
  background: var(--s-200);
  color: var(--s-800);
  font-size: 14px;
  font-weight: 600;
}
.rc-kicker--cream { background: var(--color-bg); color: var(--rc-ink); }

/* ── Buttons. Always the body face, so numerals in Hebrew
      labels ("ל-14 יום") match the text around them. ── */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  border: 2px solid transparent;
  border-radius: var(--rc-r-pill);
  font-family: var(--rc-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.v2 .rc-btn--primary,
.rc-btn--primary { background: var(--color-accent); color: var(--color-bg); box-shadow: var(--rc-shadow-md); }
.v2 .rc-btn--primary:hover,
.rc-btn--primary:hover { background: var(--a-600); color: var(--color-bg); }
.rc-btn--primary:active { background: var(--a-700); }
.rc-btn--secondary { border-width: 1px; border-color: var(--color-divider); }
.v2 .rc-btn--secondary:hover { background: var(--rc-surface-hover); color: var(--rc-ink); }
.v2 .rc-btn--cream { background: var(--color-bg); color: var(--rc-ink); box-shadow: var(--rc-shadow-md); }
.v2 .rc-btn--cream:hover { background: var(--n-100); color: var(--rc-ink); }
.v2 .rc-btn--outline-light { border-color: var(--color-bg); color: var(--color-bg); }
.v2 .rc-btn--outline-light:hover { background: color-mix(in srgb, var(--color-bg) 14%, transparent); color: var(--color-bg); }
.rc-btn--sm { padding: 14px 22px; font-size: 15px; }
.rc-btn--block { display: flex; width: 100%; justify-content: space-between; }
.rc-btn--icon { width: 52px; height: 52px; padding: 0; }
.rc-btn:disabled { opacity: 0.6; cursor: progress; }

/* ── Pills and chips ───────────────────────────────────── */
.rc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  color: var(--rc-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.rc-pill--float { box-shadow: var(--rc-shadow-md); }
.rc-pill--surface { background: var(--color-surface); }
.rc-pill--glass { background: color-mix(in srgb, var(--color-bg) 12%, transparent); color: inherit; }
.rc-pill--lg { padding: 14px 22px; font-size: 16px; }

/* ── Photography. Every photo sits in a rounded box under the
      Organic "washed" filter so stock shots read as one set. ── */
.rc-photo { position: relative; overflow: hidden; }
.rc-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A long button or pill label may not fit a phone screen on one line; let it wrap
   rather than push the page sideways. */
@media (max-width: 480px) {
  .rc-btn, .rc-pill { max-width: 100%; white-space: normal; }
  .rc-btn { text-align: center; }
}

/* Product screenshots in a fixed-height photo box: "cover" cut the screenshot's
   sides off wherever the box's proportions differed from the image's (badly on
   phones). Show the whole image at its own aspect ratio instead. */
.rc-shot-fit { min-height: 0 !important; }
.rc-shot-fit .rc-cover { position: static; height: auto; }
/* Product pages: an app screenshot inset in its tinted box, so the box’s corners never cut the screen. */
.product-shot { padding: clamp(12px, 2vw, 22px); }
.product-shot .rc-cover { border-radius: 18px; }
.rc-washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }

/* Photo tile with a cream caption card along the bottom. */
.rc-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; }
.rc-tile-cap {
  position: absolute;
  inset-inline: 16px;
  bottom: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  background: var(--color-bg);
  color: var(--rc-ink);
  box-shadow: var(--rc-shadow-md);
  font-size: 14px;
}
.rc-tile-cap strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--v-display);
  font-weight: 600;
  font-size: 20px;
}
.rc-badge {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  padding: 8px 14px;
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  font-size: 13px;
  font-weight: 600;
}
.rc-badge--round {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v-display);
  font-size: 15px;
}

/* App screenshot in a frame that runs off the panel's bottom edge. */
.rc-shot {
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--rc-shadow-lg);
}
.rc-shot img { display: block; width: 100%; object-fit: cover; object-position: top center; }

/* Round icon dot (Lucide, stroke 2.75). */
.rc-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  color: var(--rc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-icon svg { display: block; }

/* Small tinted card. Used for notes, steps and feature tiles. */
.rc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 32px;
}
.rc-card--tall { min-height: 200px; }
.rc-card--tall > .rc-push { margin-top: auto; }
.rc-big-num {
  font-family: var(--v-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  color: var(--color-accent);
}

/* Segmented control: product tabs, NFC toggle, billing period. */
.rc-seg {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: var(--rc-r-pill);
  background: var(--color-surface);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.rc-seg--bg { background: var(--color-bg); }
.rc-seg--fill { display: flex; }
.rc-seg--fill > button { flex: 1; }
.rc-seg button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--rc-r-pill);
  background: transparent;
  color: var(--rc-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.rc-seg--bg button { font-size: 15px; padding: 12px 16px; }
.rc-seg button[aria-selected="true"],
.rc-seg button[aria-pressed="true"] {
  background: var(--rc-ink);
  color: var(--color-bg);
  box-shadow: var(--rc-shadow-md);
}
.rc-seg button small { font-size: 12px; opacity: 0.7; }

/* Pill form inputs. */
.rc-form { display: flex; flex-direction: column; gap: 18px; }
.rc-form[hidden] { display: none; }
.rc-field { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; }
.rc-field-hint { font-size: 13px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.rc-input {
  width: 100%;
  min-width: 0;
  padding: 14px 20px;
  border: 2px solid var(--color-divider);
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  color: var(--rc-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  transition: border-color 0.2s ease;
}
textarea.rc-input { border-radius: 24px; resize: vertical; min-height: 96px; }
.rc-input:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.rc-input:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 1px; }
.rc-form-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.rc-form-card {
  width: 100%;
  align-self: center;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 40px;
  background: var(--color-surface);
  box-shadow: var(--rc-shadow-md);
}
.rc-form-error {
  padding: 12px 18px;
  border-radius: 20px;
  background: var(--a-100);
  color: var(--a-800);
  font-size: 14px;
}
.rc-form-error[hidden] { display: none; }
/* Trial form: the offer on a campaign's promo code. */
.rc-promo {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--success-bg);
  color: var(--success-fg);
  font-size: 15px;
  line-height: 1.5;
}
.rc-promo[hidden] { display: none; }
.rc-promo svg { flex: none; margin-top: 3px; }
.rc-promo strong { display: block; font-size: 16px; }
.rc-promo-note { display: block; font-size: 13px; opacity: .85; }
.rc-done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 0; }
.rc-done[hidden] { display: none; }
.rc-done-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--rc-r-pill);
  background: var(--s-500);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-done h2 { font-size: 34px; }
.rc-done p { font-size: 17px; line-height: 1.55; max-width: 36ch; }

/* ── FAQ: heading in the first column, list across two. ── */
.rc-faq {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-block: var(--v-rhythm) clamp(64px, 8vw, 112px);
}
@media (min-width: 960px) {
  .rc-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.rc-faq h2 { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.08; }
.rc-faq-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rc-faq-item { padding: 22px 28px; border-radius: 24px; background: var(--color-surface); }
.rc-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}
.rc-faq-item summary::-webkit-details-marker { display: none; }
.rc-faq-item summary::after {
  content: "+";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.3s ease;
}
.rc-faq-item[open] summary::after { transform: rotate(45deg); }
.rc-faq-item p {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.rc-faq-item p a { color: var(--a-700); text-decoration: underline; text-underline-offset: 3px; }
.rc-faq-note { padding: 8px 4px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* ── Close banner ──────────────────────────────────────── */
.rc-close { padding: 0 var(--v-gutter) var(--v-gutter); }
.rc-close .rc-panel { background: var(--color-accent); color: var(--color-bg); }
.rc-close .rc-panel::before {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  left: -10%;
  top: -40%;
  border-radius: 50%;
  background: var(--a-400);
  opacity: 0.6;
}
.rc-close-inner {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) var(--v-pad);
}
.rc-close h2 {
  max-width: 14ch;
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 1.04;
  color: var(--color-bg);
}
.rc-close .rc-row { margin-top: 40px; }

/* ── Full-bleed photo hero (attendance, NFC) ───────────── */
.rc-photo-hero { padding: 8px var(--v-gutter) 0; }
.rc-photo-hero .rc-panel {
  display: flex;
  align-items: flex-end;
  min-height: min(86vh, 820px);
  background: var(--s-700);
}
.rc-photo-hero .rc-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32, 30, 29, 0.78), rgba(32, 30, 29, 0) 62%);
  pointer-events: none;
}
.rc-photo-hero--side .rc-panel { min-height: min(84vh, 800px); background: var(--a-300); }
.rc-photo-hero--side .rc-panel::after {
  background: linear-gradient(to left, rgba(32, 30, 29, 0.72), rgba(32, 30, 29, 0) 60%);
}
.rc-photo-hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  color: var(--color-bg);
}
.rc-photo-hero--side .rc-photo-hero-copy { max-width: 640px; padding: clamp(32px, 5vw, 80px); }
.rc-photo-hero-copy h1 { color: var(--color-bg); }

/* ── Product showcase panel with a screenshot ──────────── */
.rc-showcase {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 64px) 0;
  border-radius: 44px;
  overflow: hidden;
}
.rc-showcase .rc-pills { max-width: 640px; }

/* ── Two-part panel: copy on one side, photo on the other ── */
.rc-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.rc-duo-copy {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: clamp(40px, 6vw, 88px);
}
.rc-duo-media { position: relative; min-height: 440px; background: var(--s-600); }

/* Sage panel with a heading and a list of rows/cards. */
.rc-sage {
  padding: clamp(36px, 5vw, 80px);
  border-radius: 44px;
  background: var(--s-800);
  color: var(--color-bg);
}
.rc-sage :is(h2, h3) { color: var(--color-bg); }
.rc-glass-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--color-bg) 10%, transparent);
}

/* ── Illustrative product mocks ────────────────────────── */
.rc-mock {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: 28px;
  background: var(--color-bg);
  box-shadow: var(--rc-shadow-lg);
}
.rc-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.rc-status { padding: 6px 12px; border-radius: var(--rc-r-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.rc-status--ready { background: var(--s-200); color: var(--s-800); }
.rc-status--wait { background: var(--color-bg); color: var(--rc-ink); }
.rc-status--att { background: var(--a-200); color: var(--a-800); }

/* ── Scroll reveal (nav.js adds .is-hidden only below the fold) ── */
[data-reveal].is-hidden { opacity: 0; transform: translateY(40px); }
[data-reveal] {
  transition: opacity 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-hidden { opacity: 1; transform: none; transition: none; }
}

/* ═══ Home ═════════════════════════════════════════════════ */
/* Sized so the product preview below starts inside a laptop's first screen;
   at 120px the headline alone filled it. */
.home-hero { padding-block: clamp(32px, 4.5vw, 72px) clamp(32px, 3.5vw, 48px); }
.home-hero h1 span { display: block; }
.home-hero .rc-h1--home { font-size: clamp(40px, 5.2vw, 80px); max-width: 22ch; }
/* What the product is, in one line, under the headline's promise. */
.home-hero .home-hero-lead { margin-top: clamp(22px, 3vw, 40px); max-width: 44ch; }
.home-hero .rc-row { gap: 14px; margin-top: clamp(28px, 3.5vw, 48px); }
.home-hero .rc-meta { padding-inline-start: 8px; }

/* The hero sits on a photograph: someone tapping in at the door on arrival,
   with an empty wall where the headline goes. The panel is the reel's frame
   (rc-panel) and keeps roughly the old hero height, so the product preview
   still starts inside a laptop's first screen. The photo is mirrored on the
   LTR pages (separate files), so the wall is always on the text side. */
.home-hero-stage { margin-bottom: clamp(14px, 1.6vw, 24px); }
.home-hero-panel {
  display: flex;
  align-items: center;
  min-height: clamp(460px, 38vw, 620px);
  background: var(--color-surface);
}
.home-hero-photo { position: absolute; inset: 0; }
.home-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Her head and the phone are in the top half; the person is at the far side. */
  object-position: left 25%;
  /* The login photo's wash: calmer colour, so the headline reads crisply. */
  filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}
[dir="ltr"] .home-hero-photo img { object-position: right 25%; }
/* A cream veil on the text side only; the person stays untouched. */
.home-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--color-bg) 70%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 35%, transparent) 45%,
    transparent 68%);
}
[dir="ltr"] .home-hero-panel::after {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-bg) 70%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 35%, transparent) 45%,
    transparent 68%);
}
.home-hero-panel > .home-hero { position: relative; z-index: 1; width: 100%; }
/* The wall is a bit over half the frame. At the plain hero's 80px the first
   line ran into the phone and the tag, so here the headline is a step
   smaller and the text column stops short of the person. */
@media (min-width: 641px) {
  .home-hero-panel .rc-h1--home { font-size: clamp(40px, 4.4vw, 68px); }
  .home-hero-panel .home-hero > * { max-width: 60%; }
}
/* On a phone the photo becomes a strip above the text (its own crop), rather
   than text over a picture too narrow to leave a quiet wall. */
@media (max-width: 640px) {
  .home-hero-panel { display: block; min-height: 0; }
  .home-hero-panel::after { content: none; }
  .home-hero-photo { position: static; display: block; }
  .home-hero-photo img { height: auto; aspect-ratio: 8 / 5; object-position: center; }
}

.rc-btn--play { padding: 10px 22px 10px 10px; font-size: 16px; gap: 12px; }
.rc-btn--play[hidden] { display: none; }
.rc-play-dot {
  width: 40px;
  height: 40px;
  border-radius: var(--rc-r-pill);
  background: var(--rc-ink);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Showreel: four screenshots cross-fade with a slow zoom. */
.reel {
  aspect-ratio: 16 / 9;
  min-height: 380px;
  background: var(--s-700);
}
/* min-height on an aspect-ratio box widens it, so narrow screens get a
   fixed height instead. */
@media (max-width: 680px) {
  .reel { aspect-ratio: auto; height: 380px; min-height: 0; }
  .reel-screen { left: 30%; }
}
.reel-blob { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.reel-blob--a { width: 60%; top: -30%; left: -14%; background: var(--s-500); opacity: 0.55; }
.reel-blob--b { width: 34%; bottom: -18%; right: 6%; background: var(--a-400); opacity: 0.5; }
.reel-screen {
  position: absolute;
  top: 9%;
  bottom: -6%;
  right: 7%;
  left: 22%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--rc-shadow-lg);
}
.reel-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
  transform-origin: top right;
  opacity: 0;
  transition: opacity 1.2s ease, transform 6s linear;
}
.reel-screen img.is-active { opacity: 1; transform: scale(1.06); }
.reel-phone {
  position: absolute;
  left: 6%;
  bottom: 8%;
  width: 19%;
  min-width: 130px;
  aspect-ratio: 9 / 18;
  padding: 8px;
  border-radius: 32px;
  background: var(--rc-ink);
  box-shadow: var(--rc-shadow-lg);
}
.reel-phone img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  object-fit: cover;
  object-position: top center;
  background: var(--color-bg);
}
.reel-dots { position: absolute; right: 7%; top: 3.2%; display: flex; gap: 6px; }
.reel-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  opacity: 0.5;
  transition: width 0.6s, opacity 0.6s;
}
.reel-dots span.is-active { width: 28px; opacity: 1; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Outcome cards with a cropped screenshot bleeding off the edge. */
.outcome {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 460px;
  padding: 32px 32px 0;
  border-radius: 32px;
  overflow: hidden;
}
.outcome h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; max-width: 12ch; }
.outcome-shot {
  position: relative;
  flex: 1;
  min-height: 280px;
  margin-inline-end: -32px;
  border-radius: 20px 0 0 0;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--rc-shadow-md);
}
/* The whole screenshot, at its own aspect ratio (cover cut up to a fifth of
   it off on narrow cards), pinned to the bottom so the cards in a row line up. */
.outcome-shot { flex: none; min-height: 0; margin-top: auto; }
.outcome { min-height: 0; }
.outcome-shot img { position: static; height: auto; }
/* One sentence under each outcome heading saying what the close-up shows. */
.outcome .outcome-lead {
  margin-top: -14px;
  max-width: 34ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* Product tabs. */
.product-stage { padding: clamp(20px, 4vw, 56px) clamp(20px, 4vw, 56px) 0; border-radius: 40px; overflow: hidden; }
.product-screen {
  position: relative;
  aspect-ratio: 1440 / 900;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--rc-shadow-lg);
}
.product-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product-screen img.is-active { opacity: 1; transform: none; }
/* The step's sentence sits between the tabs and the screenshot, so it changes
   in view when a tab is picked rather than below a tall image. */
/* Two lines reserved, so switching to a shorter sentence doesn't jump the image. */
.product-lines { margin-bottom: 28px; min-height: calc(2 * 1.55 * clamp(17px, 1.4vw, 21px)); }
.product-line {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.product-line[hidden] { display: none; }

/* Clock-in methods panel. */
.methods-panel h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.06; max-width: 12ch; }
.methods-panel .rc-duo-copy { justify-content: space-between; gap: 48px; padding: clamp(40px, 6vw, 96px); }
.methods-panel .rc-duo-media { min-height: 460px; }
.method-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.method-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--rc-r-pill);
  background: color-mix(in srgb, var(--color-bg) 10%, transparent);
  font-size: 16px;
  font-weight: 600;
}
.method-chip .rc-icon { width: 44px; height: 44px; background: var(--a-400); }
/* On the dark methods panel the chip labels take the panel heading's light colour; `.v2 a` would make them dark ink. */
.methods-panel .method-chip, .methods-panel .method-chip:hover { color: var(--color-bg); }
.methods-panel .method-chip:hover { background: color-mix(in srgb, var(--color-bg) 18%, transparent); }
/* The same chips on the light page: the home page topics row. */
.topic-chips { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.topic-chips .method-chip { background: var(--s-200); color: inherit; }
.topic-chips .method-chip:hover { background: var(--s-300); }

/* Industries scroll rail. */
.rail-head { padding-bottom: clamp(28px, 3.5vw, 44px); margin-bottom: 0; }
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--v-pad);
  padding-inline: var(--v-pad);
  padding-bottom: 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-tile {
  position: relative;
  flex: none;
  width: clamp(240px, 24vw, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 32px;
  overflow: hidden;
  scroll-snap-align: start;
}
/* The rail arrows are drawn for RTL; mirror them on English pages. */
[dir="ltr"] [data-rail-step] svg { transform: scaleX(-1); }
.rail-tile .rc-pill { position: absolute; bottom: 16px; inset-inline-start: 16px; font-size: 16px; padding: 10px 18px; }
@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
}

/* Pricing teaser. */
.price-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 240px;
  padding: 36px;
  border-radius: 32px;
  font-size: 16px;
  line-height: 1.5;
}
.price-card strong {
  font-family: var(--v-display);
  font-weight: 600;
  font-size: clamp(64px, 7vw, 108px);
  line-height: 0.95;
}
.price-card span { max-width: 28ch; }
/* Home: customer testimonials. A compact strip: five small cards in a row,
   a sideways-scrolling row on narrow screens instead of a tall stack. */
.testimonials-title { margin-bottom: 20px; }
.testimonials {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  min-width: 0;
  scroll-snap-align: start;
}
.testimonial blockquote { margin: 0; font-size: 15px; line-height: 1.5; }
.testimonial blockquote::before {
  content: "\201D";
  display: block;
  font-family: "Caprasimo", Georgia, serif;
  font-size: 40px;
  line-height: 0.5;
  height: 18px;
  color: var(--color-accent);
}
.testimonial cite { font-style: normal; font-weight: 700; font-size: 14px; }

.price-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 8px 0; }

/* Video modal. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  background: color-mix(in srgb, var(--color-text) 88%, transparent);
}
.video-modal[hidden] { display: none; }
.video-modal .rc-btn--icon { position: absolute; top: 20px; inset-inline-end: 20px; }
.video-frame {
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: var(--rc-ink);
}
.video-frame video { width: 100%; height: 100%; display: block; }

/* ═══ Attendance system ════════════════════════════════════ */
.layers { position: relative; margin-top: clamp(56px, 7vw, 96px); --min: 240px; --gap: 40px; }
.layers::before {
  content: "";
  position: absolute;
  top: 36px;
  right: 36px;
  left: 36px;
  height: 4px;
  border-radius: var(--rc-r-pill);
  background: var(--a-300);
}
.layer { position: relative; display: flex; flex-direction: column; gap: 18px; }
.layer h3 { font-size: clamp(24px, 2.2vw, 32px); }
.layer p { max-width: 32ch; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.layer-num {
  width: 72px;
  height: 72px;
  border-radius: var(--rc-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v-display);
  font-weight: 600;
  font-size: 24px;
  box-shadow: 0 0 0 10px var(--color-bg);
}
@media (max-width: 860px) {
  .layers::before { display: none; }
}

/* ═══ Clock-in methods ═════════════════════════════════════ */
.picker { --min: 260px; --gap: 16px; }
.pick {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.4s ease;
}
.pick:hover,
.pick[aria-pressed="true"] { opacity: 1; }
.pick-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 32px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.pick[aria-pressed="true"] .pick-media { box-shadow: 0 0 0 4px var(--color-accent); }
.pick-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 6px; }
.pick-title strong { font-family: var(--v-display); font-weight: 600; font-size: 26px; }
.pick-title span { font-size: 14px; font-weight: 600; color: var(--a-700); }
.pick-detail {
  margin-top: 28px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 40px;
  background: var(--color-surface);
  --min: 360px;
  --gap: clamp(28px, 4vw, 56px);
}
.pick-detail[hidden] { display: none; }
.pick-detail h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; }
.pick-detail .rc-stack { gap: 22px; align-items: stretch; }
.pick-detail .rc-stack > p { max-width: 46ch; font-size: 17px; line-height: 1.6; }
.pick-who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border-radius: 24px;
  background: var(--color-bg);
  font-size: 15px;
  line-height: 1.55;
}
.pick-who strong { font-size: 14px; font-weight: 700; color: var(--s-700); }
.specs { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 22px;
  border-radius: 20px;
  background: var(--color-bg);
}
.spec dt { flex: 0 1 auto; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.spec dd { margin: 0; min-width: 0; font-size: 16px; font-weight: 600; text-align: end; }
.q-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-bg) 10%, transparent);
  font-size: 15px;
  line-height: 1.5;
}
.q-row strong { display: block; margin-bottom: 4px; font-size: 17px; }
.q-mark {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--rc-r-pill);
  background: var(--a-400);
  color: var(--rc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ═══ Employee management ══════════════════════════════════ */
.file-card { width: 100%; max-width: 440px; }
.file-head { display: flex; align-items: center; gap: 14px; }
.file-head .rc-avatar { width: 56px; height: 56px; background: var(--a-300); font-family: var(--v-display); font-weight: 600; font-size: 22px; }
.file-head strong { display: block; font-size: 18px; }
.file-head .rc-status { margin-inline-start: auto; }
.file-rows { display: flex; flex-direction: column; gap: 8px; }
.file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--color-surface);
  font-size: 15px;
  font-weight: 600;
}
.file-row span:last-child { font-size: 13px; font-weight: 700; color: var(--s-700); }
.file-row span.is-wait { color: var(--a-700); }
.file-progress { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; }
.file-progress > span { display: flex; justify-content: space-between; }
.file-bar { display: block; height: 8px; border-radius: var(--rc-r-pill); background: var(--color-surface); overflow: hidden; }
.file-bar i { display: block; height: 100%; border-radius: var(--rc-r-pill); background: var(--s-500); }
.icon-tile {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 170px;
  padding: 26px;
  border-radius: 28px;
}
.icon-tile h3 { margin-top: auto; font-size: 21px; line-height: 1.2; }
.stage-media { position: relative; aspect-ratio: 5 / 4; border-radius: 32px; overflow: hidden; }

/* ═══ Accountants ══════════════════════════════════════════ */
.acct-stage { padding: clamp(24px, 5vw, 72px); background: var(--s-700); }
.acct-stage::before {
  content: "";
  position: absolute;
  width: 50%;
  aspect-ratio: 1;
  top: -40%;
  left: -12%;
  border-radius: 50%;
  background: var(--s-500);
  opacity: 0.6;
}
.acct-card { position: relative; max-width: 960px; margin: 0 auto; gap: 20px; padding: clamp(20px, 3vw, 36px); }
.acct-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acct-card-head strong { font-family: var(--v-display); font-weight: 600; font-size: 22px; }
.kpis { --min: 140px; --gap: 10px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.kpi strong { font-family: var(--v-display); font-weight: 600; font-size: 32px; line-height: 1; }
.client-rows { display: flex; flex-direction: column; gap: 6px; }
.client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--color-surface);
  font-size: 15px;
  font-weight: 600;
}
.client-row > span:nth-child(2) { flex: 1; min-width: 0; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 28px; }
.timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  right: 27px;
  width: 4px;
  border-radius: var(--rc-r-pill);
  background: var(--a-300);
}
.tl-step { position: relative; display: flex; align-items: flex-start; gap: 20px; font-size: 16px; line-height: 1.55; }
.tl-step > div { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; max-width: 38ch; }
.tl-step strong { font-family: var(--v-display); font-weight: 600; font-size: 24px; line-height: 1.2; }
.tl-num {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: var(--rc-r-pill);
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v-display);
  font-weight: 600;
  font-size: 20px;
  box-shadow: 0 0 0 8px var(--color-bg);
}
.join-panel { padding: clamp(28px, 5vw, 72px); background: var(--color-surface); align-items: start; --min: 380px; }
.join-done {
  padding: 28px;
  border-radius: 28px;
  background: var(--s-200);
  font-family: var(--v-display);
  font-weight: 600;
  font-size: 24px;
}
.join-done[hidden] { display: none; }

/* ═══ Form 101 ═════════════════════════════════════════════ */
.board { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 36px); border-radius: 44px; }
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
.board-head strong { font-family: var(--v-display); font-weight: 600; font-size: 20px; }
.board-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.board-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 260px;
  padding: 14px;
  border-radius: 24px;
  background: var(--color-bg);
}
.board-col h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 8px;
  font-family: var(--rc-font);
  font-size: 13px;
  font-weight: 700;
}
.board-count,
.board-person .rc-avatar { width: 26px; height: 26px; font-size: 12px; }
.board-count { border-radius: var(--rc-r-pill); display: flex; align-items: center; justify-content: center; }
.board-person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
}
.board-person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-steps { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.flow-step { flex: 1 1 260px; display: flex; align-items: center; gap: 14px; }
.flow-step .rc-card { flex: 1; padding: 30px; }
.flow-arrow { flex: none; color: var(--color-accent); }
[dir="ltr"] .flow-arrow { transform: scaleX(-1); }
@media (max-width: 860px) {
  .flow-arrow { display: none; }
}
.photo-pair { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
@media (max-width: 860px) {
  .photo-pair { grid-template-columns: 1fr; }
}
.photo-pair .rc-sage { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(28px, 4vw, 52px); }
.photo-pair .rc-sage .rc-pill { padding: 12px 18px; font-size: 16px; white-space: normal; }

/* ═══ Payroll export ═══════════════════════════════════════ */
.flow-panel {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: clamp(36px, 6vw, 96px) clamp(20px, 5vw, 80px);
  background: var(--s-800);
  color: var(--color-bg);
}
.flow-nodes { position: relative; --min: 220px; --gap: 28px; }
.flow-nodes::before {
  content: "";
  position: absolute;
  top: 44px;
  right: 10%;
  left: 10%;
  border-top: 3px dashed color-mix(in srgb, var(--color-bg) 40%, transparent);
}
@media (max-width: 860px) {
  .flow-nodes::before { display: none; }
}
.flow-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.flow-node .rc-icon { width: 88px; height: 88px; box-shadow: 0 0 0 10px var(--s-800); }
.flow-node small { font-size: 13px; font-weight: 700; opacity: 0.8; }
.flow-node h3 { max-width: 14ch; font-size: 24px; line-height: 1.15; color: var(--color-bg); }
.flow-node p { max-width: 30ch; font-size: 15px; line-height: 1.5; opacity: 0.9; }
.file-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.file-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 14px;
  border-radius: 20px;
  background: var(--color-bg);
  color: var(--rc-ink);
  box-shadow: var(--rc-shadow-md);
  font-size: 13px;
}
.file-tile strong { display: block; direction: ltr; text-align: right; font-size: 15px; }
/* direction: ltr above makes `start` resolve to left, so the side is set per page direction. */
[dir="ltr"] .file-tile strong { text-align: left; }
.file-tile span:last-child span { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.file-ext {
  width: 40px;
  height: 48px;
  padding-bottom: 6px;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.note-card { display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; border-radius: 28px; font-size: 15px; line-height: 1.55; }
.note-card h3 { font-size: 21px; }

/* ═══ NFC ══════════════════════════════════════════════════ */
.xfade { position: relative; min-height: 460px; background: var(--s-300); }
.xfade img { opacity: 0; transition: opacity 0.6s ease; }
.xfade img.is-active { opacity: 1; }
.way { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(32px, 4vw, 56px); }
.way[hidden] { display: none; }
.way h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
.way p { max-width: 42ch; font-size: 17px; line-height: 1.6; }
.way-needs { display: flex; flex-direction: column; gap: 8px; }
.way-needs > strong { font-size: 14px; }
.after-num { font-family: var(--v-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--a-400); }
.rc-glass-card h3 { font-size: 22px; }
.rc-glass-card p { font-size: 15px; line-height: 1.55; opacity: 0.9; }

/* ═══ Mobile app ═══════════════════════════════════════════ */
.app-hero { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.app-hero .rc-row { justify-content: center; }

/* Store badges. <html data-platform> (set inline in the page head) trims them
   to the visitor's phone; with no script every badge shows. */
.store-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  padding: 12px 22px;
  border-radius: var(--rc-r-pill);
  background: var(--rc-ink);
  color: var(--color-bg);
  text-decoration: none;
  box-shadow: var(--rc-shadow-md);
  transition: transform 0.2s ease;
}
/* .v2 a would otherwise paint the label ink-on-ink. */
.v2 a.store-badge,
.v2 a.store-badge:hover { color: var(--color-bg); }
.v2 a.store-badge:hover { transform: translateY(-1px); }
.store-badge span { display: flex; flex-direction: column; align-items: flex-start; font-size: 19px; font-weight: 600; line-height: 1.15; }
.store-badge small { font-size: 12px; font-weight: 500; opacity: 0.8; }
.store-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  padding-inline-end: 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-divider);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: start;
}
.store-qr img { display: block; width: 96px; height: 96px; }
[data-platform="android"] .store-badge--ios,
[data-platform="android"] .store-qr,
[data-platform="ios"] .store-badge--play,
[data-platform="ios"] .store-qr { display: none; }
@media (max-width: 640px) { .store-qr { display: none; } }

/* The same badges, smaller, in every page's footer. Not every page is .v2, and
   footer links otherwise inherit the muted footer colour. */
.footer-stores { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer a.store-badge,
.site-footer a.store-badge:hover { color: var(--color-bg); }
.store-badge--sm { min-width: 0; gap: 8px; padding: 8px 16px; box-shadow: none; }
.store-badge--sm span { font-size: 15px; }
.store-badge--sm small { font-size: 10.5px; }
.app-stage {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 56px) 0;
  background: var(--a-200);
}
.app-stage::before {
  content: "";
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--a-300);
}
.app-stage-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  width: 100%;
  max-width: 1100px;
}
.callouts { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.callouts--end { align-items: flex-end; }
.app-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 260px;
  padding: 16px 20px;
  border-radius: 24px;
  background: var(--color-bg);
  box-shadow: var(--rc-shadow-md);
  font-size: 14px;
  line-height: 1.45;
}
.app-callout strong { font-size: 16px; }
.phone {
  width: clamp(220px, 24vw, 320px);
  aspect-ratio: 9 / 19;
  padding: 10px 10px 0;
  border-radius: 44px 44px 0 0;
  background: var(--rc-ink);
  box-shadow: var(--rc-shadow-lg);
}
.phone img {
  width: 100%;
  height: 100%;
  border-radius: 36px 36px 0 0;
  object-fit: cover;
  object-position: top center;
  background: var(--color-bg);
}
@media (max-width: 860px) {
  .app-stage-grid { grid-template-columns: 1fr; justify-items: center; }
  .callouts, .callouts--end { align-items: stretch; width: 100%; }
  .app-callout { max-width: none; }
  .phone { order: 3; }
}

/* ═══ Pricing ══════════════════════════════════════════════ */
.price-calc { display: flex; flex-direction: column; gap: 28px; padding: clamp(28px, 4vw, 48px); border-radius: 40px; box-shadow: var(--rc-shadow-md); }
.calc-count { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.calc-count label { font-size: 18px; font-weight: 600; }
.calc-count input {
  width: 110px;
  padding: 10px 14px;
  border: 2px solid var(--color-divider);
  border-radius: var(--rc-r-pill);
  background: var(--color-bg);
  color: var(--rc-ink);
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
.calc-count input:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 1px; }
.calc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-tile { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 28px; font-size: 14px; font-weight: 600; }
.calc-tile strong { font-family: var(--v-display); font-weight: 600; font-size: clamp(40px, 5vw, 68px); line-height: 1; font-variant-numeric: tabular-nums; }
.price-note { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.price-nudge {
  padding: 12px 18px;
  border-radius: 20px;
  background: var(--color-bg);
  font-size: 14px;
  line-height: 1.5;
}
.price-nudge[hidden],
.calc-quoted[hidden],
.price-enterprise[hidden] { display: none; }
.calc-quoted { display: flex; flex-direction: column; gap: 20px; }
.price-enterprise { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; font-size: 15px; line-height: 1.55; }
.price-enterprise strong { font-family: var(--v-display); font-weight: 600; font-size: 28px; line-height: 1.15; }
.price-enterprise .rc-btn { align-self: flex-start; }
.ladder { --min: 150px; --gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ladder-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 24px;
  background: var(--color-surface);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ladder-step span { font-size: 13px; font-weight: 600; opacity: 0.85; }
.ladder-step strong { font-family: var(--v-display); font-weight: 600; font-size: 26px; white-space: nowrap; }
.ladder-step--quote strong { font-size: 18px; }
.ladder-step.is-current { background: var(--rc-ink); color: var(--color-bg); }
.include-chips .rc-pill { padding: 10px 16px 10px 12px; font-size: 15px; font-weight: 500; white-space: normal; }
.include-chips svg { flex: none; color: var(--a-400); }
@media (max-width: 480px) {
  .calc-tiles { grid-template-columns: 1fr; }
}

/* ═══ Page-level additions (spacing and small shared pieces) ═══ */
/* Attendance system (also used by clock-in-methods / employee-management) */

/* Showcase: the head row sits in the panel's 32px flex gap, not its own margin;
   the screenshot is cropped to 1440/820 like the design. */
.rc-showcase .rc-head { margin-bottom: 0; }
.rc-showcase .rc-shot img { aspect-ratio: 1440 / 820; height: auto; }

/* Short follow-on sentence carrying the internal links of the old page. */
.v2 .rc-more { margin-top: 28px; max-width: 70ch; font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.v2 .rc-more a { color: var(--a-700); text-decoration: underline; text-underline-offset: 3px; }

/* Clock-in methods (also needs .rc-close / .rc-more from extra-attendance-system.css) */

/* Short page hero: H1 block and lead on one row, bottom-aligned (also used by employee-management). */
.rc-page-hero { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.rc-page-hero .rc-head { margin-bottom: 0; gap: 28px; }

/* Question rows inside the sage panel. */
.q-list { display: flex; flex-direction: column; gap: 12px; }

/* Employee management (also needs .rc-close / .rc-more from extra-attendance-system.css
   and .rc-page-hero from extra-clock-in-methods.css) */

/* Hero runs straight into the photo row; no bottom padding. */
.rc-page-hero--flush { padding-bottom: 0; }
.rc-hero-stack { margin-bottom: clamp(36px, 5vw, 64px); }
.rc-hero-stack .rc-row { margin-top: 8px; }

/* Sage-200 panel that centres the illustrative file card. */
.file-stage { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px); }

/* Lifecycle stage: photo, title, line (full-width media, unlike .rc-stack). */
.stage { display: flex; flex-direction: column; gap: 18px; }
.stage p { max-width: 34ch; font-size: 16px; line-height: 1.55; }

/* Sage control strip: heading and pills on one wrapping row. */
.rc-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding: clamp(36px, 5vw, 72px); }
.rc-strip .rc-pills { gap: 10px; }

/* Used by form-101, payroll-export, attendance-clock-app (and nfc for the
   link line). Append to the v2 section of landing/styles.css. */

/* Plain hero spacing: the design's first section sits clamp(40-88px) under the nav. */
.rc-hero-top { padding-top: clamp(40px, 6vw, 88px); }
.rc-hero-top--pb { padding-bottom: clamp(40px, 5vw, 64px); }
/* Panel that follows a centered hero (mobile app stage). */
.rc-pt-sm { padding-top: clamp(32px, 4vw, 56px); }

/* Column of full-width rows (sage pill list, note cards). */
.rc-stack--stretch { align-items: stretch; }

/* Large tinted callout card (payroll accountant callout). */
.rc-callout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding: clamp(32px, 4vw, 56px);
  border-radius: 44px;
}

/* .rc-icon sets its own background after the rc-fill-* rules, so a tinted
   icon dot (payroll flow nodes) needs the pair selector. */
.rc-icon.rc-fill-s300 { background: var(--s-300); }
.rc-icon.rc-fill-a300 { background: var(--a-300); }

/* A short line of related links under a section. */
.v2 .rc-links { margin-top: 28px; }
.v2 .rc-links a { color: var(--a-700); text-decoration: underline; text-underline-offset: 3px; }

/* Pricing page (v2) — spacing the shared rc- classes don't cover. */
.pricing-hero { padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 120px); }
.pricing-ladder h2 { margin-bottom: 24px; }
.pricing-ladder .price-note { margin-top: 18px; max-width: 70ch; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.pricing-notes { padding-top: clamp(64px, 8vw, 112px); }

/* ═══ Trial / Demo (signup layout) ═════════════════════════ */
.signup { padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 112px); align-items: stretch; --min: 440px; }
.signup-side { display: flex; flex-direction: column; gap: 28px; }
.signup-photo { flex: 1; min-height: 360px; }
.signup-photo--sm { min-height: 340px; }
.signup-pills { position: absolute; bottom: 20px; right: 20px; left: 20px; pointer-events: none; }
.rc-form-card .rc-btn--block { margin-top: 8px; }
.signup-lead { max-width: 34ch; }
.signup-topics { list-style: none; margin: 0; padding: 0; }

/* ═══ Accountants (additions) ══════════════════════════════ */
.acct-hero { padding-top: clamp(40px, 6vw, 88px); }
.acct-hero-top { align-items: end; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); --min: 420px; }
.acct-photo { aspect-ratio: 4 / 5; max-height: 640px; }
.join-panel .rc-form { gap: 14px; }
.timeline { list-style: none; margin: 0; padding: 0; }

/* ═══ Support and 404 ══════════════════════════════════════ */
.support-hero,
.notfound { padding-block: clamp(40px, 6vw, 88px) 0; }
.notfound { padding-bottom: clamp(64px, 8vw, 112px); }
.support-end { padding-bottom: clamp(64px, 8vw, 112px); }
.support-topic { font-size: 16px; line-height: 1.6; scroll-margin-top: 96px; }
.support-topic ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
#sec-7 { scroll-margin-top: 96px; }
.v2 .rc-inline-link { color: var(--a-700); text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Accessibility toolbar (nav.js) ═════════════════════════════
   A button in the header bar opens a small panel of display preferences.
   The classes it sets on <html> are below. */
.a11y-bar { position: relative; flex: none; font-family: var(--rc-font); }
.a11y-toggle {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--rc-ink); border: 1px solid var(--color-divider);
}
.a11y-label { display: none; }
.a11y-toggle:hover, .a11y-toggle[aria-expanded="true"] { background: var(--n-900); border-color: var(--n-900); color: #fff; }
.a11y-panel {
  position: absolute; top: calc(100% + 12px); inset-inline-end: 0; z-index: 60; width: 272px; max-width: calc(100vw - 32px);
  padding: 16px; border-radius: 20px; background: #fff; color: #1a1a1a; box-shadow: var(--rc-shadow-lg);
  display: flex; flex-direction: column; gap: 8px; font-size: 15px;
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.a11y-close { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: inherit; width: 36px; height: 36px; border-radius: 50%; }
.a11y-row { display: flex; align-items: center; gap: 8px; }
.a11y-row > span { flex: 1; }
.a11y-row button, .a11y-opt, .a11y-foot button {
  border: 1px solid #8a8a8a; background: #fff; color: #1a1a1a; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 600; min-height: 40px; padding: 6px 12px;
}
.a11y-opt { width: 100%; text-align: start; }
.a11y-opt[aria-pressed="true"] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.a11y-size { min-width: 48px; text-align: center; font-weight: 600; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.a11y-foot a { color: #0b4f8a; text-decoration: underline; font-weight: 600; }
.a11y-bar :focus-visible { outline: 3px solid #0b4f8a; outline-offset: 2px; }

/* Larger text. The site sizes type in px, so zoom is what actually scales it. */
html.a11y-text-1 body { zoom: 1.15; }
html.a11y-text-2 body { zoom: 1.3; }
html.a11y-text-3 body { zoom: 1.45; }

/* High contrast: pure black on white, darker accent, no washed-out images. */
html.a11y-contrast {
  --color-bg: #ffffff;
  --color-surface: #f1f1f1;
  --color-text: #000000;
  --color-accent: #8c3d0c;
  --color-divider: #000000;
  --n-500: #333333; --n-600: #222222; --n-700: #111111; --n-800: #000000; --n-900: #000000;
  --rc-faint: #000000; --rc-faintest: #222222; --rc-quiet: #000000; --rc-body: #000000;
}
html.a11y-contrast .rc-washed { filter: none !important; opacity: 1 !important; }
html.a11y-contrast a:not([class]) { color: #0b4f8a; }

/* Highlight links. */
html.a11y-links a:not(.a11y-bar a) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }
html.a11y-links a:not(.a11y-bar a):focus-visible,
html.a11y-links a:not(.a11y-bar a):hover { background: #ffef9e; color: #000; }

/* Stop animations and transitions. */
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* Readable font: a plain sans for everything, headings included. */
html.a11y-font body, html.a11y-font body * { font-family: Arial, "Rubik", system-ui, sans-serif !important; letter-spacing: 0.01em; }

@media print { .a11y-bar { display: none; } }
/* Home: what help looks like at the start. Sentences, not tags, so the pills
   wrap on narrow screens instead of running off them. */
.support-list { list-style: none; margin: 0; padding: 0; }
.support-list .rc-pill { white-space: normal; border-radius: 20px; padding: 14px 20px; font-size: 15px; line-height: 1.45; }
.tl-step span a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Pricing: what the plan includes, in groups that scan. */
.include-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px 20px; align-items: start; }
.include-group { display: flex; flex-direction: column; gap: 12px; }
.include-group h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.8; }
.price-trial-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Industry pages: a phone screenshot sits centred on its panel instead of
   being cropped to fill it. */
.industry-phone { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 48px); }
.industry-phone img { width: min(300px, 80%); height: auto; border-radius: 28px; box-shadow: var(--rc-shadow-lg); }
.industry-shot { object-position: top right; }
[dir="ltr"] .industry-shot { object-position: top left; }

/* The category line that opens the home headline: what RayClock is, in the
   words people search with, sitting above the promise. */
.home-hero h1 .home-hero-kicker {
  display: inline-flex;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  padding: 8px 16px;
  border-radius: var(--rc-r-pill);
  background: var(--s-200);
  color: var(--s-800);
  font-family: var(--rc-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

/* ── AI assistants (Claude / ChatGPT) ──────────────────────────────────────
   A mock conversation stands in for a screenshot: the point is the question
   and the answer, and a capture of someone else's chat app would date fast. */
.ai-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 32px;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border-card);
}
/* A photo of the assistant in use, with the mock chat card overlapping its
   lower edge. The overlap stays below the phone in the photo. */
.ai-stage { display: flex; flex-direction: column; }
.ai-stage-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 32px;
}
.ai-stage .ai-chat {
  position: relative;
  margin: clamp(-72px, -9%, -40px) clamp(14px, 4%, 28px) 0;
  box-shadow: var(--rc-shadow-sm);
}
.ai-msg { max-width: 88%; padding: 12px 16px; border-radius: 20px; font-size: 15px; line-height: 1.5; }
.ai-msg--user { align-self: flex-end; background: var(--rc-tint); color: var(--rc-on-tint-deep); }
.ai-msg--bot { align-self: flex-start; background: var(--s-100); color: var(--rc-ink); }
.ai-msg ul { margin: 6px 0 0; padding-inline-start: 18px; }
.ai-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rc-faint); }
.ai-url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
/* A URL people copy must never break mid-host: it gets its own line and
   scrolls sideways on a very narrow card instead of wrapping. */
.ai-url code {
  flex: 1 1 100%;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  text-align: left;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--rc-ground);
  border: 1px solid var(--rc-border-card);
  font-size: 15px;
}
.ai-url button {
  flex: none;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--rc-border-card);
  background: var(--rc-surface);
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ai-url button:hover { background: var(--rc-surface-hover); }
.ai-questions { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-questions li { list-style: none; padding: 10px 16px; border-radius: 999px; background: var(--s-200); font-size: 15px; }
.ai-questions { padding: 0; margin: 0; }
.ai-questions--stack { flex-direction: column; align-items: flex-start; margin-top: 14px; }
.ai-questions--stack li { background: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.ai-combo {
  margin-top: 16px;
  padding: 22px 26px;
  border-radius: 28px;
  border: 1px dashed var(--rc-tint-border);
  background: var(--rc-tint);
  color: var(--rc-on-tint-deep);
}
.ai-combo p { margin: 6px 0 0; font-size: 18px; line-height: 1.5; }
.ai-steps { align-items: start; }
.ai-shot { margin: 0; max-width: 420px; justify-self: center; }
.ai-shot img { display: block; width: 100%; height: auto; border-radius: 24px; border: 1px solid var(--rc-border-card); box-shadow: 0 12px 32px color-mix(in srgb, var(--color-text) 8%, transparent); }
.ai-shot figcaption { margin-top: 12px; font-size: 14px; color: var(--rc-faint); text-align: center; }
.ai-form {
  align-self: start;
  width: 100%;
  max-width: 440px;
  justify-self: center;
  padding: 24px;
  border-radius: 28px;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border-card);
}
.ai-form dl { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ai-form dl > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--rc-rule-light); }
.ai-form dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ai-form dt { font-size: 13px; color: var(--rc-faint); text-align: start; }
.ai-form dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Keeps a Hebrew prefix and the brand together: "ב-RayClock" broke at the
   hyphen in large headings, leaving "ב-" alone at the end of a line. */
.nobr { white-space: nowrap; }

/* The one sentence that replaces the month-end checklist. */
.ai-oneline { font-family: var(--v-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: var(--s-900); }

/* Three short conversations — a question, an action with its approval, a
   whole process — on the AI page and the homepage. */
.ai-h1-line { display: block; }
.ai-demos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
}
.ai-demo { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ai-demo .ai-chat { flex: 1; }
.ai-demo-kind {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--rc-r-pill);
  font-size: 13px;
  font-weight: 700;
}
.ai-demo-kind--ask { background: var(--s-200); color: var(--s-800); }
.ai-demo-kind--act { background: var(--a-200); color: var(--a-800); }
.ai-demo-kind--flow { background: var(--n-300); color: var(--n-900); }
/* The assistant's own confirmation step, drawn as the chat app shows it. */
.ai-approve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px dashed var(--rc-tint-border);
  background: var(--color-bg);
  font-size: 14px;
  color: var(--rc-body);
}
.ai-approve-btns { display: flex; gap: 6px; }
.ai-fake-btn {
  padding: 6px 14px;
  border-radius: var(--rc-r-pill);
  border: 1px solid var(--color-divider);
  font-size: 13px;
  font-weight: 600;
}
.ai-fake-btn--on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.ai-file {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--color-bg);
  font-size: 13px;
  font-weight: 600;
  direction: ltr;
}
.ai-demo-note { margin-top: 14px !important; font-size: 12px; color: var(--rc-faint); }

/* AI page hero: the two-line headline at the homepage's scale, so it sits
   in three or four lines beside the photo instead of six. */
.ai-h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.08; }
/* The month-end walkthrough, always shown under the before/after cards. */
.ai-more { margin-top: 20px; border-radius: 28px; background: var(--color-surface); padding: 24px 26px; }
.ai-more-title { font-size: 20px; line-height: 1.2; }
.ai-more > .ai-steps { margin-top: 24px; }
.ai-more .tl-num { box-shadow: 0 0 0 8px var(--color-surface); }

/* The desktop menu stays on one line in Hebrew and English (it gained the AI
   assistants and app links). Russian labels are longer and keep wrapping as
   before. Hebrew only runs short of room just above the drawer breakpoint. */
@media (min-width: 1201px) {
  html:not(:lang(ru)) .nav-links { flex-wrap: nowrap; white-space: nowrap; }
  html:lang(en) .nav-links { gap: 12px; }
}
@media (min-width: 1201px) and (max-width: 1300px) {
  html:lang(he) .nav-inner, html:lang(he) .nav-menu { gap: 12px; }
  html:lang(he) .nav-links { gap: 10px; }
}

.rc-sage .ai-help { color: inherit; opacity: .85; }
.rc-sage .ai-help a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Glossary index (generated by scripts/build-glossary.mjs) ═══
   A wrapping row of letter pills; .cta-row stacks to full width on phones. */
.glossary-letters { display: flex; flex-wrap: wrap; gap: 8px; }
.glossary-letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--rc-r-pill);
  background: var(--rc-surface);
  color: var(--rc-ink);
  font-weight: 600;
  transition: background-color 150ms ease;
}
.glossary-letters a:hover { background: var(--s-200); }