/* ============================================================================
   LelPro Clipper — implementation stylesheet

   Colour / spacing / radius / shadow / motion values come from the imported
   Alellpro design system tokens (_ds/.../styles.css). Everything below is the
   app's own layer: it names the recurring shapes of the design (hard-shadow
   cards, pill controls, micro-labels) so the markup stays free of style soup.
   ========================================================================= */

:root{
  /* Hairlines the design system has no token for. */
  --hairline:#e3ddcc;
  --hairline-blue:#b6d7de;
  --grid-line:#efe9d8;
  --field-border:#c9c2b4;

  /* The design collapses the DS display/sans/mono roles onto one family. */
  --font-ui:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell:1180px;
  --depth-y:4px;
  --depth-c:var(--paper-2);
}

/* --- reset / base ------------------------------------------------------- */

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper-0);
  color:var(--ink-0);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* The DS base layer sets headings in Playfair; the design overrides that. */
h1,h2,h3,h4{
  font-family:var(--font-ui);
  color:var(--ink-0);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.06;
  margin:0;
}

p{ margin:0; text-wrap:pretty; }

a{ color:var(--pink-4); text-decoration:none; }
a:hover{ color:var(--ink-0); }

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

::selection{ background:var(--pink-2); }

:focus-visible{
  outline:2px solid var(--ink-0);
  outline-offset:2px;
  box-shadow:none;
}

.u-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--space-6); }

/* Micro-label: the uppercase caps used throughout the design. */
.eyebrow{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow--tight{ letter-spacing:.16em; }
.eyebrow--pink{ color:var(--pink-4); }
.eyebrow--blue{ color:var(--blue-4); }
.eyebrow--sage{ color:var(--sage-4); }

.meta{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.lede{ font-size:17px; color:var(--ink-1); }
.note{ font-size:12px; color:var(--ink-2); }

/* --- ticker ------------------------------------------------------------- */

.ticker{
  background:var(--ink-0);
  color:var(--paper-0);
  overflow:hidden;
  padding:9px 0;
}
.ticker__track{
  display:inline-flex;
  gap:var(--space-8);
  white-space:nowrap;
  animation:lp-ticker var(--dur-marquee,26s) linear infinite;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ticker__sep{ color:var(--pink-3); }

@keyframes lp-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --- header ------------------------------------------------------------- */

.masthead{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper-0);
  border-bottom:1px solid var(--ink-0);
}
.masthead__inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  column-gap:var(--space-7);
  row-gap:var(--space-3);
  padding-block:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  padding:7px 12px;
  background:var(--paper-0);
  box-shadow:3px 3px 0 var(--ink-0);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:16px;
  color:var(--ink-0);
}
.brand__dot{
  width:9px; height:9px;
  border-radius:var(--radius-circle);
  background:var(--pink-3);
  box-shadow:0 0 0 3px var(--pink-1);
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px var(--space-6);
  margin-left:auto;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav a{ color:var(--ink-1); }
.nav a:hover{ color:var(--ink-0); }

/* --- buttons ------------------------------------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  border:1px solid var(--ink-0);
  border-radius:var(--radius-pill);
  padding:13px 24px;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  background:var(--paper-0);
  color:var(--ink-0);
  box-shadow:0 var(--depth-y) 0 var(--depth-c);
  transition:transform var(--dur-fast) var(--ease-brand),
             box-shadow var(--dur-fast) var(--ease-brand),
             opacity var(--dur-fast) var(--ease-out);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 calc(var(--depth-y) + 1px) 0 var(--depth-c); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--depth-c); }
.btn[disabled],
.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover{ transform:none; box-shadow:0 var(--depth-y) 0 var(--depth-c); }

.btn--ink{ background:var(--ink-0); color:var(--paper-0); --depth-c:var(--pink-4); }
.btn--pink{ background:var(--pink-3); --depth-c:var(--ink-0); }
.btn--blue{ background:var(--blue-2); --depth-c:var(--ink-0); }
.btn--sage{ background:var(--sage-2); --depth-c:var(--ink-0); }
.btn--mint{ background:var(--sage-1); --depth-c:var(--ink-0); }
.btn--ghost{ --depth-c:var(--blue-2); }
.btn--quiet{ --depth-c:var(--paper-2); }
.btn--outline{ --depth-c:var(--pink-3); }

.btn--lg{ padding:16px 30px; font-size:13px; letter-spacing:.08em; --depth-y:5px; }
.btn--lg:active{ transform:translateY(4px); }
.btn--sm{ padding:11px 18px; font-size:11px; }
.btn--xs{ padding:9px 14px; font-size:11px; letter-spacing:.08em; }
.btn--block{ width:100%; padding:12px 16px; font-size:11.5px; }

/* Hero CTAs read as links but wear the button shape. */
.btn--hero{ padding:15px 30px; font-size:13px; letter-spacing:.06em; font-weight:700; --depth-y:5px; }
.btn--hero:active{ transform:translateY(4px); }

/* --- option pills ------------------------------------------------------- */

.pill-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.pill-col{ display:grid; gap:var(--space-2); }

.pill{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-pill);
  padding:10px 16px;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  background:var(--paper-0);
  color:var(--ink-0);
  box-shadow:0 4px 0 var(--paper-2);
  transition:transform var(--dur-fast) var(--ease-brand),
             box-shadow var(--dur-fast) var(--ease-brand),
             background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.pill:hover{ transform:translateY(-1px); }
.pill:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink-0); }
.pill[aria-pressed="true"]{
  background:var(--ink-0);
  color:var(--paper-0);
  box-shadow:0 4px 0 var(--pink-4);
}

