/* Photocraft — one stylesheet, no external requests.
   Palette is the app's own: app/src/main/java/com/wizevideo/editor/ui/theme/Color.kt */

:root {
  --bg: #0b0c11;
  --surface: #15171f;
  --surface-2: #1c1f2a;
  --line: #262a37;
  --text: #e0e2ed;
  --text-muted: #9ea1b0;
  --brand: #88a9ff;
  --brand-dim: #004a95;
  --brand-deep: #002551;
  --radius: 14px;
  --maxw: 1040px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing. Every <img> here carries width/height attributes so the browser can
   reserve the space before the file arrives; without height:auto, max-width shrinks the width to
   the column and the attribute keeps the height, and the picture comes out tall and squeezed. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

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

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 12, 17, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  font-size: 17px;
}
.brand:hover { text-decoration: none; color: var(--brand); }
.nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.nav a { color: var(--text-muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); text-decoration: none; }

/* The one call to action in the header. Sized down from .btn so it sits inside the header's
   62px band without stretching it, and it is the only coloured thing in the row. */
.nav-cta, .nav a.nav-cta { padding: 7px 17px; font-size: 14px; color: #04102c; }
.nav a.nav-cta:hover { color: #04102c; }

/* ---------- type ---------- */

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 14px; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 680; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 650; margin-top: 8px; }
h3 { font-size: 17px; font-weight: 640; }
p { margin: 0 0 16px; }
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-muted); max-width: 62ch; }
.muted { color: var(--text-muted); }
.small { font-size: 14px; }

section { padding: 56px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
.hero { padding: 76px 0 56px; }

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

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--brand);
  color: #04102c;
  font-weight: 640;
  font-size: 15px;
  border: 1px solid var(--brand);
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); filter: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

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

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 6px; font-size: 20px; }
.card p { color: var(--text-muted); font-size: 15px; }
.card .btn-row { margin-top: auto; padding-top: 10px; }

.tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 640;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  margin-bottom: 12px;
}
.tag.live { color: var(--brand); border-color: var(--brand-dim); background: rgba(0, 74, 149, 0.22); }

/* ---------- feature list ---------- */

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 34px; }
.feature h3 { margin-bottom: 6px; }
.feature ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 15px; }
.feature li { margin-bottom: 6px; }

/* ---------- screenshot strip ---------- */

.shots {
  display: grid;
  align-items: end;
  grid-auto-flow: column;
  grid-auto-columns: 232px;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.shots figure { margin: 0; scroll-snap-align: start; }
.shots img { border-radius: 12px; border: 1px solid var(--line); background: #000; }
.shots figcaption { font-size: 13px; color: var(--text-muted); margin-top: 9px; }

/* ---------- roadmap ---------- */

.items { display: grid; gap: 14px; }
.item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.item h3 { margin: 0; }
.item p { margin: 6px 0 0; color: var(--text-muted); font-size: 15px; }
.state { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.bar { height: 5px; border-radius: 999px; background: var(--surface-2); margin-top: 14px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.bar.done span { background: #6ee7a8; }

.note {
  background: rgba(0, 37, 81, 0.35);
  border: 1px solid var(--brand-dim);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--text-muted);
  font-size: 15px;
}
.note strong { color: var(--text); }

/* ---------- policy ---------- */

.prose { max-width: 70ch; }
.prose p { color: var(--text-muted); }
.prose strong { color: var(--text); }
.prose h1 { margin-bottom: 6px; }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 48px;
  color: var(--text-muted);
  font-size: 14px;
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--brand); }

@media (max-width: 600px) {
  .hero { padding: 52px 0 40px; }
  section { padding: 44px 0; }
  .nav { gap: 14px; font-size: 14px; }
  .nav-cta, .nav a.nav-cta { padding: 6px 14px; }
}

/* ---------- vote form ---------- */

.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;
}

.vote fieldset { border: 0; margin: 0 0 22px; padding: 0; display: grid; gap: 2px; }
.vote fieldset label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
}
.vote fieldset label:hover { border-color: var(--brand-dim); }
.vote fieldset label:has(input:checked) {
  border-color: var(--brand);
  background: rgba(0, 74, 149, 0.22);
}
.vote input[type="radio"] { accent-color: var(--brand); width: 17px; height: 17px; margin: 0; }

.vote .field { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.vote textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
  margin-bottom: 22px;
}
.vote textarea:focus, .vote fieldset label:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.vote button { cursor: pointer; font-family: inherit; }