/* Videokr — "Paper Studio" design system
   warm-white paper, ink text, ember accent, forest illustration band,
   handwritten display type and rounded, softly-bordered surfaces. */

:root {
  /* the paper theme is light on purpose: never let a dark-mode browser
     auto-invert it into muddy greys */
  color-scheme: light;
  --bg: #fdfbfc;
  --surface: #ffffff;
  --panel: #f3f3f3;
  --panel-2: #f8f8f8;
  --line: #e7e9ee;
  --line-strong: #d9dee4;
  --line-dash: #e2e9f1;
  --text: #14201e;
  --text-2: #37474a;
  --muted: #64748b;
  --muted-2: #667487;
  --accent: #ff6106;
  /* Filled buttons carry white label text, which needs 4.5:1 against the fill —
     the brighter --accent only reaches 3:1, so buttons use this deeper ember. */
  --accent-btn: #cc4103;
  /* Text-weight ember. Dark enough to clear 4.5:1 on paper and on the soft
     accent pill, where the brighter --accent only reached 3:1. */
  --accent-ink: #c03c06;
  --accent-soft: #fff6ed;
  --accent-pill: #ffe3db;
  --amber: #ffbe50;
  --amber-lit: #fff6a7;
  --green: #0e7a4a;
  --green-soft: #e1f6e7;
  --mint: #c8e9d4;
  --forest: #124236;
  --forest-2: #14463a;
  --plum: #611f20;
  --lime: #c3f53c;
  --danger: #d64545;
  --disabled: #cdcdcd;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --side-w: 256px;
  --content-w: 1180px;
  /* vertical rhythm: every block gap is one of these, so pages stack evenly */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 20px;
  --s5: 28px;
  --s6: 40px;
  --ring: 0 0 0 3px rgba(255, 97, 6, .26);
  --ease: cubic-bezier(.32, .72, .35, 1);
  --shadow-sm: 0 1px 2px rgba(20, 32, 30, .05);
  --shadow: 0 8px 24px rgba(20, 32, 30, .07);
  --shadow-lg: 0 24px 60px rgba(20, 32, 30, .12);
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hand: "Kalam", "Kalam Fallback", "Segoe Script", cursive;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

::selection { background: var(--accent-pill); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0 0 14px; }
code, pre { font-family: var(--mono); }

.wrap { width: min(1160px, 92vw); margin: 0 auto; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row-wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; }
.hidden { display: none !important; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 600;
}
.hand { font-family: var(--hand); font-weight: 700; font-size: 1.3em; line-height: 1.1; color: var(--green); }
.ital { font-family: var(--serif); font-style: italic; color: var(--accent-ink); font-weight: 400; }

/* Handwritten display line, as on the composer: "Add New Video With Videokr". */
.hand-head {
  font-family: var(--hand); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: .04em; color: var(--text); display: flex; align-items: center;
  justify-content: center; gap: 12px; margin: 0 0 52px; text-align: center;
}
.hand-head b { font-weight: 700; }
/* The mark is wider than it is tall, so it is sized off the cap height and
   given room to breathe rather than being squeezed into the line box. */
.hand-head img { display: block; height: .82em; width: auto; flex: none; }
.hand-head .serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 20px; min-height: 40px; border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--accent-btn); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2;
  font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease),
    border-color .16s var(--ease), color .16s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: #b93a02; box-shadow: 0 6px 16px rgba(255, 97, 6, .28); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 0; box-shadow: var(--ring); }
.btn:disabled, .btn.is-disabled {
  background: var(--panel); color: var(--muted-2); border-color: var(--line);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn:disabled:hover, .btn.is-disabled:hover { background: var(--panel); transform: none; box-shadow: none; }
/* links have no disabled state of their own */
a.btn.is-disabled { pointer-events: none; }
.btn-ghost {
  background: var(--surface); border-color: var(--line-strong); color: var(--text); box-shadow: none;
}
.btn-ghost:hover { background: var(--panel-2); border-color: var(--muted-2); box-shadow: none; transform: none; }
.btn-soft { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-pill); box-shadow: none; }
.btn-soft:hover { background: var(--accent-pill); color: var(--accent-ink); box-shadow: none; }
.btn-mint { background: var(--green-soft); color: var(--green); border-color: var(--mint); box-shadow: none; }
.btn-mint:hover { background: var(--mint); color: var(--green); box-shadow: none; }
.btn-danger { background: transparent; border-color: rgba(214, 69, 69, .4); color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: rgba(214, 69, 69, .08); box-shadow: none; }
.btn-sm { padding: 0 14px; min-height: 32px; font-size: 13px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { padding: 0 28px; min-height: 52px; font-size: 16px; }
.btn-block { width: 100%; }
/* a long label would otherwise run past a narrow grid column, since buttons don't wrap */
.btn-wrap { white-space: normal; max-width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; }

/* Amber reward pill: the top-bar lifetime offer. */
.btn-gift {
  background: linear-gradient(103deg, var(--amber) 0%, var(--amber-lit) 46%, var(--amber) 100%);
  color: var(--text); border: 0; font-family: var(--serif); font-weight: 400; font-size: 17px;
  letter-spacing: .01em; padding: 0 22px; min-height: 40px; box-shadow: none;
}
.btn-gift:hover { background: linear-gradient(103deg, #ffb63c 0%, #fff293 46%, #ffb63c 100%); box-shadow: 0 6px 16px rgba(255, 190, 80, .35); }
.btn-gift svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- inputs -- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
input, select, textarea {
  width: 100%; padding: 10px 13px; min-height: 40px; border-radius: var(--radius-sm); font-size: 14px;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); font-family: inherit;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--muted-2); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--panel-2); color: var(--muted); cursor: not-allowed;
}
input[type="color"] { padding: 4px; height: 40px; cursor: pointer; }
input[type="file"] { padding: 8px; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px 16px;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field { margin-bottom: var(--s3); }
/* the hint that sits under a field, so it never touches the control above it */
.field > .tiny { display: block; margin-top: 5px; color: var(--muted); line-height: 1.45; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea {
  border-color: var(--danger); box-shadow: 0 0 0 3px rgba(214, 69, 69, .16);
}
.checkbox {
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; margin-bottom: 0;
  color: var(--text-2); padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: border-color .14s var(--ease), background .14s var(--ease);
}
.checkbox:hover { border-color: var(--muted-2); background: var(--panel-2); }
.checkbox input { width: 16px; height: 16px; min-height: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.checkbox:has(input:checked) { border-color: var(--accent-pill); background: var(--accent-soft); color: var(--accent-ink); }
.switch {
  position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
  color: var(--text-2); cursor: pointer; padding: 0; border: 0; background: none;
}
.switch input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.switch-track {
  position: relative; display: inline-block; width: 40px; height: 22px; flex: none;
  border-radius: 999px; background: var(--line); transition: background .14s var(--ease);
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .14s var(--ease);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.row-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s4); box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--s3); }
/* cards side by side in a grid: the stacked-card margin would stagger their tops */
.grid-2 > .card + .card, .grid-3 > .card + .card, .price-grid > .card + .card { margin-top: 0; }
.card h3 {
  font-size: 15px; margin: 0 0 var(--s3); display: flex; align-items: center; gap: 8px;
}
.card > h3 + p.muted { margin-top: -8px; }
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700; background: var(--accent-pill); color: var(--accent-ink);
}
.pill-warn { background: #fff2d8; color: #a86a00; }
.pill-ok { background: var(--green-soft); color: var(--green); }
.pill-mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }

.chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface);
}
.chip-hot { border-color: var(--accent-pill); color: var(--accent-ink); background: var(--accent-soft); }

.meter { height: 8px; border-radius: 99px; background: var(--panel); overflow: hidden; margin: 10px 0; }
.meter-fill {
  height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-ink), var(--accent));
  transition: width .5s var(--ease);
}
.meter-fill.is-full { background: linear-gradient(90deg, #c33a3a, var(--danger)); }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--text); border: 0; color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 600; z-index: 999; box-shadow: var(--shadow-lg);
}
.toast-err { background: var(--danger); }

/* ---------------------------------------------------------------- landing -- */
.nav {
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px);
  background: rgba(253, 251, 252, .88); border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.brand img { display: block; height: 28px; width: auto; }
.brand-mark { width: 26px; height: 26px; flex: none; background: url("/brand/mark-flat.png") center/contain no-repeat; }
.nav-links { display: flex; gap: 24px; font-size: 14px; font-weight: 600; }
.nav-links a { text-decoration: none; color: var(--muted); transition: color .15s ease; }
.nav-links a:hover { color: var(--text); }

.glow::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 1;
  background:
    radial-gradient(900px 520px at 82% -10%, rgba(255, 190, 80, .18), transparent 66%),
    radial-gradient(760px 620px at 0% 34%, rgba(18, 141, 87, .07), transparent 62%);
}
.glow > * { position: relative; z-index: 1; }

