/* ShortWright — shared styles. Deployed to Cloudflare Pages. */

/* DARK UNCONDITIONALLY, AND THESE ARE THE APP'S TOKENS VERBATIM.
 *
 * This used to be a light palette with a `prefers-color-scheme: dark`
 * override. The app is dark whatever the visitor has set. So the two were
 * never designed differently -- they RESOLVED differently, and anyone
 * browsing in light mode (most people) met a white marketing page selling a
 * near-black product. A visitor in dark mode would never have seen the
 * mismatch, which is why it survived.
 *
 * The values below are copied from app/src/app/globals.css rather than
 * approximated, because "close enough" is what produced two ambers. If that
 * file's palette changes, this one has to change with it -- there is no
 * shared token source yet, and this comment is the only thing tying them
 * together.
 */
:root{
  color-scheme: dark;
  --ground:#0b0c11; --surface:#15171f; --surface-2:#1b1e28;
  --ink:#f3f2ef; --ink-2:#a2a49e; --ink-3:#75776f;
  --rule:#262a36; --rule-2:#383e4f;
  --accent:#f0a72a; --accent-bright:#f5bc5e; --accent-wash:#3a2a0d;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,nav,.ui,.eyebrow,.btn,th{font-family:Archivo,"Helvetica Neue",Arial,sans-serif}
.mono,.eyebrow{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

.wrap{max-width:44rem; margin:0 auto; padding:0 1.5rem}
.eyebrow{font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500}

/* nav */
nav{border-bottom:1px solid var(--rule)}
nav .wrap{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.1rem; padding-bottom:1.1rem; flex-wrap:wrap}
.mark{font-weight:700; font-size:1.0625rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.mark span{color:var(--accent)}
nav a.lnk{font-family:Archivo,sans-serif; font-size:.875rem; color:var(--ink-2); text-decoration:none}
nav a.lnk:hover{color:var(--accent)}

/* hero */
.hero{padding:4.5rem 0 3.5rem; border-bottom:1px solid var(--rule)}

/* The hero holds the product now.
   This page sells "video that actually moves" and contained no moving image --
   and no image at all. Every competitor leads with output; this one led with
   type on cream. The frame is wider than .wrap because a 9:16 video beside a
   column of text needs the room, and it collapses to one column early: a phone
   showing a phone-shaped video next to nothing is worse than showing it under
   the sentence that explains it. */
.hero-grid{
  max-width:60rem;
  display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:3.5rem; align-items:center;
}
.hero-demo{margin:0}
.hero-demo video{
  width:100%; aspect-ratio:9/16; display:block;
  border-radius:16px; background:#000;
  border:1px solid var(--rule);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.45);
}
.hero-demo figcaption{
  font-size:.75rem; color:var(--ink-3); margin-top:.7rem; text-align:center;
  line-height:1.5;
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:2.75rem; max-width:44rem}
  .hero-demo{max-width:300px; margin-inline:auto}
}
h1{font-size:clamp(2.15rem,6.5vw,3.35rem); font-weight:700; letter-spacing:-.03em; line-height:1.04; margin:.85rem 0 0; text-wrap:balance}
.lede{font-size:1.125rem; color:var(--ink-2); margin:1.15rem 0 0; max-width:34rem}

.btn{
  display:inline-block; margin-top:1.9rem; padding:.72rem 1.35rem;
  background:var(--accent); color:#fff; text-decoration:none;
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  border:1px solid var(--accent);
}
@media (prefers-color-scheme: dark){ .btn{color:#15161A} }
.btn:hover{background:var(--accent-bright); border-color:var(--accent-bright)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent-bright); outline-offset:3px}
.btn-note{font-size:.8125rem; color:var(--ink-3); margin:.85rem 0 0}

section{padding:3.5rem 0; border-bottom:1px solid var(--rule)}
h2{font-size:1.375rem; font-weight:700; letter-spacing:-.018em; margin:.55rem 0 1.1rem; text-wrap:balance}
h3{font-size:1rem; font-weight:600; margin:0 0 .3rem}
p{margin:0 0 1rem} p:last-child{margin-bottom:0}
a{color:var(--accent); text-underline-offset:3px}
strong{font-weight:600}

.grid{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:1.25rem}
@media(min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
.grid > div{background:var(--surface); padding:1.25rem 1.35rem}
.grid p{font-size:.9375rem; color:var(--ink-2); margin:0}

ol.steps{list-style:none; counter-reset:s; padding:0; margin:1.25rem 0 0}
ol.steps li{
  counter-increment:s; position:relative; padding:.95rem 0 .95rem 2.5rem;
  border-top:1px solid var(--rule); font-size:.9375rem; color:var(--ink-2);
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1rem;
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--accent); font-weight:500;
}
ol.steps b{color:var(--ink); font-family:Archivo,sans-serif; font-weight:600}

.plain{padding-left:1.1rem; margin:1rem 0 0}
.plain li{font-size:.9375rem; color:var(--ink-2); margin-bottom:.4rem}
.plain li::marker{color:var(--ink-3)}

.note{background:var(--accent-wash); border-top:2px solid var(--accent); padding:1.15rem 1.3rem; margin-top:1.25rem}
.note .eyebrow{color:var(--accent)}
.note p{margin:.4rem 0 0; font-size:.9375rem; color:var(--ink)}

/* legal pages */
.legal{padding:3rem 0 5rem}
.legal h1{font-size:clamp(1.75rem,4.5vw,2.35rem); margin-bottom:.5rem}
.legal h2{font-size:1.125rem; margin-top:2.4rem}
.legal p,.legal li{font-size:.9375rem; color:var(--ink-2)}
.legal ul{padding-left:1.15rem}
.legal li{margin-bottom:.45rem}
.legal .updated{font-size:.8125rem; color:var(--ink-3); margin-bottom:2rem}
.ph{
  font-family:"IBM Plex Mono",monospace; font-size:.85em;
  background:var(--accent-wash); color:var(--accent);
  padding:.08em .35em; border:1px solid var(--rule-2);
}

footer{padding:2.25rem 0 4rem; font-size:.8125rem; color:var(--ink-3)}
footer .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--accent)}
footer .sp{flex:1 1 auto}

