/* Shoot Cards — light theme in the NotaLucis design language:
   Inter + Instrument Serif, red accent, drifting line grid, gentle shadows. */
:root{
  --bg:#fbfbfd;
  --surface:#ffffff;        /* cards */
  --surface-2:#f4f3f1;      /* hover / segmented controls */
  --border:rgba(0,0,0,.12);
  --border-soft:rgba(0,0,0,.08);
  --ink:#1d1d1f;            /* primary text */
  --ink-2:#424245;
  --muted:#6e6e73;          /* Apple gray, darkened to meet WCAG AA contrast */
  --accent:#a40000;         /* red-600 (CTA on white) */
  --accent-2:#7e0000;       /* red-700 (text accents) */
  --accent-strong:#7e0000;
  --accent-soft:rgba(164,0,0,.08);   /* tinted fill: upsell, nudge, focus halo */
  --accent-line:rgba(164,0,0,.18);   /* hairline on a tinted fill; text selection */
  --accent-wash:#fff4f4;             /* selected chip, 'us' column, hover on white CTA */
  --shadow-accent:0 6px 20px rgba(164,0,0,.24);     /* primary CTA at rest */
  --shadow-accent-lg:0 10px 26px rgba(164,0,0,.3);  /* primary CTA on hover */
  --ok:#047857;
  --err:#be123c;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05);
  --shadow-lg:0 2px 6px rgba(0,0,0,.05),0 24px 60px rgba(0,0,0,.10);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --maxw:1060px;
  --wide:1180px;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* visually hidden but still focusable/announced (e.g. the file inputs) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* keyboard users: hidden until focused, then a clear jump-to-content button */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:10px 18px;border-radius:0 0 12px 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}
html{color-scheme:light;scroll-behavior:smooth;accent-color:var(--accent);caret-color:var(--accent)}
body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent-line)}
/* taps: no double-tap zoom delay, and a tap flash in the brand tint */
html{-webkit-tap-highlight-color:rgba(164,0,0,.12)}
a,button,summary,label,input,select,textarea,[role="button"]{touch-action:manipulation}
a{color:var(--accent-2);text-decoration:none}
img{max-width:100%}
button{font-family:var(--sans)}

/* ---------- background grid (built by assets/grid-bg.js) ---------- */
/* A 40px line grid at 6%, drifting diagonally; a 40% copy of it shows only in
   a 200px circle around the cursor; a soft accent glow sits off the top right. */
.bg-grid{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-grid-lines{
  position:absolute;inset:-40px 0 0 -40px;opacity:.06;
  background-image:linear-gradient(to right,var(--muted) 1px,transparent 1px),linear-gradient(to bottom,var(--muted) 1px,transparent 1px);
  background-size:40px 40px;
}
.bg-grid-spot{
  position:absolute;inset:0;opacity:0;transition:opacity .4s ease;
  -webkit-mask-image:radial-gradient(200px circle at var(--mx,-9999px) var(--my,-9999px),#000,transparent);
  mask-image:radial-gradient(200px circle at var(--mx,-9999px) var(--my,-9999px),#000,transparent);
}
.bg-grid.live .bg-grid-spot{opacity:1}
.bg-grid-spot .bg-grid-lines{opacity:.4}
.bg-grid-glow{position:absolute;right:-20%;top:-20%;width:40%;height:40%;border-radius:50%;background:var(--accent);opacity:.1;filter:blur(120px)}
@media (prefers-reduced-motion:no-preference){
  .bg-grid-lines{animation:gridDrift 22s linear infinite}
}
@keyframes gridDrift{to{transform:translate(40px,40px)}}

/* shared section rhythm */
.hero,.packs,.more,.why,.pricing,.faq,.history,#studio{scroll-margin-top:76px}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--accent-2);margin:0 0 10px}
.eyebrow.center{text-align:center}
.section-h{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-.012em;margin:0 0 10px;color:var(--ink)}
.section-h.center{text-align:center}
.section-h,.pitch h1,.final-card h2{text-wrap:balance}
.pitch .lede,.packs-lede,.faq-item p{text-wrap:pretty}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--gutter);
  background:rgba(251,251,253,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border-soft);
}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);flex:0 0 auto}
.brand-mark{width:20px;height:20px;border-radius:7px;background:linear-gradient(135deg,#c01818,#7e0000);box-shadow:0 2px 8px rgba(164,0,0,.35);flex:0 0 auto}
.brand-name{font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.brand-by{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:24px;min-width:0}
.nav-links>a{color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap}
.nav-links>a:hover{color:var(--ink)}
.nav-links>a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.nav-right{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}
.nav-cta .sm{display:none}
/* one red button at a time: while the studio's own button is on screen */
.nav-cta.quiet{background:var(--surface);color:var(--accent-2);border-color:var(--border);box-shadow:none}
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .2s ease}
.nav.open .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.open .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:12px;
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.25;padding:13px 24px;cursor:pointer;
  transition:transform .05s,box-shadow .15s,background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}
.btn-primary:hover{background:var(--accent-strong)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2)}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{font-size:14px;padding:9px 16px;border-radius:10px;box-shadow:none}
.btn:focus-visible,.go:focus-visible,.link-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.link-btn{background:none;border:none;color:var(--accent-2);font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;padding:6px 4px}
.link-btn:hover{text-decoration:underline;text-underline-offset:3px}
.link-btn:disabled{color:var(--muted);cursor:not-allowed;text-decoration:none}