.hero { padding: 70px 0 34px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 44px; align-items: center; }
.hero h1 { font-family: var(--hand); font-weight: 700; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.1; letter-spacing: .01em; margin: 18px 0 18px; }
.hero h1 .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.hero p.lede { font-size: 18px; color: var(--muted); max-width: 31em; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--accent-pill);
  background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.trust { font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.trust .stars { color: var(--amber); }
.hero-art { position: relative; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-note {
  position: absolute; background: var(--surface); color: var(--text); border-radius: 14px;
  padding: 11px 14px; font-family: var(--hand); font-weight: 700; font-size: 17px; line-height: 1.2; max-width: 180px;
  box-shadow: var(--shadow); border: 1px solid var(--line); z-index: 3;
}
.hero-note small {
  display: block; font-family: var(--sans); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-top: 6px; font-weight: 700;
}
.hero-note-1 { top: -34px; left: -40px; transform: rotate(-4deg); }
.hero-note-2 { bottom: -40px; right: -26px; transform: rotate(3deg); }
.hero-demo { margin: 40px auto 0; width: min(920px, 92vw); }
.hero-demo .sf-player { box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); overflow: hidden; }

/* Stand-in for the film until the player runtime is fetched. It reserves the exact
   16:9 box the player will fill, so mounting it shifts nothing. */
.demo-poster {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: #0b0908;
  box-shadow: var(--shadow-lg);
}
.demo-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-poster-play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  background: rgba(11, 9, 8, .62); border: 2px solid rgba(255, 255, 255, .9);
}
.demo-poster-play::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  transform: translateX(3px);
}
.demo-poster:hover .demo-poster-play { background: rgba(255, 97, 6, .9); }

.marquee {
  margin-top: 46px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--accent-soft); overflow: hidden; padding: 12px 0;
  /* words slid off a hard edge mid-letter, so both ends fade out */
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-track {
  display: flex; gap: 32px; white-space: nowrap; animation: sf-scroll-x 28s linear infinite;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
}
@keyframes sf-scroll-x { to { transform: translateX(-50%); } }

.section { padding: 78px 0; border-top: 1px solid var(--line); }
.section h2 { font-family: var(--hand); font-weight: 700; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.12; letter-spacing: .01em; margin: 10px 0 14px; }
.section h2 .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.section-head { max-width: 34em; margin-bottom: 36px; }
.section-lede { color: var(--muted); max-width: 40em; margin-bottom: 28px; }
.section-alt { background: var(--panel-2); }

.paper {
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.paper:nth-child(1) { transform: rotate(-.6deg); }
.paper:nth-child(3) { transform: rotate(.6deg); }
.paper:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow); }
.paper .no { font-family: var(--hand); font-weight: 700; font-size: 26px; color: var(--accent); }
.paper h3 { font-size: 20px; margin: 4px 0 8px; }
.paper p { font-size: 14px; color: var(--muted); margin: 0; }

.feature { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.feature:hover { border-color: var(--accent-pill); transform: translateY(-3px); box-shadow: var(--shadow); }
.feature h3 { font-size: 15px; }
.feature p { font-size: 14px; color: var(--muted); margin: 0; }
.feature-ico {
  width: 36px; height: 36px; border-radius: 11px; margin-bottom: 12px;
  background: var(--accent-soft); display: grid; place-items: center; font-size: 17px; color: var(--accent);
}
/* one art height across the row, so every card's heading starts on the same line */
.feature-art {
  display: block; width: auto; max-width: 168px; height: 104px; object-fit: contain;
  object-position: left bottom; margin-bottom: 12px;
}

.compare table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.compare th, .compare td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); }
/* 11px uppercase needs the darker ink to clear 4.5:1 over the tinted "us" column */
.compare th { color: var(--text-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare .col-us { background: var(--accent-soft); }
.yes { color: var(--green); font-weight: 800; }
.no { color: var(--muted-2); }

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); padding: 26px; }
/* the call to action sits on the card floor, so all four line up */
.price-card > .btn { margin-top: auto; }
.price-card.hot { border-color: var(--accent); position: relative; overflow: hidden; background: linear-gradient(180deg, var(--accent-soft), var(--surface)); }
.price-card.hot::after {
  content: "Lifetime deal"; position: absolute; top: 16px; right: -46px; transform: rotate(38deg);
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; padding: 6px 46px;
}
.price-card h3 { font-size: 22px; }
.price { font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1; letter-spacing: -.02em; }
.price s { font-size: 24px; color: var(--muted-2); }
.price small { font-size: 14px; font-weight: 600; color: var(--muted); font-family: var(--sans); }
.price-inr { font-size: 12px; color: var(--muted); margin: 4px 0 0; font-weight: 600; }
.price-list { list-style: none; padding: 0; margin: 18px 0 22px; font-size: 14px; color: var(--text-2); }
.price-list li { padding: 6px 0 6px 24px; position: relative; }
.price-list li::before { content: "✔"; position: absolute; left: 0; color: var(--green); }
.seats { height: 7px; border-radius: 99px; background: var(--panel); overflow: hidden; margin: 14px 0 6px; }
.seats i { display: block; height: 100%; background: var(--accent); }
.ladder { display: flex; gap: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; margin: 0; font-weight: 600; }
.ladder b { color: var(--accent-ink); }

/* The answers keep a readable measure, but the block starts on the same left
   edge as every other section instead of being centred on its own. */
.faq-wrap > .section-head, .faq-wrap > .faq { max-width: 780px; }
.faq { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

.code-block {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 13px; overflow-x: auto; color: var(--text-2);
  /* a snippet that runs off the edge looks truncated, so it wraps instead */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.final { text-align: center; }
.footer { padding: 30px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.social { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.social a {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.social a:hover { color: var(--accent); border-color: var(--accent); }
.social svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .hero-grid, .price-grid { grid-template-columns: 1fr; }
  .hero-note { display: none; }
  .nav-links { display: none; }
}

/* The narrowest phones (320px) could not hold the wordmark plus both nav
   buttons, and the price button pushed a horizontal scrollbar onto the page. */
@media (max-width: 400px) {
  .nav-inner { gap: 8px; }
  .brand img { height: 24px; }
  .nav-inner .btn-sm { padding: 0 11px; font-size: 12.5px; }
}

/* -------------------------------------------------------------- auth page -- */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center; position: relative; z-index: 2;
  padding: clamp(16px, 4vw, 30px);
}
.auth-card {
  /* 94vw ignored the shell's padding and pushed a scrollbar onto phones */
  width: min(430px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow);
}
.auth-card h1 { font-family: var(--hand); font-weight: 700; font-size: 30px; letter-spacing: .01em; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--panel); padding: 4px; border-radius: 999px; }
.auth-tab {
  flex: 1; padding: 9px; border: 0; background: transparent; color: var(--muted);
  border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit;
}
.auth-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.form-error { color: var(--danger); font-size: 13px; min-height: 18px; font-weight: 600; }
.auth-aside { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }

/* -------------------------------------------------------------- dashboard -- */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; background: var(--bg); }
.app.side-collapsed { --side-w: 84px; }

.side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--surface); padding: 22px 14px 18px;
  /* above the sticky top bar so the collapse pill on its edge is never covered */
  display: flex; flex-direction: column; gap: 2px; z-index: 22; overflow-y: auto;
  scrollbar-width: thin;
}
.side::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 0;
  border-right: 1px dashed var(--line-dash);
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 20px; }
.side-head .brand img { height: 30px; }
/* Fixed rather than absolute: the sidebar scrolls its own overflow, which would
   clip the half of the pill that hangs outside it. */
.side-collapse {
  position: fixed; top: 26px; left: calc(var(--side-w) - 15px); z-index: 6; width: 30px; height: 30px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); font-family: inherit; padding: 0;
}
.side-collapse:hover { color: var(--text); border-color: var(--line-strong); }
.side-collapse svg { width: 14px; height: 14px; transition: transform .18s ease; }
.side-collapsed .side-collapse svg { transform: rotate(180deg); }

