:root{
  /* Match Discourse “SG - Kilroy Background (Industrial Depth)” tokens */
  --sg-bg: #000000;
  --sg-text: #D8E7F7;
  --sg-text2: rgba(216,231,247,0.78);
  --sg-accent: #1FA9FF;
  --sg-accent-glow: rgba(31,169,255,0.18);
  --sg-edgeSoft: rgba(78,143,195,0.18);
  --sg-radius: 10px;
  --sg-radius-lg: 14px;
  --sg-blur: 14px;
  --sg-shell-bg: #040B14;

  --sg-inset:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.70),
    inset 2px 2px 12px rgba(0,0,0,0.55);
  --sg-drop: 0 20px 80px rgba(0,0,0,0.70);

  /* Slightly stronger surfaces so the background reads inside cards/hero */
  --sg-card-top: rgba(6,16,28,0.72);
  --sg-card-bot: rgba(2,7,14,0.84);
  --sg-card-border: rgba(78,143,195,0.22);
  --sg-card-hi: rgba(216,231,247,0.12);

  /* Local aliases used by this page */
  --bg: var(--sg-bg);
  --fg: var(--sg-text);
  --muted: var(--sg-text2);
  --panel: linear-gradient(180deg, rgba(5,12,22,0.82), rgba(2,6,12,0.88));
  --line: rgba(78,143,195,0.12);
  --line2: rgba(78,143,195,0.24);
  --shadow: var(--sg-drop);
  --radius: var(--sg-radius-lg);

  /* FX vars (set by JS) */
  --mx: 50vw;
  --my: 20vh;
  --mxp: 50;
  --myp: 20;
}
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
html{
  background-color: var(--bg);
  background-image:
    radial-gradient(960px 620px at 82% 10%, rgba(31,169,255,0.14), transparent 58%),
    radial-gradient(1000px 640px at 18% 14%, rgba(216,231,247,0.04), transparent 64%),
    url("https://sixguns.com/uploads/default/original/2X/b/bebdffdd4da83190e9d015f840bae6d81a03b367.png"),
    radial-gradient(1400px 900px at 50% 120%, rgba(0,0,0,0.82), rgba(0,0,0,1));
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: auto, auto, 280px 280px, auto;
  background-position: right top, left top, center top, center center;
  background-attachment: fixed, fixed, fixed, fixed;
}
body{
  margin:0;
  background: transparent;
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  cursor: auto;
}

/* Mobile/iOS/Safari + coarse pointers often render multi-layer fixed backgrounds with
   cutoffs or large black blocks; fall back to scroll-attached layers. */
@media (max-width: 900px), (pointer: coarse) {
  html{ background-attachment: scroll, scroll, scroll, scroll; }
}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  background: linear-gradient(180deg, rgba(4,11,20,0.94), rgba(4,11,20,0.78));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(var(--sg-blur));
  -webkit-backdrop-filter: blur(var(--sg-blur));
}

.topbar-inner{
  width:min(1100px, 92vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap: 10px;
}

.brand{
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .4px;
  color: #D3E8FF;
  font-size: 16px;
}

.topbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.wrap{
  width:min(1100px, 92vw);
  margin: 0 auto;
  padding: 18px 0 40px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 850;
  letter-spacing:.2px;
  border-radius: 12px;
  border:1px solid var(--line2);
  padding: 10px 14px;
  color: var(--fg);
  background: transparent;
  line-height:1.1;
  user-select:none;
  cursor: pointer;
}

.btn-solid{
  background: linear-gradient(180deg, rgba(20,76,120,0.92), rgba(14,58,97,0.90));
  border-color: rgba(78,143,195,0.34);
  color: #D3E8FF;
}

.btn-ghost{
  background: rgba(4,11,20,0.72);
  border-color: rgba(78,143,195,0.24);
}

.btn:hover{ filter:brightness(1.04); }

.hero{
  background: var(--panel);
  border:1px solid var(--sg-edgeSoft);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--sg-drop), inset 0 1px 0 var(--sg-card-hi), inset 0 -1px 0 rgba(0,0,0,0.62);
  overflow:hidden;
  backdrop-filter: blur(var(--sg-blur));
  -webkit-backdrop-filter: blur(var(--sg-blur));
}

.hero-inner{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px;
}

.kicker{
  margin:0 0 8px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(211,232,255,0.72);
}

.hero h1{
  margin:0 0 10px;
  font-size: 36px;
  line-height:1.05;
  letter-spacing:.2px;
}

.hero-title{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.lede{
  margin:0;
  color: rgba(216,231,247,0.82);
  font-size: 15px;
  line-height: 1.5;
}

.lede p{
  margin: 0 0 10px;
  text-indent: 1.5em;
}

.lede p:last-child{
  margin-bottom: 0;
}


.hero-mark{
  display:inline-block;
  width: 39px;
  height: 39px;
  border-radius: 9px;
  border: 1px solid rgba(78,143,195,0.24);
  background: rgba(4,11,20,0.76);
  transform: translateY(8px);
}

.hero-tiers{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}

.hero-tiers h2{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .2px;
}

.hero-tier-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(216,231,247,0.84);
  line-height: 1.45;
}

