/* ==========================================================================
   Ned marketing — "Off Site Draft V4"
   Replicated from Figma node 747:1303 (Ned-Website-Mockups).

   The source design is a single fixed 1425px-wide artboard built entirely from
   absolutely positioned layers, so this stylesheet mirrors that: every section
   holds a 1425px `.canvas` and children sit at their exact Figma coordinates.
   Text layers keep their Figma box height and centre their content vertically,
   which is how Figma positions text. `assets/js/v4.js` scales the whole canvas
   down proportionally below 1425px.
   ========================================================================== */

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

:root {
  --page-w: 1425px;

  /* Raw values as authored in the Figma file. */
  --blue: #48599d;
  --quad-green: #078f0c;
  --quad-red: #eb5656;
  --quad-yellow: #bf9b0a;
  --quad-yellow-btn: #fedd5a;
  --coral: #f48491;
  --ink-1e: #1e1e1e;
  --ink-3e: #3e3e3e;
  --ink-36: #363636;
  --ink-6c: #6c6c6c;
  --frame-grey: #d9d9d9;

  --pill-shadow: 0 8px 16px rgba(28, 27, 23, 0.2), 0 1px 8px rgba(28, 27, 23, 0.2);
  --glass-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);

  --scale: 1;
  --how-extra: 0px;
  --how-ty: 0px;
  --how-pin-start: 0px;
  --how-pin-end: 0px;
  --flow-h: 6183px;
  --faq-extra: 280px;
  --flow-gradient: linear-gradient(
    126.25639749deg,
    #ffecc2 0%,
    #ffeac7 6.6667%,
    #ffe8cc 13.3333%,
    #ffe5d1 20%,
    #ffe3d7 26.6667%,
    #ffe0db 33.3333%,
    #ffdee1 40%,
    #f7e1e6 46.6667%,
    #eee4ec 53.3333%,
    #e5e8f2 60%,
    #ddebf8 66.6667%,
    #d5effc 73.3333%,
    #d5f2f9 80%,
    #d5f4f6 86.6667%,
    #d5f7f3 93.3333%,
    #d5f9f0 100%
  );
}

html {
  /* Keep auto so the how-it-works pin never animates the page to a new
     offset. In-page nav still passes { behavior: "smooth" } in JS. */
  scroll-behavior: auto;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Figma measures Inter at its default optical size. Browsers otherwise track
     `opsz` to the font size, condensing large text and shrinking every run. */
  font-optical-sizing: none;
}

.faculty {
  font-family: "Faculty Glyphic", Georgia, serif;
  font-weight: 400;
}

