/* ══════════════════════════════════════════════════════════════════════
   Sales on Track

   The page alternates white and full-bleed black, the way cuberto.com
   actually does — over 8,000px of their homepage is black, which is what
   gives it weight. The colour comes from the media, so the media is dark
   and lit and the page is built to frame it.

   Grid and rhythm are the values measured off their live DOM:
     1600px container, 120px padding, 140/220 rhythm, 200/120 header,
     20px radius on the media wrapper with overflow hidden.

   Type runs at both extremes on purpose — a 200px figure against an 11px
   mono label in the same view. Their scale only has two notes; this has
   five, and that is where it gets ahead.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --white:  #FFFFFF;
  --black:  #08090A;
  --ink:    #000000;
  --ink-2:  #55595C;
  --ink-3:  #8B9094;

  /* on dark */
  --d-text:  #FFFFFF;
  --d-text2: #9AA0A6;
  --d-text3: #5E656C;
  --d-line:  #212428;
  --d-card:  #101214;

  /* signals — matched exactly to the videos */
  --mint:  #6EE7A8;
  --amber: #FFB84D;
  --ice:   #7FB2FF;

  /* tints */
  --tint-a: #EEF2FB;
  --tint-b: #E8F6EF;

  --line: #E6E7E5;

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shell: 1600px;
  --pad: clamp(20px, 8.6vw, 120px);
  --gap: clamp(72px, 9.8vw, 140px);
  --gap-lg: clamp(104px, 15.3vw, 220px);
  --radius: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--white); }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(17px, 1.85vw, 26px);
  line-height: 1.27;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p, dl, dd, dt { margin: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; margin: 0; padding: 0; }

.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }

/* ── type scale ── */

.display {
  font-size: clamp(40px, 6.45vw, 90px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.022em;
}
.display-out { font-size: clamp(42px, 7.4vw, 104px); }
.line { display: block; }
.line > span { display: block; }

.h2 { font-size: clamp(26px, 3.05vw, 42px); line-height: 1.095; letter-spacing: -0.014em; }
.h3 { font-size: clamp(20px, 2.05vw, 28px); line-height: 1.14; letter-spacing: -0.01em; }
.body { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.35; color: var(--ink-2); }
.small { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.36; color: var(--ink-2); }
.eyebrow {
  font-family: var(--mono);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}
.caption {
  margin-top: clamp(24px, 2.6vw, 40px);
  max-width: 52ch;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.45;
  color: var(--ink-3);
}

:where(a, button, input, select):focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 2px; }

/* ── dark sections ── */

.sec-dark {
  background: var(--black);
  color: var(--d-text);
}
.sec-dark .eyebrow,
.sec-dark .caption { color: var(--d-text3); }
.sec-dark .body,
.sec-dark .small { color: var(--d-text2); }

/* ── scroll progress ── */

.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100;
  background: var(--mint); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .progress { animation: pg linear both; animation-timeline: scroll(root block); }
}
@keyframes pg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── dev banner ── */
.banner { background: var(--black); color: var(--d-text); }
.banner-inner { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px var(--pad); max-width: var(--shell); margin-inline: auto; }
.banner-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
.banner-text { font-size: 15px; }

/* ── bar ── */

