/* ============================================================================
   /3in30 — "גמילה מהתפעול: 3 ב־30". The landing page's own design system.

   Loaded by 3in30.html and by nothing else. The site's style.css is NOT loaded
   here and this file is not loaded there, so the two cannot leak into each
   other in either direction.

   CONSTRAINTS, inherited from the vhost:
   - CSP `default-src 'self'`: no inline style, no style="" attribute, no data:
     URI, no webfont host. Every texture below is a CSS gradient for that reason.
   - The page is RTL. Offsets are logical properties; the handful of physical
     ones (SVG geometry, the hero conveyor's translateX) say why.

   THE IDEA: an x-ray. A mint scan line passes over work and turns it from
   "manual, waiting for you" (ember) into "done by the system" (mint). The hero
   conveyor, the step-1 scan and the step-3 pipeline are the same gesture.

   The palette is art-directed, not theme-derived: dark and paper sections
   alternate on purpose, so it does not invert with the OS colour scheme.
   ========================================================================= */

/* ── 0. Faces — the site's own Heebo, same files, same subsets ─────────── */

@font-face {
  font-family: 'Heebo';
  src: url('/fonts/heebo-hebrew.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  src: url('/fonts/heebo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Dark surfaces — the brand ink, deepened into a range. */
  --ink-950: #050c0a;
  --ink-900: #08110e;
  --ink-850: #0b1512;
  --ink-800: #0e1613;
  --ink-700: #15221d;
  --ink-600: #1e2e28;
  --on-dark:   #e9f0ec;
  --on-dark-2: #a9b9b2;   /* 9.3:1 on ink-900 */
  --on-dark-3: #7f928a;   /* 5.8:1 on ink-900 */
  --line-dark:   rgb(233 240 236 / .09);
  --line-dark-2: rgb(233 240 236 / .16);

  /* Paper. */
  --paper:   #f6f5f0;
  --paper-2: #eeede6;
  --card:    #ffffff;
  --line:    #e0ded5;
  --line-2:  #d3d1c7;
  --text:    #0e1613;
  --text-2:  #34433c;
  --text-3:  #5b6962;     /* 5.3:1 on paper */

  /* Brand green for light grounds; mint is its lit form for dark ones. */
  --signal:      #0b7a57; /* white on it: 5.3:1 */
  --signal-deep: #086245;
  --mint:        #3ee6a2; /* mint-ink on it: 10:1 */
  --mint-2:      #8af3c8;
  --mint-ink:    #04241a;

  /* Semantic only: "manual / waiting for you", and "needs your approval". */
  --ember:     #ff8f5a;
  --ember-ink: #b4501f;   /* 4.7:1 on paper */
  --gold:      #f5c86a;

  --err:   #b4342a;
  --note:  #7a4a0c;

  --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Hebrew', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --fs-h2:   clamp(1.875rem, 1.1rem + 3vw, 3.25rem);
  --fs-lede: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
  --sec-y:   clamp(72px, 8.5vw, 120px);
  --gutter:  clamp(20px, 4vw, 40px);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Clears the sticky header on every anchor jump. */
  scroll-padding-block-start: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; }

.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.skip-link {
  position: absolute; z-index: 100;
  inset-inline-start: 16px; inset-block-start: -60px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--mint); color: var(--mint-ink); font-weight: 700;
  text-decoration: none;
}
.skip-link:focus-visible { inset-block-start: 12px; }

:focus-visible { outline: 3px solid var(--mint-2); outline-offset: 3px; }
.paper :focus-visible, .sunk :focus-visible, .form-card :focus-visible { outline-color: var(--signal); }

.wrap {
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section grounds. */
.dark  { position: relative; isolation: isolate; background: var(--ink-900); color: var(--on-dark-2); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.paper { background: var(--paper); }
.sunk  { background: var(--paper-2); }
.paper h2, .paper h3, .sunk h2, .sunk h3 { color: var(--text); }

/* A grid that fades out from the middle — the "instrument" texture used on
   every dark section. Gradients, not an image, because of the CSP. */
.hero-bg::before, .final-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 25%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 35%, #000 25%, transparent 75%);
  opacity: .6;
}

/* Small shared pieces. */
.dot { display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none; }
.dot-ember { background: var(--ember); box-shadow: 0 0 0 3px rgb(255 143 90 / .16); }
.dot-mint  { background: var(--mint);  box-shadow: 0 0 0 3px rgb(62 230 162 / .18); }

.mint { color: var(--mint); }
.mint-deep { color: var(--signal); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 20px;
  font-size: .875rem; font-weight: 700; letter-spacing: .06em;
  color: var(--signal);
}
.eyebrow::before {
  content: ""; inline-size: 24px; block-size: 2px; border-radius: 2px;
  background: currentColor;
}
.dark .eyebrow { color: var(--mint); }

.eyebrow-live {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgb(62 230 162 / .08);
  border: 1px solid rgb(62 230 162 / .24);
  color: var(--mint-2) !important;
  font-weight: 600; letter-spacing: .02em;
}
.eyebrow-live::before { display: none; }

.pulse-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--mint);
  animation: pulse 2.2s ease-out infinite;
}

.sec-head {
  max-inline-size: 840px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.sec-head h2 {
  font-size: var(--fs-h2); font-weight: 800; line-height: 1.12; letter-spacing: -.01em;
}

/* ── 3. Buttons ────────────────────────────────────────────────────────── */

.btn {
  --h: 52px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-block-size: var(--h);
  padding: 10px 26px;
  border: 0; border-radius: 14px;
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
  text-align: center; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn-sm { --h: 40px; padding: 6px 16px; font-size: .9375rem; border-radius: 11px; }
.btn-lg { --h: 56px; padding-inline: 28px; }
.btn-xl { --h: 62px; padding-inline: 32px; font-size: 1.125rem; }
.btn-block { display: flex; inline-size: 100%; }

.btn-mint {
  background: linear-gradient(180deg, #62f1b7 0%, var(--mint) 55%, #2fd893 100%);
  color: var(--mint-ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .5),
    0 0 0 1px rgb(62 230 162 / .4),
    0 12px 32px -12px rgb(62 230 162 / .6);
}
.btn-mint:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .5),
    0 0 0 1px rgb(62 230 162 / .55),
    0 18px 44px -12px rgb(62 230 162 / .75);
}

.btn-signal { background: var(--signal); color: #fff; box-shadow: 0 12px 28px -14px rgb(11 122 87 / .7); }
.btn-signal:hover { background: var(--signal-deep); transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

/* A light sweep across the mint button on hover. */
.btn-mint::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 100% 0;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.btn-mint:hover::after { opacity: 1; animation: sheen .9s var(--ease) forwards; }

/* Forward is LEFT in Hebrew, so the arrow nudges left. */
.btn-arrow { inline-size: 20px; block-size: 20px; flex: none; transition: transform .25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(-4px); }

.cta-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--on-dark-2);
}
.cta-note svg { inline-size: 17px; block-size: 17px; color: var(--mint); flex: none; }
.cta-note-ink { color: var(--text-3); }

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

.mid-cta {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-block-start: clamp(48px, 6vw, 72px);
  text-align: center;
}

/* ── 4. Header ─────────────────────────────────────────────────────────── */

.hdr {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgb(8 17 14 / .9);
  border-block-end: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hdr {
    background: rgb(8 17 14 / .86);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
            backdrop-filter: saturate(1.4) blur(14px);
  }
}
.hdr.is-stuck { border-block-end-color: var(--line-dark); }

.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 64px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--on-dark); font-weight: 800; font-size: 1.1875rem; letter-spacing: -.01em;
  text-decoration: none;
}
.brand-mark {
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px; border-radius: 10px;
  background: var(--signal); color: #fff;
  box-shadow: 0 0 0 1px rgb(62 230 162 / .25), 0 6px 18px -6px rgb(62 230 162 / .5);
}
.brand-mark svg { inline-size: 16px; block-size: 16px; }
.brand-sm { font-size: 1.0625rem; }
.brand-sm .brand-mark { inline-size: 28px; block-size: 28px; border-radius: 9px; }

/* ── 5. Hero ───────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(32px, 4.5vw, 72px) clamp(64px, 8vw, 112px);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 55% at 22% 18%, rgb(62 230 162 / .17), transparent 70%),
    radial-gradient(45% 45% at 95% 100%, rgb(11 122 87 / .28), transparent 70%),
    var(--ink-900);
}

.hero-grid { display: grid; gap: clamp(32px, 3.2vw, 44px) clamp(48px, 6vw, 72px); align-items: center; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

.hero h1 {
  max-inline-size: 15ch;
  margin-block-end: 24px;
  font-size: clamp(2.375rem, 1rem + 6vw, 5.125rem);
  font-weight: 800; line-height: 1.03; letter-spacing: -.02em;
  animation: rise 1s var(--ease) both;
}
.hero h1 .h1-dot { color: var(--mint); }

.hero-sub {
  max-inline-size: 40ch;
  font-size: clamp(1.125rem, .95rem + .7vw, 1.375rem);
  line-height: 1.65;
  color: var(--on-dark-2);
  animation: rise 1s .12s var(--ease) both;
}

/* The two phrases the brief asks to stand out. A marker stroke that draws in
   right-to-left, the way the sentence is read. The resting state is the
   drawn one, so with motion off it is simply there. */
.hl {
  background-color: transparent;
  background-image: linear-gradient(transparent 60%, rgb(62 230 162 / .34) 60%, rgb(62 230 162 / .34) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 100% 100%;
  color: var(--on-dark);
  font-weight: 700;
  padding-inline: 3px;
  white-space: nowrap;
  animation: marker .9s var(--ease) both;
}
.hl + .hl, .hero-sub .hl:nth-of-type(2) { animation-delay: 1.05s; }
.hero-sub .hl:nth-of-type(1) { animation-delay: .7s; }

/* The result, in the visitor's terms: what goes, and what comes back. */
.hero-out {
  max-inline-size: 44ch;
  margin-block-start: 18px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--mint);
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.25rem);
  line-height: 1.6;
  color: var(--on-dark-2);
  animation: rise 1s .2s var(--ease) both;
}
.hero-out strong { color: var(--on-dark); font-weight: 700; }

/* Four reasons it costs no effort, as one quiet strip under the button. */
.hero-points {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-block-start: -12px;
  animation: rise 1s .5s var(--ease) both;
}
@media (min-width: 860px) { .hero-points { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.hero-points li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgb(255 255 255 / .035);
  border: 1px solid var(--line-dark);
  font-size: .9375rem; line-height: 1.35; color: var(--on-dark-2);
}
.hero-points svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--mint); }
.hero-points b { color: var(--on-dark); font-weight: 700; }
@media (max-width: 420px) {
  .hero-points li { padding: 10px 11px; gap: 8px; font-size: .875rem; }
  .hero-points svg { inline-size: 17px; block-size: 17px; }
}

