/* Web fonts, served from this site (SIL Open Font License). */
@font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/frank-ruhl-libre-700-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: 'Frank Ruhl Libre'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/frank-ruhl-libre-700-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: 'Frank Ruhl Libre'; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/frank-ruhl-libre-900-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: 'Frank Ruhl Libre'; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/frank-ruhl-libre-900-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-400-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-400-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-500-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-500-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-600-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-600-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-700-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: 'IBM Plex Sans Hebrew'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-hebrew-700-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; }
/* Layout: full-bleed bands ruled in ink, asymmetric two-column openers, and flat
   outlined blocks that echo the isometric logo. One look, light, by choice. */
:root {
  color-scheme: light;

  --paper: #f3f5f8;
  --surface: #ffffff;
  --ink: #0e1420;
  --ink-soft: #465066;
  --on-ink: #ffffff;
  --on-ink-soft: #cfd6e2;

  --sky-1: #b9daf7;
  --sky-2: #74b4f2;
  --sky-3: #4a8fd4;
  --sky-ink: #124a94;
  --mint-1: #a9efc6;
  --mint-2: #7ad3a0;
  --mint-3: #55b47d;
  --coral-1: #f8a09b;
  --coral-2: #ea7c77;
  --coral-3: #d95d58;
  --mint-ink: #075a38;
  --coral-ink: #8f2420;
  --focus: #124a94;
  --inkb-1: #3a455c;
  --inkb-2: #232c40;
  --inkb-3: #0e1420;
  --scrim: rgb(14 20 32 / 0.72);
  --dot: rgb(14 20 32 / 0.14);
  --glow: rgb(116 180 242 / 0.4);

  --font-display: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --font-body: "IBM Plex Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  --rule: 1.5px solid var(--ink);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(3rem, 8vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding keeps a focused element clear of the sticky header and the accessibility button */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; scroll-padding-bottom: 5rem; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3, p, ul, blockquote, figure { margin: 0; }
p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.on-ink :focus-visible { outline-color: var(--on-ink); }
.on-ink .form :focus-visible, .on-ink .case :focus-visible { outline-color: var(--focus); }
::placeholder { color: var(--ink-soft); opacity: 1; }
/* First stop for keyboard users */
.skip { position: absolute; z-index: 50; top: 0.5rem; right: 0.5rem; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--on-ink); font-weight: 600; transform: translateY(-200%); }
.skip:focus { transform: none; }
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }
.nb { white-space: nowrap; }
.latin { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.masthead { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: var(--rule); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.875rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; }
.brand { flex: none; white-space: nowrap; min-height: 2.75rem; }
.brand img { height: 2.375rem; width: auto; }
.brand-word {
  color: var(--ink);
  background: linear-gradient(90deg, var(--ink) 0%, var(--sky-3) 14%, var(--mint-3) 28%, var(--coral-3) 42%, var(--sky-3) 56%, var(--mint-3) 70%, var(--coral-3) 84%, var(--ink) 100%);
  background-size: 700% 100%;
  background-position: calc(var(--sp, 0) * 100%) 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: var(--sky-2); }

/* Mode switches in the header */
.site-nav { align-items: center; }
.site-nav a.mode { position: relative; min-height: 0; padding: 0.2rem 0.75rem; border: var(--rule); font-size: 0.875rem; font-weight: 600; white-space: nowrap; background: var(--surface); }
.site-nav a.mode::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2.75rem; transform: translateY(-50%); }
.site-nav a.mode:hover { background: var(--sky-1); }
.site-nav a.mode.ai { background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-weight: 500; }
.site-nav a.mode.ai:hover { background: var(--sky-ink); }
html.tachles .site-nav a.mode[data-tachles-toggle] { background: var(--mint-1); }
/* "תקצר לי": only the parts marked data-tachles stay */
html.tachles main > section:not([data-tachles]) { display: none; }
html.tachles #tachles { border-top: 0; }

/* Type roles */
.label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em; }
.label::before { content: ""; width: 0.625rem; height: 0.625rem; background: var(--sky-2); border: var(--rule); }
.display { font-family: var(--font-display); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: clamp(1.1875rem, 2.2vw, 1.375rem); line-height: 1.6; color: var(--ink-soft); max-width: 34rem; }

