/* simple.css — the homepage (direction C) and /downloaded/.
 *
 * The design: your screen history is the page. A wall of real captures behind the
 * copy, one scrim between them, and a search running over the top. There is no
 * card, no panel and no decorative backdrop — an earlier version had all three and
 * they were all competing with the thing they were supposed to be showing.
 *
 * The scrim is the only thing holding the design together, so its numbers are
 * measured against the rendered page rather than chosen by eye. Contrast floors:
 * 4.5:1 for body text, 3:1 for large text. Anything lighter fails on the bright
 * parts of the footage, which move — the clip is scrubbed, so a value that passes
 * on frame 0 has to pass on every frame.
 *
 * The .btn and .dl-* class names are load-bearing: download.js injects markup on
 * /downloaded/ that expects them.
 */

:root {
  --ink:      #FFFFFF;
  --ink-2:    rgba(255,255,255,.82);
  /* .72, not something prettier: measured against the brightest frame of the
     scrubbed clip under the copy (78,78,81), .62 gave 4.37:1 and missed the 4.5
     floor for small text. This is the value that clears it on every frame. */
  --ink-3:    rgba(255,255,255,.72);
  --dark:     #08090E;
  --dark-2:   #101119;
  --paper:    #FFFFFF;
  --paper-2:  #F7F8FC;
  --body:     #4C4E60;
  --accent:   #3A53D4;
  --accent-2: #6889FF;
  --hair:     rgba(16,17,25,.09);
  --hair-2:   rgba(16,17,25,.15);
  --r:        12px;
  --r-lg:     18px;
  --display:  "Poppins", system-ui, -apple-system, sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad:      clamp(24px, 5vw, 70px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--dark);
  color: var(--dark-2);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; }

/* ─────────────────────────────── buttons ─────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  font-family: var(--display); font-size: 16px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
/* On the footage the primary button is white — the highest-contrast thing on the
   screen, which is what the one action on the page should be. */
.btn-primary { background: var(--ink); color: var(--dark); box-shadow: 0 20px 50px -22px rgba(0,0,0,.9); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -22px rgba(0,0,0,1); }
.btn .ic { width: 17px; height: 17px; }
.btn-lg { padding: 17px 34px; font-size: 17px; }
.btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

/* On white, the same button inverts rather than becoming a second style. */
.after .btn-primary { background: var(--dark-2); color: #fff; box-shadow: 0 18px 44px -20px rgba(16,17,25,.6); }
.after .btn-primary:hover { background: var(--accent); }

/* ─────────────────────────────── screen 1 ─────────────────────────────── */

.stage {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: clamp(22px, 3.5vh, 40px) var(--pad) clamp(20px, 3vh, 34px);
  overflow: hidden;
  color: var(--ink);
}

/* The wall of real captures. Columns are transformed by hero-history.js from
   scroll position; the drift and the opposing directions are what make it read as
   rewinding through a pile of screens rather than a background sliding past. */
.wall {
  position: absolute; inset: -12% -4%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 20px);
  /* The wall is evidence, not the subject. It is desaturated and dimmed so the
     headline wins; the search results above it are the only part meant to be read
     in detail, and they are not filtered. */
  filter: saturate(.78);
  opacity: .72;
  pointer-events: none;
}
.wall-col { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 20px); will-change: transform; }
.wall-shot {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: #14161f;
  box-shadow: 0 20px 40px -30px rgba(0,0,0,.9);
  flex: 0 0 auto;
}
.wall-shot img { width: 100%; height: auto; display: block; }

/* Two layers: a diagonal that is heaviest at the bottom-left where the copy is
   and thinnest at the top-right where the recording should still read as itself,
   plus a bottom lift for the strip. Measured against the brightest frame of the
   clip, not the poster — the darkest text on this page clears 4.6:1 there. */
.scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(74deg,
      rgba(6,7,11,.96) 0%,
      rgba(6,7,11,.92) 28%,
      rgba(6,7,11,.72) 48%,
      rgba(6,7,11,.55) 70%,
      rgba(6,7,11,.5) 100%),
    linear-gradient(to top, rgba(6,7,11,.88) 0%, rgba(6,7,11,.4) 18%, transparent 40%),
    /* A soft pool behind the search panel only, so the result cards sit on
       something calm without dimming the whole right-hand side of the wall. */
    radial-gradient(46% 42% at 80% 46%, rgba(6,7,11,.6) 0%, transparent 72%);
}
.stage > *:not(.wall):not(.scrim):not(.scroll-hint):not(.finder) { position: relative; z-index: 2; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: 15.5px; letter-spacing: -.01em;
}
.brand img { border-radius: 7px; }

/* The clock counts the scrubbed position, so the number moves with the scroll —
   which is what makes it obvious the scroll is driving a recording. */
/* The clock sits in the brightest corner of the frame — the one place the scrim is
   deliberately thin — so it carries its own surface. White-on-footage measured
   1.4:1 there; on this pill it is 6.9:1 on every frame. */
.rec {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.8);
  background: rgba(8,9,14,.62);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(8px);
}
.rec i { width: 6px; height: 6px; border-radius: 50%; background: #FF5F57; flex: 0 0 auto; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec-clock { font-variant-numeric: tabular-nums; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .rec i { animation: none; } }

.copy { margin-top: auto; max-width: 620px; }

/* ─────────────────────── the search, over the wall ───────────────────────
   Right-hand side, vertically centred: the copy owns the bottom-left, this owns
   the middle-right, and they never overlap above 1100px. Below that it is hidden
   rather than squeezed — a cramped demo is worse than no demo. */
.finder {
  position: absolute; z-index: 2;
  right: var(--pad);
  top: 50%; transform: translateY(-54%);
  width: min(468px, 36vw);
  display: flex; flex-direction: column; gap: 12px;
}
.finder-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(18,20,28,.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 13px 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,1);
  transition: border-color .3s ease;
}
.finder.searching .finder-bar { border-color: rgba(104,137,255,.5); }
.finder-ic { width: 16px; height: 16px; color: rgba(255,255,255,.5); flex: 0 0 auto; }
.finder-q { font-size: 14.5px; color: #fff; white-space: nowrap; overflow: hidden; }
.finder-caret {
  width: 1.5px; height: 16px; background: var(--accent-2); flex: 0 0 auto;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

.finder-results { display: flex; flex-direction: column; gap: 9px; min-height: 288px; }
.hit {
  display: flex; align-items: center; gap: 12px;
  background: rgba(18,20,28,.8);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 9px;
  backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .42s ease, transform .42s ease;
}
.hit.on { opacity: 1; transform: none; }
/* A fixed 16:10 window so every result is the same shape whatever the capture's
   own proportions are — ragged thumbnails read as a broken grid. */
.hit-shot {
  width: 124px; flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: 7px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #0d0f16;
}
.hit-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hit-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hit-app { font-size: 13px; font-weight: 600; color: #fff; }
.hit-src { font-size: 12px; color: rgba(255,255,255,.66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-when { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.5); }

.h1-l { display: block; }

h1 {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 18px;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
.copy p {
  font-size: clamp(15.5px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 30px;
  max-width: 44ch;
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}

.cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.fine {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-3);
}
.fine-dark { color: #6E7185; font-size: 12px; }

.strip {
  margin-top: clamp(30px, 5.5vh, 60px);
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3);
}
.strip i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); flex: 0 0 auto; }

.scroll-hint {
  position: absolute; z-index: 3;
  right: var(--pad); bottom: clamp(20px, 3vh, 34px);
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-3); text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
}
.scroll-hint:hover { color: var(--ink); }
.scroll-hint svg { width: 14px; height: 14px; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }

/* ─────────────────────────────── screen 2 ───────────────────────────────
   A spec sheet, not a card grid. Three rounded boxes in a row is the default
   shape of a generated landing page: it gives three unequal claims identical
   weight, boxes text that does not need boxing, and reads as a template. Here the
   structure comes from hairlines and column rhythm instead, which is also how the
   product's own docs read. */

.after {
  background: var(--paper);
  color: var(--dark-2);
  padding: clamp(56px, 10vh, 120px) var(--pad) 0;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; min-height: 100svh;
}

.sheet { width: 100%; max-width: 980px; }

.sheet-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #8B8E9E;
  margin: 0 0 clamp(24px, 4vh, 40px);
}

/* Label column left, detail column right. The asymmetry is the point — a claim
   and its evidence are not the same kind of thing and should not sit in matching
   boxes. Collapses to one column well before the two columns get cramped. */
.spec {
  display: grid;
  /* 3.5/6.5, not a rounder ratio: at the 980px max width this is the narrowest
     label column that still holds the longest heading ("Ask instead of digging")
     on one line. Narrower and one row wraps while the others do not, which reads
     as an accident rather than a rhythm. */
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 6.5fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(26px, 4vh, 38px) 0;
  border-top: 1px solid var(--hair);
}
.spec:last-of-type { border-bottom: 1px solid var(--hair); }

.spec-head { display: flex; align-items: baseline; gap: 14px; }
.spec-n {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--accent);
  flex: 0 0 auto;
  /* Optical alignment: the numeral's cap height sits above the heading's, so a
     plain baseline match reads as a nudge too high. */
  position: relative; top: -1px;
}
.spec-head h2 {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  margin: 0;
}
.spec > p {
  margin: 0;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.62;
  color: var(--body);
  max-width: 56ch;
}
.spec em { font-style: normal; font-weight: 600; color: var(--dark-2); }