/* The first CTA closes the hero: under the text and the demo, full width. */
.hero-cta {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  animation: rise 1s .4s var(--ease) both;
}
.hero-cta .btn {
  --h: 62px;
  inline-size: 100%;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  border-radius: 16px;
}
.hero-cta .btn-arrow { inline-size: 22px; block-size: 22px; }
.hero-cta .cta-note { align-self: center; }

/* The conveyor card. */
.hero-visual { animation: rise 1.1s .3s var(--ease) both; }

.flow {
  --row: 56px;
  --gap: 10px;
  --beam: 48px;
  --loop: 11s;
  --step: 1.5s;
  /* translateX moves the row by its own width, which is the column width, plus
     the beam — so it lands exactly on the system column at any card size.
     Negative because the system column is on the LEFT of an RTL grid. */
  --dx: calc(-100% - var(--beam));

  position: relative;
  margin: 0;
  padding: 14px 16px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  border: 1px solid var(--line-dark-2);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .07);
}
/* Gradient hairline around the card, cut out with a mask (no image needed). */
.flow::before {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgb(62 230 162 / .6), transparent 32%, transparent 68%, rgb(62 230 162 / .28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.flow::after {
  content: "";
  position: absolute; inset: 8% 6%; z-index: -1;
  background: radial-gradient(closest-side, rgb(62 230 162 / .26), transparent);
  filter: blur(40px);
}

.win-head {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 2px 14px; margin-block-end: 14px;
  border-block-end: 1px solid var(--line-dark);
}
.win-dots { display: flex; gap: 6px; }
.win-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgb(255 255 255 / .14); }
.win-title { flex: 1; font-size: .875rem; font-weight: 600; color: var(--on-dark-2); }

.flow-toggle {
  display: grid; place-items: center;
  inline-size: 36px; block-size: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-dark-2);
  background: rgb(255 255 255 / .04);
  color: var(--on-dark-2);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.flow-toggle:hover { background: rgb(255 255 255 / .09); color: var(--on-dark); }
.flow-toggle svg { inline-size: 14px; block-size: 14px; }
.flow-toggle .i-play { display: none; }
.flow.is-paused .flow-toggle .i-play { display: block; }
.flow.is-paused .flow-toggle .i-pause { display: none; }

.flow-cols, .flow-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--beam) minmax(0, 1fr);
}
.flow-cols { margin-block-end: 10px; }
.flow-col-h {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  color: var(--on-dark-3);
}
.flow-col-you { grid-column: 1; }
.flow-col-sys { grid-column: 3; }

.flow-stage { position: relative; }

.tasks, .slots {
  grid-row: 1;
  display: grid; gap: var(--gap);
  grid-auto-rows: var(--row);
}
.tasks { grid-column: 1; position: relative; z-index: 2; }
.slots { grid-column: 3; }
.slots li { border: 1px dashed rgb(255 255 255 / .1); border-radius: 12px; }

.beam { grid-column: 2; grid-row: 1; position: relative; display: grid; place-items: center; }
.beam::before {
  content: "";
  position: absolute; inset-block: 4px; left: calc(50% - 1px);
  inline-size: 2px;
  background: linear-gradient(transparent, var(--mint) 18%, var(--mint) 82%, transparent);
  box-shadow: 0 0 18px 2px rgb(62 230 162 / .5);
}
.beam::after {
  content: "";
  position: absolute; inset-block-start: 0; left: calc(50% - 2px);
  inline-size: 4px; block-size: 44px; border-radius: 4px;
  background: linear-gradient(transparent, #fff, transparent);
  animation: beam-run 2.4s linear infinite;
}
.beam-chip {
  position: relative; z-index: 3;
  padding: 6px 7px;
  border-radius: 8px;
  background: var(--ink-900);
  border: 1px solid var(--mint);
  color: var(--mint);
  font: 700 .75rem/1 var(--mono);
  letter-spacing: .06em;
  box-shadow: 0 0 22px rgb(62 230 162 / .45);
}

.task {
  --i: 0;
  display: flex; align-items: center; gap: 10px;
  min-inline-size: 0;
  padding-inline: 12px;
  border-radius: 12px;
  background: var(--ink-700);
  border: 1px solid var(--line-dark-2);
  animation: task-move var(--loop) var(--ease-io) infinite both;
  animation-delay: calc(var(--i) * var(--step));
}
.t1 { --i: 0; } .t2 { --i: 1; } .t3 { --i: 2; } .t4 { --i: 3; } .t5 { --i: 4; }
.t4 { animation-name: task-move-approve; }

.task-ico {
  display: grid; place-items: center; flex: none;
  inline-size: 30px; block-size: 30px; border-radius: 9px;
  background: rgb(255 255 255 / .06);
  color: var(--on-dark-2);
}
.task-ico svg { inline-size: 16px; block-size: 16px; }

.task-txt {
  display: grid; grid-template-areas: "n" "s";
  min-inline-size: 0;
  line-height: 1.25;
}
.task-name {
  grid-area: n;
  font-size: .875rem; font-weight: 600; color: var(--on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-st {
  grid-area: s;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .71875rem; font-weight: 600;
  white-space: nowrap;
  animation: var(--loop) linear infinite both;
  animation-delay: calc(var(--i) * var(--step));
}
.task-st::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; flex: none; }
.st-manual { color: #ffb48f; animation-name: st-manual; }
.st-manual::before { background: var(--ember); }
.st-auto { color: var(--mint-2); opacity: 0; animation-name: st-auto; }
.st-auto::before { background: var(--mint); }
.st-approve { color: var(--gold); }
.st-approve::before { background: var(--gold); }

.flow-cap {
  display: flex; align-items: center; gap: 8px;
  margin-block-start: 14px;
  font-size: .8125rem; color: var(--on-dark-3);
}
.flow-cap::before {
  content: ""; inline-size: 14px; block-size: 14px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor;
  background: radial-gradient(circle, currentColor 0 1.5px, transparent 2px);
}

@media (max-width: 520px) {
  .flow { --row: 52px; --gap: 8px; --beam: 34px; padding: 12px 12px 14px; }
  .task { gap: 8px; padding-inline: 9px; }
  .task-ico { inline-size: 26px; block-size: 26px; }
  .task-ico svg { inline-size: 14px; block-size: 14px; }
  .task-name { font-size: .8125rem; }
  .task-st { font-size: .6875rem; gap: 5px; }
  .beam-chip { padding: 5px; font-size: .6875rem; }
}
@media (max-width: 400px) {
  .task-ico { display: none; }
}

@media (max-width: 600px) {
  .hero-cta .btn { --h: 56px; padding: 8px 16px; gap: 10px; font-size: 1.0625rem; }
  .hero-cta .btn-arrow { inline-size: 20px; block-size: 20px; }
}
/* "בוא נגלה כמה זמן אפשר לחסוך לעסק שלך" on one line on a phone: a touch
   smaller, and the arrow gives up its room. */
@media (max-width: 420px) {
  .hero-cta .btn, .btn-lg { padding-inline: 12px; font-size: 1rem; }
  .hero-cta .btn-arrow, .btn-lg .btn-arrow { display: none; }
}

/* ── 6. The pain ───────────────────────────────────────────────────────── */

.pain { padding-block: var(--sec-y); overflow: hidden; }

.pain-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .pain-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

.pain h2 {
  margin-block-end: 24px;
  font-size: var(--fs-h2); font-weight: 800; line-height: 1.16; letter-spacing: -.01em;
}
.pain-text { max-inline-size: 42ch; font-size: var(--fs-lede); color: var(--text-2); line-height: 1.75; }

/* Five lines the visitor recognises; the last one is why it won't fix itself. */
.pain-list { display: grid; gap: 10px; margin-block-start: 24px; }
.pain-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 1.0625rem; line-height: 1.5; color: var(--text-2);
}
.pain-list b { color: var(--text); font-weight: 800; }
.pl-ico {
  display: grid; place-items: center; flex: none;
  inline-size: 34px; block-size: 34px; border-radius: 10px;
  background: rgb(255 143 90 / .12); color: var(--ember-ink);
}
.pl-ico svg { inline-size: 18px; block-size: 18px; }
.pain-list .pl-grow { background: var(--ink-800); border-color: var(--ink-800); color: var(--on-dark-2); }
.pain-list .pl-grow b { color: #fff; }
.pain-list .pl-grow .pl-ico { background: rgb(255 143 90 / .18); color: var(--ember); }

/* The owner as the bottleneck: five streams converging on one person. Chip
   and line geometry is physical (left/right, SVG x) on purpose — it is a
   drawing, and the SVG beneath it does not mirror. */
.hub {
  position: relative;
  inline-size: 100%; max-inline-size: 560px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 28px;
  background:
    radial-gradient(closest-side, rgb(255 143 90 / .12), transparent),
    var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(14 22 19 / .04), 0 30px 60px -40px rgb(14 22 19 / .3);
}
@media (min-width: 560px) { .hub { aspect-ratio: 5 / 4; } }

.hub-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.hub-lines path {
  fill: none;
  stroke: #eab49b;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 6;
  animation: dash-in 1.1s linear infinite;
}

.hub-core {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid; place-items: center;
  inline-size: 24%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink-800); color: #fff;
  box-shadow: 0 0 0 10px rgb(255 143 90 / .1), 0 0 0 22px rgb(255 143 90 / .05), 0 20px 40px -16px rgb(14 22 19 / .6);
}
.hub-ring {
  position: absolute; inset: -7px; border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--ember);
  border-inline-start-color: rgb(255 143 90 / .35);
  animation: spin 1.4s linear infinite;
}
.hub-you { font-weight: 800; font-size: clamp(1rem, .7rem + 1.2vw, 1.5rem); }

.hub-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -12px rgb(14 22 19 / .3);
  font-size: clamp(.75rem, .66rem + .38vw, .9375rem); font-weight: 700; color: var(--text);
  white-space: nowrap;
  animation: jitter 2.8s ease-in-out infinite;
}
.hub-chip.h1 { left: 50%;  top: 13.75%; translate: -50% -50%; }
.hub-chip.h2 { right: 3%;  top: 37.5%;  translate: 0 -50%; animation-delay: -.6s; }
.hub-chip.h3 { right: 10%; top: 87.5%;  translate: 0 -50%; animation-delay: -1.3s; }
.hub-chip.h4 { left: 10%;  top: 87.5%;  translate: 0 -50%; animation-delay: -1.9s; }
.hub-chip.h5 { left: 3%;   top: 37.5%;  translate: 0 -50%; animation-delay: -2.3s; }
@media (max-width: 420px) {
  .hub-chip { padding: 6px 9px; gap: 6px; }
  .hub-chip.h3 { right: 2%; }
  .hub-chip.h4 { left: 2%; }
}