/* ---------- hero: pitch + studio + proof ---------- */
.hero{max-width:var(--wide);margin:0 auto;padding:clamp(24px,4.6vw,56px) var(--gutter) clamp(36px,5vw,64px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-areas:"pitch visual" "studio visual" "why .";
  column-gap:clamp(28px,4.5vw,64px);row-gap:22px;align-items:start;
}
.pitch{grid-area:pitch}
.studio{grid-area:studio}
.visual{grid-area:visual;position:sticky;top:84px;display:flex;flex-direction:column;align-items:center}
.eyebrow-pill{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.2;color:var(--accent-2);margin:0}
.pitch h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.2vw,66px);line-height:.98;letter-spacing:-.02em;margin:16px 0 14px;color:var(--ink)}
.pitch h1 em{font-style:italic;color:var(--accent)}
.pitch .lede{font-size:clamp(16px,1.6vw,18.5px);color:var(--ink-2);margin:0;max-width:34em}
/* the question most visitors have, answered right under the studio card */
.hero-why{grid-area:why;display:flex;align-items:baseline;gap:14px;margin:-8px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.hero-why-q{flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px;margin-left:5px;border-radius:50%;border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--muted);transform:translateY(-1px)}
.hero-why strong{color:var(--ink-2);font-weight:600}
.hero-why a{margin-left:2px;color:var(--accent-2);font-weight:600;white-space:nowrap}
.hero-why a::after{content:" \2192"}
.hero-why a:hover{text-decoration:underline;text-underline-offset:3px}
.hero-why a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- the studio card ---------- */
.studio{background:var(--surface);border:1px solid var(--border-soft);border-radius:22px;box-shadow:var(--shadow-lg);padding:clamp(16px,2.2vw,22px)}
.studio-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.studio-title{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--ink)}
.studio-sub{font-size:13px;color:var(--muted);white-space:nowrap}
.types{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.type{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.type:hover{border-color:rgba(164,0,0,.4);color:var(--ink)}
.type[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-2);box-shadow:0 0 0 1px var(--accent) inset;font-weight:600}
.type:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the three less common types wait behind "+ 3 more" */
.types-extra{display:contents}
.types-more{border:1px dashed var(--border);background:transparent;border-radius:999px;padding:7px 13px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
.types-more:hover{border-color:rgba(164,0,0,.4);color:var(--ink)}
.types-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.panel-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;color:var(--muted);margin:0 0 9px}
.panel-label b{color:var(--ink);font-weight:600}
.panel-aside{white-space:nowrap}

/* pose picker */
.poses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.pz{position:relative;aspect-ratio:2/3;border-radius:9px;overflow:hidden;border:1px solid var(--border);background:var(--bg);padding:0;cursor:pointer;transition:transform .15s ease}
.pz img{width:100%;height:100%;object-fit:cover;display:block}
.pz:hover{transform:translateY(-2px)}
.pz[aria-pressed="true"]{outline:2.5px solid var(--accent);outline-offset:2px}
.pz[aria-pressed="true"]::after{content:"✓";position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pz:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.pz-own{display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;font-weight:600;color:var(--accent-2);border-style:dashed;border-color:rgba(164,0,0,.35);padding:6px;line-height:1.3}

/* own pose photo */
.photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1.5px dashed rgba(0,0,0,.18);border-radius:14px;background:var(--bg);padding:18px 14px;cursor:pointer;text-align:center;margin-bottom:12px;transition:border-color .15s,box-shadow .15s}
.photo-drop:hover,.photo-drop.over,.photo-drop:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.photo-drop.has-photo{border-style:solid;border-color:rgba(4,120,87,.45);background:#f3fbf7}
.photo-drop-title{font-weight:600;font-size:15px;color:var(--ink)}
.photo-drop-sub{font-size:12.5px;color:var(--muted)}

/* form fields */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-2);min-width:0}
.fld.full{grid-column:1/-1}
.fld input,.fld textarea,.row-in{
  font-family:var(--sans);font-weight:400;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px;
  width:100%;min-width:0;transition:border-color .15s,background .15s;
}
.fld textarea{resize:vertical;min-height:60px;line-height:1.4}
.fld input:focus,.fld textarea:focus,.row-in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);background:var(--surface)}
.back-btn{margin-top:8px;padding-left:0}

/* list editor (timeline, groups, shot list, settings) */
.panel[data-panel="list"]>.fld{margin-bottom:10px}
.rows{display:flex;flex-direction:column;gap:7px}
.row{display:flex;gap:7px;align-items:center}
.row-in{flex:1 1 auto}
.row-in.c-time{flex:0 0 88px}
.row-in.c-rel{flex:0 0 36%}
.row-x{flex:0 0 34px;height:34px;border-radius:9px;border:1px solid var(--border-soft);background:var(--surface);color:var(--muted);font-size:19px;line-height:1;cursor:pointer;padding:0}
.row-x:hover{color:var(--err);border-color:rgba(190,18,60,.4)}
.row-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rows-note{font-size:12.5px;color:var(--muted);margin:8px 0 0;min-height:1.2em}
.rows-note.warn{color:var(--err)}
.row-in.cut,#list-label.cut{border-color:var(--err);background:#fff5f7}
.row-actions{display:flex;gap:18px;flex-wrap:wrap}
.row-actions .link-btn{padding-left:0;font-weight:600}
.paste{margin-top:6px;padding:12px;border:1px solid var(--border-soft);border-radius:12px;background:var(--bg)}
.paste textarea{min-height:110px;background:var(--surface)}
.paste-actions{display:flex;align-items:center;gap:12px;margin-top:10px}