.btn {
  display: inline-block; padding: 0.75rem 1.375rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--on-ink); border: var(--rule);
  box-shadow: -4px 4px 0 var(--sky-2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translate(-2px, 2px); box-shadow: -2px 2px 0 var(--sky-2); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-light { background: var(--paper); color: var(--ink); }
.link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.link:hover { text-decoration-thickness: 3px; }

.iso polygon { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.cube { width: 1.375rem; flex: none; }
.cube polygon { stroke-width: 1; }

/* Opener */
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: var(--band);
}
.hero-text { display: grid; gap: 1.5rem; justify-items: start; }
.hero h1 { font-size: clamp(2.625rem, 7.4vw, 5rem); }
.hl { display: inline-block; background: var(--sky-1); border: var(--rule); padding: 0.02em 0.14em 0.06em; margin-block: 0.06em; }
.hl.mint { background: var(--mint-1); }
.byline { width: 100%; border-top: var(--rule); padding-top: 1rem; font-weight: 500; max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero-art svg { width: 100%; }
.hero-art text { font-family: var(--font-body); font-weight: 600; font-size: 21px; fill: var(--ink); }
.hero-art .leader { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
/* The whole stack floats as one piece; pointing at it slowly joins the layers into a single block. */
.hero-art svg { animation: float 7s ease-in-out infinite; }
/* --jp (0..1, set by site.js from the scroll position) brings the slabs together; pointing at the
   stack sets it to 1 and the slabs close up slowly. */
.hero-art .slab { transform: translateY(calc(var(--join) * var(--jp, 0))); transition: transform 0.45s ease-out; }
.hero-art .leader { opacity: calc(1 - var(--jp, 0)); transition: opacity 0.45s ease-out; }
.hero-art svg:hover { --jp: 1 !important; }
.hero-art svg:hover .slab { transition-duration: 1.6s; transition-timing-function: cubic-bezier(0.3, 0.6, 0.2, 1); }
.hero-art svg:hover .leader { transition-duration: 0.8s; }
.hero-art .leader { animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
@keyframes float { 50% { transform: translateY(-5px); } }

/* Depth in the opener: a dot grid that scrolls slower than the page (--sy from site.js),
   and a soft glow that follows the pointer (--mx / --my). */
.hero { background-image: radial-gradient(circle at 1px 1px, var(--dot) 1.3px, transparent 0); background-size: 28px 28px; background-position: 0 calc(var(--sy, 0) * 0.35px); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(var(--gs, 15rem) circle at var(--mx, 22%) var(--my, 45%), var(--glow), transparent 65%); }
.hero .wrap { position: relative; }
/* The glow follows a mouse; on touch screens there is nothing for it to follow */
@media (hover: none), (pointer: coarse) { .hero::before { display: none; } }

/* The guide: one small dot that keeps the reader company and settles on the main button in view */
.guide { position: fixed; left: 0; top: 0; z-index: 15; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink-soft); color: var(--ink-soft); pointer-events: none; opacity: 0; transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease; }
.guide.is-on { opacity: 0.28; }
.guide.is-on.is-docked { opacity: 1; background: var(--coral-2); color: var(--coral-2); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.65); }
.guide.is-docked::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid currentColor; animation: guide-ping 2s ease-out infinite; }
@keyframes guide-ping { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }

/* Sections */
.section { border-top: var(--rule); }
.section > .wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-block: var(--band); }
.section-head { display: grid; gap: 0.875rem; max-width: 46rem; }
.section-head h2 { font-size: clamp(2.125rem, 5.4vw, 3.5rem); }
.section-head p { font-size: 1.1875rem; color: var(--ink-soft); }
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-ink .section-head p, .on-ink .muted { color: var(--on-ink-soft); }
.on-ink .label::before { border-color: var(--on-ink); }
.on-mint { background: var(--mint-1); }
.on-mint .section-head p { color: var(--ink); }
.on-surface { background: var(--surface); }