/* "If you stop to breathe — the business stops with you." A heartbeat that
   flatlines, drawn right-to-left (the SVG is mirrored) so it reads in the
   direction of the sentence. */
.stop {
  max-inline-size: 980px;
  margin: clamp(64px, 9vw, 120px) auto 0;
  text-align: center;
}
.stop-line {
  inline-size: min(100%, 640px); block-size: auto;
  margin: 0 auto 28px;
  transform: scaleX(-1);
}
.ekg {
  fill: none;
  stroke: var(--ember);
  stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: ekg 6s var(--ease-io) infinite both;
}
.stop p {
  font-size: clamp(1.875rem, 1rem + 3.6vw, 3.75rem);
  font-weight: 800; line-height: 1.18; letter-spacing: -.015em;
  color: var(--text);
}
/* Kept on one line: "the business stops with you" is the half that lands. */
.stop strong { display: inline-block; color: var(--ember-ink); font-weight: 800; }

/* A section's one-line lede under its heading, on either ground. */
.sec-lede { max-inline-size: 52ch; margin: 18px auto 0; font-size: var(--fs-lede); line-height: 1.65; color: var(--text-2); }
.dark .sec-lede { color: var(--on-dark-2); }

/* "Example, not a result" — the label every illustration carries. */
.ex-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-block-start: 24px;
  font-size: .875rem; font-weight: 600; line-height: 1.5; color: var(--text-3);
  text-align: center;
}
.ex-note svg { inline-size: 17px; block-size: 17px; flex: none; }
.ex-note-dark { color: var(--on-dark-3); }

/* ── 6a. Before / after ────────────────────────────────────────────────── */

.ba { padding-block: var(--sec-y); overflow: hidden; }
.ba-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 50% at 85% 30%, rgb(255 143 90 / .07), transparent 70%),
    radial-gradient(45% 55% at 12% 60%, rgb(62 230 162 / .1), transparent 70%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900));
}

.ba-grid { display: grid; gap: 14px; max-inline-size: 1060px; margin-inline: auto; }
@media (min-width: 900px) {
  .ba-grid { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; align-items: stretch; }
}

.ba-col {
  display: flex; flex-direction: column;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 24px;
  border: 1px solid var(--line-dark-2);
  background: rgb(255 255 255 / .03);
}
.ba-before { border-color: rgb(255 143 90 / .28); }
.ba-after {
  border-color: rgb(62 230 162 / .42);
  background: linear-gradient(160deg, rgb(62 230 162 / .1), rgb(62 230 162 / .02) 60%), var(--ink-800);
  box-shadow: 0 30px 80px -44px rgb(62 230 162 / .45);
}