.bar { padding-block: 20px; position: relative; z-index: 20; }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bar-end { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); }
.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark-name { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.mark-glyph {
  width: 16px; height: 16px; flex: none;
  background:
    linear-gradient(currentColor 0 0) 0 3px / 7px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 8px / 11px 2px no-repeat,
    linear-gradient(var(--mint) 0 0) 0 13px / 16px 2px no-repeat;
  transition: transform 400ms var(--ease);
}
.mark:hover .mark-glyph { transform: translate3d(3px, 0, 0); }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  background: var(--ink); color: var(--white);
  padding: 14px 22px; border-radius: 999px;
  transition: transform 400ms var(--ease), background-color 300ms var(--ease);
}
.pill:hover { transform: translate3d(0, -2px, 0); background: #23262A; }

/* ── rhythm ── */

.sec { padding-block: var(--gap); }
.sec-head { padding-block: clamp(52px, 6.2vw, 100px) clamp(34px, 4vw, 60px); }
.sec-film { padding-block: 0; }
.sec-slab { padding-block: var(--gap-lg); }
.sec-outro { padding-block: var(--gap-lg); }

/* ── label-left / body-right, the device their page uses ── */

.split { display: grid; gap: clamp(28px, 3vw, 44px); }
@media (min-width: 60rem) {
  .split { grid-template-columns: 240px minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .split > .eyebrow { padding-top: 10px; }
}
.split-body > .h2 + * { margin-top: clamp(36px, 4vw, 64px); }

/* ── media ── */

.media { margin: 0; }
.media-16x9 .frame { aspect-ratio: 16 / 9; }
.frame {
  position: relative; width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
  /* A promoted layer with its own paint, so clipping a playing video does
     not force a repaint of the page on every scroll frame. */
  transform: translateZ(0);
  contain: paint;
}
.frame-dark { box-shadow: 0 40px 90px -50px rgba(0,0,0,0.55); }
.poster, .frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 0;
}
/* The video carries its own poster attribute, so it can be opaque from the
   start — there is nothing to hide behind it. The old version faded it in on
   canplay, and when that event did not arrive the video stayed invisible and
   only the still poster ever showed. */
.frame video { opacity: 1; }

/* ── lede ── */

.lede {
  max-width: 26ch;
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.018em;
}
.lede strong { font-weight: 500; }
.lede-c { margin-inline: auto; max-width: 24ch; }
.sec-dark .lede { color: var(--d-text); }

/* ── forms ── */

.signup { max-width: 620px; margin-top: clamp(36px, 4vw, 60px); }
.signup-c { margin-inline: auto; text-align: left; }
.signup-row { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-email { flex: 1 1 auto; min-width: 0; }
.field-industry { margin-top: 22px; }
.field-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.sec-dark .field-label, .sec-dark .field-help, .sec-dark .signup-fine { color: var(--d-text3); }
.field-optional { letter-spacing: 0.06em; text-transform: none; }
.field-help { font-size: 14px; color: var(--ink-3); margin-top: 4px; }

.input, .select {
  font-family: var(--sans); font-size: 17px; color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 13px 0; width: 100%;
  transition: border-color 300ms var(--ease);
}
.sec-dark .input, .sec-dark .select { border-bottom-color: var(--d-line); }
.input:hover, .select:hover { border-bottom-color: var(--ink-3); }
.input:focus, .select:focus { border-bottom-color: var(--mint); }
.input::placeholder { color: #BFC2C2; }
.sec-dark .input::placeholder { color: var(--d-text3); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px center, right 3px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 26px;
}
.sec-dark .select option { color: #000; }

.btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  color: var(--black); background: var(--white);
  border: 0; border-radius: 999px; padding: 18px 30px; cursor: pointer; white-space: nowrap;
  overflow: hidden;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.sec:not(.sec-dark) .btn { color: var(--white); background: var(--ink); }
.btn > span { display: inline-block; transition: transform 400ms var(--ease); }
.btn:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 10px 30px -12px rgba(110,231,168,0.6); }
.btn:hover > span { transform: translate3d(0, -1px, 0); }
.btn:active { transform: none; }
.btn[disabled] { opacity: 0.45; cursor: progress; transform: none; }

@media (min-width: 620px) { .signup-row { flex-direction: row; align-items: flex-end; } .signup-row .btn { flex: none; } }

.signup-status { font-size: 15px; margin-top: 18px; display: none; }
.signup-status[data-state] { display: block; }
.signup-status[data-state="ok"]   { color: var(--mint); font-weight: 500; }
.signup-status[data-state="err"]  { color: var(--amber); }
.signup-status[data-state="wait"] { color: var(--ink-3); }
.signup-fine { font-size: 14px; color: var(--ink-3); margin-top: 16px; }

/* ── the dark slab ── */

.rule { height: 1px; background: var(--d-line); margin-block: var(--gap-lg); }

.trio { display: grid; gap: clamp(32px, 3.4vw, 52px); }
.trio .body, .trio .small { margin-top: 12px; max-width: 36ch; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); align-items: start; } }

/* ── ledger ── */

.ledger { border-top: 1px solid var(--d-line); }
.lrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 92px;
  column-gap: clamp(16px, 3vw, 56px);
  align-items: baseline;
  padding-block: clamp(16px, 1.9vw, 26px);
  border-bottom: 1px solid var(--d-line);
  font-size: clamp(15px, 1.35vw, 21px);
}
.lhead {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--d-text3); padding-block: 14px;
}
.val { font-size: clamp(19px, 2.1vw, 32px); text-align: right; color: var(--mint); }
.day { font-size: clamp(12px, 1.05vw, 16px); text-align: right; color: var(--amber); }

