/* Zuma marketing site · shared by / (en) and /he/ (rtl) */

/* Self-hosted fonts (2026-09-02): the same variable woff2 files Google Fonts served, so no
   third-party stylesheet blocks first paint and no visitor IP reaches Google. Latin and Hebrew
   subsets only, declared per weight exactly as Google did so 550/560 keep resolving to the 600 face.
   assets/fonts/* is cached for a year: rename the file if a font ever changes. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/heebo-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/heebo-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/heebo-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/heebo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/heebo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/heebo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #fdfcfa;
  --ink: #171613;
  --muted: #6f6c64;
  --line: rgba(23, 22, 19, .11);
  --card: #f4f2ec;
  --radius: 20px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  /* The page always reaches the bottom of the screen, so the footer wash ends at the edge
     instead of stopping mid-screen on short pages like the portal (tall monitors, 2026-09-04). */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 Inter, Heebo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

html[lang="he"] body {
  font-family: Heebo, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  clip-path: inset(50%);
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  transition: top .15s;
}
.skip-link:focus-visible { top: 14px; clip-path: none; }

.wrap { width: min(1080px, calc(100% - 48px)); margin-inline: auto; }

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(253, 252, 250, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; direction: ltr; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.03em;
}
.mark {
  width: 24px;
  height: 24px;
  background: url("zuma-mark.svg?v=20260919-header-mono") center / contain no-repeat;
}
/* The mark is never mirrored; it always sits left of "Zuma", as in English (founder, 2026-08-31). */
[dir="rtl"] .brand { flex-direction: row-reverse; }
[dir="rtl"] .nav .brand { flex-direction: row; }

.nav-actions { display: flex; gap: 10px; align-items: center; }
/* 44px hit areas without changing the drawn size (mobile audit 2026-09-02). */
.nav .brand { padding-block: 9px; }
.language, .menu summary { position: relative; }
.language::after { content: ""; position: absolute; inset: -9px -5px; } /* 44x44 over the 36x28 pill (the 1px border sits outside the positioning box) */
.menu summary::after { content: ""; position: absolute; inset: -5px -4px; } /* 44x44 over the 38x36 button */

.nav-link {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  transition: color .2s;
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--ink); }

.language {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  transition: border-color .2s, color .2s;
}
.language:hover { border-color: rgba(23, 22, 19, .35); color: var(--ink); }

.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  transition: border-color .2s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { border-color: rgba(23, 22, 19, .35); }
.menu-panel {
  position: absolute;
  right: 0; /* physical: the nav is LTR in both languages, and a logical end under dir=rtl sent the Hebrew panel off-screen (2026-09-02) */
  top: calc(100% + 10px);
  min-width: 210px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(23, 22, 19, .08);
  display: grid;
}
[dir="rtl"] .menu-panel { direction: rtl; }
.menu-panel a {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
}
[dir="rtl"] .menu-panel a { text-align: right; }
.menu-panel a:hover { background: var(--card); }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 150px 0 90px;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  left: 50%;
  top: -280px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 205, 255, .35), rgba(255, 232, 196, .22) 46%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 2;
}
.hero-inner { position: relative; z-index: 3; align-self: center; display: grid; justify-items: center; gap: 30px; }

.hero-flight {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-flight-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.hero-flight-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.hero-flight.is-video-preview .hero-flight-canvas,
.hero-flight.is-video-preview .hero-flight-fallback { display: none; }

.hero-flight-fallback {
  display: none;
  position: absolute;
  width: min(32vw, 360px);
  height: auto;
  top: 8%;
  right: -3%;
}

.hero-flight.is-fallback .hero-flight-canvas { display: none; }
.hero-flight.is-fallback .hero-flight-fallback { display: block; }
.eyebrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  top: 96px;
  z-index: 2;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .01em;
}
/* An editorial eyebrow, not a chip: with a bordered pill it matched the nav controls and visitors read it as a button (2026-09-24). */
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(23, 22, 19, .22);
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; }