.side-nav { display: grid; gap: 4px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  text-decoration: none; padding: 10px 12px; border: 0; border-radius: var(--radius); background: transparent;
  color: var(--muted); font-family: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-item .ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px; background: #eef1f6;
  display: grid; place-items: center; color: #64748b; transition: background .16s ease, color .16s ease;
}
.nav-item .ico svg { width: 18px; height: 18px; }
.nav-item:hover { background: var(--panel-2); color: var(--text-2); }
.nav-item:hover .ico { background: #e6eaf2; color: var(--text-2); }
.nav-item:focus-visible { outline: 0; box-shadow: var(--ring); }
/* the active row keeps the same type size as its siblings so the column of
   labels never shifts sideways when you change view */
.nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 800; }
.nav-item.active .ico { background: #ffd9c5; color: var(--accent); }
.nav-item .tag {
  margin-left: auto; padding: 2px 9px; border-radius: 8px; background: var(--accent-pill);
  color: var(--accent-ink); font-size: 12px; font-weight: 700; font-family: var(--sans);
}
.side-label {
  padding: 16px 12px 6px; font-size: 11px; font-weight: 800; color: var(--muted-2);
  letter-spacing: .13em; text-transform: uppercase;
}
.side-spacer { flex: 1 1 auto; min-height: 20px; }

.side-more {
  display: flex; align-items: center; gap: 14px; padding: 11px 12px; border: 0; background: transparent;
  color: var(--text); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; border-radius: var(--radius);
}
.side-more:hover { background: var(--panel-2); }
.side-more svg { width: 22px; height: 22px; color: var(--muted); }

.dev-card {
  display: flex; gap: 12px; align-items: flex-start; background: var(--panel);
  border-radius: var(--radius); padding: 12px; text-decoration: none; color: var(--text);
  transition: background .16s ease;
}
.dev-card:hover { background: #ececec; }
.dev-card .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface);
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.dev-card .ico svg { width: 20px; height: 20px; color: var(--accent); }
.dev-card b { display: block; font-size: 13px; font-weight: 700; }
.dev-card span { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; }

.side-plan {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 8px 0;
  border-top: 1px dashed var(--line-dash); text-decoration: none; color: var(--text);
}
.side-plan svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.side-plan b { display: block; font-size: 15px; font-weight: 700; }
.side-plan span { display: block; font-size: 13px; color: var(--muted); line-height: 1.25; }
.side-plan .caret { margin-left: auto; color: var(--muted-2); }

.side-collapsed .side-head .brand img { content: url("/brand/mark-flat.png"); height: 22px; }
/* The icon lives in a span too, so only the label spans may be hidden. */
.side-collapsed .nav-item span:not(.ico), .side-collapsed .side-label,
.side-collapsed .side-more span, .side-collapsed .dev-card div, .side-collapsed .side-plan div,
.side-collapsed .side-plan .caret { display: none; }
.side-collapsed .nav-item, .side-collapsed .side-more { justify-content: center; padding-left: 0; padding-right: 0; }
.side-collapsed .side-head, .side-collapsed .side-plan { justify-content: center; }
.side-collapsed .dev-card { justify-content: center; }

/* Top bar ------------------------------------------------------------------ */
/* clip, not hidden: `overflow: hidden` would make this a scroll container and
   break the sticky top bar inside it */
.main { position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
.topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s3);
  padding: 14px clamp(16px, 2.4vw, 34px); position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px dashed var(--line-dash);
}
.top-help {
  display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0;
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text); cursor: pointer;
  text-decoration: none; padding: 8px 6px;
}
.top-help svg { width: 19px; height: 19px; }
.top-help:hover { color: var(--accent); }
.top-help { border-radius: var(--radius-pill); font-size: 15px; padding: 8px 12px; }
.top-help:hover { background: var(--panel-2); }
/* The chip carries name and plan on one line: a badge hanging below the bar
   collided with the page heading underneath it. */
.user-chip {
  display: inline-flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid transparent; border-radius: var(--radius-pill); padding: 5px 8px 5px 5px;
  text-decoration: none; color: var(--text); max-width: 260px;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.user-chip:hover { background: #ececec; border-color: var(--line-strong); }
.user-chip:focus-visible { outline: 0; box-shadow: var(--ring); }
.user-chip .avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--plum); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: none;
}
.user-chip b {
  font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip .plan-badge {
  flex: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: 11px; font-weight: 700;
  color: var(--text-2); white-space: nowrap; letter-spacing: .02em;
}
.user-chip .plan-badge.is-paid { background: var(--accent-soft); border-color: var(--accent-pill); color: var(--accent-ink); }

/* Content ------------------------------------------------------------------ */
/* Working area is centred and capped: on a wide monitor the cards used to
   stretch edge to edge while the composer stayed narrow, which read as broken. */
.main-body {
  /* the bottom pad clears the forest band so cards never sit on the green */
  flex: 1 1 auto; padding: var(--s5) clamp(16px, 2.4vw, 34px) calc(30vh + 24px);
  position: relative; z-index: 2;
}
.main-body > .view, .main-body > .view-wrap { width: min(var(--content-w), 100%); margin: 0 auto; }
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s5); flex-wrap: wrap;
}
.page-head h1 { font-family: var(--hand); font-weight: 700; font-size: 32px; letter-spacing: .01em; margin: 0; }
.page-head > div > p { margin: 2px 0 0; }
.page-head .row { flex-wrap: wrap; }
.top-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* a field that belongs in a toolbar, not a form column */
.input-sm { width: auto; min-width: 128px; max-width: 168px; }
/* a search box shouldn't stretch the width of a table */
.field-search { max-width: 420px; }
.view { display: none; }
/* Pages whose views sit straight inside .main (the admin portal) still need
   the dashboard's breathing room. */
.main > .view {
  padding: var(--s5) clamp(16px, 2.4vw, 34px) calc(30vh + 24px); position: relative; z-index: 2;
}
.main > .view > * { width: min(var(--content-w), 100%); margin-left: auto; margin-right: auto; }
.view.active { display: block; }

/* Segmented switch: "Player Control | Analytic Dashboard". */
.seg {
  display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 5px; box-shadow: var(--shadow-sm); margin: 0 auto var(--s5);
}
.seg button {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--muted); min-height: 34px;
  padding: 0 16px; border-radius: var(--radius-pill);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.seg button.active { background: var(--accent-pill); color: var(--accent-ink); }
.seg button:hover:not(.active) { background: var(--panel-2); color: var(--text-2); }
.seg button:focus-visible { outline: 0; box-shadow: var(--ring); }
.seg svg { width: 17px; height: 17px; }
.seg-wrap { display: flex; justify-content: center; }

/* Composer ---------------------------------------------------------------- */
.composer {
  width: min(820px, 100%); margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s4) clamp(16px, 2vw, 26px) var(--s5);
  box-shadow: var(--shadow);
}
.composer-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-bottom: var(--s4); flex-wrap: wrap;
}
/* Roomy enough that a label never sits in the rounded corner of the group,
   where the curve reads as if the text were clipped. */
.seg-tabs {
  display: inline-flex; align-items: center; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 5px; flex: none;
}
.seg-tabs button {
  border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px;
  font-weight: 700; color: var(--muted); padding: 0 18px; min-height: 34px; border-radius: 11px;
  position: relative; white-space: nowrap; transition: color .16s var(--ease), background .16s var(--ease);
}
.seg-tabs button:hover:not(.active) { color: var(--text-2); }
.seg-tabs button:focus-visible { outline: 0; box-shadow: var(--ring); }
.seg-tabs button + button::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line-strong);
}
.seg-tabs button.active { background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm); }
.seg-tabs button.active::before, .seg-tabs button.active + button::before { display: none; }

