/* components part 6 of 11 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.lb-count{position:absolute;left:50%;top:18px;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:12px;font-weight:700;letter-spacing:.09em;
  font-variant-numeric:tabular-nums}@media(max-width:700px){
  .lb-nav{width:40px;height:40px}
  .lb-prev{left:6px} .lb-next{right:6px}}
.lb-x{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb button:hover,.lb button:focus{background:rgba(255,255,255,.26)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.card{cursor:zoom-in}
/* No forced tile shape. The card classes imposed a ratio unrelated to the image
   inside, so landscape renders dropped into a 3/4 'tall' tile lost most of the
   frame to a centre crop. Each card now takes the aspect of its own image, which
   is what makes this a real masonry rather than a grid of crops. */
/* Square aesthetic: no radius, and no zoom on hover — the caption/overlay hover
   stays, only the scale is gone. */
.card img{width:100%;height:auto;display:block}
.card .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 18px;background:linear-gradient(0deg,rgba(20,19,16,.82),rgba(20,19,16,.12) 62%,transparent);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.card:hover .meta{opacity:1;transform:none}
.card .t{font-family:var(--disp);font-size:18px;font-weight:700;color:#fff;line-height:1.12;letter-spacing:-0.02em}
.card .loc{font-size:13.5px;color:rgba(255,255,255,.85);margin-top:5px;display:inline-flex;align-items:center;gap:6px}
/* soft clean-edge fade at the bottom of the grid */
.pf-fade{position:relative;height:0}
.pf-fade::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--white));pointer-events:none;z-index:3}
.pf-more{text-align:center;margin-top:30px}