img {
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 200;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: hsl(21 67% 64%); /* ned-action */
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Scaling shell
   -------------------------------------------------------------------------- */

.stage {
  width: 100%;
  overflow: hidden;
}

.scaler {
  width: var(--page-w);
  margin-inline: auto;
  transform: scale(var(--scale));
  transform-origin: top left;
}

.canvas {
  position: relative;
  width: var(--page-w);
  margin-inline: auto;
}

/* Children are placed with left/top/width/height straight from Figma. */
.layer {
  position: absolute;
}

/* Paint order matches the Figma file (later siblings sit on top). Named
   bands keep that order stable when overflow/filter create stacking contexts.
   1 = decorations that tuck under surfaces
   2 = frosted cards, whiteboard, frame
   3 = type, pills, photos, doodles that sit on top of cards */
.stars-a,
.stars-b,
.beta-doodle-l,
.beta-doodle-r,
.board-pin,
.tape {
  z-index: 1;
}
.glass,
.board,
.board-frame-bar,
.shot-slot {
  z-index: 2;
}
.pill,
.tbox,
.beta-form,
.beta-figures,
.beta-status,
.team-scroll,
.quad,
.quad-circle,
.how-rule,
.how-scene,
.decoder-cta,
.mission-doodle,
.faq-doodle,
.trust-figures-a,
.trust-figures-b,
.logo-marquee,
.hero-title,
.hero-sub,
.hero-actions,
.hero-stem,
.hero-flag,
.hero-fig {
  z-index: 3;
}

.hero-flag-outline {
  z-index: 4;
}
/* Sketchy circle outlines sit on the colored fill; pain/decoder sketches
   sit on their frosted cards. Icons stay above the outlines. */
.brain-sketch,
.pain-doodle,
.pain-arrow {
  z-index: 4;
}
.decoder-doodle {
  z-index: 4;
}
.faq-title,
.faq-list {
  z-index: 5;
}
.icon-magnifier,
.icon-bulb,
.icon-heart,
.icon-clock,
.note-years,
.note-hbdi,
.note-countries,
.note-arrow,
.note-smiley,
.how-doodle {
  z-index: 5;
}

/* A text layer: fixed Figma box, contents centred vertically. Layers holding
   inline markup wrap it in `.t` so the flex container sees a single item and
   doesn't break each span onto its own line. */
.tbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tbox > .t {
  display: block;
}

/* A cropped window onto a sprite sheet. The <img> inside is sized and offset
   in percentages, exactly as the Figma export describes it. */
.crop {
  position: relative;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
/* A placement class owns the position; `.crop` only supplies the clipping box.
   Stated explicitly so this doesn't depend on rule order. */
.layer.crop,
.tape.crop {
  position: absolute;
}
.crop img {
  position: absolute;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav-wrap {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 80;
  width: var(--page-w);
  height: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: top center;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-wrap.is-away {
  opacity: 0;
  visibility: hidden;
}

.nav-wrap.is-away .nav {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-wrap {
    transition: none;
  }
}

.nav {
  position: absolute;
  top: 28px;
  left: 188px;
  display: flex;
  align-items: center;
  width: 1050px;
  height: 75px;
  padding: 0 12px 0 21px;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.4);
  border: 4px solid #fff;
  border-radius: 50px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
}

.nav-logo {
  display: flex;
  gap: 11px;
  align-items: center;
  font-family: "Faculty Glyphic", Georgia, serif;
  font-size: 24px;
  line-height: 22.8px;
  letter-spacing: 0.64px;
  color: #000;
  text-decoration: none;
}
.nav-logo img {
  width: 45px;
  height: 43px;
  object-fit: contain;
}

.nav-links {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 30px;
  align-items: center;
  list-style: none;
  transform: translateX(-50%);
}
.nav-links a {
  font-size: 20px;
  font-weight: 400;
  line-height: 22.8px;
  color: #000;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--ink-1e);
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 212px;
  height: 51px;
  margin-left: auto;
  padding: 0 28px;
  font-size: 20px;
  font-weight: 600;
  line-height: 15.6px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: #000;
  border-radius: 40px;
}
.nav-cta:hover {
  background: var(--ink-1e);
}

#how,
#about,
#waitlist {
  scroll-margin-top: 140px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 49px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.btn-blue {
  color: #fff;
  background: var(--blue);
  filter: drop-shadow(0 1px 1px rgba(217, 111, 60, 0.4)) drop-shadow(0 8px 10px rgba(217, 111, 60, 0.25));
}
.btn-blue:hover {
  background: #3d4c8a;
}

@property --hero-word {
  syntax: "<color>";
  inherits: true;
  initial-value: #48599d;
}

@property --hero-btn {
  syntax: "<color>";
  inherits: true;
  initial-value: #48599d;
}

@property --hero-quad-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

.hero {
  --hero-word: var(--blue);
  --hero-btn: var(--blue);
  --hero-quad-fg: #fff;
  transition: --hero-word 0.45s ease, --hero-btn 0.45s ease, --hero-quad-fg 0.45s ease;
}
.hero[data-hero-quad="green"] {
  --hero-word: var(--quad-green);
  --hero-btn: var(--quad-green);
  --hero-quad-fg: #fff;
}
.hero[data-hero-quad="red"] {
  --hero-word: var(--quad-red);
  --hero-btn: var(--quad-red);
  --hero-quad-fg: #fff;
}
.hero[data-hero-quad="yellow"] {
  --hero-word: var(--quad-yellow);
  --hero-btn: var(--quad-yellow-btn);
  --hero-quad-fg: #1e1e1e; /* ink-1e — black text on #FEDD5A */
}

.hero-actions .btn-blue {
  color: var(--hero-quad-fg);
  background: var(--hero-btn);
}
.hero-actions .btn-blue:hover {
  background: color-mix(in srgb, var(--hero-btn) 82%, #000);
}

.btn-white {
  color: #000;
  background: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.1));
}
.btn-white:hover {
  background: #f6f6f6;
}

.btn-coral {
  color: #fff;
  background: var(--coral);
  filter: drop-shadow(0 1px 1px rgba(217, 111, 60, 0.4)) drop-shadow(0 8px 10px rgba(217, 111, 60, 0.25));
}
.btn-coral:hover {
  background: #ef6d7d;
}

.btn .arrow {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero .canvas {
  height: 927px;
  overflow: hidden;
  background-image: linear-gradient(
    158.1921268568145deg,
    #d6effd 5.4741%,
    #ffdee2 42.362%,
    rgba(243, 175, 152, 0.3) 84.317%,
    rgba(253, 222, 66, 0.25) 112.78%
  );
  background-repeat: no-repeat;
  background-size: 100% 998px;
}

.hero-art {
  left: 0;
  top: 108px;
  width: 1425px;
  height: 819.194px;
  object-fit: cover;
}

.hero-stem {
  left: 907.651px;
  top: 490.664px;
  width: 11.96px;
  height: 77.154px;
}

.hero-flag-outline {
  left: 1292px;
  top: 41px;
  width: 64px;
  height: 78px;
  object-fit: fill;
  pointer-events: none;
}

.hero-flag {
  /* Figma 788:4063 export crop — path already rotated */
  left: 1306.77px;
  top: 72.84px;
  width: 36px;
  height: 21px;
  color: var(--hero-btn);
  overflow: visible;
  pointer-events: none;
}

.hero-title {
  left: 84px;
  top: 193px;
  width: 920px;
  height: 167px;
  font-size: 64px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: 1.28px;
  text-align: center;
  color: #000;
}
.hero-title .t {
  white-space: normal;
}
.hero-title-lead {
  display: inline-block;
  transform: translateX(40px);
}
.hero-title .hero-rotate {
  display: inline-grid;
  justify-items: start;
  color: var(--hero-word);
}
.hero-rotate-sizer,
.hero-rotate-word {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.hero-rotate-sizer {
  visibility: hidden;
  pointer-events: none;
}
.hero-rotate-word {
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.hero-rotate-word.is-out {
  opacity: 0;
  transform: translateY(-0.35em);
}

.hero-sub {
  left: 240px;
  top: 346px;
  width: 637px;
  height: 86px;
  font-size: 24px;
  letter-spacing: 0.48px;
  text-align: center;
  color: #000;
}

.hero-actions {
  left: 319px;
  top: 450px;
  display: flex;
  gap: 28px;
  align-items: center;
}
.hero-actions .btn-white {
  width: 180px;
}

.hero-fig {
  pointer-events: none;
  object-fit: contain;
}
.hero-fig-a { left: 833px; top: 499px; width: 44px; height: 93px; }
.hero-fig-b { left: 760px; top: 564px; width: 27px; height: 55px; }
.hero-fig-c { left: 402px; top: 651px; width: 36px; height: 73px; }
.hero-fig-d { left: 452px; top: 673px; width: 26px; height: 56px; }

/* --------------------------------------------------------------------------
   Trust / logo wall
   -------------------------------------------------------------------------- */

.trust {
  background: #fff;
}
.trust .canvas {
  height: 491px;
}

.trust-figures-a {
  left: 596px;
  top: 78px;
  width: 124px;
  height: 127px;
}
.trust-figures-a img {
  left: 0;
  top: -12.92%;
  width: 290.8%;
  height: 276.97%;
}

.trust-figures-b {
  left: 666px;
  top: 78px;
  width: 129px;
  height: 113px;
}
.trust-figures-b img {
  left: -145.8%;
  top: -24.84%;
  width: 274.25%;
  height: 306.21%;
}

.trust-title {
  left: 265px;
  top: 172px;
  width: 895px;
  height: 106px;
  font-size: 36px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.6px;
  text-align: center;
  color: #000;
}

.trust-sub {
  left: 339.5px;
  top: 259px;
  width: 746px;
  height: 50px;
  font-size: 26px;
  line-height: 48px;
  letter-spacing: -0.6px;
  text-align: center;
  color: var(--ink-6c);
}

.logo-marquee {
  left: 161px;
  top: 329px;
  width: 1098px; /* 1259 - 161, Figma Line 4 → Line 5 */
  height: 102px;
  overflow: hidden;
}
.logo-marquee .marquee-track {
  height: 102px;
  /* Four copies so -50% still leaves a full viewport of logos; duration
     stays matched to the original two-copy speed. */
  animation-duration: 56s;
}
.logo-row {
  display: flex;
  gap: 99px;
  align-items: flex-start;
  padding: 8px 99px 8px 0;
  list-style: none;
  flex: none;
}
.logo-row img {
  height: 44px;
  object-fit: contain;
}
.logo-row li:nth-child(1) img { width: 94.18px; }
.logo-row li:nth-child(2) img { width: 43.08px; }
.logo-row li:nth-child(3) img { width: 78.04px; }
.logo-row li:nth-child(4) img { width: 54.8px; }
.logo-row li:nth-child(5) img { width: 86.46px; }
.logo-row li:nth-child(6) img { width: 80.8px; }

/* --------------------------------------------------------------------------
   Gradient body — Mission through the footer share one 7300px gradient.
   -------------------------------------------------------------------------- */

/* One continuous ramp runs from Mission to the bottom of the footer, at the
   angle taken from the Figma file. The four stops Figma's dev mode reports do
   not reproduce the artwork (its background is a shader, not a plain
   gradient), so these stops are sampled from the design itself. Each section
   lets the gradient fill its own box and carries the slice of the ramp that
   falls across it, which keeps the seam between them exact. */
.flow .canvas {
  height: calc(var(--flow-h) + var(--how-extra) + var(--faq-extra));
  overflow: hidden;
  overflow-anchor: none;
  /* Fallback matches the footer’s first stop so any sliver under the FAQ
     extra does not flash the mint end-stop of the flow ramp. how-extra is
     kept out of background-size so the pin cannot stretch the gradient. */
  background-color: #d5f0fa;
  background-image: var(--flow-gradient);
  background-repeat: no-repeat;
  background-size: 100% calc(var(--flow-h) + var(--faq-extra));
}

/* Frosted cards -- border and blur only, no fill, as in the design. */
.glass {
  border: 5px solid #fff;
  border-radius: 50px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

/* Label pills ------------------------------------------------------------- */

.pill {
  display: flex;
  align-items: center;
  height: 65px;
  background: #fff;
  border-radius: 40px;
  box-shadow: var(--pill-shadow);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.pill-label {
  display: flex;
  align-items: center;
  height: 39px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-3e);
  white-space: nowrap;
}

/* How-it-works glasses overhang the pill. Other section doodles are sized to Figma. */
.pill-icon {
  flex: none;
  width: 65.61px;
  height: 65.61px;
  object-fit: contain;
  transform: rotate(-0.43deg);
}
.mission-pill .pill-icon {
  width: 42px;
  height: 44px;
  transform: none;
}
.pain-pill .pill-icon {
  width: 43px;
  height: 45px;
  transform: none;
}
.decoder-pill .pill-icon {
  width: 36px;
  height: 36px;
  transform: none;
}
.faq-pill .pill-icon {
  width: 34px;
  height: 51px;
  transform: none;
}

/* Mission ----------------------------------------------------------------- */

.card-mission {
  left: 76px;
  top: 81px;
  width: 899px;
  height: 439px;
}

.mission-pill {
  left: 140px;
  top: 127px;
  width: 222px;
  height: 52px;
  gap: 9px;
  padding-left: 18px;
}

.mission-title {
  left: 140px;
  top: 197px;
  width: 779px;
  height: 184px;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.72px;
  color: #000;
}
.mission-title b,
.pain-title b {
  font-weight: 700;
}

/* Copy sits quiet until the card scrolls into view. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.mission-body.reveal,
.pain-body.reveal {
  transition-delay: 0.16s;
}
@media (scripting: none) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

.mission-body {
  left: 140px;
  top: 350px;
  width: 744px;
  height: 117px;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  color: var(--ink-1e);
}

.mission-doodle {
  left: 998px;
  top: 271px;
  width: 417px;
  height: 184px;
  object-fit: cover;
}

/* Pain point -------------------------------------------------------------- */

.card-pain {
  left: 434px;
  top: 455px;
  width: 900px;
  height: 433px;
}

.pain-pill {
  left: 496px;
  top: 503px;
  width: 246px;
  height: 52px;
  gap: 8px;
  padding-left: 18px;
}

/* Dart/arrow icon sits on top of the white pill, not inside it. */
.pain-arrow {
  left: 583.5px;
  top: 541px;
  width: 59px;
  height: 50.52px;
  background-color: #26221c;
  -webkit-mask-image: url("../v4/painpoint-mask-fill.png");
  mask-image: url("../v4/painpoint-mask-fill.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

.pain-title {
  left: 496px;
  top: 564px;
  width: 779px;
  height: 184px;
  font-size: 36px;
  line-height: normal;
  color: var(--ink-1e);
}

.pain-body {
  left: 496px;
  top: 717px;
  width: 779px;
  height: 117px;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  color: var(--ink-1e);
}

.pain-doodle {
  left: 117px;
  top: 498px;
  width: 362px;
  height: 570px;
  object-fit: cover;
}

/* How it works ------------------------------------------------------------ */

.how-pill {
  left: 90px;
  top: 1215px;
  width: 254px;
  height: 51px;
  gap: 16px;
  padding-left: 19px;
  padding-right: 17px;
  overflow: visible;
}
.how-pill .pill-icon {
  width: 52px;
  height: 52px;
  transform: none;
}

.how-title {
  left: 105px;
  top: 1309px;
  width: 1226px;
  height: 80px;
  font-size: 32px;
  color: #000;
}

.how-rule {
  display: flex;
  align-items: center;
  left: 85.46px;
  top: 1415.5px;
  width: 1273.1px;
  height: 47px;
  overflow: visible;
  pointer-events: auto;
}

.how-rule-track {
  position: absolute;
  left: 23.5px;
  top: 50%;
  width: 1226px;
  height: 15px;
  margin-top: -7.5px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.how-rule-fill {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  transform: scaleX(var(--how-fill, 0));
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .how-rule-fill {
    transition: none;
  }
}

.how-dots {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1226px;
  height: 47px;
  margin-left: 23.5px;
  pointer-events: auto;
}

.how-dot {
  position: relative;
  flex: none;
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  appearance: none;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
  /* The fill used to flip instantly; ease it so the dots read as one
     advancing track rather than seven independent switches. */
  transition:
    background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.how-dot[aria-current="true"] {
  transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .how-dot {
    transition: none;
  }
  .how-dot[aria-current="true"] {
    transform: none;
  }
}
.how-dot::before {
  content: "";
  position: absolute;
  inset: -16px;
}
.how-dot.is-filled {
  background: #000;
}
.how-dot[aria-current="true"] {
  z-index: 2;
}
.how-dot[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: #000;
  opacity: 0.28;
  pointer-events: none;
  z-index: -1;
  animation: how-dot-glow 2.2s ease-in-out infinite;
}
.how-dot:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

@keyframes how-dot-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.16);
    opacity: 0.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-dot[aria-current="true"]::after {
    animation: none;
    opacity: 0.24;
  }
}

@keyframes how-pin-lock {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--how-extra), 0); }
}

/* Pin must track the root scroller (`scroll(root)`), not `scroll()` —
   `.stage { overflow: hidden }` would otherwise become the nearest
   timeline and the lock would never move. Gated by JS so we never run
   the animation and a JS transform at the same time. */
html.has-how-pin-css .how-pin {
  animation: how-pin-lock linear both;
  animation-timeline: scroll(root);
  animation-range: var(--how-pin-start) var(--how-pin-end);
}

/* One transform for the board AND everything under it, so the pin cannot
   let the two layers drift. During the card sequence only slide copy and
   the progress dots change. */
.how-pin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: var(--page-w);
  height: calc(var(--flow-h) + var(--faq-extra));
  overflow: visible;
  transform: translate3d(0, var(--how-ty), 0);
}

/* Same ramp as the flow canvas, pinned with the cards so the background
   does not keep walking the gradient while the seven slides play. Clipped
   below the pain doodle so Mission / Pain stay on the canvas paint. */
.how-pin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: calc(var(--flow-h) + var(--faq-extra));
  pointer-events: none;
  background-image: var(--flow-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: inset(1100px 0 0 0);
}

.how-scene {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: var(--page-w);
  height: 2240px;
  pointer-events: none;
}

.how-after {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--page-w);
  height: calc(var(--flow-h) + var(--faq-extra));
  overflow: visible;
}

.how-slides {
  position: absolute;
  inset: 0;
  /* Opacity on each slide makes a stacking context, so without a z-index
     here the whiteboard (z-index 2) paints over the card copy. */
  z-index: 6;
}

/* Cards crossfade rather than cut. The outgoing card clears faster than the
   incoming one arrives, so the two sets of copy never sit legibly on top of
   each other mid-swap. visibility is delayed to the end of the fade out so the
   card stays painted while it leaves. */
.how-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 190ms cubic-bezier(0.4, 0, 1, 1),
    transform 190ms cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 190ms;
}

.how-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 110ms,
    transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1) 110ms,
    visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .how-slide,
  .how-slide.is-active {
    transform: none;
    transition: none;
  }
}

