/* =========================================================
   Clipio — the launch page (index.html)
   ---------------------------------------------------------
   Built to Clipio.pdf, a 1440px-wide frame. Every size, gap
   and colour below is measured from that file, which is why
   some of them carry a decimal: at 1440px the page lands on
   the design to the pixel. Under 1440px the same numbers
   scale down (vw terms are "design px / 1440"), and phones
   get their own block at the bottom.

   Standalone on purpose: the dark design shares no colours
   with css/styles.css, and loading that file would only
   mean overriding it rule by rule.
   ========================================================= */

:root {
  --bg:        #0A0908;            /* page fill */
  --white:     #FFFFFF;
  --cream:     #F3F0E5;            /* the pills' and the note's text */
  --blue:      #217EFF;            /* logo, "Auto-Polish" */
  --btn:       #2077EF;            /* Join waitlist */
  --btn-hover: #1A6BD9;
  --btn-press: #155CBD;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
h1, p, figure { margin: 0; }
button, input { font: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 10;
  padding: 8px 14px; border-radius: 999px;
  background: var(--white); color: #000; font-size: 14px; text-decoration: none;
}
.skip:focus { left: 16px; }

/* Left edge of the logo is x=148.4, right edge of the pill x=1290. */
.lp-wrap { width: min(1141.6px, 100% - 32px); margin-inline: auto; }

/* ---------------- top bar ---------------- */
.lp-top { padding-top: 42px; }
.lp-top__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  translate: -.8px 0;                      /* the design's bar is 0.8px left of centre */
}

.lp-logo { width: 89.6px; height: 24.4px; translate: 0 -.5px; }

.lp-top__tag {
  display: inline-flex; align-items: center;
  height: 36.6px; padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  font-size: 13px; font-weight: 400; line-height: 1; color: var(--white);
  white-space: nowrap;
}

/* ---------------- hero ---------------- */
.lp-main { position: relative; }

.lp-hero {
  position: relative; z-index: 1;          /* above the glow */
  display: flex; flex-direction: column; align-items: center;
  width: min(1141.6px, 100% - 32px); margin: 59.7px auto 0;
  text-align: center;
}

.lp-pill {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 23.3px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: #030303;                     /* black + 1% white */
  font-size: 16px; line-height: 1; color: rgba(243, 240, 229, .85);
  white-space: nowrap;
}

.lp-hero h1 {
  margin-top: 15.6px;
  font-size: clamp(32px, 3.964vw, 57.08px);
  line-height: 1.1878;                     /* 67.8px at 57.08px */
  font-weight: 400;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .90);
}
/* Web Inter's italic runs narrower than the design's, so it gets back the
   tracking the upright takes away — "Auto-Polish" is 292px wide in the PDF. */
/* The design's second line starts with a space, which pushes it right. */
.lp-h1__l2 { display: inline-block; translate: 6px 0; letter-spacing: -.0103em; }
.lp-hero h1 em { font-style: italic; color: var(--blue); letter-spacing: .0066em; white-space: nowrap; }

.lp-lede {
  margin-top: 15.7px; max-width: 590px;
  font-size: 16px; line-height: 19px; font-weight: 400; letter-spacing: .0037em;
  color: rgba(255, 255, 255, .85);
}

/* ---------------- the form ----------------
   A 1px rim at 20% white around a 15% white pill, the button inset
   ~4px inside it. */
.lp-form {
  display: flex; align-items: center;
  width: min(427.8px, 100%); height: 47.6px; margin-top: 36.3px;
  padding: 3.8px 3.4px 3.8px 14px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  transition: border-color .15s ease;
}
.lp-form:focus-within { border-color: rgba(255, 255, 255, .45); }

.lp-form input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0; border: 0; outline: none; background: transparent;
  font-size: 16px; color: var(--white);
}
.lp-form input::placeholder { color: rgba(255, 255, 255, .50); opacity: 1; }