.ba-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-block-end: 18px;
  font-size: 1.125rem; font-weight: 800; line-height: 1.35; color: var(--on-dark);
}
.ba-tag {
  padding: 5px 12px; border-radius: 999px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
}
.ba-before .ba-tag { background: rgb(255 143 90 / .14); color: #ffb48f; border: 1px solid rgb(255 143 90 / .35); }
.ba-after .ba-tag  { background: var(--mint); color: var(--mint-ink); }

.ba-list { display: grid; gap: 8px; flex: 1; }
.ba-list li {
  display: flex; align-items: center; gap: 12px;
  min-block-size: 48px; padding: 8px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / .04);
  border: 1px solid var(--line-dark);
  font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--on-dark);
}
.ba-mk {
  display: grid; place-items: center; flex: none;
  inline-size: 26px; block-size: 26px; border-radius: 50%;
  font: 700 .75rem/1 var(--mono);
}
.ba-mk svg { inline-size: 14px; block-size: 14px; }
.ba-before .ba-mk { background: rgb(255 143 90 / .14); color: #ffb48f; box-shadow: inset 0 0 0 1.5px rgb(255 143 90 / .5); }
.ba-after .ba-mk  { background: var(--mint); color: var(--mint-ink); }
.ba-after .ba-you { background: rgb(245 200 106 / .08); border-color: rgb(245 200 106 / .45); color: #f6d48f; }
.ba-after .ba-you .ba-mk { background: var(--gold); color: #2a1d02; }

.ba-foot {
  margin-block-start: 16px; padding-block-start: 14px;
  border-block-start: 1px dashed var(--line-dark-2);
  font-size: 1rem; font-weight: 800;
}
.ba-before .ba-foot { color: #ffb48f; }
.ba-after .ba-foot  { color: var(--mint-2); }

/* The scanner between the two: a vertical beam on desktop, a horizontal one
   on a phone, with the same chip as the hero. */
.ba-mid { position: relative; display: grid; place-items: center; min-block-size: 44px; }
.ba-mid::before {
  content: ""; position: absolute;
  inset-block: 50%; inset-inline: 12%;
  block-size: 2px; translate: 0 -1px;
  background: linear-gradient(90deg, transparent, var(--mint) 20%, var(--mint) 80%, transparent);
  box-shadow: 0 0 16px 2px rgb(62 230 162 / .45);
}
@media (min-width: 900px) {
  .ba-mid::before {
    inset-block: 6%; inset-inline: auto; left: calc(50% - 1px);
    inline-size: 2px; block-size: auto; translate: none;
    background: linear-gradient(transparent, var(--mint) 18%, var(--mint) 82%, transparent);
  }
}
.ba-chip {
  position: relative;
  padding: 6px 8px; border-radius: 8px;
  background: var(--ink-900); border: 1px solid var(--mint); color: var(--mint);
  font: 700 .75rem/1 var(--mono); letter-spacing: .06em;
  box-shadow: 0 0 22px rgb(62 230 162 / .45);
}

/* Once, as the column arrives: the system's steps light up in order. With
   reduced motion or no script the column never waits, so this never hides. */
.ba-after .ba-list li { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ba-after.rv-wait .ba-list li { opacity: 0; transform: translateX(-14px); }
.ba-after .ba-list li:nth-child(1) { transition-delay: .35s; }
.ba-after .ba-list li:nth-child(2) { transition-delay: .47s; }
.ba-after .ba-list li:nth-child(3) { transition-delay: .59s; }
.ba-after .ba-list li:nth-child(4) { transition-delay: .71s; }
.ba-after .ba-list li:nth-child(5) { transition-delay: .83s; }
.ba-after .ba-list li:nth-child(6) { transition-delay: 1.05s; }

/* ── 6b. What the time is worth ────────────────────────────────────────── */

.tv { padding-block: var(--sec-y); }
.tv-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .tv-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
.tv h2 { margin-block-end: 20px; font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.tv-text { max-inline-size: 44ch; font-size: var(--fs-lede); line-height: 1.75; color: var(--text-2); }
.tv-text + .tv-text { margin-block-start: 14px; }

.tv-card {
  display: grid; gap: 22px;
  padding: clamp(22px, 3.5vw, 36px);
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(14 22 19 / .04), 0 34px 70px -46px rgb(14 22 19 / .35);
}
.tv-label { display: block; margin-block-end: 14px; font-size: 1.0625rem; font-weight: 800; line-height: 1.45; color: var(--text); }
.tv-range { display: flex; align-items: center; gap: 16px; }
.tv-hours {
  flex: none;
  padding: 8px 14px; border-radius: 12px;
  background: var(--ink-800); color: var(--on-dark-2);
  font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.tv-hours b { color: var(--mint); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* The slider. In an RTL page it runs right-to-left, so the filled part of the
   track grows from the right; --fill is set by the script (default = 12h). */
.tv-range input[type="range"] {
  --fill: 22.2%;
  flex: 1; min-inline-size: 0;
  block-size: 32px; margin: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.tv-range input[type="range"]::-webkit-slider-runnable-track {
  block-size: 10px; border-radius: 99px;
  background: linear-gradient(to left, var(--signal) var(--fill), var(--paper-2) var(--fill));
  box-shadow: inset 0 0 0 1px var(--line);
}
.tv-range input[type="range"]::-moz-range-track { block-size: 10px; border-radius: 99px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.tv-range input[type="range"]::-moz-range-progress { block-size: 10px; border-radius: 99px; background: var(--signal); }
.tv-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  inline-size: 28px; block-size: 28px; margin-block-start: -9px;
  border-radius: 50%;
  background: #fff; border: 3px solid var(--signal);
  box-shadow: 0 4px 12px -2px rgb(11 122 87 / .5);
}
.tv-range input[type="range"]::-moz-range-thumb {
  inline-size: 22px; block-size: 22px;
  border-radius: 50%;
  background: #fff; border: 3px solid var(--signal);
  box-shadow: 0 4px 12px -2px rgb(11 122 87 / .5);
}
.tv-range input[type="range"]:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 520px) {
  .tv-range { flex-wrap: wrap; gap: 10px; }
  .tv-range input[type="range"] { flex-basis: 100%; }
  .tv-hours { order: -1; }
}

.tv-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.tv-out > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.tv-out dt { font-size: .8125rem; font-weight: 700; color: var(--text-3); }
.tv-out dd { margin: 0; display: flex; flex-direction: column; }
.tv-out output {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tv-out dd span { font-size: .8125rem; font-weight: 600; color: var(--text-3); }
@media (max-width: 460px) {
  .tv-out { grid-template-columns: 1fr; }
  .tv-out > div { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .tv-out dd { flex-direction: row; align-items: baseline; gap: 8px; }
}

.tv-ex {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: rgb(11 122 87 / .06);
  border: 1.5px dashed rgb(11 122 87 / .45);
}
.tv-badge {
  display: inline-block;
  margin-block-end: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--gold); color: #2a1d02;
  font-size: .75rem; font-weight: 800; letter-spacing: .03em;
}
.tv-ex p { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
.tv-ex b { color: var(--signal-deep); font-weight: 800; }
.tv-ex output { font-variant-numeric: tabular-nums; }
.tv-note { font-size: .8125rem; line-height: 1.6; color: var(--text-3); }

/* Urgency, said plainly: the cost of waiting, the monthly limit, this
   month's bonuses. An hourglass, never a countdown. */
.tv-wait, .stack-limit, .urgent {
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.55;
}
.tv-wait svg, .stack-limit svg, .urgent svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 2px; }
.tv-wait { font-size: 1rem; font-weight: 600; color: var(--text); }
.tv-wait svg { color: var(--ember-ink); }
.tv-wait b { color: var(--ember-ink); font-weight: 800; }
.tv-wait output { font-variant-numeric: tabular-nums; }

/* ── 6c. Who is behind it ──────────────────────────────────────────────── */

.who { padding-block: var(--sec-y); }
.who-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .who-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 72px; } }

.who-card {
  display: grid; gap: 16px;
  max-inline-size: 360px; inline-size: 100%;
  margin-inline: auto;
  padding: 14px 14px 20px;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(14 22 19 / .04), 0 34px 70px -46px rgb(14 22 19 / .35);
}
.who-photo {
  display: grid; place-content: center; justify-items: center; gap: 8px;
  aspect-ratio: 4 / 5; max-inline-size: 100%;
  border-radius: 18px;
  font-size: .875rem; font-weight: 700;
}
.who-photo svg { inline-size: 64px; block-size: 64px; }
picture.who-photo { display: block; overflow: hidden; background: var(--paper-2); }
.who-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 28%; }
.who-id { padding-inline: 6px; display: grid; gap: 6px; justify-items: start; }
.who-name { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.who-role { font-size: .9375rem; color: var(--text-3); }
/* On a phone the card is a byline: a small photo beside the name. */
@media (max-width: 899px) {
  .who-card { grid-template-columns: 96px minmax(0, 1fr); align-items: center; max-inline-size: none; margin-inline: 0; padding: 12px; }
  .who-photo { aspect-ratio: 1; gap: 2px; border-radius: 14px; font-size: .75rem; }
  .who-photo svg { inline-size: 36px; block-size: 36px; }
}

.who h2 { margin-block-end: 20px; font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.who-bio { max-inline-size: 52ch; font-size: var(--fs-lede); line-height: 1.75; }
.who-proof {
  margin-block-start: 26px; padding: 20px 22px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--signal);
}
.who-proof-k {
  display: flex; align-items: center; gap: 8px;
  margin-block-end: 8px;
  font-size: .875rem; font-weight: 800; letter-spacing: .03em; color: var(--signal);
}
.who-proof-k svg { inline-size: 18px; block-size: 18px; flex: none; }
.who-proof p:last-child { font-size: 1rem; line-height: 1.7; color: var(--text-2); }

/* A slot for real material the owner has not supplied yet. It must never go
   live as is: check.js fails in PROD mode while any data-pending remains. */
.ph {
  border: 1.5px dashed var(--line-2);
  background: repeating-linear-gradient(-45deg, rgb(14 22 19 / .025) 0 10px, transparent 10px 20px), var(--paper);
  color: var(--text-3);
}
p.ph { padding: 4px 10px; border-radius: 10px; }

/* ── 7. The solution ───────────────────────────────────────────────────── */

.solution { padding-block: var(--sec-y); overflow: hidden; }
.sol-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 55% at 50% 0%, rgb(62 230 162 / .13), transparent 70%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
}

.sol-head {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  max-inline-size: 920px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}

.seal {
  position: relative;
  display: grid; place-items: center;
  inline-size: 136px; block-size: 136px;
}
.seal::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgb(62 230 162 / .18), rgb(62 230 162 / .04) 70%);
  box-shadow: 0 0 60px rgb(62 230 162 / .25);
}
.seal-ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.seal-ring circle { fill: none; stroke: rgb(62 230 162 / .35); stroke-width: 1; }
.seal-ring .seal-dash {
  stroke: var(--mint); stroke-width: 2; stroke-dasharray: 2 6;
  transform-box: fill-box; transform-origin: center;
  animation: spin 26s linear infinite;
}
.seal-mark {
  position: relative;
  display: flex; align-items: baseline; gap: 3px;
  direction: ltr;
  font-weight: 800; color: var(--on-dark);
}
.seal-mark b { font-size: 2.125rem; line-height: 1; letter-spacing: -.03em; }
.seal-mark i { font-style: normal; font-size: 1.5rem; color: var(--mint); }
.seal-tm {
  position: absolute; inset-block-end: 30px;
  font: 600 .5rem/1 var(--mono); letter-spacing: .32em;
  color: var(--mint);
}

.sol-lead {
  display: block;
  margin-block-end: 14px;
  font-size: clamp(1.125rem, .9rem + 1vw, 1.5rem); font-weight: 500;
  color: var(--on-dark-2);
}
.sol-name {
  display: block;
  font-size: clamp(2rem, .9rem + 4.4vw, 4.25rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.015em;
  color: var(--on-dark);
  background: linear-gradient(100deg, #ffffff 30%, var(--mint-2) 70%, var(--mint));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sol-name sup { font-size: .36em; vertical-align: super; line-height: 0; }

.vs { display: grid; gap: 20px; }
@media (min-width: 960px) {
  .vs { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px; align-items: stretch; }
}
.vs-no { display: grid; gap: 20px; }

.no-card {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 24px;
  border-radius: 20px;
  background: rgb(255 255 255 / .025);
  border: 1px solid var(--line-dark);
}
.no-card p { font-size: 1.0625rem; color: var(--on-dark-3); padding-inline-end: 28px; }
.no-card strong {
  color: var(--on-dark-2);
  text-decoration: line-through;
  text-decoration-color: rgb(255 143 90 / .85);
  text-decoration-thickness: 2px;
}
.no-art { inline-size: 92px; color: rgb(233 240 236 / .22); }
.no-art svg { inline-size: 100%; block-size: auto; }
.no-x {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px;
  display: grid; place-items: center;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: rgb(255 143 90 / .12); color: var(--ember);
}
.no-x svg { inline-size: 14px; block-size: 14px; }
@media (max-width: 420px) {
  .no-card { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .no-art { inline-size: 76px; }
}

.yes-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgb(62 230 162 / .15), rgb(62 230 162 / .03) 60%),
    var(--ink-800);
  border: 1px solid rgb(62 230 162 / .42);
  box-shadow: 0 30px 80px -40px rgb(62 230 162 / .5), inset 0 1px 0 rgb(255 255 255 / .07);
}
.yes-tag {
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--mint); color: var(--mint-ink);
  font: 700 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.yes-h {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight: 800; line-height: 1.3;
}
.yes-text {
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem);
  font-weight: 500; line-height: 1.6;
  color: var(--on-dark-2);
}
.yes-100 { color: var(--mint); font-weight: 800; }

/* What is on us, what is on you — the second list is short on purpose. */
.duty {
  display: grid; gap: 14px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--line-dark);
}
@media (min-width: 560px) { .duty { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.duty-col { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-dark); }
.duty-us { background: rgb(62 230 162 / .08); border-color: rgb(62 230 162 / .3); }
.duty-you { background: rgb(255 255 255 / .03); }
.duty-k { margin-block-end: 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; }
.duty-us .duty-k { color: var(--mint); }
.duty-you .duty-k { color: var(--on-dark-3); }
.duty ul { display: grid; gap: 8px; }
.duty li {
  display: flex; align-items: center; gap: 10px;
  font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--on-dark);
}
.duty li::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none; }
.duty-us li::before { background: var(--mint); box-shadow: 0 0 0 3px rgb(62 230 162 / .18); }
.duty-you li { color: var(--on-dark-2); font-weight: 500; }
.duty-you li::before { background: var(--on-dark-3); }

/* ── 8. The process ────────────────────────────────────────────────────── */

.process { padding-block: var(--sec-y); }

.tl { display: grid; gap: 32px; }
@media (min-width: 1080px) {
  .tl { grid-template-columns: 236px minmax(0, 1fr); gap: 56px; align-items: start; }
}

/* The sticky 30-day rail (desktop). --p (0–1) is set by the script from the
   scroll position; without it the rail is simply empty. */
.rail { display: none; }
@media (min-width: 1080px) {
  .rail { display: block; position: sticky; inset-block-start: 112px; }
}
.rail-track {
  position: absolute; inset-block: 18px; inset-inline-start: 17px;
  inline-size: 2px; border-radius: 2px;
  background: var(--line);
}
.rail-fill {
  position: absolute; inset-inline: 0; inset-block-start: 0;
  block-size: calc(var(--p, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(var(--signal), var(--mint));
  box-shadow: 0 0 12px rgb(62 230 162 / .55);
}
.rail-list { position: relative; display: grid; gap: 8px; }
.rail-list a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding-block: 8px;
  color: var(--text-3); text-decoration: none;
  border-radius: 12px;
  transition: color .3s;
}
.rail-list a:hover { color: var(--text); }
.rail-n {
  display: grid; place-items: center;
  inline-size: 36px; block-size: 36px; border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  font: 700 .8125rem/1 var(--mono); color: var(--text-3);
  transition: background-color .35s, border-color .35s, color .35s, box-shadow .35s;
}
.rail-t { font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.rail-tag {
  grid-column: 2; justify-self: start;
  margin-block-start: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgb(11 122 87 / .08); color: var(--signal);
  font-weight: 700; font-size: .75rem;
}
.rail-list a.is-done .rail-n { background: var(--ink-800); border-color: var(--ink-800); color: var(--mint); }
.rail-list a.is-active { color: var(--text); }
.rail-list a.is-active .rail-n {
  background: var(--ink-800); border-color: var(--ink-800); color: var(--mint);
  box-shadow: 0 0 0 6px rgb(62 230 162 / .2);
}

.steps { position: relative; display: grid; gap: clamp(20px, 3vw, 28px); }

/* Below the rail breakpoint, a thin line down the reading edge ties the
   cards together and fills with the same --p. */
@media (max-width: 1079px) {
  .steps { padding-inline-start: 22px; }
  .steps::before, .steps::after {
    content: ""; position: absolute; inset-block-start: 28px; inset-inline-start: 5px;
    inline-size: 2px; border-radius: 2px;
  }
  .steps::before { inset-block-end: 28px; background: var(--line); }
  .steps::after {
    block-size: calc(var(--p, 0) * (100% - 56px));
    background: linear-gradient(var(--signal), var(--mint));
  }
  .step::before {
    content: ""; position: absolute; inset-block-start: 34px; inset-inline-start: -22px;
    inline-size: 12px; block-size: 12px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--line-2);
    transition: background-color .3s, border-color .3s;
  }
  .step.is-active::before, .step.is-done::before { background: var(--mint); border-color: var(--signal); }
}

.step {
  position: relative;
  display: grid; gap: 24px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(14 22 19 / .04), 0 24px 48px -34px rgb(14 22 19 / .22);
  transition: border-color .4s, box-shadow .4s;
}
.step.is-active {
  border-color: rgb(11 122 87 / .35);
  box-shadow: 0 1px 2px rgb(14 22 19 / .04), 0 32px 64px -36px rgb(11 122 87 / .4);
}
@media (min-width: 780px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 36px; align-items: center; }
}

.step-meta { display: flex; align-items: center; gap: 14px; margin-block-end: 18px; }
.step-n {
  font-size: clamp(2.5rem, 1.7rem + 2.2vw, 3.5rem);
  font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--signal);
  transition: color .4s;
}
.step.is-active .step-n, .step.is-done .step-n { color: var(--signal); }
@supports not (-webkit-text-stroke: 1px #000) {
  .step-n { color: var(--signal); }
}
.step-ico {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px; border-radius: 13px;
  background: var(--ink-800); color: var(--mint);
  box-shadow: 0 8px 20px -10px rgb(14 22 19 / .6);
}
.step-ico svg { inline-size: 22px; block-size: 22px; }
.step-tag {
  margin-inline-start: auto;
  padding: 6px 11px; border-radius: 999px;
  background: rgb(11 122 87 / .08); border: 1px solid rgb(11 122 87 / .2);
  color: var(--signal); font-weight: 700; font-size: .8125rem;
  white-space: nowrap;
}
.step h3 {
  margin-block-end: 12px;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  font-weight: 800; line-height: 1.3;
}
.step-k {
  display: block;
  margin-block-end: 6px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  color: var(--signal);
}
.step-copy p { color: var(--text-2); line-height: 1.75; }

/* What the stage gets you, in one line, set apart from how it is done. */
.step-copy .step-out {
  margin-block-start: 16px; padding: 12px 14px;
  border-radius: 12px;
  background: rgb(11 122 87 / .06);
  border: 1px solid rgb(11 122 87 / .16);
  font-weight: 600; line-height: 1.55; color: var(--text);
}
.step-out span { color: var(--signal); font-weight: 800; }
.step-copy .step-win {
  display: flex; align-items: flex-start; gap: 10px;
  margin-block-start: 14px;
  font-weight: 600; color: var(--text);
}
.step-win svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 3px; color: var(--signal); }

/* The mock-up windows. Dark instruments set into paper cards. */
.viz {
  position: relative;
  min-block-size: 260px;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgb(62 230 162 / .08), transparent 70%),
    var(--ink-850);
  border: 1px solid var(--ink-600);
  box-shadow: 0 24px 48px -28px rgb(5 12 10 / .6), inset 0 1px 0 rgb(255 255 255 / .05);
  color: var(--on-dark-2);
  overflow: hidden;
}
.viz-head {
  display: flex; align-items: center; gap: 8px;
  margin-block-end: 14px; padding-block-end: 12px;
  border-block-end: 1px solid var(--line-dark);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  color: var(--on-dark-3);
}
.viz-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--on-dark-3); }
.viz-dot-live { background: var(--mint); animation: pulse 2s ease-out infinite; }
.viz-cap { margin-block-start: 12px; font-size: .71875rem; color: var(--on-dark-3); }