.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 5vw, 4rem); }
.svc li { display: flex; align-items: center; gap: 0.875rem; padding-block: 1rem; border-top: var(--rule); font-size: 1.25rem; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); }
.stat { display: grid; gap: 0.5rem; align-content: start; border-top: 1.5px solid currentColor; padding-top: 1rem; }
.stat b { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.stat:nth-child(1) b { color: var(--sky-2); }
.stat:nth-child(2) b { color: var(--mint-2); }
.stat:nth-child(3) b { color: var(--coral-2); }
/* Track record: one lead sentence, then the brand names set large */
.record { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.record-lead { font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.5; max-width: 50rem; text-wrap: balance; }
.brands { display: grid; gap: 1rem; border-top: 1.5px solid var(--on-ink); padding-top: 1.5rem; }
.brands > p { font-size: 1.0625rem; max-width: 46rem; }
.past-clients { width: 100%; max-width: 54rem; border: 1.5px solid var(--on-ink); }
.brands ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.brands li { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.375rem); line-height: 1.25; }
.brands .cube { width: 1.125rem; }
.brands .years { color: var(--sky-2); letter-spacing: 0.14em; font-size: 0.9375rem; text-align: right; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(1.5rem, 4vw, 3rem); }
.two-col p { font-size: 1.125rem; }

.case { display: grid; gap: 1.5rem; justify-items: start; background: var(--paper); color: var(--ink); border: var(--rule); padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: -10px 10px 0 var(--sky-2); }
.case h3 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.case > p { font-size: 1.125rem; max-width: 46rem; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.kpis li { display: grid; gap: 0.25rem; align-content: start; border-top: var(--rule); padding-top: 0.75rem; font-size: 0.9375rem; line-height: 1.45; }
.kpis b { font-family: var(--font-display); font-weight: 900; font-size: 2.25rem; line-height: 1; direction: ltr; text-align: right; }

/* The open invitation sits on its own, centred above the client logos */
.spot { display: block; width: min(100%, 16rem); margin-inline: auto; border: var(--rule); background: var(--paper); box-shadow: -5px 5px 0 var(--mint-2); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.spot:hover { transform: translate(-2px, 2px); box-shadow: -3px 3px 0 var(--mint-2); }
.spot img { width: 100%; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.875rem; }
.logos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--rule); background: var(--surface); }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.shot { display: block; background: var(--surface); border: var(--rule); box-shadow: -6px 6px 0 var(--ink); }
.shot img { width: 100%; }
.shot.wide { grid-column: 1 / -1; overflow-x: auto; }
.shot.wide img { min-width: 40rem; }

.founder { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.portrait { background: var(--sky-2); border: var(--rule); box-shadow: -12px 12px 0 var(--mint-2); aspect-ratio: 4 / 5; overflow: hidden; max-width: 26rem; margin-inline-start: 12px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.founder-text { display: grid; gap: 1.25rem; justify-items: start; }
.founder-text h2 { font-size: clamp(2.25rem, 5.4vw, 3.5rem); }
.founder-text .latin { color: var(--sky-ink); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.9375rem; }
.founder-text > p { font-size: 1.1875rem; max-width: 36rem; }
.checks { display: grid; gap: 0.75rem; max-width: 38rem; }
.checks li { display: flex; gap: 0.75rem; align-items: flex-start; }
.checks .cube { margin-top: 0.25rem; }

.integrations img { border: var(--rule); background: var(--surface); padding: clamp(0.75rem, 3vw, 2rem); width: 100%; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--on-ink); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: -10px 10px 0 var(--sky-2); margin-inline-start: 10px; }
.field { display: grid; gap: 0.375rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.9375rem; font-weight: 600; }
.field .req { font-weight: 500; font-size: 0.8125rem; color: var(--ink-soft); }
.field input, .field textarea { font: inherit; color: var(--ink); background: var(--surface); border: var(--rule); border-radius: 0; padding: 0.75rem 0.875rem; width: 100%; }
.form .btn { justify-self: start; }
/* Form messages, in the voice of an agent reporting back: a marker, the text, a blinking cursor */
.field-msg { display: flex; gap: 0.375rem; align-items: baseline; font-size: 0.8125rem; font-weight: 500; line-height: 1.45; color: var(--coral-ink); }
.field-msg::before { content: "›"; font-family: var(--font-mono); font-weight: 700; }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--coral-3); box-shadow: -3px 3px 0 var(--coral-1); }
.form-status { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 0.625rem; background: var(--ink); color: var(--on-ink); border-inline-start: 4px solid var(--state, var(--sky-2)); padding: 0.75rem 1rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--state, var(--sky-2)); transform: translateY(-0.05em); }
.form-status::after { content: ""; flex: none; width: 0.5em; height: 1.05em; align-self: center; background: var(--state, var(--sky-2)); animation: caret 1s steps(2, jump-none) infinite; }
.form-status[data-state="ok"] { --state: var(--mint-2); }
.form-status[data-state="error"] { --state: var(--coral-2); }
.form-status[data-state="busy"] { --state: var(--sky-2); }
@keyframes caret { 50% { opacity: 0; } }
.profiles { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.profiles a { display: inline-flex; gap: 0.75rem; padding: 0.5rem 0.875rem; border: 1.5px solid var(--on-ink); font-family: var(--font-mono); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
.profiles a:hover { background: var(--on-ink); color: var(--ink); }

.profiles.on-paper a { border-color: var(--ink); }
.profiles.on-paper a:hover { background: var(--ink); color: var(--on-ink); }

/* Short divider under a heading */
hr.short { width: 3.5rem; height: 0; margin: 0.25rem 0; border: 0; border-top: 1.5px solid var(--ink-soft); opacity: 0.5; }

/* Consulting: three steps in a row */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 0.375rem; align-content: start; border-top: var(--rule); padding-top: 1rem; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.875rem; color: var(--sky-ink); }
.steps b { font-size: 1.3125rem; line-height: 1.3; }
.steps span { color: var(--ink-soft); }

/* Digital dreams page */
.ratio { display: grid; gap: 1.5rem; max-width: 50rem; }
.ratio-row { display: grid; gap: 0.625rem; }
.ratio-row p { font-size: 1.1875rem; }
.bar { display: flex; height: 2.25rem; border: var(--rule); }
.bar i { display: block; }
.bar .plan, .key.plan { background: var(--sky-2); }
.bar .build, .key.build { background: var(--coral-2); }
.bar i + i { border-inline-start: var(--rule); }
.legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--ink-soft); }
.key { display: inline-block; width: 0.875rem; height: 0.875rem; border: var(--rule); }
.key.build { margin-inline-start: 1rem; }
.tips { display: grid; gap: 0; counter-reset: tip; max-width: 54rem; }
.tips > li { counter-increment: tip; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.5rem; border-top: var(--rule); padding-block: 1.5rem; }
.tips > li::before { content: counter(tip); grid-row: 1 / span 3; font-family: var(--font-display); font-weight: 900; font-size: 3.5rem; line-height: 0.9; color: var(--sky-ink); }
.tips > li > * { grid-column: 2; }
.tips h3 { font-size: 1.375rem; line-height: 1.3; }
.tips p { color: var(--ink-soft); font-size: 1.0625rem; }
.chain { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chain li { display: inline-flex; align-items: center; gap: 0.5rem; border: var(--rule); background: var(--paper); padding: 0.2rem 0.75rem; font-weight: 600; font-size: 0.9375rem; }
.chain li:not(:last-child)::after { content: "←"; color: var(--sky-3); margin-inline-start: 0.25rem; }
.founder-text > p + p { margin-top: -0.25rem; }

/* Case study */
.pull { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.35; border-inline-start: 6px solid var(--coral-2); padding-inline-start: 1.25rem; margin-block: 1.75rem; text-wrap: balance; }
.prose h2.first, .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sol h3 { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1.3125rem; font-weight: 700; line-height: 1.35; }
.proc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.proc { display: grid; grid-template-rows: auto 1fr auto; gap: 0.875rem; background: var(--paper); border: var(--rule); padding: 1.5rem; }
.proc h3 { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.proc .cube { margin-top: 0.15rem; }
.proc ul { list-style: square; padding-inline-start: 1.25rem; display: grid; gap: 0.375rem; align-content: start; color: var(--ink-soft); }
.proc li::marker { color: var(--sky-3); }
.outcome { display: flex; gap: 0.625rem; font-weight: 600; border-top: var(--rule); padding-top: 0.875rem; }
.outcome::before { content: "←"; color: var(--sky-3); font-weight: 700; }
.changes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; width: 100%; }
.changes li { display: grid; gap: 0.5rem; align-content: start; border-top: 1.5px solid currentColor; padding-top: 1rem; }
.changes b { font-size: 1.1875rem; line-height: 1.3; }
.changes span { font-size: 1rem; }
.on-ink .changes span { color: var(--on-ink-soft); }
.case .changes span { color: var(--ink-soft); }

/* Illustrations and split layouts */
.art { width: 100%; }
.blend { mix-blend-mode: multiply; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.svc.one { grid-template-columns: minmax(0, 1fr); }
.section, .hero, .page-hero { position: relative; overflow: hidden; }
/* Loyalty tiles: three equal cards, each with a figure row of the same height */
.stats.light { gap: 1.5rem; padding-inline-start: 8px; }
.stats.light .stat { gap: 1rem; border: var(--rule); background: var(--paper); padding: 1.5rem; box-shadow: -8px 8px 0 var(--sky-2); }
.stats.light .stat:nth-child(2) { box-shadow: -8px 8px 0 var(--mint-2); }
.stats.light .stat:nth-child(3) { box-shadow: -8px 8px 0 var(--coral-2); }
.stats.light .figure { display: flex; align-items: flex-end; gap: 0.75rem; height: 5.5rem; }
.stats.light .figure b { font-size: 5.5rem; line-height: 0.82; color: var(--ink); }
.stats.light .figure small { font-size: 1.125rem; font-weight: 700; line-height: 1.2; padding-bottom: 0.125rem; }
.stats.light .figure img { height: 125%; width: auto; mix-blend-mode: multiply; margin-inline-start: -0.75rem; }
.stats.light .stat > span { font-size: 1.0625rem; }
.links { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.contact .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 26rem; }
.contact .links a.primary { grid-column: 1 / -1; }
.contact .links a.plain { justify-content: center; text-align: center; }
.on-ink .links a.primary { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.on-ink .links a.primary:hover { background: var(--sky-1); border-color: var(--sky-1); }
.links a.plain { display: inline-flex; gap: 0.5rem; padding: 0.625rem 1rem; border: 1.5px solid currentColor; font-weight: 600; text-decoration: none; }
.links a.plain:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.on-ink .links a.plain:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.en-note { border-top: var(--rule); padding-top: 1.5rem; max-width: 44rem; direction: ltr; text-align: left; color: var(--ink-soft); }

/* Portfolio viewer */
.pdf-dialog { width: min(58rem, calc(100vw - 1rem)); height: min(92vh, 64rem); max-width: none; max-height: none; padding: 0; border: var(--rule); background: var(--surface); color: var(--ink); }
.pdf-dialog[open] { display: flex; flex-direction: column; }
.pdf-dialog::backdrop { background: var(--scrim); }
.pdf-dialog header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 0.75rem 1rem; border-bottom: var(--rule); }
.pdf-dialog h2 { font-size: 1.0625rem; font-weight: 700; margin-inline-end: auto; }
.pdf-dialog .btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.375rem 0.875rem; box-shadow: none; }
.pdf-pages { flex: 1; overflow: auto; background: var(--inkb-2); padding: 1rem; display: grid; gap: 1rem; align-content: start; }
.pdf-page { background: var(--surface); width: 100%; }
.pdf-page canvas { display: block; width: 100%; height: 100%; }
.pdf-note { color: var(--on-ink); padding: 2rem 1rem; text-align: center; }
.pdf-note a { color: var(--sky-1); }

/* subk.co.il mini-site */
.site-subk .label::before { background: var(--mint-2); }
.site-subk .btn { box-shadow: -4px 4px 0 var(--mint-2); }
.site-subk .btn:hover { box-shadow: -2px 2px 0 var(--mint-2); }
.site-subk .site-nav a:hover { border-bottom-color: var(--mint-2); }
.site-subk .person h1 .en { color: var(--ink-soft); }

/* Inner pages */
.page-hero .wrap { display: grid; gap: 1.25rem; justify-items: start; padding-block: clamp(2.5rem, 7vw, 5rem); }
.page-hero h1 { font-size: clamp(2.5rem, 7vw, 4.75rem); }
.page-hero .split h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.1; }
.page-hero .split { width: 100%; }
.person .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.person h1 { font-size: clamp(3rem, 9vw, 6rem); }
.person h1 .en { display: block; text-align: right; margin-top: 1rem; font-family: var(--font-mono); font-weight: 500; font-size: clamp(0.9375rem, 2.2vw, 1.375rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky-ink); }
.person .lead { color: var(--ink); max-width: 38rem; }
.chip { display: inline-block; border: var(--rule); background: var(--surface); padding: 0.25rem 0.875rem; font-weight: 500; }