.total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-top: clamp(30px, 3.4vw, 54px);
}
.total-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--d-text3); }
/* the extreme end of the scale — a figure their page never reaches */
.total-fig {
  font-size: clamp(52px, 11vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: var(--mint);
  text-shadow: 0 0 60px rgba(110, 231, 168, 0.22);
}

/* ── films ── */

.films { display: grid; gap: clamp(64px, 7vw, 112px); margin-top: clamp(32px, 3.4vw, 56px); }
.film-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); margin-top: clamp(22px, 2.4vw, 36px); }
.idx { font-family: var(--mono); font-size: clamp(13px, 1.1vw, 17px); letter-spacing: 0.1em; color: var(--d-text3); padding-top: 6px; }
.film-cap .small { margin-top: 10px; max-width: 44ch; }

/* ── tiles ── */

.tiles { display: grid; gap: clamp(14px, 1.4vw, 22px); margin-top: clamp(36px, 4vw, 64px); }
.tile { border-radius: 18px; padding: clamp(24px, 2.4vw, 40px); }
.tile-a { background: var(--tint-a); }
.tile-b { background: var(--tint-b); }
.tile .small { margin-top: 10px; color: var(--ink-2); max-width: 30ch; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

/* ── comparison rows ── */

.rows { display: grid; }
.drow { padding-block: clamp(28px, 3vw, 46px); border-top: 1px solid var(--line); }
.drow:last-child { border-bottom: 1px solid var(--line); }
.drow dd { margin-top: 12px; max-width: 44ch; }
@media (min-width: 60rem) {
  .drow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 80px); align-items: start; }
  .drow dd { margin-top: 6px; }
}

/* ── report ── */

.report { display: grid; gap: clamp(36px, 4vw, 64px); }
.rlabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--d-text3); }
.rfig { font-size: clamp(34px, 4.6vw, 74px); line-height: 1; margin-top: 14px; letter-spacing: -0.05em; }
.rfig-amber { color: var(--amber); }
.rfig-mint { color: var(--mint); text-shadow: 0 0 44px rgba(110, 231, 168, 0.25); }
@media (min-width: 900px) { .report { grid-template-columns: repeat(3, 1fr); } }

/* ── faq ── */

.faq { display: grid; }
.qa { padding-block: clamp(22px, 2.4vw, 36px); border-top: 1px solid var(--d-line); }
.qa:last-child { border-bottom: 1px solid var(--d-line); }
.qa dd { margin-top: 10px; max-width: 52ch; }
@media (min-width: 60rem) {
  .qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
  .qa dd { margin-top: 4px; }
}

/* ── footer ── */

.foot { padding-block: clamp(48px, 5vw, 80px); }
.foot-in { display: grid; gap: 14px; justify-items: center; text-align: center; }
.fnote { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--d-text3); }

/* ══════════════════════════════════════════════════════════════════════
   MOTION — scoped to .motion, which app.js adds only after confirming JS
   runs and motion is wanted. Without it the page renders as plain visible
   HTML. Transform, opacity and clip-path only.
   ══════════════════════════════════════════════════════════════════════ */

.motion [data-anim] { will-change: transform, opacity; }

.motion [data-anim="lines"] .line { overflow: hidden; padding-block: 0.03em; }
.motion [data-anim="lines"] .line > span { transform: translate3d(0, 105%, 0); }
.motion [data-anim="lines"].in .line > span {
  transform: none;
  transition: transform 1150ms var(--ease) var(--ld, 0ms);
}

.motion [data-anim="rise"] { opacity: 0; transform: translate3d(0, 26px, 0); }
.motion [data-anim="rise"].in {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--ease) var(--d, 0ms), transform 1000ms var(--ease) var(--d, 0ms);
}

