/* Gateway Compass — 2050 retail-console redesign
   Palette: void #05070C, panel #0E1420, panel-line #1D2740, amber #FF9F1C, cryo #3EE6C4, text #E9EEF4, muted #7C8AA0
   Type: Space Grotesk (headline) / Inter (body)
*/

:root{
  --void:#05070C;
  --panel:#0E1420;
  --panel-2:#131B2C;
  --line:#1D2740;
  --line-soft:#141C2E;
  --text:#E9EEF4;
  --muted:#8C99AD;
  --amber:#FF9F1C;
  --amber-dim:#B87016;
  --cryo:#3EE6C4;
  --cryo-dim:#1E8C79;
  --band:#0A0F19;
  --max:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(62,230,196,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 10%, rgba(255,159,28,0.06), transparent 60%);
  background-repeat:no-repeat;
}
h1,h2,h3,h4{
  font-family:"Space Grotesk", "Inter", sans-serif;
  color:#fff;
  line-height:1.18;
  margin:0 0 0.5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:600;}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
h3{font-size:1.22rem;}
p{margin:0 0 1.1em; max-width:70ch; color:var(--text);}
a{color:var(--cryo); text-decoration:underline; text-decoration-color:rgba(62,230,196,0.35); text-underline-offset:3px;}
a:hover{text-decoration-color:currentColor;}
img{max-width:100%; display:block;}
.container{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--amber); color:var(--void); padding:10px 16px; z-index:200; font-weight:600;}
.skip-link:focus{left:12px; top:12px;}

/* Header — Amazon-style dense utility bar, dark-console skin */
header.site-header{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #0B111C 0%, var(--panel) 100%);
  position:sticky; top:0; z-index:100;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 24px; max-width:var(--max); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex:none;}
