/* ==========================================================================
   Landing page styles. No framework, no build step, no remote request.

   Palette and easing are the shared launch design tokens. They are identical
   to the ones the Remotion demo template uses, so the page and the video read
   as one piece of work. Change them in :root only.
   ========================================================================== */

/* --------------------------------------------------------------- typeface */
/*
  JetBrains Mono, resolved in this order:
    1. a copy already installed on the visitor's machine (local())
    2. a woff2 you drop into fonts/ (see fonts/README.md)
    3. the platform monospace stack in --font-mono

  Every source is same origin or local. Nothing here reaches a CDN, which is
  what keeps the strict Content-Security-Policy in vercel.json satisfiable.
  If you ship no woff2 the @font-face block simply does not match and the
  fallback stack takes over, which is a supported outcome, not a bug.
*/
@font-face {
  font-family: "JetBrains Mono Local";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src:
    local("JetBrains Mono"),
    local("JetBrainsMono-Regular"),
    url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono Local";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("JetBrains Mono Bold"),
    local("JetBrainsMono-Bold"),
    url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* Shared launch tokens. Do not drift from these. */
  --coral: #d97757;
  --coral-deep: #c6613f;
  --bg: #0b0b0b;
  --frame: #060606;
  --panel: #1a1a19;
  --panel-high: #20201f;
  --border: #383835;
  --dim: #7b7974;
  --text: #e4e3dd;
  --bright: #faf9f5;

  /* Derived, not part of the shared set. --dim sits at 4.3:1 on --bg, which is
     below the 4.5:1 body text floor, so it is used for rules, icons and
     decoration only. --dim-text is the readable secondary tone at 6.2:1. */
  --dim-text: #96948d;

  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --radius: 10px;
  --radius-sm: 6px;
  --measure: 68ch;
  --shell: 1080px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);

  --font-mono:
    "JetBrains Mono Local", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  color-scheme: dark light;
}

/* The dark treatment is the design. Light mode is a faithful inversion for
   people who have asked their operating system for one. */
@media (prefers-color-scheme: light) {
  :root {
    --coral: #b8532f;
    --coral-deep: #97401f;
    --bg: #faf9f5;
    --frame: #f2f1eb;
    --panel: #ffffff;
    --panel-high: #f6f5f0;
    --border: #dcdad2;
    --dim: #8d8b83;
    --dim-text: #615f59;
    --text: #2a2926;
    --bright: #121110;
  }
}

/* -------------------------------------------------------------- baseline */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* No element may push the page sideways. */
  overflow-x: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(
      120% 70% at 50% -18%,
      color-mix(in srgb, var(--coral) 13%, transparent) 0%,
      transparent 62%
    );
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.02rem);
  line-height: 1.65;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
  max-width: 100%;
}

a {
  color: var(--coral);
  text-decoration-color: color-mix(in srgb, var(--coral) 45%, transparent);
  text-underline-offset: 0.22em;
  transition: color 0.18s var(--ease);
}

a:hover {
  color: var(--bright);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: color-mix(in srgb, var(--coral) 32%, transparent);
  color: var(--bright);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.65rem 1rem;
  background: var(--panel-high);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--bright);
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* -------------------------------------------------------------- structure */
.section {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 2.5rem);
  padding-block: var(--section-y);
}

.section + .section {
  padding-block-start: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bright);
}

.icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.section-icon {
  color: var(--coral);
}

.prose {
  max-width: var(--measure);
  margin: 0 0 1rem;
  color: var(--text);
}

.note,
.caption {
  max-width: var(--measure);
  color: var(--dim-text);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------- hero */
.hero {
  padding-block-start: clamp(3rem, 10vw, 6.5rem);
  text-align: left;
}

.wordmark {
  margin: 0 0 1.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--bright);
}

.wordmark::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-end: 0.6rem;
  border-radius: 2px;
  background: var(--coral);
  vertical-align: baseline;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim-text);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.hero-title {
  max-width: 20ch;
  margin: 0 0 1.1rem;
  font-size: clamp(1.9rem, 1.15rem + 3.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--bright);
  text-wrap: balance;
}