/* Wide pill carrying a description line (layout picker). */
.pill--wide{
  display:flex;
  align-items:baseline;
  gap:var(--space-2);
  text-align:left;
  border-radius:var(--radius-card);
  padding:12px 14px;
  text-transform:none;
  letter-spacing:normal;
}
.pill--wide .pill__label{
  font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.pill--wide .pill__desc{ font-size:12px; opacity:.8; }

.pill--xs{ padding:9px 14px; font-size:11px; font-weight:800; }

/* --- automation toggles ------------------------------------------------- */

.toggle{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-card);
  padding:14px;
  cursor:pointer;
  font-family:var(--font-ui);
  background:var(--paper-1);
  box-shadow:0 4px 0 var(--paper-2);
  transition:transform var(--dur-fast) var(--ease-brand),
             box-shadow var(--dur-fast) var(--ease-brand),
             background-color var(--dur-fast) var(--ease-out);
}
.toggle:hover{ transform:translateY(-1px); }
.toggle:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink-0); }
.toggle[aria-pressed="true"]{ background:var(--white); box-shadow:0 4px 0 var(--pink-4); }

.toggle__track{
  flex:0 0 auto;
  width:40px; height:22px;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-pill);
  padding:2px;
  display:flex;
  justify-content:flex-start;
  background:var(--paper-2);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.toggle[aria-pressed="true"] .toggle__track{ background:var(--pink-3); justify-content:flex-end; }
.toggle__knob{
  width:16px; height:16px;
  border-radius:var(--radius-circle);
  background:var(--ink-0);
}
.toggle__label{ display:block; font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--ink-0); }
.toggle__desc{ display:block; font-size:12px; color:var(--ink-1); line-height:1.45; }

/* --- cards -------------------------------------------------------------- */

.card{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-card);
  background:var(--white);
  padding:var(--space-6);
  box-shadow:0 6px 0 var(--paper-2);
}
.card--deep{ box-shadow:0 6px 0 var(--ink-0); }
.card--pink{ background:var(--pink-1); }
.card--blue{ background:var(--blue-1); }
.card--sage{ background:var(--sage-1); }

/* --- hero --------------------------------------------------------------- */

.hero{
  border-bottom:1px solid var(--ink-0);
  background-color:var(--paper-0);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-cell) var(--grid-cell);
}
.hero__inner{ padding-block:var(--space-6); }
.hero__frame{
  border:1px dashed var(--ink-0);
  border-radius:14px;
  padding:clamp(28px,4vw,60px) clamp(20px,4vw,48px);
  position:relative;
}
.hero__sticker{
  display:flex;
  justify-content:flex-end;
  margin-bottom:14px;
}
.sticker{
  display:inline-flex;
  align-items:center;
  transform:rotate(3deg);
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sticker);
  background:var(--pink-2);
  color:var(--ink-0);
  padding:8px 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:2px 2px 0 var(--ink-0);
}
.hero h1{
  max-width:17ch;
  font-size:clamp(36px,6.2vw,72px);
  line-height:1.16;
  letter-spacing:-.04em;
  text-wrap:balance;
  margin-top:var(--space-5);
}
.hero__mark{
  background:var(--pink-2);
  padding:0 .12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero__lede{ margin-top:26px; max-width:58ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:34px; }

.hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:34px;
  margin-top:46px;
  padding-top:26px;
  border-top:1px solid var(--hairline);
}
.stat__value{ font-size:26px; font-weight:800; letter-spacing:-.03em; }