h1 {
  margin: 0;
  font-size: clamp(24px, 8.9vw - 1px, 63px);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 560;
  max-width: 820px;
  text-wrap: balance;
}
html[dir="rtl"] h1 { letter-spacing: -.025em; line-height: 1.08; }
/* Keep the Hebrew home promise on one main line below its lead-in, down to 320px. */
html[lang="he"] .hero:not(.hero-about) #hero-title { font-size: clamp(22px, calc(7.8vw - 1px), 63px); }
.h1-lead {
  display: block;
  font-size: .45em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -.015em;
  margin-bottom: .35em;
}

.lede {
  margin: 0;
  text-wrap: balance;
  max-width: 600px;
  line-height: 1.68;
  color: var(--muted);
  font-size: clamp(17px, 1.8vw, 20px);
}

/* Home hero only: just wide enough for the full lede to hold three lines */
.lede-wide {
  max-width: 660px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 560;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .2s, opacity .2s;
}
.button:hover { opacity: .88; transform: translateY(-1px); }
.button .arrow { font-size: 17px; }

/* The jobs email: a click-to-copy pill (mock 2 in presentations/2026-08-jobs-email-ux-mockups.html).
   Without JS it stays a mailto link; site JS upgrades it to a copy button. */
.copy-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid rgba(23, 22, 19, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 560;
  letter-spacing: -.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s;
}
.copy-mail:hover { border-color: rgba(23, 22, 19, .35); }
.copy-mail svg { flex: none; color: var(--muted); }
.copy-mail.copied svg { color: var(--ink); }
html[dir="rtl"] .copy-mail { letter-spacing: 0; direction: ltr; }

.section { padding: 130px 0; border-top: 1px solid var(--line); }
.hero-about + .section { border-top: 0; }
.section, .closing { position: relative; isolation: isolate; overflow: hidden; }
.glow-a::before, .glow-a::after, .glow-b::before, .glow-d::before, .closing::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}
.glow-a::before { width: 620px; height: 620px; inset-inline-start: -12%; bottom: -16%; background: radial-gradient(circle, rgba(213, 205, 255, .28), transparent 65%); }
.glow-a::after { width: 520px; height: 520px; inset-inline-end: -8%; top: -20%; background: radial-gradient(circle, rgba(255, 232, 196, .28), transparent 65%); }
.glow-b::before { width: 640px; height: 640px; inset-inline-end: -14%; top: -26%; background: radial-gradient(circle, rgba(213, 205, 255, .24), transparent 65%); }
.glow-d::before { width: 600px; height: 600px; inset-inline-end: -12%; bottom: -34%; background: radial-gradient(circle, rgba(213, 205, 255, .26), transparent 65%); }
.closing::before { width: 720px; height: 720px; left: 50%; top: -320px; transform: translateX(-50%); background: radial-gradient(circle, rgba(213, 205, 255, .3), rgba(255, 232, 196, .2) 46%, transparent 68%); }

.kicker {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
/* 404 pages: the crew fills the content column but never pushes the button off the first screen */
.crew-404 { width: min(1080px, 92vw, calc((100svh - 240px) * 1.777)); height: auto; }
html[dir="rtl"] .kicker { letter-spacing: .06em; }

h2 {
  margin: 0 0 48px;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 550;
  max-width: 720px;
  text-wrap: balance;
}
html[dir="rtl"] h2 { letter-spacing: -.015em; line-height: 1.12; }

.ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.ways > :nth-child(1) { margin-top: clamp(84px, 7.5vw, 108px); }
.way-word {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: 1;
}
html[dir="rtl"] .way-word { text-align: left; }

.panel {
  border-radius: var(--radius);
  padding: 32px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: 310px;
}
/* The two-tone pair: translucent washes of the two orb hues, fading into the card color.
   Peach belongs to Evolution, lavender to Revolution; RTL mirrors the wash to the start corner. */
.way .panel { background: linear-gradient(150deg, rgba(255, 223, 181, .3) 0%, rgba(255, 240, 220, .16) 45%, var(--card) 100%); }
.way .panel-rev { background: linear-gradient(150deg, rgba(213, 205, 255, .3) 0%, rgba(238, 234, 255, .16) 45%, var(--card) 100%); }
html[dir="rtl"] .way .panel { background: linear-gradient(210deg, rgba(255, 223, 181, .3) 0%, rgba(255, 240, 220, .16) 45%, var(--card) 100%); }
html[dir="rtl"] .way .panel-rev { background: linear-gradient(210deg, rgba(213, 205, 255, .3) 0%, rgba(238, 234, 255, .16) 45%, var(--card) 100%); }
.panel h3 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 550;
  max-width: 480px;
}
html[dir="rtl"] .panel h3 { letter-spacing: -.015em; line-height: 1.15; }

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding: 22px 0 0;
  list-style: none;
}
.chip {
  padding: 8px 13px;
  border: 1px solid rgba(23, 22, 19, .16);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(255, 255, 255, .7);
}