/* any image: her pins, a moodboard, your own designs */
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1.5px dashed rgba(0,0,0,.18);border-radius:14px;background:var(--bg);
  padding:30px 18px;cursor:pointer;text-align:center;
  transition:border-color .15s,box-shadow .15s;
}
.drop:hover,.drop.over,.drop:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.drop-title{font-size:16px;font-weight:600;color:var(--ink)}
.drop-sub{color:var(--muted);font-size:13px}
.drop-sub kbd{padding:1px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;background:var(--surface);font:600 12px/1.4 var(--sans);color:var(--ink-2)}
.board-fld{margin-top:14px}
.board-note{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.orient{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:14.5px}
.orient label{color:var(--ink);cursor:pointer}
.orient input{accent-color:var(--accent)}
.filmstrip-wrap{margin-top:12px}
.filmstrip{display:flex;gap:10px;overflow-x:auto;padding:8px 4px 6px}
.thumb-wrap{position:relative;flex:0 0 auto}
.thumb-btn{display:block;padding:0;border:none;background:none;cursor:pointer;border-radius:8px}
.thumb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.thumb-wrap .thumb{height:56px;width:auto;border-radius:8px;border:1px solid var(--border);display:block}
.thumb-wrap.sel .thumb{outline:2px solid var(--accent);outline-offset:1px}
.thumb-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:1px solid #fff;background:var(--ink);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.thumb-x:hover{background:var(--err)}
.clear-all{display:block;margin:6px auto 0;color:var(--muted);font-size:13px}
.clear-all:hover{color:var(--err)}

/* phones: a small preview inside the studio */
.mini{display:flex;flex-direction:column;align-items:center;gap:6px;margin:16px 0 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mini:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.mini canvas{display:block;width:min(100%,360px);height:auto;border-radius:6px;border:7px solid #1c1c1e;background:#fff;box-shadow:var(--shadow)}
.mini.portrait canvas{width:min(62%,230px)}
.mini-pages{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);min-height:1em}

/* camera + make */
.cam-q{margin:18px 0 8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.studio-foot{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.cameras{display:flex;gap:2px;background:var(--surface-2);border-radius:12px;padding:3px;transition:box-shadow .2s}
.cam{font-size:14px;font-weight:600;padding:10px 14px;border-radius:9px;color:var(--ink-2);border:none;background:none;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.cam:hover{color:var(--ink)}
.cam[aria-pressed="true"]{background:var(--surface);color:var(--accent-2);box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 1px var(--accent) inset}
.cam:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cameras.attention{box-shadow:0 0 0 2px var(--accent);animation:attention .45s ease}
@keyframes attention{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.go{
  flex:1 1 200px;
  background:var(--accent);color:#fff;border:none;border-radius:12px;
  font-family:var(--sans);font-size:16px;font-weight:600;padding:13px 22px;cursor:pointer;
  transition:background .15s,transform .05s,box-shadow .15s;box-shadow:0 6px 20px rgba(164,0,0,.22);
}
.go:hover{background:var(--accent-strong)}
.go:active{transform:translateY(1px)}
.go:disabled{opacity:.55;cursor:progress;box-shadow:none}
.go-hint{color:var(--muted);font-size:12.5px;margin:10px 2px 0;min-height:1.2em}
.status{margin:12px 0 0;color:var(--muted);min-height:1.4em;font-size:15px}
.status:empty{margin:0;min-height:0}
.status.err{color:var(--err)}
.status.ok{color:var(--ok)}
/* "Try again · Tell us", "Start fresh": the way out, right next to the message */
.status .status-act{font-size:inherit;font-weight:600;padding:0 2px;color:var(--accent-2)}
a.status-act{text-decoration:underline;text-underline-offset:3px}

/* instructions */
.instructions{margin-top:14px}
.instructions-title{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 10px}
.instructions pre{
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink-2);
  background:var(--bg);border:1px solid var(--border-soft);
  border-radius:12px;padding:14px 16px;white-space:pre-wrap;overflow-x:auto;margin:0
}
.muted{color:var(--muted);font-size:13px;margin:10px 0 0}

/* upsell (after a free card, or at the free limit) */
.upsell{margin-top:14px;padding:14px 16px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:14px}
.upsell-text{margin:0 0 12px}
.buy-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.buy-row .go{flex:0 1 auto}
.go.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.go.ghost:hover{background:var(--accent-soft)}

/* ---------- proof video / live preview ---------- */
.vid{position:relative;width:min(440px,100%);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;background:#e9e7e3}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid-chip{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:var(--shadow)}
.vid-chip b{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-line)}
.hero-media{animation:heroFade 1.1s ease both}
@keyframes heroFade{from{opacity:0}to{opacity:1}}

/* ---------- the ways into the demo (/demo) ---------- */
.pitch-demo{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:15px;font-weight:600;color:var(--accent-2)}
.pitch-demo:hover{text-decoration:underline;text-underline-offset:3px}
.pitch-demo-play{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-line)}
.pitch-demo-play::after{content:"";position:absolute;left:10.5px;top:8px;border-left:8px solid var(--accent);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.pitch-demo-time{font-weight:400;color:var(--muted)}
.vid-try{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--accent-2);box-shadow:var(--shadow)}
.vid-try:hover{background:#fff}
.strip-demo{margin:0;padding:0 var(--gutter) 16px;text-align:center;font-size:14px}
.strip-demo a{font-weight:600}
.final-card .final-demo{margin:18px 0 0;font-size:15px}
.final-demo a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pitch-demo:focus-visible,.vid-try:focus-visible,.strip-demo a:focus-visible,.final-demo a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.final-demo a:focus-visible{outline-color:#fff}

.cam-preview{width:100%;display:flex;flex-direction:column;align-items:center}
.cam-body{
  position:relative;display:flex;align-items:center;gap:16px;width:100%;max-width:560px;margin-top:30px;
  background:linear-gradient(160deg,#2c2c30,#131315 70%);border-radius:28px;padding:20px 14px 20px 20px;
  box-shadow:0 36px 70px rgba(0,0,0,.24),0 4px 10px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
}
/* the viewfinder hump */
.cam-body::before{content:"";position:absolute;top:-30px;left:18%;width:30%;height:44px;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,#323236,#1b1b1e);z-index:-1}
.cam-screen{position:relative;flex:1 1 auto;min-width:0;background:#000;border-radius:10px;padding:6px;border:2px solid #3a3a3e}
.cam-screen canvas{display:block;width:100%;height:auto;border-radius:4px;background:#fff}
.cam-screen::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(125deg,rgba(255,255,255,.09),rgba(255,255,255,0) 38%);pointer-events:none}
.cam-buttons{flex:0 0 auto;width:52px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cam-buttons i{display:block;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4a4f,#232326);box-shadow:0 1px 2px rgba(0,0,0,.6);position:relative}
.cam-buttons i.play::after{content:"";position:absolute;left:8.5px;top:6px;border-left:7px solid #c9c9cc;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cam-buttons i.dial{width:48px;height:48px;background:repeating-conic-gradient(#2b2b2e 0 6deg,#38383c 6deg 12deg);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 0 0 8px #26262a}
/* held upright for a pose card */
.cam-body.portrait{flex-direction:column;max-width:330px;margin-top:6px;padding:18px 18px 14px}
.cam-body.portrait::before{top:16%;left:-26px;width:30px;height:30%;border-radius:14px 4px 4px 14px;background:linear-gradient(90deg,#1b1b1e,#323236)}
.cam-body.portrait .cam-screen{width:100%}
.cam-body.portrait .cam-buttons{flex-direction:row;width:auto;justify-content:center}
/* the 3D camera (cam3d.js) draws the body; the CSS one stays for layout and as the fallback */
.cam3d-gl{position:absolute;z-index:-1;pointer-events:none}
.cam-body[data-cam3d-ready]{background:none;box-shadow:none;isolation:isolate}
.cam-body[data-cam3d-ready]::before{visibility:hidden}
.cam-body[data-cam3d-ready] .cam-buttons,.cam-body[data-cam3d-ready] .cam-screen canvas,.cam-body[data-cam3d-ready] .cam-screen::after{visibility:hidden}
.cam-body[data-cam3d-ready] .cam-screen{background:none;border-color:transparent}
.pager{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.pager-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-size:20px;line-height:1;cursor:pointer;color:var(--ink);padding:0}
.pager-btn:disabled{opacity:.4;cursor:default}
.pager-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cam-cap{margin:14px 0 0;font-size:13.5px;color:var(--muted);text-align:center;max-width:440px}

/* ---------- how it works, in one line ---------- */
.strip{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);background:var(--surface)}
.strip-inner{max-width:var(--wide);margin:0 auto;padding:20px var(--gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.st{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--ink-2)}
.st b{flex:0 0 auto;min-width:18px;color:var(--accent-2);font-family:var(--serif);font-weight:400;font-size:28px;line-height:1}
.st strong{color:var(--ink);font-weight:600}

/* ---------- the pose pack ---------- */
.packs{max-width:var(--wide);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter)}
.packs-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.pack-stack{position:relative;height:clamp(360px,44vw,540px)}
.pack-stack img{position:absolute;width:60%;height:auto;border-radius:16px;border:1px solid var(--border-soft);box-shadow:var(--shadow-lg);background:var(--surface)}
.pack-stack img:nth-child(1){left:0;top:8%;transform:rotate(-6deg)}
.pack-stack img:nth-child(2){right:0;top:8%;transform:rotate(6deg)}
.pack-stack img:nth-child(3){left:20%;top:0;z-index:2}
.packs-lede{color:var(--ink-2);font-size:17px;margin:4px 0 0;max-width:46ch}
.parts{list-style:none;margin:22px 0 0;padding:0;display:grid}
.parts li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--border-soft)}
.parts li:last-child{border-bottom:1px solid var(--border-soft)}
.parts .n{flex:0 0 22px;color:var(--accent-2);font-family:var(--serif);font-size:24px;line-height:1}
.parts strong{display:block;font-size:15.5px;color:var(--ink)}
.parts span{font-size:14px;color:var(--ink-2)}
.packs-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.packs-cta .link-btn{font-weight:600}
.packs-note{color:var(--muted);font-size:13px;margin:12px 0 0}

/* ---------- not just poses ---------- */
.more{max-width:var(--wide);margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter)}
.more-lede{max-width:60ch;margin:6px auto 0;text-align:center;color:var(--ink-2);font-size:17px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.tile{margin:0}
.tile-screen{background:#1c1c1e;border-radius:16px;padding:9px;box-shadow:var(--shadow)}
.tile-screen svg{width:100%;height:auto;display:block;border-radius:6px}
.tile figcaption{padding:14px 4px 0;display:flex;flex-direction:column;gap:2px}
.tile figcaption strong{font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.tile figcaption span{font-size:14.5px;color:var(--ink-2)}
.tile .link-btn{align-self:flex-start;padding:6px 0;font-weight:600}

/* ---------- why in the camera ---------- */
.why{max-width:900px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter)}
.why-table{margin-top:34px;background:var(--surface);border:1px solid var(--border-soft);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.why-table table{width:100%;border-collapse:collapse;font-size:15px}
.why-table th,.why-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--border-soft)}
.why-table thead th{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--bg)}
.why-table thead th.us{color:var(--accent-2);background:var(--accent-wash)}
.why-table tbody th{text-align:left;font-weight:500;color:var(--ink)}
.why-table td.us{background:#fffafa;font-weight:600;color:var(--ink)}
.why-table tr:last-child th,.why-table tr:last-child td{border-bottom:none}
.why-table .yes{color:var(--ok);font-weight:700}
.why-table .no{color:var(--err);font-weight:700}
.why-table .m{color:var(--muted)}
.why-safe{max-width:62ch;margin:22px auto 0;text-align:center;color:var(--ink-2);font-size:14px;line-height:1.6}

/* ---------- pricing ---------- */
.pricing{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter) clamp(56px,8vw,96px)}
.price-toggle{display:flex;justify-content:center;gap:4px;margin:22px auto 0;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;padding:4px;width:max-content;max-width:100%}
.price-toggle button{border:none;background:none;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);padding:8px 18px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.price-toggle button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:38px}
.price-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-soft);border-radius:20px;padding:30px 26px;box-shadow:var(--shadow)}
.price-card.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--shadow-lg)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(164,0,0,.3)}
.price-name{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.price-amount{font-variant-numeric:tabular-nums;font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;margin:12px 0 2px;color:var(--ink)}
.price-amount .per{font-family:var(--sans);font-size:15px;color:var(--muted);font-weight:400;letter-spacing:0}
.price-note{color:var(--muted);font-size:13px;margin:2px 0 20px;min-height:1.2em}
.price-feats{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.price-feats li{position:relative;padding-left:24px;color:var(--ink-2);font-size:14px;line-height:1.45}
.price-feats li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent-2);font-weight:700}
.price-card .btn{width:100%;margin-top:auto}
.price-extra{text-align:center;margin:26px auto 0;font-size:15px;color:var(--ink-2)}
.price-extra .link-btn{font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:2px 2px}
.guarantee{text-align:center;margin:12px auto 0;font-size:14.5px;color:var(--ink-2);max-width:60ch}
.guarantee strong{color:var(--ink)}
.guarantee a{text-decoration:underline;text-underline-offset:2px}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,84px) var(--gutter)}
.faq-list{margin-top:34px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.faq-item+.faq-item{border-top:1px solid var(--border-soft)}
.faq-item[open] summary{color:var(--accent-2)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 20px;font-size:16px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent-2);font-weight:400;font-size:24px;line-height:1;flex:0 0 auto;transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.faq-item p{margin:0;padding:0 20px 18px;color:var(--ink-2);font-size:15px;line-height:1.65}
.faq-item p a{text-decoration:underline;text-underline-offset:2px}
.faq-item p a:hover{color:var(--accent)}

/* ---------- closing call to action ---------- */
.final{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) clamp(56px,7vw,96px)}
.final-card{background:linear-gradient(160deg,#a40000,#6a0000);color:#fff;border-radius:28px;padding:clamp(36px,6vw,72px) 24px;text-align:center;box-shadow:var(--shadow-lg)}
.final-card h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,52px);line-height:1.04;letter-spacing:-.012em;margin:0 0 12px;color:#fff}
.final-card p{color:rgba(255,255,255,.86);font-size:18px;margin:0 0 26px}
.final-btn{background:#fff;color:var(--accent-2)}
.final-btn:hover{background:var(--accent-wash)}

/* ---------- footer ---------- */
.site-foot{
  max-width:var(--maxw);margin:0 auto;padding:26px var(--gutter);
  display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;
  color:var(--muted);font-size:13px;border-top:1px solid var(--border-soft)
}
.site-foot a{color:var(--accent-2)}
.site-foot a:hover{color:var(--accent)}

/* ---------- account bar (in nav) ---------- */
.account{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);min-width:0}
.acct-info{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
/* Email · plan: a long email gives way, the plan (Pro · ends 2 Nov) always shows. */
.acct-info.split{display:inline-flex}
.acct-email{overflow:hidden;text-overflow:ellipsis;min-width:0}
.acct-sep,.acct-plan{flex:none}
.acct-sep{white-space:pre}
.nav-acct{display:none}

/* ---------- toast: undo and page-wide news ---------- */
.toast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;max-width:min(560px,calc(100vw - 32px));
  background:var(--ink);color:#fff;border-radius:14px;padding:12px 10px 12px 18px;font-size:14.5px;line-height:1.4;
  box-shadow:0 12px 32px rgba(0,0,0,.22)}
.toast>span{flex:1 1 200px}
.toast.err{background:#5c0a1a}
.toast-act{background:none;border:none;padding:6px 4px;font:600 14.5px var(--sans);color:#ffb4b4;cursor:pointer;text-decoration:none}
.toast-act:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.toast-x{background:none;border:none;color:rgba(255,255,255,.7);font-size:20px;line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer}
.toast-x:hover{color:#fff;background:rgba(255,255,255,.1)}
.toast-act:focus-visible,.toast-x:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:no-preference){
  .toast:not([hidden]){animation:toastIn .3s cubic-bezier(.2,.6,.2,1)}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
}
@media(pointer:coarse){.toast-act{min-height:44px}.toast-x{width:44px;height:44px}}

/* ---------- login modal ---------- */
.modal{position:fixed;inset:0;overscroll-behavior:contain;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.modal-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:var(--shadow-lg);padding:26px 24px;max-width:380px;width:100%}
.modal-card h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 6px}
.modal-card input{width:100%;margin:14px 0 12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-family:var(--sans);font-size:16px;background:var(--bg);color:var(--ink)}
.modal-card .go{width:100%}
.modal-card .link-btn{display:block;margin:10px auto 0}
.login-spam-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);background:var(--surface-2);border:1px solid var(--border-soft);border-radius:10px;padding:9px 12px}
.login-spam-note strong{color:var(--ink-2);font-weight:600}

/* ---------- your projects: a row per project, batches on demand ---------- */
.history{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter)}
.history-sub{max-width:60ch;margin:8px auto 0;text-align:center;color:var(--ink-2);font-size:16px;font-weight:300}
.proj-tools{display:flex;align-items:center;gap:12px;margin-top:26px}
.proj-tools input{flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink)}
.proj-tools input:focus{outline:2px solid var(--accent);outline-offset:1px}
.proj-count{color:var(--muted);font-size:13px;white-space:nowrap}
.history-list{margin-top:16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.proj+.proj{border-top:1px solid var(--border-soft)}
.proj-head{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px}
.proj-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:14px;background:none;border:0;padding:6px;border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.proj-toggle:hover{background:var(--surface-2)}
.proj-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.proj-thumb{width:36px;height:54px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border-soft);overflow:hidden;flex:none}
.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.proj-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.proj-name{font-weight:600;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-meta{font-size:13px;color:var(--muted)}
.proj-chev{margin:0 6px 0 auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;flex:none}
.proj.open .proj-chev{transform:translateY(2px) rotate(-135deg)}
.proj-actions{display:flex;gap:8px;flex:none}
.proj-actions .btn-sm{padding:8px 14px}
.proj-batches{background:var(--surface-2);border-top:1px solid var(--border-soft);padding:4px 16px}
.batch{display:flex;align-items:center;gap:14px;padding:10px 0}
.batch+.batch{border-top:1px solid var(--border-soft)}
.batch-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 220px}
.batch-title{font-weight:600;font-size:14px;color:var(--ink)}
.batch-sub{font-size:12.5px;color:var(--muted)}
.batch-thumbs{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden}
.batch-thumbs img{height:44px;width:auto;border-radius:5px;border:1px solid var(--border-soft);display:block;flex:none}
.batch-more{color:var(--muted);font-size:12.5px;font-weight:600;flex:none;padding:0 2px}
.batch-dl{flex:none}
.proj-none{margin:0;padding:22px;text-align:center;color:var(--muted);font-size:14px}
.proj-more{display:block;margin:14px auto 0}
/* "Add cards" lands on the studio: point at the project it picked. */
@keyframes projFlash{0%,40%{box-shadow:0 0 0 3px rgba(164,0,0,.35)}100%{box-shadow:0 0 0 3px rgba(164,0,0,0)}}
.project-field.flash{animation:projFlash 1.6s ease-out .3s both;border-radius:12px}

/* ---------- project picker (context strip at the top of the studio) ---------- */
.project-field{margin:0 0 16px;padding:13px 15px 12px;background:var(--bg);border:1px solid var(--border-soft);border-radius:12px}
.project-label{display:block;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);margin-bottom:8px}
#project-select,#project-new{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 12px;max-width:100%}
#project-select{min-width:min(260px,100%)}
#project-new{display:block;width:100%;margin-top:8px}
#project-select:focus,#project-new:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.project-hint{margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