.how-slide .board-title b {
  font-weight: 700;
}

.board-eyebrow-wide {
  width: 313px;
}

/* Meetings + Trust titles: Inter Medium 32 / leading-normal, 52.4px box. */
.how-slide[data-how-slide="1"] .board-title,
.how-slide[data-how-slide="2"] .board-title {
  top: 1575.46px;
  width: 629.874px;
  height: 52.4px;
  line-height: normal;
}

.how-slide[data-how-slide="1"] .board-intro {
  top: 1617px;
  width: 627.536px;
  height: 87.022px;
}

.how-slide[data-how-slide="2"] .board-intro {
  top: 1610px;
  width: 627.536px;
  height: 87.022px;
}

/* Feedback / Conflict / Problem Solving: 32px / 40px leading in a 52.17px box. */
.how-slide[data-how-slide="3"] .board-title,
.how-slide[data-how-slide="4"] .board-title,
.how-slide[data-how-slide="5"] .board-title {
  top: 1589.85px;
  width: 636.301px;
  height: 52.172px;
  line-height: 40px;
}

.how-slide[data-how-slide="3"] .board-title .t,
.how-slide[data-how-slide="4"] .board-title .t,
.how-slide[data-how-slide="5"] .board-title .t {
  line-height: 40px;
}

.how-slide[data-how-slide="3"] .board-intro,
.how-slide[data-how-slide="4"] .board-intro,
.how-slide[data-how-slide="6"] .board-intro {
  top: 1652px;
  width: 627.536px;
  height: 70.162px;
}