/* Stage 1 — a week of work under the scanner. */
.scan { position: relative; overflow: hidden; padding-block-end: 2px; }
.scan-days, .scan-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scan-days { margin-block-end: 8px; text-align: center; font-size: .6875rem; font-weight: 600; color: var(--on-dark-3); }
.scan-grid i { position: relative; display: block; block-size: 22px; border-radius: 5px; background: rgb(255 255 255 / .06); }
.scan-grid .w2 { background: rgb(255 255 255 / .1); }
.scan-grid .w3 { background: rgb(255 255 255 / .15); }
.scan-grid .leak {
  background: rgb(255 143 90 / .2);
  box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 16px rgb(255 143 90 / .35);
  animation: leak 2.4s ease-in-out infinite;
}
.scan-grid .l2 { animation-delay: .8s; }
.scan-grid .l3 { animation-delay: 1.6s; }
.scan-grid .leak::after {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 .625rem/1 var(--mono); color: #ffd0b8;
}
.scan-grid .l1::after { content: "1"; }
.scan-grid .l2::after { content: "2"; }
.scan-grid .l3::after { content: "3"; }
/* The beam: a full-width layer carrying a line on its right edge, moved by
   its own width — so it sweeps the grid right-to-left at any size. */
.scan-beam {
  position: absolute; inset: 0;
  transform: translateX(-60%);
  animation: scan 4.2s var(--ease-io) infinite alternate;
  pointer-events: none;
}
.scan-beam::before {
  content: ""; position: absolute; inset-block: 0; right: 0;
  inline-size: 2px;
  background: var(--mint);
  box-shadow: 0 0 14px 3px rgb(62 230 162 / .55);
}
.scan-beam::after {
  content: ""; position: absolute; inset-block: 0; right: 2px;
  inline-size: 40px;
  background: linear-gradient(270deg, rgb(62 230 162 / .18), transparent);
}
.scan-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block-start: 16px; font-size: .75rem; font-weight: 600; color: var(--on-dark-2); }
.scan-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { inline-size: 10px; block-size: 10px; border-radius: 3px; }
.sw-leak { background: rgb(255 143 90 / .25); box-shadow: inset 0 0 0 1.5px var(--ember); }

/* Stage 2 — one possible workflow, lighting up node by node. */
.pipe { position: relative; display: grid; gap: 8px; }
.pipe li {
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(62 230 162 / .08);
  border: 1px solid rgb(62 230 162 / .4);
  animation: 7s var(--ease) infinite both;
}
.pipe li:not(:last-child)::after {
  content: ""; position: absolute; inset-block-end: -9px; inset-inline-start: 27px;
  inline-size: 2px; block-size: 8px; background: rgb(62 230 162 / .35);
}
.pipe-ico {
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px; border-radius: 9px;
  background: rgb(255 255 255 / .06); color: var(--mint-2);
}
.pipe-ico svg { inline-size: 17px; block-size: 17px; }
.pipe-t { font-size: .8125rem; font-weight: 600; color: var(--on-dark); min-inline-size: 0; }
.pipe-s { font-size: .6875rem; font-weight: 700; color: var(--mint-2); white-space: nowrap; animation: 7s linear infinite both; }
.pipe .p5 { background: rgb(245 200 106 / .08); border-color: rgb(245 200 106 / .45); }
.pipe .p5 .pipe-ico, .pipe .p5 .pipe-s { color: var(--gold); }
.pipe .p1 { animation-name: pipe-1; } .pipe .p1 .pipe-s { animation-name: pipe-s-1; }
.pipe .p2 { animation-name: pipe-2; } .pipe .p2 .pipe-s { animation-name: pipe-s-2; }
.pipe .p3 { animation-name: pipe-3; } .pipe .p3 .pipe-s { animation-name: pipe-s-3; }
.pipe .p4 { animation-name: pipe-4; } .pipe .p4 .pipe-s { animation-name: pipe-s-4; }
.pipe .p5 { animation-name: pipe-5; } .pipe .p5 .pipe-s { animation-name: pipe-s-5; }

/* Stage 3 — a human in the loop on anything sensitive. */
.alert {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgb(245 200 106 / .08); border: 1px solid rgb(245 200 106 / .36);
  color: #f6d48f; font-size: .8125rem; font-weight: 700;
  animation: alert-in 6s var(--ease) infinite both;
}
.alert-ico { display: grid; flex: none; }
.alert-ico svg { inline-size: 18px; block-size: 18px; transform-origin: 50% 10%; animation: bell 6s ease-in-out infinite; }
.draft {
  display: grid; gap: 8px;
  margin-block-start: 12px; padding: 14px;
  border-radius: 12px;
  background: rgb(255 255 255 / .04); border: 1px solid var(--line-dark);
}
.draft-k { font-size: .6875rem; font-weight: 700; letter-spacing: .05em; color: var(--on-dark-3); }
.ln { display: block; block-size: 7px; border-radius: 4px; background: rgb(255 255 255 / .12); }
.ln1 { inline-size: 92%; } .ln2 { inline-size: 76%; } .ln3 { inline-size: 54%; }
.draft-act { display: flex; gap: 8px; margin-block-start: 6px; }
.act { padding: 7px 14px; border-radius: 9px; font-size: .75rem; font-weight: 700; }
.act-ok { background: var(--mint); color: var(--mint-ink); animation: press 6s var(--ease) infinite; }
.act-edit { border: 1px solid var(--line-dark-2); color: var(--on-dark-2); }
.toggles { display: grid; gap: 10px; margin-block-start: 14px; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .75rem; font-weight: 600; color: var(--on-dark-2); }
.sw-ui {
  position: relative; flex: none;
  inline-size: 34px; block-size: 20px; border-radius: 99px;
  background: rgb(255 255 255 / .12);
}
.sw-ui i {
  position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .3);
}
/* ON moves the knob to the far (left) edge in RTL. */
.sw-ui.is-on { background: var(--mint); }
.sw-ui.is-on i { transform: translateX(-14px); }

/* Day 30 — before and after, deliberately without numbers. */
.meter { display: grid; gap: 14px; padding-block: 4px; }
.meter-k { font-size: .75rem; font-weight: 700; color: var(--on-dark-3); }
.bar-row, .meter-gap { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 12px; align-items: center; }
.bar-l { font-size: .8125rem; font-weight: 700; color: var(--on-dark-2); }
.bar { position: relative; block-size: 28px; border-radius: 8px; background: rgb(255 255 255 / .04); overflow: hidden; }
.bar i {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: 8px;
  transform-origin: right;
  animation: grow-loop 6s var(--ease) infinite both;
}
.bar-before {
  inline-size: 92%;
  background: repeating-linear-gradient(-45deg, rgb(255 143 90 / .6) 0 8px, rgb(255 143 90 / .42) 8px 16px);
}
.bar-after {
  inline-size: 30%;
  background: linear-gradient(270deg, var(--mint), #1fc98a);
  box-shadow: 0 0 16px rgb(62 230 162 / .4);
  animation-delay: .5s;
}
.meter-gap > .gap-line { grid-column: 2; position: relative; display: block; block-size: 0; }
.meter-gap { position: relative; padding-block-start: 6px; }
.gap-line {
  margin-inline-start: 30%; margin-inline-end: 8%;
  border-block-start: 1.5px dashed var(--mint);
}
.gap-t {
  grid-column: 2;
  justify-self: center;
  margin-block-start: 6px;
  font-size: .75rem; font-weight: 700; color: var(--mint-2);
}

/* ── 8b. What you have on day 30 ───────────────────────────────────────── */

.get { margin-block-start: clamp(72px, 9vw, 120px); }
.get-head { margin-block-end: clamp(28px, 4vw, 44px); text-align: center; }
.get-title {
  max-inline-size: 24ch; margin-inline: auto;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
}
.get-sub { margin-block-start: 8px; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); font-weight: 600; color: var(--text-2); }

.get-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .get-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; } }

