/* AwesomeAgentic site 20, "Their phone, your laptop". The opening and screens 1 to 9.
   One stage stays on screen while the words scroll beside it (under it on phones).
   The stage holds two things everyone knows: a buyer's phone and your own laptop.
   Modes: no script = the end state, still; no movement = each screen's end state, no motion. */

*, *::before, *::after { box-sizing: border-box; }
:root {
  --bar: 60px;
  --m: clamp(16px, 5vw, 64px);
  --ink: #252869;
  --ink-deep: #14164a;
  --lead: #596172;
  --quiet: #8a90a0;
  --teal: #28A9AB;
  --teal-ink: #0e797c;
  --wash: #e4f5f5;
  --mark: #B4E495;
  --ground: #F7F7F7;
  --ease-o: cubic-bezier(.22, 1, .36, 1);
}
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--ground); scrollbar-color: var(--color-bar-quiet) transparent;
}
.motion { scroll-behavior: smooth; }
html.opening { overflow: hidden; }
body {
  margin: 0; background: var(--ground); color: var(--ink); overflow-x: clip;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; caret-color: var(--ink);
}
h1, h2, h3, p, ul, ol, figure, dl, dd, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--mark); color: var(--ink-deep); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the bar ---------- */
.bar {
  position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--bar);
  display: flex; align-items: center; gap: 16px; padding: 0 var(--m);
  background: var(--ground); transition: opacity .5s ease, box-shadow .3s ease;
}
.bar.is-down { box-shadow: 0 1px 0 var(--color-border); }
.bar-name {
  font-family: var(--font-serif); font-weight: 900; font-size: clamp(17px, 1rem + .3vw, 21px);
  color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.loopw {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translate(-50%, -60%); transition: opacity .45s var(--ease-o), transform .45s var(--ease-o);
}
.loopw.is-on { opacity: 1; transform: translate(-50%, -50%); }
.loopw li {
  position: relative; padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--lead);
  transition: background-color .3s ease, color .3s ease;
}
.loopw li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 1.5px; background: var(--color-bar-quiet); }
.loopw li.on { background: var(--ink); color: #fff; }
.book {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-md);
  background: var(--color-gradient-green); color: var(--ink); text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 16px -6px rgba(40, 169, 171, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.book:hover { background: var(--color-gradient-green-hover); transform: translateY(-1px); box-shadow: 0 9px 20px -6px rgba(40, 169, 171, .6); }
.pre .bar { opacity: 0; pointer-events: none; transition: none; }

/* ---------- the story: words on the left, one stage on the right ---------- */
.story { position: relative; display: grid; grid-template-columns: minmax(340px, 38%) minmax(0, 1fr); }
.steps { grid-column: 1; grid-row: 1; }
.stage {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  transition: opacity .8s var(--ease-o) .12s;
}
.pre .stage { opacity: 0; transition: none; }
.frame { position: absolute; inset: var(--bar) 0 40px 0; overflow: hidden; }
/* while the same posts drift behind the phone, they fade out towards the words */
.frame.is-river {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%);
  mask-image: linear-gradient(90deg, transparent, #000 7%);
}
.canvas {
  position: absolute; left: 50%; top: 50%; width: 960px; height: 600px;
  transform: translate(-50%, -50%) scale(.72); transform-origin: 50% 50%;
}
.js .canvas { left: 0; top: 0; transform-origin: 0 0; }
.stage-note {
  position: absolute; left: 0; right: 0; bottom: 12px; padding: 0 var(--m);
  text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--lead);
}

.step {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--bar) + 24px) clamp(20px, 3vw, 48px) 32px var(--m);
}
.step-last { min-height: 140vh; min-height: 140svh; padding-bottom: calc(40svh + 32px); }
.st-in { max-width: 31rem; }
.st-h {
  font-family: var(--font-serif); font-weight: 900; color: var(--ink);
  font-size: clamp(1.7rem, 0.95rem + 1.9vw, 2.75rem); line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance;
}
.st-h1 { font-size: clamp(2rem, 0.95rem + 2.75vw, 3.6rem); line-height: 1.14; letter-spacing: -0.016em; }
.st-h em {
  font-style: normal; padding: 0 .06em; margin: 0 -.06em;
  background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.st-p { margin-top: 20px; max-width: 29em; font-size: clamp(1.0625rem, 1rem + .22vw, 1.25rem); line-height: 1.55; color: var(--lead); text-wrap: pretty; }
.st-p b { color: var(--ink); font-weight: 700; }
.keys { margin-top: 22px; display: grid; gap: 12px; max-width: 29em; }
.key { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(1rem, .96rem + .18vw, 1.125rem); line-height: 1.5; color: var(--lead); }
.key i { flex: none; width: 14px; height: 14px; margin-top: .3em; border-radius: 4px; }
.key.k-out i { background: var(--ink); }
.key.k-own i { background: var(--teal); }
.key b { color: var(--ink); }

.again {
  display: none; margin: 18px 0 0 -2px; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--lead);
  font-family: var(--font-body); font-size: 15px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--color-bar-quiet);
  transition: color .2s ease, text-decoration-color .2s ease, opacity .6s var(--ease-o);
}
.js .again { display: inline-flex; }
.again svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.again:hover { color: var(--ink); text-decoration-color: var(--teal); }