.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; margin-top: 3.5rem; padding-top: 1.5rem; border-top: var(--rule); text-wrap: balance; }
.prose h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin-top: 2.25rem; }
.prose ul { list-style: square; padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--sky-3); }
.prose a { font-weight: 600; text-underline-offset: 0.3em; }
.sol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 5vw, 4rem); }
.sol { display: grid; gap: 0.625rem; align-content: start; border-top: var(--rule); padding-block: 1.5rem; }
.sol h2 { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1.3125rem; font-weight: 700; line-height: 1.35; }
.sol .cube { margin-top: 0.2rem; }
.sol p { color: var(--ink-soft); }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

.site-footer { border-top: var(--rule); font-size: 0.9375rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.5rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer a { text-underline-offset: 0.3em; }
/* Footer links: on hover a faint, slanted echo of the label appears below, off to the right */
.site-footer nav a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer nav a::after {
  content: attr(data-label); position: absolute; top: calc(50% + 0.8em); right: 0; white-space: nowrap; pointer-events: none;
  color: var(--ink); opacity: 0; transform: translate(0, -4px) skewX(-16deg);
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.site-footer nav a:hover::after, .site-footer nav a:focus-visible::after { opacity: 0.22; transform: translate(10px, 2px) skewX(-16deg); }

/* Moved-site notice (subk.co.il) */
.moved { min-height: 100vh; display: grid; place-content: center; gap: 1.25rem; justify-items: start; padding: var(--gutter); }
.moved h1 { font-size: clamp(2.25rem, 7vw, 4rem); }

@media (max-width: 56rem) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .changes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 46rem) {
  .hero .wrap, .founder, .contact, .two-col, .svc, .sol-grid, .person .wrap, .split { grid-template-columns: minmax(0, 1fr); }
  .shots, .proc-grid, .changes, .steps { grid-template-columns: minmax(0, 1fr); }
  .tips > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .tips > li::before { font-size: 2.5rem; }
  .masthead .wrap { flex-wrap: nowrap; padding-block: 0.625rem; }
  .brand { font-size: 1.25rem; }
  .brand img { height: 2rem; }
  .site-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav .home-link { display: none; }
  .site-nav a.mode { order: -1; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .hero-art svg { max-width: 24rem; margin-inline: auto; }
  .portrait { max-width: 20rem; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav { gap: 0.25rem 1rem; font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art svg, .hero-art .leader, .guide.is-docked::after, .form-status::after { animation: none; }
  .hero-art .slab { transform: none; transition: none; }
  .hero-art .leader { opacity: 1; transition: none; }
  .hero { background-position: 0 0; }
  .hero::before { display: none; }
  .site-footer nav a::after { transition: none; }
  .btn { transition: none; }
}

@media print {
  .masthead { position: static; }
  .guide, .a11y, .skip, .later { display: none; }
}

/* Messages from clients, as plain text, for anyone who cannot read them off the screenshots */
.transcript { max-width: 46rem; }
.transcript summary { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 0.3em; }
.transcript ol { margin: 0.5rem 0 0; padding-inline-start: 1.5rem; display: grid; gap: 0.75rem; }

/* "Send me an email so I can come back later": one field above the footer */
.later { border-top: var(--rule); background: var(--surface); }
.later .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem clamp(1.5rem, 5vw, 4rem); align-items: center; padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.later-head { display: grid; gap: 0.5rem; }
.later h2 { font-size: clamp(1.625rem, 3.4vw, 2.25rem); }
.later-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; justify-items: start; }
.later-form .field { width: 100%; max-width: 30rem; }
.later-form .form-status { grid-column: 1 / -1; }

/* Glossary on the accessibility page */
.glossary { display: grid; gap: 0.25rem; margin: 0; }
.glossary dt { font-weight: 700; margin-top: 0.75rem; }
.glossary dt .full { font-weight: 400; color: var(--ink-soft); }
.glossary dd { margin: 0; }

/* Accessibility menu */
.a11y { position: fixed; z-index: 40; bottom: 4.75rem; left: 1rem; }
.a11y-toggle { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; background: var(--ink); color: var(--on-ink); border: 2px solid var(--on-ink); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); cursor: pointer; }
.a11y-toggle svg { fill: currentColor; }
.a11y-panel { position: absolute; bottom: calc(100% + 0.5rem); left: 0; width: min(20rem, calc(100vw - 2rem)); max-height: calc(100vh - 9.5rem); overflow: auto; display: grid; gap: 0.75rem; padding: 1rem; background: var(--surface); color: var(--ink); border: var(--rule); box-shadow: -6px 6px 0 var(--sky-2); }
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1.25rem; font-weight: 700; }
.a11y-panel button, .a11y-panel a { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit; font-weight: 600; text-align: start; color: var(--ink); background: var(--paper); border: var(--rule); border-radius: 0; cursor: pointer; }
.a11y-panel button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.a11y-panel button[aria-pressed="true"]::before { content: "✓"; }
.a11y-panel button:disabled { opacity: 0.5; cursor: default; }
.a11y-options, .a11y-foot { display: grid; gap: 0.375rem; }
.a11y-foot { border-top: var(--rule); padding-top: 0.75rem; }
.a11y-size { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; align-items: center; }
.a11y-size button { justify-content: center; text-align: center; }
.a11y-size output { min-width: 3.5rem; text-align: center; font-weight: 700; }

/* What the menu switches on */
html.a11y-contrast { --paper: #fff; --surface: #fff; --ink: #000; --ink-soft: #000; --on-ink: #fff; --on-ink-soft: #fff; --sky-ink: #002a7a; --mint-ink: #003d24; --coral-ink: #7a0c08; --mint-1: #fff; --dot: transparent; --focus: #000; }
html.a11y-contrast .hero::before { display: none; }
html.a11y-contrast .stat b, html.a11y-contrast .tips > li::before, html.a11y-contrast .steps li::before { color: inherit !important; }
html.a11y-contrast .brand-word { background: none; -webkit-text-fill-color: currentColor; }
html.a11y-contrast .on-ink .form :focus-visible, html.a11y-contrast .on-ink .case :focus-visible { outline-color: #000; }
html.a11y-dark { filter: invert(1) hue-rotate(180deg); }
html.a11y-mono { filter: grayscale(1); }
html.a11y-dark.a11y-mono { filter: invert(1) hue-rotate(180deg) grayscale(1); }
html.a11y-dark img, html.a11y-dark canvas { filter: invert(1) hue-rotate(180deg); }
html.a11y-font { --font-display: Arial, "Segoe UI", sans-serif; --font-body: Arial, "Segoe UI", sans-serif; --font-mono: Arial, "Segoe UI", sans-serif; }
html.a11y-font .display { font-weight: 700; line-height: 1.2; letter-spacing: 0; }
html.a11y-spacing body { line-height: 2; letter-spacing: 0.06em; word-spacing: 0.16em; }
html.a11y-spacing .display { line-height: 1.35; }
html.a11y-spacing p + p, html.a11y-spacing li + li { margin-top: 0.75em; }
html.a11y-links a:not(.btn):not(.brand):not(.shot):not(.spot) { text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: 0.25em; font-weight: 700; }
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-calm { scroll-behavior: auto; }
html.a11y-calm .guide, html.a11y-calm .hero::before { display: none; }
html.a11y-calm .hero { background-position: 0 0; }
html.a11y-calm .hero-art .slab { transform: none; }
html.a11y-calm .hero-art .leader { opacity: 1; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11h-7l4 8-3 1.5-4-8-5 5z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important; }
/* Very large text: one column everywhere, and the header stops following the page */
html.a11y-big .hero .wrap, html.a11y-big .founder, html.a11y-big .contact, html.a11y-big .split, html.a11y-big .person .wrap, html.a11y-big .sol-grid, html.a11y-big .svc,
html.a11y-big .stats, html.a11y-big .steps, html.a11y-big .shots, html.a11y-big .proc-grid, html.a11y-big .changes, html.a11y-big .form, html.a11y-big .later .wrap, html.a11y-big .later-form { grid-template-columns: minmax(0, 1fr); }
html.a11y-big body { overflow-wrap: anywhere; }
html.a11y-big .masthead { position: static; }
html.a11y-big .masthead .wrap, html.a11y-big .site-nav { flex-wrap: wrap; white-space: normal; overflow: visible; }

@media (max-width: 46rem) {
  .later .wrap, .later-form { grid-template-columns: minmax(0, 1fr); }
  .later-form .btn { justify-self: start; }
}
/* Windows high-contrast mode drops backgrounds, so the gradient wordmark needs a real colour */
@media (forced-colors: active) {
  .brand-word { background: none; -webkit-text-fill-color: currentColor; }
  .btn, .a11y-toggle { border: 2px solid ButtonText; }
  .hero::before, .guide { display: none; }
}

.site-footer { padding-bottom: 3.5rem; }

/* Fields keep their own height when a neighbour grows an error message */
.field { align-content: start; }
.form.on-paper { border-color: var(--ink); margin-inline-start: 10px; max-width: 44rem; }
.prose .toc { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-underline-offset: 0.3em; }
kbd { font-family: var(--font-mono); font-size: 0.875em; border: var(--rule); background: var(--paper); padding: 0.1em 0.45em; }

/* What I do: four cards on the digital-dreams page */
.offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.offer li { display: grid; gap: 0.5rem; align-content: start; background: var(--paper); border: var(--rule); padding: 1.5rem; }
.offer h3 { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1.3125rem; font-weight: 700; line-height: 1.35; }
.offer .cube { margin-top: 0.2rem; }
.offer p { color: var(--ink-soft); }

/* 404: links first, then a small game and its (not very serious) leaderboard */
.game { display: grid; gap: 1rem; max-width: 46rem; }
.game canvas { width: 100%; height: 13rem; border: var(--rule); background: var(--paper); touch-action: manipulation; cursor: pointer; }
.game-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.game-score { font-weight: 600; font-size: 1.125rem; }
.game-score output { font-family: var(--font-mono); }
.scores { width: 100%; max-width: 46rem; border-collapse: collapse; }
.scores caption { text-align: start; font-weight: 700; font-size: 1.25rem; padding-bottom: 0.5rem; }
.scores th, .scores td { text-align: start; padding: 0.625rem 0.75rem; border-bottom: var(--rule); }
.scores thead th { font-size: 0.9375rem; }
.scores td:last-child, .scores thead th:last-child { font-family: var(--font-mono); direction: ltr; text-align: left; }
.scores tr.you { background: var(--mint-1); font-weight: 700; }
.scores-note { font-size: 0.9375rem; color: var(--ink-soft); }
html.a11y-big .offer { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 46rem) { .offer { grid-template-columns: minmax(0, 1fr); } }

/* Small print under a form: what happens with the details, and the privacy policy */
.form-note { grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-soft); }
.form-note a { font-weight: 600; text-underline-offset: 0.3em; }
/* GoHighLevel page */
.offer.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer .who { font-size: 0.875rem; font-weight: 600; color: var(--sky-ink); }
.faq h3 { margin-top: 1.75rem; }
html.a11y-big .offer.three { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 56rem) { .offer.three { grid-template-columns: minmax(0, 1fr); } }

/* A sent form closes its fields and offers to send another */
form[data-sent] .field, form[data-sent] > button[type="submit"], form[data-sent] .form-note { display: none; }
.form-again { display: none; justify-self: start; }
form[data-sent] .form-again { display: inline-block; }
.later-form[data-sent] { align-content: center; }
.shots[hidden] { display: none; }
.transcript .when-open, .transcript[open] .when-closed { display: none; }
.transcript[open] .when-open { display: inline; }
.callout { max-width: 46rem; font-size: 1.125rem; border-inline-start: 6px solid var(--mint-2); padding-inline-start: 1rem; }
.callout a { font-weight: 700; text-underline-offset: 0.3em; }

/* The hamburger, and the navigation panel it opens (small screens) */
.nav-open { display: none; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; background: var(--surface); border: var(--rule); cursor: pointer; }
.nav-panel { width: min(26rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); padding: 0; border: var(--rule); background: var(--paper); color: var(--ink); box-shadow: -8px 8px 0 var(--sky-2); }
.nav-panel::backdrop { background: var(--scrim); }
.nav-panel header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: var(--rule); background: var(--surface); }
.nav-panel h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; }
.nav-panel header .btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.375rem 0.875rem; box-shadow: none; }
.nav-panel nav { display: grid; gap: 0.5rem; padding: 0.5rem 1rem 1rem; }
.nav-panel ul { display: grid; }
.nav-panel a { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; text-decoration: none; font-weight: 600; }
.nav-panel .nav-main a { font-size: 1.25rem; padding-block: 0.5rem; border-bottom: var(--rule); }
.nav-panel a[aria-current] span, .nav-panel .nav-more a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; text-decoration-color: var(--sky-2); }
.nav-panel .label { margin-top: 0.75rem; }
.nav-panel .nav-more a { text-decoration: underline; text-underline-offset: 0.3em; }
.nav-panel .links { padding: 0 1rem 1rem; }
.nav-panel .links a.plain { justify-content: center; width: 100%; background: var(--ink); color: var(--on-ink); }
/* Below this width the links no longer fit on one row beside the two mode buttons */
@media (max-width: 70rem) {
  html.js .site-nav a:not(.mode) { display: none; }
  html.js .site-nav { margin-inline-start: auto; overflow: visible; }
  html.js .nav-open { display: inline-flex; }
}
html.a11y-big.js .site-nav a:not(.mode) { display: none; }
html.a11y-big.js .nav-open { display: inline-flex; }
@media print { .nav-open, .nav-panel { display: none; } }