/* ---------- upgrade nudge (signed-in free/credit users) ---------- */
.upgrade-nudge{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 14px;padding:12px 14px;background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:12px}
.nudge-text{font-size:14px;color:var(--ink-2)}
.nudge-text strong{color:var(--accent-2);font-weight:600}
.upgrade-nudge.spent{background:rgba(164,0,0,.13);border-color:rgba(164,0,0,.32)}
.nudge-cta{font-size:14px;padding:9px 18px;white-space:nowrap}

/* ---------- hover interactions ---------- */
/* Cards lift, their border warms to the accent and the shadow deepens; their
   title takes the accent and any arrow (.arr) nudges forward. */
.price-card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.price-card:hover{transform:translateY(-4px);border-color:rgba(164,0,0,.25);box-shadow:0 8px 20px rgba(0,0,0,.08),var(--shadow-lg)}
.price-card.featured:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 8px 20px rgba(0,0,0,.08),var(--shadow-lg)}
.price-name{transition:color .3s ease}
.price-card:hover .price-name{color:var(--accent-2)}

.tile-screen{transition:transform .3s ease,box-shadow .3s ease}
.tile:hover .tile-screen{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.1),var(--shadow-lg)}
.tile figcaption strong,.parts strong,.faq-item summary{transition:color .3s ease}
.tile:hover figcaption strong,.parts li:hover strong,.faq-item summary:hover{color:var(--accent-2)}