.panel-quiet { background: transparent; border: 1px solid var(--line); }
.sub { max-width: 400px; margin: 12px 0 0; color: var(--muted); font-size: 17px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps-4 { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
.step { border-top: 1px solid var(--ink); padding-top: 22px; }
#approach .steps-4 .step:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.step-no { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.step h3 { margin: 12px 0 8px; font-size: 22px; font-weight: 560; letter-spacing: -.025em; }
html[dir="rtl"] .step h3 { letter-spacing: 0; }
.step p { margin: 0; color: var(--muted); font-size: 16px; }

.hero-about { min-height: auto; padding: 180px 0 60px; }

/* The jobs page fits one laptop screen: hero, role, and the copy pill above the fold (founder ask 2026-08-31).
   Keep the hero-to-pill block under ~660px at 1366 wide; re-measure before changing this page's copy or spacing. */
.page-jobs .hero-about { min-height: auto; padding: 132px 0 60px; }
.page-jobs .hero-inner { gap: 18px; }
.page-jobs .hero-about h1 { font-size: clamp(34px, 4vw, 52px); }
.page-jobs .section { padding: 108px 0 72px; }
.page-jobs .kicker { margin-bottom: 12px; }
.page-jobs h2 { margin-bottom: 16px; font-size: clamp(24px, 2.4vw, 32px); }
.page-jobs .statement { font-size: clamp(17px, 1.6vw, 19px); }
.page-jobs .statement + .copy-mail { margin-top: 22px; }
.page-jobs .copy-mail,
.page-form-error .copy-mail { min-height: 42px; padding: 0 18px; gap: 10px; font-size: 16px; }
.page-jobs .copy-mail svg,
.page-form-error .copy-mail svg { width: 15px; height: 15px; }
/* /he/jobs/ is the Hebrew site's chrome around the English jobs body (2026-09-03): the main is
   lang=en dir=ltr and keeps the English page's face and tracking. */
html[lang="he"] .page-jobs main { font-family: Inter, Heebo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
html[lang="he"] .page-jobs main h1 { letter-spacing: -.05em; line-height: 1.02; }
html[lang="he"] .page-jobs main h2 { letter-spacing: -.04em; line-height: 1.04; }
html[lang="he"] .page-jobs main .kicker { letter-spacing: .13em; }
html[lang="he"] .page-jobs main .copy-mail { letter-spacing: -.02em; }
/* Sized so the belief headline holds two desktop lines in both languages; re-measure if the copy changes. */
.hero-about h1 { font-size: clamp(38px, 5vw, 66px); }

/* About page manifesto: two display chapter marks, quiet who-grid titles. The "What we believe"
   chapter itself (centered stack under the founder's transformation drawing) is styled after .statement below. */
.manifesto .hero-about { padding: 130px 0 24px; }
.chapter-row { justify-self: stretch; width: 100%; text-align: start; position: relative; z-index: 3; }
.chapter { margin: 0; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.04; letter-spacing: -.04em; font-weight: 550; }
html[dir="rtl"] .chapter { letter-spacing: -.015em; line-height: 1.12; }
.chapter-who { margin-bottom: 64px; }
.quiet { font-size: clamp(24px, 2.8vw, 32px); font-weight: 550; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 26px; max-width: 720px; text-wrap: balance; }
html[dir="rtl"] .quiet { letter-spacing: 0; line-height: 1.3; }
.manifesto .section { padding: 64px 0; }
.manifesto .section.no-line { border-top: 0; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.who-grid .statement { font-size: 16px; line-height: 1.65; }
.who-grid .statement + .statement { margin-top: 14px; }
/* Founder portrait (2026-09-16): a tall photo spans the who chapter, the two text columns stack beside it. */
.who-stage { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: stretch; }
.who-stack { grid-template-columns: 1fr; gap: 48px; }
.who-photo { margin: 0; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: rgba(23, 22, 19, .03); }
.who-photo img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.statement { margin: 0; max-width: 620px; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.statement + .statement { margin-top: 26px; }
.statement + .button { margin-top: 38px; }
.statement + .copy-mail { margin-top: 38px; }

/* What we believe (2026-09-04): one centered axis, the transformation drawing as the chapter's only
   image, four beliefs as a quiet stack. No numbers, kickers, rules, or washes. Since 2026-09-16 the
   drawing is a faint full-size watermark behind the chapter mark (founder pick F of eleven mocks, after
   the full-width version on top "does not work at all"), so the hero keeps a big picture and the first
   belief still starts inside the first screen. */
.hero-centered .chapter-row { text-align: center; }
.hero-centered .chapter-row .wrap { position: relative; padding: 70px 0 40px; }
.hero-centered .chapter { position: relative; z-index: 1; margin: 0 auto; }
.chapter-art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: min(92%, 820px); height: auto; opacity: .22; z-index: 0; pointer-events: none; }
html[dir="rtl"] .chapter-art { transform: translate(-50%, -52%) scaleX(-1); }
.manifesto .stack { padding: 40px 0 88px; }
.stack-item { text-align: center; display: grid; justify-items: center; }
.stack-item + .stack-item { margin-top: 84px; }
.stack-title { margin: 0 0 18px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 550; max-width: 760px; text-wrap: balance; }
html[dir="rtl"] .stack-title { letter-spacing: -.015em; line-height: 1.18; }
.stack-note { display: grid; gap: 14px; max-width: 620px; }
.stack-note .statement { margin: 0; font-size: 18px; line-height: 1.6; }

.closing { padding: 150px 0 40px; border-top: 1px solid var(--line); text-align: center; }
.closing h2 { margin-inline: auto; max-width: 760px; font-size: clamp(44px, 6.4vw, 84px); }
.h2-stagger { width: fit-content; text-align: start; }
.h2-stagger span { display: block; }
.h2-stagger span + span { margin-inline-start: 2.2em; }

.form { max-width: 620px; margin-inline: auto; display: grid; gap: 16px; text-align: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; font-weight: 550; color: var(--muted); }
.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(23, 22, 19, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .66);
  transition: border-color .2s;
}
.field input:hover,
.field textarea:hover { border-color: rgba(23, 22, 19, .34); }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field textarea { resize: vertical; min-height: 96px; }
.honey { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Book a call (2026-09-08; pop-up since the same evening, mock B "calendar and times").
   The closing section is headline, working-session lead, one button. The button opens the dialog below:
   a month grid of open days, the chosen day's times in a column, the form in that column. */
.closing .lede { margin: 0 auto 30px; max-width: 56ch; color: var(--muted); font-size: 18px; }
.closing .book-open { border: 0; font: inherit; font-size: 16px; font-weight: 560; cursor: pointer; }
.book-nojs { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.book-nojs a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.page-book .hero-about { padding-bottom: 120px; }
/* Keep the working-session lead to two balanced lines when space allows. */
.page-book .lede { max-width: 56ch; }
.page-book .hero-inner .button { border: 0; font: inherit; font-size: 16px; font-weight: 560; cursor: pointer; }

/* The pop-up (2026-09-24): the personal booking card from meet.css on the blurred backdrop with the two orbs,
   no host photo or name (founder), then the old thanks page as the last screen. The dialog itself is transparent;
   the card is the visual. Phones get a bottom sheet that scrolls. */
dialog.bk { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(1100px, calc(100% - 32px)); max-width: none; max-height: none; overflow: visible; }
dialog.bk::backdrop {
  background:
    radial-gradient(circle 260px at calc(100% - 80px) 40px, rgba(255, 223, 181, .62), rgba(255, 223, 181, 0) 100%),
    radial-gradient(circle 280px at 80px calc(100% - 120px), rgba(213, 205, 255, .6), rgba(213, 205, 255, 0) 100%),
    rgba(253, 252, 250, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[dir="rtl"] dialog.bk::backdrop {
  background:
    radial-gradient(circle 260px at 80px 40px, rgba(255, 223, 181, .62), rgba(255, 223, 181, 0) 100%),
    radial-gradient(circle 280px at calc(100% - 80px) calc(100% - 120px), rgba(213, 205, 255, .6), rgba(213, 205, 255, 0) 100%),
    rgba(253, 252, 250, .82);
}
dialog.bk[open] { animation: bk-in .22s ease-out; }
@keyframes bk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
dialog.bk.is-complete { width: min(760px, calc(100% - 32px)); }
.bk-x { position: absolute; top: -48px; inset-inline-end: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(23, 22, 19, .14); background: rgba(255, 255, 255, .7); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s; }
.bk-x:hover { border-color: rgba(23, 22, 19, .35); }
.bk-x svg { width: 16px; height: 16px; }
.bk .meet-main { width: auto; padding: 0; margin: 0; }
.bk .meet-card { min-height: 480px; }
.bk .meet-mode { margin-bottom: 14px; }
.bk .meet-mode + .meet-mode { margin-bottom: 26px; }
.bk .meet-state a, .meet-details-dialog .meet-error a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bk button.button, .meet-details-dialog button.button { border: 0; font: inherit; font-size: 16px; font-weight: 550; cursor: pointer; }
.meet-details-dialog :is(input, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* The last screen is the thanks page: headline, one line, one button, and a quiet line with the booked time. */
.bk-fun { position: relative; text-align: center; padding: 56px 16px 24px; display: grid; justify-items: center; gap: 28px; }
.bk-fun::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -240px; width: 680px; height: 680px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(213, 205, 255, .35), rgba(255, 232, 196, .22) 46%, transparent 68%); filter: blur(8px); pointer-events: none; }
.bk-fun h2 { margin: 0; max-width: none; font-size: clamp(40px, 6.4vw, 76px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; outline: none; }
html[lang="he"] .bk-fun h2 { letter-spacing: 0; line-height: 1.15; }
.bk-fun .lede { margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.55; color: var(--muted); }
.bk-fun-details { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); display: grid; gap: 2px; }
.bk-fun-details bdi { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  dialog.bk { width: 100%; max-height: 92dvh; margin: auto 0 0; overflow: auto; overscroll-behavior: contain; border-radius: 0; }
  dialog.bk[open] { animation-name: bk-up; }
  @keyframes bk-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  dialog.bk.is-complete { width: 100%; padding: 16px 16px 24px; }
  .bk .meet-card { border-radius: 18px 18px 0 0; }
  .bk-x { top: 12px; inset-inline-end: 12px; z-index: 2; }
  .bk-fun { padding: 32px 4px 16px; gap: 22px; }
  .bk-fun .lede { font-size: 17px; }
  .closing .lede { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { dialog.bk[open] { animation: none; } }
.form .button { border: 0; cursor: pointer; justify-self: center; margin-top: 6px; font-size: 16px; font-family: inherit; }

/* The footer close: the page fades into the orb lavender (decision 0010).
   Text inside is one step darker than --muted: it must stay AA over the deep end of the wash. */
.site-footer {
  margin-top: 120px;
  padding: 56px 0 30px;
  background: linear-gradient(180deg, rgba(213, 205, 255, 0) 0%, rgba(238, 234, 255, .3) 25%, rgba(213, 205, 255, .34) 60%, rgba(213, 205, 255, .5) 100%);
}
.foot-grid { display: grid; grid-template-columns: 1.4fr auto auto; gap: 44px 88px; align-items: start; }
.foot-brand .brand { display: inline-flex; }
.foot-brand p { margin: 12px 0 0; color: #5b584f; font-size: 14px; max-width: 280px; }
.foot-col { display: grid; gap: 12px; justify-items: start; align-content: start; font-size: 14px; }
.foot-head { display: block; color: #5b584f; font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 6px; }
html[dir="rtl"] .foot-head { letter-spacing: .06em; }
.foot-col a { color: #5b584f; transition: color .15s; padding-block: 5px; margin-block: -5px; } /* 32px hit area, same layout */
.foot-col a:hover { color: var(--ink); }
/* LinkedIn: the word then the glyph, in the footer Contact column (company page) and closing the
   founder bio on the about page (personal profile), founder ask 2026-09-24. Same look in both. */
.li-link { display: inline-flex; align-items: center; gap: 7px; }
.li-link .li { width: 14px; height: 14px; flex: none; }
.who-grid .founder-li { margin-top: 22px; font-size: 14px; line-height: 1; }
.founder-li .li-link { color: #5b584f; text-decoration: none; padding-block: 9px; margin-block: -9px; transition: color .15s; } /* 32px hit area, same layout */
.founder-li .li-link:hover { color: var(--ink); }
.foot-legal { margin-top: 54px; padding-top: 20px; border-top: 1px solid rgba(23, 22, 19, .16); display: flex; justify-content: space-between; gap: 16px; color: #5b584f; font-size: 13px; }
.foot-legal a { transition: color .15s; display: inline-block; padding: 8px 4px; margin: -8px -4px; }
.foot-legal a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .wrap { width: min(100% - 32px, 1080px); }
  .nav { height: 64px; }
  .eyebrow { top: 84px; }
  /* Phones: the hero is exactly one screen (small-viewport height, so browser bars do not make it
     jump); content centered, the hand starts at the bottom edge (founder 2026-09-02, mock 1b). */
  .hero { min-height: 100svh; padding: 120px 0 60px; }
  .hero-flight-fallback { width: min(48vw, 220px); top: 14%; }
  .section { padding: 84px 0; }
  .manifesto .hero-about { min-height: auto; padding: 100px 0 12px; }
  .manifesto .stack { padding: 16px 0 56px; }
  .hero-centered .chapter-row .wrap { padding: 40px 0 24px; }
  .chapter-art { width: 100%; }
  .stack-item + .stack-item { margin-top: 56px; }
  .stack-title { font-size: 28px; }
  .who-grid { grid-template-columns: 1fr; }
  .who-stage { grid-template-columns: 1fr; gap: 40px; }
  .who-photo { aspect-ratio: 4 / 5; max-width: 420px; }
  .who-photo img { position: static; }
  /* About on phones: every section centers, chapter marks and twin columns included (founder,
     2026-09-03); desktop keeps 02, 03, and the who-columns on the left edge. */
  .manifesto .chapter-row, .manifesto .section .wrap { text-align: center; }
  .manifesto .quiet, .manifesto .statement, .manifesto .step p { margin-inline: auto; }
  .copy-mail { font-size: 17px; min-height: 50px; padding: 0 22px; }
  h2 { margin-bottom: 40px; }
  .steps, .steps-4 { grid-template-columns: 1fr; }
  #approach .steps-4 .step:nth-child(2) { border-top: 1px solid var(--ink); padding-top: 22px; }
  .ways { grid-template-columns: 1fr; gap: 40px; }
  .ways > :nth-child(1) { margin-top: 0; }
  .panel { padding: 24px; min-height: 0; }
  .steps { gap: 26px; }
  .closing { padding-top: 100px; }
  html[dir="rtl"] .h2-stagger { font-size: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .site-footer { margin-top: 80px; padding-top: 44px; }
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* "You dream; / we execute." keeps its two staggered lines down to 320px: the 2.2em indent plus
   44px type needs 380px. Measured 2026-09-02 (max two-line size: 37px at 320, 43px at 360). */
@media (max-width: 379px) {
  .closing h2.h2-stagger { font-size: 11.5vw; }
  html[dir="rtl"] .closing h2.h2-stagger { font-size: 40px; }
}

/* Phones held sideways (under 500px tall, landscape): a compact hero so the button stays on the
   first screen in both languages; there is no room for the hand under the text, so the animation
   is off in this orientation (founder, 2026-09-02, mock 4). Portrait phones never match. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 122px 0 32px; }
  .eyebrow { top: 80px; }
  .hero-inner { gap: 14px; }
  .hero:not(.hero-about) h1,
  html[lang="he"] .hero:not(.hero-about) #hero-title { font-size: clamp(24px, 5.2vw, 40px); }
  .hero:not(.hero-about) .lede { font-size: 15px; line-height: 1.5; max-width: 620px; }
  .hero-flight { display: none; }
}

/* Short pages on phones (portal, thanks, form-error, jobs): the hero ends where its content ends
   and the footer follows 128px below the button, instead of a full-screen hero and 300px of empty
   page (founder, 2026-09-02, mock 5). The 404 keeps its full-screen crew. */
@media (max-width: 760px) {
  main > .hero:only-child:not(:has(.crew-404)) { min-height: 0; padding: 130px 0 48px; }
  .page-jobs .hero-about { padding-bottom: 28px; }
  .page-jobs .section { padding: 56px 0 40px; }
  body:has(main > .hero:only-child:not(:has(.crew-404))) .site-footer,
  body.page-jobs .site-footer { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .button:hover, .skip-link { transition: none; transform: none; }
}

/* Founder line art: the journey, the jet, the flick (2026-08-31).
   All decorative: hidden from AT. Desktop floats them behind the sections;
   under 900px the journey and the flick sit in flow as section separators and the jet is desktop-only
   (founder direction 2026-09-02, mock 6b). */
.button-mark { display: inline-block; vertical-align: -3px; margin-inline-start: 2px; }

.art { position: absolute; height: auto; pointer-events: none; }
.ways { position: relative; z-index: 1; }
.art-transformation { left: 50%; transform: translateX(-52%); bottom: 24px; width: 620px; opacity: .85; }
/* An opaque base lets the lavender jet blend inside the isolated section. */
#approach { background-color: var(--bg); }
.art-modern-plane { top: 60px; inset-inline-end: -40px; width: clamp(320px, 30vw, 460px); mix-blend-mode: darken; }
.closing .art-flick { inset-inline-start: -20px; bottom: 0; width: clamp(360px, 34vw, 520px); }
/* RTL mirrors the section layouts, so the art mirrors with them (same rule as the mark). */
html[dir="rtl"] .art-modern-plane, html[dir="rtl"] .art-flick { transform: scaleX(-1); }
html[dir="rtl"] .art-transformation { transform: translateX(-48%) scaleX(-1); width: 540px; bottom: 12px; }
.art-flick-mobile { display: none; }
@media (max-width: 900px) {
  .art { display: none; }
  .section, .closing { display: flex; flex-direction: column; }
  .section .art-transformation, .section .art-flick-mobile {
    display: block; position: static; order: 1; height: auto;
    width: 100%; max-width: 400px; margin: 56px auto 0; transform: none; opacity: .9;
  }
  .section .art-flick-mobile { max-width: 300px; }
  /* Hebrew keeps the journey mirrored but not the phone flick: with no form to point at, the plane
     flies up and to the right on phones in both languages (founder, 2026-09-02). */
  html[dir="rtl"] .section .art-transformation { transform: scaleX(-1); width: 100%; }
}