/* Read-later form: the field is exactly as wide as the button; centred on small screens */
.later-form { grid-template-columns: max-content; justify-content: start; justify-items: stretch; }
.later-form .field { max-width: none; }
.later-form .form-status, .later-form .form-note, .later-form .field-msg { width: 0; min-width: 100%; }
@media (max-width: 46rem) {
  .later .wrap { justify-items: center; text-align: center; }
  .later-head { justify-items: center; }
  .later-form { grid-template-columns: minmax(0, max-content); justify-content: center; }
  .later-form .btn { justify-self: stretch; }
  .later-form .field label { text-align: center; }
}

/* AI layer on the home page */
.ai-rules { display: grid; gap: 0.75rem; }
.chain.plain li::after { content: none; }
.chain li { color: var(--ink); }

/* The untangle picture, animated: threads turn slowly, cubes ride the lines to the stack */
.untangle { width: 100%; height: auto; }
.untangle .knot, .untangle .lane, .untangle .thread { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.untangle .knot { transform-box: view-box; transform-origin: 300px 376px; animation: knot-turn 18s ease-in-out infinite alternate; }
.untangle .k1 { animation-duration: 23s; animation-direction: alternate-reverse; }
.untangle .k2 { animation-duration: 27s; }
.untangle .k3 { animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes knot-turn { from { transform: rotate(-9deg) scale(1.02); } to { transform: rotate(9deg) scale(0.94); } }
.untangle .rider { offset-rotate: 0deg; offset-distance: var(--at); animation: ride linear infinite; }
.untangle .rider polygon { stroke-width: 1.2; }
@keyframes ride { 0% { offset-distance: 0%; opacity: 0; } 7% { opacity: 1; } 93% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.untangle .loose { animation: loose-bob 5s ease-in-out infinite; }
@keyframes loose-bob { 50% { transform: translateY(-5px); } }
.untangle .landing { animation: landing 3.2s ease-in-out infinite; }
@keyframes landing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) {
  .untangle .knot, .untangle .rider, .untangle .loose, .untangle .landing { animation: none; }
}

/* Product page opener: same layout as the home opener, with a longer headline */
.hero.product h1 { font-size: clamp(2.125rem, 4.6vw, 3.375rem); line-height: 1.1; }
.form-note.one-line { white-space: nowrap; }

.more { font-size: 0.9375rem; color: var(--ink-soft); }

/* Language switcher */
.langs { display: flex; flex-wrap: wrap; gap: 0 1.25rem; width: 100%; }
.langs a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 0.3em; }
.langs a[aria-current] { font-weight: 700; text-decoration: none; }
.nav-panel .langs { padding: 0 1rem 1rem; }

/* Left-to-right languages */
[dir="ltr"] .stat b, [dir="ltr"] .person h1 .en, [dir="ltr"] .kpis b { text-align: left; }
[dir="ltr"] .chain li:not(:last-child)::after, [dir="ltr"] .outcome::before { content: "→"; }
[dir="ltr"] .chain.plain li::after { content: none; }
[dir="ltr"] .skip { right: auto; left: 0.5rem; }
[dir="ltr"] .site-footer nav a::after { right: auto; left: 0; }
[dir="ltr"] .display { letter-spacing: -0.02em; line-height: 1.06; }
[dir="ltr"] .hero h1 { font-size: clamp(2.375rem, 6vw, 4.25rem); }
[dir="ltr"] .page-hero h1 { font-size: clamp(2.25rem, 5.6vw, 4rem); }
[dir="ltr"] .scores td:last-child, [dir="ltr"] .scores thead th:last-child { text-align: right; }

/* L-Be system page */
.changes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.changes.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps.six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
.checks.wide { max-width: 52rem; font-size: 1.125rem; }
.offer .eg { color: var(--ink); font-size: 1rem; }
.hero.product .byline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.625rem); border-top: 0; padding-top: 0; }
html.a11y-big .changes.three, html.a11y-big .changes.five, html.a11y-big .steps.six { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 56rem) { .changes.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 46rem) { .changes.three, .changes.five, .steps.six { grid-template-columns: minmax(0, 1fr); } }