.lp-form button {
  flex: none;
  display: inline-flex; align-items: center; gap: 6.7px;
  height: 38px; padding: 0 10.9px 0 11.2px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn); color: var(--white);
  font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: .013em; white-space: nowrap;
  transition: background .15s ease;
}
.lp-form__arrow { flex: none; }
.lp-form button:hover { background: var(--btn-hover); }
.lp-form button:active { background: var(--btn-press); }
.lp-form button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lp-form button[disabled] { opacity: .65; cursor: default; }

.lp-form__noscript {
  margin-top: 36.3px; padding: 12px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  font-size: 14px; color: rgba(243, 240, 229, .85);
}

/* Doubles as the form's live region — see js/launch.js. */
.lp-note {
  margin-top: 9.3px;
  font-size: 14px; line-height: 16.6px;
  color: rgba(243, 240, 229, .70);
}
.lp-note.is-good { color: #7DB2FF; font-weight: 500; }
.lp-note.is-bad  { color: #FF8B7E; }

/* ---------------- promo video ----------------
   An 11px ring of 16% white, radius 41, around the video (radius 30).
   The blue glow is anchored to the frame: it starts 169px above it and
   sits 7px left of centre, exactly as in the design. */
.lp-video {
  position: relative;
  width: min(1025.2px, 100% - 32px);
  margin: 34.7px auto 0;
}

.lp-video__glow {
  position: absolute; z-index: 0; left: 50%; top: 0;
  width: 101.61%; max-width: none; height: auto;
  transform: translate(-50.69%, -41.09%);
  pointer-events: none; user-select: none;
}

.lp-video__frame {
  --pad: clamp(6px, .764vw, 11px);
  --rad: clamp(18px, 2.847vw, 41px);
  position: relative; z-index: 1;
  padding: var(--pad);
  border-radius: var(--rad);
  background: rgba(255, 255, 255, .16);
}

.lp-video__player {
  width: 100%; aspect-ratio: 1003.2 / 564.4;
  object-fit: cover;
  border-radius: calc(var(--rad) - var(--pad));
  background: #000;
  /* A GIF, not a player: no click-to-pause, and no right-click "Show
     controls" to bring the control bar back. */
  pointer-events: none;
}
/* iOS paints its own start-playback button over a video it declined to
   autoplay (Low Power Mode). Hidden, so the poster shows alone instead. */
.lp-video__player::-webkit-media-controls,
.lp-video__player::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* ---------------- footer ---------------- */
.lp-foot { display: flex; flex-direction: column; align-items: center; }

.lp-foot__logo {
  width: clamp(150px, 17.33vw, 249.6px); height: auto;
  margin-top: clamp(110px, 14.78vw, 212.8px);
  translate: -2.2px 0;                     /* the design sits it 2px left of centre */
}

.lp-foot__mark {
  width: min(1440px, 100%); height: auto;
  margin-top: 1.9px;
}

/* =========================================================
   Phones
   ========================================================= */
@media (max-width: 640px) {
  .lp-top { padding-top: 20px; }
  .lp-top__tag { height: 32px; padding: 0 12px; font-size: 12px; }

  .lp-hero { margin-top: 44px; }
  .lp-pill { height: 34px; padding: 0 18px; font-size: 14px; }
  .lp-hero h1 { font-size: clamp(30px, 8.6vw, 40px); letter-spacing: -.025em; }
  .lp-hero h1 br { display: none; }
  .lp-lede { font-size: 15px; line-height: 21px; }

  /* The pill cannot hold a 16px input and a 131px button below ~380px,
     so the form becomes two stacked pills. */
  .lp-form {
    flex-direction: column; gap: 10px; height: auto;
    padding: 0; border: 0; background: none;
  }
  .lp-form input {
    flex: none;                            /* flex:1 would collapse it in a column */
    width: 100%; height: 48px; padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .20); border-radius: 999px;
    background: rgba(255, 255, 255, .15);
  }
  .lp-form input:focus { border-color: rgba(255, 255, 255, .45); }
  .lp-form:focus-within { border-color: transparent; }
  .lp-form button { width: 100%; height: 46px; justify-content: center; }
  .lp-note { margin-top: 12px; line-height: 20px; }

  .lp-video { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-form, .lp-form button { transition: none; }
}