/* Guides (Dave, 6 Nov 2026): public step-by-step write-ups with every prompt. Same near-black and gold as the studio. */
.kbar .who .btn.sm{padding:9px 14px;font-size:11.5px;color:#140d01}
.guide{width:100%;max-width:1040px;margin:0 auto;padding:28px 26px 80px}
@media (max-width:600px){.guide{padding:20px 16px 60px}}
.g-back{margin:0 0 18px;font-size:13.5px}
/* base.css boxes every <section>; the guide's sections are open bands instead (same weight as base, so this wins by order). */
:where(.guide) section{background:none;border:0;border-radius:0;padding:0;margin:0}

/* The list */
.g-list-head h1{font-size:44px;margin-bottom:6px}
.g-list-head p{color:var(--muted);margin:0 0 26px}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.g-card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--text);transition:border-color .18s,transform .18s}
.g-card:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.g-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--ink-3)}
.g-card-t{font:400 20px/1.15 Anton,Impact,sans-serif;padding:14px 16px 6px;text-wrap:balance}
.g-card-d{font-size:13.5px;color:var(--muted);padding:0 16px 16px}

/* One guide: the film beside the title */
.g-hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:34px;align-items:start;margin-bottom:56px}
.g-hero video{width:100%;aspect-ratio:9/16;max-height:78vh;background:#000;border-radius:var(--r);border:1px solid var(--line);display:block;object-fit:contain}
.g-eyebrow{display:block;font:600 11px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:6px 0 14px}
.g-hero h1{font-size:clamp(32px,4.6vw,50px);line-height:1.04;text-wrap:balance;margin-bottom:18px}
.g-intro{font-size:16.5px;color:#d7dce4;max-width:58ch;margin:0 0 22px}
.g-toc{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:8px}
.g-toc li{counter-increment:t}
.g-toc a{display:flex;gap:12px;align-items:center;color:var(--text);font-size:14.5px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--ink-2)}
.g-toc a::before{content:"Step " counter(t);font:600 10.5px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);min-width:52px}
.g-toc a:hover{border-color:var(--line-gold)}
@media (max-width:760px){.g-hero{grid-template-columns:1fr;gap:22px}.g-hero video{max-width:360px;margin:0 auto}}
/* A widescreen film (Dave, 9 Nov 2026): the video takes the full width above the title instead of the tall phone frame. */
.g-hero.g-hero-wide{grid-template-columns:1fr}
.g-hero.g-hero-wide video{aspect-ratio:auto;max-height:none;max-width:none}

/* Steps */
.g-step{padding:40px 0 10px;border-top:1px solid var(--line);scroll-margin-top:70px}
.g-step-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.g-num{font:400 18px/1 Anton,Impact,sans-serif;color:var(--gold);letter-spacing:.04em}
.g-step-h h2{font-size:clamp(26px,3.4vw,36px);line-height:1.05}
.g-lead{font-size:16px;color:#d7dce4;max-width:64ch;margin:0 0 26px}
.g-group{margin:0 0 30px}
.g-group h3{font-size:22px;margin-bottom:6px}
.g-text{color:var(--muted);max-width:64ch;margin:0 0 16px}

/* A picture with its prompt */
.g-item{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:start;padding:18px;margin-bottom:16px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}
.g-item-plain{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.g-pic{display:block;border-radius:9px;overflow:hidden;background:#fff}
.g-pic img{width:100%;height:auto;display:block}
.g-item h4{font:600 15.5px/1.3 Inter;margin:2px 0 6px}
.g-note{font-size:13.5px;color:var(--muted);margin:0 0 12px}
@media (max-width:760px){.g-item,.g-item-plain{grid-template-columns:1fr;padding:14px}}

/* Prompt box: scrolls inside itself, Copy on the same row as its label */
.g-prompt{border:1px solid var(--line);border-radius:10px;background:#0a0c0f;overflow:hidden}
.g-prompt-h{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);background:var(--ink-3)}
.g-prompt-h span{flex:1;min-width:0;font:600 11px/1.2 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-copy{flex:none;border:1px solid var(--line-gold);background:transparent;color:var(--gold);border-radius:7px;padding:7px 14px;font:600 12px/1 Inter;cursor:pointer}
.g-copy:hover{background:var(--gold-glow)}
.g-copy.ok{color:var(--good);border-color:rgba(90,211,139,.45)}
.g-prompt pre{margin:0;padding:14px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfd5de}
.g-step > .g-group .g-prompt pre{max-height:420px}
.g-prompt pre:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* Step 2: the recording beside the tips */
.g-rec{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:30px;align-items:start;margin-bottom:30px}
.g-rec figure{margin:0}
.g-rec img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.g-rec figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.g-rec h3{font-size:22px;margin-bottom:10px}
@media (max-width:760px){.g-rec{grid-template-columns:1fr}.g-rec figure{max-width:270px}}
.g-tips{margin:0;padding:0 0 0 20px;display:grid;gap:9px;max-width:64ch}
.g-tips li{color:#d7dce4}
.g-tips li::marker{color:var(--gold)}
.g-how{margin:0;padding:0;list-style:none;counter-reset:h;display:grid;gap:10px;max-width:68ch}
.g-how li{counter-increment:h;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:#d7dce4}
.g-how li::before{content:counter(h);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-gold);color:var(--gold);font:600 12.5px/1 Inter}
.g-order{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.g-order li{display:grid;gap:8px;align-content:start;font:500 12.5px/1.35 Inter;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--ink-2)}
.g-order img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;background:var(--ink-3)}
/* The reference pictures behind each prop and location, numbered as the prompt names them (Dave, 6 Nov 2026) */
.g-refs{margin:0 0 12px}
.g-refs-h{display:block;font:600 10.5px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.g-refs-row{display:flex;flex-wrap:wrap;gap:8px}
.g-refs-row a{flex:none;width:112px;display:grid;gap:5px;color:var(--muted)}
.g-refs-row img{width:112px;height:76px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block;background:var(--ink-3)}
.g-refs-row b{font:600 11px/1 Inter;color:var(--gold)}

.g-cta{margin-top:40px;padding:34px 0 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.g-cta h2{font-size:30px}

/* Home page: the Free Guide button under the sign-in box, as wide as the box's own fields (Dave, 6 Nov 2026) */
.home-free{display:flex;align-items:center;justify-content:center;width:100%;max-width:324px;margin-top:16px;padding:13px 16px;border:1px solid var(--gold);border-radius:9px;
  background:rgba(8,9,11,.82);color:var(--gold);font:600 12.5px/1 Inter;letter-spacing:.17em;transition:background .18s,transform .14s}
.home-free:hover{background:var(--gold-glow);transform:translateY(-1px)}
.signin:has(.home-free){align-content:center;gap:0}