.how-slide[data-how-slide="5"] .board-intro {
  top: 1654px;
  width: 627.536px;
  height: 70.162px;
}

.how-slide[data-how-slide="5"] .board-eyebrow {
  width: 313px;
  height: 36px;
}

.how-slide[data-how-slide="6"] .board-eyebrow {
  width: 357px;
  height: 36px;
}

.how-slide[data-how-slide="6"] .board-title {
  top: 1588px;
  width: 632px;
  height: 54px;
  line-height: normal;
}

.how-slide[data-how-slide="6"] .board-title .t {
  line-height: normal;
}

@media (prefers-reduced-motion: reduce) {
  .how-slide {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Framework whiteboard
   -------------------------------------------------------------------------- */

.board-frame-bar {
  background: var(--frame-grey);
}
.bar-top { left: 195.94px; top: 1494.58px; width: 1033.906px; height: 11.188px; }
.bar-bottom { left: 195.94px; top: 2214.55px; width: 1033.906px; height: 11.188px; }
.bar-left { left: 185.07px; top: 1505.72px; width: 10.851px; height: 708.832px; }
.bar-right { left: 1229.64px; top: 1505.72px; width: 10.851px; height: 708.832px; }

.board-pin {
  width: 18.601px;
  height: 19.179px;
}
.pin-tl { left: 185.07px; top: 1494.58px; }
.pin-tr { left: 1222.12px; top: 1494.58px; }
.pin-bl { left: 185.07px; top: 2206.63px; }
.pin-br { left: 1222.5px; top: 2206.82px; }

/* Reproduces the Figma "Whiteboard" shader fill: white surface with a 40px
   dot grid of rgb(178,191,209) at 0.06 alpha and 1.5px dots. */
.board {
  left: 195.53px;
  top: 1505.29px;
  width: 1034.212px;
  height: 709.719px;
  background-color: #fff;
  background-image: radial-gradient(circle at center, rgba(178, 191, 209, 0.06) 1.5px, transparent 1.5px);
  background-size: 40px 40px;
  background-position: 20px 20px;
}

.board-eyebrow {
  left: 236.72px;
  top: 1532.28px;
  width: 247.042px;
  height: 35.558px;
  font-size: 24px;
  color: #000;
  white-space: nowrap;
}
.board-eyebrow.board-eyebrow-wide {
  width: 313px;
}

.board-title {
  left: 237px;
  top: 1575px;
  width: 632px;
  height: 53px;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
  color: #000;
}

.board-intro {
  left: 237px;
  top: 1620px;
  width: 639px;
  height: 87px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.board-intro b {
  font-weight: 500;
}

.quad-circle {
  left: 492.65px;
  top: 1753.56px;
  width: 350.58px;
  height: 359.807px;
}

.brain-sketch {
  left: 466.95px;
  top: 1707.87px;
  width: 402.308px;
  height: 441.105px;
  object-fit: cover;
  /* Figma’s outline strokes are effectively “ink” on top of the colored
     quadrants; ensure they read dark on the whiteboard. */
  filter: brightness(0);
}

/* Each quadrant is a stacked column. Same Inter as the rest of the board:
   20px Medium headings, 16px Regular traits. Long left labels wrap in the
   gutter instead of being squashed or painted over the circle. */
.quad {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.quad h3,
.quad ul {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  z-index: auto;
}

.quad h3 {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #000;
}

.quad ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding-left: 5px;
  font-size: 16px;
  line-height: 20px;
  list-style: none;
}

.quad ul li {
  line-height: 20px;
  white-space: nowrap;
}

.quad-a { left: 275.29px; top: 1753.56px; }
.quad-b { left: 275.29px; top: 1941.56px; }
.quad-c { left: 923.86px; top: 1753.56px; }
.quad-d { left: 923.86px; top: 1941.56px; }

/* Sketch ink starts at 466.95px. Wrap left headings before that edge. */
.quad-a,
.quad-b {
  width: max-content;
  max-width: 220px;
}

.quad-a h3,
.quad-b h3 {
  max-width: 183.66px;
  white-space: normal;
}

.quad-c,
.quad-d {
  width: max-content;
  max-width: 300px;
}

.quad-c h3,
.quad-d h3 {
  white-space: nowrap;
}

/* Conflict — Figma insets the left column ~25px. */
.how-slide[data-how-slide="4"] .quad-a,
.how-slide[data-how-slide="4"] .quad-b {
  left: 250.75px;
}

.how-slide[data-how-slide="4"] .quad-a h3,
.how-slide[data-how-slide="4"] .quad-b h3 {
  max-width: 208.2px;
}

/* Hand-drawn quadrant icons, cropped from one sprite sheet. */
.icon-magnifier { left: 373.49px; top: 1778.63px; width: 129.485px; height: 120.736px; }
.icon-magnifier img { left: 0; top: -0.1%; width: 210.14%; height: 199.47%; }
.icon-bulb { left: 806.51px; top: 1754.35px; width: 121.61px; height: 120.736px; }
.icon-bulb img { left: -123.74%; top: -0.1%; width: 223.74%; height: 199.47%; }
.icon-heart { left: 815.3px; top: 1994.36px; width: 117.356px; height: 97.014px; }
.icon-heart img { left: -107.33%; top: -112.21%; width: 207.33%; height: 221.99%; }
.icon-clock { left: 380.55px; top: 1975.59px; width: 122.485px; height: 115.486px; }
.icon-clock img { left: 0; top: -108.44%; width: 222.14%; height: 208.54%; }

/* Handwritten stats and arrow, cropped from one sprite sheet. */
.note-years { left: 948.99px; top: 1527.27px; width: 266.698px; height: 59.669px; }
.note-years img { left: -34.24%; top: -13.26%; width: 147.59%; height: 461.88%; }
.note-hbdi { left: 927.1px; top: 1567.14px; width: 288.724px; height: 57.81px; }
.note-hbdi img { left: -23.76%; top: -122.03%; width: 135.07%; height: 472.32%; }
.note-countries { left: 1034.77px; top: 1609.15px; width: 180.357px; height: 51.579px; }
.note-countries img { left: -51.96%; top: -239.87%; width: 223.18%; height: 546.41%; }
.note-arrow { left: 841.91px; top: 1619.67px; width: 203.936px; height: 141.152px; }
.note-arrow img { left: -80.57%; top: -163.72%; width: 260.7%; height: 263.72%; }
.note-smiley { left: 1124.22px; top: 2129.07px; width: 54.242px; height: 63.503px; }
.note-smiley img { left: -756.91%; top: -480.56%; width: 970.73%; height: 580.56%; }

/* New How it works card doodles — Figma crops, black ink on the whiteboard. */
.note-meet-1 { left: 912.996px; top: 1579.576px; width: 295.763px; height: 53.747px; }
.note-meet-1 img { left: 0; top: -242.86%; width: 140.67%; height: 531.43%; }
.note-meet-2 { left: 1031px; top: 1617.834px; width: 207.292px; height: 58.963px; }
.note-meet-2 img { left: -93.83%; top: -301.31%; width: 193.83%; height: 466.67%; }
.icon-meet-r { left: 429px; top: 1762px; width: 64px; height: 72px; }
.icon-meet-r img { left: 0; top: 0; width: 446.71%; height: 457.56%; }
.icon-meet-e { left: 426px; top: 1954px; width: 58px; height: 86px; }
.icon-meet-e img { left: -104.96%; top: -219.1%; width: 564.46%; height: 444.38%; }
.icon-meet-a { left: 843px; top: 1773px; width: 70px; height: 77px; }
.icon-meet-a img { left: 0; top: -178.4%; width: 182.47%; height: 369.95%; }
.icon-meet-t { left: 842px; top: 1966.403px; width: 80.473px; height: 86.12px; }
.icon-meet-t img { left: -71.04%; top: -86%; width: 193.44%; height: 394%; }
.note-trust-1 { left: 1103px; top: 1621.266px; width: 100.339px; height: 42.192px; }
.note-trust-1 img { left: 0; top: 0; width: 412.65%; height: 359.44%; }
.note-trust-2 { left: 928px; top: 1572px; width: 283.015px; height: 58.124px; }
.note-trust-2 img { left: -46.3%; top: 0; width: 146.3%; height: 260.91%; }
.note-feedback-1 { left: 1007.736px; top: 1531px; width: 186.692px; height: 43.91px; }
.note-feedback-1 img { left: 0; top: -128.57%; width: 224.48%; height: 349.66%; }
.note-feedback-2 { left: 987px; top: 1575.103px; width: 204.363px; height: 40.873px; }
.note-feedback-2 img { left: -99.01%; top: -148.94%; width: 199.01%; height: 364.54%; }
.note-feedback-3 { left: 1036.594px; top: 1610.817px; width: 160.405px; height: 50.183px; }
.note-feedback-3 img { left: -11.92%; top: -205.95%; width: 261.27%; height: 305.95%; }
.note-conflict { left: 967px; top: 1527px; width: 223px; height: 112px; }
.note-conflict img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.note-problem { left: 933px; top: 1558px; width: 281px; height: 84px; }
.note-problem img { left: 0; top: 0; width: 100%; height: 206.86%; }
.note-comms { left: 932px; top: 1550px; width: 245px; height: 80px; }
.note-comms img { left: 0; top: -88.46%; width: 100%; height: 188.46%; }

/* Tape strips around the board edge, all from one sprite sheet. Rotated ones
   wrap the crop and spin it, matching how Figma turns a tall crop sideways.
   Sit on the grey frame (not under it); invert+multiply turns the white
   sprite strokes into the dark ink lines from the mockup. */
.tape {
  position: absolute;
  pointer-events: none;
}
.how-scene .tape {
  z-index: 3;
  filter: invert(1);
  mix-blend-mode: multiply;
}
.tape-rot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tape-rot > * {
  flex: none;
  transform: rotate(-90deg);
}
.tape-rot.flip > * {
  transform: rotate(-90deg) scaleY(-1);
}

.tp1 { left: 801.34px; top: 2208.99px; width: 399.44px; height: 21.437px; }
.tp1 .crop { width: 21.437px; height: 399.44px; }
.tp1 img { left: -366.67%; top: -88.73%; width: 656.67%; height: 188.73%; }

.tp2 { left: 299.06px; top: 2209.33px; width: 78.515px; height: 21.087px; }
.tp2 .crop { width: 21.087px; height: 78.515px; }
.tp2 img { left: -31.91%; top: -125.14%; width: 419.15%; height: 602.86%; }

.tp3 { left: 781.36px; top: 2211.52px; width: 44.728px; height: 18.943px; }
.tp3 .crop { width: 18.943px; height: 44.728px; }
.tp3 img { left: -191.67%; top: -512.94%; width: 547.22%; height: 1241.18%; }

.tp4 { left: 359.47px; top: 2207.2px; width: 90.308px; height: 25.802px; }
.tp4 .crop { width: 25.802px; height: 90.308px; }
.tp4 img { left: -56.52%; top: -530.43%; width: 428.26%; height: 655.28%; }

.tp5 { left: 446.97px; top: 1490px; width: 226.008px; height: 21.236px; }
.tp5 .crop { width: 21.236px; height: 226.008px; }
.tp5 img { left: -233.33%; top: -9.84%; width: 469.05%; height: 236.02%; }

.tp6 { left: 290.9px; top: 1493.63px; width: 152.902px; height: 14.367px; }
.tp6 .crop { width: 14.367px; height: 152.902px; }
.tp6 img { left: -233.33%; top: -9.84%; width: 469.05%; height: 236.02%; }

.tp14 { left: 1145.66px; top: 1493.07px; width: 63.046px; height: 13.361px; }
.tp14 .crop { width: 13.361px; height: 63.046px; }
.tp14 img { left: -234.38%; top: -351.66%; width: 615.63%; height: 698.68%; }

/* Unrotated strips sit directly against the left and right frame rails. */
.tp7 { left: 1221.77px; top: 1553.63px; width: 25.147px; height: 100.095px; }
.tp7 img { left: -113.73%; top: -17.24%; width: 386.27%; height: 519.7%; }

.tp8 { left: 178.45px; top: 1886.87px; width: 22.879px; height: 91.068px; }
.tp8 img { left: -113.73%; top: -17.24%; width: 386.27%; height: 519.7%; }

.tp9 { left: 178.45px; top: 1969.07px; width: 22.869px; height: 77.755px; }
.tp9 img { left: -58%; top: -404.12%; width: 394%; height: 620.59%; }

.tp10 { left: 178px; top: 1571.26px; width: 23.678px; height: 98.093px; }
.tp10 img { left: -65.31%; top: -241.87%; width: 402.04%; height: 519.7%; }

.tp11 { left: 1224.97px; top: 2037.6px; width: 20.479px; height: 56.617px; }
.tp11 img { left: -47.06%; top: -37.59%; width: 386.27%; height: 748.23%; }

.tp12 { left: 1223.1px; top: 1649.24px; width: 24.638px; height: 62.349px; }
.tp12 img { left: -126.53%; top: -710.48%; width: 402.04%; height: 850.81%; }

.tp13 { left: 1223.36px; top: 2084.97px; width: 23.594px; height: 85.841px; }
.tp13 img { left: -148.94%; top: -405.85%; width: 419.15%; height: 616.96%; }

.tp15 { left: 183.3px; top: 1663.82px; width: 14.166px; height: 77.913px; }
.tp15 img { left: -185.29%; top: -128.88%; width: 579.41%; height: 564.17%; }

.board-disclaimer {
  left: 346.28px;
  top: 2128.66px;
  width: 642.439px;
  height: 64.765px;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: #000;
  word-break: break-word;
}

.board-disclaimer-cite {
  left: 336.64px;
  width: 661.718px;
  font-size: 12px;
}

.how-slide[data-how-slide="1"] .board-disclaimer-cite {
  font-size: 14px;
}

.how-slide[data-how-slide="5"] .board-disclaimer-cite {
  left: 326.12px;
  width: 683.629px;
}

.how-slide[data-how-slide="6"] .board-disclaimer-cite {
  left: 308.59px;
  width: 718.687px;
}

.board-disclaimer i {
  font-style: italic;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Private beta + newsletter
   -------------------------------------------------------------------------- */

.beta-doodle-r {
  left: 961px;
  top: 2261px;
  width: 692px;
  height: 547px;
  object-fit: cover;
}
.beta-doodle-l {
  left: -210px;
  top: 2367px;
  width: 768px;
  height: 459px;
  object-fit: cover;
}

/* Product screenshots sit at their Figma boxes around the beta copy.
   Each photo keeps its own frame size in the ring. The top-center slot
   enlarges whichever image is there; everywhere else it stays original. */
.shot-slot {
  display: flex;
  overflow: visible;
  pointer-events: none;
}
.shot-slot-1 {
  z-index: 3;
}
.shot-slot-1 {
  left: 386px;
  top: 2385px;
  width: 653px;
  height: 332px;
  align-items: flex-end;
  justify-content: center;
}
.shot-slot-2 {
  left: 981.5px;
  top: 2793.5px;
  width: 288px;
  height: 152px;
  align-items: center;
  justify-content: flex-start;
}
.shot-slot-3 {
  left: 191px;
  top: 2793.5px;
  width: 288px;
  height: 152px;
  align-items: center;
  justify-content: flex-end;
}
.shot-slot-4 {
  left: 57.5px;
  top: 3021px;
  width: 288px;
  height: 152px;
  align-items: center;
  justify-content: flex-end;
}
.shot-slot-5 {
  left: 1100.5px;
  top: 3038.5px;
  width: 288px;
  height: 152px;
  align-items: center;
  justify-content: flex-start;
}
.shot-slot-6 {
  left: 150.5px;
  top: 3268px;
  width: 288px;
  height: 152px;
  align-items: flex-start;
  justify-content: flex-end;
}
.shot-slot-7 {
  left: 1001px;
  top: 3289px;
  width: 288px;
  height: 152px;
  align-items: flex-start;
  justify-content: flex-start;
}
.shot-slot-8 {
  left: 562px;
  top: 3368px;
  width: 288px;
  height: 152px;
  align-items: flex-start;
  justify-content: center;
}

.shot {
  flex: none;
  background: #fff;
  border: 8px solid #fff;
  /* Was a 4px radius with a hard 1px dark ring, which read as a crude cutout
     against the 40-50px soft radii used everywhere else on the page. */
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(28, 27, 23, 0.05),
    0 10px 28px rgba(28, 27, 23, 0.13);
  transition: width 0.4s ease, height 0.4s ease;
}
.shot img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  /* contain, not cover: the frames are now one size but the screenshots range
     from 1.32 to 3.08 in aspect, so cover would crop the wide ones hard. Every
     screenshot has a near-white edge (~#fdfcfc), so the letterboxing against
     the white frame is invisible. */
  object-fit: contain;
  transition: opacity 0.28s ease;
}

/* The seven scattered frames share one size so the arrangement reads as
   deliberate rather than as eight random rectangles (they ranged from
   318x162 down to 268x87). */
.shot-1,
.shot-2,
.shot-3,
.shot-4,
.shot-5,
.shot-6,
.shot-7,
.shot-8 {
  width: 288px;
  height: 152px;
}

/* The top-centre slot is the hero and stays deliberately larger — whichever
   screenshot is currently in it gets the big frame. */
.shot-slot-1 .shot {
  width: 653px;
  height: 332px;
}
.shot img.is-out {
  opacity: 0;
}

.beta-figures {
  left: 683px;
  top: 2913px;
  width: 59px;
  height: 71px;
  object-fit: contain;
}

.beta-title {
  left: 402px;
  top: 2960px;
  width: 673px;
  height: 203px;
  font-size: 64px;
  font-weight: 400;
  line-height: 60px;
  text-align: center;
  color: #000;
}

.beta-sub {
  left: 414px;
  top: 3140px;
  width: 650px;
  height: 46px;
  font-size: 24px;
  text-align: center;
  color: var(--ink-36);
}

.beta-form {
  left: 540px;
  top: 3196px;
  display: flex;
  gap: 20.5px;
  align-items: center;
}
.beta-form input {
  width: 240.5px;
  height: 49px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-36);
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.1);
}
.beta-form input::placeholder {
  color: var(--ink-36);
  opacity: 1;
}
.beta-form .btn {
  height: 47px;
}

.beta-note {
  left: 506px;
  top: 3279px;
  width: 465px;
  height: 48px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-36);
}
.beta-note a {
  color: var(--ink-36);
}

