/* Boxy Cats promo page: the app's paper and sage colours, system fonts only (no web fonts, no CDN).
   Layout follows the UpsyCat site: the trailer in a phone, a strip of screens, then one clip per feature. */
:root { --paper:#F8F4E9; --card:#FFFCF4; --ink:#574333; --text:#6F6150; --muted:#9D8C74; --line:#E5DAC6;
  --sage:#A4B590; --sage-dark:#8C9C79; --gold:#C07A1C; --error:#B4533A; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--text); -webkit-font-smoothing:antialiased;
  font:17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  background:linear-gradient(180deg, #F4E7D2 0, #F8F4E9 760px); }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 22px; }

header.top { display:flex; align-items:center; justify-content:space-between; padding:22px 22px 6px; }
header.top .brand { display:flex; align-items:center; gap:10px; font-weight:850; font-size:20px; color:var(--ink); text-decoration:none; }
header.top .brand img { width:36px; height:36px; border-radius:9px; }
header.top nav a { font-size:14px; color:var(--muted); text-decoration:none; margin-left:16px; }

.stage { display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; padding-top:22px; padding-bottom:54px; }
.stage .appicon { width:88px; height:88px; border-radius:21px; box-shadow:0 6px 18px rgba(87,67,51,.2); }
.stage h1 { font-size:62px; line-height:1.04; margin:20px 0 14px; letter-spacing:-1.2px; color:var(--ink); font-weight:850; text-wrap:balance; }
.stage p.lead { font-size:21px; margin:0 0 26px; max-width:30em; }
.badge { display:inline-block; padding:12px 22px; border-radius:999px; background:var(--ink); color:var(--paper); font-weight:700; font-size:15px; }
.badge-note { display:block; margin-top:10px; font-size:14px; color:var(--muted); }

.phone { justify-self:center; width:min(340px, 80vw); aspect-ratio:1320 / 2868; border-radius:50px; padding:11px;
  background:#3A2E25; box-shadow:0 26px 60px rgba(87,67,51,.28), inset 0 0 0 2px #574333; }
.phone video, .phone img { display:block; width:100%; height:100%; object-fit:cover; border-radius:40px; background:var(--paper); }

.strip { overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 0 30px; }
.strip-in { display:flex; gap:18px; width:max-content; margin:0 auto; padding:0 22px; }
.strip img { width:min(230px, 60vw); aspect-ratio:1320/2868; border-radius:22px; scroll-snap-align:center;
  box-shadow:0 12px 28px rgba(87,67,51,.15); background:#fff; }

h2 { font-size:36px; letter-spacing:-0.5px; margin:48px 0 20px; text-align:center; color:var(--ink); }
.scenes { display:grid; gap:22px; }
.scene { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; padding:38px 56px; border-radius:30px; }
.scene.flip { grid-template-columns:1fr auto; }
.scene.flip .phone { order:2; }
.scene .phone { width:250px; border-radius:40px; padding:9px; }
.scene .phone video, .scene .phone img { border-radius:32px; }
.scene .num { display:block; font-size:15px; font-weight:800; letter-spacing:1px; opacity:.55; margin-bottom:6px; }
.scene h3 { font-size:36px; line-height:1.15; margin:0 0 12px; letter-spacing:-0.5px; color:var(--ink); text-wrap:balance; }
.scene p { font-size:19px; margin:0; max-width:24em; }
.scene.cream { background:linear-gradient(150deg, #FBEFD9, #F3DCC2); }
.scene.gold { background:linear-gradient(150deg, #FFF3CF, #F6DDA6); }
.scene.sage { background:linear-gradient(150deg, #E7EEDC, #CFDDBE); }
.scene.blossom { background:linear-gradient(150deg, #FBE4E4, #EFD3DE); }
.scene.night { background:linear-gradient(150deg, #2F3654, #4B4468); }
.scene.night h3, .scene.night p, .scene.night .num { color:#F6EEDD; }

.fair { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:0 0 14px; }
.fair .card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; }
.fair .card b { display:block; color:var(--ink); font-size:17px; margin-bottom:4px; }
.fair .card span { font-size:15px; color:var(--muted); }
.fair-note { text-align:center; color:var(--muted); font-size:16px; margin:0 auto 10px; max-width:40em; }

.android { display:grid; grid-template-columns:0.9fr 1.1fr; gap:34px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:30px; padding:30px 36px; margin:54px 0 10px; box-shadow:0 15px 50px #66543212; }
.android img { width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; border-radius:22px; display:block; }
.android h2 { text-align:left; margin:0 0 6px; font-size:28px; }
.android p { margin:0 0 16px; font-size:16px; }
form { display:grid; gap:12px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
input[type=email] { flex:1 1 220px; min-width:0; font:inherit; padding:13px 15px; border-radius:14px; border:1px solid var(--line); background:#fff; color:var(--ink); }
input[type=email]:focus { outline:2px solid var(--sage); outline-offset:1px; }
button { flex:0 0 auto; font:inherit; font-weight:700; color:#fffef8; background:var(--sage); border:0; border-radius:14px; padding:13px 22px; box-shadow:0 3px 0 var(--sage-dark); cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }
.consent { display:flex; gap:9px; align-items:flex-start; font-size:14px; }
.consent input { margin-top:4px; width:17px; height:17px; accent-color:var(--sage-dark); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.status { min-height:1.4em; margin:0; font-size:14px; font-weight:600; color:var(--sage-dark); }
.status.error { color:var(--error); }
.privacy { font-size:12.5px; color:var(--muted); margin:14px 0 0; }

footer { border-top:1px solid var(--line); margin-top:40px; padding:20px 0 40px; font-size:14px; color:var(--muted); }
footer a { margin-right:14px; }
footer p { margin:8px 0 0; }

@media (max-width:820px) {
  .stage { grid-template-columns:1fr; gap:28px; text-align:center; }
  .stage .appicon { margin:0 auto; }
  .stage h1 { font-size:44px; }
  .stage p.lead { margin-left:auto; margin-right:auto; }
  .scene, .scene.flip { grid-template-columns:1fr; gap:24px; padding:30px 22px; text-align:center; }
  .scene.flip .phone { order:0; }
  .scene .phone { justify-self:center; width:220px; }
  .scene p { margin:0 auto; }
  .scene h3 { font-size:30px; }
  .fair { grid-template-columns:1fr 1fr; }
  .android { grid-template-columns:1fr; padding:24px 20px; }
  h2 { font-size:30px; }
}
@media (max-width:420px) { .fair { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .strip { scroll-behavior:auto; } }