.hero-tier-list li{ margin: 7px 0; }

.hero-footnotes{
  margin: 10px 0 0;
  color: rgba(216,231,247,0.68);
  font-size: 12px;
  line-height: 1.45;
}

.note{
  display:inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(78,143,195,0.22);
  background: rgba(10,44,71,0.46);
  color: rgba(216,231,247,0.82);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .2px;
  margin-right: 6px;
}

.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}

.pill{
  display:inline-flex;
  padding: 6px 10px;
  border:1px solid rgba(78,143,195,0.20);
  border-radius: 999px;
  background: rgba(10,44,71,0.42);
  font-weight: 800;
  font-size: 12px;
  color: rgba(216,231,247,0.84);
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.hero-card{
  border:1px solid var(--sg-card-border);
  border-radius: var(--radius);
  padding: 14px;
  background: linear-gradient(180deg, var(--sg-card-top), var(--sg-card-bot));
  box-shadow: inset 0 1px 0 var(--sg-card-hi), inset 0 -1px 0 rgba(0,0,0,0.58);
  backdrop-filter: blur(var(--sg-blur));
  -webkit-backdrop-filter: blur(var(--sg-blur));
}

.hero-card h2{
  margin:0 0 6px;
  font-size: 14px;
  letter-spacing: .2px;
}

.hero-card p{ margin: 0 0 8px; color: rgba(216,231,247,0.76); line-height:1.5; }

.callout{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(78,143,195,0.18);
  background: rgba(10,44,71,0.34);
  color: rgba(216,231,247,0.84);
  line-height: 1.55;
}

.callout strong{ color: #D8E7F7; }

.panel{
  margin-top: 16px;
  background: var(--panel);
  border:1px solid var(--sg-edgeSoft);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--sg-drop), inset 0 1px 0 var(--sg-card-hi), inset 0 -1px 0 rgba(0,0,0,0.62);
  backdrop-filter: blur(var(--sg-blur));
  -webkit-backdrop-filter: blur(var(--sg-blur));
}

.panel h2{ margin:0 0 6px; font-size: 16px; }
.panel p{ margin:0; color: rgba(216,231,247,0.80); line-height:1.5; }
.panel p + p{ margin-top: 10px; }

.panel-title-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.panel-title-link{
  color: var(--sg-accent);
  text-decoration: underline;
  text-decoration-color: var(--sg-accent);
  text-underline-offset: 3px;
  font-weight: 900;
  text-shadow: 0 0 14px var(--sg-accent-glow);
}

.panel-title-link:hover{ filter: brightness(1.08); }

.panel-body-link{
  display: inline-block;
  margin-left: 6px;
  color: var(--sg-accent);
  text-decoration: underline;
  text-decoration-color: var(--sg-accent);
  text-underline-offset: 3px;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 0 14px var(--sg-accent-glow);
}

.panel-body-link:hover{ filter: brightness(1.08); }

.section{ margin-top: 22px; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-head h2{ margin:0; font-size: 18px; }

.muted{ color: var(--muted); }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.card{
  grid-column: span 3;
  background: linear-gradient(180deg, var(--sg-card-top), var(--sg-card-bot));
  border:1px solid var(--sg-card-border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: inset 0 1px 0 var(--sg-card-hi), inset 0 -1px 0 rgba(0,0,0,0.58);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1), filter .12s ease;
  backdrop-filter: blur(var(--sg-blur));
  -webkit-backdrop-filter: blur(var(--sg-blur));
}

.card.featured{
  border-color: rgba(78,143,195,0.28);
}

.card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 55px rgba(0,0,0,0.60),
    0 0 0 1px rgba(31,169,255,0.12),
    inset 0 1px 0 rgba(216,231,247,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.58);
}

.card-top{ display:flex; align-items:baseline; justify-content:space-between; gap: 8px; }

.card h3{ margin:0; font-size: 16px; }

.price{ margin:0; font-weight: 950; font-size: 18px; }
.price span{ font-weight: 800; font-size: 12px; color: var(--muted); }

.sub{ margin:0; color: var(--muted); font-weight: 800; font-size: 12px; }

.bullets{
  margin: 10px 0 12px;
  padding-left: 18px;
  color: rgba(216,231,247,0.84);
  line-height: 1.45;
}

.bullets li{ margin: 6px 0; }

.tag{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(78,143,195,0.20);
  background: rgba(10,44,71,0.46);
  font-weight: 850;
  font-size: 12px;
  color: rgba(216,231,247,0.78);
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .card{ grid-column: span 6; }
}

@media (max-width: 560px){
  .topbar-inner{ padding: 10px 0; }
  .hero h1{ font-size: 30px; }
  .card{ grid-column: span 12; }
}