.hero-sub {
  max-width: 58ch;
  margin: 0 0 2rem;
  font-size: clamp(0.98rem, 0.93rem + 0.3vw, 1.1rem);
  color: var(--dim-text);
}

.install-strip {
  margin: 0 0 1.8rem;
}

.install-label {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-text);
}

.install-then {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  color: var(--dim-text);
}

/* --------------------------------------------------------- copyable code */
.copy {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  max-width: 46rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--frame);
  overflow: hidden;
}

.copy-code {
  /* The code, and only the code, scrolls sideways. */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--bright);
  white-space: pre;
  tab-size: 2;
}

.copy-code::before {
  content: "$ ";
  color: var(--coral);
}

.copy-btn {
  flex: 0 0 auto;
  padding-inline: 0.95rem;
  border: 0;
  border-inline-start: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim-text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.copy-btn:hover {
  background: var(--panel-high);
  color: var(--bright);
}

.copy-btn[data-copied="true"] {
  color: var(--coral);
}

/* ---------------------------------------------------------------- buttons */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease),
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.btn-primary {
  background: var(--coral);
  color: #0b0b0b;
}

.btn-primary:hover {
  background: var(--coral-deep);
  color: #0b0b0b;
  transform: translateY(-1px);
}

.btn-secondary {
  border-color: var(--border);
  background: var(--panel);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--dim);
  background: var(--panel-high);
  color: var(--bright);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------- demo */
.demo {
  margin: 0;
}

.demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--frame);
  object-fit: cover;
}

.demo-caption {
  margin-top: 0.85rem;
  color: var(--dim-text);
  font-size: 0.85rem;
}

.demo-alt {
  margin: 0;
}

.demo-caption .caption {
  margin: 0.35rem 0 0;
}

/* -------------------------------------------------------------------- why */
.highlight {
  max-width: var(--measure);
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-inline-start: 2px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel);
  color: var(--bright);
}

/* --------------------------------------------------------------- features */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  transition:
    border-color 0.22s var(--ease),
    background-color 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.card:hover {
  border-color: color-mix(in srgb, var(--coral) 45%, var(--border));
  background: var(--panel-high);
  transform: translateY(-2px);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bright);
}

.card-icon {
  color: var(--coral);
}

.card-body {
  margin: 0;
  color: var(--dim-text);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------- install */
.steps {
  display: grid;
  /* minmax(0, 1fr), not auto: an auto track takes its minimum from the widest
     unbreakable command inside it, which pushes the whole page sideways on a
     narrow screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  padding-inline-start: 2.4rem;
  position: relative;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  inset-block-start: 0.1rem;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 700;
}

.step-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bright);
}

.step-body {
  max-width: var(--measure);
  margin: 0 0 0.75rem;
  color: var(--dim-text);
  font-size: 0.9rem;
}

/* Any table dropped into the page scrolls inside its own box. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.table-scroll th,
.table-scroll td {
  padding: 0.6rem 0.85rem;
  border-block-end: 1px solid var(--border);
  text-align: start;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-block-start: 1px solid var(--border);
  margin-block-start: var(--section-y);
  color: var(--dim-text);
  font-size: 0.86rem;
}

.footer-license {
  margin: 0 0 0.45rem;
  max-width: var(--measure);
  color: var(--text);
}

.footer-commercial {
  margin: 0 0 1.1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-bottom: 1.1rem;
}

.footer-link {
  color: var(--dim-text);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--bright);
  text-decoration: underline;
}

.footer-copy {
  margin: 0;
  color: var(--dim);
}

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-start: 50%;
  z-index: 20;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-high);
  color: var(--bright);
  font-size: 0.82rem;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------ small print */
@media (max-width: 32rem) {
  .btn {
    width: 100%;
  }

  .copy-code {
    font-size: 0.86em;
  }
}

/* Motion is decoration here, never information. Removing it costs nothing. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .card:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .card,
  .copy,
  .btn {
    border: 1px solid CanvasText;
  }
}

@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .toast,
  .copy-btn,
  .skip-link {
    display: none;
  }
}