/* =========================================================================
   Homepage below the hero. One visual language with the hero (.rh):
   #f9f9f9 paper, #141413 ink, grey second lines, Roobert Regular, tight
   display type, hairlines, quiet photographs, the same dark CTA.
   Everything is scoped to .lp so other pages are untouched.
   ========================================================================= */
html:has(.lp) { background: #f9f9f9; --font: "Boop Roobert", Roobert, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body:has(.lp) { background: #f9f9f9; }
.bp--light:has(.lp) { background: #f9f9f9; }

.lp {
  --ink: #141413;
  --grey: #8a8984;
  --paper: #f9f9f9;
  --line: #e6ded4;
  --sans: "Boop Roobert", Roobert, ui-sans-serif, system-ui, sans-serif;
  --out: cubic-bezier(.22,1,.36,1);
  --w: 1280px;
  --g: clamp(20px, 4vw, 48px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { display: block; width: 100%; height: 100%; object-fit: cover; }

.lp-sec { padding: clamp(88px, 12vw, 168px) var(--g); border-top: 1px solid var(--line); }
.lp-sec:first-child { border-top: 0; }
.lp-in { max-width: var(--w); margin: 0 auto; }

/* ---- type ---- */
.lp-h {
  margin: 0; font-weight: 400; font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -.042em;
  text-wrap: balance;
}
.lp-h .g { color: var(--grey); display: block; }
.lp-h--c { text-align: center; }
.lp-p { margin: 24px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; letter-spacing: -.012em; color: var(--grey); max-width: 38ch; text-wrap: pretty; }
.lp-p--c { text-wrap: balance; margin-left: auto; margin-right: auto; text-align: center; }
.lp-tag { display: block; margin: 0 0 20px; font-size: 15px; letter-spacing: -.005em; color: var(--grey); }

/* ---- CTA: same as the hero button ---- */
.lp-cta {
  --arrow: 26px;
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); border-radius: 4px;
  font-family: var(--sans); font-size: 17px; line-height: 1; letter-spacing: -.005em;
  padding: 18px calc(28px + var(--arrow) / 2) 19px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(20,20,19,.18), 0 6px 14px -4px rgba(20,20,19,.28), 0 18px 40px -12px rgba(20,20,19,.38);
  transition: background .35s ease, padding .45s var(--out);
}
.lp-cta:hover, .lp-cta:focus-visible { color: var(--paper); }
.lp-cta__arr { display: inline-block; overflow: hidden; width: 0; opacity: 0; transform: translateX(-6px); text-align: right; white-space: nowrap;
  transition: width .45s var(--out), opacity .3s ease, transform .45s var(--out); }
@media (hover: hover) {
  .lp-cta:hover { background: #3b3b39; padding-left: 28px; padding-right: 28px; }
  .lp-cta:hover .lp-cta__arr { width: var(--arrow); opacity: 1; transform: none; transition-delay: 0s, .08s, 0s; }
}
.lp-cta:focus-visible { background: #3b3b39; padding-left: 28px; padding-right: 28px; outline: 1px solid var(--ink); outline-offset: 3px; }
.lp-cta:focus-visible .lp-cta__arr { width: var(--arrow); opacity: 1; transform: none; }
.lp-cta:disabled { opacity: .5; cursor: default; }

/* ---- 1. coverage: in each place, a lit circle grows out from the robot ---- */
.lp-reach { margin-top: clamp(56px, 7vw, 96px); }
.lp-reach__stage {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--paper);
  container-type: inline-size;
}
.lp-scene { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; --r: 100cqw; }
.lp-scene.is-on { opacity: 1; }
.lp-reach[data-step="1"] .lp-scene.is-on { --r: var(--r1); }
.lp-reach[data-step="2"] .lp-scene.is-on { --r: var(--r2); }
.lp-scene.no-tr, .lp-scene.no-tr * { transition: none !important; }
.lp-scene img { position: absolute; inset: 0; }
.lp-reach__ghost { filter: grayscale(1) contrast(.85); opacity: .32; }
.lp-reach__lit { clip-path: circle(var(--r) at var(--cx) var(--cy)); transition: clip-path 1.5s var(--out); }
.lp-reach__ring {
  position: absolute; left: var(--cx); top: var(--cy); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(20,20,19,.06), 0 0 60px rgba(255,255,255,.35);
  transition: width 1.5s var(--out), height 1.5s var(--out), opacity .6s ease; pointer-events: none;
}
.lp-reach[data-step="3"] .lp-reach__ring, .lp-scene:not(.is-on) .lp-reach__ring { opacity: 0; }
.lp-reach__chip {
  position: absolute; left: var(--cx); top: max(28px, calc(var(--cy) - var(--r))); transform: translate(-50%, -50%);
  display: grid; transition: top 1.5s var(--out), left 1.5s var(--out);
}
.lp-reach[data-step="3"] .lp-reach__chip { top: 28px; left: 50%; }
.lp-reach__chip b {
  grid-area: 1 / 1; justify-self: center; white-space: nowrap; font-weight: 400;
  background: var(--paper); color: var(--ink); border-radius: 999px; padding: 8px 16px 9px;
  font-size: clamp(13px, 1.25vw, 16px); letter-spacing: -.01em; box-shadow: 0 1px 2px rgba(20,20,19,.12), 0 6px 18px -6px rgba(20,20,19,.25);
  opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .6s var(--out);
}
.lp-reach[data-step="1"] .lp-reach__chip b:nth-child(1),
.lp-reach[data-step="2"] .lp-reach__chip b:nth-child(2),
.lp-reach[data-step="3"] .lp-reach__chip b:nth-child(3) { opacity: 1; transform: none; transition-delay: .35s; }
.lp-scene__where {
  position: absolute; left: 18px; bottom: 14px; font-size: 14px; letter-spacing: -.005em; color: #fff;
  text-shadow: 0 1px 8px rgba(20,20,19,.45);
}

/* key: three steps, the current one in ink with a line that fills while it plays */
.lp-key { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 40px); }
.lp-key li { margin: 0; }
.lp-key button {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; width: 100%; padding: 20px 0 4px; position: relative;
  color: var(--grey); transition: color .4s ease;
}
.lp-key button::before, .lp-key i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.lp-key i { background: var(--ink); transform: scaleX(0); transform-origin: left; }
.lp-key b { font-weight: 400; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.025em; color: inherit; transition: color .4s ease; }
.lp-key span { font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.lp-key button[aria-pressed="true"] b { color: var(--ink); }
.lp-key button[aria-pressed="true"] i { transform: scaleX(1); transition: transform .5s var(--out); }
.lp-reach.is-playing .lp-key button[aria-pressed="true"] i { animation: lpKeyFill 3.2s linear both; }
@keyframes lpKeyFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp-key button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) { .lp-key button:hover b { color: var(--ink); } }
@media (max-width: 700px) {
  .lp-key { grid-template-columns: 1fr; gap: 0; }
  .lp-key button { padding: 16px 0; }
}

/* ---- splits (black box, safety) ---- */
.lp-h--m { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.038em; }
.lp-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.lp-split--rev { grid-template-columns: 1fr 1fr; }
.lp-split--rev .lp-fig__img { aspect-ratio: 1; }
.lp-split__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #ecebe8; }
.lp-rs { margin: 40px 0 0; display: grid; }
.lp-rs > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.lp-rs dt { font-size: 17px; letter-spacing: -.01em; }
.lp-rs dd { margin: 0; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; color: var(--grey); }
.lp-fig { margin: 0; }
.lp-fig__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #ecebe8; }
.lp-fig figcaption { margin-top: 14px; font-size: 14px; color: var(--grey); }
@media (max-width: 900px) {
  .lp-split, .lp-split--rev { grid-template-columns: 1fr; }
  .lp-split--rev .lp-fig { order: 2; }
  .lp-split--rev .lp-fig__img { aspect-ratio: 4 / 3; }
}

/* ---- 4. quote ---- */
.lp-quote { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: stretch; }
.lp-quote__img { overflow: hidden; border-radius: 4px; background: #ecebe8; min-height: 100%; }
.lp-form { margin-top: 48px; display: grid; gap: 28px; position: relative; }
.lp-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lp-field { display: grid; gap: 8px; font-size: 14px; color: var(--grey); letter-spacing: -.005em; }
.lp-field input, .lp-field select {
  all: unset; box-sizing: border-box; width: 100%; padding: 8px 0 12px; border-bottom: 1px solid #d6d1c9;
  font-family: var(--sans); font-size: 19px; letter-spacing: -.015em; color: var(--ink); transition: border-color .25s ease;
}
.lp-field select { cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238a8984' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }
.lp-field input::placeholder { color: #bdb9b2; }
.lp-field input:focus, .lp-field select:focus { border-color: var(--ink); }
.lp-form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.lp-form__note { font-size: 14px; color: var(--grey); }
.lp-form__ok { display: none; }
.lp-form--sent .lp-form__in { display: none; }
.lp-form--sent .lp-form__ok { display: block; }
.lp-form__ok h3 { margin: 0; font-weight: 400; font-size: 32px; letter-spacing: -.03em; }
.lp-form__ok p { margin: 10px 0 0; font-size: 18px; color: var(--grey); }
.lp-form__in { display: grid; gap: 28px; }
@media (max-width: 900px) { .lp-quote { grid-template-columns: 1fr; } .lp-quote__img { aspect-ratio: 4 / 3; min-height: 0; order: 2; } }
@media (max-width: 560px) { .lp-form__pair { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.lp-foot { padding: 56px var(--g) 40px; border-top: 1px solid var(--line); }
.lp-foot__row { max-width: var(--w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lp .lp-foot__logo { width: 76px; height: auto; }
.lp-foot nav { display: flex; gap: 28px; flex-wrap: wrap; }
.lp-foot a { color: var(--ink); font-size: 16px; letter-spacing: -.01em; transition: color .2s ease; }
.lp-foot a:hover { color: var(--grey); }
.lp-foot__small { max-width: var(--w); margin: 48px auto 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--grey); }

/* ---- reveal on scroll ---- */
.lp .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,0,1); transition-delay: var(--d, 0s); }
.lp .rv.in { opacity: 1; transform: none; }
.no-js .lp .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lp .rv { opacity: 1; transform: none; transition: none; }
  .lp-reach__lit, .lp-reach__ring, .lp-reach__chip, .lp-reach__chip b { transition: none !important; }
  .lp-cta, .lp-cta__arr { transition: none !important; }
}