/* Language menu in the header: a globe that opens the list of languages */
.lang-menu { position: relative; flex: none; }
.lang-menu summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; list-style: none; cursor: pointer; border: var(--rule); background: var(--surface); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary svg { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lang-menu .langs { position: absolute; z-index: 30; top: calc(100% + 0.375rem); inset-inline-end: 0; display: grid; gap: 0; width: max-content; min-width: 9rem; padding: 0.25rem 0.875rem; background: var(--surface); border: var(--rule); box-shadow: -5px 5px 0 var(--sky-2); }
.masthead .wrap { flex-wrap: nowrap; }
.masthead .site-nav { margin-inline-end: auto; }
@media (min-width: 70.01rem) { .masthead .site-nav { margin-inline: auto 0; } }

/* "Send to your AI agent": the band on the home page, and the floating button under the accessibility one */
.agent-band .wrap { padding-block: clamp(2rem, 5vw, 3.5rem); }
.agent-band .section-head h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.agent-copy { display: grid; gap: 0.75rem; justify-items: start; }
.agent-status { min-height: 1.5em; font-weight: 600; }
.agent-fab { position: fixed; z-index: 40; bottom: 1rem; left: 1rem; display: flex; align-items: center; gap: 0.625rem; pointer-events: none; }
.agent-fab button { pointer-events: auto; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; background: var(--mint-1); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.agent-fab svg { fill: currentColor; }
.agent-fab-note { pointer-events: auto; max-width: 15rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 600; line-height: 1.4; background: var(--ink); color: var(--on-ink); border: 1.5px solid var(--on-ink); }
.agent-fab-note:not([data-state]) { display: none; }
@media (min-width: 62rem) { .agent-fab-note:not([data-state]) { display: block; } }
.game-ui .btn { padding: 0.5rem 1rem; box-shadow: none; }
@media (max-width: 46rem) {
  .site-nav a.mode { padding: 0.2rem 0.5rem; font-size: 0.8125rem; }
  .masthead .wrap { gap: 0.5rem; }
  .site-nav { gap: 0.25rem 0.5rem; }
  .lang-menu summary, .nav-open { width: 2.5rem; height: 2.5rem; position: relative; }
  .lang-menu summary::before, .nav-open::before { content: ""; position: absolute; inset: -0.125rem; }
}
@media print { .agent-fab, .lang-menu { display: none; } }

/* Read-later band: heading and form side by side, centred as one group */
@media (min-width: 46.01rem) {
  .later .wrap { grid-template-columns: max-content max-content; justify-content: center; gap: 1rem clamp(3rem, 10vw, 8.5rem); }
}
.later-form .form-note { text-align: center; }

/* "Send to your AI agent" band: text on one side, the button on the other */
@media (min-width: 56.01rem) {
  .agent-band .wrap { grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 1rem clamp(2rem, 6vw, 5rem); padding-block: clamp(2rem, 4vw, 3rem); }
  .agent-band .section-head { gap: 0.625rem; }
  .agent-copy { position: relative; justify-items: center; }
  .agent-status { position: absolute; inset-block-start: 100%; inset-inline: 0; margin-top: 0.625rem; min-height: 0; text-align: center; }
}
html.a11y-big .agent-band .wrap { grid-template-columns: minmax(0, 1fr); }
html.a11y-big .agent-status { position: static; }
.untangle { overflow: visible; }