/* Backbone by Agentica: page layer over scrollcraft.css.
   One fixed world (ground + ribbon), transparent sections, product scenes. */

@font-face { font-family: "Discovery FS"; font-weight: 300; font-display: swap; src: url("fonts/discovery-light.woff2") format("woff2"); }
@font-face { font-family: "Discovery FS"; font-weight: 500; font-display: swap; src: url("fonts/discovery-medium.woff2") format("woff2"); }
@font-face { font-family: "Discovery FS"; font-weight: 700; font-display: swap; src: url("fonts/discovery-bold.woff2") format("woff2"); }
@font-face { font-family: "Discovery FS"; font-weight: 900; font-display: swap; src: url("fonts/discovery-black.woff2") format("woff2"); }

:root {
  /* brand */
  --blue: #2456FF; --cyan: #12B4FF; --violet: #7B3DFC; --midnight: #0A0A2E; --ink-1: #1B1E44;
  --g1: #4E5470; --g2: #7D839C; --g3: #B4B9CC; --g4: #E3E6F0; --mist: #F3F5FA;
  --ok: #1FBF8A; --warn: #FFB21E;

  /* scrollcraft roles (light ground by default; JS keeps these in step with the world) */
  --sc-canvas: #F6F8FD; --sc-surface: #FFFFFF;
  --sc-ink: #0A0A2E; --sc-ink-soft: #4E5470;
  --sc-accent: #2456FF; --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Discovery FS", "Heebo", system-ui, sans-serif;
  --sc-font-text: "Discovery FS", "Heebo", system-ui, sans-serif;
  --sc-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sc-shadow-color: 232 60% 22%;

  /* world-driven (bb.js writes these) */
  --ground: #F6F8FD;
  --ink: #0A0A2E;
  --ink-soft: #4E5470;
  --accent-text: #2456FF;
  --hair: rgba(10, 10, 46, .10);
  --dark: 0;

  --r: 16px; --r-lg: 24px;
  --bar-h: 68px;
  --wrap: 78rem;
  --gut: clamp(1.25rem, 4.5vw, 4.5rem);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html { background: var(--ground); }
body.bb {
  font-family: var(--sc-font-text);
  background: transparent;
  color: var(--ink);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .25vw, 1.1875rem);
  line-height: 1.65;
  letter-spacing: 0;
}
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--blue); color: #fff; }
bdi, .ltr { unicode-bidi: isolate; direction: ltr; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 200; background: #fff; color: var(--midnight); padding: 10px 16px; border-radius: 10px; transform: translateY(-160%); transition: transform .2s var(--ease); }
.skip:focus { transform: none; }

/* ------------------------------------------------------------------ world */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ground); overflow: hidden; }
.world__grid { position: absolute; inset: -10%; opacity: calc(.55 - var(--dark) * .25);
  background-image: radial-gradient(color-mix(in oklab, var(--ink) 14%, transparent) 1px, transparent 1.6px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 30% 40%, #000 20%, transparent 75%);
  transform: translate3d(0, calc(var(--wy, 0) * -1px), 0);
}
.world__glow { position: absolute; inset: 0; opacity: var(--dark);
  background: radial-gradient(60vmax 40vmax at 15% 10%, rgba(123, 61, 252, .20), transparent 70%),
              radial-gradient(60vmax 45vmax at 90% 100%, rgba(36, 86, 255, .26), transparent 70%); }
.world__ribbon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@property --rb-on { syntax: '<number>'; inherits: true; initial-value: .55; }
/* Quiet by design: a thin line in the side margin, never over text. */
.world__ribbon { --rb-on: .55; transition: --rb-on .6s var(--ease); }
.rb-halo { fill: none; stroke: url(#rbGrad); stroke-width: 7; stroke-linecap: round; opacity: calc((.05 + var(--dark) * .07) * var(--rb-on)); }
.rb-body { fill: none; stroke: url(#rbGrad); stroke-width: 1.6; stroke-linecap: round; opacity: calc((.4 + var(--dark) * .25) * var(--rb-on) + .1); }
.rb-pulse { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 46 1400; opacity: calc((.15 + var(--dark) * .45) * var(--rb-on)); }
.rb-link { fill: none; stroke: var(--violet); stroke-width: 1.2; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .7; }
.rb-final { fill: none; stroke: url(#rbFinal); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .4s var(--ease); }
@media (max-width: 860px) { .world__ribbon { display: none; } }
.rb-node { fill: var(--violet); opacity: 0; transition: opacity .3s var(--ease); }
.rb-node.on { opacity: 1; }
.world__spark { position: absolute; width: 10px; height: 10px; background: url("img/spark.svg") center/contain no-repeat; opacity: calc(.18 + var(--dark) * .5); }

/* ------------------------------------------------------------------- bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center; gap: 24px; padding-inline: var(--gut);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.bar.is-scrolled { background: color-mix(in oklab, var(--ground) 84%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 var(--hair); }
.bar__logo { display: block; flex: none; line-height: 0; border-radius: 8px; }
.bar__logo img { height: 38px; width: auto; }
.bar__logo .on-dark { display: none; }
html.is-dark .bar__logo .on-light { display: none; }
html.is-dark .bar__logo .on-dark { display: block; }
.bar__nav { display: flex; gap: 4px; margin-inline-start: auto; }
.bar__nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 8px 12px; border-radius: 999px; transition: background-color .16s var(--ease), color .16s var(--ease); }
.bar__nav a:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.bar .btn { margin-inline-start: 8px; }
.bar__lang { margin-inline-start: 6px; padding: 8px 12px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 22%, transparent); }
.bar__lang:hover { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 45%, transparent); }
@media (max-width: 900px) { .bar__nav { display: none; } .bar__lang { margin-inline-start: auto; } .bar .btn { margin-inline-start: 6px; } .bar__logo img { height: 32px; } }

/* --------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -10px rgba(36,86,255,.7);
  transition: background-color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease); }
.btn:hover { background: #1B44E0; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 26px -10px rgba(36,86,255,.8); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .95rem; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 24%, transparent); }
.btn--ghost:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 40%, transparent); }
.btn[disabled] { opacity: .55; cursor: progress; }

/* -------------------------------------------------------------- type */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.h1 { font-weight: 900; font-size: clamp(2.4rem, .9rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
.h2 { font-weight: 900; font-size: clamp(1.95rem, 1.1rem + 2.1vw, 3.1rem); line-height: 1.06; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.h3 { font-weight: 700; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.25; margin: 0; }
.em { color: var(--accent-text); }
.lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem); line-height: 1.6; color: var(--ink-soft); max-width: 40ch; margin: 0; text-wrap: pretty; }
html.is-dark .lead, html.is-dark .step__t, html.is-dark .note { font-weight: 500; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .9rem; font-weight: 700; color: var(--accent-text); letter-spacing: .02em; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--blue), var(--cyan)); }
.note { font-size: .9rem; color: var(--ink-soft); }

/* headline that assembles line by line */
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: inline-block; }
.js .ln > span { transform: translate3d(0, 105%, 0); transition: transform .9s var(--ease); }
.js .is-in .ln > span { transform: none; }
.is-in .ln:nth-child(2) > span { transition-delay: .08s; }
.is-in .ln:nth-child(3) > span { transition-delay: .16s; }

/* ------------------------------------------------------- shared UI kit
   Mirrors the real Backbone product: white panels, hairlines, blue actions. */
.ui { background: #fff; color: var(--ink-1); border-radius: var(--r); font-weight: 500; font-size: 15px; line-height: 1.5;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(17, 24, 64, .06), 0 18px 40px -18px rgba(17, 24, 64, .28), 0 0 0 1px rgba(10, 10, 46, .06); }
.ui--soft { box-shadow: 0 0 0 1px rgba(10,10,46,.07), 0 10px 24px -14px rgba(17,24,64,.25); }
.ui__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--g4); }
.ui__head b { font-weight: 700; color: var(--midnight); }
.ui__head small { display: block; color: var(--g2); font-size: 12.5px; font-weight: 500; }
.demo { margin-inline-start: auto; flex: none; font-size: 11.5px; font-weight: 700; color: #5B3FD6; background: #EFEAFF; padding: 3px 9px; border-radius: 999px; }
.av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: #5B3FD6; }
.av--b { background: var(--blue); } .av--o { background: #E8792B; } .av--g { background: #1E9E77; } .av--m { width: 30px; height: 30px; background: #fff; box-shadow: 0 0 0 1px var(--g4); }
.av--m img { width: 20px; height: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--mist); color: var(--g1); white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip--ok { background: #E4F7EF; color: #11795A; } .chip--blue { background: #E8EEFF; color: #1D47D6; } .chip--warn { background: #FFF4DC; color: #8A5A00; } .chip--violet { background: #EFEAFF; color: #5B3FD6; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.msg { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.msg--in { background: var(--mist); color: var(--ink-1); border-start-start-radius: 5px; margin-inline-end: auto; }
.msg--out { background: var(--blue); color: #fff; border-start-end-radius: 5px; margin-inline-start: auto; }
.msg--sys { margin-inline: auto; max-width: 100%; font-size: 13px; color: var(--g2); background: none; padding: 2px 0; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--g3); animation: bbDot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bbDot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }

/* scroll-state toggles: [data-at] gets .on when its scene reaches that progress */
.js [data-at] { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.js [data-at].on { opacity: 1; transform: none; }
.js [data-at].gone { opacity: 0; transform: translate3d(0, -8px, 0); pointer-events: none; }
.js [data-rb][data-at].on { animation: bbTouch 1.4s var(--ease) 1; }
@keyframes bbTouch { 0% { box-shadow: 0 0 0 0 rgba(123, 61, 252, .45); } 100% { box-shadow: 0 0 0 12px rgba(123, 61, 252, 0); } }
[data-swap] .swap-b { display: none; } [data-swap].on-b .swap-a { display: none; } [data-swap].on-b .swap-b { display: inline; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100svh; padding-top: calc(var(--bar-h) + 4vh); display: grid; align-items: center; overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero__copy { position: relative; z-index: 3; padding-block: 4vh 10vh; }
.hero__copy .lead { margin-top: 24px; max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__scene { position: relative; height: min(72vh, 640px); }
.plane { position: absolute; will-change: transform; }
.plane--shot { inset-block-start: 6%; inset-inline-start: 0; width: 132%; max-width: none; border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(17,24,64,.06), 0 30px 70px -30px rgba(17,24,64,.45), 0 0 0 1px rgba(10,10,46,.08); background: #fff; }
.plane--shot img { width: 100%; height: auto; display: block; }
.plane--chat { inset-block-start: 46%; inset-inline-start: -6%; width: min(330px, 62%); }
.plane--mail { inset-block-start: 2%; inset-inline-start: 22%; width: min(300px, 54%); }
.plane--src { inset-block-start: 80%; inset-inline-start: 34%; }
.hero .chip { box-shadow: 0 10px 24px -12px rgba(17,24,64,.35), 0 0 0 1px rgba(10,10,46,.06); background: #fff; font-size: 13.5px; padding: 8px 14px; }
.mini { padding: 14px; display: grid; gap: 8px; }
.mini__row { display: flex; align-items: center; gap: 10px; }
.mini__row b { font-weight: 700; color: var(--midnight); font-size: 14px; }
.mini__row small { color: var(--g2); font-size: 12px; }
.mini p { margin: 0; font-size: 14px; color: var(--g1); }
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding-block: 2vh 0; }
  .hero__scene { height: 440px; margin-inline: calc(var(--gut) * -1); }
  .plane--shot { inset-inline-start: 6%; width: 150%; }
  .plane--chat { inset-inline-start: auto; inset-inline-end: 4%; inset-block-start: 52%; width: 280px; }
  .plane--mail { inset-inline-start: 4%; width: 250px; }
  .plane--src { inset-inline-start: 6%; }
}

/* ---------------------------------------------------------- section rhythm */
.sec { position: relative; z-index: 2; }
.sec--flow { padding-block: clamp(5rem, 12vh, 9rem); }
.pin { position: relative; z-index: 2; }
.pin__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: var(--bar-h); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--rev .h2 { font-size: clamp(1.95rem, 1.1rem + 1.9vw, 2.9rem); }

/* step captions inside a pinned scene: stacked in one cell, crossfading */
.steps { position: relative; display: grid; margin-top: 28px; min-height: 9.5em; }
.step { grid-area: 1 / 1; }
.step__t { margin: 0; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 36ch; }
.step__t strong { color: var(--ink); font-weight: 700; }
.step__k { display: block; font-size: .85rem; font-weight: 700; color: var(--accent-text); margin-bottom: 6px; }
.dots { display: flex; gap: 8px; margin-top: 22px; }
.dots i { width: 22px; height: 3px; border-radius: 3px; background: color-mix(in oklab, var(--ink) 18%, transparent); transition: background-color .3s var(--ease), width .3s var(--ease); }
.dots i.on { width: 36px; background: var(--accent-text); }

/* ----------------------------------------------------------- 1: converge */
.conv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.conv__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.conv__points li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.conv__points li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .55em; background: url("img/spark.svg") center/contain no-repeat; }
.conv__stage { position: relative; height: 560px; }
.conv__box { position: absolute; inset: 0; border-radius: var(--r-lg); background: #fff; opacity: var(--box, 0);
  box-shadow: 0 0 0 1px rgba(10,10,46,.07), 0 30px 60px -30px rgba(17,24,64,.4); }
.conv__boxhead { position: absolute; inset: 0 0 auto 0; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--g4); opacity: var(--box, 0); }
.conv__boxhead b { font-weight: 700; color: var(--midnight); font-weight: 700; }
.conv__item { position: absolute; inset-inline-start: 0; top: 0; width: 100%; will-change: transform; }
.conv__item .ui { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.conv__item .ui > div { min-width: 0; flex: 1; }
.conv__item b { display: block; color: var(--midnight); font-weight: 700; font-size: 14.5px; }
.conv__item p { margin: 2px 0 0; font-size: 14px; color: var(--g1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__item .chip { margin-top: 8px; }
.conv__src { font-size: 12px; color: var(--g2); white-space: nowrap; }
.conv__profile { position: absolute; inset-inline: 18px; bottom: 18px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--mist); opacity: var(--prof, 0); transform: translate3d(0, calc((1 - var(--prof, 0)) * 12px), 0); }
.conv__profile b { font-weight: 700; color: var(--midnight); }
.conv__profile small { display: block; color: var(--g2); }

/* ------------------------------------------------------------ 2: answer */
.chatw { width: min(460px, 100%); margin-inline: auto; overflow: hidden; }
.chatw__body { display: grid; gap: 10px; padding: 16px; align-content: start; }
.chatw__body--fixed { display: block; padding: 0; height: min(470px, calc(100svh - 230px)); overflow: hidden; }
.chatw__list { position: relative; display: grid; gap: 10px; padding: 16px; align-content: start; transition: transform .7s var(--ease); }
.ws__thread { overflow: hidden; min-height: 0; padding: 0 !important; }
.ws__tlist { position: relative; display: grid; gap: 10px; padding: 16px; align-content: start; transition: transform .7s var(--ease); }
html.is-flow .ws__tlist { transform: none !important; }
.src { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--mist); }
.src__row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--g1); }
.src__row .ic { color: var(--blue); }
.src__row b { color: var(--midnight); font-weight: 700; }
.src__val { margin-inline-start: auto; font-weight: 700; color: #11795A; white-space: nowrap; }
.cite { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.28); font-size: 12.5px; color: rgba(255,255,255,.9); }
.cite span { display: inline-flex; align-items: center; gap: 5px; }
.cite span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.handoff { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--g3); font-size: 13.5px; color: var(--g1); }
.handoff b { color: var(--midnight); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.handoff b .ic { color: var(--violet); }
.honest { margin-top: 18px; max-width: 40ch; font-size: .95rem; color: var(--ink-soft); }

/* The website the chat lives on: a browser window with the store behind
   the open Backbone widget, so it reads as "this goes on your site". */
.chat-lead { margin-top: 16px; max-width: 40ch; }
.site { position: relative; height: min(620px, calc(100svh - 140px)); border-radius: 18px; overflow: hidden; background: #F6F7FB;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 90px -40px rgba(0,0,0,.75); }
.site__bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: #E9ECF4; }
.site__bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9CEDC; }
.site__url { margin-inline-start: 14px; flex: 1; max-width: 300px; height: 24px; border-radius: 8px; background: #fff; color: #7D839C; font-size: 12.5px; display: flex; align-items: center; padding: 0 10px; }
.site__page { position: absolute; inset: 40px 0 0 0; padding: 18px 22px; display: grid; gap: 18px; align-content: start; }
.site__page span { display: block; border-radius: 8px; background: #E4E7F0; }
.sk-nav { display: flex; gap: 10px; align-items: center; }
.sk-nav span { width: 46px; height: 10px; }
.sk-nav .sk-logo { width: 74px; height: 22px; margin-inline-end: auto; background: #D5DAE7; }
.sk-hero { display: grid; gap: 10px; padding: 22px; border-radius: 14px; background: linear-gradient(135deg, #FFF2D9, #F7DFC0); }
.sk-hero .sk-h { width: 58%; height: 20px; background: rgba(120,70,20,.18); }
.sk-hero .sk-p { width: 40%; height: 10px; background: rgba(120,70,20,.12); }
.sk-hero .sk-btn { width: 92px; height: 26px; border-radius: 999px; background: rgba(120,70,20,.22); margin-top: 6px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sk-grid span { height: 120px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E3E6F0; }
.chatw--widget { position: absolute; inset-inline-end: 16px; top: 54px; bottom: 82px; width: min(340px, 64%); margin: 0; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(10,10,46,.08), 0 24px 60px -18px rgba(10,10,46,.55); }
.chatw--widget .chatw__body--fixed { flex: 1; height: auto; min-height: 0; }
.site__launcher { position: absolute; inset-inline-end: 16px; bottom: 16px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 12px 26px -10px rgba(36,86,255,.8); }
.site__launcher .ic { width: 26px; height: 26px; }
html.is-flow .site { height: auto; }
html.is-flow .site__page, html.is-flow .site__launcher { display: none; }
html.is-flow .chatw--widget { position: relative; inset: auto; width: auto; margin: 12px; }

/* ------------------------------------------------------------- 3: action */
.acts { display: grid; gap: clamp(64px, 10vh, 120px); margin-top: clamp(40px, 7vh, 72px); }
.act3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.act3:nth-child(even) .act3__ui { order: -1; }
.act3__ui { will-change: clip-path; }
.wipe { clip-path: inset(0 0 calc((1 - var(--w, 1)) * 100%) 0 round var(--r)); }
.pcard { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--g4); }
.pcard__img { width: 96px; height: 96px; border-radius: 12px; background: linear-gradient(150deg, #FFF2D9, #F5D7A8); display: grid; place-items: center; }
.pcard__img svg { width: 54px; height: 54px; }
.pcard b { display: block; color: var(--midnight); font-weight: 700; }
.pcard .price { font-weight: 900; color: var(--midnight); font-size: 18px; }
.pcard .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.addbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 13.5px; transition: background-color .25s var(--ease); }
.addbtn.on-b { background: var(--ok); }
.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.track span { font-size: 12px; color: var(--g2); text-align: center; padding-top: 10px; border-top: 3px solid var(--g4); }
.track span.done, .track span.on-b { border-color: var(--blue); color: var(--ink-1); font-weight: 700; }
.lead-form { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--mist); }
.lead-form .f { height: 38px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--g4); display: flex; align-items: center; padding: 0 12px; font-size: 14px; color: var(--g2); }
.lead-form .f.fill { color: var(--ink-1); }

/* --------------------------------------------------------- 4: workspace */
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 230px; overflow: hidden; }
.ws__main { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 470px; border-inline-end: 1px solid var(--g4); }
.ws__side { padding: 16px; display: grid; gap: 12px; align-content: start; background: #FBFCFE; }
.ws__side { transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.ws__side.on-b { background: #F1F5FF; box-shadow: inset 0 0 0 2px rgba(36,86,255,.35); }
.ws__side h4 { margin: 0; font-size: 13px; color: var(--g2); font-weight: 700; }
.ws__bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--g4); }
.ws__thread { padding: 16px; display: grid; gap: 10px; align-content: start; }
.summary { padding: 12px 14px; border-radius: 14px; background: #F4F0FF; font-size: 13.5px; color: #3E2C8F; }
.summary b { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 2px; }
.compose { border-top: 1px solid var(--g4); padding: 12px 16px 14px; }
.compose__tabs { display: flex; gap: 16px; font-size: 13.5px; color: var(--g2); margin-bottom: 8px; }
.compose__tabs span.cur { color: var(--blue); font-weight: 700; box-shadow: 0 2px 0 var(--blue); }
.compose__box { min-height: 64px; border-radius: 12px; padding: 10px 12px; background: var(--mist); font-size: 14.5px; position: relative; }
.ghost { color: var(--g3); transition: color .35s var(--ease); }
.ghost.on-b { color: var(--ink-1); }
.kbd { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--g1); background: #fff; box-shadow: 0 0 0 1px var(--g4); border-radius: 6px; padding: 1px 7px; margin-inline-start: 6px; }
.inote { padding: 10px 12px; border-radius: 12px; background: #FFF6DC; color: #6B4A00; font-size: 14px; }
.inote b { font-weight: 700; }
.tog { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--g4); font-size: 13px; }
.tog b { display: block; font-weight: 700; color: var(--midnight); font-size: 13.5px; }
.tog small { color: var(--g2); }
.sw { flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--g3); position: relative; transition: background-color .3s var(--ease); }
.sw::after { content: ""; position: absolute; top: 3px; inset-inline-end: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: inset-inline-end .3s var(--ease); }
.sw.is-on { background: var(--blue); } .sw.is-on::after { inset-inline-end: 17px; }
.assign { transition: background-color .3s var(--ease), color .3s var(--ease); }
@media (max-width: 1100px) { .ws { grid-template-columns: 1fr; } .ws__main { border-inline-end: 0; } .ws__side { border-top: 1px solid var(--g4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* ---------------------------------------------------------------- 5: rail */
.railwrap { overflow: hidden; }
.rail { display: flex; gap: 24px; width: max-content; padding-inline: var(--gut); align-items: stretch; will-change: transform; }
.rail__lead { width: min(540px, 80vw); flex: none; align-self: center; }
.rail__item { flex: none; width: 340px; display: grid; align-content: start; gap: 10px; }
.rail__item .ui { padding: 16px; display: grid; gap: 10px; }
.rail__k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.rail__k .ic { color: var(--accent-text); }
.rail__shot { width: 360px; flex: none; }
.rail__shot img, .rail__shot .scr { width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 0 0 1px rgba(10,10,46,.08), 0 24px 50px -24px rgba(17,24,64,.45); }
.rail__end { width: min(360px, 80vw); flex: none; align-self: center; }
.olist { display: grid; gap: 8px; }
.olist div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--g1); padding-bottom: 8px; border-bottom: 1px solid var(--g4); }
.olist div:last-child { border-bottom: 0; padding-bottom: 0; }
.olist b { color: var(--midnight); font-weight: 700; }
.thread { position: absolute; inset-inline: 0; top: 50%; height: 2px; pointer-events: none; }

/* ---------------------------------------------------------- 6: operation */
.ops { position: relative; margin-top: clamp(40px, 7vh, 72px); }
.ops__shot { position: relative; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(10,10,46,.08), 0 40px 90px -40px rgba(17,24,64,.5); }
.ops__shot img { width: 100%; height: auto; display: block; }
.ops { padding-bottom: 96px; }
.ops__frame { position: relative; }
/* Each note is anchored at (--x, --y) on the screenshot (physical coords, the
   image is not mirrored) and the card sits beside that point. */
.ann { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 220px; padding: 12px 14px; border-radius: 14px; background: var(--midnight); color: #fff; font-size: 14px; line-height: 1.45; box-shadow: 0 18px 40px -16px rgba(10,10,46,.6); }
.ann b { display: block; font-weight: 700; margin-bottom: 2px; }
.ann::before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(18,180,255,.28); }
.ann::after { content: ""; position: absolute; background: var(--cyan); opacity: .7; }
.ann--left { translate: calc(-100% - 26px) -50%; }
.ann--left::before { right: -31px; top: calc(50% - 5px); }
.ann--left::after { right: -22px; top: 50%; width: 18px; height: 1.5px; }
.ann--right { translate: 26px -50%; }
.ann--right::before { left: -31px; top: calc(50% - 5px); }
.ann--right::after { left: -22px; top: 50%; width: 18px; height: 1.5px; }
.ann--below { translate: -50% 26px; }
.ann--below::before { left: calc(50% - 5px); top: -31px; }
.ann--below::after { left: 50%; top: -22px; width: 1.5px; height: 18px; }
/* Not enough margin beside the screenshot: the card opens to the other side of its point. */
@media (max-width: 1320px) and (min-width: 861px) {
  .ann--left { translate: 26px -50%; }
  .ann--left::before { right: auto; left: -31px; }
  .ann--left::after { right: auto; left: -22px; }
  .ann--right { translate: calc(-100% - 26px) -50%; }
  .ann--right::before { left: auto; right: -31px; }
  .ann--right::after { left: auto; right: -22px; }
}
.caption { margin-top: 16px; font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 860px) { .ops { padding-bottom: 0; } .ann { position: relative; left: auto; top: auto; translate: none; width: auto; margin-top: 12px; } .ann::before, .ann::after { display: none; } }

/* ---------------------------------------------------------------- 7: fit */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(40px, 7vh, 72px); border-top: 1px solid var(--hair); }
.fit__col { padding: clamp(28px, 4vw, 48px) clamp(0px, 3vw, 40px) 0; }
.fit__col + .fit__col { border-inline-start: 1px solid var(--hair); }
.fit__col:first-child { padding-inline-start: 0; }
.fit__col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.fit__col li { display: flex; gap: 12px; color: var(--ink-soft); }
.fit__col li .ic { color: var(--accent-text); margin-top: .25em; }
.fit__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in oklab, var(--blue) 10%, transparent); color: var(--accent-text); margin-bottom: 18px; }
.fit__icon .ic { width: 26px; height: 26px; }
.chan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-top: clamp(64px, 10vh, 110px); }
.chan__list { display: grid; gap: 18px; margin-top: 22px; }
.chan__list p { margin: 0; color: var(--ink-soft); }
.chan__list b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.chan__shot img, .chan__shot .scr { width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 0 0 1px rgba(10,10,46,.08), 0 24px 60px -30px rgba(17,24,64,.45); }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; } .fit__col + .fit__col { border-inline-start: 0; border-top: 1px solid var(--hair); } .fit__col { padding-inline: 0; padding-bottom: 28px; } }

/* ------------------------------------------------------------- 7b: pricing */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 7vh, 64px); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 22px; color: #fff;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -40px rgba(0,0,0,.8); }
.plan--pick { background: linear-gradient(180deg, rgba(123,61,252,.16), rgba(36,86,255,.08)); box-shadow: inset 0 0 0 1.5px rgba(164,123,255,.75), 0 40px 80px -40px rgba(123,61,252,.55); }
.plan__badge { position: absolute; top: -13px; inset-inline-end: 22px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(110deg, var(--violet), var(--blue)); color: #fff; font-size: 13px; font-weight: 700; }
.plan__name { margin: 0; font-size: 1.5rem; font-weight: 900; color: #fff; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 0; white-space: nowrap; }
.plan__amt { font-size: clamp(2.1rem, 1.5rem + 1.2vw, 2.75rem); font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.plan__amt--text { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); }
.plan__per { font-size: .9rem; color: #B9BED3; }
.plan__tok { margin: 10px 0 0; font-size: .9rem; font-weight: 700; color: #7FD6FF; }
.plan__desc { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #D5D9E8; font-weight: 500; line-height: 1.6; }
.plan__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; color: #D5D9E8; font-size: .97rem; font-weight: 500; line-height: 1.5; }
.plan__list .ic { color: #A47BFF; margin-top: .2em; width: 16px; height: 16px; }
.plan__note { margin: auto 0 0; padding-top: 22px; font-size: .88rem; color: #B9BED3; }
.plan__btn { margin-top: 22px; width: 100%; justify-content: center; }
.plan__note + .plan__btn { margin-top: 14px; }
.plan__list + .plan__btn { margin-top: auto; }
.plan__list { margin-bottom: 26px; }
.btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn--line:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn--pick { background: linear-gradient(110deg, var(--violet), var(--blue)); }
.btn--pick:hover { background: linear-gradient(110deg, #6B2EEB, #1B44E0); }
.plans__tok-note { margin-top: 12px; font-size: 1.02rem; }
.plans__fine { margin-top: 20px; font-size: .9rem; color: var(--ink-soft); }
.form__plan { display: flex; align-items: center; gap: 8px; margin: -8px 0 18px; padding: 10px 14px; border-radius: 12px; background: #EFEAFF; color: #3E2C8F; font-size: .95rem; font-weight: 500; }
.form__plan[hidden] { display: none; }
.form__plan b { font-weight: 700; }
.form__plan-x { margin-inline-start: auto; border: 0; background: none; color: #5B3FD6; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }
html.a11y-contrast .plan { background: #fff !important; color: #000 !important; box-shadow: 0 0 0 2px #000 !important; }
html.a11y-contrast .plan *, html.a11y-contrast .plan .plan__list li { color: #000 !important; }
html.a11y-contrast .plan .btn { background: #0030B8 !important; color: #fff !important; }

/* --------------------------------------------------------------- 8: close */
.close { position: relative; z-index: 2; padding-block: clamp(6rem, 16vh, 11rem) 0; }
.close__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.close__mark { width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: 28px; opacity: var(--mk, 0); transform: scale(calc(.92 + var(--mk, 0) * .08)); transform-origin: right center; }
.grad { background: linear-gradient(110deg, var(--cyan), #5B8CFF 45%, #A47BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.form { padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #fff; color: var(--ink-1); box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
.form h3 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 900; color: var(--midnight); }
.form > p { margin: 0 0 20px; color: var(--g1); font-size: .98rem; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: grid; gap: 6px; }
.fld--full { grid-column: 1 / -1; }
.fld label { font-size: .9rem; font-weight: 700; color: var(--ink-1); }
.fld label i { font-style: normal; color: #C2264E; }
.fld input, .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--g4); background: #fff; color: var(--ink-1); font-size: 1rem; font-weight: 500; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36,86,255,.14); }
.fld input[aria-invalid="true"] { border-color: #C2264E; }
.form .btn { width: 100%; justify-content: center; margin-top: 18px; min-height: 54px; }
.form__status { margin: 14px 0 0; font-size: .95rem; font-weight: 500; min-height: 1.5em; }
.form__status.is-ok { color: #11795A; } .form__status.is-err { color: #C2264E; }
.hp { position: absolute; inset-inline-start: -9999px; }
.fine { margin-top: 12px; font-size: .82rem; color: var(--g2); }
@media (max-width: 860px) { .close__grid { grid-template-columns: 1fr; } .fgrid { grid-template-columns: 1fr; } }

.foot { position: relative; z-index: 2; margin-top: clamp(5rem, 12vh, 8rem); padding-block: 28px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; color: var(--ink-soft); font-size: .92rem; }
.foot img { height: 30px; width: auto; }
.foot a { color: var(--ink); font-weight: 700; text-decoration: none; letter-spacing: .14em; font-size: .82rem; }
.foot a:hover { color: var(--accent-text); }
.foot__copy { margin-inline-start: auto; }
.foot__links { display: flex; gap: 18px; }
.foot .foot__links a { letter-spacing: 0; font-size: .92rem; font-weight: 500; color: var(--ink-soft); text-decoration: underline; text-underline-offset: .2em; }
.fine a { color: inherit; }

/* --------------------------------------------------------- mobile + motion
   Below 860px the scenes keep pinning and advancing, in a compact layout.
   Reduced motion releases them into a plain vertical read (html.is-flow). */
@media (max-width: 860px) {
  /* hero: the whole scene stays inside the screen */
  .hero { min-height: 0; padding-bottom: 3rem; }
  .hero__scene { height: 380px; margin-inline: 0; margin-top: 2.5rem; }
  .plane--shot { inset-inline: 0; width: 100%; inset-block-start: 20%; border-radius: 12px; }
  .plane--mail { inset-block-start: 0; inset-inline-start: auto; inset-inline-end: 0; width: 76%; }
  .plane--chat { inset-block-start: 56%; inset-inline-start: 0; inset-inline-end: auto; width: 78%; }
  .plane--src { inset-block-start: 88%; inset-inline-start: auto; inset-inline-end: 2%; }
  .hero .mini { padding: 10px 12px; }
  .split, .split--rev, .conv, .act3, .chan { grid-template-columns: 1fr; }
  .conv__stage { overflow: hidden; border-radius: var(--r-lg); }
  .act3:nth-child(even) .act3__ui { order: 0; }
  .conv__stage { height: 520px; }

  /* Pinned scenes on a phone: the same choreography, one compact screen each. */
  .pin__stage { padding-top: calc(var(--bar-h) + 6px); padding-bottom: 12px; align-items: stretch; }
  .pin__stage > .wrap.split { display: flex; flex-direction: column; align-items: stretch; gap: 12px; height: 100%; min-height: 0; }
  .pin__stage .h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 1.9rem); }
  .pin__stage .eyebrow { margin-bottom: 6px; font-size: .8rem; }
  .pin__stage .chat-lead, .pin__stage .honest { display: none; }
  .steps { margin-top: 10px; min-height: 5.4em; }
  .step__t { font-size: 1rem; line-height: 1.5; }
  .step__k { margin-bottom: 2px; }
  .dots { margin-top: 8px; }
  .split--rev > :last-child { order: -1; }
  .site { flex: 1; min-height: 0; height: auto; }
  .chatw--widget { inset-inline: 10px; width: auto; top: 50px; bottom: 72px; }
  .site__launcher { inset: auto 12px 12px auto; width: 46px; height: 46px; }
  .ws { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
  .ws__main { flex: 1; min-height: 0; border-inline-end: 0; }
  .ws__side { position: absolute; inset: auto 8px 8px 8px; z-index: 2; grid-template-columns: 1fr !important; border-radius: 14px; background: #fff;
    box-shadow: 0 0 0 1px var(--g4), 0 14px 34px -12px rgba(10,10,46,.4); opacity: 0; transform: translate3d(0, 14px, 0); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease); }
  .ws__side.on-b { opacity: 1; transform: none; }
  .pin__stage > .railwrap { align-self: center; }
  .rail { gap: 14px; }
  .rail__lead { width: 82vw; }
  .rail__item { width: 74vw; }
  .rail__shot { width: 62vw; }
  .rail__end { width: 80vw; }

  /* reduced motion / "stop animations" on a phone: a plain vertical read */
  html.is-flow .pin__stage > .wrap.split { display: grid; height: auto; }
  html.is-flow .pin__stage .chat-lead, html.is-flow .pin__stage .honest { display: block; }
  html.is-flow .split--rev > :last-child { order: 0; }
  html.is-flow .ws__side { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; }
  html.is-flow .rail { flex-direction: column; flex-wrap: nowrap; }
  html.is-flow .rail > * { width: 100%; max-width: 460px; }
}
/* Flow mode on a wide screen ("stop animations" in the accessibility menu). */
html.is-flow .pin__stage { position: relative; height: auto; padding-block: 5rem 3rem; }
html.is-flow .steps { min-height: 0; display: grid; gap: 18px; }
html.is-flow .step { grid-area: auto; }
html.is-flow .dots { display: none; }
html.is-flow .chatw__body--fixed { height: auto; }
html.is-flow .chatw__list, html.is-flow .plane { transform: none !important; }
html.is-flow .railwrap { overflow: visible; }
html.is-flow .rail { flex-wrap: wrap; width: auto; transform: none !important; }
html.is-flow .ln > span { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ln > span { transform: none; transition: none; }
  [data-at] { transition: opacity .2s linear; transform: none !important; }
  .plane { transform: none !important; }
  .chatw__body--fixed { height: auto; }
  .chatw__list, .ws__tlist { transform: none !important; }
  .typing i { animation: none; }
  .wipe { clip-path: none !important; }
  .pin__stage { position: relative; height: auto; padding-block: 5rem 3rem; }
  .steps { min-height: 0; display: grid; gap: 18px; }
  .step { grid-area: auto; }
  .dots { display: none; }
  .railwrap { overflow-x: auto; }
  .rail { transform: none !important; }
}

/* ------------------------------------------------------- text pages */
.bb-doc .bar { background: color-mix(in oklab, var(--ground) 90%, transparent); }
.doc { width: 100%; max-width: 48rem; margin-inline: auto; padding: calc(var(--bar-h) + clamp(3rem, 8vh, 5rem)) var(--gut) 2rem; }
.doc__body { margin-top: 28px; color: var(--ink-soft); }
.doc__body > * + * { margin-top: 1em; }
.doc__body h2 { margin-top: 2.2em; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); font-weight: 700; color: var(--ink); line-height: 1.3; }
.doc__body p, .doc__body li { max-width: 68ch; line-height: 1.75; }
.doc__body ul { padding-inline-start: 1.2em; }
.doc__body li + li { margin-top: .4em; }
.doc__body a { color: var(--accent-text); font-weight: 500; }
.doc__body strong { color: var(--ink); font-weight: 700; }
.doc__meta { font-size: .92rem; color: var(--g2); }
.bb-doc .foot { margin-top: 4rem; }

/* English headlines: Latin runs wider than Hebrew at the same size, so the
   display type steps to Bold (the brand book's headline weight) and tightens. */
html[lang="en"] .h1 { font-weight: 700; letter-spacing: -.025em; font-size: clamp(2.3rem, .9rem + 3vw, 4rem); }
html[lang="en"] .h2 { font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.8rem, 1rem + 1.85vw, 2.75rem); }
html[lang="en"] .split--rev .h2 { font-size: clamp(1.8rem, 1rem + 1.6vw, 2.5rem); }
html[lang="en"] .plan__name { font-weight: 700; }
@media (max-width: 860px) { html[lang="en"] .pin__stage .h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.75rem); } }
.src__row { flex-wrap: wrap; row-gap: 2px; }
.chatw__list > *, .src > * { min-width: 0; }
html[lang="en"] .rail__lead { width: min(660px, 82vw); }
/* the forward arrow points the way the language reads */
html[dir="ltr"] .btn .ic { transform: scaleX(-1); }