/* Band7 Lab — shared guide/article page design.
   Goal: a designed content page (header bar, hero band, framed article +
   sticky CTA), not a bare column on a void. Mobile-first, readable. */
:root{
  --bg:#0c1220; --bg2:#0e1626; --panel:#182238; --panel2:#1f2b46; --line:#2a3656; --line-soft:#1e2944;
  --text:#ecf1fb; --muted:#9ba8c4; --faint:#6b7898;
  --brand:#5b8cff; --brand2:#84baff; --accent:#ffb454; --good:#3ecf8e; --bad:#ff6b6b;
  --radius:14px; --radius-sm:10px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;font-size:17px}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}

/* sticky top bar */
.gp-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 20px;background:rgba(12,18,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.gp-brand{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:800;letter-spacing:-.2px}
.gp-brand:hover{text-decoration:none}
.gp-mark{display:inline-flex;width:30px;height:30px;border-radius:8px;background:linear-gradient(160deg,#5b8cff,#84baff);color:#fff;font-weight:800;align-items:center;justify-content:center}
.gp-bar-cta{background:var(--good);color:#06281b;border-radius:9px;padding:8px 16px;font-weight:800;font-size:13.5px;white-space:nowrap}
.gp-bar-cta:hover{text-decoration:none;opacity:.92}

/* hero band (full-width, anchors the top) */
.gp-hero{background:linear-gradient(160deg,#16233f,#0e1626);border-bottom:1px solid var(--line-soft);padding:30px 20px 34px}
.gp-hero-in{max-width:1060px;margin:0 auto}
.gp-crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.gp-crumb a{color:var(--muted)}
.gp-hero h1{font-size:clamp(26px,4.4vw,38px);line-height:1.18;letter-spacing:-.6px;font-weight:800;margin:0 0 12px;max-width:18ch}
.gp-lede{font-size:18px;color:var(--muted);line-height:1.6;margin:0;max-width:60ch}

/* layout: article + sticky aside on desktop, single column on mobile */
.gp-wrap{max-width:1060px;margin:0 auto;padding:30px 20px 64px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.gp-article{min-width:0;font-size:17px}
.gp-article h2{font-size:22px;letter-spacing:-.2px;margin:30px 0 10px}
.gp-article p{color:#dbe3f4;margin:0 0 14px}
.gp-article .muted{color:var(--muted)}

/* example before/after boxes */
.ex{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:12px 0;font-size:15.5px}
.ex .bad{color:#ff9b9b}.ex .good{color:var(--good)}
.note{background:rgba(255,180,84,.06);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 16px;color:var(--muted);font-size:15.5px;margin:18px 0}
.prompt{background:var(--panel);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;padding:14px 16px;margin:14px 0;font-style:italic}
.model{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:12px 0}
.model p{margin:0 0 12px}.model p:last-child{margin:0}
.tag{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;color:var(--good);margin-bottom:8px}
.gp-article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.gp-article th,.gp-article td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.gp-article th{background:var(--panel)}

/* sticky CTA card (desktop sidebar) */
.gp-aside{position:sticky;top:74px}
.gp-card{background:linear-gradient(160deg,#143a2f,#15241f);border:1px solid var(--good);border-radius:var(--radius);padding:20px;text-align:center}
.gp-card .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--good);font-weight:700}
.gp-card .t{font-size:19px;font-weight:800;margin:8px 0 6px;line-height:1.25}
.gp-card .d{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.gp-card .b{display:block;background:var(--good);color:#06281b;border-radius:var(--radius-sm);padding:12px 16px;font-weight:800;font-size:15px}
.gp-card .b:hover{text-decoration:none;opacity:.92}
.gp-related{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.gp-related h3{margin:0 0 8px;font-size:14px}
.gp-related a{display:block;padding:5px 0;font-size:14px;border-bottom:1px solid var(--line-soft)}
.gp-related a:last-child{border-bottom:none}

/* inline CTA shown only on mobile (sidebar hidden there) */
.gp-cta-inline{display:none;background:linear-gradient(160deg,#143a2f,#15241f);border:1px solid var(--good);border-radius:var(--radius);padding:20px;text-align:center;margin:26px 0}
.gp-cta-inline .t{font-size:19px;font-weight:800;margin:0 0 6px}
.gp-cta-inline .d{font-size:14px;color:var(--muted);margin:0 0 14px}
.gp-cta-inline .b{display:inline-block;background:var(--good);color:#06281b;border-radius:var(--radius-sm);padding:12px 24px;font-weight:800;font-size:15px}
.gp-cta-inline .b:hover{text-decoration:none}

.gp-foot{max-width:1060px;margin:0 auto;padding:0 20px 50px;font-size:12.5px;color:var(--faint);line-height:1.6}
.gp-foot a{color:var(--muted)}

@media(max-width:860px){
  .gp-wrap{grid-template-columns:1fr;gap:0;padding-top:24px}
  .gp-aside{display:none}
  .gp-cta-inline{display:block}
}