.beta-status {
  left: 506px;
  top: 3337px;
  width: 465px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: var(--ink-1e);
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.stars-a { left: 26px; top: 3572px; width: 303px; height: 269px; }
.stars-a img { left: 0; top: 0; width: 100%; height: 241.23%; }
.stars-b { left: 1139px; top: 3607px; width: 292px; height: 288px; }
.stars-b img { left: 0; top: -117.45%; width: 100%; height: 217.45%; }

/* Figma boxes this at 410/592, which is 6px left of the artboard center.
   Full-bleed centering keeps the heading optically between the two star
   clusters and above the scrolling portrait row. */
.team-title {
  left: 0;
  top: 3714px;
  width: 1425px;
  height: 74px;
  font-size: 40px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000;
}

/* The Figma row is 2549px wide inside a 1425px frame; we autoscroll it. */
.team-scroll {
  left: 0;
  top: 3841px;
  width: 1425px;
  overflow: hidden;
}
.team-scroll .marquee-track {
  animation-duration: 48s;
}
.team-row {
  display: flex;
  gap: 62px;
  align-items: flex-start;
  padding: 0 62px 24px 0;
  list-style: none;
  flex: none;
}
.team-card {
  width: 312px;
  text-align: center;
}
.team-card img {
  width: 312px;
  height: 401px;
  border-radius: 50px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}
.team-card img.mirrored {
  transform: scaleX(-1);
}
/* Names stay on one line in a 347px box centered on the 312px card, matching
   the wider Figma frames for Cosmin and Gretchen. Roles wrap at 289px. */
.team-card h3 {
  width: 347px;
  margin: 20px 0 0;
  margin-left: 50%;
  transform: translateX(-50%);
  font-family: "Faculty Glyphic", Georgia, serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 64px;
  white-space: nowrap;
  color: #000;
}
/* Figma wraps roles in a 289px box, narrower than the 312px card. */
.team-card p {
  width: 289px;
  margin: 0 auto;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: #000;
}

/* --------------------------------------------------------------------------
   Meeting Decoder
   -------------------------------------------------------------------------- */

.card-decoder {
  left: 108px;
  top: 4501px;
  width: 1210px;
  height: 596px;
}

.decoder-pill {
  left: 169px;
  top: 4564px;
  width: 342px;
  height: 52px;
  gap: 10px;
  padding-left: 16px;
  overflow: hidden;
}

.decoder-title {
  left: 172px;
  top: 4668px;
  width: 987px;
  height: 184px;
  font-size: 40px;
  line-height: normal;
  color: #000;
}

.decoder-cta {
  left: 172px;
  top: 4867px;
  gap: 38px;
  width: 329px;
  height: 65px;
  font-size: 22px;
  box-shadow: 0 1px 8px rgba(28, 27, 23, 0.2);
  filter: none;
}
.decoder-cta .arrow {
  font-size: 15.5px;
}

.decoder-note {
  left: 172px;
  top: 4958px;
  width: 756px;
  height: 35px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.352px;
  color: var(--ink-1e);
}

/* Sun-and-clouds doodle, rotated -90deg inside its box as in Figma.
   Sit on the decoder card so it doesn't cover the FAQ heading. */
.decoder-doodle {
  left: 656px;
  top: 4791px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 657px;
  height: 301px;
  pointer-events: none;
}
.decoder-doodle > * {
  flex: none;
  transform: rotate(-90deg);
}
.decoder-doodle .crop {
  width: 301px;
  height: 657px;
}
.decoder-doodle .crop img {
  left: -25.28%;
  top: 0;
  width: 125.32%;
  height: 100.76%;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-pill {
  left: 87px;
  top: 5249px;
  width: 148px;
  height: 52px;
  gap: 7px;
  padding-left: 19px;
  overflow: visible;
}

.faq-doodle {
  left: 842px;
  top: 5231px;
  width: 441.408px;
  height: 194.93px;
  object-fit: cover;
  transform: rotate(0.12deg);
}

.faq-title {
  left: 106px;
  top: 5328px;
  width: 779px;
  height: 72px;
  font-size: 40px;
  color: #000;
}
.faq-title b {
  font-weight: 600;
}

.faq-list {
  left: 135px;
  top: 5426px;
  width: 1169px;
  list-style: none;
}
.faq-list li + li {
  margin-top: 29px;
}
.faq-list details {
  background: #fff;
  border: 6px solid #fff;
  border-radius: 40px;
}
.faq-list summary {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  padding: 0 40px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-3e);
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:hover {
  color: #000;
}
/* Figma leaves the FAQ rows as empty pills, so the disclosure affordance is
   ours: a stroked chevron sized to sit alongside the 22px question text. */
.faq-list .chev {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--ink-6c);
  transition: transform 0.2s;
}
.faq-list details[open] .chev {
  transform: rotate(180deg);
}
.faq-list details > p {
  padding: 0 40px 28px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-1e);
}
.faq-list details > p a {
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer .canvas {
  height: 741px;
  overflow: hidden;
  background-image: linear-gradient(
    126.25639749deg,
    #d5f0fa 0%,
    #d5f1f9 6.6667%,
    #d5f2f8 13.3333%,
    #d5f3f7 20%,
    #d5f4f6 26.6667%,
    #d5f5f5 33.3333%,
    #d5f5f4 40%,
    #d5f6f3 46.6667%,
    #d5f7f2 53.3333%,
    #d5f8f1 60%,
    #d5f9f1 66.6667%,
    #d5f9f0 73.3333%,
    #d5faef 80%,
    #d5faee 86.6667%,
    #d5fbed 93.3333%,
    #d5fbec 100%
  );
}

.footer-art {
  left: -9px;
  top: 25px;
  width: 1434px;
  height: 716px;
  object-fit: cover;
}

.footer-brand {
  left: 11px;
  top: 265px;
  width: 168px;
  height: 85px;
  font-size: 64px;
  line-height: 70px;
  text-align: center;
  color: #000;
}

.footer-copy {
  left: -8px;
  top: 350px;
  width: 189px;
  height: 34px;
  font-size: 24px;
  line-height: 70px;
  text-align: center;
  color: #000;
}

/* Footer links follow the mountain ridges, each on its own angle. */
.footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Faculty Glyphic", Georgia, serif;
  font-size: 40px;
  line-height: 70px;
  color: #000;
  text-decoration: none;
}
.footer-link:hover {
  text-decoration: underline;
}
.footer-link > span {
  flex: none;
  text-align: center;
}

.link-privacy { left: 434px; top: 153px; width: 296.057px; height: 271.431px; }
.link-privacy > span { width: 346px; transform: rotate(-41.56deg); }
.link-terms { left: 858.996px; top: 180.996px; width: 348.689px; height: 168.804px; }
.link-terms > span { width: 346px; transform: rotate(18.19deg); }
.link-contact { left: 1045.996px; top: 0; width: 369.809px; height: 248.523px; }
.link-contact > span { width: 379px; transform: rotate(-28.5deg); }

/* --------------------------------------------------------------------------
   Focus + motion
   -------------------------------------------------------------------------- */

@keyframes marquee-x {
  to {
    transform: translateX(-50%);
  }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-x 40s linear infinite;
}
.logo-marquee:hover .marquee-track,
.logo-marquee:focus-within .marquee-track,
.team-scroll:hover .marquee-track,
.team-scroll:focus-within .marquee-track {
  animation-play-state: paused;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
.team-scroll:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }
  .marquee-track {
    animation: none;
  }
  .shot,
  .shot img {
    transition: none;
  }
  .team-scroll {
    overflow-x: auto;
  }
  .hero-rotate-word {
    transition: none;
  }
  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}