/* =========================================================
   automations.erezb.pro — Erez Bartal
   AI ואוטומציה לעסקים
   Visual system: deep violet-black ground with purple/blue/magenta
   blooms, white rounded cards, glowing pink CTA.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* grounds */
  --night:        #0A0613;
  --night-2:      #140B23;
  --violet:       #6A1CB0;
  --blue:         #1F46D8;
  --magenta:      #B01252;
  --crimson:      #8A0B35;

  /* surfaces */
  --card:         #FFFFFF;
  --card-2:       #F6F7FB;
  --card-ink:     #101B3D;
  --card-soft:    #5C6480;
  --card-rule:    #E4E7F0;

  /* text on dark */
  --on-dark:      #FFFFFF;
  --on-dark-soft: #C6BCD8;
  --on-dark-faint:#8E85A3;
  --hairline:     rgba(255, 255, 255, .13);

  /* action */
  --cta:          #FF2E63;
  --cta-2:        #E0134E;
  --cta-ink:      #FFFFFF;
  --cta-glow:     rgba(255, 46, 99, .38);

  --radius:       18px;
  --radius-sm:    12px;
  --measure:      1120px;
  --gutter:       clamp(18px, 5vw, 48px);
  --sect:         clamp(54px, 7vw, 104px);

  /* one family, weight does the work. swap this line to try another face. */
  --font-display: "Noto Sans Hebrew", "Arial Hebrew", system-ui, sans-serif;
  --font-head: var(--font-display);
  --font-body: var(--font-display);
}

/* The page commits to one dark visual world in both themes. */
:root[data-theme="light"], :root[data-theme="dark"] { color-scheme: dark; }

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

/* the header is sticky, so an anchor that lands at the very top of the
   viewport lands underneath it. Every in-page link on the site was arriving
   with its first 68px hidden; this is the offset that stops it. */
