/* Homepage moving strips: client logos at the bottom of the hero, proof tiles under the Results headline.
   Motion is CSS; /assets/js/strip.js fills the row for wide screens and wires the pause button. */
.hero { padding-bottom: clamp(1rem, 2.5vh, 1.75rem) !important; }

/* Starter Stack: one quiet line under the nav. The button still opens the guide dialog. */
.starter-line { margin-top: 78px; position: relative; z-index: 15; border-bottom: 1px solid oklch(89% 0.012 255 / 0.7); }
.starter-line button { display: block; width: 100%; padding: 0.6rem 0; border: 0; background: none; text-align: center; font: 500 0.9rem/1.4 var(--font); color: var(--ink-2); cursor: pointer; }
.starter-line b { font-weight: 650; color: var(--blue-deep); margin-left: 0.35rem; white-space: nowrap; }
.starter-line button:hover b { text-decoration: underline; text-underline-offset: 3px; }
.starter-line button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Calm hero: texture plus one soft glow, headline first, one button with its reassurance beside it. */
.hero::before, .hero__aurora::before, .hero__aurora::after { display: none; }
.hero__aurora { opacity: 0.4; }
html .hero { padding-top: clamp(2rem, 6vh, 4rem) !important; }
.hero__title { margin-top: 0; }
.hero__actions { gap: 1.25rem; }
.hero__note { font-size: 1rem; font-weight: 500; color: var(--ink-2); }

.strip { position: relative; z-index: 2; }
.hero .strip { margin-top: clamp(2rem, 6vh, 3.5rem); }
.strip__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.hero .strip__head { justify-content: flex-start; gap: 1.5rem; }
.strip__label { margin: 0; font-size: 0.98rem; font-weight: 650; color: var(--ink-2); }
.hero .strip__label { font-size: 0.95rem; font-weight: 600; }
.strip__proof { margin-right: auto; font-size: 0.95rem; font-weight: 700; color: var(--blue-deep); text-decoration: none; }
.strip__proof:hover { text-decoration: underline; text-underline-offset: 3px; }
.strip__toggle {
  flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.strip__toggle:hover { color: var(--blue-deep); border-color: var(--blue); }
.strip__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.strip__toggle svg { width: 0.62rem; height: 0.62rem; fill: currentColor; }
.hero .strip__toggle { border: 0; background: none; color: var(--ink-3); }
.strip__toggle .i-play { display: none; }
.strip.is-paused .strip__toggle .i-play { display: block; }
.strip.is-paused .strip__toggle .i-pause { display: none; }
.strip__toggle--edge { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); z-index: 2; }

.strip__viewport {
  overflow: hidden; padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.strip__track { display: flex; width: max-content; }
.js .strip__track { animation: strip-slide var(--strip-dur, 60s) linear infinite; }
.strip:hover .strip__track, .strip:focus-within .strip__track, .strip.is-paused .strip__track { animation-play-state: paused; }
@keyframes strip-slide { to { transform: translateX(-50%); } }

.strip__group { display: flex; align-items: stretch; gap: 0.85rem; padding: 0 0.85rem 0 0; margin: 0; list-style: none; }
.hero .strip__group { gap: 4.5rem; padding-right: 4.5rem; align-items: center; }

/* Logos: no boxes, one ink tone so blue stays the only accent, each sized by eye so they read as equals. */
.logo { flex: none; height: 2.8rem; display: flex; align-items: center; }
.logo img { display: block; height: auto; max-width: none; opacity: 0.62; }

/* Proof tiles */
.results .section__head { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.strip--proof { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.strip--proof .strip__viewport { padding-block: 0.35rem 0.85rem; }
.tile {
  flex: none; height: 4.1rem; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  box-shadow: 0 1px 2px oklch(23% 0.035 265 / 0.05), 0 6px 16px -8px oklch(23% 0.035 265 / 0.16);
}
.tile--proof { gap: 0.7rem; padding: 0 1.15rem 0 1.05rem; }
.tile--proof b { font-weight: 800; font-size: 1.42rem; letter-spacing: -0.02em; line-height: 1; color: var(--blue-deep); white-space: nowrap; }
.tile--proof span { font-size: 0.84rem; line-height: 1.22; color: var(--ink-2); width: 8.6rem; }

/* No JavaScript or reduced motion: nothing moves, the row scrolls by hand. */
html:not(.js) .strip__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html:not(.js) .strip__toggle { display: none; }
@media (prefers-reduced-motion: reduce) {
  .js .strip__track { animation: none; }
  .strip__toggle { display: none; }
  .strip__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Founder block lives in the booking section */
.closing__copy .hero__founder { margin-top: 1.4rem; }

/* Phones and tablets: strip goes straight under the buttons, above the head graphic */
@media (max-width: 1020px) {
  .hero { display: flex; flex-direction: column; }
  .hero__grid { display: contents; }
  .hero__copy { order: 1; width: min(72.5rem, 100% - clamp(2.5rem, 6vw, 5rem)); margin-inline: auto; }
  .strip { order: 2; width: 100%; }
  .mind { order: 3; }
}

/* Fold fit: on shorter desktop screens spacing tightens so the logos stay on the first screen */
@media (min-width: 1021px) and (max-height: 1000px) {
  html .hero { padding-top: clamp(1.75rem, 5vh, 3rem) !important; }
  .hero__sub { margin-top: 1.1rem; }
  .hero__actions { margin-top: 1.6rem; }
  .mind { min-height: 26rem; }
  .hero .strip { margin-top: clamp(1.75rem, 4.5vh, 2.75rem); }
}
@media (min-width: 1021px) and (max-height: 860px) {
  .mind { min-height: 24rem; }
}

/* Phones */
@media (max-width: 760px) {
  .starter-line__lead { display: none; }
  .starter-line b { margin-left: 0; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}
@media (max-width: 640px) {
  .starter-line { margin-top: 70px; }
  .hero .strip__head { position: relative; display: block; }
  .strip__label { padding-right: 2.5rem; }
  .strip__proof { display: inline-block; margin-top: 0.15rem; }
  .hero .strip__toggle { position: absolute; top: -0.1rem; right: clamp(1.25rem, 3vw, 2.5rem); }
}