.get-list { display: grid; gap: 12px; }
.get-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px -28px rgb(14 22 19 / .35);
}
.get-n {
  display: grid; place-items: center;
  inline-size: 40px; block-size: 40px; border-radius: 12px;
  background: var(--ink-800); color: var(--mint);
  font: 700 .875rem/1 var(--mono);
}
.get-list h4 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 800; line-height: 1.35; color: var(--text); }
.get-list p { font-size: 1rem; line-height: 1.6; color: var(--text-2); }
/* What each part is worth — beside it on a wide screen, under it on a phone. */
.get-val {
  grid-column: 2; justify-self: start;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgb(11 122 87 / .08); border: 1px solid rgb(11 122 87 / .2);
  font-size: 1rem; font-weight: 800; color: var(--signal-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.get-val span { font-size: .75rem; font-weight: 700; color: var(--text-3); }
@media (min-width: 560px) {
  .get-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .get-val { grid-column: 3; grid-row: 1; align-self: center; }
}

/* Three ordinary moments after — the dream outcome as scenes, not adjectives. */
.day { margin-block-start: clamp(40px, 5vw, 56px); }
.day-k { margin-block-end: 16px; text-align: center; font-size: 1.125rem; font-weight: 800; color: var(--text); }
.day-list { display: grid; gap: 12px; }
@media (min-width: 860px) { .day-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.day-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--ink-800);
  color: var(--on-dark-2);
}
.day-list p { font-size: 1rem; line-height: 1.6; }
.day-list b { display: block; color: var(--on-dark); font-weight: 800; }
.day-ico {
  display: grid; place-items: center; flex: none;
  inline-size: 38px; block-size: 38px; border-radius: 11px;
  background: rgb(62 230 162 / .12); color: var(--mint);
}
.day-ico svg { inline-size: 19px; block-size: 19px; }
.day .ex-note { margin-block-start: 16px; }

/* ── 9. Bonuses ────────────────────────────────────────────────────────── */

.bonuses { padding-block: var(--sec-y); overflow: hidden; }
.bonus-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 50% at 50% 100%, rgb(62 230 162 / .11), transparent 70%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900));
}
.bonuses .sec-head h2 { max-inline-size: 26ch; margin-inline: auto; }

.bonus-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .bonus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.bonus {
  --mx: 50%; --my: 0%;
  position: relative;
  display: flex; flex-direction: column;
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgb(255 255 255 / .065), rgb(255 255 255 / .018));
  border: 1px solid var(--line-dark-2);
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / .8);
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
/* A light that follows the pointer (coordinates from the script). */
.bonus::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(62 230 162 / .14), transparent 45%);
  opacity: 0; transition: opacity .45s;
  pointer-events: none;
}
@media (hover: hover) {
  .bonus:hover { transform: translateY(-6px); border-color: rgb(62 230 162 / .42); box-shadow: 0 40px 80px -40px rgb(62 230 162 / .35); }
  .bonus:hover::before { opacity: 1; }
}

.bonus-art {
  position: relative;
  display: grid; place-items: center;
  block-size: 176px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background:
    radial-gradient(circle at 50% 60%, rgb(62 230 162 / .16), transparent 60%),
    linear-gradient(var(--line-dark) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--ink-800);
}
.bonus-art > svg { inline-size: min(100%, 240px); block-size: auto; }

.bonus-body { flex: 1; padding: 22px 14px 8px; }
.bonus-k { margin-block-end: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--mint); }
.bonus h3 { margin-block-end: 10px; font-size: 1.375rem; font-weight: 800; line-height: 1.3; }
.bonus-body p { font-size: 1rem; line-height: 1.65; color: var(--on-dark-2); }
.bonus-body .bonus-promise { margin-block-end: 8px; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--mint-2); }
.bonus-body .bonus-fear {
  margin-block-start: 14px; padding: 10px 12px;
  border-radius: 12px;
  background: rgb(255 143 90 / .07);
  border: 1px solid rgb(255 143 90 / .2);
  font-size: .9375rem; line-height: 1.5; color: var(--on-dark);
}
.bonus-fear span { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: #ffb48f; }

.bonus-val {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 4px 4px; padding: 14px 16px;
  border-radius: 16px;
  background: rgb(255 255 255 / .04); border: 1px solid var(--line-dark);
}
.val-k { font-size: .8125rem; color: var(--on-dark-3); }
.val-n { font-size: 1.25rem; font-weight: 800; color: var(--on-dark); white-space: nowrap; }
.val-n s { text-decoration-color: rgb(62 230 162 / .9); text-decoration-thickness: 2px; }
.val-free {
  margin-inline-start: auto;
  padding: 7px 12px; border-radius: 999px;
  background: var(--mint); color: var(--mint-ink);
  font-size: .875rem; font-weight: 800; white-space: nowrap;
}

/* Bonus 1 — the business's flight-mode switch. Resting state is ON. */
.flight-orbit {
  position: absolute; inline-size: 230px; block-size: 230px; border-radius: 50%;
  border: 1px dashed rgb(62 230 162 / .22);
  animation: spin 40s linear infinite;
}
.flight-orbit::before {
  content: ""; position: absolute; inset-block-start: 22px; left: 30px;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 12px var(--mint);
}
.flight-switch {
  position: relative;
  inline-size: 132px; block-size: 68px; border-radius: 99px;
  background: rgb(62 230 162 / .22);
  border: 1px solid rgb(62 230 162 / .5);
  box-shadow: inset 0 2px 8px rgb(0 0 0 / .45), 0 0 30px rgb(62 230 162 / .25);
  animation: flight-track 6s var(--ease) infinite both;
}
.flight-switch i {
  position: absolute; inset-block-start: 5px; right: 5px;
  display: grid; place-items: center;
  inline-size: 56px; block-size: 56px; border-radius: 50%;
  background: var(--mint); color: var(--mint-ink);
  box-shadow: 0 6px 18px rgb(0 0 0 / .45);
  transform: translateX(-64px);
  animation: flight-knob 6s var(--ease) infinite both;
}
.flight-switch i svg { inline-size: 26px; block-size: 26px; transform: rotate(-90deg); }
.flight-st {
  position: absolute; inset-block-end: 16px;
  font-size: .75rem; font-weight: 700; color: var(--mint-2);
  animation: flight-label 6s var(--ease) infinite both;
}

/* Bonus 2 — a blueprint with five numbered stops. */
.map-path {
  stroke: var(--mint); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgb(62 230 162 / .45));
  animation: map-draw 6s var(--ease-io) infinite both;
}
.map-nodes circle {
  fill: var(--ink-800); stroke: var(--mint); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: node 6s var(--ease) infinite both;
}
.map-nodes circle:nth-child(2) { animation-delay: .35s; }
.map-nodes circle:nth-child(3) { animation-delay: .7s; }
.map-nodes circle:nth-child(4) { animation-delay: 1.05s; }
.map-nodes circle:nth-child(5) { animation-delay: 1.4s; }
.map-num text { font: 800 8px var(--font); text-anchor: middle; fill: var(--mint-2); }

/* Bonus 3 — a shield that manual work bounces off. */
.sh-body { stroke: var(--mint); stroke-width: 2.5; fill: rgb(62 230 162 / .12); }
.sh-check { stroke: var(--mint); stroke-width: 3.5; }
.sh-wave {
  stroke: rgb(62 230 162 / .55); stroke-width: 1.5; opacity: .25;
  transform-box: fill-box; transform-origin: center;
  animation: wave 3.2s ease-out infinite;
}
.sh-wave.w2 { animation-delay: 1.6s; }
.sh-hand rect { fill: rgb(255 143 90 / .12); stroke: var(--ember); stroke-width: 1.75; }
.sh-hand path { stroke: var(--ember); stroke-width: 1.75; }
.hand-a { animation: hand-a 3.2s var(--ease-io) infinite; }
.hand-b { animation: hand-b 3.2s var(--ease-io) infinite; animation-delay: 1.6s; }

/* The whole offer as a receipt: paper on the dark ground, dotted leaders,
   mono figures, a torn edge at the foot. */
.stack {
  position: relative;
  max-inline-size: 680px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(28px, 4vw, 40px);
  border-radius: 20px 20px 4px 4px;
  background: var(--paper);
  color: var(--text-2);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / .85), 0 0 0 1px rgb(62 230 162 / .25);
}
.stack::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -10px;
  block-size: 12px;
  background: radial-gradient(circle at 8px -2px, transparent 8px, var(--paper) 8.5px) 0 0 / 16px 12px repeat-x;
}
.stack-head { margin-block-end: 18px; text-align: center; }
.stack-k { font: 700 .75rem/1 var(--mono); letter-spacing: .18em; color: var(--signal); }
.stack .stack-title { margin-block-start: 10px; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 800; color: var(--text); }
.stack-list { display: grid; gap: 0; border-block: 1.5px dashed var(--line-2); padding-block: 8px; }
.stack-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding-block: 9px;
  font-size: 1rem; line-height: 1.45; color: var(--text);
}
.stack-i { min-inline-size: 0; }
.stack-dots { flex: 1; min-inline-size: 16px; border-block-end: 2px dotted var(--line-2); transform: translateY(-4px); }
.stack-v { flex: none; font: 700 1rem/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stack-sub { margin-block: 4px; padding-block: 12px !important; border-block: 1px solid var(--line); font-weight: 800; }
.stack-sub .stack-v { color: var(--signal-deep); }
.stack-bonus .stack-i { color: var(--text-2); }
.stack-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-block-start: 16px;
  font-size: 1.125rem; font-weight: 800; color: var(--text);
}
.stack-total b {
  font: 800 clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem)/1 var(--mono);
  letter-spacing: -.02em; color: var(--signal-deep);
  font-variant-numeric: tabular-nums;
}
.stack-limit {
  justify-content: center;
  margin-block-start: 12px;
  font-size: .9375rem; color: var(--text-2);
}
.stack-limit svg { color: var(--ember-ink); }
.stack-limit b { color: var(--ember-ink); }
.stack-invest {
  margin-block-start: 14px; padding: 12px 14px;
  border-radius: 12px;
  background: rgb(11 122 87 / .07);
  font-size: 1rem; font-weight: 600; line-height: 1.6; color: var(--text);
  text-align: center;
}
@media (max-width: 460px) {
  .stack-list li { flex-wrap: wrap; row-gap: 2px; }
  .stack-dots { display: none; }
  .stack-v { margin-inline-start: auto; }
}

/* ── 10. Guarantee ─────────────────────────────────────────────────────── */

.guarantee { padding-block: var(--sec-y); }
.g-card {
  position: relative;
  display: grid; gap: 28px; align-items: center;
  max-inline-size: 1060px; margin-inline: auto;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(14 22 19 / .04), 0 40px 80px -50px rgb(14 22 19 / .35);
  overflow: hidden;
}
.g-card::after {
  content: ""; position: absolute; inset-inline-end: -120px; inset-block-start: -120px;
  inline-size: 320px; block-size: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(62 230 162 / .16), transparent);
  pointer-events: none;
}
@media (min-width: 860px) { .g-card { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; } }