html {
  font-family: var(--font-body); -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: clamp(84px, 9vw, 104px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
}
h1, h2, .h-sect, .final h2, .about-name {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--cta); color: #fff; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 6px; }

/* ---------- Layout ---------- */
.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
/* every section is a station on the route: a hairline frame that
   warms up once you arrive at it */
.section {
  position: relative;
  padding-block: var(--sect);
  max-width: calc(var(--measure) + var(--gutter) * 2.4);
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: clamp(20px, 2.6vw, 34px);
  background: rgba(255, 255, 255, .014);
  transition: border-color .6s ease, background .6s ease, box-shadow .6s ease;
}
.section.is-here {
  border-color: rgba(255, 255, 255, .17);
  background: rgba(255, 255, 255, .03);
  box-shadow: 0 0 60px -30px rgba(255, 46, 99, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
@media (max-width: 700px) {
  .section { margin-inline: 10px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .section { transition: none; } }

/* ---------------------------------------------------------
   One continuous ground for the whole page.
   Sections are transparent; the colour journey happens in
   .page-bg, so nothing ever meets at a hard edge.
   --------------------------------------------------------- */
.page-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #0A0613   0%,
    #150B27   9%,
    #1B0B2F  18%,
    #2E0A2C  27%,
    #14092A  38%,
    #180B31  48%,
    #1B0A2D  57%,
    #120827  66%,
    #240924  76%,
    #3E0A26  85%,
    #1A0A24  94%,
    #0A0613 100%
  );
}
.bloom { position: absolute; border-radius: 50%; }
.page-bg .bloom-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .page-bg .bloom-layer { transform: none !important; } }
.bloom--blue   { top: -6%;  inset-inline-end: -14%; width: 78vw; height: 46vw; background: radial-gradient(closest-side, rgba(31,70,216,.62), transparent 72%); }
.bloom--violet { top:  2%;  inset-inline-start: -18%; width: 76vw; height: 50vw; background: radial-gradient(closest-side, rgba(106,28,176,.66), transparent 72%); }
.bloom--mag1   { top: 14%;  inset-inline-start: -10%; width: 70vw; height: 44vw; background: radial-gradient(closest-side, rgba(176,18,82,.5), transparent 72%); }
.bloom--crim1  { top: 22%;  inset-inline-end: -12%; width: 84vw; height: 48vw; background: radial-gradient(closest-side, rgba(160,14,65,.6), transparent 72%); }
.bloom--violet2{ top: 36%;  inset-inline-end: -16%; width: 78vw; height: 48vw; background: radial-gradient(closest-side, rgba(120,34,196,.62), transparent 72%); }
.bloom--blue2  { top: 46%;  inset-inline-start: -16%; width: 76vw; height: 48vw; background: radial-gradient(closest-side, rgba(36,80,232,.56), transparent 72%); }
.bloom--mag2   { top: 58%;  inset-inline-start: -12%; width: 74vw; height: 46vw; background: radial-gradient(closest-side, rgba(190,22,92,.5), transparent 72%); }
.bloom--violet3{ top: 68%;  inset-inline-end: -14%; width: 78vw; height: 46vw; background: radial-gradient(closest-side, rgba(118,32,192,.58), transparent 72%); }
.bloom--crim2  { top: 80%;  inset-inline-start: -14%; width: 90vw; height: 52vw; background: radial-gradient(closest-side, rgba(160,14,65,.62), transparent 72%); }
.bloom--blue3  { top: 90%;  inset-inline-end: -18%; width: 76vw; height: 44vw; background: radial-gradient(closest-side, rgba(31,70,216,.4), transparent 72%); }

/* section classes stay as structure hooks — the ground is shared */
.bg-night, .bg-deep, .bg-crimson { background: transparent; }

.bg-card { background: var(--card-2); color: var(--card-ink); }

/* decorative contour lines */
.waves {
  position: absolute; inset-block: 0; z-index: 0;
  pointer-events: none; opacity: .5;
  width: min(320px, 26vw); height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.waves--start { inset-inline-start: 0; }
.waves--end { inset-inline-end: 0; transform: scaleX(-1); }
@media (max-width: 860px) { .waves { display: none; } }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex;
  margin-bottom: 22px;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #FF7A9E;
  background: rgba(255, 46, 99, .12);
  border: 1px solid rgba(255, 46, 99, .3);
  padding: 7px 16px;
  border-radius: 999px;
}
.bg-card .eyebrow { background: rgba(255, 46, 99, .09); color: #D4114C; }

.h-sect { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.12; }
/* a beat before the question, inside the heading rather than above it */
.lead-in { display: block; font-size: .5em; font-weight: 700; letter-spacing: -.02em;
  color: var(--on-dark-soft); margin-bottom: .35em; }
.h-sub { margin-top: 20px; color: var(--on-dark-soft); font-size: clamp(1.08rem, 1.7vw, 1.28rem); max-width: 50ch; line-height: 1.65; }
.bg-card .h-sub { color: var(--card-soft); }
.center { text-align: center; }
.center .h-sub, .center .eyebrow { margin-inline: auto; }
.center .h-sub { max-width: 46ch; }

/* marker under a highlighted word */
.nb { white-space: nowrap; }
/* the display face is large enough that forced phrases overflow narrow screens */
@media (max-width: 760px) { .nb { white-space: normal; } }
/* The bar is painted as a background rather than as one absolutely
   positioned box, because an inline span that wraps has no single box to
   position against: the old ::after collapsed to a dot on the last line
   whenever the phrase broke on a phone. A cloned decoration underlines
   every fragment instead. */
.mark {
  white-space: nowrap;
  background-image: linear-gradient(var(--cta), var(--cta));
  background-repeat: no-repeat;
  background-size: 100% .16em;
  background-position: 0 calc(100% - .04em);
  padding-inline: 2px; margin-inline: -2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (max-width: 760px) { .mark { white-space: normal; } }
.grad {
  background: linear-gradient(92deg, #FF5C87 0%, #C86BFF 55%, #6FA8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  padding: 15px 30px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn--cta {
  background: linear-gradient(96deg, var(--cta) 0%, var(--cta-2) 100%);
  color: var(--cta-ink);
  box-shadow: 0 10px 30px -8px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -8px var(--cta-glow); }
.btn--ghost { background: transparent; color: var(--on-dark); border: 1.5px solid var(--hairline); }
.btn--wa { background: #128C7E; border-color: #128C7E; color: #fff; }
.btn--wa:hover { background: #0E6F64; border-color: #0E6F64; color: #fff; }
.btn--ghost:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.bg-card .btn--ghost { color: var(--card-ink); border-color: var(--card-rule); }
.bg-card .btn--ghost:hover { background: #fff; border-color: #C9CEDD; }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
h1 + .btn-row, h2 + .btn-row, p + .btn-row, .h-sub + .btn-row { margin-top: clamp(26px, 3.2vw, 34px); }
/* text that follows a button gets the same pocket of air the button was
   given above it, so the row does not read as glued to the paragraph */
.btn-row + .h-sub { margin-top: clamp(26px, 3.2vw, 34px); }
.center .btn-row { justify-content: center; }
/* The arrow belongs to the primary button and to nothing else: one ← per
   decision, always before the label, and only on a .btn--cta that carries
   the visitor forward. Not on a ghost button, not on a "back" link, not on
   a whatsapp button (it has its own mark), and not on a submit that really
   sends - the contact button wears one because it navigates to the
   checklist rather than sending, while the checklist button does send and
   stays bare. */
.btn .ic { font-size: 1.1em; line-height: 1; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(10,6,19,.92) 0%, rgba(10,6,19,.72) 55%, rgba(10,6,19,0) 100%);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  transition: background .2s ease;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-head); }
.brand-logo { width: 34px; height: 34px; display: block; }
.brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.brand-name span { color: var(--on-dark-faint); font-weight: 500; font-size: .82rem; display: block; line-height: 1.2; }
/* a hairline in the gap so the three items read as separate stops */
.nav { display: flex; align-items: center; gap: 0; }
.nav a {
  position: relative;
  text-decoration: none; font-family: var(--font-head); font-weight: 700;
  font-size: .95rem; letter-spacing: -.01em; color: rgba(255, 255, 255, .78);
  padding-inline: 15px; line-height: 1.5;
  transition: color .18s ease;
}
/* the separator is drawn, not typed: a middot lands at a different size
   and height in every font, and this one has to sit dead centre in the
   gap and stay round */
.nav a + a::before {
  content: ""; position: absolute; inset-inline-start: -2.5px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--cta);
}
.nav a:first-child { padding-inline-start: 0; }
.nav a:last-child { padding-inline-end: 0; }
.nav a:hover, .nav a.is-active { color: #fff; }
/* the words are bright enough now that white alone barely reads as "you
   are here", so the section you are standing in gets a rule under it */
.nav a.is-active::after {
  content: ""; position: absolute; bottom: -5px; height: 2px; border-radius: 2px;
  inset-inline: 15px; background: var(--cta);
}
.nav a:first-child.is-active::after { inset-inline-start: 0; }
.nav a:last-child.is-active::after { inset-inline-end: 0; }
@media (max-width: 940px) { .nav { display: none; } }

/* ---------- Hero ---------- */
/* the header is sticky, so the first frame begins exactly where the strip
   ends and its top border reads as part of it. This is the gap that tells
   them apart. */
.hero { padding-block: clamp(40px, 6vw, 76px) clamp(52px, 7vw, 92px); margin-top: clamp(16px, 2.2vw, 30px); }
/* The clip and the pitch used to share a row, which left the headline
   545px to work in - four lines of display type - and the clip 428px,
   too small to read the spreadsheet it is showing. Stacked, the words get
   the full measure and the picture gets a size worth looking at. */
.hero-stack { max-width: 940px; margin-inline: auto; }
.hero-stack .hero-sub { max-width: 52ch; margin-inline: auto; }
.hero-film { max-width: 800px; margin-top: clamp(44px, 6vw, 84px); }
.hero h1 {
  font-size: clamp(2.05rem, 5.6vw, 3.9rem);
  line-height: 1.12;
}
/* nowrap that is never released: a hyphenated latin run like ל-AI
   must not break across lines at any width */
.keep { white-space: nowrap; }
.hero h1 .l2 { display: block; }
.hero-sub { margin-top: 24px; font-size: clamp(1.15rem, 1.9vw, 1.42rem); color: var(--on-dark-soft); max-width: 36ch; }
.hero-sub b { color: #fff; font-weight: 700; }



/* video */
.video {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #14091F;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.03);
  aspect-ratio: 16 / 9;
}
.video iframe { width: 100%; height: 100%; border: 0; }
/* the loop fills the 16:9 frame; object-fit keeps a clip of another
   ratio from letterboxing inside a box that already has a border */
.video-loop { width: 100%; height: 100%; display: block; object-fit: cover; background: #14091F; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #180C26 center/cover no-repeat; }
.video-facade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,6,19,.15) 0%, rgba(10,6,19,.72) 100%);
}
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; border-radius: 50%;
  background: linear-gradient(96deg, var(--cta), var(--cta-2));
  box-shadow: 0 12px 34px -6px var(--cta-glow);
  display: grid; place-items: center;
  z-index: 2;
  transition: transform .2s ease;
}
.video-facade:hover .video-play { transform: scale(1.07); }
.video-play svg { width: 26px; height: 26px; fill: #fff; margin-inline-start: 4px; }
.video-cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 16px 20px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.video-cap small { color: var(--on-dark-soft); font-weight: 400; }

/* ---------- Pain chips ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 42px); }
@media (max-width: 860px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pain-grid { grid-template-columns: 1fr; } }
.pain {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  font-family: var(--font-head); font-weight: 500; font-size: 1.08rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pain:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.pain i {
  flex: 0 0 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, rgba(255,46,99,.9), rgba(139,49,216,.9));
  display: grid; place-items: center;
}
.pain i svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.7; }
/* the sentences in this section are centred; only the six cards keep
   their own alignment, since each is an icon followed by its line */
/* the offer to see the whole thing, sitting under the problem rather than
   opening a section of its own - one fewer heading down the page */
.pain-more {
  max-width: 62ch; margin: clamp(30px, 4vw, 44px) auto 0;
  padding-top: clamp(26px, 3.4vw, 36px); border-top: 1px solid var(--hairline);
}
.pain-note { margin-top: 34px; font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-family: var(--font-head); font-weight: 600;
  text-align: center; max-width: 46ch; margin-inline: auto; }

/* ---------------------------------------------------------
   Three offers, read side by side. The middle one is the
   product most people come for, so it stands a step forward
   and out of the dark, the way a plan grid is normally read.
   Where a price would sit, the length of the session sits:
   it is the number this buyer actually wants.
   --------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(40px, 5vw, 66px);
  max-width: 1000px;
  margin-inline: auto;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 26px);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--hairline);
  text-align: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.plan:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .28); }
.plan-ico {
  width: 46px; height: 46px; margin-inline: auto;
  border-radius: 14px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
}
.plan-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan h3 { font-size: clamp(1.14rem, 2vw, 1.34rem); }
.plan-line {
  color: var(--on-dark-soft); font-size: .96rem; line-height: 1.7;
  flex: 1 1 auto;
}
.plan-dur {
  margin-top: 4px;
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-family: var(--font-head);
}
.plan-dur b {
  font-weight: 900; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);
  color: #fff;
}
.plan-dur span { font-size: .9rem; font-weight: 600; color: var(--on-dark-faint); }
.plan-dur--text b { font-size: clamp(1.2rem, 2.3vw, 1.5rem); }
.plan .btn { margin-top: 6px; }

/* the middle card carries the offer, so it leaves the dark */
.plan--core {
  background: var(--card);
  border-color: transparent;
  margin-block: clamp(-6px, -1.4vw, -22px);
  padding-block: clamp(30px, 3.4vw, 44px);
  box-shadow: 0 30px 64px -30px rgba(6, 2, 16, .95);
}
.plan--core:hover { background: var(--card); transform: translateY(-3px); }
.plan--core h3 { color: var(--card-ink); }
.plan--core .plan-line { color: var(--card-soft); }
.plan--core .plan-ico { background: rgba(255, 46, 99, .1); color: var(--cta); }
.plan--core .plan-dur b { color: var(--card-ink); }
.plan--core .plan-dur span { color: var(--card-soft); }
.plan-tag {
  position: absolute; top: 0; inset-inline: 0; margin-inline: auto;
  transform: translateY(-50%);
  width: max-content;
  font-family: var(--font-head); font-weight: 700; font-size: .74rem;
  padding: 6px 15px; border-radius: 999px;
  background: linear-gradient(96deg, var(--cta), var(--cta-2));
  color: #fff;
  box-shadow: 0 10px 26px -10px var(--cta-glow);
}

@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 26px; }
  .plan--core { margin-block: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan--core:hover { transition: none; transform: none; }
}

.win { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.win li {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 8px;
}
.win li::before { content: "\2713"; color: #6FE9B4; font-weight: 700; }

/* ---------- Worked example: one real event, minute by minute ---------- */
.demo { margin-top: clamp(26px, 3.6vw, 42px); }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.demo-tab {
  font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  color: var(--on-dark-soft); background: transparent;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 11px 22px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.demo-tab:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.demo-tab.is-on {
  color: #fff; border-color: transparent;
  background: linear-gradient(96deg, var(--cta), var(--cta-2));
  box-shadow: 0 10px 26px -12px var(--cta-glow);
}
.demo-panel[hidden] { display: none; }
.demo-panel { animation: demoIn .32s ease both; margin-top: 30px; }
@keyframes demoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .demo-panel { animation: none; } }

.story-head {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--on-dark-soft);
  margin-bottom: 26px;
}
.story-head b { color: #fff; }

.story { position: relative; max-width: 660px; margin-inline: auto; display: grid; gap: 0; }
.story-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 34px;
  padding-bottom: 30px;
}
.story-step:last-child { padding-bottom: 0; }
/* the rail runs between the clock and what happened */
.story-step::before {
  content: "";
  position: absolute;
  top: 24px; bottom: -8px;
  inset-inline-start: calc(52px + 16px);
  width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
}
.story-step:last-child::before { display: none; }
.story-step::after {
  content: "";
  position: absolute;
  top: 8px;
  inset-inline-start: calc(52px + 11px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--night);
  border: 2px solid rgba(255,255,255,.32);
}
.story-step.is-ai::after {
  background: linear-gradient(140deg, var(--cta), #8B31D8);
  border-color: transparent;
  box-shadow: 0 0 16px rgba(255,46,99,.7);
}
.story-time {
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  color: var(--on-dark-faint); direction: ltr; text-align: left; padding-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.story-step.is-ai .story-time { color: #FF7A9E; }
.story-what { font-size: 1.02rem; font-weight: 600; }
.story-what span { display: block; font-weight: 400; font-size: .92rem; color: var(--on-dark-soft); margin-top: 3px; }
.story-art { margin-top: 12px; }

.ai-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: .86rem; color: #fff;
  background: linear-gradient(125deg, rgba(255,46,99,.9), rgba(139,49,216,.9));
  border-radius: 999px; padding: 8px 15px;
  box-shadow: 0 12px 28px -16px rgba(255,46,99,.9);
}
.ai-chip em { font-style: normal; opacity: .8; font-weight: 500; }

.story-punch {
  margin-top: 30px; text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600; color: var(--on-dark-soft);
}
.story-punch b { color: #fff; font-weight: 900; font-family: var(--font-display); letter-spacing: -.02em; }

.demo-note {
  /* the line needs 732px at this size - 660 broke it in the middle */
  max-width: 780px; margin: 34px auto 0; text-align: center;
  font-size: .96rem; line-height: 1.75; color: var(--on-dark-faint);
  border-top: 1px solid var(--hairline); padding-top: 22px;
}

@media (max-width: 620px) {
  .story-step { grid-template-columns: 48px minmax(0, 1fr); gap: 26px; }
  .story-step::before { inset-inline-start: calc(48px + 12px); }
  .story-step::after { inset-inline-start: calc(48px + 7px); }
  .story-time { font-size: .82rem; }
}


/* ---------- Mockup primitives used inside the story ---------- */
.frame {
  background: #14101F;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 60px -32px rgba(0,0,0,.95);
}
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.frame-bar span { margin-inline-start: auto; font-size: .72rem; color: var(--on-dark-faint); font-family: var(--font-head); }
.frame-body { padding: 14px 16px; font-size: .92rem; }

/* form-style rows */
.f-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.f-row:last-child { border-bottom: 0; }
.f-row b { flex: 0 0 74px; color: var(--on-dark-faint); font-weight: 500; font-size: .84rem; }
.f-row span { color: #fff; }

/* chat bubble */
.bubble {
  background: linear-gradient(180deg, #1F7A5E, #17614A);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 14px; color: #fff; font-size: .92rem; line-height: 1.55;
  max-width: 92%; position: relative;
}
.bubble .meta { display: flex; gap: 5px; align-items: center; justify-content: flex-start; margin-top: 6px;
  font-size: .68rem; color: rgba(255,255,255,.65); direction: ltr; }
.bubble .meta svg { width: 13px; height: 13px; stroke: #7FE3C0; fill: none; stroke-width: 2.2; }

/* spreadsheet strip */
.grid-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .78rem; }
.grid-mini div { padding: 8px 9px; border-inline-start: 1px solid rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-mini .h { background: rgba(255,255,255,.07); color: var(--on-dark-faint); font-weight: 600; border-top: 0; }
.grid-mini .new { background: rgba(111,233,180,.12); color: #fff; }
.grid-mini .tag { color: #FF7A9E; font-weight: 700; }

/* task / post cards */
.mini-card { display: flex; gap: 10px; align-items: flex-start; }
.mini-card .av {
  flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cta), #8B31D8); font-size: .72rem; font-weight: 800; font-family: var(--font-head);
}
.mini-card p { font-size: .9rem }
.mini-card .t { font-size: .72rem; color: var(--on-dark-faint); margin-top: 3px; }
.pill-done { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700;
  color: #6FE9B4; background: rgba(111,233,180,.14); border-radius: 999px; padding: 3px 10px; margin-top: 8px; }

/* ---------------------------------------------------------
   The journey runs between the sections: each gap holds a
   curve that sweeps across the page and draws itself as you
   arrive, so scrolling feels like travelling the route.
   --------------------------------------------------------- */
.junction {
  position: relative;
  height: clamp(150px, 19vw, 260px);
  /* legs of different lengths keep the descent from feeling metronomic */
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.junction:nth-of-type(2n) { height: clamp(126px, 15vw, 210px); }
.junction:nth-of-type(3n) { height: clamp(170px, 22vw, 300px); }
.junction svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.j-base { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 2; stroke-linecap: round; }
.j-draw {
  fill: none;
  stroke: url(#jGrad);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 9px rgba(255,46,99,.5));
}
.j-head { fill: #fff; opacity: 0; filter: drop-shadow(0 0 12px rgba(255,46,99,.95)); transition: opacity .25s ease; }
.junction.is-live .j-head { opacity: 1; }

.j-stop {
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--night);
  border: 2px solid rgba(255,255,255,.26);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.j-stop.is-on {
  background: linear-gradient(140deg, var(--cta), #8B31D8);
  border-color: transparent;
  transform: scale(1.5);
  box-shadow: 0 0 0 6px rgba(255,46,99,.14), 0 0 24px rgba(255,46,99,.6);
}
@media (prefers-reduced-motion: reduce) { .j-stop, .j-head { transition: none; } }

.order-note-sub {
  max-width: 60ch; margin-inline: auto; text-align: center;
  margin-top: clamp(22px, 3vw, 30px); font-size: .94rem; line-height: 1.75;
  color: var(--on-dark-faint); border-top: 1px solid var(--hairline); padding-top: 16px;
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  /* stacked, a full-width 3:4 portrait would own the screen */
  .portrait { max-width: 320px; margin-inline: auto; }
}
.about-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.portrait {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, #2A1140, #170B26);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.9);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.portrait-ph { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--on-dark-faint); font-size: .88rem; }
.portrait-ph svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 1.3; margin-inline: auto; }
.about-name { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.7rem); }
.about-role { color: var(--on-dark-soft); margin-top: 6px; font-size: 1.02rem; }
.about-lines { display: grid; gap: 10px; margin-top: 20px; }
.about-lines li { display: flex; gap: 10px; color: var(--on-dark-soft); }
.about-lines li::before { content: "—"; color: var(--cta); }
.skills-lead { margin-top: 20px; color: var(--on-dark-soft); font-size: .95rem; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.skill { font-size: .84rem; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--hairline); color: var(--on-dark-soft); direction: ltr; }
.quote {
  margin: 28px 0 0; padding-inline-start: 24px;
  border-inline-start: 3px solid var(--cta);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em;
  /* a paragraph-length statement, not a one-liner: it reads as an aside
     to the bio above it, so it sits a size down and well off white */
  font-size: clamp(.98rem, 1.5vw, 1.14rem); line-height: 1.72;
  color: rgba(255, 255, 255, .68);
  quotes: "\201D" "\201C";
}
.quote blockquote::before { content: open-quote; }
.quote blockquote::after  { content: close-quote; }
.quote-by {
  margin-top: 10px; font-size: .88rem; font-weight: 600;
  color: var(--on-dark-faint); letter-spacing: 0;
}

/* ---------- Forms ---------- */
/* the form is the taller half by nature, so it takes the wider half too:
   the copy beside it wraps sooner and the two columns come out closer */
.form-wrap { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } }
/* the pitch sits in half the page here, not across it: at the page-wide
   size its lines broke into three short fragments against the form and
   left a ragged void between the two columns */
.form-wrap .h-sect { font-size: clamp(1.8rem, 3vw, 2.25rem); }
/* the question and the sting each get their own line, at every width,
   instead of breaking wherever the column happens to run out */
.form-wrap .h-sect .grad { display: block; }
.form-wrap .h-sub { max-width: 30ch; }
/* a panel of the same night as the page, lifted just enough to read
   as a surface - a white card here cut a hole in the journey. It sits
   above the section rather than punching a hole below it, so the base
   is lighter than the ground and carries less of its own shadow. */
.form-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035)),
    rgba(38, 27, 64, .56);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--radius); padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.form-card h3 { font-size: 1.25rem; margin-bottom: 20px; color: #fff; }
.form-card .lede { color: var(--on-dark-soft); font-size: .95rem; margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
/* start, not stretch: a field with an error slot must not push its
   label and input out of line with the field beside it */
.field { display: grid; gap: 6px; align-content: start; }
.field + .field, .grid2 + .field, .field + .grid2, .grid2 + .grid2 { margin-top: 14px; }
/* inside a two-up row the fields are siblings, and that margin pushed
   the second column half a line below the first - the row gap spaces
   them, in both the two-column and the stacked layout */
.grid2 > .field + .field { margin-top: 0; }
.field label { font-size: .85rem; font-weight: 700; color: var(--on-dark); font-family: var(--font-head); }
.field label .opt { font-weight: 400; color: var(--on-dark-faint); }
.field input, .field textarea {
  font: inherit; font-size: 1rem; color: #fff;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px; padding: 13px 15px; width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .34); }
.field input:focus, .field textarea:focus {
  outline: none; background: rgba(255, 255, 255, .08); border-color: var(--cta);
  box-shadow: 0 0 0 4px rgba(255, 46, 99, .2);
}
.field textarea { min-height: 96px; resize: vertical; }
.field.has-error input, .field.has-error textarea { border-color: #FF5C7A; }
.field .err { font-size: .8rem; color: #FF8FA6; font-weight: 600; }
/* the send button carries a sentence and whatsapp carries a word, so
   the row is split in their proportion rather than down the middle */
.form-card .form-actions { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 620px) { .form-card .form-actions { grid-template-columns: 1fr; } }
.form-card .form-actions .btn { margin-top: 0; padding-inline: 16px; }
.form-card .btn { margin-top: 18px; }
/* whatsapp is not a footnote here - for this audience it is often the
   channel they would actually use, so it gets a button, not a sentence */
.btn--wa .ic-wa { display: inline-flex; width: 19px; height: 19px; }
.btn--wa .ic-wa svg { width: 100%; height: 100%; fill: currentColor; }

.form-fine { margin-top: 12px; font-size: .82rem; color: var(--on-dark-faint); text-align: center; line-height: 1.7; }
.form-fine a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; }
.form-fine a:hover { color: #fff; }
.form-status { margin-top: 10px; font-size: .9rem; font-weight: 700; color: #FF8FA6; }
.form-status:empty { margin-top: 0; }
.form-status.is-open { color: #6FE9B4; }
/* a failed send is a state the visitor can act on, so it gets a button */
.form-status.is-warn { color: #FFC46B; display: grid; gap: 12px; justify-items: start; }
.form-status .status-go { font-size: .95rem; padding: 12px 22px; }
.form-status .status-why { font-weight: 500; font-size: .8rem; color: var(--on-dark-faint); direction: ltr; text-align: start; }
.btn--wa { gap: 9px; }
.wa-mark { width: 19px; height: 19px; flex: 0 0 auto; }

.form-done { display: none; }
.form-done.is-visible { display: block; }
.form-card.is-hidden { display: none; }
.form-done h3 { font-size: 1.3rem; margin-bottom: 8px; }
.form-done p { color: var(--on-dark-soft); }
.form-done .btn-row { margin-top: 18px; }

/* ---------- Final CTA ---------- */
.final h2 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); max-width: 24ch; margin-inline: auto; }
.final .h-sub { margin-inline: auto; }

/* ---------- Who it fits: the objections, answered side by side ---------- */
.fit-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 30px);
  max-width: 760px; margin: clamp(28px, 4vw, 42px) auto 0;
}
@media (max-width: 620px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col {
  border: 1px solid var(--hairline); border-radius: clamp(16px, 2vw, 22px);
  background: rgba(255, 255, 255, .022); padding: clamp(20px, 2.6vw, 28px);
}
.fit-col--yes { border-color: rgba(111, 233, 180, .28); background: rgba(111, 233, 180, .05); }
.fit-head {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em;
  font-size: 1.12rem; color: #fff; margin-bottom: 14px;
}
.fit-list { display: grid; gap: 11px; }
.fit-list li {
  position: relative; padding-inline-start: 28px;
  color: var(--on-dark-soft); line-height: 1.6;
}
.fit-list li::before {
  position: absolute; inset-inline-start: 0; top: -1px;
  font-weight: 700; font-size: 1.05rem;
}
.fit-col--no .fit-list li::before { content: "\00D7"; color: #FF6B8A; }
.fit-col--yes .fit-list li::before { content: "\2713"; color: #6FE9B4; }
/* the line that closes the fit section is a claim now, not a caveat, so
   it carries the weight of one */
.fit-note {
  max-width: 50ch; margin-inline: auto; text-align: center;
  margin-top: clamp(34px, 4.2vw, 52px);
  padding-top: clamp(26px, 3.2vw, 36px);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em;
  /* the cap was the reason this wrapped at every width, desktop included;
     the floor is what buys the single line on a phone */
  font-size: clamp(.9rem, 2.6vw, 1.9rem); line-height: 1.45;
  color: #fff;
}

/* the door to what comes after, said once and quietly */
.final-after {
  margin-top: 30px; max-width: 56ch; margin-inline: auto;
  font-size: .94rem; line-height: 1.75; color: var(--on-dark-faint);
  border-top: 1px solid var(--hairline); padding-top: 20px;
}

/* a hint under a field that people hesitate to fill */
.field .hint { font-size: .82rem; color: var(--on-dark-faint); line-height: 1.5; }

/* ---------------------------------------------------------
   The checklist page: ten processes, and the optional step
   between filling the form and sending it.
   --------------------------------------------------------- */
.proc-list { display: grid; gap: 14px; max-width: 780px; margin: clamp(30px, 4vw, 46px) auto 0; }
.proc {
  position: relative;
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 4px 18px;
  border: 1px solid var(--hairline); border-radius: clamp(14px, 1.8vw, 18px);
  background: rgba(255, 255, 255, .028);
  padding: clamp(18px, 2.4vw, 24px);
  transition: border-color .2s ease, background .2s ease;
}
/* the number, the text and the tick each hold their own column, so only
   the heading row gives up width to the box - the description and the
   question below it still run the full width of the card */
.proc { grid-template-columns: 3.2rem minmax(0, 1fr) 22px; }
.proc-n { grid-column: 1; grid-row: 1 / span 3; }
.proc h3 { grid-column: 2; grid-row: 1; }
.proc > p { grid-column: 2; }
.proc:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); }
.proc-n {
  font-family: var(--font-head); font-weight: 900; font-size: 1.5rem;
  color: var(--cta); direction: ltr; text-align: right;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.proc h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.proc p { color: var(--on-dark-soft); font-size: .97rem; line-height: 1.7; margin-top: 4px; }
.proc .ask {
  margin-top: 10px; font-size: .9rem; color: var(--on-dark-faint);
  border-inline-start: 2px solid rgba(255, 255, 255, .16); padding-inline-start: 12px;
}
@media (max-width: 560px) {
  .proc { grid-template-columns: 2.4rem minmax(0, 1fr) 22px; gap: 4px 12px; }
  .proc-n { font-size: 1.25rem; }
}

/* ---------- ticking the list where it is read ----------
   The twelve items used to be repeated as a grid of checkboxes inside a
   modal. Now each item is its own control: a stretched label over the whole
   card, and a box in the corner to show what it did. The input lives here
   and joins the form further down the page through its form= attribute. */
.proc-tick { position: absolute; opacity: 0; width: 0; height: 0; }
.proc-hit { position: absolute; inset: 0; cursor: pointer; border-radius: inherit; }
.proc-box {
  grid-column: 3; grid-row: 1; align-self: start; margin-top: 1px;
  width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  display: grid; place-items: center;
  transition: background .18s ease, border-color .18s ease;
}
.proc-box svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; transition: opacity .18s ease; }
.proc-tick:checked ~ .proc-box { background: linear-gradient(140deg, var(--cta), #8B31D8); border-color: transparent; }
.proc-tick:checked ~ .proc-box svg { opacity: 1; }
.proc-tick:focus-visible ~ .proc-box { outline: 3px solid var(--cta); outline-offset: 3px; }
/* a ticked item should read as chosen from across the page, not only by
   the state of a 22px box in its corner */
.proc:has(.proc-tick:checked) { border-color: rgba(255, 46, 99, .55); background: rgba(255, 46, 99, .07); }
.proc:has(.proc-tick:checked) h3 { color: #fff; }

/* ---------- what the visitor already told the first page ---------- */
.lead-known { display: none; }
.is-carried .lead-known {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin-bottom: 18px; padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}
.lead-known-k { font-size: .82rem; font-weight: 700; color: var(--on-dark-faint); font-family: var(--font-head); }
.lead-known-v { font-weight: 700; color: #fff; }
.lead-known-edit {
  margin-inline-start: auto; font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--on-dark-soft); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; padding: 2px 4px;
  transition: color .18s ease;
}
.lead-known-edit:hover { color: #fff; }
/* the second screen only asks what the first one did not */
[data-carry-only] { display: none; }
.is-carried [data-carry-only] { display: revert; }
.is-carried [data-no-carry], .is-carried [data-carry-fields] { display: none; }
/* the visitor pressed send on the page before this one; the first thing
   they should read here is that it landed */
.lead-got { align-items: center; gap: 9px; margin-bottom: 18px;
  padding: 10px 18px 10px 14px; border-radius: 999px;
  border: 1px solid rgba(111, 233, 180, .34); background: rgba(111, 233, 180, .1);
  color: #6FE9B4; font-family: var(--font-head); font-weight: 700; font-size: .92rem;
}
.is-carried .lead-got { display: inline-flex; }
.lead-got svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 3.2; }

.pick-count {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  margin-top: 16px; font-size: .88rem; color: var(--on-dark-faint);
}
.pick-count [data-pick-count]:empty { display: none; }
.pick-count + .field { margin-top: 16px; }
.pick-count.is-on, .pick-count [data-pick-count].is-on { color: #6FE9B4; font-weight: 700; }
.pick-count a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; }
.pick-count a:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 34px; background: transparent; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 0; }
.footer-links a { font-size: .82rem; color: var(--on-dark-faint); text-decoration: none; }
.footer-links a:hover { color: var(--on-dark); }
/* a dot between the links. It rides at the end of its own link rather than
   the start of the next one, so a row that wraps ends on a separator
   instead of opening with one. Its colour is set here, not inherited, so
   hovering a link does not light up the punctuation beside it. */
.footer-links a::after { content: "·"; margin-inline: 11px; color: rgba(255, 255, 255, .2); }
.footer-links a:last-child::after { content: none; }
.footer-meta { font-size: .82rem; color: var(--on-dark-faint); direction: ltr; }

/* ---------- Sticky CTA ---------- */
.float-cta {
  position: fixed; z-index: 70; inset-inline-end: 20px; bottom: 20px;
  display: flex; gap: 10px; align-items: center;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.float-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.float-cta .btn { box-shadow: 0 14px 40px -10px var(--cta-glow); }
@media (max-width: 720px) {
  .float-cta { inset-inline: 12px; bottom: 12px; }
  .float-cta .btn { flex: 1; }
}

/* ---------- Back to the top ----------
   It sits at the start edge, opposite the WhatsApp pill, so the two never
   argue over the same corner - and unlike the pill it stays out while the
   form is on screen, because that is exactly where someone wants it. */
.to-top {
  position: fixed; z-index: 70; inset-inline-start: 20px; bottom: 20px;
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--on-dark);
  background: rgba(20, 13, 38, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .95);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, border-color .18s ease, background .18s ease;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(30, 20, 54, .9); }
.to-top:active { transform: translateY(1px) scale(.96); }
.to-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) {
  .to-top { inset-inline-start: 12px; bottom: 12px; width: 44px; height: 44px; }
  /* the pill starts after the button instead of underneath it */
  .float-cta { inset-inline-start: 68px; }
}

/* ---------- Standalone documents (thanks, privacy, accessibility) ---------- */
.doc-wrap { max-width: 62ch; }
.doc-wrap.center { text-align: center; margin-inline: auto; }
.doc-wrap h1 { margin-bottom: 14px; }
.doc-wrap h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 1.2rem;
  color: #fff; margin-top: 34px; margin-bottom: 8px; letter-spacing: -.02em;
}
.doc-wrap p { color: var(--on-dark-soft); line-height: 1.8; }
.doc-wrap p + p { margin-top: 10px; }
.doc-wrap b { color: #fff; font-weight: 700; }
/* a button is not a link in running text - the underline is for prose */
.doc-wrap a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.doc-list { margin-top: 10px; display: grid; gap: 9px; }
.doc-list li {
  position: relative; padding-inline-start: 20px;
  color: var(--on-dark-soft); line-height: 1.7;
}
.doc-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cta);
}
.doc-wrap .nowrap { white-space: nowrap; }
.doc-meta { margin-top: 36px; font-size: .84rem; color: var(--on-dark-faint); }
.doc-wrap .btn-row { margin-top: 28px; justify-content: center; }

/* ---------------------------------------------------------
   Micro-interactions: small, cheap responses that make the
   scroll feel travelled rather than paged through. Every one
   of them is off under prefers-reduced-motion.
   --------------------------------------------------------- */

/* a group arrives item by item instead of as one block */
.rv[data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.rv[data-stagger].is-in > * { opacity: 1; transform: none; }

/* every press answers */
.btn:active { transform: translateY(1px) scale(.985); }
.demo-tab:active { transform: scale(.97); }

/* the header tightens once you have left the top */
.header-inner { transition: height .3s cubic-bezier(.22, .61, .36, 1); }
.site-header.is-stuck .header-inner { height: 58px; }
.brand-logo { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.site-header.is-stuck .brand-logo { transform: scale(.9); }

/* a stop on the journey rings once as you reach it */
.j-stop::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--cta);
  opacity: 0;
  pointer-events: none;
}
.j-stop.is-on::after { animation: stopRing .9s ease-out 1; }
@keyframes stopRing {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0;  transform: scale(2.6); }
}

/* the mockups answer the cursor the way a real window would */
@media (hover: hover) and (pointer: fine) {
  .frame { transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, border-color .25s ease; }
  .frame:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95);
  }
}

/* the AI step is the moment the process stops being manual: it
   breathes a few times when it arrives, then settles */
.demo.is-in .ai-chip { animation: chipBreathe 2.1s ease-in-out 3; }
@keyframes chipBreathe {
  0%, 100% { box-shadow: 0 12px 28px -16px rgba(255, 46, 99, .9); }
  50%      { box-shadow: 0 12px 28px -16px rgba(255, 46, 99, .9), 0 0 0 7px rgba(255, 46, 99, .1); }
}

/* the story assembles step by step when a tab opens */
.demo.is-in .story-step { animation: stepIn .45s cubic-bezier(.22, .61, .36, 1) both; }
.demo.is-in .story-step:nth-child(1) { animation-delay: .05s; }
.demo.is-in .story-step:nth-child(2) { animation-delay: .13s; }
.demo.is-in .story-step:nth-child(3) { animation-delay: .21s; }
.demo.is-in .story-step:nth-child(4) { animation-delay: .29s; }
.demo.is-in .story-step:nth-child(5) { animation-delay: .37s; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv[data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .btn:active, .demo-tab:active { transform: none; }
  .header-inner, .brand-logo, .site-header.is-stuck .header-inner, .site-header.is-stuck .brand-logo {
    transition: none; height: auto; transform: none;
  }
  .site-header.is-stuck .header-inner { height: 68px; }
  .j-stop.is-on::after { animation: none; }
  .frame { transition: none; }
  .frame:hover { transform: none; }
  .demo.is-in .ai-chip, .demo.is-in .story-step { animation: none; }
}

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .card, .step, .pain { transition: none; }
}

/* ---------- Skip link ---------- */
/* read by a screen reader, absent from the page */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; background: var(--cta); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 10px 10px; transition: top .15s ease; }
.skip:focus { top: 0; }


/* ---------- FAQ ----------
   Six answers the page owes the reader once it decided not to name a
   price. Native <details>, so it opens without script and reads to a
   screen reader as the disclosure it is. */
.faq-list {
  max-width: 760px;
  margin: clamp(34px, 4.6vw, 58px) auto 0;
  border-top: 1px solid var(--hairline);
}
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(17px, 2.2vw, 22px) 2px;
  cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.12rem); color: var(--on-dark);
  transition: color .18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #fff; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--cta); outline-offset: 3px; border-radius: 6px;
}
.faq-item summary i {
  position: relative; flex: none; width: 20px; height: 20px;
  transition: transform .22s ease;
}
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; inset-inline-start: 50%; top: 50%;
  width: 13px; height: 2px; margin: -1px 0 0 -6.5px;
  border-radius: 2px; background: var(--cta);
}
.faq-item summary i::after { transform: rotate(90deg); transition: opacity .22s ease; }
.faq-item[open] summary { color: #fff; }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-item[open] summary i::after { opacity: 0; }
.faq-body {
  padding: 0 2px clamp(19px, 2.4vw, 24px);
  max-width: 62ch;
}
.faq-body p {
  margin: 0; font-size: 1rem; line-height: 1.8; color: var(--on-dark-soft);
}
.faq-more {
  margin-top: clamp(26px, 3.2vw, 34px); text-align: center;
  font-size: .95rem; color: var(--on-dark-faint);
}
.faq-more a { color: var(--on-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.faq-more a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary, .faq-item summary i, .faq-item summary i::after { transition: none; }
}

/* ---------- Phone only ---------- */
/* Four lines that earn their place on a wide screen and only cost scrolling
   on a narrow one, plus the two strips that bracket the page. Everything
   here is scoped to the phone by design: the desktop layout is finished and
   nothing in this block may reach it. The hidden lines stay in the markup,
   because this is a layout decision rather than a content one - a crawler,
   a wide screen and a printed page all still get them. */
.phone-break { display: none; }
@media (max-width: 760px) {
  /* the hook, the pull quote with its caption, and the note under the
     three cards - all of them restate what the section around them has
     already said by the time a phone gets there */
  .hero .lead-in { display: none; }
  .quote { display: none; }
  .order-note-sub { display: none; }

  /* not hidden, only broken in two: the count and the invitation are two
     thoughts, and a phone has room for one of them per line */
  .phone-break { display: block; }

  /* the strip wants a line worth reading and a phone has none to spare
     above the fold; it costs the visitor a scroll before they have moved */
  .hero-run { display: none; }

  /* the nav is gone below 940px, so space-between leaves the brand alone
     against the far edge; the footer wraps into stacked rows for the same
     reason. Both read better centred on a narrow screen. */
  .header-inner { justify-content: center; }
  .footer-inner { justify-content: center; text-align: center; }
  .footer-links { justify-content: center; }
}

/* ---------- The hero run strip ---------- */
/* A hero has a few seconds and must spend them on the one thing a visitor
   cannot already picture: not a form filling in, which they have seen, but
   the chain that runs when it does. So the whole chain stands on one line,
   read the way the page is read - a lead arrives on the right, a task is
   waiting on the left - and says its piece standing still. The pulse only
   gives it life. The station names are the ones on the Make canvas.

   Nothing here is filled with the call to action's colour. A solid crimson
   pill is the one thing on the page that means "press me", and five of them
   in a row above the real button flattened that. A stop rests as a dark
   outline and lights by brightening - its border, its glyph, its label and
   the wire behind it - with a violet bloom behind the glass. */
/* it sits inside the hero stack now, between the sentence it illustrates
   and the button that closes the block, so it carries its own spacing on
   both sides rather than hanging off the bottom of the section */
.hero-run { margin-top: clamp(30px, 3.6vw, 44px); }
.hero-run + .btn-row { margin-top: clamp(24px, 3vw, 34px); }
.runstrip { border-top: 1px solid var(--hairline); padding-top: clamp(22px, 2.8vw, 32px); }
.run-line { display: flex; align-items: flex-start; justify-content: center; list-style: none; margin: 0; padding: 0; }
.run-stop {
  position: relative; flex: 0 1 8.6em;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: clamp(.72rem, 1.05vw, .84rem);
}
.run-stop + .run-stop { margin-inline-start: clamp(18px, 2.6vw, 40px); }

/* the wire hangs in the gap the margin opened, which in this direction is
   on the stop's own inline start, and it brightens with the stop it feeds */
.run-stop + .run-stop::before {
  content: ""; position: absolute; top: 22px;
  inset-inline-start: calc(-1 * clamp(18px, 2.6vw, 40px)); width: clamp(18px, 2.6vw, 40px); height: 2px; border-radius: 2px;
  background: linear-gradient(to left, rgba(139,49,216,.9), rgba(47,107,255,.9));
  opacity: .22;
  animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite;
}
.run-stop + .run-stop::after {
  content: ""; position: absolute; top: 18px;
  inset-inline-start: calc(-1 * clamp(18px, 2.6vw, 40px) + 4px);
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; opacity: 0;
  box-shadow: 0 0 12px 2px rgba(139,49,216,.85);
  animation-duration: 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}

.run-ico {
  position: relative; width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1.5px solid rgba(255,255,255,.13);
}
/* the lit ring and its bloom, laid over the resting outline */
.run-ico::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
  border: 1.5px solid rgba(255,255,255,.5);
  background: linear-gradient(150deg, rgba(139,49,216,.28), rgba(47,107,255,.16));
  box-shadow: 0 0 0 5px rgba(139,49,216,.10), 0 10px 26px -10px rgba(139,49,216,.75);
  opacity: 0;
  animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite;
}
.run-ico::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px; background: #fff; opacity: .42;
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;
  animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite;
}
.run-lab {
  font-weight: 600; color: #D9D1E8; text-align: center; line-height: 1.3; opacity: .5;
  animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite;
}

.rs1::before, .rs1 .run-ico::after, .rs1 .run-lab { animation-name: runLit1; }
.rs1 .run-ico::before { animation-name: runGlow1; }
.rs2::before, .rs2 .run-ico::after, .rs2 .run-lab { animation-name: runLit2; }
.rs2 .run-ico::before { animation-name: runGlow2; }
.rs3::before, .rs3 .run-ico::after, .rs3 .run-lab { animation-name: runLit3; }
.rs3 .run-ico::before { animation-name: runGlow3; }
.rs4::before, .rs4 .run-ico::after, .rs4 .run-lab { animation-name: runLit4; }
.rs4 .run-ico::before { animation-name: runGlow4; }
.rs5::before, .rs5 .run-ico::after, .rs5 .run-lab { animation-name: runLit5; }
.rs5 .run-ico::before { animation-name: runGlow5; }

@keyframes runLit1 { 0%, 3% { opacity: var(--rest); } 6% { opacity: 1; } 9%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } }
@keyframes runLit2 { 0%, 17% { opacity: var(--rest); } 20% { opacity: 1; } 23%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } }
@keyframes runLit3 { 0%, 31% { opacity: var(--rest); } 34% { opacity: 1; } 37%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } }
@keyframes runLit4 { 0%, 45% { opacity: var(--rest); } 48% { opacity: 1; } 51%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } }
@keyframes runLit5 { 0%, 59% { opacity: var(--rest); } 62% { opacity: 1; } 65%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } }

@keyframes runGlow1 { 0%, 3% { opacity: 0; } 6% { opacity: 1; } 9%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes runGlow2 { 0%, 17% { opacity: 0; } 20% { opacity: 1; } 23%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes runGlow3 { 0%, 31% { opacity: 0; } 34% { opacity: 1; } 37%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes runGlow4 { 0%, 45% { opacity: 0; } 48% { opacity: 1; } 51%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes runGlow5 { 0%, 59% { opacity: 0; } 62% { opacity: 1; } 65%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* each family keeps its own resting level, so one set of keyframes serves
   the wire, the glyph and the label at once */
.run-stop + .run-stop::before { --rest: .22; }
.run-ico::after { --rest: .42; }
.run-lab { --rest: .5; }

/* the pulse leaves a stop as it lights and lands on the next one */
.rs2::after { animation-name: runPulse1; }
.rs3::after { animation-name: runPulse2; }
.rs4::after { animation-name: runPulse3; }
.rs5::after { animation-name: runPulse4; }
@keyframes runPulse1 { 0%, 7% { opacity: 0; transform: translateX(0); } 9% { opacity: 1; transform: translateX(0); } 18% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 20%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } }
@keyframes runPulse2 { 0%, 21% { opacity: 0; transform: translateX(0); } 23% { opacity: 1; transform: translateX(0); } 32% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 34%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } }
@keyframes runPulse3 { 0%, 35% { opacity: 0; transform: translateX(0); } 37% { opacity: 1; transform: translateX(0); } 46% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 48%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } }
@keyframes runPulse4 { 0%, 49% { opacity: 0; transform: translateX(0); } 51% { opacity: 1; transform: translateX(0); } 60% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 62%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } }

.run-ico--hook  { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 6h14M5 12h9M5 18h6"/></svg>'); }
.run-ico--ai    { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2l1.9 5.9L20 10l-6.1 2.1L12 18l-1.9-5.9L4 10l6.1-2.1z"/></svg>'); }
.run-ico--reply { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 11.6a7.9 7.9 0 0 1-8.5 7.9 8.6 8.6 0 0 1-3.6-.9L4 20l1.4-4.1a7.7 7.7 0 0 1-1.1-4A7.9 7.9 0 0 1 12.4 4a7.9 7.9 0 0 1 8.1 7.6z"/></svg>'); }
.run-ico--sheet { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="16" rx="2"/><path d="M3.5 9.5h17M9.5 9.5V20"/></svg>'); }
.run-ico--task  { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.6"/><path d="M12 7.4V12l3 1.8"/></svg>'); }

/* nothing to animate for a line nobody is looking at */
.runstrip.is-idle *, .runstrip.is-idle *::before, .runstrip.is-idle *::after { animation-play-state: paused; }

/* with motion turned down the chain simply stands there fully lit, which is
   what it was built to do anyway */
@media (prefers-reduced-motion: reduce) {
  .runstrip *, .runstrip *::before, .runstrip *::after { animation: none !important; }
  .run-lab, .run-ico::after, .run-stop + .run-stop::before { opacity: 1; }
  .run-ico::before { opacity: 1; }
  .run-stop + .run-stop::after { opacity: 0; }
}

/* ---------- Taught at ---------- */
/* The only proof of trust on the page. Four marks that arrive at wildly
   different proportions - a stacked crest, two horizontal lockups and one
   wide single line - so they are not sized to a common height, which would
   have let the widest one dominate the row by half again. Each carries its
   own height, tuned by eye until the four read as equal weight, and the
   sizes live here rather than in the files so a replacement logo is a
   number rather than a re-export. */
.taught { margin-top: clamp(34px, 4.4vw, 56px); padding-top: clamp(26px, 3.2vw, 36px); border-top: 1px solid var(--hairline); text-align: center; }
.taught-lead { font-size: .95rem; font-weight: 500; color: var(--on-dark-soft); }
.taught-lead b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.taught-row {
  list-style: none; margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(22px, 4vw, 56px);
}
.lg { display: block; width: auto; opacity: .74; transition: opacity .2s ease; }
.taught-row li:hover .lg { opacity: 1; }
.lg--emeq    { height: 44px; }
.lg--braude  { height: 38px; }
.lg--netanya { height: 27px; }
.lg--hackeru { height: 33px; }
@media (max-width: 560px) {
  .taught-row { gap: 18px 26px; }
  .lg--emeq    { height: 36px; }
  .lg--braude  { height: 31px; }
  .lg--netanya { height: 22px; }
  .lg--hackeru { height: 27px; }
}

/* the same spark that marks the AI stop on the hero strip, so the button and
   the chain are speaking about the same thing. It sits in the accent pair
   rather than the call to action's colour: this is a secondary button and
   the mark should not argue with the real one */
.ic-ai {
  display: inline-block; width: 17px; height: 17px; flex: 0 0 auto;
  background: linear-gradient(135deg, #FF6E9C, #A45BF0 55%, #5B8CFF);
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;
  --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2l1.9 5.9L20 10l-6.1 2.1L12 18l-1.9-5.9L4 10l6.1-2.1z"/><path d="M18.7 14.4l.75 2.15 2.15.75-2.15.75-.75 2.15-.75-2.15-2.15-.75 2.15-.75z"/></svg>');
}
.btn--ai { gap: 9px; }
.btn--ai:hover .ic-ai { background: linear-gradient(135deg, #FF9BBD, #C08BF6 55%, #8DAEFF); }

/* =========================================================
   עמוד נחיתה לסדנה החינמית - /workshop/
   A single-purpose page: one promise, one form, no exits. Everything here
   is additive; the shared system above does the rest.
   ========================================================= */

/* the header on this page carries the brand and nothing else - a landing
   page that came from an ad should have no way out but the form */
.site-header.header--bare .header-inner { justify-content: center; }

/* the hero puts the form beside the promise, because a visitor who arrived
   from an ad decides in the first screen or not at all */
.lp-hero { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px); }
.lp-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 900px) { .lp-grid { grid-template-columns: 1fr; } }

.lp-h1 { font-size: clamp(2.05rem, 4.6vw, 3.05rem); line-height: 1.14; letter-spacing: -.02em; }
.lp-sub { margin-top: 18px; color: var(--on-dark-soft); font-size: clamp(1.05rem, 1.7vw, 1.24rem); line-height: 1.7; max-width: 46ch; }

/* the four facts a person needs before they will type anything */
.lp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3vw, 32px); }
@media (max-width: 480px) { .lp-facts { grid-template-columns: 1fr; } }
.lp-fact {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  padding: 13px 16px;
}
.lp-fact i {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,110,156,.22), rgba(91,140,255,.17));
  border: 1px solid var(--hairline);
}
.lp-fact svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-fact b { display: block; font-size: .98rem; line-height: 1.3; }
.lp-fact span { display: block; font-size: .8rem; color: var(--on-dark-faint); margin-top: 2px; }
.lp-fact--free b { color: var(--ok, #6FE9B4); }

/* the running order, as a real timeline rather than a bulleted list: the
   minutes are the point, so they get their own column */
.agenda { display: flex; flex-direction: column; gap: 0; margin-top: clamp(26px, 3vw, 36px); }
.agenda li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--hairline);
}
.agenda li:last-child { border-bottom: 0; }
.agenda .mins {
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; text-align: start;
  background: linear-gradient(105deg, #FF6E9C, #A45BF0 55%, #5B8CFF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.agenda .what { font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.55; }
@media (max-width: 560px) {
  .agenda li { grid-template-columns: 1fr; gap: 4px; }
}

/* the confirmation page: the details again, and the two ways to keep them */
.lp-cal { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.lp-next { display: grid; gap: 14px; margin-top: clamp(26px, 3vw, 34px); text-align: start; }
.lp-next li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start;
  color: var(--on-dark-soft); line-height: 1.6;
}
.lp-next b { color: #fff; }
.lp-next .n {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: #fff;
  background: linear-gradient(140deg, var(--cta), #A22BC8);
}