.motion [data-anim="row"] { opacity: 0; transform: translate3d(0, 18px, 0); }
.motion [data-anim="row"].in {
  opacity: 1; transform: none;
  transition: opacity 760ms var(--ease) var(--d, 0ms), transform 860ms var(--ease) var(--d, 0ms);
}

.motion [data-anim="fig"] { opacity: 0; transform: translate3d(0, 24px, 0); }
.motion [data-anim="fig"].in {
  opacity: 1; transform: none;
  transition: opacity 860ms var(--ease) var(--d, 0ms), transform 960ms var(--ease) var(--d, 0ms);
}

.motion [data-anim="media"] { opacity: 0; transform: translate3d(0, 40px, 0) scale(0.99); }
.motion [data-anim="media"].in {
  opacity: 1; transform: none;
  transition: opacity 1100ms var(--ease) var(--d, 0ms), transform 1300ms var(--ease) var(--d, 0ms);
}

/* The guarantee: .done is stamped on a timer and hard-sets the end state,
   so a stalled transition still resolves visible and in place. */
.motion [data-anim].done,
.motion [data-anim].done .line > span {
  opacity: 1; transform: none; clip-path: none; transition: none; will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .motion [data-anim],
  .motion [data-anim] .line > span {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .progress { display: none; }
  .btn:hover, .pill:hover, .mark:hover .mark-glyph { transform: none; }
  .frame video { opacity: 1; transition: none; }
}

/* ══════════════════ tiles — their own entrance ══════════════════
   Each card is uncovered from the bottom rather than faded, a rule
   draws across its top afterwards, and it lifts under the cursor. */

.tile { position: relative; overflow: hidden; transition: transform 550ms var(--ease), box-shadow 550ms var(--ease); }
.tile::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
}
.tile-a::after { background: #4A6FA5; }
.tile-b::after { background: #2E8B62; }
.tile:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 26px 54px -34px rgba(0,0,0,0.4); }
html:not(.motion) .tile::after { transform: scaleX(1); }

/* Deliberately transform and opacity only. An earlier version wiped these
   with clip-path and the cards stayed invisible on the live site: clip-path
   is the one property here that leaves an element completely gone when it
   misbehaves, rather than merely unanimated. The rule drawing across the top
   carries the same character with none of that risk. */
.motion [data-anim="tile"] { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.972); }
.motion [data-anim="tile"].in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease) var(--d, 0ms),
              transform 940ms var(--ease) var(--d, 0ms);
}
.motion [data-anim="tile"].in::after {
  transform: scaleX(1);
  transition: transform 900ms var(--ease) calc(var(--d, 0ms) + 260ms);
}

/* ══════════════════ comparison rows ══════════════════
   The rule draws across, the statement is uncovered a line at a time,
   then the explanation arrives behind it. */

.drow { position: relative; border-top: 0; }
.drow-rule {
  position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--line); transform: scaleX(0); transform-origin: 0 50%;
}
html:not(.motion) .drow-rule { transform: scaleX(1); }

.motion [data-anim="drow"].in .drow-rule {
  transform: scaleX(1);
  transition: transform 1100ms var(--ease) var(--d, 0ms);
}
.motion [data-anim="drow"] .line { overflow: hidden; padding-block: 0.04em; }
.motion [data-anim="drow"] .line > span { transform: translate3d(0, 106%, 0); }
.motion [data-anim="drow"].in .line > span {
  transform: none;
  transition: transform 1050ms var(--ease) calc(var(--d, 0ms) + 130ms);
}
.motion [data-anim="drow"] dd { opacity: 0; transform: translate3d(0, 16px, 0); }
.motion [data-anim="drow"].in dd {
  opacity: 1; transform: none;
  transition: opacity 820ms var(--ease) calc(var(--d, 0ms) + 340ms),
              transform 820ms var(--ease) calc(var(--d, 0ms) + 340ms);
}

/* the .done guarantee has to reach these inner parts too */
.motion [data-anim].done .drow-rule,
.motion [data-anim].done dd,
.motion [data-anim].done::after {
  opacity: 1; transform: none; clip-path: none; transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover { transform: none; }
  .motion [data-anim="tile"],
  .motion [data-anim="drow"] .line > span,
  .motion [data-anim="drow"] dd { opacity: 1 !important; transform: none !important; }
  .drow-rule, .tile::after { transform: scaleX(1) !important; }
}