/* --- section scaffolding ------------------------------------------------ */

.section{ padding-block:var(--space-11) 0; }
.section--tight{ padding-block:var(--section-y-tight) 0; }
/* Section terakhir sebelum footer: dulu jarak ini datang dari blok FAQ. */
.section--last{ padding-bottom:var(--space-11); }

.section__head{
  display:flex;
  align-items:flex-end;
  gap:var(--space-6);
  flex-wrap:wrap;
  margin-bottom:28px;
}
.section__head h2{ font-size:clamp(28px,3.6vw,44px); letter-spacing:-.04em; }
.section__head p{ max-width:46ch; color:var(--ink-1); margin-bottom:6px; }

/* --- studio ------------------------------------------------------------- */

.studio{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(340px,100%),1fr));
  gap:var(--space-6);
  align-items:start;
}

.dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px dashed var(--ink-0);
  border-radius:var(--radius-card);
  padding:36px var(--space-6);
  text-align:center;
  cursor:pointer;
  background:var(--paper-0);
  transition:background-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-brand);
}
.dropzone:hover,
.dropzone.is-over{ background:var(--pink-1); transform:translateY(-1px); }
.dropzone__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius:var(--radius-circle);
  border:1px solid var(--ink-0);
  background:var(--pink-2);
  font-size:22px;
  font-weight:800;
  box-shadow:0 4px 0 var(--ink-0);
}
.dropzone__title{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.dropzone__hint{ font-size:12.5px; color:var(--ink-2); }

.divider{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin:var(--space-5) 0;
}
.divider::before,
.divider::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.divider span{
  font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}

.field{
  flex:1 1 260px;
  min-width:0;
  border:1px solid var(--field-border);
  border-radius:var(--radius-pill);
  padding:13px 18px;
  font-family:var(--font-ui);
  font-size:14px;
  background:var(--paper-0);
  color:var(--ink-0);
  outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.field:focus{ border-color:var(--ink-0); box-shadow:0 0 0 3px var(--pink-1); }
.field--sm{ flex-basis:200px; padding:11px 16px; font-size:13px; }

.inline-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.inline-row--lg{ gap:var(--space-3); }

/* YouTube detection card */
.yt{
  margin-top:var(--space-4);
  border:1px solid var(--ink-0);
  border-radius:var(--radius-card);
  background:var(--butter-1);
  padding:var(--space-4);
  display:grid;
  gap:var(--space-3);
}
.yt__head{ display:flex; gap:14px; align-items:flex-start; }
.yt__thumb{
  width:132px;
  flex:0 0 auto;
  aspect-ratio:16/9;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  background-color:var(--ink-0);
  background-size:cover;
  background-position:center;
}
.yt__id{
  font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sage-4);
}
.yt__title{ font-size:15px; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.yt__author{ font-size:12.5px; color:var(--ink-1); }
.yt__embed{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--ink-0);
}
.yt__embed iframe{ width:100%; height:100%; border:0; display:block; }

.wayin{
  border-top:1px solid var(--hairline);
  padding-top:var(--space-3);
  display:grid;
  gap:var(--space-3);
}
.wayin__spec{
  font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
}

.banner{
  margin:0;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:12.5px;
}
.banner--info{ background:var(--blue-1); color:var(--ink-0); }
.banner--error{ border-color:var(--pink-4); background:var(--pink-1); color:var(--pink-4); }
.banner--cost{ background:var(--sage-1); color:var(--ink-0); font-weight:700; }
.banner--warn{ background:var(--butter-1); color:var(--ink-0); }
.banner strong{ font-weight:800; }

/* Chips describing the loaded file. */
.chips{
  margin-top:var(--space-4);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-1);
}
.chip{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-pill);
  padding:6px 12px;
  background:var(--paper-1);
}
.chip--sage{ background:var(--sage-1); }
.chip--blue{ background:var(--blue-1); }
.chip--butter{ background:var(--butter-1); }

