/* SyncIt — home page: base styles carried over from v1.
   Desktop (>=1024px): each <section class="slide"> is a 16:9 canvas laid out on the
   deck's 1920×1080 grid in "u" units (see site.css), positions measured from the deck.
   Below 1024px: slides become normal flowing sections.                              */

.slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-size: calc(30 * var(--u));
}
.slide > * { position: absolute; }
.dark  { background: var(--ink);    color: var(--cream); }
.light { background: var(--cream);  color: var(--ink); }
.hot   { background: var(--orange); color: var(--ink); }
.hero  { background: var(--hero-veil), var(--ink) var(--hero-art) center / cover no-repeat; color: var(--cream); }

/* ---------- Shared slide type ---------- */
.eyebrow {
  left: calc(128 * var(--u)); top: calc(128.75 * var(--u));
  font-weight: 700; font-size: calc(28 * var(--u)); line-height: normal;
  letter-spacing: .145em; text-transform: uppercase;
  color: var(--orange);
}
.light .eyebrow { color: var(--rust); }
.hot .eyebrow   { color: var(--ink); }

.h {
  left: calc(128 * var(--u));
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
}
.h96 { font-size: calc(96 * var(--u)); line-height: calc(101 * var(--u)); top: calc(197.5 * var(--u)); }
.h88 { font-size: calc(88 * var(--u)); line-height: calc(93 * var(--u));  top: calc(198.5 * var(--u)); }
.h80 { font-size: calc(80 * var(--u)); line-height: calc(84 * var(--u));  top: calc(198.6 * var(--u)); }
.dark .hl  { color: var(--orange); }
.light .hl { color: var(--rust); }

.foot {
  left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(982.75 * var(--u));
  display: flex; justify-content: space-between; gap: 2em;
  font-weight: 400; font-size: calc(24 * var(--u)); line-height: normal;
  color: var(--dim);
}
.light .foot { color: var(--foot); }
.hot .foot   { color: var(--ink); }

.slide .card { background: var(--paper); border-radius: calc(16 * var(--u)); }
.slide .card--dark { background: var(--ink); }

