/* ShotFlick public landing + legal pages - black & gold (same tokens as app.css) - Made by Comfort Earning | 15 Sep 2026 */
:root {
  --bg: #09090b; --sf: #131317; --sf2: #1a1a20; --sf3: #22222a;
  --gold: #f5c542; --goldHi: #ffd65c; --goldLo: #f0b72e; --ink: #161105;
  --text: #f7f5ef; --muted: #a9a69c; --dim: #7c7a72;
  --line: rgba(255, 255, 255, .07); --line2: rgba(255, 255, 255, .13);
  --grad: linear-gradient(180deg, var(--goldHi), var(--goldLo));
  --r: 20px; --max: 1080px; --pad: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
body {
  font-family: Poppins, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: absolute; left: 0; right: 0; top: -280px; height: 720px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(245, 197, 66, .16), transparent);
}
a { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--ink); padding: 8px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { left: 8px; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- top bar */
.top {
  position: sticky; top: 0; z-index: 50; background: rgba(9, 9, 11, .78); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.top .wrap { display: flex; align-items: center; gap: 16px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.mark {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--ink); flex: none;
  background: linear-gradient(135deg, var(--goldHi), var(--gold) 55%, #9c7a1c); box-shadow: 0 8px 24px rgba(245, 197, 66, .3);
}
.brand .kick { display: block; font-size: 9px; letter-spacing: 3px; color: var(--gold); line-height: 1.2; }
.brand .bn { display: block; font-weight: 700; font-size: 16px; line-height: 1.2; }
.topnav { display: none; margin-left: auto; gap: 26px; }
.topnav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.topnav a:hover { color: var(--text); }
.login { position: relative; margin-left: auto; }
.mthemes { margin-left: auto; margin-right: 8px; height: 38px; display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap; border-radius: 999px;
  border: 1px solid rgba(245, 197, 66, .45); color: var(--gold); text-decoration: none; font-size: 14px; font-weight: 600; }
.mthemes + .login { margin-left: 0; }
.login-btn { white-space: nowrap; }
.login-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--gold); border: 1px solid rgba(245, 197, 66, .55); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
}
.login-btn:hover { background: rgba(245, 197, 66, .08); }
.login-btn svg { width: 16px; height: 16px; }
.login-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); padding: 14px; border-radius: 18px;
  background: var(--sf); border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.panel .btn { width: 100%; height: 46px; font-size: 15px; }
.panel .btn + .btn { margin-top: 8px; }
.or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--dim); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.gbtn {
  width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px;
  background: var(--sf2); color: var(--muted); border: 1px solid var(--line2); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: not-allowed;
}
.gbtn svg { width: 18px; height: 18px; opacity: .6; }
.gbtn { gap: 8px; padding: 0 10px; white-space: nowrap; font-size: 13.5px; }
.gbtn .badge { height: 19px; padding: 0 7px; font-size: 9px; letter-spacing: .4px; }
.panel .note { margin-top: 10px; font-size: 12px; color: var(--dim); text-align: center; }

/* ---------------------------------------------------------------- buttons + badges */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; border-radius: 16px;
  font-weight: 600; font-size: 17px; line-height: 1; height: 58px; padding: 0 28px; border: 1px solid transparent; white-space: nowrap;
}
.btn-gold { background: var(--grad); color: var(--ink); box-shadow: 0 12px 34px rgba(245, 197, 66, .28); }
.btn-gold:hover { box-shadow: 0 14px 40px rgba(245, 197, 66, .42); }
.btn-line { color: var(--text); border-color: rgba(245, 197, 66, .5); background: rgba(255, 255, 255, .02); }
.btn-line:hover { background: rgba(245, 197, 66, .08); }
.cta { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.cta .btn { width: 100%; }
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; vertical-align: middle; white-space: nowrap;
  color: var(--gold); background: rgba(245, 197, 66, .1); border: 1px solid rgba(245, 197, 66, .35);
}
.badge.live { color: #7fe0ad; background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .3); }

/* ---------------------------------------------------------------- type + sections */
.cap { font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: 2.6px; text-transform: uppercase; }
h1 { font-size: clamp(36px, 9.6vw, 64px); font-weight: 700; line-height: 1.06; letter-spacing: -1.2px; }
h2 { font-size: clamp(28px, 6.8vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -.8px; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.gold { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); font-size: clamp(17px, 4.4vw, 20px); line-height: 1.55; margin-top: 16px; max-width: 620px; }
.muted { color: var(--muted); }
.sec { position: relative; z-index: 1; padding-block: 72px; }
.sec + .sec { border-top: 1px solid var(--line); }
.below { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.head { max-width: 680px; }
.head .cap { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.center { text-align: center; margin-inline: auto; }
.center .lead { margin-inline: auto; }
.center .cap { justify-content: center; }

.hero { padding-block: 64px 56px; text-align: center; }
.hero .lead { margin-inline: auto; }
.hero .cta { max-width: 520px; margin-inline: auto; }
.hero .fine { margin-top: 18px; color: var(--dim); font-size: 13px; }
.btn small { display: block; }

.grid { display: grid; gap: 14px; margin-top: 36px; }
.card { background: var(--sf); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.card p { color: var(--muted); margin-top: 8px; font-size: 15px; }
.card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tile {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; color: var(--gold);
  background: rgba(245, 197, 66, .09); border: 1px solid rgba(245, 197, 66, .2);
}
.tile svg { width: 22px; height: 22px; }
.step { font-size: 12px; font-weight: 600; color: var(--dim); letter-spacing: 1.5px; margin-bottom: 6px; }

.stat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.stat b { font-size: clamp(56px, 16vw, 104px); font-weight: 700; line-height: 1; letter-spacing: -3px; }
.stat span { color: var(--muted); font-size: 16px; }
.bar { margin-top: 26px; height: 10px; border-radius: 99px; background: var(--sf2); overflow: hidden; max-width: 560px; }
.bar i { display: block; height: 100%; width: 72%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 18px rgba(245, 197, 66, .5); }
.bar-legend { display: flex; justify-content: space-between; max-width: 560px; margin-top: 10px; font-size: 13px; color: var(--dim); }

.cloud { margin: 34px calc(var(--pad) * -1) 0; position: relative; }
.cloud img {
  width: 100%; max-width: 1400px; margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 78%, transparent 100%);
}

.compare { display: grid; gap: 14px; margin-top: 36px; }
.compare .card.us { border-color: rgba(245, 197, 66, .4); background: linear-gradient(180deg, rgba(245, 197, 66, .08), var(--sf) 60%); }
.ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; color: var(--muted); font-size: 15px; }
.ticks svg { width: 18px; height: 18px; margin-top: 3px; color: var(--gold); }
.card.them .ticks svg { color: var(--dim); }

.links { margin-top: 26px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--sf); border: 1px solid var(--line2); color: var(--muted); font-size: 14px; }
.chip svg { width: 17px; height: 17px; color: var(--gold); }

.band {
  position: relative; overflow: hidden; text-align: center; border-radius: 28px; padding: 48px 22px; border: 1px solid rgba(245, 197, 66, .3);
  background: radial-gradient(120% 90% at 50% 0%, rgba(245, 197, 66, .16), transparent 60%), var(--sf);
}
.band .cta { max-width: 520px; margin-inline: auto; }

.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding-block: 36px 44px; color: var(--dim); font-size: 14px; }
.foot .wrap { display: flex; flex-direction: column; gap: 18px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- logo + style previews (15 Sep 2026 review) */
.mark { background: none; box-shadow: 0 8px 24px rgba(245, 197, 66, .25); border-radius: 50%; }
.mark svg { width: 38px; height: 38px; display: block; }
.phones { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 44px auto 0; max-width: 620px; }
.phone { margin: 0; border-radius: 26px; padding: 6px; background: #000; border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); flex: none; }
.phone img { border-radius: 20px; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.phones .main { width: min(200px, 40%); border-color: rgba(245, 197, 66, .55); box-shadow: 0 0 0 1px rgba(245, 197, 66, .2), 0 24px 70px rgba(245, 197, 66, .22); }
.phones .side { width: min(150px, 28%); opacity: .85; }
/* hero coverflow */
.coverflow { position: relative; height: clamp(360px, 92vw, 520px); margin: 44px auto 0; max-width: 1000px; overflow: hidden; }
.cf-item {
  position: absolute; left: 50%; top: 50%; margin: 0; width: clamp(170px, 44vw, 250px); aspect-ratio: 9 / 16;
  border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
  transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: transform .62s cubic-bezier(.33, 1, .68, 1), opacity .62s, filter .62s;
}
.cf-item img { width: 100%; height: 100%; object-fit: cover; }
/* 16 Sep 2026: each card plays its style in motion - the loop lies over its still and fades in on its first moving frame */
.cf-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s;
  pointer-events: none; -webkit-touch-callout: none; user-select: none; }
.cf-item video.on { opacity: 1; }
.cf-item[data-o="0"] { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 5; border-color: rgba(245, 197, 66, .6); box-shadow: 0 0 0 1px rgba(245, 197, 66, .2), 0 28px 80px rgba(245, 197, 66, .22); }
.cf-item[data-o="-1"] { transform: translate(-128%, -50%) scale(.78); opacity: .9; z-index: 4; filter: brightness(.7); }
.cf-item[data-o="1"]  { transform: translate(28%, -50%) scale(.78); opacity: .9; z-index: 4; filter: brightness(.7); }
.cf-item[data-o="-2"] { transform: translate(-192%, -50%) scale(.58); opacity: .55; z-index: 3; filter: brightness(.5); }
.cf-item[data-o="2"]  { transform: translate(92%, -50%) scale(.58); opacity: .55; z-index: 3; filter: brightness(.5); }
.cf-item[data-o="-3"] { transform: translate(-230%, -50%) scale(.45); opacity: 0; z-index: 2; }
.cf-item[data-o="3"]  { transform: translate(130%, -50%) scale(.45); opacity: 0; z-index: 2; }
/* 16 Sep 2026 (owner): quicker, and on a phone a proper 3D carousel - one card in front, one tilted card peeking on
   each side, the rest out of sight, and the edges fading out instead of cards being cut off by the screen. */
.coverflow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
@media (max-width: 640px) {
  .coverflow { height: 108vw; max-height: 560px; margin-top: 36px; perspective: 1100px; }
  .cf-item { width: 52vw; max-width: 270px; border-radius: 20px; }
  .cf-item[data-o="0"]  { transform: translate(-50%, -50%) scale(1); }
  .cf-item[data-o="-1"] { transform: translate(-50%, -50%) translateX(-62%) scale(.8) rotateY(24deg); opacity: 1; filter: brightness(.55); }
  .cf-item[data-o="1"]  { transform: translate(-50%, -50%) translateX(62%) scale(.8) rotateY(-24deg); opacity: 1; filter: brightness(.55); }
  .cf-item[data-o="-2"] { transform: translate(-50%, -50%) translateX(-100%) scale(.62) rotateY(30deg); opacity: 0; }
  .cf-item[data-o="2"]  { transform: translate(-50%, -50%) translateX(100%) scale(.62) rotateY(-30deg); opacity: 0; }
  .cf-item[data-o="-3"], .cf-item[data-o="3"] { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cf-item { transition: none; } }
/* speed section copy */
.speedcopy .cap { margin-bottom: 14px; }
.speedcopy h2 { text-wrap: balance; font-size: clamp(36px, 8.4vw, 58px); letter-spacing: -1.4px; }
.bigstat { display: flex; align-items: center; gap: 22px; margin-top: 30px; padding: 22px 24px; border-radius: 22px; background: var(--sf); border: 1px solid var(--line); }
.bigstat .bigline .gold { white-space: nowrap; }
.bigstat .bigline { padding: 0; border: 0; font-size: clamp(19px, 4.6vw, 24px); font-weight: 600; line-height: 1.35; letter-spacing: -.2px; color: var(--text); }
.bigstat b { flex: none; font-size: clamp(56px, 14vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -2.5px; }
.bigstat b small { font-size: .32em; letter-spacing: 0; margin-left: 6px; }
.bigstat p { color: var(--muted); font-size: 20px; line-height: 1.4; padding-left: 22px; border-left: 1px solid var(--line2); }
.bigstat strong { color: var(--text); font-weight: 600; }
.trust { margin-top: 16px; padding: 20px 24px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.trust-label { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.trust-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.trust-pills span { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; background: var(--sf2); border: 1px solid var(--line2); font-size: 14px; font-weight: 500; color: var(--text); }
.trust-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 480px) { .bigstat { flex-direction: column; align-items: flex-start; gap: 14px; } .bigstat p { padding-left: 0; border-left: 0; } }

/* speed section status card */
.jobcard { width: min(400px, 100%); margin-inline: auto; padding: 26px; border-radius: 26px; border: 1px solid rgba(245, 197, 66, .35);
  background: radial-gradient(120% 70% at 50% 0%, rgba(245, 197, 66, .12), transparent 60%), var(--sf); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.jc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.jc-file { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.jc-file svg { width: 18px; height: 18px; color: var(--gold); }
.jc-time { margin-top: 22px; }
.jc-time .gold { display: block; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; }
.jc-time small { display: block; margin-top: 6px; color: var(--dim); font-size: 13px; }
.jc-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
.jc-steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 14.5px; color: var(--text); }
.jc-steps li + li { border-top: 1px solid var(--line); }
.jc-steps i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(61, 214, 140, .12); color: #7fe0ad; border: 1px solid rgba(61, 214, 140, .35); }
.jc-steps i svg { width: 15px; height: 15px; stroke-width: 3; }
.jc-steps li.done i { background: var(--grad); color: var(--ink); border-color: transparent; }
.jc-steps span { flex: 1; min-width: 0; }
.jc-steps em { font-style: normal; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.jc-btn { margin-top: 18px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--grad); color: var(--ink); font-weight: 600; font-size: 15px; }
.jc-btn svg { width: 18px; height: 18px; transform: rotate(180deg); }
.jc-note { margin-top: 12px; text-align: center; color: var(--dim); font-size: 12px; }
.speedgrid { display: grid; gap: 40px; align-items: center; }
.phone.solo { width: min(240px, 60vw); margin-inline: auto; }
@media (min-width: 900px) { .speedgrid { grid-template-columns: 1fr auto; gap: 64px; } .phones { gap: 22px; } }

/* ---------------------------------------------------------------- legal pages */
.legal { position: relative; z-index: 1; padding-block: 48px 72px; }
.legal .wrap { max-width: 780px; }
.draft { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 8px; padding: 14px 16px; border-radius: 14px; color: var(--goldHi); background: rgba(245, 197, 66, .08); border: 1px solid rgba(245, 197, 66, .35); font-size: 15px; }
.draft svg { margin-top: 3px; }
.legal h1 { font-size: clamp(32px, 8vw, 46px); }
.legal h2 { font-size: 21px; letter-spacing: -.2px; margin-top: 34px; }
.legal p { color: var(--muted); margin-top: 10px; }
.legal .upd { color: var(--dim); font-size: 14px; margin-top: 10px; }
.legal h3 { font-size: 17px; margin-top: 24px; color: var(--text); }
.legal ul, .legal ol { color: var(--muted); margin-top: 10px; padding-left: 22px; }
.legal li { margin-top: 6px; }
.legal li::marker { color: var(--gold); }
.legal strong { color: var(--text); font-weight: 600; }
.legal main a, .legal p a, .legal li a, .legal td a { color: var(--gold); }
.legal blockquote { margin: 22px 0 0; padding: 18px 20px; border-radius: 16px; background: rgba(245, 197, 66, .06); border: 1px solid rgba(245, 197, 66, .35); }
.legal blockquote > :first-child { margin-top: 0; }
.legal .lnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.legal .lnav a { font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 14px; border: 1px solid var(--line2); border-radius: 999px; }
.legal .lnav a[aria-current="page"] { color: var(--gold); border-color: rgba(245, 197, 66, .55); }
.legal .tbl { margin-top: 14px; }
.tbl { margin-top: 26px; overflow-x: auto; border: 1px solid var(--line2); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--gold); font-weight: 600; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; background: var(--sf); }
td { color: var(--muted); }
td:first-child { color: var(--text); font-weight: 500; }
tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- phones: login panel spans the screen with 16px gutters */
@media (max-width: 639px) {
  .panel { position: fixed; left: 16px; right: 16px; top: 70px; width: auto; }
}

/* ---------------------------------------------------------------- wider screens */
@media (min-width: 640px) {
  :root { --pad: 28px; }
  .cta { flex-direction: row; justify-content: center; }
  .cta .btn { width: auto; min-width: 220px; }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .compare { grid-template-columns: 1fr 1fr; }
  .band { padding: 64px 40px; }
}
@media (min-width: 900px) {
  .topnav { display: flex; }
  .mthemes { display: none; }
  .topnav + .login { margin-left: 8px; }
  .sec { padding-block: 104px; }
  .hero { padding-block: 104px 48px; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .split .grid { margin-top: 0; }
  .foot .wrap { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  /* no html scroll-behavior: smooth - the page-by-page script glides itself, and a browser glide on top of it made every
     frame lag behind the wheel (16 Sep 2026) */
  .btn, .login-btn, .login-btn svg, .topnav a, .foot a { transition: background-color .2s, box-shadow .2s, color .2s, transform .2s; }
}
/* small phones: Themes and Sign in both fit beside the logo */
@media (max-width: 400px) { .login-btn { padding-inline: 12px; font-size: 13px; } .mthemes { padding: 0 11px; font-size: 13px; margin-right: 6px; } }

/* ---------------------------------------------------------------- 16 Sep 2026: what ShotFlick does + phone menu */
.jobs-lead { margin-bottom: 0; }
/* the process runs past as one line: numbered steps joined by arrows, fading in and out at the edges */
.flow { margin: 16px auto 0; max-width: 720px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.flow-track { display: flex; width: max-content; animation: flowrun 22s linear infinite; }
.flow:hover .flow-track { animation-play-state: paused; }
.flow-run { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.fs { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 5px; border-radius: 999px; white-space: nowrap;
  background: var(--sf); border: 1px solid var(--line2); font-size: 13.5px; font-weight: 500; color: var(--text); }
.fs b { height: 24px; min-width: 24px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--ink); background: var(--grad); font-variant-numeric: tabular-nums; }
.fa { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
@keyframes flowrun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .flow-track { animation: none; } .flow { overflow-x: auto; } }
.mbtn, .mmenu { display: none; }
@media (max-width: 899px) {
  .brand .kick { display: none; }
  .mthemes, .top .login { display: none; }
  .mbtn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 44px; height: 42px; padding: 0 11px;
    border-radius: 12px; border: 1px solid rgba(245, 197, 66, .45); background: transparent; cursor: pointer; }
  .mbtn i { display: block; height: 2px; border-radius: 2px; background: var(--gold); transition: transform .25s, opacity .2s; }
  .mbtn[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mbtn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .mbtn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .top .wrap { position: relative; }
  .mmenu:not([hidden]) { display: block; position: absolute; left: var(--pad); right: var(--pad); top: calc(100% + 10px); z-index: 60; padding: 18px;
    border-radius: 20px; background: var(--sf); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
    max-height: calc(100vh - 90px); overflow: auto; }
  .mm-cap { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
  .mm-jobs { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
  .mm-jobs li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); line-height: 1.25; }
  .mm-jobs svg { width: 16px; height: 16px; color: var(--gold); stroke-width: 2.6; }
  .mm-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .mm-links a { height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--sf2);
    border: 1px solid var(--line2); color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
  .mm-acct { display: grid; gap: 8px; margin-top: 10px; }
  .mm-acct .btn { width: 100%; height: 46px; }
}
/* 16 Sep 2026 (owner): on a phone the work comes first - less empty space on top, the rolling styles straight under the
   step line, and the two buttons after them */
.hero .coverflow + .cta { margin-top: 28px; }
@media (max-width: 640px) {
  .hero { padding-block: 22px 40px; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero .coverflow { margin-top: 18px; height: 100vw; max-height: 520px; }
  .hero .coverflow + .cta { margin-top: 18px; }
}
/* 16 Sep 2026 (owner, iPhone screenshot): the whole first screen - heading, steps, the rolling styles and BOTH buttons - fits
   the part of the phone Safari actually shows (svh = the viewport with its toolbars in place). The rolling box takes whatever
   height is left, and the cards are sized from that height, so a short phone gets smaller cards instead of hidden buttons. */
@media (max-width: 640px) {
  .hero { padding-block: 14px 28px; }
  .hero .cap { font-size: 11px; }
  .hero h1 { font-size: clamp(30px, 9vw, 40px); margin-top: 10px !important; }
  .hero .jobs-lead { font-size: 15px; margin-top: 10px; }
  .hero .flow { margin-top: 10px; }
  .hero .coverflow { margin-top: 12px; height: calc(100vh - 340px); height: calc(100svh - 340px); min-height: 250px; max-height: 100vw; }
  .hero .cf-item { width: min(52vw, calc((100vh - 364px) * .5625)); width: min(52vw, calc((100svh - 364px) * .5625)); min-width: 128px; }
  .hero .coverflow + .cta { margin-top: 12px; flex-direction: row; gap: 10px; }
  .hero .cta .btn { flex: 1; min-width: 0; height: 50px; padding-inline: 10px; font-size: 15px; white-space: nowrap; }
  .hero .fine { margin-top: 10px; }
}
/* brand line under the name (owner 16 Sep 2026: replaces the "AI video editor for creators" line in the hero) */
.brand .bsub { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .4px; color: var(--gold); line-height: 1.2; margin-top: 1px; }
@media (max-width: 640px) { .hero h1 { margin-top: 0 !important; } }
/* phone menu, three things only (owner 16 Sep 2026): Login, Themes, Pricing */
@media (max-width: 899px) {
  .mmenu:not([hidden]) { left: auto; right: var(--pad); width: 220px; padding: 8px; }
  .mm-three { display: grid; gap: 4px; }
  .mm-three a { height: 48px; display: flex; align-items: center; padding: 0 16px; border-radius: 12px; color: var(--text);
    text-decoration: none; font-size: 16px; font-weight: 600; }
  .mm-three a:active, .mm-three a:hover { background: var(--sf2); }
  .mm-three a:first-child { background: var(--grad); color: var(--ink); justify-content: center; margin-bottom: 4px; }
}
/* desktop header (owner 16 Sep 2026): the phone menu pieces now sit between the nav and Sign in, so ".topnav + .login" stopped
   matching and the button drifted away, leaving a gap in the middle. The links sit right beside the button again. */
@media (min-width: 900px) { .topnav ~ .login { margin-left: 22px; } .topnav { gap: 28px; } }
/* phone menu, round two (owner 16 Sep 2026): full width inside the page padding, every item centred, and the page behind
   it blurred and dimmed while it is open */
@media (max-width: 899px) {
  .mmenu:not([hidden]) { left: var(--pad); right: var(--pad); width: auto; padding: 10px; }
  .mm-three a { justify-content: center; }
  body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
    background: rgba(9, 9, 11, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .25s; }
  body.mm-open::after { opacity: 1; pointer-events: auto; }
  body.mm-open .top { z-index: 50; }
}
/* steps line: a single pass driven from script (enters right, leaves fully left, restarts) - the CSS loop is retired */
.flow-track { animation: none; }
.flow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fs-free { padding: 0 14px; background: var(--grad); color: var(--ink); border-color: transparent; font-weight: 700; box-shadow: 0 6px 18px rgba(245, 197, 66, .3); }
/* a small AI tag on every step ShotFlick does by itself (owner 16 Sep 2026) */
.fs .ai { font-style: normal; margin-left: 1px; height: 15px; padding: 0 4px; border-radius: 5px; display: inline-grid; place-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: .3px; line-height: 1; color: var(--gold); border: 1px solid rgba(245, 197, 66, .55);
  background: rgba(245, 197, 66, .1); }

/* ---------------------------------------------------------------- progress frame (16 Sep 2026)
   The border is the progress bar: a gold line leaves the top centre, runs clockwise round the box and is 100% when it gets
   back. A bright head rides at its front. */
.pframe { position: relative; border-color: rgba(255, 255, 255, .06); }
.pf-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pf-svg path { fill: none; stroke-width: 3; stroke-linecap: round; }
.pf-track { stroke: rgba(245, 197, 66, .12); }
.pf-bar { stroke: #f5c542; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(245, 197, 66, .55)); }
.pf-head { stroke: #fff6d6; stroke-width: 6; stroke-dasharray: .01 99.99; stroke-dashoffset: 100; filter: drop-shadow(0 0 8px #ffd65c) drop-shadow(0 0 3px #fff); }
.pf-badge { color: #f5c542; background: rgba(245, 197, 66, .08); border-color: rgba(245, 197, 66, .35); }
.pf-step { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.pf-num { flex: none; height: 30px; min-width: 30px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #161105; background: linear-gradient(180deg, #ffd65c, #f0b72e); }
.pf-name { min-width: 0; font-size: 17px; font-weight: 600; color: #f7f5ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-name.in { animation: pfin .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes pfin { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.pf-step .ai { flex: none; font-style: normal; height: 16px; padding: 0 5px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #f5c542; border: 1px solid rgba(245, 197, 66, .55); background: rgba(245, 197, 66, .1); }
.pf-pct { margin-left: auto; font-size: 15px; font-weight: 700; color: #f5c542; font-variant-numeric: tabular-nums; }
.pf-dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 14px; }
.pf-dots i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); transition: background .3s; }
.pf-dots i.on { background: rgba(245, 197, 66, .75); }
.pf-dots i.now { background: #f5c542; animation: pfpulse 1s ease-in-out infinite; }
@keyframes pfpulse { 50% { opacity: .4; } }
.pf-btn { opacity: .35; filter: saturate(.3); transition: opacity .4s, filter .4s; }
.is-done .pf-btn { opacity: 1; filter: none; box-shadow: 0 10px 30px rgba(245, 197, 66, .3); }
.jc-time .num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pf-name.in, .pf-dots i.now { animation: none; } }
/* live card, round two (owner 16 Sep 2026): nothing moves when the numbers or the step names change - fixed card width,
   a fixed-width clock, a fixed-height step row that trims long names - and the frame turns green once it is done */
#livejob { width: 400px; max-width: calc(100vw - 40px); flex: none; box-sizing: border-box; }
#livejob .jc-time .gold { display: inline-block; min-width: 6.4ch; font-variant-numeric: tabular-nums; }
#livejob .jc-time small { height: 1.4em; overflow: hidden; }
#livejob .pf-step { height: 62px; padding-block: 0; }
#livejob .pf-name { flex: 0 1 auto; }
/* sections take turns (owner 16 Sep 2026: "no contrast between two sections"): every other band sits on a lifted surface
   with a faint gold glow at its top edge and clear hairlines above and below */
main > section.sec:nth-of-type(even), body > section.sec:nth-of-type(even) {
  background: radial-gradient(70% 120px at 50% 0, rgba(245, 197, 66, .07), transparent), linear-gradient(180deg, #121217, #0e0e12);
  border-top: 1px solid rgba(245, 197, 66, .14); border-bottom: 1px solid rgba(255, 255, 255, .05);
}
/* speed section (owner 16 Sep 2026): the live card's bottom edge lines up with the bottom of the "Built for creators" box */
@media (min-width: 900px) { .speedgrid { align-items: end; } }
/* speed stat names the model it is true for (owner 16 Sep 2026) */
/* 16 Sep 2026 (owner: "ye number ke niche aana chahiye tha"): the tag hangs directly under the number, centred on it.
   The number and its tag are one column; that column sits on the sentence's baseline, so the words line up as one line. */
.bigstat .bigline { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; row-gap: 4px; }
.bigstat .bl-num { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.flashtag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 0; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px; color: #93c5fd; background: rgba(96, 165, 250, .1); border: 1px solid rgba(96, 165, 250, .35); white-space: nowrap; }
/* the stat card and the "Built for creators" card are centred on one axis at every width - left-aligned content left a big
   empty right side in the card (owner: symmetry + alignment, 16 Sep 2026) */
.bigstat { justify-content: center; align-items: center; }
.bigstat .bigline { justify-content: center; text-align: center; width: 100%; }
.trust { text-align: center; }
.trust-pills { justify-content: center; }
.sec + .trustsec { padding-top: 0; border-top: 0; }   /* sits right under the final call to action: 72 px above it (the CTA's own bottom) and 72 px below */
.trustsec .trust { margin: 0 auto; max-width: 760px; }
/* phone: the three trust pills as one even row - equal widths, centred words, same height (was 2 + 1 ragged) */
@media (max-width: 640px) {
  .trust { text-align: center; }
  .trust-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .trust-pills span { height: auto; min-height: 52px; padding: 6px 6px; justify-content: center; text-align: center; font-size: 12.5px; line-height: 1.25; }
}
/* header stays on screen (owner 16 Sep 2026). It was already position: sticky, but "overflow-x: hidden" on html/body turns
   them into scroll boxes and sticky then sticks to nothing. "clip" still stops sideways scrolling without that side effect. */
html, body { overflow-x: clip; }
/* section paging lives in a small script at the end of index.html (owner 16 Sep 2026) - CSS snap pulled backwards */
/* computer: the first page fits one screen too (owner 16 Sep 2026 - with page-by-page scrolling the Auto Edit and Advanced
   Editor buttons sat below the fold and were skipped). The rolling cards take the height that is left. */
@media (min-width: 641px) {
  .hero { padding-block: 26px 22px; }
  .hero h1 { font-size: clamp(40px, 6.2vh, 64px); }
  .hero .jobs-lead { margin-top: 12px; }
  .hero .flow { margin-top: 12px; }
  .hero .coverflow { margin-top: 14px; height: clamp(200px, calc(100vh - 420px), 520px); height: clamp(200px, calc(100svh - 420px), 520px); }
  .hero .cf-item { width: min(250px, calc((100vh - 440px) * .5625)); width: min(250px, calc((100svh - 440px) * .5625)); min-width: 110px; }
  .hero .coverflow + .cta { margin-top: 16px; }
  .hero .fine { margin-top: 10px; }
}
/* page-by-page scrolling needs every section's real height up front; lazy rendering guessed 720 px for the ones not yet drawn
   and the page then landed a little off. The homepage is small - draw it all. */
main > section.below { content-visibility: visible; contain-intrinsic-size: none; }

/* ---------------------------------------------------------------- sections are screens (owner 16 Sep 2026)
   Each section is exactly one screen tall under the header, with its content centred top to bottom, so on any phone or
   laptop the section above and below never peek in. The last one leaves room for the footer, which shares its screen. */
main > .hero, main > section.sec { min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); display: flex; flex-direction: column; justify-content: center; }
main > section.sec { padding-block: 32px; }
main > section.sec:last-of-type { min-height: calc(100vh - 62px - var(--foot, 0px)); min-height: calc(100svh - 62px - var(--foot, 0px)); }
.trust-end { margin: 28px auto 0; max-width: 760px; }
@media (min-width: 900px) { main > section.sec { padding-block: 40px; } }

/* phones: every section fits one screen (owner 16 Sep 2026 - no section cut in two). Same content, tighter setting:
   feature cards lie down (icon beside the words), the comparison and the live card lose their spare padding, headings and
   leads come down a size. */
@media (max-width: 640px) {
  main > section.sec { padding-block: 18px; }
  .sec h2 { font-size: clamp(24px, 6.6vw, 30px); letter-spacing: -.5px; }
  .sec .cap { font-size: 11px; }
  .sec .lead { font-size: 14.5px; line-height: 1.45; margin-top: 8px; }
  .sec .grid, .sec .compare { margin-top: 16px; gap: 8px; }
  .grid.three .card { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
  .grid.three .card .tile { grid-row: span 2; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
  .grid.three .card .tile svg { width: 19px; height: 19px; }
  .grid.three .card h3 { font-size: 15.5px; margin: 0; gap: 6px; }
  .grid.three .card p { margin-top: 0; font-size: 13px; line-height: 1.35; }
  .grid.three .card .badge { height: 18px; font-size: 9px; }
  .compare .card { padding: 14px 16px; }
  .compare .card h3 { font-size: 16px; }
  .compare .ticks { margin-top: 6px; }
  .compare .ticks li { font-size: 13.5px; line-height: 1.35; padding-block: 3px; }
  .sec .links, .sec .band .cta, #price .btn { margin-top: 12px; }
  .speedgrid { gap: 14px; }
  .bigstat { margin-top: 12px; padding: 12px 16px; }
  #livejob { padding: 16px 18px; }
  #livejob .jc-time { margin-top: 12px; }
  #livejob .jc-time .gold { font-size: 38px; }
  #livejob .pf-step { margin-top: 12px; height: 50px; }
  #livejob .pf-dots { margin-top: 10px; }
  #livejob .jc-btn { margin-top: 12px; height: 42px; }
  #livejob .jc-note { margin-top: 8px; }
  .band { padding: 24px 18px; }
  .trust-end { margin-top: 12px; }
  .trust { padding: 14px 16px; }
}
/* short screens (laptops 600-700 px tall, small phones): the longest sections tighten a little more */
@media (max-height: 700px) {
  main > section.sec { padding-block: 16px; }
  .sec h2 { font-size: clamp(24px, 4.2vh, 34px); }
  .sec .lead { font-size: 15px; margin-top: 8px; }
  .sec .grid, .sec .compare { margin-top: 18px; }
  #price .compare .card { padding: 14px 18px; }
  #price .ticks li { padding-block: 2px; font-size: 14px; }
  #price .btn { height: 44px; margin-top: 14px; }
  .band { padding-block: 26px; }
  .band .cta { margin-top: 14px; }
  .trust-end { margin-top: 14px; }
  .trust { padding: 14px 18px; }
  .foot { padding-block: 18px 20px; }
}
@media (max-width: 640px) {
  #price h2 { font-size: clamp(22px, 6vw, 26px); }
  #price .lead { display: none; }                        /* the two cards already say it */
  #price .compare .card { padding: 12px 14px; }
  #price .ticks li { font-size: 13px; padding-block: 2px; }
  #price .btn { height: 40px; margin-top: 10px; }
}
/* fix (16 Sep 2026): a flex column shrinks a child with auto side-margins to its content, so the steps line grew to 720 px
   on a 390 px phone (running off-screen), the rolling cards box collapsed to 0 and some sections lost their width. Every
   direct child keeps the full width it had before; its own max-width still applies. */
main > .hero > *, main > section.sec > * { width: 100%; box-sizing: border-box; }

/* ================================================================ section system "sx" (owner 16 Sep 2026)
   One skeleton for every section below the hero, so nothing is ever a pixel out of line:
   - the head is centred on the page's own centre line, with one fixed rhythm: eyebrow 12 · headline 14 · sentence
   - the body always spans the full content width; cards in a row are equal in width AND height, with one gap everywhere
   - inside a card: icon, title, text, always in that order and on the same left edge
   - a foot line, when there is one, sits on the same centre line as the head */
.sx { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sx-head { width: 100%; max-width: 760px; margin-inline: auto; }
.sx-head .cap { justify-content: center; margin: 0 0 12px; }
.sx-head h2 { margin: 0; text-wrap: balance; }
.sx-head .lead { margin: 14px auto 0; max-width: 640px; text-wrap: pretty; }
.sx-head .lead b { font-weight: 600; }
.sx-body { width: 100%; margin-top: 40px; text-align: left; }
.sx-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.sx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-top: 0 !important; }
.sx-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 24px; margin: 0; height: 100%; box-sizing: border-box; }
.sx-card .tile { margin: 0 0 16px; }
.sx-card h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.sx-card p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }
.sx-two .card { height: 100%; box-sizing: border-box; }
.sx-foot { width: 100%; margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sx-foot .btn { margin: 0 !important; }
.sx-note { font-size: 13px; color: var(--muted); letter-spacing: .2px; }

/* speed: three proof cards on the left, the live export on the right - same top edge, same bottom edge */
.sx-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: stretch; }
.sx-rows { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sx-rows .sx-card { flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; }
.sx-rows .sx-card .tile { margin: 0; flex: none; }
.sx-rows .sx-card h3, .sx-rows .sx-card p { display: block; }
.sx-rows .sx-card > h3 { order: 0; }
.sx-split #livejob { width: 400px; max-width: 100%; margin: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }

/* the proof card text sits in one block beside its icon */
.sx-rows .sx-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-content: center; }
.sx-rows .sx-card .tile { grid-row: 1 / span 2; align-self: center; }
.sx-rows .sx-card p { margin: 0; }

/* final call to action keeps the same centre line */
[aria-labelledby="cta-title"] .band h2 { text-wrap: balance; }

/* tablet */
@media (max-width: 899px) {
  .sx-split { grid-template-columns: 1fr; }
  .sx-split #livejob { width: 100%; max-width: none; margin-inline: 0; height: auto; }   /* same edges as the proof cards above it */
}

/* phone: one column, cards lie down (icon beside the words) with identical heights; speed shows the live card first and
   the three proofs as three equal tiles under it */
@media (max-width: 640px) {
  .sx-head .cap { margin-bottom: 8px; }
  .sx-head .lead { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .sx-body { margin-top: 16px; }
  .sx-three, .sx-two { grid-template-columns: 1fr; gap: 8px; }
  .sx-three { grid-auto-rows: 1fr; }
  .sx-three .sx-card { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-content: center; padding: 12px 14px; }
  .sx-three .sx-card .tile { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; border-radius: 12px; align-self: center; }
  .sx-three .sx-card .tile svg { width: 19px; height: 19px; }
  .sx-three .sx-card h3 { font-size: 15px; }
  .sx-three .sx-card p { margin: 0; font-size: 13px; line-height: 1.35; }
  .sx-split { display: flex; flex-direction: column-reverse; gap: 8px; }
  .sx-split #livejob { width: 100%; max-width: none; }
  .sx-rows { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sx-rows .sx-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px 6px; }
  .sx-rows .sx-card .tile { width: 32px; height: 32px; border-radius: 10px; }
  .sx-rows .sx-card .tile svg { width: 16px; height: 16px; }
  .sx-rows .sx-card h3 { font-size: 11.5px; line-height: 1.25; font-weight: 600; }
  .sx-rows .sx-card p { display: none; }
  .sx-foot { margin-top: 12px; gap: 6px; }
  .sx-note { font-size: 12px; }
}

/* short screens: the same layout with less air */
@media (max-height: 760px) and (min-width: 641px) {
  .sx-body { margin-top: 24px; }
  .sx-head .lead { margin-top: 10px; font-size: 16px; }
  .sx-card { padding: 18px 20px; }
  .sx-card .tile { margin-bottom: 10px; }
  .sx-rows .sx-card { padding: 12px 18px; }
  .sx-foot { margin-top: 18px; }
  .sx-split #livejob { padding: 18px 20px; }
  .sx-split #livejob .jc-time { margin-top: 10px; }
  .sx-split #livejob .jc-time .gold { font-size: 40px; }
  .sx-split #livejob .pf-step { margin-top: 10px; height: 52px; }
  .sx-split #livejob .jc-btn { margin-top: 10px; height: 42px; }
}
/* the "Built for creators" strip takes the exact width of the call-to-action box above it */
.trust-end { max-width: none; width: 100%; box-sizing: border-box; margin-inline: 0; }

/* price comparison table (owner 16 Sep 2026): one row per question, the two answers side by side. Every row is the same
   height, the three columns keep one edge each from top to bottom, and the ShotFlick column is one continuous gold panel. */
.cmp { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line2); border-radius: 22px; overflow: hidden; background: var(--sf); }
.cmp-row { display: contents; }
.cmp-row > span { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; box-sizing: border-box; }
.cmp-headrow > span { border-top: 0; min-height: 52px; font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
.cmp-k { color: var(--text); font-weight: 600; }
.cmp-them { color: var(--muted); }
.cmp-them svg { width: 16px; height: 16px; flex: none; color: var(--dim); }
.cmp-us { color: var(--text); background: rgba(245, 197, 66, .07); border-left: 1px solid rgba(245, 197, 66, .3); }
.cmp-us svg { width: 16px; height: 16px; flex: none; color: var(--gold); stroke-width: 2.6; }
.cmp-headrow .cmp-them { color: var(--dim); }
@media (max-height: 760px) and (min-width: 641px) { .cmp-row > span { min-height: 46px; padding-block: 8px; font-size: 14px; } .cmp-headrow > span { min-height: 40px; } }
@media (max-width: 640px) {
  .cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 18px; }
  .cmp-row > span { min-height: 0; padding: 8px 12px; font-size: 12.5px; gap: 6px; }
  .cmp-k { grid-column: 1 / -1; justify-content: center; padding: 7px 12px 3px !important; border-top: 1px solid var(--line); font-size: 10.5px !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted) !important; }
  .cmp-row .cmp-them, .cmp-row .cmp-us { border-top: 0; align-items: flex-start; }
  .cmp-headrow .cmp-k { display: none; }
  .cmp-headrow > span { font-size: 11px; letter-spacing: 1.2px; min-height: 36px; padding-block: 8px; justify-content: center; }
  .cmp-them svg, .cmp-us svg { width: 13px; height: 13px; margin-top: 2px; }
}
@media (max-width: 640px) {
  .cmp-row > span { padding: 5px 10px; font-size: 12px; line-height: 1.3; }
  .cmp-k { padding: 6px 10px 1px !important; font-size: 9.5px !important; }
  .cmp-headrow > span { min-height: 32px; padding-block: 6px; }
}
@media (max-width: 640px) { [aria-labelledby="cta-title"] .band { padding: 20px 16px; } [aria-labelledby="cta-title"] .band h2 { font-size: 24px; } [aria-labelledby="cta-title"] .band .cta { margin-top: 12px; } .trust-end .trust-pills span { min-height: 44px; } }
/* every comparison row the same height, on every screen */
@media (min-width: 641px) { .cmp { grid-template-rows: auto repeat(5, minmax(0, 1fr)); } }

/* ================================================================ finish + one creative idea per screen (owner 16 Sep 2026)
   Rule for everything below: nothing changes size or position. Motion is opacity, blur, colour, background and borders
   only, so the alignment gate measures the same numbers with or without it. */

/* eyebrow: the label sits between two short gold rules of equal length - the same mark on every screen */
.sx-head .cap { gap: 12px; }
.sx-head .cap::before, .sx-head .cap::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 197, 66, .8)); }
.sx-head .cap::after { background: linear-gradient(90deg, rgba(245, 197, 66, .8), transparent); }

/* arrival: when a screen comes into view its head and cards fade up out of a soft blur, one after another */
.sx.can-reveal .sx-head > *, .sx.can-reveal .sx-body > *, .sx.can-reveal .sx-foot, .sx.can-reveal .cmp-row > span {
  opacity: 0; filter: blur(6px); transition: opacity .55s ease, filter .55s ease; }
.sx.in .sx-head > *, .sx.in .sx-body > *, .sx.in .sx-foot, .sx.in .cmp-row > span { opacity: 1; filter: none; }
.sx.in .sx-head > :nth-child(2) { transition-delay: .06s; } .sx.in .sx-head > :nth-child(3) { transition-delay: .12s; }
.sx.in .sx-body > :nth-child(1) { transition-delay: .18s; } .sx.in .sx-body > :nth-child(2) { transition-delay: .26s; }
.sx.in .sx-body > :nth-child(3) { transition-delay: .34s; } .sx.in .sx-foot { transition-delay: .42s; }
.sx.in .sx-rows > .sx-card:nth-child(2) { transition-delay: .26s; } .sx.in .sx-rows > .sx-card:nth-child(3) { transition-delay: .34s; }

/* 2 speed: each proof icon answers in turn with a gold ping, like a task ticking off */
@keyframes sxping { 0% { box-shadow: 0 0 0 0 rgba(245, 197, 66, .45); } 70% { box-shadow: 0 0 0 12px rgba(245, 197, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0); } }
.sx.in .sx-rows .tile { animation: sxping 3s ease-out infinite; }
.sx.in .sx-rows .sx-card:nth-child(2) .tile { animation-delay: 1s; }
.sx.in .sx-rows .sx-card:nth-child(3) .tile { animation-delay: 2s; }

/* 3 price: a slow band of light travels down the ShotFlick column, and its ticks glow one row at a time */
@keyframes sxsweep { from { background-position: 0 -140%; } to { background-position: 0 240%; } }
.cmp-us { background-image: linear-gradient(180deg, transparent 0, rgba(245, 197, 66, .16) 50%, transparent 100%); background-size: 100% 60%; background-repeat: no-repeat; background-position: 0 -140%; }
.sx.in .cmp-us { animation: sxsweep 5s ease-in-out infinite; }
.sx.in .cmp-row:nth-child(3) .cmp-us { animation-delay: .25s; } .sx.in .cmp-row:nth-child(4) .cmp-us { animation-delay: .5s; }
.sx.in .cmp-row:nth-child(5) .cmp-us { animation-delay: .75s; } .sx.in .cmp-row:nth-child(6) .cmp-us { animation-delay: 1s; }
.sx.in .cmp-headrow .cmp-us { animation: none; }

/* 4 privacy: a thin gold ring keeps turning round each icon - a quiet sign that something is watching over it */
@property --sxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sxturn { to { --sxa: 360deg; } }
#privacy .sx-card .tile { position: relative; }
#privacy .sx-card .tile::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--sxa), transparent 0 70%, rgba(245, 197, 66, .95) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#privacy .sx.in .sx-card .tile::after { animation: sxturn 3.2s linear infinite; }
#privacy .sx-card:nth-child(2) .tile::after { animation-delay: -1.06s; } #privacy .sx-card:nth-child(3) .tile::after { animation-delay: -2.13s; }

/* 5 customise: the three cards take turns being "picked" - a gold edge moves from one choice to the next */
@keyframes sxpick { 0%, 30% { border-color: rgba(245, 197, 66, .55); box-shadow: 0 0 0 1px rgba(245, 197, 66, .25), 0 18px 44px rgba(245, 197, 66, .12); }
                    40%, 100% { border-color: var(--line); box-shadow: none; } }
[aria-labelledby="custom-title"] .sx.in .sx-card { animation: sxpick 6s ease-in-out infinite; }
[aria-labelledby="custom-title"] .sx.in .sx-card:nth-child(2) { animation-delay: 2s; }
[aria-labelledby="custom-title"] .sx.in .sx-card:nth-child(3) { animation-delay: 4s; }

/* 6 smart assets: a scan of light passes across each card in turn, as if the visual is being found */
[aria-labelledby="assets-title"] .sx-card { position: relative; overflow: hidden; }
[aria-labelledby="assets-title"] .sx-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(245, 197, 66, .12) 50%, transparent 70%); }
@keyframes sxscan { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
[aria-labelledby="assets-title"] .sx.in .sx-card::after { animation: sxscan 4.5s ease-in-out infinite; }
[aria-labelledby="assets-title"] .sx.in .sx-card:nth-child(2)::after { animation-delay: 1.5s; }
[aria-labelledby="assets-title"] .sx.in .sx-card:nth-child(3)::after { animation-delay: 3s; }

/* 7 last screen: light runs round the call-to-action frame, the same language as the live export card */
[aria-labelledby="cta-title"] .band { isolation: isolate; }
[aria-labelledby="cta-title"] .band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--sxa), transparent 0 75%, rgba(255, 214, 92, .95) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sxturn 6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .sx.can-reveal .sx-head > *, .sx.can-reveal .sx-body > *, .sx.can-reveal .sx-foot, .sx.can-reveal .cmp-row > span { opacity: 1; filter: none; transition: none; }
  .sx .tile, .cmp-us, .sx-card, .sx-card::after, .tile::after, .band::before { animation: none !important; }
}

/* ================================================================ premium motion, round two (owner 16 Sep 2026)
   1. Arrival: every element slides up into place on a long, soft ease - quick to start, slow to settle.
   2. The gold glow is a relay, not a set of separate blinks: it leaves the first box, hands over to the next the moment it
      finishes, reaches the last one and starts again at the first with no pause in between. Each box owns an equal slice of
      one loop, and the slices touch end to start. */
.sx.can-reveal .sx-head > *, .sx.can-reveal .sx-body > *, .sx.can-reveal .sx-foot, .sx.can-reveal .sx-rows > .sx-card {
  opacity: 0; filter: blur(8px); transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }
.sx.can-reveal .cmp-row > span { opacity: 0; transform: none; }
.sx.in .sx-head > *, .sx.in .sx-body > *, .sx.in .sx-foot, .sx.in .sx-rows > .sx-card, .sx.in .cmp-row > span { opacity: 1; filter: none; transform: none; }
.sx.in .sx-rows > .sx-card:nth-child(1) { transition-delay: .18s; } .sx.in .sx-rows > .sx-card:nth-child(2) { transition-delay: .28s; }
.sx.in .sx-rows > .sx-card:nth-child(3) { transition-delay: .38s; }
.sx.in .sx-split > #livejob { transition-delay: .3s; }
.sx.in .cmp-row:nth-child(2) > span { transition-delay: .22s; } .sx.in .cmp-row:nth-child(3) > span { transition-delay: .29s; }
.sx.in .cmp-row:nth-child(4) > span { transition-delay: .36s; } .sx.in .cmp-row:nth-child(5) > span { transition-delay: .43s; }
.sx.in .cmp-row:nth-child(6) > span { transition-delay: .5s; }

/* relay timing: 3 boxes -> each owns a third of the loop; 5 rows -> each owns a fifth */
@keyframes rlPing  { 0% { box-shadow: 0 0 0 0 rgba(245, 197, 66, .55); } 33.33% { box-shadow: 0 0 0 14px rgba(245, 197, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0); } }
@keyframes rlRing  { 0% { --sxa: 0deg; opacity: 1; } 33.33% { --sxa: 360deg; opacity: 1; } 33.34%, 100% { --sxa: 360deg; opacity: 0; } }
@keyframes rlPick  { 0% { border-color: rgba(245, 197, 66, .15); box-shadow: none; }
                     16.66% { border-color: rgba(245, 197, 66, .6); box-shadow: 0 0 0 1px rgba(245, 197, 66, .25), 0 18px 44px rgba(245, 197, 66, .12); }
                     33.33%, 100% { border-color: var(--line); box-shadow: none; } }
@keyframes rlScan  { 0% { transform: translateX(-100%); } 33.33%, 100% { transform: translateX(100%); } }
@keyframes rlSweep { 0% { background-position: 0 -100%; } 20%, 100% { background-position: 0 200%; } }

/* 2 speed - the ping runs down the three proofs */
.sx.in .sx-rows .tile { animation: rlPing 3s linear infinite; }
.sx.in .sx-rows .sx-card:nth-child(2) .tile { animation-delay: 1s; }
.sx.in .sx-rows .sx-card:nth-child(3) .tile { animation-delay: 2s; }
/* 3 price - one beam falls through the ShotFlick column, cell to cell */
.cmp-us { background-size: 100% 100%; background-position: 0 -100%; }
.sx.in .cmp-us { animation: rlSweep 3s linear infinite; }
.sx.in .cmp-row:nth-child(2) .cmp-us { animation-delay: 0s; } .sx.in .cmp-row:nth-child(3) .cmp-us { animation-delay: .6s; }
.sx.in .cmp-row:nth-child(4) .cmp-us { animation-delay: 1.2s; } .sx.in .cmp-row:nth-child(5) .cmp-us { animation-delay: 1.8s; }
.sx.in .cmp-row:nth-child(6) .cmp-us { animation-delay: 2.4s; }
.sx.in .cmp-headrow .cmp-us { animation: none; background-image: none; }
/* 4 privacy - the ring makes one turn round each icon and hands over */
#privacy .sx-card .tile::after { opacity: 0; }
#privacy .sx.in .sx-card .tile::after { animation: rlRing 3.6s linear infinite; }
#privacy .sx.in .sx-card:nth-child(1) .tile::after { animation-delay: 0s; }
#privacy .sx.in .sx-card:nth-child(2) .tile::after { animation-delay: 1.2s; }
#privacy .sx.in .sx-card:nth-child(3) .tile::after { animation-delay: 2.4s; }
/* 5 customise - the gold edge passes from choice to choice */
[aria-labelledby="custom-title"] .sx.in .sx-card { animation: rlPick 4.5s ease-in-out infinite; }
[aria-labelledby="custom-title"] .sx.in .sx-card:nth-child(1) { animation-delay: 0s; }
[aria-labelledby="custom-title"] .sx.in .sx-card:nth-child(2) { animation-delay: 1.5s; }
[aria-labelledby="custom-title"] .sx.in .sx-card:nth-child(3) { animation-delay: 3s; }
/* 6 assets - one beam of light crosses the row, card after card */
[aria-labelledby="assets-title"] .sx-card::after { transform: translateX(-100%); background: linear-gradient(100deg, transparent 20%, rgba(245, 197, 66, .14) 50%, transparent 80%); }
[aria-labelledby="assets-title"] .sx.in .sx-card::after { animation: rlScan 3.6s linear infinite; }
[aria-labelledby="assets-title"] .sx.in .sx-card:nth-child(1)::after { animation-delay: 0s; }
[aria-labelledby="assets-title"] .sx.in .sx-card:nth-child(2)::after { animation-delay: 1.2s; }
[aria-labelledby="assets-title"] .sx.in .sx-card:nth-child(3)::after { animation-delay: 2.4s; }

/* the hero's first screen and the last screen get the same soft arrival on load */
@keyframes rlRise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
[aria-labelledby="cta-title"] .band, [aria-labelledby="cta-title"] .trust-end { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .sx.can-reveal .sx-head > *, .sx.can-reveal .sx-body > *, .sx.can-reveal .sx-foot, .sx.can-reveal .sx-rows > .sx-card, .sx.can-reveal .cmp-row > span { opacity: 1; filter: none; transform: none; transition: none; }
}
/* brand block (owner 16 Sep 2026): "ShotFlick" and "AI video editor" together are the height of the 38 px mark beside them */
.brand .bn { font-size: 20px; line-height: 1.1; letter-spacing: -.2px; }
.brand .bsub { font-size: 12.5px; line-height: 1.2; margin-top: 2px; letter-spacing: .2px; }
.hero .flow { margin-top: 18px; }
/* one line on a computer; on a phone the break falls after "Trim." instead of in the middle of the gold words */
.br-m { display: none; }
@media (max-width: 640px) { .br-m { display: inline; } }
/* free offer pill above the headline (owner 16 Sep 2026: live with the current offer, 2 free edits after sign up) (16 Sep 2026) */
.freeline { margin: 14px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid rgba(245,197,66,.35); background: rgba(245,197,66,.06); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.freeline .fl-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #161105; background: linear-gradient(180deg,#FFD65C,#E8AE2A); padding: 4px 10px; border-radius: 999px; }
.freeline svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.freeline.fl-top { width: auto; align-self: center; margin: 0 auto 14px; }
.hero .freeline.fl-top + h1 { margin-top: 0 !important; }
@media (max-width: 640px) { .freeline.fl-top { margin-bottom: 10px; font-size: 12.5px; padding: 5px 12px 5px 5px; } .freeline .fl-tag { padding: 3px 8px; } }
/* the pill above the headline takes about 50 px; the rolling cards give that back so both buttons stay on the first screen.
   On very short phone screens the cards keep a readable size and the buttons move just below the fold - the page's
   paging gives the first screen a second stop that shows them, so they are never out of reach. */
@media (min-width: 641px) { .hero .coverflow { height: clamp(120px, calc(100svh - 472px), 520px); } .hero .cf-item { width: min(250px, calc((100svh - 492px) * .5625)); min-width: 90px; } }
@media (max-width: 640px) { .hero .coverflow { height: max(210px, calc(100svh - 394px)); } .hero .cf-item { width: min(52vw, calc((100svh - 418px) * .5625)); min-width: 112px; } }

/* 16 Sep: phone headline letters were touching (-1.2px tracking at 30-44px) - open it up on small screens */
@media (max-width: 640px) { h1, .hero h1 { letter-spacing: -0.2px; line-height: 1.22; } }
/* header rhythm (owner 16 Sep 2026: "the buttons on top are not aligned"): Themes · Pricing · Dark mode · Go to app sit on one
   centre line with the same 28 px between each (the header row already has a 16 px gap, the switch adds 12 px each side).
   Pages without the phone menu (legal) keep their Go to app button on a phone. */
.top .wrap > .sfm-head { margin-right: 12px; }
.top .wrap > .topnav ~ .sfm-head { margin-left: 12px; }
@media (max-width: 899px) { body:not(.has-mm) .top .login { display: block; } }