.composer-panel { display: none; }
.composer-panel.active { display: block; }
/* The title box was a 300px slab of grey; it now sizes to the work in it. */
.composer-field {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 20px 46px; position: relative; min-height: 92px;
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.composer-field + .composer-field { margin-top: var(--s3); }
/* The box itself is the control here, so it carries the focus ring. Left to the
   global input rule, the ring was painted around the bare text node instead —
   a rounded orange outline hugging the words with no padding, sitting inside the
   field and cutting across its own buttons. */
.composer-field:focus-within {
  border-color: var(--accent-pill); background: var(--surface); box-shadow: var(--ring);
}
.composer-field textarea:focus, .composer-field input:focus, .composer-field select:focus {
  box-shadow: none; border-radius: 0;
}
/* Only the title panel parks buttons in its bottom-right corner; the others were
   holding a strip of empty grey where those buttons would have been. */
.composer-panel[data-panel="project"] .composer-field,
.composer-panel[data-panel="source"] .composer-field { padding-bottom: 16px; min-height: 0; }
.composer-field textarea, .composer-field input, .composer-field select {
  width: 100%; background: transparent; border: 0; padding: 0; font-size: 17px; color: var(--text);
  resize: none; min-height: 0;
}
.composer-field textarea:focus, .composer-field input:focus, .composer-field select:focus { outline: 0; }
.composer-field textarea::placeholder, .composer-field input::placeholder { color: var(--muted); font-size: 17px; }
.composer-field .field-actions {
  position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.field-dot {
  width: 34px; height: 34px; border-radius: 999px; background: var(--accent); color: #fff; border: 0;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(255, 97, 6, .3);
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.field-dot:hover { background: #f05500; transform: translateY(-1px); }
.field-dot svg { width: 15px; height: 15px; }
.field-btn {
  width: 34px; height: 34px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer; color: var(--muted); box-shadow: var(--shadow-sm);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.field-btn svg { width: 18px; height: 18px; }
.field-btn:hover { color: var(--danger); border-color: rgba(214, 69, 69, .35); }

.file-row {
  display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); background: var(--surface);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 9px 14px;
  min-width: 0; flex-wrap: wrap; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.file-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-row .ico { width: 30px; height: 30px; border-radius: 9px; background: #d9f0fb; color: #2196c9; display: grid; place-items: center; flex: none; }
.file-row .ico svg { width: 17px; height: 17px; }
.file-row b { font-size: 14.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.file-row .cap {
  background: var(--green-soft); color: #15683f; border-radius: var(--radius-pill); padding: 2px 10px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
/* The image cap sits beside the video one, so it must not read as the same limit. */
.file-row .cap-img { background: var(--accent-pill); color: var(--accent-ink); }
.file-row .ico.ico-img { background: #ffe3db; color: var(--accent); }
.file-row .box { display: none; }
.file-row .box.on {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; color: var(--green);
}
.file-row input[type="file"] { display: none; }
.file-row .filepick-name { max-width: 220px; }

/* Native file inputs render a fixed-width control that truncates both the
   button and the filename, so every picker uses our own button plus a name
   slot that can shrink without clipping the caption beside it. */
.filepick {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; min-width: 0; flex-wrap: wrap;
}
.filepick input[type="file"] {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none;
}
.filepick-btn {
  flex: none; margin: 0; cursor: pointer; white-space: nowrap; font-family: inherit;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-2);
}
.filepick-btn:hover { border-color: var(--accent); color: var(--accent); }
.filepick-btn:disabled { color: var(--muted-2); border-color: var(--line); cursor: not-allowed; }
.filepick input[type="file"]:focus-visible + .filepick-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.filepick-name {
  min-width: 0; flex: 1 1 auto; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filepick-name.chosen { color: var(--text-2); font-weight: 600; }
.file-row label { margin: 0; cursor: pointer; }
.composer-foot { display: flex; justify-content: flex-end; margin-top: var(--s4); }
.composer-foot .btn { border-radius: var(--radius); padding: 0 34px; min-height: 48px; font-size: 15px; }

/* Forest illustration band across the bottom of the working area (never the
   sidebar, which stays paper-white the whole way down). */
/* The band is scenery: it sits at the very bottom of the page and fades upward,
   so it scrolls away with the content instead of being pinned to the glass. */
.hills {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 34vh;
  pointer-events: none; z-index: 0; overflow: hidden; opacity: .92;
  mask-image: linear-gradient(180deg, transparent 0, #000 42%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42%);
}
.hills--full { position: fixed; left: 0; height: 40vh; }
.hills svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
.hills img { position: absolute; display: block; }
.hills .prop-glass { left: 8%; bottom: 14%; width: 48px; opacity: .9; }
.hills .prop-specs { right: 3%; bottom: 9%; width: 104px; opacity: .9; }
@media (max-width: 900px) { .hills { display: none; } }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--s3);
  margin-bottom: var(--s5);
}
.stat {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s3) var(--s4) var(--s4); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-pill);
}
.stat:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.stat .k {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .13em;
  font-weight: 800; display: block; margin-bottom: 2px;
}
.stat .v {
  font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* A grid column is min-content wide by default, so a wide admin table dragged the
   whole page sideways in the 900-1100px band the phone rules never reached. The
   table scrolls in its own pane instead. */
.main, .main-body, .main > .view { min-width: 0; }
#users-body, #videos-body, #purchases-body, #overage-body, #audit-body { overflow-x: auto; }
#storage-body { min-width: 0; overflow-x: auto; }

table.data {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.data th, table.data td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.data tr:last-child td { border-bottom: 0; }
table.data th {
  color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 800; background: var(--panel-2); white-space: nowrap;
}
table.data td .btn { vertical-align: middle; }
table.data td .row { flex-wrap: wrap; }
table.data tbody tr { transition: background .14s var(--ease); }
table.data tbody tr:hover td { background: var(--accent-soft); }
table.data td b { font-weight: 700; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data td a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
table.data td a:hover { color: var(--accent); border-bottom-color: var(--accent-pill); }

#storage-body .storage-table { table-layout: fixed; font-size: 12px; }
#storage-body .storage-table th,
#storage-body .storage-table td { padding: 9px 8px; }
#storage-body .storage-table th {
  white-space: nowrap; overflow-wrap: normal; line-height: 1.2;
}
#storage-body .storage-table td {
  overflow-wrap: anywhere; word-break: break-word; vertical-align: top;
}
#storage-body .storage-table th:nth-child(1),
#storage-body .storage-table td:nth-child(1) { width: 9%; }
#storage-body .storage-table th:nth-child(2),
#storage-body .storage-table td:nth-child(2) { width: 15%; }
#storage-body .storage-table th:nth-child(3),
#storage-body .storage-table td:nth-child(3) { width: 10%; }
#storage-body .storage-table th:nth-child(4),
#storage-body .storage-table td:nth-child(4) { width: 7%; }
#storage-body .storage-table th:nth-child(5),
#storage-body .storage-table td:nth-child(5) { width: 13%; }
#storage-body .storage-table th:nth-child(6),
#storage-body .storage-table td:nth-child(6) { width: 8%; }
#storage-body .storage-table th:nth-child(7),
#storage-body .storage-table td:nth-child(7) { width: 9%; }
#storage-body .storage-table th:nth-child(8),
#storage-body .storage-table td:nth-child(8) { width: 9%; }
#storage-body .storage-table th:nth-child(9),
#storage-body .storage-table td:nth-child(9) { width: 20%; }
#storage-body .storage-table td.storage-target,
#storage-body .storage-table td.storage-error {
  overflow-wrap: normal; word-break: normal;
}
#storage-body .storage-actions {
  display: table-cell; vertical-align: top;
}
#storage-body .storage-actions .btn {
  display: inline-flex; width: auto; min-height: 28px; margin: 0 2px 4px 0;
  padding: 0 8px; font-size: 11px; white-space: nowrap;
}

@media (max-width: 900px) {
  #storage-body .storage-table,
  #storage-body .storage-table tbody,
  #storage-body .storage-table tr,
  #storage-body .storage-table td { display: block; width: 100%; }
  #storage-body .storage-table td:nth-child(n) { width: 100%; }
  #storage-body .storage-table thead { display: none; }
  #storage-body .storage-table tbody tr { padding: 10px 12px; }
  #storage-body .storage-table td {
    display: grid; grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
    gap: 10px; align-items: start; padding: 5px 0; border-bottom: 0;
  }
  #storage-body .storage-table td::before {
    content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 800;
    letter-spacing: .08em; line-height: 1.3; text-transform: uppercase;
  }
  #storage-body .storage-table td.storage-actions {
    display: block; border-top: 1px dashed var(--line-dash); margin-top: 6px; padding-top: 9px;
  }
  #storage-body .storage-table td.storage-actions::before {
    display: block; margin-bottom: 6px;
  }
  #storage-body .storage-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  #storage-body .storage-actions .btn { width: 100%; min-height: 32px; font-size: 12px; }
}

.thumb-cell { width: 96px; }
.thumb-cell img, .thumb-ph { width: 84px; height: 48px; object-fit: cover; border-radius: 9px; background: var(--panel); display: block; }
/* A video with no poster still needs to look deliberate rather than broken. */
.thumb-ph {
  display: grid; place-items: center; border: 1px dashed var(--line-strong);
  background: repeating-linear-gradient(135deg, var(--panel-2) 0 9px, var(--panel) 9px 18px);
}
.thumb-ph::after {
  content: ""; width: 26px; height: 26px; opacity: .5;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1b3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='3'/%3E%3Cpath d='M15.5 11l6-3.5v9l-6-3.5z'/%3E%3C/svg%3E");
}
.vid-shot .thumb-ph::after { width: 34px; height: 34px; }
/* Empty states read as a deliberate invitation, not a missing table. */
.empty {
  display: grid; justify-items: center; gap: 6px; padding: 46px 28px; text-align: center;
  color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--panel-2)); font-size: 14px;
}
.empty::before {
  content: ""; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 4px;
  background: var(--accent-soft) center/20px 20px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd571d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='3'/%3E%3Cpath d='M15.5 11l6-3.5v9l-6-3.5z'/%3E%3C/svg%3E");
}
.empty b { display: block; color: var(--text); font-size: 15px; }
.empty span { display: block; max-width: 42ch; }
.empty .btn { margin-top: var(--s2); }
/* The mark matches what is missing, so a blank leads pane does not show a
   camera. */