.g-art { position: relative; display: grid; place-items: center; min-block-size: 230px; }
.g-30 {
  position: absolute;
  font-size: clamp(9rem, 6rem + 10vw, 15rem); font-weight: 800; line-height: 1; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgb(11 122 87 / .16);
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px #000) { .g-30 { color: rgb(11 122 87 / .07); } }
.glass { position: relative; inline-size: 116px; block-size: auto; overflow: visible; filter: drop-shadow(0 22px 30px rgb(11 122 87 / .28)); }
.glass-frame { stroke: var(--ink-800); stroke-width: 5; }
.glass-body { stroke: var(--ink-800); stroke-width: 2.5; fill: rgb(11 122 87 / .05); }
.sand-top, .sand-bot { fill: var(--signal); transform-box: view-box; }
.sand-top { transform-origin: 40px 48px; transform: scaleY(.55); animation: sand-top 7s linear infinite both; }
.sand-bot { transform-origin: 40px 108px; transform: scaleY(.5); animation: sand-bot 7s linear infinite both; }
.sand-fall { stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 3 5; animation: fall .5s linear infinite, fall-show 7s linear infinite both; }
.glass-turn { transform-box: view-box; transform-origin: 40px 60px; animation: turn 7s var(--ease) infinite both; }

.g-copy h2 { margin-block-end: 18px; font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.g-text { font-size: var(--fs-lede); line-height: 1.75; color: var(--text-2); max-inline-size: 46ch; }
.g-text strong { color: var(--text); }

/* The same commitment, spelled out row by row. */
.terms { display: grid; margin: 26px 0 0; border-block-start: 1px solid var(--line); }
.term {
  display: grid; gap: 4px 20px;
  padding-block: 14px;
  border-block-end: 1px solid var(--line);
}
@media (min-width: 560px) { .term { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: baseline; } }
.term dt { font-size: .875rem; font-weight: 800; color: var(--signal); }
.term dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); }

/* ── 11. Who it is for ─────────────────────────────────────────────────── */

.fit { padding-block: var(--sec-y); }
.fit-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .fit-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; } }
.fit h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.fit-text { margin-block-start: 20px; max-inline-size: 46ch; font-size: var(--fs-lede); line-height: 1.75; }
.checks { display: grid; gap: 12px; }
.checks li {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 12px 30px -24px rgb(14 22 19 / .3);
  font-size: 1.0625rem; font-weight: 700; color: var(--text); line-height: 1.4;
}
.chk {
  display: grid; place-items: center; flex: none;
  inline-size: 30px; block-size: 30px; border-radius: 50%;
  background: var(--signal); color: #fff;
  box-shadow: 0 0 0 5px rgb(11 122 87 / .1);
}
.chk svg { inline-size: 15px; block-size: 15px; }
.fit-tag {
  display: inline-flex; align-items: center; gap: 10px;
  margin-block-start: 16px; padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink-800); color: var(--mint-2);
  font-size: .875rem; font-weight: 700;
}
.fit-tag-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.fit-tag { margin-block-start: 24px; }
.fit-k { margin-block-end: 10px; font-size: .875rem; font-weight: 800; letter-spacing: .04em; color: var(--signal); }
.fit-k-not { margin-block-start: 24px; color: var(--ember-ink); }
.checks-not li { background: transparent; box-shadow: none; font-weight: 600; color: var(--text-2); }
.checks + .fit-k { margin-block-start: 22px; }
/* The everyday signs — lighter than the criteria above them. */
.signs { display: flex; flex-wrap: wrap; gap: 8px; }
.signs li {
  padding: 8px 14px; border-radius: 999px;
  background: var(--ink-800); color: var(--on-dark);
  font-size: .9375rem; font-weight: 600; line-height: 1.4;
}
.checks-not .chk { background: rgb(255 143 90 / .14); color: var(--ember-ink); box-shadow: none; }

/* ── 11b. Questions ────────────────────────────────────────────────────── */

.faq { padding-block: var(--sec-y); }
.faq-wrap { max-inline-size: 920px; }
.faq-list { display: grid; gap: 10px; }
.qa {
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  transition: border-color .25s, box-shadow .25s;
}
.qa[open] { border-color: rgb(11 122 87 / .35); box-shadow: 0 20px 44px -34px rgb(11 122 87 / .45); }
.qa summary {
  position: relative;
  display: block;
  padding: 18px 22px; padding-inline-end: 60px;
  font-size: 1.0625rem; font-weight: 800; line-height: 1.45; color: var(--text);
  cursor: pointer;
  list-style: none;
  border-radius: 18px;
}
.qa summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus. */
.qa summary::before, .qa summary::after {
  content: "";
  position: absolute; inset-inline-end: 24px; inset-block-start: 50%;
  inline-size: 14px; block-size: 2px; border-radius: 2px;
  background: var(--signal);
  transition: transform .3s var(--ease);
}
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0); }
.qa summary:hover { color: var(--signal-deep); }
.qa-a { padding: 0 22px 20px; }
.qa-a p { max-inline-size: 64ch; font-size: 1rem; line-height: 1.75; color: var(--text-2); }

/* ── 12. Final CTA and the form ────────────────────────────────────────── */

.final { padding-block: var(--sec-y); overflow: hidden; }
.final-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 60% at 85% 15%, rgb(62 230 162 / .15), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgb(11 122 87 / .3), transparent 70%),
    var(--ink-900);
}
.final-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .final-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 72px; } }

.final h2 {
  font-size: clamp(1.875rem, 1rem + 2.9vw, 3.125rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.015em;
  outline: none;
}
.final-text { max-inline-size: 46ch; margin-block-start: 20px; font-size: var(--fs-lede); line-height: 1.7; color: var(--on-dark-2); }

/* What happens after you send it — three steps, so nothing is a surprise. */
.next { display: grid; gap: 12px; margin-block-start: 28px; }
.next li { display: flex; align-items: flex-start; gap: 14px; }
.next-n {
  display: grid; place-items: center; flex: none;
  inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: rgb(62 230 162 / .12); border: 1px solid rgb(62 230 162 / .4);
  color: var(--mint); font: 700 .8125rem/1 var(--mono);
}
.next p { padding-block-start: 3px; font-size: 1.0625rem; line-height: 1.55; color: var(--on-dark-2); }
.next b { color: var(--on-dark); font-weight: 700; }

.urgent {
  margin-block-start: 24px; padding: 14px 16px;
  border-radius: 14px;
  background: rgb(245 200 106 / .08);
  border: 1px solid rgb(245 200 106 / .35);
  font-size: 1rem; color: var(--on-dark-2);
}
.urgent svg { color: var(--gold); }
.urgent b { color: #f6d48f; }
.deadline { white-space: nowrap; }

.final-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 24px;
  font-size: 1.0625rem; font-weight: 600; color: var(--mint-2);
}
.final-note svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--mint); }

.form-card {
  position: relative;
  padding: clamp(22px, 3.5vw, 36px);
  border-radius: 26px;
  background: var(--paper);
  color: var(--text-2);
  box-shadow:
    0 0 0 1px rgb(62 230 162 / .28),
    0 0 70px -20px rgb(62 230 162 / .4),
    0 40px 100px -40px rgb(0 0 0 / .85);
}
.form-title { margin-block-end: 22px; font-size: 1.25rem; font-weight: 800; line-height: 1.35; color: var(--text); }