/* No word of ours shows while the look-alike page is up. The headline wipes in once it has gone. */
.pre .st-h1 ~ .st-p, .pre .again { opacity: 0; transition: none; }
.st-h1 ~ .st-p { transition: opacity .7s var(--ease-o) .35s; }
.opening .st-h1 { clip-path: inset(-.3em 100% -.3em 0); }
.arrive .st-h1 { animation: wipe .62s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes wipe { from { clip-path: inset(-.3em 100% -.3em 0); } to { clip-path: inset(-.3em -.3em -.3em -.3em); } }

/* ---------- the stage pieces ---------- */
.river { position: absolute; inset: 0; }
.ghost {
  position: absolute; left: 0; top: 0; width: 150px; height: 196px; padding: 10px;
  border-radius: 14px; background: #fff; box-shadow: 0 2px 8px -2px rgba(37, 40, 105, .1);
  will-change: transform;
}
.ghost i { display: block; border-radius: 4px; background: #e6e8ee; }
.ghost i:nth-child(1) { width: 52%; height: 8px; }
.ghost i:nth-child(2) {
  position: relative; height: 104px; margin-top: 10px; border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(circle at 62% 26%, #f7f2e8 0 15px, transparent 16px),
    linear-gradient(transparent 70%, #dadde4 70%),
    linear-gradient(#e3e6ec, #f2f1ee);
}
.ghost svg { position: absolute; left: 50%; bottom: 20%; width: 70%; height: auto; transform: translateX(-50%) rotate(-9deg); }
.ghost i:nth-child(3) { width: 86%; height: 9px; margin-top: 12px; background: #dcdfe6; }
.ghost i:nth-child(4) { width: 60%; height: 9px; margin-top: 7px; background: #dcdfe6; }

.disc { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; background: var(--wash); }

.lanes { position: absolute; left: 0; top: 0; width: 960px; height: 600px; overflow: visible; }
.lane { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round; }
#tip path { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dot-out { fill: var(--ink); }
.dot-own { fill: var(--teal); stroke: #fff; stroke-width: 1.5; }
.lane-say {
  position: absolute; left: 322px; top: 62px; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 17px;
  background: #fff; color: var(--ink); white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--teal), 0 6px 14px -6px rgba(37, 40, 105, .22);
}
.ls-bot { top: 572px; }

/* the phone */
.phone {
  position: absolute; left: 0; top: 0; width: 270px; height: 560px; border-radius: 46px;
  background: var(--ink); transform-origin: 135px 280px;
  transform: translate(15px, 45px) scale(.66);
  box-shadow: inset 0 0 0 1.5px #3a3d8f, inset 0 0 0 6px #1f2263,
    0 40px 60px -24px rgba(20, 22, 74, .42), 0 14px 26px -10px rgba(20, 22, 74, .26);
}
.ph-btn { position: absolute; width: 4px; border-radius: 2px; background: #1f2263; }
.ph-btn-a { left: -3px; top: 110px; height: 26px; }
.ph-btn-b { left: -3px; top: 150px; height: 48px; }
.ph-btn-c { right: -3px; top: 140px; height: 70px; }
.ph-screen { position: absolute; inset: 9px; border-radius: 38px; overflow: hidden; background: #fff; }
.ph-status {
  position: relative; height: 36px; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 22px 0 28px; color: var(--ink); font-family: var(--font-heading); font-weight: 700; font-size: 12px;
}
.ph-island { position: absolute; left: 50%; top: 9px; width: 76px; height: 22px; border-radius: 12px; background: var(--ink-deep); transform: translateX(-50%); }
.ph-icons { display: flex; align-items: center; gap: 6px; }
.ph-icons svg { height: 10px; width: auto; fill: currentColor; }
.ph-icons svg:first-child { width: 15px; }
.ph-icons svg:last-child { width: 22px; }
.ph-app {
  height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  border-bottom: 1px solid #eef0f4;
}
.ph-app b { font-family: var(--font-serif); font-weight: 900; font-size: 16px; }
.ph-app span { display: flex; gap: 14px; }
.ph-app svg, .po-acts svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ph-view { position: absolute; top: 76px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.feed { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }

.post { padding: 12px 14px 11px; border-bottom: 7px solid #f1f2f5; background: #fff; }
.post.same { opacity: var(--dim, 1); }
.po-head { display: flex; align-items: center; gap: 8px; height: 28px; font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--quiet); }
.po-head span { margin-left: auto; }
.av {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: #c3c8d2; color: #fff;
  display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 12px; font-style: normal;
}
.same .po-head b { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; color: var(--color-text-secondary); }
/* the look-alike ad: the same shoe at the same sunset, in grey */
.po-img { position: relative; height: 166px; margin-top: 8px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #e3e6ec, #f2f1ee 70%); }
.sun { position: absolute; left: 60%; top: 14%; width: 50px; height: 50px; border-radius: 50%; background: #f7f2e8; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #dadde4; }
.shade { position: absolute; left: 22%; right: 22%; bottom: 17%; height: 10px; border-radius: 50%; background: rgba(37, 40, 105, .09); }
.shoe { position: absolute; left: 50%; bottom: 20%; width: 68%; height: auto; transform: translateX(-50%) rotate(-9deg); }
.v2 .sun { left: 16%; top: 20%; }
.v2 .shoe { transform: translateX(-50%) scaleX(-1) rotate(-7deg); }
.v3 .po-img { background: linear-gradient(180deg, #e0e4e9, #f0efed 70%); }
.v3 .sun { left: 64%; top: 22%; width: 42px; height: 42px; }
.v3 .shoe { transform: translateX(-50%) rotate(-15deg); bottom: 24%; }
.po-txt { margin-top: 9px; font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--lead); }
.po-acts { display: flex; gap: 14px; margin-top: 8px; color: var(--quiet); }
.po-acts .sv { margin-left: auto; }

.yours .av-you { background: var(--ink); display: grid; place-items: center; }
.yours .av-you::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.yours .po-head b { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; color: var(--ink); }
.yours .po-head span { color: var(--teal-ink); }
.poster { height: 194px; background: var(--ink-deep); }
.lamp { position: absolute; right: 2px; bottom: 0; height: 100%; width: auto; }
.lamp-light { fill: rgba(180, 228, 149, .17); }
.lamp-pole { fill: none; stroke: #3a3d8f; stroke-width: 5; stroke-linecap: round; }
.lamp-head { fill: #e9ebff; }
.reflect { position: absolute; left: -12%; bottom: 30px; width: 64%; height: 9px; border-radius: 2px; background: var(--teal); transform: rotate(-7deg); }
.reflect::after { content: ""; position: absolute; left: 18%; right: -6%; top: 17px; height: 5px; border-radius: 2px; background: var(--teal); opacity: .7; }
.pst-h { position: absolute; left: 16px; top: 20px; max-width: 7.4em; font-family: var(--font-serif); font-weight: 900; font-size: 25px; line-height: 1.14; color: #fff; }
.pst-s { position: absolute; left: 16px; top: 88px; max-width: 9.4em; font-size: 13px; line-height: 1.35; color: #c9cdf0; }
.yours .po-txt { color: var(--ink); }
.po-cta {
  display: inline-flex; align-items: center; height: 32px; margin-top: 10px; padding: 0 14px; border-radius: 8px;
  background: var(--ink); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 12px;
}
.yours .sv { transition: fill .3s ease, color .3s ease, transform .4s var(--ease-spring); }
.yours .sv.is-on { color: var(--teal); fill: var(--teal); transform: scale(1.15); }

.touch {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(37, 40, 105, .15); box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 4px 10px rgba(20, 22, 74, .2);
  opacity: 0; pointer-events: none;
}
.touch.is-flick { animation: flick 1.7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes flick {
  0% { opacity: 0; transform: translate(150px, 400px) scale(.6); }
  12% { opacity: 1; transform: translate(146px, 392px) scale(1); }
  56% { opacity: 1; transform: translate(132px, 180px) scale(1); }
  70% { opacity: 0; transform: translate(130px, 150px) scale(.8); }
  100% { opacity: 0; transform: translate(130px, 150px) scale(.8); }
}
.touch.is-rest { opacity: 1; transition: transform .5s var(--ease-o), opacity .3s ease; }
.toast {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 16px); opacity: 0;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 10px; border-radius: 15px;
  background: var(--ink-deep); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  transition: transform .4s var(--ease-o), opacity .3s ease;
}
.toast svg { width: 14px; height: 14px; fill: var(--teal); stroke: var(--teal); stroke-width: 1.8; stroke-linejoin: round; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* the laptop */
.laptop { position: absolute; left: 380px; top: 140px; width: 540px; }
.lp-lid {
  position: relative; height: 352px; padding: 12px 11px 13px; border-radius: 18px 18px 8px 8px;
  background: var(--ink); box-shadow: inset 0 0 0 1.5px #3a3d8f;
}
.lp-cam { position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #4a4d9c; }
.lp-screen { height: 100%; border-radius: 7px; overflow: hidden; background: var(--ground); }
.lp-base {
  position: relative; height: 15px; margin: 0 -32px; border-radius: 3px 3px 16px 16px;
  background: linear-gradient(#3a3d8f, var(--ink) 70%);
  box-shadow: 0 30px 44px -20px rgba(20, 22, 74, .42), 0 8px 14px -6px rgba(20, 22, 74, .24);
}
.lp-base i { position: absolute; left: 50%; top: 0; width: 84px; height: 5px; margin-left: -42px; border-radius: 0 0 6px 6px; background: #1f2263; }
.app { height: 100%; display: flex; flex-direction: column; color: var(--ink); font-family: var(--font-body); }
.app-top {
  flex: none; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px;
  background: #fff; border-bottom: 1px solid var(--color-border);
}
.app-mark { width: 16px; height: 16px; border-radius: 5px; background: var(--ink); display: grid; place-items: center; }
.app-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.app-day { font-family: var(--font-serif); font-weight: 900; font-size: 13px; }
.app-agents { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 12px; color: var(--lead); }
.faces { display: flex; }
.faces img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--color-wash-lilac); box-shadow: 0 0 0 2px #fff; }
.faces img + img { margin-left: -6px; }
.app-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 166px; gap: 12px; padding: 11px 12px 10px; }
.app-h { font-family: var(--font-serif); font-weight: 900; font-size: 13px; line-height: 1.2; margin-bottom: 8px; }
.app-notes { position: relative; min-width: 0; }
/* the main panel shows one view at a time: notes, the idea, the work */
.v-notes { position: relative; height: 100%; margin: 0 -3px; padding: 0 3px; overflow: hidden; }
.v-idea, .v-work { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.v-foot { margin-top: 9px; font-size: 12.5px; line-height: 1.3; color: var(--lead); }
.app-empty { position: absolute; left: 3px; top: 24px; font-size: 12.5px; color: var(--lead); }
html:not(.js) .app-empty { display: none; }
.notes { display: grid; gap: 4px; }
.note {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 9px; border-radius: 8px;
  background: #fff; box-shadow: 0 1px 2px rgba(37, 40, 105, .07), 0 0 0 1px rgba(37, 40, 105, .04);
}
.ic { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.ic svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-out .ic { background: var(--ink); }
.k-own .ic { background: var(--teal); }
.nt { min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.14; color: var(--ink); white-space: nowrap; }
.nt b { font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; line-height: 1.1; color: var(--ink); }
.k-own .nt b { color: var(--teal-ink); }

/* the agent's check on each note: a tick speaks for the goal, a question mark could not be measured */
.chk {
  flex: none; margin-left: auto; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal); opacity: 0; transform: scale(.4);
}
.chk svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chk.nm {
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--quiet); color: var(--lead); font-style: normal;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px; line-height: 1;
}
.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--teal);
  box-shadow: 0 0 10px 2px rgba(40, 169, 171, .45); opacity: 0; pointer-events: none;
}
/* screen 7: what buyers did comes back as a new note */
.note-new { display: none; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--teal), 0 1px 2px rgba(37, 40, 105, .07); }
.note-new.is-in { display: flex; }
.tag-new {
  flex: none; margin-left: auto; padding: 3px 8px; border-radius: 999px; background: var(--teal-ink); color: #fff; font-style: normal;
  font-family: var(--font-heading); font-weight: 700; font-size: 10.5px; line-height: 1.2;
}

/* screen 5: the idea */
.v-idea .app-h { display: flex; align-items: center; gap: 7px; }
.v-idea .app-h img { width: 22px; height: 22px; border-radius: 50%; background: var(--color-wash-lilac); }
.pitch {
  padding: 13px 14px 14px; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(37, 40, 105, .07), 0 0 0 1px rgba(37, 40, 105, .05), 0 12px 22px -16px rgba(20, 22, 74, .35);
}
.pitch-h { font-family: var(--font-serif); font-weight: 900; font-size: 16px; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.pitch-why { display: grid; gap: 8px; margin-top: 11px; }
.pitch-why dt { font-family: var(--font-heading); font-weight: 700; font-size: 11.5px; line-height: 1.2; color: var(--teal-ink); }
.pitch-why .nm dt { color: var(--lead); }
.pitch-why dd { margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--ink); }
.pitch-btns { display: flex; gap: 8px; margin-top: 13px; }
.b-yes, .b-no {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 7px;
  font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; line-height: 1;
}
.b-yes { background: var(--ink); color: #fff; transition: background-color .25s ease; }
.b-yes .y1 { display: none; align-items: center; gap: 5px; }
.b-yes .y1 svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.b-yes.is-yes { background: var(--teal-ink); }
.b-yes.is-yes .y0 { display: none; }
.b-yes.is-yes .y1 { display: inline-flex; }
.b-no { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--color-bar-quiet); }

.app-ideas { min-width: 0; }
/* screen 5: the goal joins the side column */
.goal { overflow: hidden; }
.goal-in {
  margin-bottom: 10px; padding: 9px 11px 10px; border-radius: 10px; background: var(--wash);
  box-shadow: inset 0 0 0 1.5px rgba(40, 169, 171, .4);
}
.goal span { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 11px; line-height: 1.2; color: var(--teal-ink); }
.goal b { display: block; margin-top: 3px; font-family: var(--font-serif); font-weight: 900; font-size: 13px; line-height: 1.25; color: var(--ink); }
.no-typing .typing { display: none; }
.idea-wait {
  display: grid; grid-template-columns: 28px 1fr; gap: 8px 9px; align-items: start; padding: 10px;
  border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-bar-quiet);
}
.idea-wait img { width: 28px; height: 28px; border-radius: 50%; background: var(--color-wash-lilac); }
.idea-wait p { font-size: 12.5px; line-height: 1.3; }
.typing { grid-column: 2; display: flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: .35; animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }

/* on phones the close-up hides the ideas column, so the agent's card comes up under the notes */
.idea-pop {
  position: absolute; left: 50%; bottom: 10px; width: min(340px, calc(100% - 24px)); padding: 11px 14px;
  border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.3;
  box-shadow: inset 0 0 0 1.5px var(--color-bar-quiet), 0 10px 22px -12px rgba(20, 22, 74, .35);
  opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
  transition: opacity .35s ease, transform .45s var(--ease-o);
}
.idea-pop.is-on { opacity: 1; transform: translate(-50%, 0); }
.pop-st { display: grid; grid-template-columns: 32px 1fr; gap: 6px 10px; align-items: center; }
.pop-st img { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--color-wash-lilac); }
.pop-st .typing { grid-column: 2; }
.pop-rb { display: none; align-items: center; gap: 12px; }
.idea-pop.is-rb .pop-st { display: none; }
.idea-pop.is-rb .pop-rb { display: flex; }
.pop-rb .pps-us, .pop-rb .rb-u, .idea-pop.is-us .pop-rb .pps-team, .idea-pop.is-us .pop-rb .rb-t { display: none; }
.idea-pop.is-us .pop-rb .pps-us { display: flex; }
.idea-pop.is-us .pop-rb .rb-u { display: inline; }

/* screen 8: who runs it */
.runby { position: absolute; left: 650px; top: 100px; display: grid; opacity: 0; visibility: hidden; transform: translate(-50%, -50%); }
.rb {
  grid-area: 1 / 1; justify-self: center; display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 17px 0 8px; border-radius: 21px; background: #fff; color: var(--ink); white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--ink), 0 10px 20px -10px rgba(20, 22, 74, .35);
  transition: opacity .3s ease, transform .35s var(--ease-o);
}
.rb-us { opacity: 0; transform: translateY(8px); }
.runby.is-us .rb-team { opacity: 0; transform: translateY(-8px); }
.runby.is-us .rb-us { opacity: 1; transform: none; }
.pps { display: flex; }
.pps i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: #dfe3ec; color: var(--ink); font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  box-shadow: 0 0 0 2px #fff;
}
.pps i + i { margin-left: -7px; }
.pps .pp-us { background: var(--ink); }
.pps .pp-us::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }

/* screen 5 to 6: the press on "Say yes" */
.cursor {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; transform-origin: 5px 3px; opacity: 0; pointer-events: none;
  fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(20, 22, 74, .3));
}
/* screen 7: your post lands on the buyer's phone */
.ph-ring { position: absolute; inset: -12px; border-radius: 56px; box-shadow: 0 0 0 3px var(--teal); opacity: 0; pointer-events: none; }

/* notes on their way */
.chip {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px 0 8px; border-radius: 14px; background: var(--ink); color: #fff; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px; line-height: 1;
  box-shadow: 0 8px 16px -6px rgba(20, 22, 74, .45); opacity: 0; will-change: transform, opacity;
}
.chip svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip-own { background: var(--teal-ink); }

/* screen 8: the switch beside the words */
.who { display: none; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.js .who { display: flex; }
.who-b {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--color-bar-quiet); background: #fff; color: var(--ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.who-b:hover { border-color: var(--ink); }
.who-b[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* no script: the stage shows screen 4, still */
html:not(.js) .chip, html:not(.js) .touch, html:not(.js) .toast, html:not(.js) .disc,
html:not(.js) .cursor, html:not(.js) .runby, html:not(.js) .ph-ring { display: none; }
html:not(.js) .chk { opacity: 1; transform: none; }

/* ---------- the kits: real screens from the app ---------- */
.kits {
  position: relative; z-index: 4; scroll-margin-top: var(--bar);
  padding: clamp(72px, 12vh, 140px) var(--m) clamp(88px, 14vh, 160px);
  background: #fff; border-top: 1px solid var(--color-border);
}
.kits-in { max-width: 1240px; margin: 0 auto; }
.kits-head { max-width: 46rem; }
.kits-h {
  font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.25rem);
  line-height: 1.14; letter-spacing: -0.014em; color: var(--ink); text-wrap: balance;
}
.kits-p { margin-top: 16px; max-width: 36em; font-size: clamp(1.0625rem, 1rem + .22vw, 1.25rem); line-height: 1.55; color: var(--lead); text-wrap: pretty; }
.kits-ui {
  margin-top: clamp(32px, 5vh, 56px); display: grid; align-items: start;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px);
}
.kit-tabs { display: none; gap: 8px; }
.js .kit-tabs { display: grid; }
.kit-tab {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 3px 14px; align-items: center; min-height: 44px;
  padding: 14px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left;
  box-shadow: inset 0 0 0 1.5px transparent; transition: background-color .2s ease, box-shadow .2s ease;
}
.kit-tab:hover { background: var(--ground); }
.kit-tab[aria-selected="true"] { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--ink); }
.kt-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wash); font-style: normal; transition: background-color .2s ease; }
.kt-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kit-tab[aria-selected="true"] .kt-ic { background: var(--ink); }
.kit-tab[aria-selected="true"] .kt-ic svg { stroke: #fff; }
.kit-tab b { font-family: var(--font-heading); font-weight: 700; font-size: 16px; line-height: 1.25; }
.kit-tab span { font-size: 14.5px; line-height: 1.4; color: var(--lead); }
.kit-panels { min-width: 0; }
.kit { position: relative; margin: 0 0 40px; }
.js .kit { margin: 0; }
.kit[hidden] { display: none; }
.js .kit:not([hidden]) { animation: kitIn .4s var(--ease-o) both; }
@keyframes kitIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kit-name { margin-bottom: 12px; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--ink); }
.js .kit-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kit-win {
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(37, 40, 105, .1), 0 34px 60px -30px rgba(20, 22, 74, .45), 0 12px 24px -14px rgba(20, 22, 74, .2);
}
.kit-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--ink); color: var(--film-ink-soft); font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: 1; white-space: nowrap; overflow: hidden; }
.kit-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #4a4d9c; }
.kit-bar span { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; }
.kit-win img { display: block; width: 100%; height: auto; }
/* one real number, held up beside the screen */
.kit-call {
  position: absolute; right: -16px; bottom: -28px; width: min(300px, 46%); padding: 16px 18px 17px; border-radius: 14px;
  background: var(--ink); color: #fff; box-shadow: 0 20px 34px -16px rgba(20, 22, 74, .55);
}
.kit-call b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.01em; color: var(--teal); }
.kit-call span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--film-ink-soft); }
@media (max-width: 899px) {
  .kits-ui { grid-template-columns: minmax(0, 1fr); }
  .js .kit-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-tab { grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; padding: 10px 12px; }
  .kit-tab span { display: none; }
  .kt-ic { grid-row: auto; width: 32px; height: 32px; border-radius: 10px; }
  .kt-ic svg { width: 18px; height: 18px; }
  .kit-tab b { font-size: 15px; }
  .kit-call { position: static; width: auto; margin-top: 14px; }
}
@media (max-width: 640px) {
  /* the phone screenshot is tall: show its top, down to what the kit found */
  .kit-win img { max-height: 560px; object-fit: cover; object-position: top; }
}

/* ---------- 9. start: get the insights that set you apart ---------- */
/* the band fills the screen under the bar, so nothing of the stage peeks out above it */
.end {
  position: relative; z-index: 4; display: flex; flex-direction: column; scroll-margin-top: var(--bar);
  min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar)); background: var(--ink); color: #fff;
}
.end-grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 48px;
  padding: clamp(64px, 11vh, 140px) var(--m) clamp(56px, 10vh, 112px);
}
.end-in { display: block; min-width: 0; max-width: 52rem; }
/* the loop, waiting for your goal (wide screens) */
.end-loop { display: none; position: relative; width: 340px; height: 340px; justify-self: center; }
.el-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(40, 169, 171, .55); }
.el-run { position: absolute; inset: 0; animation: elRun 10s linear infinite; }
.el-run i { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(40, 169, 171, .25); }
@keyframes elRun { to { transform: rotate(360deg); } }
.el-w {
  position: absolute; left: 50%; top: 50%; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--film-card); color: #fff; box-shadow: 0 0 0 1.5px rgba(233, 235, 255, .18);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1.2;
  transform: rotate(var(--a)) translate(170px) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
  animation: elOn 10s linear infinite;
}
.el-w:nth-of-type(4) { animation-delay: 1.7s; }
.el-w:nth-of-type(5) { animation-delay: 3.7s; }
.el-w:nth-of-type(6) { animation-delay: 5.7s; }
.el-w:nth-of-type(7) { animation-delay: 7.7s; }
.el-w:nth-of-type(3) { animation-delay: -.3s; }
@keyframes elOn {
  0%, 15% { background: var(--teal); color: var(--ink-deep); box-shadow: 0 0 0 1.5px var(--teal); }
  19%, 100% { background: var(--film-card); color: #fff; box-shadow: 0 0 0 1.5px rgba(233, 235, 255, .18); }
}
.el-mid { position: absolute; left: 50%; top: 50%; width: 210px; transform: translate(-50%, -50%); text-align: center; }
.el-mid small { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--film-muted); }
.el-mid b { display: block; margin-top: 4px; font-family: var(--font-serif); font-weight: 900; font-size: 26px; line-height: 1.2; color: #fff; }
@media (min-width: 1000px) {
  .end-grid { grid-template-columns: minmax(0, 46rem) minmax(380px, 1fr); }
  .end-loop { display: block; }
}
.end-h {
  max-width: 15em; text-wrap: balance;
  font-family: var(--font-serif); font-weight: 900; font-size: clamp(2rem, 1rem + 3.2vw, 3.6rem); line-height: 1.12; letter-spacing: -0.018em;
}
.end-p { margin-top: 22px; max-width: 34em; font-size: clamp(1.0625rem, .98rem + .35vw, 1.3rem); line-height: 1.5; color: var(--film-ink-soft); }
.st-picks { margin-top: 30px; }
.picks { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { position: relative; display: inline-flex; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid rgba(233, 235, 255, .5); color: #fff; pointer-events: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pick:hover span { border-color: #fff; }
.pick input:checked + span { background: #fff; border-color: #fff; color: var(--ink); }
.pick input:focus-visible + span { outline: 2px solid var(--mark); outline-offset: 3px; }
.bookbtn {
  display: inline-flex; align-items: center; text-decoration: none; max-width: 100%;
  margin-top: 28px; min-height: 52px; padding: 12px 28px; border: 0; border-radius: var(--radius-md);
  background: var(--color-gradient-green); color: var(--ink); box-shadow: 0 6px 20px -6px rgba(40, 169, 171, .55);
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; transition: transform .15s ease, box-shadow .15s ease;
}
.bookbtn:hover { transform: translateY(-1px); background: var(--color-gradient-green-hover); box-shadow: 0 9px 24px -6px rgba(40, 169, 171, .6); }
.bookbtn:focus-visible { outline-color: var(--mark); }
.ask-note { min-height: 1.5em; margin-top: 12px; max-width: 40em; font-size: 15px; color: var(--film-ink-soft); }
.ask-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; align-items: center;
  padding: 18px var(--m) 22px; border-top: 1px solid rgba(233, 235, 255, .14); color: var(--film-lead); font-size: .875rem;
}
.foot-name { font-family: var(--font-serif); font-weight: 900; font-size: 1rem; color: #fff; }
@media (max-width: 380px) { .pick span { padding: 10px 16px; } }

/* ---------- narrow or tall screens: the stage on top, the words scroll under it ---------- */
@media (max-width: 899px), (max-aspect-ratio: 11/10) {
  .story { display: block; }
  .stage {
    position: sticky; z-index: 3; top: 0; height: clamp(300px, 60svh, 640px);
    background: var(--ground); box-shadow: 0 1px 0 var(--color-border), 0 14px 20px -18px rgba(37, 40, 105, .25);
  }
  .frame { inset: var(--bar) 0 28px 0; -webkit-mask-image: none; mask-image: none; }
  .canvas { transform: translate(-50%, -50%) scale(.42); }
  .stage-note { bottom: 7px; font-size: 12px; }
  /* short steps, so some words are always in view under the stage */
  .step { min-height: 50svh; align-items: flex-start; padding: 26px var(--m) 40px; }
  .step-last { min-height: 70svh; padding-bottom: 40px; }
  .st-in { max-width: 36rem; }
  .st-h1 { font-size: clamp(1.75rem, 1.1rem + 3vw, 2.75rem); }
  .st-h { font-size: clamp(1.45rem, 1rem + 2.2vw, 2.25rem); }
  .st-p { margin-top: 14px; }
  .again { margin-top: 18px; }
  .loopw { display: none; }
}
@media (max-width: 420px) {
  .book { padding: 0 13px; font-size: 13px; }
  .bar { gap: 10px; }
}
@media (max-height: 560px) and (min-aspect-ratio: 11/10) {
  .st-h1 { font-size: clamp(1.6rem, 6.4vh, 2.4rem); }
  .st-h { font-size: clamp(1.35rem, 5.2vh, 2rem); }
  .st-p { margin-top: 12px; font-size: 1rem; }
  .again { margin-top: 12px; }
}

/* ---------- the opening: a look-alike AI website, on purpose, for a few seconds (as in site 19) ---------- */
.copy-open { display: none; position: fixed; inset: 0; z-index: 80; overflow: hidden; }
.opening .copy-open { display: block; }
.half, .paper, .sheet { position: absolute; inset: 0; }
.paper { background: #f2f0eb; opacity: 0; }
.copy-open .half:not(.whole) { visibility: hidden; }
.copy-open.is-tearing .half:not(.whole) { visibility: visible; }
.copy-open.is-tearing .whole { visibility: hidden; }
.copy-open.is-tearing .paper { opacity: 1; }
.copy-open.is-tearing .half { filter: drop-shadow(0 22px 40px rgba(6, 4, 20, .42)); }
.sheet {
  overflow: hidden; background: #08060f; color: #f4f2ff; text-align: center;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.sheet::after { content: ""; position: absolute; inset: 0; background: #08060f; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
.copy-open.is-dim .sheet::after { opacity: .58; }
.g-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.g-glow-a { width: 120vmax; height: 76vmax; left: 50%; top: -46vmax; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(124, 58, 237, .78), rgba(124, 58, 237, .2) 58%, transparent); }
.g-glow-b { width: 70vmax; height: 56vmax; right: -32vmax; top: 18vh; background: radial-gradient(closest-side, rgba(217, 70, 239, .3), transparent); }
.g-glow-c { width: 70vmax; height: 56vmax; left: -36vmax; bottom: -26vmax; background: radial-gradient(closest-side, rgba(79, 70, 229, .42), transparent); }
.g-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 30%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 30%, #000 25%, transparent 72%);
}
.g-sp { position: absolute; height: auto; aspect-ratio: 1; fill: #e9dcff; filter: drop-shadow(0 0 6px rgba(196, 181, 253, .9)); animation: twinkle 2.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.62) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
.g-nav { position: relative; display: flex; align-items: center; gap: 40px; height: 72px; padding: 0 clamp(18px, 5vw, 64px); text-align: left; }
.g-logo { display: flex; align-items: center; gap: 10px; }
.g-logo i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #a78bfa, #7c3aed 50%, #db2777); box-shadow: 0 0 18px rgba(167, 139, 250, .6); }
.g-logo b { width: 88px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .22); }
.g-links { display: flex; gap: 30px; font-size: 14.5px; color: #a6a3c2; }
.g-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14.5px; color: #d9d6f0; }
.g-burger { display: none; width: 22px; }
.g-burger i { display: block; height: 2px; margin: 4px 0; border-radius: 1px; background: #d9d6f0; }
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: 12px;
  font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #8b5cf6, #c026d3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 32px rgba(168, 85, 247, .55);
}
.g-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.g-ghost { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.g-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 6.4vh, 72px) 20px 0; }
.g-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  font-size: 13px; color: #ddd3ff; background: rgba(124, 58, 237, .16); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .35);
}
.g-pill svg { width: 14px; height: 14px; fill: #c4b5fd; }
.g-h1 { margin-top: 22px; font-size: clamp(42px, 6.3vw, 96px); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; }
.g-h1 .ln { position: relative; display: block; width: fit-content; margin: 0 auto; }
.g-h1 .gt { background: linear-gradient(100deg, #ffffff 25%, #d8b4fe 60%, #f0abfc 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-strike {
  position: absolute; left: -4%; right: -4%; top: 52%; height: .085em; border-radius: 1em; background: var(--color-green-light);
  transform: rotate(-1.6deg) scaleX(0); transform-origin: left center;
}
.g-h1 .ln + .ln .g-strike { transform: rotate(1.2deg) scaleX(0); }
.copy-open.is-struck .g-strike { transform: rotate(-1.6deg) scaleX(1); transition: transform .42s cubic-bezier(.7, 0, .25, 1); }
.copy-open.is-struck .ln + .ln .g-strike { transform: rotate(1.2deg) scaleX(1); transition-delay: .14s; }
.g-h2 { margin: 22px auto 0; max-width: 34em; font-size: clamp(16px, .9rem + .4vw, 20px); line-height: 1.5; color: #a6a3c2; }
.g-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.g-trust { display: block; margin-top: 40px; font-size: 13px; color: #77749a; }
.g-logos { display: flex; justify-content: center; gap: 28px; margin-top: 14px; }
.g-logos i { width: 92px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .11); }
.g-dash {
  display: block; width: min(1040px, 92vw); height: 360px; margin-top: 40px; padding: 16px 20px; border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 -10px 80px rgba(124, 58, 237, .35);
}
.g-dash-bar { display: flex; gap: 8px; margin-bottom: 18px; }
.g-dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.g-dash svg { width: 100%; height: 160px; filter: drop-shadow(0 0 12px rgba(192, 132, 252, .55)); }
@media (max-width: 820px) {
  .g-links, .g-login, .g-right .g-btn-sm { display: none; }
  .g-burger { display: block; }
  .g-logos i { width: 56px; }
  .g-logos { gap: 14px; }
}

/* no movement asked for: nothing moves, every screen shows its end state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}