.empty.is-chart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd571d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M8 15v-3M12.5 15V8M17 15v-5'/%3E%3C/svg%3E");
}
.empty.is-list::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd571d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M4 12h10M4 17h6'/%3E%3Cpath d='M17 10l4 2.5-4 2.5z'/%3E%3C/svg%3E");
}
.empty.is-folder::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd571d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5A1.5 1.5 0 014.5 6h4l2 2.5h7A1.5 1.5 0 0119 10v7a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 013 17z'/%3E%3C/svg%3E");
}
.empty.is-mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd571d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2.5'/%3E%3Cpath d='M4 8l8 5 8-5'/%3E%3C/svg%3E");
}
.empty.is-hook::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd571d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v5a3 3 0 003 3h1'/%3E%3Cpath d='M17 20v-5a3 3 0 00-3-3h-1'/%3E%3Ccircle cx='7' cy='3.5' r='1.6'/%3E%3Ccircle cx='17' cy='20.5' r='1.6'/%3E%3C/svg%3E");
}
.empty.is-bad { border-color: rgba(214, 69, 69, .4); background: linear-gradient(180deg, var(--surface), #fff7f7); }
.empty.is-bad::before {
  background-color: #fdecec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
}

/* A pane that is fetching says so with motion, so it never looks stalled. */
.loading {
  display: flex; align-items: center; gap: 10px; padding: 26px 4px; color: var(--muted);
  font-size: 14px; font-weight: 600;
}
.loading::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 999px;
  border: 2px solid var(--accent-pill); border-top-color: var(--accent);
  animation: sf-spin .7s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 32, 30, .38); display: grid; place-items: center;
  padding: 24px; z-index: 200; overflow: auto; backdrop-filter: blur(2px);
}
.modal {
  width: min(1140px, 96vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 0; max-height: 92vh; overflow: auto; box-shadow: var(--shadow-lg);
  animation: sf-modal-in .22s var(--ease);
}
@keyframes sf-modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.modal > .row.spread {
  position: sticky; top: 0; z-index: 4; background: var(--surface);
  border-bottom: 1px solid var(--line); padding: var(--s4) var(--s4) var(--s3);
  margin: 0; align-items: center !important;
}
.modal h2 { font-family: var(--hand); font-weight: 700; font-size: 26px; letter-spacing: .01em; margin: 0; }
/* A long unbreakable heading (an email address) would otherwise push the close
   button past the gutter on a phone. */
.modal > .row.spread > h2 { min-width: 0; overflow-wrap: anywhere; }
.modal > .row.spread > .btn { flex: 0 0 auto; }
/* The modal has no padding of its own so the header and footer can sit flush and
   stick. Everything else needs the gutter added back, or its text runs into the
   border. */
.modal > *:not(.row.spread):not(.modal-foot) { padding-left: var(--s4); padding-right: var(--s4); }
.modal > *:last-child:not(.modal-foot) { padding-bottom: var(--s4); }
.modal > .row.spread + * { padding-top: var(--s3); }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4);
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
  padding: var(--s3) var(--s4) var(--s4); z-index: 4; flex-wrap: wrap;
}
.modal-foot .btn-danger { margin-right: auto; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 18px; flex-wrap: wrap; }
.tabs button {
  background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  padding: 9px 12px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit;
}
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.editor-grid {
  display: grid; grid-template-columns: 192px minmax(0, 1fr) minmax(0, 348px);
  gap: var(--s4); align-items: start; margin-top: var(--s4);
}
.sec-nav {
  display: grid; gap: 2px; position: sticky; top: 74px; padding: 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.sec-nav button {
  text-align: left; background: transparent; border: 0; border-radius: 9px; cursor: pointer;
  padding: 8px 11px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--muted);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.sec-nav button:hover:not(.active) { background: var(--surface); color: var(--text-2); }
.sec-nav button.active { background: var(--accent-pill); color: var(--accent-ink); }
.sec-nav button:focus-visible { outline: 0; box-shadow: var(--ring); }
/* Each editor section is a card of its own, so the middle column reads as a
   sheet of settings rather than fields floating on the modal. */
.sec-panels {
  min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
}
.sec-panels > .tab-panel.active > p.muted:first-child { margin-top: 0; }
.sec-panels h3 { font-size: 14px; margin: var(--s4) 0 var(--s2); }
.sec-panels > .tab-panel > h3:first-child { margin-top: 0; }
.sec-preview .card { position: sticky; top: 74px; }
.sec-preview #preview { margin-bottom: var(--s3); }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.branding-head { align-items: flex-start; margin-bottom: var(--s4); }
.branding-head h3 { margin: 0 0 4px; font-size: 21px; }
.branding-head p { margin: 0; }
.branding-head .btn span { font-size: 14px; margin-right: 4px; }
.panel-head {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  margin-bottom: var(--s4);
}
.panel-head h3 { margin: 0 0 4px; font-size: 21px; line-height: 1.15; }
.panel-head p { margin: 0; line-height: 1.45; }
.panel-back {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: var(--panel-2); color: var(--text-2); font-size: 21px; line-height: 1; cursor: pointer;
}
.panel-back:hover { background: var(--accent-soft); color: var(--accent-ink); }
.panel-back:focus-visible { outline: 0; box-shadow: var(--ring); }
.panel-switch {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
  color: var(--accent-ink); font-size: 12px; font-weight: 800; cursor: pointer;
}
.panel-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.panel-switch .switch-track { order: 2; width: 42px; height: 24px; background: var(--line); }
.panel-switch input:checked + .switch-track { background: var(--accent); }
.panel-switch input:checked + .switch-track::after { transform: translateX(18px); }
.panel-switch input:focus-visible + .switch-track { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.panel-switch-text { min-width: 25px; text-align: right; }
.panel-switch:not(.is-on) { color: var(--muted); }
.panel-rows.is-disabled { opacity: .45; pointer-events: none; }
.btn-outline-pill {
  width: 100%; border: 1px solid var(--accent); border-radius: var(--radius-pill);
  background: transparent; color: var(--accent-ink); font-weight: 700;
}
.btn-outline-pill:hover { background: var(--accent-soft); }
.cta-row-card, .form-row-card { display: grid; gap: 14px; margin-bottom: var(--s4); }
.cta-row-card .grid-2, .form-row-card .grid-2 { gap: 14px; }
.cta-row-card .field, .form-row-card .field { margin-bottom: 0; }
.cta-timing { grid-column: 1 / -1; }
.form-when { display: grid; gap: 8px; margin-bottom: 14px; }
.tab-panel[data-panel="form"] { container-type: inline-size; }
.choice-card {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.choice-card input[type="radio"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin: 0; accent-color: var(--accent); }
.choice-card span { min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.form-edit-action { width: 100%; }
.form-editor { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s5); }
.form-editor-fields { min-width: 0; }
.form-editor-head { grid-template-columns: 34px minmax(0, 1fr); grid-column: 1 / -1; order: -2; }
.form-editor-preview { min-width: 0; order: -1; }
.form-editor-preview h4 { margin: 0 0 var(--s2); }
.form-editor-preview #form-edit-preview { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); }
#preview .sf-player.sf-short .sf-gate,
#preview .sf-player.sf-short .sf-endscreen,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen { padding-bottom: 0; }
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card p { display: block; }
#preview .sf-player.sf-short .sf-gate-card,
#preview .sf-player.sf-short .sf-endscreen-card,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card {
  padding-top: 8px;
  padding-bottom: 8px;
}
#preview .sf-player.sf-short .sf-gate-card,
#preview .sf-player.sf-short .sf-endscreen-card,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card {
  padding-left: 14px;
  padding-right: 14px;
}
#preview .sf-player.sf-short .sf-gate-card h3,
#preview .sf-player.sf-short .sf-endscreen-card h3,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card h3,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card h3 {
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 1.15;
}
#preview .sf-player.sf-short .sf-gate-card p,
#preview .sf-player.sf-short .sf-endscreen-card p,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card p,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card p {
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 1.2;
}
#preview .sf-player.sf-short .sf-gate-form,
#preview .sf-player.sf-short .sf-endscreen-card .sf-gate-form,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-form,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card .sf-gate-form {
  gap: 3px;
  grid-template-columns: 1fr;
}
#preview .sf-player.sf-short .sf-gate-card input,
#preview .sf-player.sf-short .sf-endscreen-card input,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card input,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card input {
  height: 30px;
  min-height: 30px;
  padding: 6px 8px;
  font-size: 11px;
}
#preview .sf-player.sf-short .sf-gate-submit,
#preview .sf-player.sf-short .sf-endscreen-card .sf-gate-submit,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-submit,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card .sf-gate-submit {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}
#preview .sf-player.sf-short .sf-gate-skip,
#preview .sf-player.sf-short .sf-endscreen-card .sf-endscreen-replay,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-skip,
.form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card .sf-endscreen-replay {
  margin-top: 2px;
  font-size: 11px;
  line-height: 13px;
}
@container (max-width: 380px) {
  #preview .sf-player.sf-short .sf-gate-card,
  #preview .sf-player.sf-short .sf-endscreen-card,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card {
    padding: 5px 8px;
  }
  #preview .sf-player.sf-short .sf-gate-card h3,
  #preview .sf-player.sf-short .sf-endscreen-card h3,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card h3,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card h3 {
    font-size: 13px;
    line-height: 1.1;
  }
  #preview .sf-player.sf-short .sf-gate-card p,
  #preview .sf-player.sf-short .sf-endscreen-card p,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card p,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card p {
    margin-bottom: 2px;
    line-height: 1.15;
  }
  #preview .sf-player.sf-short .sf-gate-form,
  #preview .sf-player.sf-short .sf-endscreen-card .sf-gate-form,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-form,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card .sf-gate-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #preview .sf-player.sf-short .sf-gate-card input,
  #preview .sf-player.sf-short .sf-endscreen-card input,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-card input,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card input {
    height: 28px;
    min-height: 28px;
    padding: 5px 6px;
  }
  #preview .sf-player.sf-short .sf-gate-submit,
  #preview .sf-player.sf-short .sf-endscreen-card .sf-gate-submit,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-gate-submit,
  .form-editor-preview #form-edit-preview .sf-player.sf-short .sf-endscreen-card .sf-gate-submit {
    grid-column: 1 / -1;
    min-height: 28px;
    padding: 5px 8px;
    font-size: 11px;
  }
}
.form-fields-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin: 0 0 var(--s3); }
.form-fields-group legend { padding: 0 5px; font-size: 13px; font-weight: 700; }
.form-locked-row { display: flex; justify-content: space-between; padding: 10px 0 0; color: var(--muted); font-size: 13px; }
.form-locked-row span:last-child { color: var(--text-2); font-weight: 700; }
.form-editor-actions { margin-top: var(--s4); }
.branding-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
.branding-col h4 { margin: 0 0 var(--s2); font-size: 14px; }
.branding-toggle { margin-bottom: var(--s2); }
.color-picker { display: grid; gap: 10px; }
.color-sv {
  position: relative; height: 190px; border-radius: 10px; cursor: crosshair;
  background:
    linear-gradient(to bottom, transparent, #000),
    linear-gradient(to right, #fff, hsl(var(--pc-hue, 25), 100%, 50%));
  box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .12);
}
.color-hue {
  position: relative; height: 16px; border-radius: 999px; cursor: ew-resize;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.color-knob {
  position: absolute; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%;
  background: transparent; box-shadow: 0 1px 3px rgba(12, 14, 18, .55);
  transform: translate(-50%, -50%); pointer-events: none;
}
.color-sv .color-knob { top: 7.5px; left: 7.5px; }
.color-hue .color-knob { top: 50%; }
.color-meta { display: flex; align-items: center; gap: 8px; }
.color-meta input { min-width: 0; flex: 1 1 auto; font-family: var(--mono); font-size: 13px; }
.contrast-badge {
  flex: none; border-radius: var(--radius-pill); padding: 5px 9px; background: var(--panel-2);
  color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.contrast-badge.is-good { background: var(--green-soft); color: var(--green); }
.contrast-badge.is-warn { background: #fff2d8; color: #a86a00; }
.branding-bg-field { margin: 2px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.branding-bg-field label { margin: 0; }
.branding-bg-field input[type="color"] { width: 52px; height: 32px; }
.logo-dropzone {
  min-height: 190px; display: grid; place-items: center; position: relative; text-align: center;
  border: 2px dashed var(--accent-pill); border-radius: 10px; background: var(--accent-soft);
  color: var(--muted); transition: border-color .14s var(--ease), background .14s var(--ease);
}
.logo-dropzone:hover, .logo-dropzone:focus-visible, .logo-dropzone.is-dragging {
  outline: 0; border-color: var(--accent); background: var(--accent-soft);
}
.logo-dropzone.has-logo {
  grid-template-rows: auto auto; align-content: center; gap: 6px; padding: 8px;
}
.logo-dropzone img { max-width: 82%; max-height: 76px; object-fit: contain; }
.logo-drop-copy { display: grid; gap: 5px; justify-items: center; font-size: 13px; }
.logo-drop-copy small { color: var(--muted-2); font-size: 11px; }
.logo-upload-link { color: var(--accent-ink); text-decoration: underline; cursor: pointer; margin: 0; }
.branding-logo-url { margin-top: var(--s3); }
.branding-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); margin-top: var(--s4); }
.branding-bottom .field { margin-bottom: 0; }
.radius-field output { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.radius-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.branding-foot {
  display: flex; justify-content: center; gap: 8px; border-top: 1px solid var(--line);
  margin-top: var(--s5); padding-top: var(--s4);
}
.preview-error { padding: 32px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); text-align: center; }
@media (max-width: 640px) {
  .branding-grid, .branding-bottom { grid-template-columns: 1fr; gap: var(--s4); }
  .branding-head { gap: var(--s2); }
  .branding-head .btn { white-space: nowrap; }
  .color-sv, .logo-dropzone { min-height: 150px; height: 150px; }
  .branding-foot { justify-content: stretch; }
  .branding-foot .btn { flex: 1; }
  .panel-head { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  .panel-head h3 { font-size: 19px; }
  .panel-switch { gap: 4px; }
  .form-editor { grid-template-columns: 1fr; gap: var(--s4); }
  .cta-timing { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 620px) {
  .form-editor { grid-template-columns: minmax(0, .85fr) minmax(300px, 1.15fr); gap: var(--s5); }
  .form-editor-preview { order: 0; }
}

.thumb-previews { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.thumb-preview { display: grid; gap: 6px; justify-items: center; }
.thumb-preview img {
  width: 180px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
}

.lib-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin: var(--s6) 0 var(--s4); flex-wrap: wrap;
}
.lib-count {
  font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 11px;
  margin-right: auto; font-variant-numeric: tabular-nums;
}
/* Ink type sitting straight on the forest band disappears, so any heading that
   can scroll over the illustration carries its own scrap of paper. */
.lib-head > .hand-head, .main-body > .hand-head, .page-head > div > h1 {
  background: rgba(253, 251, 252, .92); border-radius: 14px; padding: 4px 14px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lib-head > .hand-head { margin: 0; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--s4); }
.vid-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.vid-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.vid-shot {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: var(--panel); width: 100%; aspect-ratio: 16 / 9;
}
.vid-shot img { transition: transform .3s var(--ease); }
.vid-card:hover .vid-shot img { transform: scale(1.035); }
/* a play cue on hover, so the poster reads as something you can open */
.vid-shot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 999px; background: rgba(255, 255, 255, .92) center/16px 16px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6106'%3E%3Cpath d='M8 5l12 7-12 7z'/%3E%3C/svg%3E");
  box-shadow: var(--shadow); opacity: 0; transform: scale(.86);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.vid-card:hover .vid-shot::after, .vid-shot:focus-visible::after { opacity: 1; transform: scale(1); }
.vid-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vid-shot img, .vid-shot .thumb-ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.vid-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 7px;
  background: rgba(12, 14, 18, .78); color: #fff; font-family: var(--mono); font-size: 11px;
}
.vid-body { display: grid; gap: 7px; padding: var(--s3) var(--s3) var(--s3); }
.vid-title {
  text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vid-title:hover { color: var(--accent-ink); }
.vid-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vid-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vid-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s1);
  padding-top: var(--s2); border-top: 1px dashed var(--line-dash);
}

@media (max-width: 1100px) {
  .editor-grid { grid-template-columns: 176px minmax(0, 1fr); }
  .sec-preview { grid-column: 1 / -1; }
  .sec-preview .card { position: static; }
}
@media (max-width: 900px) {
  /* the list view keeps its columns and scrolls sideways instead of clipping them */
  #videos-body { overflow-x: auto; }
  #videos-body table.data { min-width: 620px; }
  .editor-grid { grid-template-columns: 1fr; }
  .sec-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .app { grid-template-columns: 1fr; }
  .side {
    flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 14px;
    height: auto; position: sticky; top: 0; overflow: visible; gap: 8px;
    box-shadow: 0 1px 0 rgba(20, 32, 30, .04);
  }
  .side-head { padding: 0; flex: 0 0 auto; }
  .side-head .brand img { height: 26px; }
  .side::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; border-right: 0; border-bottom: 1px dashed var(--line-dash); }
  .side-collapse, .side-label, .side-spacer, .dev-card, .side-more { display: none; }
  /* Plans has no other entry point on a phone, so it rides along as a pill. */
  .side-plan {
    margin: 0; padding: 6px 12px; border-top: 0; border: 1px solid var(--line);
    border-radius: var(--radius-pill); order: 3; flex: 0 0 auto;
  }
  .side-plan span, .side-plan .caret { display: none; }
  .side-plan b { font-size: 13px; }
  /* "Signed in" alone says nothing, so the pill carries the address instead */
  .side-who b { display: none; }
  .side-who span {
    display: block; font-size: 13px; max-width: 42vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* the rail scrolls past the edge, so it fades out instead of being sliced */
  .side-nav {
    display: flex; gap: 6px; overflow-x: auto; flex: 1 1 100%; order: 4;
    scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .nav-item { font-size: 14px; padding: 7px 12px 7px 8px; width: auto; flex: none; scroll-snap-align: start; }
  .nav-item .ico { width: 28px; height: 28px; }
  .nav-item .ico svg { width: 16px; height: 16px; }
  .nav-item .tag { display: none; }
  .topbar { padding: 10px 16px; gap: 8px; justify-content: space-between; }
  /* icon only: the label wrapped onto three lines in the bar */
  .top-help { font-size: 14px; padding: 8px; }
  .top-help span { display: none; }
  .btn-gift { font-size: 15px; padding: 0 16px; min-height: 36px; }
  .user-chip { max-width: 44vw; }
  .main, .main-body, .side, .side-nav, .composer, .composer-field { min-width: 0; }
  .main-body { padding: var(--s4) 16px 60px; }
  .top-actions { flex-wrap: wrap; }
  .seg-wrap {
    overflow-x: auto; justify-content: flex-start; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .seg-wrap::-webkit-scrollbar { display: none; }
  .seg { margin-bottom: var(--s4); }
  .hand-head { margin-bottom: var(--s5); font-size: 22px; }
  .page-head { margin-bottom: var(--s4); }
  .page-head h1 { font-size: 27px; }
  .lib-head { margin: var(--s5) 0 var(--s3); }
  .modal-backdrop { padding: 0; place-items: stretch; }
  .modal { width: 100%; max-height: 100vh; border-radius: 0; border: 0; }
  .modal-foot .btn { flex: 1 1 auto; }
  textarea { min-width: 0; }
}
@media (max-width: 560px) {
  /* stacked hero buttons of two different widths read as a mistake */
  .hero-actions .btn, .final .btn { width: 100%; }
  .vid-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: var(--s2); }
  .stat .v { font-size: 24px; }
  .seg-tabs button { padding: 0 12px; font-size: 13px; }
  .file-row { gap: 8px; }
}

.repeater-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px;
}
.repeater-row input, .repeater-row select { background: var(--surface); }
.chapter-row { margin-bottom: 12px; }
@media (max-width: 640px) {
  .repeater-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; }
  .repeater-row button { padding-left: 7px; padding-right: 7px; }
}
.snippet { display: grid; gap: 8px; }

/* Analytics ---------------------------------------------------------------
   Read as a written page, not a wall of equal boxes: one headline number the
   owner actually cares about, the rest as a definition list beside it, then a
   drawn retention curve and share bars. */
.an-head {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s4);
  align-items: start; padding-bottom: var(--s4); border-bottom: 1px dashed var(--line-dash);
}
.an-hero-k {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.an-hero-v {
  display: block; font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -.04em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.an-note { margin: 8px 0 0; color: var(--accent-ink); font-size: 15px; }
.an-facts {
  margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s3);
  align-content: start; font-size: 13.5px;
}
.an-facts dt { color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line); }
.an-facts dd {
  margin: 0; padding: 7px 0; text-align: right; font-weight: 700;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.an-facts dt:last-of-type, .an-facts dd:last-of-type { border-bottom: 0; }

.an-block { margin-top: var(--s4); }
.an-block-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.an-block-head h3 { margin: 0; font-size: 15px; }
.an-chart-box { background: var(--accent-soft); border-radius: var(--radius); padding: 12px 12px 6px; }
.an-chart { height: 122px; }
.an-chart svg { display: block; width: 100%; height: 100%; }
.an-area { fill: rgba(255, 97, 6, .18); }
.an-line { fill: none; stroke: var(--accent); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.an-axis {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}

.bars { display: grid; gap: 7px; }
.bar-row {
  display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr) auto; gap: var(--s2);
  align-items: center; font-size: 13px;
}
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.bar-track { height: 9px; border-radius: 99px; background: var(--panel); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 99px; transition: width .5s var(--ease);
  background: linear-gradient(90deg, var(--accent), #ffa15c);
}
@media (max-width: 560px) {
  .an-head { grid-template-columns: 1fr; gap: var(--s3); }
}

/* Two settings cards side by side, so a short form is not a tall column with
   an empty half-screen beside it. */
/* stretch, so two cards of unequal content still end on the same line */
.form-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3); align-items: stretch;
}
.form-cols > .card { margin-top: 0; }
.form-cols > .card .field:last-child { margin-bottom: 0; }
.form-actions { margin-top: var(--s3); align-items: center; }

/* Plans ------------------------------------------------------------------- */
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--s3); margin-top: var(--s3);
}
.plan-grid + .card { margin-top: var(--s3); }
.plan-card { display: flex; flex-direction: column; gap: var(--s2); margin-top: 0 !important; }
.plan-card h3 { margin: 0; }
.plan-card p { margin: 0; }
.plan-card .row { margin-top: auto; padding-top: var(--s2); flex-wrap: wrap; }
/* the wide basis makes the pair break to one per line before either squeezes */
.plan-card .row .btn { flex: 1 1 210px; }
.plan-price {
  font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  display: flex; align-items: baseline; gap: 5px;
}
.plan-price span { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
/* The list price a promo replaced: quiet enough that the price you pay wins. */
.plan-price s { font-size: 18px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan-card.is-current { border-color: var(--accent-pill); background: var(--accent-soft); }
/* the pill sits where the other cards keep their buttons, so the row lines up */
.plan-card.is-current .pill { align-self: flex-start; margin-top: auto; }
/* The permanent lifetime offer is the one card that should catch the eye. */
.plan-card-lt {
  border-color: var(--forest); background: var(--forest); color: #f4eee2;
}
.plan-card-lt h3, .plan-card-lt .plan-price { color: #fff; }
.plan-card-lt .muted, .plan-card-lt .plan-price span, .plan-card-lt .plan-price s { color: rgba(244, 238, 226, .72); }
.plan-card-lt .btn { align-self: flex-start; margin-top: auto; }
.plan-card-lt .btn:disabled {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22);
  color: rgba(244, 238, 226, .68);
}
.usage-card .usage-line { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.usage-card .meter { margin: var(--s2) 0 var(--s2); }
.usage-card .usage-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}
.usage-card .usage-foot .lib-count { margin-right: 0; }

.upgrade-banner {
  display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--accent-pill); background: linear-gradient(100deg, var(--accent-soft), #fffdf8);
  border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s4);
}
.upgrade-banner p { margin: 0; font-size: 14px; }
.upgrade-banner .hand { display: block; margin-bottom: 2px; color: var(--accent-ink); }

/* ------------------------------------------------------- public v/ + pl/ --- */
.sf-page { background: var(--bg); }
.sf-page-head { padding: 14px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.sf-brand { display: block; width: min(1000px, 92vw); margin: 0 auto; font-weight: 800; text-decoration: none; }
.sf-brand img { display: block; height: 26px; width: auto; }
.sf-page-main { width: min(1000px, 92vw); margin: 26px auto 60px; }
.sf-page-main h1 { font-family: var(--hand); font-weight: 700; font-size: 33px; letter-spacing: .01em; margin-top: 20px; }
.sf-page-desc { color: var(--muted); white-space: pre-wrap; }
.sf-transcript { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 20px; }
.sf-transcript h2 { font-size: 17px; }
.sf-transcript input { max-width: 340px; margin-bottom: 12px; }
.sf-transcript pre { white-space: pre-wrap; font-size: 14px; color: var(--muted); font-family: inherit; }

/* Skip link: visible only once focused, so keyboard users can jump the header. */
.sf-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 60; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
}
.sf-skip:focus { left: 12px; }

.sf-crumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.sf-crumbs a { color: var(--muted); }
.sf-crumbs span[aria-hidden] { margin: 0 6px; }

.sf-page-chapters { margin-top: 26px; }
.sf-page-chapters h2 { font-size: 17px; margin-bottom: 8px; }
.sf-page-chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sf-page-chapters a {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; font-size: 14px; min-height: 40px; align-content: center;
}
.sf-page-chapters a:hover { background: var(--panel); }
.sf-page-chapters a span { font-variant-numeric: tabular-nums; color: var(--accent-ink); font-weight: 700; }

.sf-page-missing { text-align: center; padding-top: 40px; }

.sf-page-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 20px 0 30px; }
.sf-page-foot p { width: min(1000px, 92vw); margin: 0 auto; font-size: 13px; color: var(--muted); }