/* STUDIO vs AI */
.vs{background:var(--warm);color:#cfcec9}
/* MASTER. Every section header on every page derives from this — an eyebrow, an
   h2 and its subtext, held to a readable measure instead of running the full
   width of the page. It used to be scoped to `.vs`, so it styled exactly one
   block on one page and nothing on any page built after it. Do not re-scope it,
   and do not write a per-page copy: change it here and every page follows. */
.head{max-width:820px;margin-bottom:clamp(38px,5vw,56px)}
.vs .eyebrow{color:var(--accent)}
.vs h2{color:#fff;font-size:clamp(31px,4vw,50px);font-weight:800;letter-spacing:-0.035em;margin-bottom:20px;line-height:1.03}
.head p{font-size:17px;line-height:1.65;margin-bottom:14px;color:var(--muted)}
.vs .head p{color:#a8a7a1}   /* the dark section needs a lighter subtext */
.vs-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)}
.vs-card{border:1px solid rgba(255,255,255,.13);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.vs-card.ai{background:rgba(199,154,60,.11);border-color:rgba(199,154,60,.45)}
.vs-card.ours{background:rgba(63,107,84,.14);border-color:rgba(63,107,84,.5)}
.vs-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0f0d0b}
.vs-fig img{width:100%;height:100%;object-fit:cover}
.vs-fig .flag{position:absolute;left:14px;top:14px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(20,18,14,.6);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px}
.vs-card.ai .vs-fig .flag{background:rgba(155,120,42,.9)}
.vs-card.ours .vs-fig .flag{background:rgba(63,107,84,.9)}
.vs-body{padding:clamp(26px,3.2vw,40px)}
.vs-card .tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.vs-card.ai .tag{color:#D8B36A}
.vs-card.ours .tag{color:#7FB79A}
.vs-card h3{color:#fff;font-size:23px;font-weight:700;margin-bottom:16px;letter-spacing:-0.02em}
.vs-card ul{list-style:none}
.vs-card li{position:relative;padding-left:26px;margin-bottom:12px;color:#b7b6b0;font-size:15.5px;line-height:1.5}
.vs-card li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--faint)}
.vs-card.ai li::before{background:#D8B36A}
.vs-card.ours li::before{background:#7FB79A}@media(max-width:760px){.vs-cols{grid-template-columns:1fr}}

/* PRICING — drivers + gated guide */
.price-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(36px,5vw,64px);align-items:start}
.drivers{list-style:none}
.drivers li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--hair)}
.drivers li:last-child{border-bottom:1px solid var(--hair)}
.drivers .ic{width:44px;height:44px;border-radius:10px;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--ink);border:1px solid var(--hair)}
.drivers .ic svg{width:22px;height:22px}
.drivers h4{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin-bottom:4px}
.drivers p{font-size:15px;color:var(--muted);line-height:1.5}
.guide-card{background:var(--ink);color:#fff;border-radius:14px;padding:clamp(30px,3.6vw,44px);position:sticky;top:110px}
.guide-card .guide-logo{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.9;margin-bottom:18px;display:block}
.guide-card .gcover{width:100%;border-radius:10px;aspect-ratio:4/3;object-fit:cover;margin:-4px 0 22px}
.guide-card .ph{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.guide-card h3{color:#fff;font-size:clamp(23px,2.6vw,29px);font-weight:800;letter-spacing:-0.03em;line-height:1.06;margin-bottom:10px}
.guide-card .gsub{color:#e2c79c;font-size:15px;font-weight:600;margin-bottom:14px;line-height:1.45}
.guide-card>p{color:#c8c7c2;font-size:15px;line-height:1.6;margin-bottom:22px}
.guide-list{list-style:none;margin-bottom:22px}
.guide-list li{position:relative;padding-left:24px;margin-bottom:11px;color:#d4d3ce;font-size:14.5px;line-height:1.45}
.guide-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.guide-form{display:flex;flex-direction:column;gap:11px}
.guide-form input{font-family:var(--sans);font-size:15px;padding:15px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(178,138,87,.14);color:#fff}
.guide-form input::placeholder{color:#b6b2a9}
.guide-form input:focus{outline:none;border-color:var(--accent);background:rgba(178,138,87,.22)}
.guide-form .btn{width:100%;justify-content:center}
.guide-note{font-size:12.5px;color:#9a9992;margin-top:16px;line-height:1.5}@media(max-width:820px){.price-grid{grid-template-columns:1fr;gap:34px}.guide-card{position:static}}

/* WORKFLOW spec */
/* The two images are lifted out of the columns into one edge-to-edge strip of 2,
   butted together with no gap; the spec tables stay inside .wrap. */
.flow-strip{display:grid;grid-template-columns:1fr 1fr;gap:0;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2);margin-bottom:clamp(30px,4vw,52px)}
.flow-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:0}
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px)}
.flow-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:24px}
.flow-block h4{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.flow-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.flow-row .fk{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-0.01em}
.flow-row .fv{color:var(--body);font-size:15px;line-height:1.5}
.flow-row .fv b{color:var(--ink);font-weight:700}
.flow-foot{margin-top:30px;font-size:16px;color:var(--body);line-height:1.6}@media(max-width:820px){.flow-grid{grid-template-columns:1fr;gap:30px}.flow-row{grid-template-columns:130px 1fr}}@media(max-width:560px){.flow-strip img{aspect-ratio:1/1}}@media(max-width:480px){.flow-row{grid-template-columns:1fr;gap:4px}}

/* CASE STUDY — stacked image bundle + stats */
/* The render stack bleeds right and the rotated top card deliberately overhangs the
   viewport (clipped by body{overflow-x:hidden}) so the set reads bigger. Do NOT add
   overflow:hidden to this section — .guide-card and .faq-aside are position:sticky
   and a new overflow ancestor would break them. */
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:center;width:var(--bleed);max-width:none;margin-left:calc(50% - var(--bleed)/2);padding-left:var(--edge)}
.case-copy{max-width:var(--measure);min-width:0}
.case-copy .kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.case-copy h3{font-size:clamp(27px,3vw,40px);font-weight:800;letter-spacing:-0.03em;line-height:1.05;margin-bottom:16px}
.case-copy p{color:var(--body);line-height:1.72;margin-bottom:18px}
.case-bullets{list-style:none;margin-bottom:24px}
.case-bullets li{position:relative;padding-left:28px;margin-bottom:11px;color:var(--body);font-size:15.5px;line-height:1.5}
.case-bullets li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.case-stats>div{border-top:2px solid var(--ink);padding-top:12px}
.case-stats b{display:block;font-family:var(--disp);font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.2;margin-bottom:5px}
.case-stats span{font-size:12.5px;color:var(--muted);line-height:1.4}
.case-copy .btn{margin-top:2px}
/* stacked, mac-download-style bundle */
/* The fan pushes cs-2 and cs-3 out to the right by 17 and 34px, and this column
   ends at the viewport edge on a full-bleed grid, so the third card was hanging 48px
   past it and the whole document scrolled sideways. overflow-x:clip on the section,
   not overflow:hidden: clip does not create a scroll container, so the sticky filter
   rail further down the page keeps working. */
#proof{overflow-x:clip}
.case-stack{position:relative;aspect-ratio:3/2;margin:30px 0 16px 0;cursor:pointer}
.case-stack .cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:0 24px 60px -28px rgba(20,19,16,.5);transition:transform .4s cubic-bezier(.2,.7,.2,1)}