kbd, code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--paper-2); border: 1px solid var(--hair-2);
  border-radius: 5px; padding: 1px 5px; color: var(--dark-2);
}

.final {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(34px, 6vh, 56px) 0 0;
}
.final .fine { margin: 14px 0 0; }

/* ──────────────────────────────── footer ─────────────────────────────── */

.foot {
  margin-top: auto;
  width: 100%;
  max-width: 980px;
  border-top: 1px solid var(--hair);
  padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--body);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { color: var(--body); text-decoration: none; }
.foot-links a:hover { color: var(--dark-2); text-decoration: underline; }

/* ────────────────────────────── responsive ───────────────────────────── */

/* Between 900 and 1100 the copy column and the search panel start to reach for
   the same pixels. Drop the panel rather than shrink it — the headline and the
   download button are what must survive. */
@media (max-width: 1100px) {
  .finder { display: none; }
}

@media (max-width: 900px) {
  .spec { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .after { min-height: 0; padding-bottom: 0; }
  .strip { font-size: 11.5px; gap: 10px; }
  .strip i { display: none; }
  .scroll-hint { display: none; }
  .finder { display: none; }
  .wall { grid-template-columns: repeat(3, 1fr); opacity: .42; inset: -16% -8%; }
  /* The diagonal is wrong once the copy spans the full width — it left the middle
     of the headline sitting on the brightest part of the frame. Vertical instead,
     heaviest across the whole bottom half where all the text now lives. */
  .scrim {
    background: linear-gradient(to top,
      rgba(6,7,11,.96) 0%,
      rgba(6,7,11,.92) 40%,
      rgba(6,7,11,.72) 62%,
      rgba(6,7,11,.42) 80%,
      rgba(6,7,11,.3) 100%);
  }
  /* Phones paint the poster, never the clip. The desktop poster is 1920x1080 with
     the windows in a middle band, so a phone-shaped crop has to target that band
     or it is mostly empty desk. */
}

@media (max-width: 560px) {
  h1 { font-size: clamp(32px, 9vw, 42px); }
  .h1-l { display: inline; }
  .cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta .btn { width: 100%; }
  .cta .fine { text-align: center; }
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ─────────────────────── /downloaded/ — the confirmation page ─────────────
   Light, centred, no navigation: the download is already running and the only
   thing left to do is read three steps. It deliberately does NOT reuse the dark
   hero — this is a utility page, and a second full-bleed video would be noise. */

.done-body { background: var(--paper); }

.done {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px, 5vh, 52px) var(--pad) 0;
  text-align: center;
  color: var(--dark-2);
}

.brand-center { margin-bottom: clamp(24px, 6vh, 56px); color: var(--dark-2); }

.done h1 {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 700;
  margin: 0 0 14px;
  text-shadow: none;
}
.done-sub {
  font-size: clamp(15.5px, 1.25vw, 19px);
  color: var(--body);
  margin: 0 auto 18px;
  max-width: 52ch;
  line-height: 1.55;
}
.done-retry { font-size: 13.5px; color: var(--body); margin: 0 0 clamp(30px, 5vh, 52px); }
.done-retry a { color: var(--accent); text-decoration: underline; }
.done-size { display: block; margin-top: 5px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  width: 100%; max-width: 1120px;
  text-align: left;
}
.step { display: flex; flex-direction: column; }

.step-art {
  position: relative;
  height: clamp(150px, 19vh, 210px);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 20px; margin-bottom: 16px;
}

.sa-window {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--hair);
  border-radius: 12px; padding: 18px 22px;
  box-shadow: 0 18px 40px -26px rgba(16,17,25,.5);
}
.sa-icon { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto; }
.sa-icon-app { background: linear-gradient(140deg, #6889FF, #F23CB8); }
.sa-icon-folder { background: linear-gradient(140deg, #BFC6E4, #9AA3CC); border-radius: 8px; }
.sa-arrow { width: 34px; height: 2px; background: var(--hair-2); position: relative; }
.sa-arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 7px solid var(--hair-2);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

.sa-dialog {
  width: min(190px, 100%);
  background: #fff; border: 1px solid var(--hair);
  border-radius: 12px; padding: 16px 16px 13px;
  box-shadow: 0 18px 40px -26px rgba(16,17,25,.5);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sa-dialog-icon { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, #6889FF, #F23CB8); }
.sa-line { height: 6px; border-radius: 3px; background: var(--hair-2); width: 58%; }
.sa-line-wide { width: 84%; }
.sa-btns { display: flex; gap: 7px; margin-top: 4px; }
.sa-btn { width: 46px; height: 17px; border-radius: 5px; background: rgba(16,17,25,.09); }
.sa-btn-go { background: var(--accent); }

.sa-search {
  width: min(210px, 100%);
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--hair);
  border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 14px 32px -24px rgba(16,17,25,.5);
}
.sa-kbd {
  font-family: var(--mono); font-size: 11px; color: var(--body);
  background: var(--paper-2); border: 1px solid var(--hair);
  border-radius: 5px; padding: 2px 6px;
}
.sa-caret { width: 1.5px; height: 15px; background: var(--accent); animation: sa-blink 1.1s steps(1) infinite; }
@keyframes sa-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.sa-row { width: min(210px, 100%); height: 12px; border-radius: 6px; background: rgba(58,83,212,.13); }
.sa-row-short { width: min(150px, 76%); }
@media (prefers-reduced-motion: reduce) { .sa-caret { animation: none; } }

.step-body { padding-right: 6px; }
.step-n { display: inline-block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.step-body h2 { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; margin: 0 0 8px; }
.step-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body); }

.done-phone { width: 100%; max-width: 420px; text-align: left; }
.done-phone h1 { text-align: center; }
.done-phone .done-sub { text-align: center; margin-bottom: 26px; }

.done .foot { width: 100%; margin-top: auto; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; max-width: 460px; gap: 22px; }
  .step-art { height: 150px; }
}

/* ───────────────── the phone form (injected fields live in the markup) ──────
   The only place on the site that still asks for an email: a phone has no file
   to be handed, so this is the only action available there. */

.dl-label { display: block; font-size: 13px; font-weight: 600; color: var(--dark-2); margin-bottom: 6px; }
.dl-input {
  width: 100%; box-sizing: border-box;
  padding: 13px 15px; font-size: 15.5px; font-family: inherit; color: var(--dark-2);
  background: var(--paper-2); border: 1px solid var(--hair-2);
  border-radius: var(--r); outline: none;
}
.dl-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(58,83,212,.16); }
.dl-error { margin-top: 10px; font-size: 13.5px; color: #C42B2B; line-height: 1.45; }
.dl-check {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; font-size: 13.5px; color: var(--body); line-height: 1.45; cursor: pointer;
}
.dl-check input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.dl-check a { color: var(--accent); text-decoration: underline; }
.dl-submit { width: 100%; margin-top: 22px; justify-content: center; background: var(--dark-2); color: #fff; }
.dl-submit:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }
.dl-done { font-size: 15px; color: var(--dark-2); line-height: 1.55; margin: 6px 0 0; }