.sf-playlist-desc { width: min(1160px, 92vw); margin: 0 auto; color: var(--muted); font-size: 14px; }
.sf-playlist-index { width: min(1160px, 92vw); margin: 10px auto 40px; }
.sf-playlist-index h2 { font-size: 17px; margin-bottom: 8px; }
.sf-playlist-index ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }

.sf-playlist { width: min(1160px, 92vw); margin: 18px auto 10px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.sf-playlist[data-layout="grid"] { grid-template-columns: 1fr; }
.sf-playlist-list { display: grid; gap: 8px; max-height: 70vh; overflow: auto; }
.sf-pl-item {
  display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--text); cursor: pointer; font-family: inherit;
}
.sf-pl-item:hover { background: var(--panel-2); }
.sf-pl-item.sf-pl-current { border-color: var(--accent-pill); background: var(--accent-soft); }
.sf-pl-thumb { width: 96px; height: 54px; border-radius: 9px; background: var(--panel) center/cover no-repeat; flex: none; }
.sf-pl-meta { display: grid; gap: 2px; }
.sf-pl-item-title { font-size: 14px; font-weight: 700; }
.sf-pl-item-dur { font-size: 12px; color: var(--muted); }
.sf-playlist-title { width: min(1160px, 92vw); margin: 26px auto 4px; font-family: var(--hand); font-weight: 700; font-size: 30px; }
@media (max-width: 860px) { .sf-playlist { grid-template-columns: 1fr; } }