.field { margin: 0 0 18px; padding: 0; border: 0; min-inline-size: 0; }
.field > label, .field > legend {
  display: block; padding: 0;
  margin-block-end: 8px;
  font-size: .9375rem; font-weight: 700; color: var(--text); line-height: 1.45;
}
.field input[type="text"], .field input[type="tel"] {
  inline-size: 100%; block-size: 54px;
  padding: 0 16px;
  border-radius: 13px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  font: inherit; font-size: 1.0625rem; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
/* The number is typed LTR but sits on the RTL edge like every other field. */
.field input[type="tel"] { text-align: right; }
.field input::placeholder { color: #9aa49f; }
.field input:hover { border-color: #bdbbb1; }
.field input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 4px rgb(11 122 87 / .16); }
.field.is-invalid input[type="text"], .field.is-invalid input[type="tel"] { border-color: #c2412d; box-shadow: 0 0 0 4px rgb(194 65 45 / .1); }

.f-err { margin-block-start: 7px; font-size: .875rem; font-weight: 600; color: var(--err); }
.f-err:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 460px) {
  .chips-4, .chips-biz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chip { position: relative; display: flex; cursor: pointer; }
/* Visually replaced, still a real radio: focusable, announced, keyboard-driven. */
.chip input {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.chip span {
  display: flex; align-items: center; justify-content: center;
  inline-size: 100%;
  min-block-size: 46px; padding: 8px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  font-size: .9375rem; font-weight: 600; color: var(--text-2); line-height: 1.3; text-align: center;
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
.chip:hover span { border-color: #b8b6ac; }
.chip input:checked + span {
  border-color: var(--signal);
  background: rgb(11 122 87 / .08);
  color: var(--signal-deep);
  box-shadow: inset 0 0 0 1px var(--signal);
}
.chip input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.field.is-invalid .chip span { border-color: #e2a191; }

.field-check {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 0 18px; padding: 14px;
  border-radius: 13px;
  background: #fff; border: 1.5px solid #e4e2d9;
  transition: border-color .2s, background-color .2s;
}
.field-check input { flex: none; inline-size: 22px; block-size: 22px; margin: 2px 0 0; accent-color: var(--signal); cursor: pointer; }
.field-check label { font-size: .9375rem; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.field-check .hint { color: var(--text-3); font-weight: 400; }
.field-check.is-missing { border-color: #d6922f; background: #fff8ec; }

.hp {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.btn-submit { margin-block-start: 4px; }
.btn-busy { display: none; align-items: center; gap: 10px; }
.btn-submit.is-busy .btn-label { display: none; }
.btn-submit.is-busy .btn-busy { display: inline-flex; }
.btn-submit[disabled] { cursor: progress; transform: none; }
.spinner {
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  border: 2.5px solid rgb(4 36 26 / .25);
  border-top-color: var(--mint-ink);
  animation: spin .8s linear infinite;
}
.form-sub { margin-block-start: 10px; text-align: center; font-size: .875rem; font-weight: 700; color: var(--text-3); }
.form-consent { margin-block-start: 14px; text-align: center; font-size: .8125rem; color: var(--text-3); }
.form-consent a { color: var(--signal-deep); text-decoration: underline; text-underline-offset: 2px; }

.form-status { margin-block-start: 14px; font-size: .9375rem; font-weight: 600; line-height: 1.55; }
.form-status:empty { display: none; }
.form-status.is-err  { padding: 12px 14px; border-radius: 12px; color: var(--err);  background: #fdf0ed; border: 1px solid #f1c9bf; }
.form-status.is-note { padding: 12px 14px; border-radius: 12px; color: var(--note); background: #fff8ec; border: 1px solid #f0d6a8; }

.form-done { padding: 28px 6px 18px; text-align: center; outline: none; }
.done-ico {
  display: grid; place-items: center;
  inline-size: 68px; block-size: 68px; margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--signal); color: #fff;
  box-shadow: 0 0 0 10px rgb(11 122 87 / .12), 0 0 0 22px rgb(11 122 87 / .05);
  animation: pop .6s var(--ease) both;
}
.done-ico svg { inline-size: 30px; block-size: 30px; }
.form-done h3 { margin-block-end: 10px; font-size: 1.5rem; font-weight: 800; color: var(--text); }
.form-done p { font-size: 1.0625rem; color: var(--text-2); }

/* ── 13. Footer and the mobile sticky CTA ──────────────────────────────── */

.ftr {
  padding-block: 40px calc(40px + env(safe-area-inset-bottom));
  background: var(--ink-950);
  border-block-start: 1px solid var(--line-dark);
  color: var(--on-dark-3);
}
.ftr-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ftr-links a { font-size: .9375rem; color: var(--on-dark-2); text-decoration: none; }
.ftr-links a:hover { color: var(--mint); }
.ftr-id { inline-size: 100%; padding-block-start: 20px; border-block-start: 1px solid var(--line-dark); font-size: .8125rem; }

.sticky-cta {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
  padding: 18px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgb(8 17 14 / 0), rgb(8 17 14 / .88) 40%);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.sticky-cta.is-on { transform: translateY(0); visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
.sticky-cta .btn { --h: 54px; padding-inline: 16px; font-size: 1rem; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ── 14. Motion: reveal, liveness, pause ───────────────────────────────── */

/* The script marks below-the-fold blocks .rv-wait and lifts them in as they
   arrive. It only does so when motion is welcome, so with scripting off or
   reduced motion on, nothing is ever hidden. */
[data-rv] { transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-rv="2"] { transition-delay: .1s; }
[data-rv="3"] { transition-delay: .2s; }
.rv-wait { opacity: 0; transform: translate3d(0, 28px, 0); }

/* Mock-ups only move while they are on screen (the script toggles .is-live),
   and the hero conveyor also stops on its own pause button. */
.js [data-live]:not(.is-live),
.js [data-live]:not(.is-live) *,
.js [data-live]:not(.is-live) *::before,
.js [data-live]:not(.is-live) *::after,
.flow.is-paused, .flow.is-paused *, .flow.is-paused *::before, .flow.is-paused *::after {
  animation-play-state: paused !important;
}

/* ── 15. Keyframes ─────────────────────────────────────────────────────── */

@keyframes rise   { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@keyframes marker { from { background-size: 0% 100%; } }
@keyframes sheen  { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgb(62 230 162 / .55); }
  70%  { box-shadow: 0 0 0 10px rgb(62 230 162 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(62 230 162 / 0); }
}
@keyframes pop    { from { transform: scale(.4); opacity: 0; } }
@keyframes grow-loop {
  0%, 60%   { transform: scaleX(1); opacity: 1; }
  66%       { transform: scaleX(1); opacity: 0; }
  67%       { transform: scaleX(0); opacity: 1; }
  90%, 100% { transform: scaleX(1); opacity: 1; }
}

/* Hero conveyor. Each row waits, crosses the beam, rests as done, fades out
   and comes back to the owner's column. Staggered by --step per row, so the
   five never move at once. */
@keyframes task-move {
  0%, 12% { transform: translateX(0); background-color: var(--ink-700); border-color: var(--line-dark-2); opacity: 1; }
  20%     { transform: translateX(var(--dx)); background-color: rgb(62 230 162 / .1); border-color: rgb(62 230 162 / .45); opacity: 1; }
  78%     { transform: translateX(var(--dx)); background-color: rgb(62 230 162 / .1); border-color: rgb(62 230 162 / .45); opacity: 1; }
  84%     { transform: translateX(var(--dx)); background-color: rgb(62 230 162 / .1); border-color: rgb(62 230 162 / .45); opacity: 0; }
  85%     { transform: translateX(0); background-color: var(--ink-700); border-color: var(--line-dark-2); opacity: 0; }
  92%, 100% { transform: translateX(0); background-color: var(--ink-700); border-color: var(--line-dark-2); opacity: 1; }
}
@keyframes task-move-approve {
  0%, 12% { transform: translateX(0); background-color: var(--ink-700); border-color: var(--line-dark-2); opacity: 1; }
  20%     { transform: translateX(var(--dx)); background-color: rgb(245 200 106 / .1); border-color: rgb(245 200 106 / .55); opacity: 1; }
  78%     { transform: translateX(var(--dx)); background-color: rgb(245 200 106 / .1); border-color: rgb(245 200 106 / .55); opacity: 1; }
  84%     { transform: translateX(var(--dx)); background-color: rgb(245 200 106 / .1); border-color: rgb(245 200 106 / .55); opacity: 0; }
  85%     { transform: translateX(0); background-color: var(--ink-700); border-color: var(--line-dark-2); opacity: 0; }
  92%, 100% { transform: translateX(0); background-color: var(--ink-700); border-color: var(--line-dark-2); opacity: 1; }
}
@keyframes st-manual { 0%, 15% { opacity: 1; } 17%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes st-auto   { 0%, 15% { opacity: 0; } 17%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
/* Runs the beam's own height (top, not a fixed translate), so the glint never
   overshoots onto the caption on the shorter phone layout. */
@keyframes beam-run  { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 44px); opacity: 0; } }

@keyframes dash-in { to { stroke-dashoffset: -20; } }
@keyframes jitter {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1.5px, -1px); }
  50% { transform: translate(-1px, 1.5px); }
  75% { transform: translate(1px, 1px); }
}
/* Every looping mock-up RESTS on its finished frame and redraws later in the
   cycle — so the first frame anyone sees (and the frame a paused, off-screen
   block holds) is the complete picture, never a blank one. */
@keyframes ekg {
  0%, 55%   { stroke-dashoffset: 0; opacity: 1; }
  62%       { stroke-dashoffset: 0; opacity: 0; }
  63%       { stroke-dashoffset: 1; opacity: 0; }
  64%       { stroke-dashoffset: 1; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes leak { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 6px rgb(255 143 90 / .2); } 50% { box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 18px rgb(255 143 90 / .55); } }
@keyframes scan { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 2px)); } }
/* Stage 2: five nodes on one shared 7s clock — all lit at rest, then they
   dim together and relight in order, like a run going through. */
@keyframes pipe-1 { 0%, 60% { opacity: 1; } 64%, 68% { opacity: .35; } 71%, 100% { opacity: 1; } }
@keyframes pipe-2 { 0%, 60% { opacity: 1; } 64%, 73% { opacity: .35; } 76%, 100% { opacity: 1; } }
@keyframes pipe-3 { 0%, 60% { opacity: 1; } 64%, 78% { opacity: .35; } 81%, 100% { opacity: 1; } }
@keyframes pipe-4 { 0%, 60% { opacity: 1; } 64%, 83% { opacity: .35; } 86%, 100% { opacity: 1; } }
@keyframes pipe-5 { 0%, 60% { opacity: 1; } 64%, 88% { opacity: .35; } 91%, 100% { opacity: 1; } }
@keyframes pipe-s-1 { 0%, 60% { opacity: 1; } 63%, 69% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes pipe-s-2 { 0%, 60% { opacity: 1; } 63%, 74% { opacity: 0; } 77%, 100% { opacity: 1; } }
@keyframes pipe-s-3 { 0%, 60% { opacity: 1; } 63%, 79% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes pipe-s-4 { 0%, 60% { opacity: 1; } 63%, 84% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes pipe-s-5 { 0%, 60% { opacity: 1; } 63%, 89% { opacity: 0; } 92%, 100% { opacity: 1; } }

@keyframes alert-in { 0%, 80% { opacity: 1; transform: none; } 86% { opacity: 0; transform: translateY(-8px); } 92%, 100% { opacity: 1; transform: none; } }
@keyframes bell { 0%, 14%, 30%, 100% { transform: rotate(0); } 18% { transform: rotate(14deg); } 22% { transform: rotate(-12deg); } 26% { transform: rotate(8deg); } }
@keyframes press { 0%, 55% { transform: scale(1); box-shadow: none; } 60% { transform: scale(.94); } 66%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgb(62 230 162 / .25); } }

@keyframes flight-track {
  0%, 18%   { background-color: rgb(255 255 255 / .08); border-color: var(--line-dark-2); box-shadow: inset 0 2px 8px rgb(0 0 0 / .45); }
  30%, 86%  { background-color: rgb(62 230 162 / .22); border-color: rgb(62 230 162 / .5); box-shadow: inset 0 2px 8px rgb(0 0 0 / .45), 0 0 30px rgb(62 230 162 / .25); }
  100%      { background-color: rgb(255 255 255 / .08); border-color: var(--line-dark-2); box-shadow: inset 0 2px 8px rgb(0 0 0 / .45); }
}
@keyframes flight-knob {
  0%, 18%  { transform: translateX(0); background-color: #e9f0ec; }
  30%, 86% { transform: translateX(-64px); background-color: var(--mint); }
  100%     { transform: translateX(0); background-color: #e9f0ec; }
}
@keyframes flight-label { 0%, 26% { opacity: 0; transform: translateY(6px); } 34%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }

@keyframes map-draw {
  0%, 55%   { stroke-dashoffset: 0; opacity: 1; }
  62%       { stroke-dashoffset: 0; opacity: 0; }
  63%       { stroke-dashoffset: 1; opacity: 0; }
  64%       { stroke-dashoffset: 1; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
/* Stops stay put; each pulses as the redrawn route passes it. */
@keyframes node { 0%, 66%, 80%, 100% { transform: scale(1); } 73% { transform: scale(1.45); } }

@keyframes wave { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
@keyframes hand-a { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(26px); } 55% { transform: translateX(14px); } }
@keyframes hand-b { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-26px); } 55% { transform: translateX(-14px); } }

@keyframes sand-top  { 0% { transform: scaleY(1); } 86%, 100% { transform: scaleY(0); } }
@keyframes sand-bot  { 0% { transform: scaleY(0); } 86%, 100% { transform: scaleY(1); } }
@keyframes fall      { to { stroke-dashoffset: -8; } }
@keyframes fall-show { 0%, 84% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes turn      { 0%, 88% { transform: rotate(0); } 100% { transform: rotate(180deg); } }

/* ── 16. Reduced motion ────────────────────────────────────────────────── */

/* Every animated part above rests in a meaningful state; with motion off
   that state is simply shown. The conveyor gets a frozen mid-flow frame —
   three tasks already handed over, one waiting for approval — so the
   before/after still reads without anything moving. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }

  .flow .t1, .flow .t2, .flow .t4 { transform: translateX(var(--dx)); }
  .flow .t1, .flow .t2 { background-color: rgb(62 230 162 / .1); border-color: rgb(62 230 162 / .45); }
  .flow .t4 { background-color: rgb(245 200 106 / .1); border-color: rgb(245 200 106 / .55); }
  .flow .t1 .st-manual, .flow .t2 .st-manual, .flow .t4 .st-manual { opacity: 0; }
  .flow .t1 .st-auto,   .flow .t2 .st-auto,   .flow .t4 .st-auto   { opacity: 1; }
  .flow-toggle { display: none; }
  .beam::after { display: none; }
}