/* --- riwayat tugas berbayar --------------------------------------------- */

.hist-wrap{
  margin-top:var(--space-5);
  border:1px solid var(--ink-0);
  border-radius:var(--radius-card);
  background:var(--sage-1);
  padding:var(--space-4);
}
.hist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.hist{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  background:var(--white);
  padding:var(--space-2);
  margin-bottom:var(--space-2);
  box-shadow:0 3px 0 var(--paper-2);
}
.hist:last-of-type{ margin-bottom:0; }
.hist__thumb{
  aspect-ratio:16/9;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-xs);
  background-color:var(--ink-0);
  background-size:cover;
  background-position:center;
}
.hist__body{ min-width:0; }
.hist__title{
  font-size:13px; font-weight:800; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist__meta{
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); margin-top:2px;
}
.hist__meta--dead{ color:var(--pink-4); }
.hist__actions{ display:flex; gap:var(--space-2); align-items:center; }
.hist__del{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-circle);
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-0); color:var(--ink-0);
  font-family:var(--font-ui); font-size:14px; font-weight:800;
  cursor:pointer; padding:0;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.hist__del:hover{ background:var(--pink-2); }

@media (max-width:520px){
  .hist{ grid-template-columns:60px minmax(0,1fr); }
  .hist__actions{ grid-column:1 / -1; justify-content:flex-end; }
}

.preview{ margin-top:var(--space-5); border-radius:var(--radius-sm); overflow:hidden; }
.preview video{
  width:100%;
  display:block;
  border-radius:var(--radius-sm);
  border:1px solid var(--ink-0);
  background:var(--ink-0);
}

/* Render monitor sidebar */
.monitor{ position:sticky; top:96px; }
.monitor__screen{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--ink-0);
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-2);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.monitor__screen canvas{ width:100%; display:block; }
.monitor__status{ margin-top:14px; font-size:13.5px; color:var(--ink-1); }
.monitor__foot{
  margin-top:18px;
  padding-top:var(--space-4);
  border-top:1px solid var(--hairline-blue);
  font-size:12.5px;
  color:var(--ink-1);
}

.bar{
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--paper-2);
  overflow:hidden;
}
.bar--onblue{ background:var(--blue-2); }
.bar--thin{ height:5px; }
.bar__fill{
  height:100%;
  width:0%;
  background:var(--pink-3);
  transition:width var(--dur) var(--ease-brand);
}
.bar--onblue .bar__fill{ background:var(--pink-4); }
.monitor .bar{ margin-top:14px; }

/* --- feature cards ------------------------------------------------------ */

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:var(--space-5);
  align-items:start;
}
.feature h3{ font-size:26px; margin:0 0 6px; }
.feature__lede{ font-size:13.5px; color:var(--ink-1); margin-bottom:var(--space-5); }
.feature__sub{ margin:var(--space-5) 0 var(--space-3); }
.feature__sub--first{ margin-top:0; }
.feature__foot{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:1px solid var(--hairline);
  font-size:12.5px;
  color:var(--ink-1);
}

/* --- viral leaderboard -------------------------------------------------- */

.leader{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--space-3);
  align-items:center;
  width:100%;
  text-align:left;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-card);
  padding:12px 14px;
  cursor:pointer;
  font-family:var(--font-ui);
  background:var(--paper-0);
  box-shadow:0 4px 0 var(--ink-0);
  transition:transform var(--dur-fast) var(--ease-brand),
             box-shadow var(--dur-fast) var(--ease-brand);
}
.leader:hover{ transform:translateY(-1px); box-shadow:0 5px 0 var(--ink-0); }
.leader:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink-0); }
.leader--top{ background:var(--pink-2); }
.leader__rank{ font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--ink-0); }
.leader__body{ min-width:0; }
.leader__name{ display:block; font-size:12.5px; font-weight:800; color:var(--ink-0); }
.leader__why{ display:block; font-size:11.5px; color:var(--ink-1); }
.leader__bar{
  display:block; margin-top:6px; height:5px;
  border-radius:var(--radius-pill);
  background:var(--white);
  border:1px solid var(--ink-0);
  overflow:hidden;
}
.leader__bar span{ display:block; height:100%; background:var(--pink-3); }
.leader__score{ font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--ink-0); }