/* ---------- 01 · Title ---------- */
.hero .logo { left: calc(130 * var(--u)); top: calc(114 * var(--u)); width: calc(436 * var(--u)); }
.s1-title {
  left: calc(128 * var(--u)); top: calc(327.8 * var(--u));
  font-family: var(--display); font-weight: 700; font-size: calc(140 * var(--u)); line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.s1-sub { left: calc(128 * var(--u)); top: calc(786.5 * var(--u)); font-size: calc(44 * var(--u)); line-height: normal; color: var(--hero-text); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(67 * var(--u)); padding: 0 calc(28 * var(--u));
  border-radius: 999px;
  font-size: calc(28 * var(--u)); line-height: 1; white-space: nowrap;
}

/* ---------- 02 · One line ---------- */
.s2-stats { left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(711 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(32 * var(--u)); }
.stat { border-top: calc(4 * var(--u)) solid var(--orange); }
.stat__n { margin-top: calc(32 * var(--u)); font-family: var(--display); font-weight: 600; font-size: calc(120 * var(--u)); line-height: 1; }
.stat__l { margin-top: calc(9.75 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.3; color: var(--muted); }

/* ---------- 03 · Problem ---------- */
.s3-cards { left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(649 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(32 * var(--u)); }
.s3-cards .card { height: calc(271 * var(--u)); padding: calc(40 * var(--u)); }
.card__n { font-family: var(--display); font-weight: 600; font-size: calc(96 * var(--u)); line-height: 1; color: var(--rust); }
.card__l { margin-top: calc(11.5 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.3; color: var(--body); }

/* ---------- 04 · Fanthem ---------- */
.s4-eyebrow { left: calc(128 * var(--u)); top: calc(130.25 * var(--u)); font-family: var(--display); font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; text-transform: uppercase; color: var(--orange); }
#fanthem .h { top: calc(212.6 * var(--u)); }
.s4-shot { left: calc(128 * var(--u)); top: calc(435 * var(--u)); width: calc(960 * var(--u)); }
.s4-shot img { width: 100%; border-radius: calc(13 * var(--u)); }
.s4-points { left: calc(1136 * var(--u)); width: calc(584 * var(--u)); top: calc(415.5 * var(--u)); }
.s4-points li { border-left: calc(3 * var(--u)) solid var(--orange); padding-left: calc(25 * var(--u)); }
.s4-points li + li { margin-top: calc(29.6 * var(--u)); }
.s4-points h3 { font-family: var(--display); font-weight: 600; font-size: calc(40 * var(--u)); line-height: 1.1; text-transform: uppercase; }
.s4-points p { margin-top: calc(8 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.4; color: var(--muted); }

/* ---------- 05 · Moat ---------- */
.s5-products { left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(395 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(48 * var(--u)); }
.product img { width: 100%; border-radius: calc(13 * var(--u)); }
.product h3 { margin-top: calc(18 * var(--u)); font-family: var(--display); font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; text-transform: uppercase; }
.product p { margin-top: calc(16 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.35; color: var(--body); max-width: calc(720 * var(--u)); }

/* ---------- 06 · Business model ---------- */
.s6-cards { left: calc(161 * var(--u)); top: calc(546 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(398 * var(--u))); column-gap: calc(135 * var(--u)); }
.s6-cards .card { height: calc(258 * var(--u)); padding: calc(40 * var(--u)); }
.s6-cards .card__n { font-size: calc(88 * var(--u)); }
.s6-cards .card__l { margin-top: calc(12 * var(--u)); font-size: calc(30 * var(--u)); }
.s6-note { left: calc(128 * var(--u)); top: calc(838 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.3; color: var(--body); }
.s6-note strong { color: var(--body); }

/* ---------- 07 · Traction ---------- */
#traction .h { top: calc(190.6 * var(--u)); }
.s7-rows { left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(315 * var(--u)); border-top: calc(2 * var(--u)) solid var(--rule); }
.s7-rows li { display: flex; align-items: center; gap: calc(40 * var(--u)); padding: calc(27.875 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid var(--rule); }
.s7-rows p { font-size: calc(30 * var(--u)); line-height: 1.3; color: var(--muted); }
.s7-rows strong { color: var(--cream); }
.tag {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: calc(300 * var(--u)); height: calc(54 * var(--u)); border-radius: 999px;
  font-weight: 700; font-size: calc(24 * var(--u)); line-height: 1; letter-spacing: .083em; text-transform: uppercase;
}
.tag--solid  { background: var(--orange); color: var(--ink); }
.tag--orange { border: calc(2 * var(--u)) solid var(--orange); color: var(--orange); }
.tag--muted  { border: calc(2 * var(--u)) solid var(--muted); color: var(--muted); }

/* ---------- 08 · Go-to-market ---------- */
.s8-steps { left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(533 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(32 * var(--u)); }
.s8-steps .card { height: calc(387 * var(--u)); padding: calc(40 * var(--u)); }
.step__n { font-family: var(--display); font-weight: 600; font-size: calc(88 * var(--u)); line-height: 1; color: var(--rust); }
.s8-steps h3 { margin-top: calc(14 * var(--u)); font-family: var(--display); font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.step__p { margin-top: calc(12.6 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.36; color: var(--body); }
.slide .card--dark .step__n { color: var(--orange); }
.slide .card--dark h3 { color: var(--cream); }
.slide .card--dark .step__p { color: var(--muted); }
.pill--small { margin-top: calc(12.4 * var(--u)); height: calc(50 * var(--u)); width: calc(280 * var(--u)); padding: 0; font-weight: 700; font-size: calc(24 * var(--u)); background: var(--orange); color: var(--ink); }

/* ---------- 09 · Market ---------- */
.s9-cards { left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(451 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(32 * var(--u)); }
.s9-cards .card { height: calc(368 * var(--u)); padding: calc(48 * var(--u)); }
.mk__e { font-weight: 700; font-size: calc(26 * var(--u)); line-height: normal; letter-spacing: .117em; text-transform: uppercase; color: var(--rust); }
.mk__t { margin-top: calc(18 * var(--u)); font-family: var(--display); font-weight: 600; font-size: calc(56 * var(--u)); line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.mk__p { margin-top: calc(15 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.35; color: var(--body); }
.slide .card--dark .mk__e { color: var(--orange); }
.slide .card--dark .mk__t { color: var(--cream); }
.slide .card--dark .mk__p { color: var(--muted); max-width: calc(560 * var(--u)); }
.s9-src { left: calc(128 * var(--u)); top: calc(887 * var(--u)); font-size: calc(24 * var(--u)); line-height: normal; color: var(--foot); white-space: nowrap; }

/* ---------- 10 · Why we win ---------- */
.s10-stack { left: calc(128 * var(--u)); right: calc(128 * var(--u)); top: calc(477 * var(--u)); display: grid; grid-template-columns: repeat(5, 1fr); column-gap: calc(16 * var(--u)); }
.layer { height: calc(216 * var(--u)); padding: calc(41.75 * var(--u)) calc(32 * var(--u)) 0; background: var(--layer); border-radius: calc(16 * var(--u)); }
.layer h3 { font-family: var(--display); font-weight: 600; font-size: calc(48 * var(--u)); line-height: 1; text-transform: uppercase; color: var(--cream); }
.layer p { margin-top: calc(21 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.3; color: var(--muted); }
.layer--hot { background: var(--orange); }
.layer--hot h3, .layer--hot p { color: var(--ink); }
.s10-fly { left: calc(128 * var(--u)); top: calc(784.6 * var(--u)); width: calc(1494 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.4; color: var(--muted); }
.s10-fly strong { color: var(--cream); }

/* ---------- 11 · Team ---------- */
.s11-team { left: calc(128 * var(--u)); top: calc(368 * var(--u)); display: flex; }
.person { height: calc(380 * var(--u)); padding: calc(42 * var(--u)) calc(40 * var(--u)) 0; }
.person:nth-child(1) { width: calc(485 * var(--u)); }
.person:nth-child(2) { width: calc(460 * var(--u)); margin-left: calc(47 * var(--u)); }
.person:nth-child(3) { width: calc(466 * var(--u)); margin-left: calc(51 * var(--u)); }
.person h3 { font-family: var(--display); font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.person__r { margin-top: calc(15.3 * var(--u)); font-weight: 700; font-size: calc(26 * var(--u)); line-height: normal; color: var(--rust); }
.person__b { margin-top: calc(12.5 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.36; color: var(--body); text-wrap: wrap; }
.s11-line { left: calc(128 * var(--u)); font-size: calc(28 * var(--u)); line-height: normal; color: var(--body); white-space: nowrap; }
.s11-line strong { color: var(--ink); }
.s11-adv  { top: calc(832.5 * var(--u)); }
.s11-also { top: calc(925.8 * var(--u)); }

/* ---------- 12 · (retired) ---------- */
.s12-left  { left: calc(128 * var(--u)); top: 0; width: calc(784 * var(--u)); height: 100%; }
.s12-right { left: calc(1008 * var(--u)); top: 0; width: calc(784 * var(--u)); height: 100%; }
.s12-left > *, .s12-right > * { position: absolute; left: 0; right: 0; }
.s12-left .eyebrow { top: calc(128.75 * var(--u)); }
.s12-right .eyebrow { top: calc(152.75 * var(--u)); }
.s12-big { top: calc(190.3 * var(--u)); font-family: var(--display); font-weight: 700; font-size: calc(220 * var(--u)); line-height: 1; }
.s12-sub { top: calc(434.75 * var(--u)); font-weight: 500; font-size: calc(36 * var(--u)); line-height: 1.3; }
.s12-funds { top: calc(569 * var(--u)); width: 100%; border-collapse: collapse; border-top: calc(2 * var(--u)) solid var(--ink); font-size: calc(30 * var(--u)); line-height: calc(38 * var(--u)); }
.s12-funds th, .s12-funds td { padding: calc(16 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid var(--ink); text-align: left; font-weight: 400; }
.s12-funds td { text-align: right; font-weight: 700; }
.s12-months { top: calc(211 * var(--u)); }
.s12-months li { background: var(--ink); border-radius: calc(16 * var(--u)); padding: calc(39.75 * var(--u)) calc(36 * var(--u)) calc(36.25 * var(--u)); }
.s12-months li + li { margin-top: calc(20 * var(--u)); }
.s12-months h3 { font-family: var(--display); font-weight: 600; font-size: calc(40 * var(--u)); line-height: 1.2; text-transform: uppercase; color: var(--orange); }
.s12-months p { margin-top: calc(12 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.3; color: var(--cream); }
.s12-terms { top: calc(846.4 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.4; }

/* ---------- 13 · Close ---------- */
.s13-title { left: calc(128 * var(--u)); top: calc(407.3 * var(--u)); font-family: var(--display); font-weight: 700; font-size: calc(116.8 * var(--u)); line-height: calc(117 * var(--u)); text-transform: uppercase; white-space: nowrap; }
.s13-cta { left: calc(128 * var(--u)); top: calc(771.6 * var(--u)); }

/* ---------- Below 1024px: slides become flowing sections ---------- */
@media (max-width: 1023.98px) {
  .bd { display: none; }
  .slide { aspect-ratio: auto; padding: 64px 24px 36px; display: flex; flex-direction: column; font-size: 16px; }
  .slide > * { position: static; }
  .eyebrow, .s12-left .eyebrow, .s12-right .eyebrow { font-size: 13px; }
  .h { white-space: normal; margin-top: 14px; }
  .h96, .h88, .h80 { font-size: clamp(32px, 9vw, 56px); line-height: 1.05; }
  .foot { margin-top: 40px; font-size: 12px; gap: 16px; }

  .hero { min-height: 100svh; padding-top: 88px; justify-content: flex-end; background: linear-gradient(180deg, rgba(21,17,15,.55) 0%, rgba(21,17,15,.8) 55%, rgba(21,17,15,.92) 100%), var(--ink) var(--hero-art) 30% center / cover no-repeat; }
  .hero .logo { width: min(64vw, 300px); margin-bottom: auto; }
  .s1-title, .s13-title { margin-top: 40px; white-space: normal; font-size: clamp(38px, 11.4vw, 84px); line-height: 1; }
  .s1-sub { margin-top: 20px; font-size: 18px; }
    .pill { height: 44px; padding: 0 18px; font-size: 15px; }

  .s2-stats, .s3-cards, .s5-products, .s6-cards, .s8-steps, .s9-cards, .s10-stack { grid-template-columns: 1fr; row-gap: 12px; margin-top: 32px; }
  .stat { border-top-width: 3px; padding-top: 4px; }
  .stat + .stat { margin-top: 16px; }
  .stat__n { margin-top: 14px; font-size: 56px; }
  .stat__l { margin-top: 4px; font-size: 16px; }
  .s3-cards .card, .s6-cards .card, .s8-steps .card, .s9-cards .card, .person, .layer { height: auto; padding: 24px; width: auto !important; margin-left: 0 !important; }
  .card__n, .s6-cards .card__n, .step__n { font-size: 48px; }
  .card__l, .s6-cards .card__l { margin-top: 6px; font-size: 16px; }

  .s4-eyebrow { font-size: 18px; }
  .s4-shot { margin-top: 28px; width: 100%; }
  .s4-points { width: auto; margin-top: 28px; }
  .s4-points li { border-left-width: 3px; padding-left: 16px; }
  .s4-points li + li { margin-top: 20px; }
  .s4-points h3 { font-size: 22px; }
  .s4-points p { font-size: 16px; margin-top: 4px; }

  .s5-products { row-gap: 32px; }
  .product h3 { margin-top: 14px; font-size: 24px; }
  .product p { margin-top: 6px; font-size: 16px; max-width: none; }

  .s6-note { margin-top: 20px; font-size: 15px; }

  .s7-rows { margin-top: 28px; border-top-width: 1px; }
  .s7-rows li { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0; border-bottom-width: 1px; }
  .s7-rows p { font-size: 16px; }
  .tag { width: auto; height: 32px; padding: 0 14px; font-size: 12px; border-width: 1.5px; }

  .s8-steps h3 { margin-top: 8px; font-size: 26px; }
  .step__p { margin-top: 6px; font-size: 16px; }
  .pill--small { margin-top: 14px; height: 40px; width: auto; padding: 0 18px; font-size: 14px; }

  .mk__e { font-size: 12px; }
  .mk__t { margin-top: 10px; font-size: 30px; }
  .mk__p { margin-top: 8px; font-size: 16px; }
  .s9-src { margin-top: 20px; white-space: normal; font-size: 13px; }

  .s10-stack { grid-template-columns: 1fr 1fr; gap: 10px; }
  .layer h3 { font-size: 26px; }
  .layer p { margin-top: 8px; font-size: 15px; }
  .layer:first-child { grid-column: 1 / -1; }
  .s10-fly { width: auto; margin-top: 24px; font-size: 16px; }

  .s11-team { flex-direction: column; gap: 12px; margin-top: 32px; }
  .person h3 { font-size: 26px; }
  .person__r { margin-top: 6px; font-size: 14px; }
  .person__b { margin-top: 8px; font-size: 15px; }
  .s11-line { white-space: normal; margin-top: 16px; font-size: 15px; }

  .s12-left, .s12-right { width: auto; height: auto; }
  .s12-left > *, .s12-right > * { position: static; }
  .s12-right { margin-top: 48px; }
  .s12-big { margin-top: 8px; font-size: clamp(96px, 30vw, 180px); }
  .s12-sub { margin-top: 8px; font-size: 18px; }
  .s12-funds { margin-top: 28px; font-size: 16px; line-height: 1.4; border-top-width: 1px; }
  .s12-funds th, .s12-funds td { padding: 12px 0; border-bottom-width: 1px; }
  .s12-months { margin-top: 16px; }
  .s12-months li { padding: 22px 24px; }
  .s12-months li + li { margin-top: 10px; }
  .s12-months h3 { font-size: 24px; }
  .s12-months p { margin-top: 4px; font-size: 16px; }
  .s12-terms { margin-top: 20px; font-size: 15px; }

  .hero--close { justify-content: flex-start; }
  .hero--close .logo { margin-bottom: 0; }
  .s13-title { margin-top: 18vh; }
  .s13-cta { margin-top: 32px; align-self: flex-start; }
}