/* Embedded playlist: no site chrome, the host page supplies the frame. */
.sf-page-bare .sf-playlist { width: 100%; margin: 0; gap: 10px; padding: 10px; box-sizing: border-box; }

/* Password gate on a playlist page. */
.sf-lock { width: min(420px, 92vw); margin: 60px auto; display: grid; gap: 10px; text-align: center; }
.sf-lock h1 { font-family: var(--hand); font-weight: 700; font-size: 28px; margin: 0; }
.sf-lock p { color: var(--muted); margin: 0; font-size: 14px; }
.sf-lock-error { color: var(--danger); }
.sf-lock input {
  padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-size: 14px;
}
.sf-lock button {
  padding: 11px 14px; border-radius: var(--radius-sm); border: 0; background: var(--accent);
  color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}

/* ------------------------------------------------------- drawn-by-hand ----- */
/* Ink blobs, tape, squiggles and reveals: the page should feel drafted, not
   generated, so every shape is an irregular path rather than a perfect circle. */
.blob {
  position: absolute; pointer-events: none; z-index: 0; opacity: .34;
  animation: sf-drift 19s ease-in-out infinite;
}
.blob svg { display: block; width: 100%; height: auto; }
.blob-1 { top: -70px; right: -110px; width: 420px; animation-delay: -3s; }
.blob-2 { bottom: -130px; left: -140px; width: 360px; animation-duration: 24s; opacity: .26; }
.blob-3 { top: 40px; left: 44%; width: 200px; animation-duration: 31s; opacity: .2; }
@keyframes sf-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  34% { transform: translate3d(14px, -18px, 0) rotate(4deg) scale(1.04); }
  67% { transform: translate3d(-12px, 12px, 0) rotate(-3deg) scale(.97); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

.section, .hero { position: relative; overflow: hidden; }
.section > .wrap, .hero > .wrap { position: relative; z-index: 2; }

.squiggle { display: block; width: 190px; max-width: 60%; margin: -4px 0 0; color: var(--accent); }
.squiggle path {
  fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
}
.in-view .squiggle path { animation: sf-draw 1.1s .15s ease-out forwards; }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }

