/* guide-media-v1.css: app images, films and first-hand boxes on the guide pages (8 Oct 2026).
   Linked above pro.css on every guide that carries them, so pro.css stays the last stylesheet.
   Same family as the Journal's SEO pages: a framed app shot that proves the section it sits in, a
   caption that says what the reader is looking at, and the owner's own words in a gold-ruled box.
   New file name on any change (house rule: a changed file gets a new URL). */
.gfig{margin:30px 0 34px;padding:0}
.gfig .gf-frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:#0b0e17;
  box-shadow:0 30px 70px -32px rgba(0,0,0,.85),0 0 0 1px rgba(240,165,0,.05)}
.gfig img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:0;box-shadow:none}
.gfig.narrow .gf-frame{max-width:440px;margin:0 auto}
.gfig figcaption{margin-top:10px;font-size:13px;line-height:1.6;color:#8a93a6;max-width:none}
.gfig figcaption b{color:#c4ccd9;font-weight:600}
.gfilm .gf-frame{aspect-ratio:16/9}
.gfilm video{display:block;width:100%;height:100%;object-fit:cover;background:#0b0e17}
@media(max-width:700px){.gfilm[data-tall] .gf-frame{aspect-ratio:9/16;max-width:380px;margin:0 auto}}
.gfig-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0 34px}
.gfig-pair .gfig{margin:0}
@media(max-width:700px){.gfig-pair{grid-template-columns:1fr}}

.rb-firsthand{margin:34px 0;padding:22px 24px 18px;border:1px solid rgba(240,165,0,.28);border-left:3px solid #f0a500;border-radius:0 14px 14px 0;
  background:linear-gradient(135deg,rgba(240,165,0,.07),rgba(255,255,255,.02))}
.rb-firsthand .rb-fh-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f0a500;margin:0 0 8px}
aside.rb-firsthand p{margin:0 0 10px;font-size:15.5px;line-height:1.7;font-weight:400;color:#d5dbe6;max-width:none}
.rb-firsthand .rb-fh-by{margin-top:12px;font-size:12.5px;color:#8a93a6}
.rb-firsthand .rb-fh-by a{display:inline-block;padding:5px 0;color:#c4ccd9;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(240,165,0,.5)}
@media(max-width:640px){.rb-firsthand{padding:18px 16px 14px}}

/* comparison tables on the new pages */
.ctbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.ctbl th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a93a6;text-align:left;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:700}
.ctbl td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#c4ccd9;vertical-align:top}
.ctbl td:first-child{color:#f5f6f8;font-weight:600}
.src{font-size:12px;color:#8a93a6}
.src a{color:#8a93a6;text-decoration:underline;text-underline-offset:2px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:14px 0 6px}
.hub-grid a{display:block;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);color:#f5f6f8;font-weight:600;font-size:14px;line-height:1.4;transition:border-color .18s ease-out,transform .18s ease-out}
.hub-grid a span{display:block;font-weight:400;font-size:12.5px;color:#8a93a6;margin-top:4px}
.hub-grid a:hover{border-color:rgba(240,165,0,.45)}
.hub-grid a:active{transform:scale(.97)}