/* ------------------------------------------------------------------
       Apple-style product page. Deliberately scoped to this page: full-bleed
       alternating light/dark stages, oversized type, and the product carrying
       the message. The site's own nav/footer still wrap it.
       ------------------------------------------------------------------ */
    .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:660px;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}
    .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}
    /* device */
    .ap .device{margin:56px auto 0;width:min(300px,72vw);border-radius:46px;padding:11px;
        background:linear-gradient(160deg,#3a3a3f,#111 45%,#33333a);
        box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
    .ap .device video,.ap .device img{width:100%;display:block;border-radius:36px}
    /* 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{width:100%;display:block}
    /* mode grid */
    .ap .modes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;text-align:left}
    .ap .mode{background:var(--paper);border-radius:22px;overflow:hidden;
        box-shadow:0 2px 5px rgba(0,0,0,.05)}
    .ap .night .mode{background:#1d1d1f}
    .ap .mode img{width:100%;height:196px;object-fit:cover;display:block}
    .ap .mode .t{padding:22px 24px 26px}
    .ap .mode h3{font-size:22px;font-weight:600;margin:0 0 7px;letter-spacing:-.01em}
    .ap .mode p{font-size:16px;line-height:1.45;color:var(--ink-soft);margin:0}
    .ap .night .mode p{color:var(--night-soft)}
    @media(max-width:900px){.ap .modes{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:600px){.ap .modes{grid-template-columns:1fr}
      .ap section{padding:76px 20px}}
    /* model wall */
    .ap .wall{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:48px}
    .ap .wall span{font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;
        color:#f5f5f7;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
        border-radius:980px;padding:12px 26px}
    .ap .wall span.hot{background:linear-gradient(135deg,#ff7a18,#f43f5e);border-color:transparent}
    /* 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);border-radius:18px;padding:26px 28px}
    .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}

/* ---------------- mode detail pages ---------------- */
/* Narrower measure than the marketing stages: these pages are read, not scanned. */
.ap .doc{max-width:760px;margin:0 auto;text-align:left}
.ap .doc h1{font-size:clamp(34px,5vw,58px);margin-bottom:18px}
/* The lead paragraph is the extractable answer, so give it real presence.
   Qualified with p to outrank `.ap .doc p` below, which is more specific. */
.ap .doc p.answer{font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--ink);margin:0 0 8px}
.ap .doc h2{font-size:clamp(26px,3.2vw,34px);margin:52px 0 14px}
.ap .doc h3{font-size:20px;font-weight:600;margin:28px 0 8px}
.ap .doc p{font-size:17px;line-height:1.6;margin:0 0 14px}
.ap .doc ol,.ap .doc ul{font-size:17px;line-height:1.6;padding-left:22px;margin:0 0 16px}
.ap .doc li{margin-bottom:8px}
.ap .doc figure{margin:28px 0}
.ap .doc figure img{width:100%;border-radius:18px;display:block}
.ap .doc figcaption{font-size:14px;color:var(--ink-soft);margin-top:10px;text-align:center}
/* Spec table: machine-readable capability facts, the kind answer engines quote. */
.ap .spec{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 16px}
.ap .spec th,.ap .spec td{text-align:left;padding:11px 12px;border-bottom:1px solid #e5e5e7}
.ap .spec th{font-weight:600;width:38%;color:var(--ink)}
.ap .spec td{color:var(--ink-soft)}
.ap .crumb{font-size:14px;color:var(--ink-soft);margin-bottom:26px}
.ap .crumb a{color:var(--accent);text-decoration:none}
.ap .doc .qa{background:var(--paper-alt);margin-bottom:12px}

/* A mode card may now be a link to its detail page; keep it looking like a card. */
.ap a.mode{text-decoration:none;color:inherit;display:block;transition:transform .15s,box-shadow .15s}
.ap a.mode:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.10)}
.ap a.mode h3{color:var(--ink)}

/* A worked prompt example. Monospaced so it reads as something to copy, not prose. */
.ap .doc p.pex{background:var(--paper-alt);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;padding:12px 16px;font-size:15.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.ap .doc p.pex span{display:block;font-family:var(--sans),sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}