/* --- action bar --------------------------------------------------------- */

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  align-items:center;
  margin-top:var(--space-6);
}

/* --- clip results ------------------------------------------------------- */

.results{ margin-top:44px; }
.results__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.results__head h3{ font-size:30px; }

.clip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(228px,100%), 1fr));
  gap:var(--space-5);
}

.clip{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-card);
  background:var(--white);
  overflow:hidden;
  box-shadow:0 5px 0 var(--paper-2);
  transition:transform var(--dur-fast) var(--ease-brand),
             box-shadow var(--dur-fast) var(--ease-brand);
}
.clip:hover{ transform:translateY(-2px); box-shadow:0 7px 0 var(--paper-2); }

.clip__stage{
  position:relative;
  background:var(--ink-0);
  border-bottom:1px solid var(--ink-0);
}
.clip__thumb{
  position:absolute; inset:0;
  background-color:var(--ink-0);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.clip__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  background:var(--ink-0);
  object-fit:cover;
}
.clip__tag{
  position:absolute;
  top:10px;
  pointer-events:none;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-pill);
  padding:4px 10px;
  font-size:10px;
  font-weight:800;
}
.clip__tag--name{
  left:10px; background:var(--paper-0);
  letter-spacing:.12em; text-transform:uppercase;
}
.clip__tag--range{ right:10px; background:var(--pink-2); letter-spacing:.06em; }

.clip__body{ padding:var(--space-4); display:grid; gap:var(--space-3); }
.clip__row{
  display:flex;
  justify-content:space-between;
  gap:var(--space-2);
  align-items:center;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.clip__score{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-pill);
  padding:4px 10px;
  background:var(--sage-1);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-0);
}
.clip__why{ text-align:right; }

/* --- cloud (WayinVideo) results ----------------------------------------- */

.cloud-list{ margin-top:var(--space-5); display:grid; gap:var(--space-3); }
.cloud{
  border:1px solid var(--ink-0);
  border-radius:var(--radius-card);
  background:var(--white);
  padding:14px;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:14px;
  align-items:start;
  box-shadow:0 5px 0 var(--paper-2);
}
.cloud__thumb{
  aspect-ratio:16/9;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  background-color:var(--ink-0);
  background-size:cover;
  background-position:center;
}
.cloud__body{ min-width:0; display:grid; gap:var(--space-2); }
.cloud__top{ display:flex; gap:var(--space-2); align-items:baseline; justify-content:space-between; }
.cloud__title{ font-size:14px; font-weight:800; letter-spacing:-.02em; }
.cloud__score{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.cloud__desc{ font-size:12.5px; color:var(--ink-1); }
.cloud__tags{
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
}
.cloud__video{
  width:100%; max-width:320px; display:block;
  border:1px solid var(--ink-0);
  border-radius:var(--radius-sm);
  background:var(--ink-0);
}
.cloud__dl{ justify-self:start; }

/* --- footer ------------------------------------------------------------- */

.footer{ background:var(--ink-0); color:var(--paper-0); }
.footer__inner{
  padding-block:var(--section-y-tight);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-6);
  align-items:center;
  justify-content:space-between;
}
.footer__brand{ font-size:22px; font-weight:800; letter-spacing:-.03em; }
.footer__brand span{ color:var(--pink-3); }
.footer__tag{ margin-top:var(--space-2); font-size:12.5px; color:var(--ink-3); max-width:46ch; }
.footer__legal{
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}

/* --- utilities ---------------------------------------------------------- */

[hidden]{ display:none !important; }

/* --- responsive --------------------------------------------------------- */

@media (max-width:900px){
  .monitor{ position:static; }
  .cloud{ grid-template-columns:1fr; }
  .cloud__thumb{ max-width:220px; }
}

@media (max-width:640px){
  .section{ padding-top:var(--space-9); }
  .hero__stats{ gap:var(--space-6); }
  .nav{ width:100%; margin-left:0; }
  .yt__head{ flex-direction:column; }
  .yt__thumb{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .btn:hover,.btn:active,.pill:hover,.pill:active,
  .toggle:hover,.toggle:active,.leader:hover,.leader:active,
  .clip:hover,.dropzone:hover{ transform:none; }
}