/* the three pose cards fan out a little */
.pack-stack img{transition:transform .5s cubic-bezier(.2,.6,.2,1),box-shadow .5s ease}
.pack-stack:hover img:nth-child(1){transform:translate(-14px,6px) rotate(-9deg)}
.pack-stack:hover img:nth-child(2){transform:translate(14px,6px) rotate(9deg)}
.pack-stack:hover img:nth-child(3){transform:translateY(-8px)}

/* inline (not inline-block) so the arrow never wraps away from its last word */
.arr{position:relative;left:0;top:0;transition:left .25s ease,top .25s ease}
:hover>.arr,.tile:hover .arr{left:3px}
:hover>.arr.ne{left:2px;top:-2px}
.hero-why a::after{display:inline-block;transition:transform .25s ease}
.hero-why a:hover::after{transform:translateX(3px)}

/* buttons rise with a stronger accent shadow; a press snaps back down */
.btn,.go{transition:transform .3s ease,box-shadow .3s ease,background .15s,border-color .15s,color .15s}
.btn:not(:disabled):hover,.go:not(:disabled):hover{transform:translateY(-2px)}
.btn:not(:disabled):active,.go:not(:disabled):active{transform:translateY(1px);transition-duration:.05s}
.nav-cta.quiet:hover{background:var(--surface);border-color:var(--accent);box-shadow:none}
.btn-primary:not(:disabled):hover,.go:not(:disabled):not(.ghost):hover{box-shadow:var(--shadow-accent-lg)}
@media(prefers-reduced-motion:reduce){
  .price-card:hover,.btn:hover,.go:hover,.pz:hover,.tile:hover .tile-screen,.pack-stack:hover img,.hero-why a:hover::after{transform:none!important}
  :hover>.arr,.tile:hover .arr{left:0!important;top:0!important}
  .pack-stack img:nth-child(1){transform:rotate(-6deg)!important}
  .pack-stack img:nth-child(2){transform:rotate(6deg)!important}
  .cameras.attention{animation:none}
}

/* ---------- motion: scroll reveal, hero load, nav shadow ---------- */
.nav{transition:box-shadow .25s ease}
.nav.scrolled{box-shadow:0 6px 22px rgba(0,0,0,.06)}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .pitch>*{animation:heroUp .7s both cubic-bezier(.2,.6,.2,1)}
  .pitch>h1{animation-delay:.08s}
  .pitch>.lede{animation-delay:.16s}
  .pitch>.pitch-demo{animation-delay:.24s}
  .hero-grid>.hero-why{animation:heroUp .7s .3s both cubic-bezier(.2,.6,.2,1)}
  @keyframes heroUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- signed-in: the studio first, the pitch below ---------- */
/* Returning signed-in users land on the studio and their projects; new visitors
   keep the pitch on top. The class is set pre-paint from localStorage (inline
   <head> script) = no flash. */
.signed-in main{display:flex;flex-direction:column}
.signed-in #tool{order:10}
.signed-in #history{order:30}
.signed-in #more{order:40}
.signed-in #packs{order:50}
.signed-in #why{order:60}
.signed-in #pricing{order:70}
.signed-in #faq{order:80}
/* Still on free/credits: the way to upgrade sits right under the studio. */
.signed-in.is-free #pricing{order:20}
.signed-in .hero-grid{grid-template-areas:"studio visual"}
/* The cold-visitor pitch, demo video and closing pitch are noise once you're in. */
.signed-in .pitch,.signed-in .hero-why,.signed-in .vid,.signed-in .strip,.signed-in #final,.signed-in .nav-cta{display:none}
/* Nothing left to sell a subscriber. */
.is-pro #pricing,.is-pro .nav-pricing,.is-pro #upgrade-nudge{display:none}

/* Copy that differs signed-out vs signed-in (CSS, not JS, so it can't flash). */
.if-in{display:none}
.signed-in .if-in{display:inline}
.signed-in .if-out{display:none}

/* ---------- responsive ---------- */
@media(min-width:981px){
  .mini{display:none!important}
  /* Until you start a card, the demo video keeps its top level with the
     headline and runs down to the bottom of the studio card, so the two
     bottom edges line up. That tall card is close to the clip's own 9:16, so
     nearly the whole frame shows: both hands, the camera and the leaves. */
  html:not(.previewing):not(.signed-in) .visual{align-self:stretch}
  html:not(.previewing):not(.signed-in) .vid{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;max-height:900px;aspect-ratio:auto}
  /* Its caption hangs just under it, in the hero's bottom padding. */
  html:not(.previewing):not(.signed-in) .cam-cap{position:absolute;top:100%;left:-20px;right:-20px;margin:14px auto 0}
  html:not(.previewing):not(.signed-in) .hero{padding-bottom:64px}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"pitch" "visual" "studio" "why"}
  .signed-in .hero-grid{grid-template-areas:"studio" "visual"}
  .visual{position:static}
  /* The preview moves into the studio (next to the form) once you start making a card. */
  .previewing .visual{display:none}
  .vid{width:min(380px,100%)}
  .packs-grid{grid-template-columns:minmax(0,1fr)}
  .pack-stack{max-width:420px;width:100%;margin:0 auto 18px;height:clamp(320px,80vw,460px)}
  .pack-stack img{width:56%}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .price-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  /* Pro leads the stack only once it can be bought; a "Coming soon" card stays last. */
  .price-card.featured:has([data-buy]){order:-1}
}
/* Fingers, not cursors: every tappable control gets a 44px-tall hit area. */
@media(pointer:coarse){
  .type,.types-more,.cam,.nav-cta,.pager-btn{min-height:44px}
  .nav-toggle{width:44px;height:44px}
  .tile .link-btn,.packs-cta .link-btn,.back-btn,.row-actions .link-btn{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(251,251,253,.98);border-bottom:1px solid var(--border-soft);
    box-shadow:0 14px 28px rgba(0,0,0,.08);padding:4px var(--gutter) 12px;
  }
  .nav.open .nav-links{display:flex}
  .nav-links>a{padding:13px 2px;font-size:16px;border-bottom:1px solid var(--border-soft)}
  .nav-links>a:last-of-type{border-bottom:none}
}
@media(max-width:640px){
  .nav{gap:10px}
  .nav-right{gap:8px}
  .brand-by{display:none}
  .nav-cta .lg{display:none}
  .nav-cta .sm{display:inline}
  .nav-cta{padding:8px 12px;font-size:13.5px}
  .acct-info{max-width:30vw}
  .account .link-btn{font-size:13px;padding:6px 2px}
  /* Signed in on a phone: the bar shows just the plan; Billing and Sign out
     move into the menu so the menu button never gets pushed off-screen. */
  .acct-info.has-plan{max-width:44vw}
  .acct-info.has-plan .acct-email,.acct-info.has-plan .acct-sep{display:none}
  #manage-btn,#signout-btn{display:none}
  .nav-acct:not([hidden]){display:block;width:100%;text-align:left;padding:13px 2px;background:none;border:none;border-top:1px solid var(--border-soft);font:500 16px var(--sans);color:var(--accent-2);cursor:pointer}
  .pitch h1{font-size:clamp(36px,10.5vw,44px)}
  .vid{width:min(300px,100%);border-radius:22px}
  .poses{gap:6px}
  .pz-own{font-size:11.5px;line-height:1.2;padding:3px}
  .fields{grid-template-columns:1fr}
  .proj-head{flex-wrap:wrap;padding:8px 10px 10px 8px;gap:6px}
  .proj-actions{width:100%;padding-left:56px}
  .proj-actions .btn-sm{padding:11px 16px}
  .batch-dl{padding:10px 4px}
  .batch{flex-wrap:wrap;gap:8px 12px}
  .batch-info{flex:1 1 auto}
  .batch-thumbs{order:3;flex-basis:100%}
  /* 16px keeps iOS Safari from zooming into the form on focus */
  .fld input,.fld textarea,.row-in,#project-select,#project-new{font-size:16px}
  .row-in.c-time{flex-basis:76px}
  /* Two text columns don't fit side by side on a phone: stack them per line. */
  .rows[data-type="groups"] .row,.rows[data-type="settings"] .row{flex-wrap:wrap;padding-bottom:9px;border-bottom:1px solid var(--border-soft)}
  .rows[data-type="groups"] .row-in:first-child,.rows[data-type="settings"] .row-in:first-child{flex:1 1 calc(100% - 41px)}
  .rows[data-type="groups"] .row-x,.rows[data-type="settings"] .row-x{order:2}
  .rows[data-type="groups"] .row-in:nth-child(2),.rows[data-type="settings"] .row-in:nth-child(2){order:3;flex:1 1 100%}
  .studio-foot{flex-direction:column;align-items:stretch}
  .cameras{width:100%}
  .cam{flex:1 1 0}
  .go{flex:0 0 auto;width:100%}
  .strip-inner{grid-template-columns:1fr;gap:12px}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .why-table th,.why-table td{padding:10px 8px;font-size:13px}
  .why-table thead th{font-size:11px;letter-spacing:.03em}
  .site-foot{flex-direction:column}
}
@media(max-width:380px){
  .brand-name{font-size:15px}
  .type{padding:6px 11px;font-size:13px}
  .studio-sub{display:none}
}