.brand:hover{text-decoration:none;}
.brand svg{width:30px; height:30px; flex:none;}
.brand svg circle[stroke]{stroke:var(--cryo);}
.brand svg path{fill:var(--amber);}
.brand-word{font-family:"Space Grotesk", sans-serif; font-size:1.2rem; font-weight:600; letter-spacing:-0.01em; color:#fff;}
.brand-word span{color:var(--cryo);}

nav.main-nav ul{list-style:none; display:flex; gap:8px; margin:0; padding:0;}
nav.main-nav a{
  color:var(--muted); text-decoration:none; font-size:0.94rem; font-weight:500;
  padding:8px 12px; border-radius:2px; transition:color .15s, background .15s;
}
nav.main-nav a:hover{color:#fff; background:rgba(255,255,255,0.04);}
nav.main-nav a[aria-current="page"]{color:var(--void); background:var(--amber); font-weight:600;}
.nav-toggle{display:none;}

@media (max-width:820px){
  nav.main-nav ul{display:none;}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid var(--line); background:none; color:var(--text); border-radius:2px; cursor:pointer;
  }
  nav.main-nav.open ul{
    display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:64px;
    background:var(--panel); border-bottom:1px solid var(--line); padding:8px 24px 18px;
  }
  nav.main-nav.open a{display:block; padding:10px 12px; border-radius:2px;}
}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, var(--panel) 0%, var(--void) 100%);
  color:#fff; padding:88px 0 76px;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:
    linear-gradient(rgba(62,230,196,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,230,196,0.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 900px 500px at 30% 20%, black, transparent 75%);
}
.hero .container{position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
.hero h1{color:#fff;}
.hero p.lede{color:#AEBAC9; font-size:1.12rem; max-width:54ch;}
.hero-figure{justify-self:end; filter:drop-shadow(0 0 28px rgba(62,230,196,0.14));}
.eyebrow{
  color:var(--amber); font-weight:600; font-size:0.92rem; margin-bottom:12px; display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:7px; height:7px; background:var(--amber); border-radius:1px; display:inline-block;}
@media (max-width:820px){
  .hero .container{grid-template-columns:1fr;}
  .hero-figure{justify-self:start; margin-top:12px;}
}

.cta-row{display:flex; gap:14px; margin-top:24px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:13px 24px; font-weight:600; text-decoration:none;
  font-size:0.97rem; clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:filter .15s, transform .1s;
}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(180deg, #FFB44D, var(--amber)); color:var(--void);}
.btn-outline{border:1px solid #33415C; color:#fff; background:rgba(255,255,255,0.02);}
.btn-outline:hover{border-color:var(--cryo); color:var(--cryo);}
.btn-teal{background:linear-gradient(180deg, #52F0D2, var(--cryo)); color:var(--void);}

/* Sections */
section{padding:64px 0;}
section.band{background:var(--band); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.section-head{max-width:62ch; margin-bottom:36px;}
.section-head p{color:var(--muted);}

/* Grid cards — HUD panels, not the rounded-card-with-shadow kit */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){.grid-3, .grid-2{grid-template-columns:1fr;}}

.card{
  position:relative;
  background:var(--panel); border:1px solid var(--line); padding:26px 26px 24px;
}
.card::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--amber), var(--cryo)); opacity:0.85;
}
section.band .card{background:var(--panel-2);}
.card h3{margin-bottom:0.4em; color:#fff;}
.card p{color:var(--muted); margin-bottom:0;}
.card a{color:var(--cryo);}

/* Stat strip */
.stat-strip{display:flex; gap:40px; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 0;}
.stat{min-width:150px;}
.stat .num{font-family:"Space Grotesk", sans-serif; font-size:2rem; color:var(--cryo); display:block; font-weight:600;}
.stat .label{color:var(--muted); font-size:0.9rem;}

/* Table */
table{width:100%; border-collapse:collapse; margin:20px 0 30px; background:var(--panel); border:1px solid var(--line);}
th,td{text-align:left; padding:13px 15px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text);}
th{font-family:"Space Grotesk", sans-serif; font-weight:600; background:var(--panel-2); color:#fff;}
caption{caption-side:top; text-align:left; font-weight:600; margin-bottom:6px; color:#fff;}

/* Article / prose pages */
.prose{max-width:74ch;}
.prose h2{margin-top:1.6em; color:#fff;}
.prose ul, .prose ol{padding-left:1.25em; max-width:70ch;}
.prose li{margin-bottom:0.5em;}
.byline{color:var(--muted); font-size:0.92rem; margin-bottom:2em; border-bottom:1px solid var(--line); padding-bottom:18px;}

.callout{
  border-left:2px solid var(--cryo); background:var(--panel); padding:18px 22px; margin:1.6em 0;
}
.callout p{margin:0; color:var(--muted);}
.callout strong{color:#fff;}

.disclosure{
  border:1px dashed var(--line); padding:16px 20px; margin:1.6em 0; font-size:0.94rem; color:var(--muted); background:var(--panel);
}

/* Breadcrumb */
.breadcrumb{font-size:0.88rem; color:var(--muted); margin-bottom:22px;}
.breadcrumb a{color:var(--muted);}

/* Steps (real sequences only) */
.steps{list-style:none; margin:0; padding:0; counter-reset:step;}
.steps li{counter-increment:step; position:relative; padding-left:46px; margin-bottom:22px;}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px;
  background:var(--panel-2); border:1px solid var(--cryo); color:var(--cryo); font-family:"Space Grotesk", sans-serif; font-weight:600;
  display:flex; align-items:center; justify-content:center; font-size:0.95rem;
}

/* Comparison table highlight column */
.col-highlight{background:rgba(62,230,196,0.07);}

/* FAQ */
details.faq{border-bottom:1px solid var(--line); padding:16px 0;}
details.faq summary{font-family:"Space Grotesk", sans-serif; font-weight:600; cursor:pointer; font-size:1.04rem; color:#fff;}
details.faq p{margin-top:10px; color:var(--muted);}

/* Footer */
footer.site-footer{background:#03050A; color:var(--muted); padding:56px 0 30px; margin-top:40px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
.footer-grid h4{color:#fff; font-size:0.95rem; margin-bottom:14px; font-family:"Space Grotesk", sans-serif;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{color:var(--muted); text-decoration:none; font-size:0.93rem;}
.footer-grid a:hover{color:var(--cryo);}
.footer-brand p{color:#5C6981; max-width:40ch; font-size:0.92rem;}
.footer-bottom{
  border-top:1px solid var(--line); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.84rem; color:#4E5A70;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* Utility */
.text-teal{color:var(--cryo);}
.mt-0{margin-top:0;}
.small{font-size:0.9rem; color:var(--muted);}
.center{text-align:center;}
.na{color:#4E5A70;}

/* Amazon-style search console, header utility row */
.util-bar{background:var(--void); border-bottom:1px solid var(--line-soft); font-size:0.82rem; color:var(--muted); padding:6px 0;}
.util-bar .container{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.util-bar span{color:var(--cryo);}

.search-console{
  flex:1; display:flex; align-items:center; max-width:520px; border:1px solid var(--line); background:var(--panel);
}
.search-console input{
  flex:1; background:none; border:none; color:var(--text); padding:10px 14px; font-family:"Inter", sans-serif; font-size:0.92rem; outline:none;
}
.search-console input::placeholder{color:#5C6981;}
.search-console button{
  background:var(--amber); border:none; color:var(--void); padding:0 16px; align-self:stretch; cursor:pointer; font-weight:600;
}
@media (max-width:960px){.search-console{display:none;}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}