/* Steps: three hand-drawn video icons that draw themselves as you scroll in. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.step { position: relative; padding-top: 6px; }
.step-ico { width: 74px; height: 74px; color: var(--accent); margin-bottom: 14px; }
.step-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.step-ico .ink {
  fill: none; stroke: var(--forest); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
}
.step-ico .fill { fill: var(--accent); opacity: 0; }
.step-ico .pop { fill: var(--green); opacity: 0; }
.in-view .step-ico .ink { animation: sf-draw 1.05s ease-out forwards; }
.in-view .step-ico .fill { animation: sf-ink-in .5s .55s ease-out forwards; }
.in-view .step-ico .pop { animation: sf-ink-in .4s .8s ease-out forwards; }
.step:nth-child(2) .step-ico .ink { animation-delay: .16s; }
.step:nth-child(3) .step-ico .ink { animation-delay: .32s; }
@keyframes sf-ink-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.step h3 { font-size: 20px; margin: 0 0 6px; }
.step p { color: var(--muted); font-size: 14.5px; margin: 0; }
.step .num { font-family: var(--hand); font-weight: 700; font-size: 26px; color: var(--accent); line-height: 1; }

/* ------------------------------------------- docs / guides / compare / blog --- */
.sf-lib-head {
  display: flex; align-items: center; gap: 16px;
  width: min(1000px, 92vw); margin: 0 auto; padding: 12px 0;
  border-bottom: 0;
}
.sf-lib-head .sf-brand { width: auto; margin: 0; flex: 0 0 auto; }
.sf-lib-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-right: auto; }
.sf-lib-nav a {
  padding: 6px 10px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600;
  color: var(--text-2); text-decoration: none;
}
.sf-lib-nav a:hover { background: var(--panel); color: var(--text); }
.sf-lib-main { max-width: 820px; }
.sf-lib-main h1 { max-width: 22em; }
/* Declared with the class doubled so it also wins inside .sf-article p. */
.sf-answer, .sf-article p.sf-answer {
  font-size: 18.5px; font-weight: 500; line-height: 1.62; color: var(--text);
  border-left: 3px solid var(--accent); padding-left: 14px; margin: 14px 0 6px;
}
.sf-nap {
  display: grid; grid-template-columns: minmax(8rem, .35fr) 1fr; gap: 8px 18px;
  margin: 24px 0; font-size: 15.5px; line-height: 1.6;
}
.sf-nap dt { color: var(--text); font-weight: 700; }
.sf-nap dd { margin: 0; color: var(--text-2); }
.sf-nap address { font-style: normal; }
.sf-byline { font-size: 13px; color: var(--muted); margin: 0 0 22px; }

.sf-article h2 { font-size: 21px; margin: 30px 0 8px; scroll-margin-top: 20px; }
.sf-article h3 { font-size: 16.5px; margin: 20px 0 6px; }
.sf-article p, .sf-article li { font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.sf-article ul, .sf-article ol { padding-left: 20px; display: grid; gap: 5px; margin: 10px 0; }
.sf-article pre {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; overflow-x: auto; font-size: 13px;
}
.sf-article pre code { font-family: var(--mono, ui-monospace, monospace); white-space: pre; }
.sf-article :not(pre) > code {
  background: var(--panel); border-radius: 6px; padding: 1px 5px; font-size: 13.5px;
}
.sf-article blockquote {
  margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--line-strong);
  color: var(--muted-2); font-size: 15px;
}

.sf-table-wrap { overflow-x: auto; margin: 14px 0; }
.sf-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.sf-table th, .sf-table td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top;
}
.sf-table thead th { background: var(--panel-2); font-weight: 700; }
.sf-table tbody th { font-weight: 600; color: var(--text); }

.sf-toc {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 18px 0 6px;
}
.sf-toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0 0 6px; }
/* Doubled so the de-indent does not depend on order against .sf-article ol.
   Markers are dropped on purpose: this is a navigation list, and several
   sections already carry their own numbering in the heading text. */
.sf-toc ol, .sf-article .sf-toc ol { margin: 0; padding-left: 0; list-style: none; display: grid; }
.sf-toc a { display: inline-block; padding: 8px 0; font-size: 14px; line-height: 1.2; color: var(--text-2); }

.sf-card-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .sf-card-grid { grid-template-columns: 1fr 1fr; } }
.sf-card-grid a {
  display: block; height: 100%; padding: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.sf-card-grid a:hover { border-color: var(--line-strong); background: var(--panel-2); }
.sf-card-grid h3 { font-size: 16px; margin: 0 0 6px; color: var(--text); }
.sf-card-grid p { font-size: 14px; color: var(--muted-2); margin: 0; line-height: 1.6; }
.sf-card-more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }

.sf-faq { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 18px; }
.sf-faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px;
  margin-bottom: 8px; background: var(--surface);
}
.sf-faq summary { font-weight: 700; cursor: pointer; font-size: 15px; padding: 5px 0; }
.sf-faq p { margin: 8px 0 0; font-size: 15px; color: var(--text-2); }

.sf-lib-cta {
  margin-top: 34px; padding: 18px 20px; background: var(--accent-soft);
  border: 1px solid var(--accent-pill); border-radius: var(--radius);
}
.sf-lib-cta h2 { font-size: 18px; margin: 0 0 6px; }
.sf-lib-cta p { font-size: 15px; color: var(--text-2); margin: 0 0 10px; }
.sf-lib-cta p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sf-quiet-link { font-size: 14px; color: var(--text-2); }

.sf-related { margin-top: 30px; }
.sf-related h2 { font-size: 17px; margin-bottom: 10px; }
.sf-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-related a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; background: var(--surface); }
.sf-related a:hover { background: var(--panel-2); }
.sf-related strong { display: block; font-size: 15px; color: var(--text); }
.sf-related span { display: block; font-size: 13.5px; color: var(--muted-2); margin-top: 3px; line-height: 1.55; }

.sf-lib-cross { margin-top: 34px; }
.sf-lib-cross h2 { font-size: 17px; margin-bottom: 8px; }
.sf-lib-cross ul { padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--text-2); }

.sf-lib-foot nav {
  width: min(1000px, 92vw); margin: 10px auto 0; display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 13px;
}
@media (max-width: 560px) {
  .sf-lib-head { flex-wrap: wrap; gap: 8px; }
  .sf-lib-nav { order: 3; width: 100%; margin-right: 0; }
  .sf-answer, .sf-article p.sf-answer { font-size: 17px; }
}

/* Library teaser on the landing page. */
.learn-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .learn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .learn-grid { grid-template-columns: repeat(4, 1fr); } }
.learn-grid a {
  display: block; height: 100%; padding: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.learn-grid a:hover { border-color: var(--line-strong); background: var(--panel-2); }
.learn-grid b { display: block; font-size: 16px; margin-bottom: 6px; }
.learn-grid span { display: block; font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }
.learn-links { margin: 16px 0 0; font-size: 14px; color: var(--muted-2); }
.learn-links a { color: var(--accent-ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }