/* ------------------------------------------------------------------
   Apple-style product page, same system as photo-to-video/product.css.
   Deliberately a sibling copy rather than a shared file: the two products
   are styled independently so a change to one cannot break the other, and
   photo-to-video's live page stays untouched.

   Kept: the stage/type/CTA/FAQ system, so the two product pages read as
   siblings. Added below: shot figures, skill cards, flow, proof, terminal.
   ------------------------------------------------------------------ */
.ap{--ink:#1d1d1f;--ink-soft:#6e6e73;--paper:#fff;--paper-alt:#f5f5f7;
    --night:#000;--night-soft:#a1a1a6;--accent:#ff7a18;
    font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Albert Sans",
    "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.ap section{padding:110px 22px;text-align:center}
.ap .in{max-width:1000px;margin:0 auto}
.ap .wide{max-width:1180px}
.ap h1,.ap h2{font-weight:700;letter-spacing:-.028em;line-height:1.05;
    margin:0;text-wrap:balance}
.ap h1{font-size:clamp(44px,7.2vw,88px)}
.ap h2{font-size:clamp(36px,5.4vw,64px)}
.ap .lede{font-size:clamp(19px,2.1vw,26px);line-height:1.42;color:var(--ink-soft);
    margin:22px auto 0;max-width:680px;font-weight:400}
.ap .eyebrow{font-size:19px;font-weight:600;color:var(--accent);margin-bottom:14px}
/* stages */
.ap .light{background:var(--paper);color:var(--ink)}
.ap .alt{background:var(--paper-alt);color:var(--ink)}
.ap .night{background:var(--night);color:#f5f5f7}
/* site-wide style.css sets an explicit dark colour on h1/h2/h3/p, so inheriting
   from the stage isn't enough — the dark stages must state their own. */
.ap .light h1,.ap .light h2,.ap .light h3,.ap .alt h1,.ap .alt h2,.ap .alt h3{color:var(--ink)}
.ap .night h1,.ap .night h2,.ap .night h3{color:#f5f5f7}
.ap .light p,.ap .alt p{color:var(--ink-soft)}
.ap .night p{color:var(--night-soft)}
.ap .night .lede,.ap .night .sub{color:var(--night-soft)}
/* links + buttons */
.ap .cta{margin-top:34px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.ap .btn-ap{display:inline-flex;align-items:center;gap:9px;border-radius:980px;
    padding:14px 26px;font-size:18px;font-weight:500;text-decoration:none;
    background:var(--accent);color:#fff;transition:filter .2s}
.ap .btn-ap:hover{filter:brightness(1.08)}
.ap .btn-ap svg{width:19px;height:19px;fill:currentColor}
.ap .link{display:inline-flex;align-items:center;gap:5px;font-size:18px;
    color:var(--accent);text-decoration:none}
.ap .link:hover{text-decoration:underline}
/* full-bleed showcase */
.ap .stage{margin:54px auto 0;max-width:1000px;border-radius:26px;overflow:hidden;
    box-shadow:0 50px 90px -40px rgba(0,0,0,.55)}
.ap .stage video,.ap .stage img{width:100%;display:block}
/* price */
.ap .price{font-size:clamp(80px,14vw,164px);font-weight:700;letter-spacing:-.045em;
    line-height:1;margin-top:12px;
    background:linear-gradient(135deg,#ff9a3c,#ff5f6d);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent}
.ap .facts{display:flex;gap:44px;justify-content:center;flex-wrap:wrap;margin-top:56px}
.ap .fact{max-width:250px}
.ap .fact b{display:block;font-size:19px;font-weight:600;margin-bottom:6px}
.ap .fact span{font-size:16px;line-height:1.45;color:var(--night-soft)}
/* faq */
.ap .faq{margin-top:52px;text-align:left;display:grid;gap:14px}
.ap .qa{background:var(--paper-alt);border-radius:18px;padding:26px 28px}
.ap .light .qa{background:var(--paper-alt)}
.ap .alt .qa{background:var(--paper)}
.ap .qa h3{font-size:20px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.ap .qa p{font-size:17px;line-height:1.5;margin:0}

/* ---------------- added for this product ---------------- */

/* A screenshot that is meant to be read, not glanced at: full measure, its own
   caption. The images are 1280x800 page compositions, so they need the width. */
.ap .shot{margin:48px auto 0;max-width:1080px}
.ap .shot img{width:100%;display:block;border-radius:18px;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.ap .night .shot img{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.ap .shot figcaption{font-size:15.5px;line-height:1.5;color:var(--ink-soft);
    margin-top:14px;max-width:660px;margin-left:auto;margin-right:auto}
.ap .night .shot figcaption{color:var(--night-soft)}

/* The four skills. No screenshots here on purpose — they are markdown skills,
   not apps with screens, and inventing UI for them would misrepresent them. */
.ap .skills{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px;text-align:left}
.ap .skill{background:var(--paper);border-radius:22px;padding:30px 32px;
    box-shadow:0 2px 5px rgba(0,0,0,.05)}
.ap .night .skill{background:#1d1d1f;box-shadow:none}
.ap .skill code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:14px;font-weight:600;color:var(--accent);margin-bottom:10px;letter-spacing:-.01em}
.ap .skill h3{font-size:21px;font-weight:600;margin:0 0 9px;letter-spacing:-.01em}
.ap .skill p{font-size:16.5px;line-height:1.5;margin:0}
@media(max-width:820px){.ap .skills{grid-template-columns:1fr}}

/* The pipeline itself, as a row of stages. The two the human owns are marked. */
.ap .flow{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:48px}
.ap .flow span{font-size:clamp(14px,1.6vw,17px);font-weight:600;letter-spacing:-.01em;
    color:#f5f5f7;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
    border-radius:980px;padding:10px 20px;white-space:nowrap}
.ap .light .flow span,.ap .alt .flow span{color:var(--ink);background:rgba(0,0,0,.045);
    border-color:rgba(0,0,0,.09)}
.ap .flow span.you{background:linear-gradient(135deg,#ff7a18,#f43f5e);border-color:transparent;color:#fff}

/* Terminal-ish block for the one command a buyer runs first. */
.ap .term{margin:44px auto 0;max-width:620px;text-align:left;background:#141414;
    border-radius:14px;padding:20px 24px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:15px;line-height:1.7;color:#f5f5f7}
.ap .term b{color:#ffe500;font-weight:600}
.ap .term i{color:#6bd968;font-style:normal}
.ap .term em{color:#8a8a8f;font-style:normal}

/* Two published videos, offered as evidence rather than a showreel. */
.ap .proof{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px;text-align:left}
.ap .pf{display:block;background:var(--paper-alt);border-radius:18px;padding:26px 28px;
    text-decoration:none;transition:transform .15s,box-shadow .15s}
.ap .pf:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.10)}
.ap .pf b{display:block;font-size:19px;font-weight:600;color:var(--ink);margin-bottom:6px}
.ap .pf span{font-size:15.5px;line-height:1.5;color:var(--ink-soft);display:block}
.ap .pf u{display:inline-block;margin-top:12px;font-size:15.5px;color:var(--accent);text-decoration:none}
@media(max-width:820px){.ap .proof{grid-template-columns:1fr}}

/* One review, presented as one review. No carousel, no invented volume. */
.ap .review{margin:34px auto 0;max-width:560px}
.ap .stars{font-size:20px;letter-spacing:.14em;color:#ff9a3c}
.ap .review q{display:block;font-size:clamp(19px,2.1vw,23px);line-height:1.4;
    font-weight:600;color:var(--ink);margin:12px 0 10px;quotes:"\201C" "\201D"}
.ap .night .review q{color:#f5f5f7}
.ap .review cite{font-style:normal;font-size:15px;color:var(--ink-soft)}
.ap .night .review cite{color:var(--night-soft)}

/* A single number worth stating plainly, with its caveat attached. */
.ap .stat{margin-top:52px}
.ap .stat b{display:block;font-size:clamp(52px,9vw,92px);font-weight:700;letter-spacing:-.04em;
    line-height:1;color:#f5f5f7}
.ap .stat span{display:block;font-size:17px;line-height:1.5;color:var(--night-soft);
    margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto}

@media(max-width:600px){.ap section{padding:76px 20px}}