/* Header navigation. The bar used to hold the wordmark and one email address,
   which meant the privacy policy and the terms -- the two documents Google's
   and Meta's reviews are sent to look for -- were reachable only by scrolling
   the whole page to the footer. On the legal pages it was worse: a reviewer
   reading one had no route to the other. */
nav .navlinks { display: flex; align-items: center; gap: 22px; }
@media (max-width: 560px) {
  nav .navlinks { gap: 14px; }
  nav .navlinks a[href^="mailto:"] { display: none; }
}

/* The one nav link that is a destination rather than a document. Given a
   border so it reads as the way in, without becoming a second CTA competing
   with the waitlist button -- which is still the action for almost everyone
   who lands here, because sign-up is closed while this is in development. */
nav a.lnk.signin {
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  padding: .32rem .7rem;
  color: var(--ink);
}
nav a.lnk.signin:hover { border-color: var(--accent); color: var(--accent); }

/* showreel -- six real outputs, side by side.
 *
 * Wider than .wrap deliberately: this is the evidence for "not a slideshow",
 * and evidence squeezed into a 44rem text column reads as a footnote. Six
 * across on a wide screen, three on a laptop, two on a phone -- never one,
 * because one tile is a hero and the point here is that there are six of them
 * and they do not look like each other.
 *
 * 9:16 is enforced with aspect-ratio rather than fixed heights so the tiles
 * stay vertical at every width without a media query per breakpoint. */
.showreel{
  max-width:76rem; margin:2rem auto 0; padding:0 1.5rem;
  display:grid; gap:1rem;
  grid-template-columns:repeat(6, 1fr);
}
.showreel figure{margin:0}
.showreel video{
  width:100%; aspect-ratio:9/16; object-fit:cover; display:block;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
}
.showreel figcaption{
  font-family:Archivo,sans-serif; font-size:.75rem; line-height:1.35;
  color:var(--ink-3); margin-top:.5rem;
}
.showreel figcaption b{display:block; color:var(--ink-2); font-weight:600}
@media (max-width:1100px){ .showreel{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:620px){  .showreel{grid-template-columns:repeat(2, 1fr); gap:.75rem} }

/* counts -- six stat tiles, deliberately not a chart.
 *
 * Six independent numbers with no comparison between them and no magnitude
 * worth encoding, which is the case where the honest form is a number and a
 * label. No axis, no legend, no hover: there is nothing to look up.
 *
 * The numeral wears the brand accent and the label wears text ink, so the
 * colour carries emphasis rather than meaning -- nothing here is encoded by
 * hue, and a reader who cannot see the amber loses nothing. */
.counts{
  list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; gap:1rem 1.25rem;
  grid-template-columns:repeat(6, 1fr);
}
.counts li{
  font-family:Archivo,sans-serif; font-size:.8125rem; line-height:1.3;
  color:var(--ink-2); border-top:1px solid var(--rule); padding-top:.6rem;
}
.counts b{
  display:block; font-size:1.75rem; font-weight:700; letter-spacing:-.02em;
  color:var(--accent); line-height:1.1; margin-bottom:.15rem;
  font-variant-numeric:tabular-nums;
}
@media (max-width:820px){ .counts{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:460px){ .counts{grid-template-columns:repeat(2, 1fr)} }