/* ══════════════════════════════════════════════════════════════════════
   EagleBuilt AI — shared site stylesheet
   Carries the same design system as /design/, which keeps its own inline
   copy on purpose: it is the paid-traffic landing page and should not wait
   on a second request. Content pages share this cached file instead.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070A12; --bg2:#0B111C; --panel:#0F1826; --line:#1E2C42; --line2:#2A3B57;
  --txt:#E7EEF7; --muted:#8DA0B8; --dim:#5F7391;
  --blue:#2E9BFF; --blue2:#7FC4FF; --red:#E8342B;
  --good:#3FD08A; --warn:#E7C89A;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(30px,5vw,50px);letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(23px,3.4vw,33px);letter-spacing:-.015em;font-weight:750}
h3{font-size:18px;font-weight:700}
p{margin:0 0 1em}
.lede{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:60ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--panel);padding:10px 14px;border-radius:8px}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(11,17,28,.93);
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.hrow{display:flex;align-items:center;gap:14px;padding:11px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:auto;filter:drop-shadow(0 1px 8px rgba(46,155,255,.35))}
.brand b{font-size:16px;letter-spacing:.05em;font-weight:800;color:var(--txt)}
.brand b i{font-style:normal;color:var(--red)}
.brand:hover{text-decoration:none}
nav{margin-left:auto;display:flex;gap:20px;align-items:center}
nav a{color:var(--muted);font-size:14.5px;font-weight:600}
nav a:hover{color:var(--txt);text-decoration:none}
nav a[aria-current="page"]{color:var(--txt)}
@media(max-width:760px){nav a.hideSm{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:9px;font-weight:700;font-size:15.5px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#2E9BFF,#1668C4);color:#fff;
  box-shadow:0 4px 18px rgba(46,155,255,.32);transition:.15s}
.btn:hover{filter:brightness(1.09);text-decoration:none}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--txt);box-shadow:none}
.btn.ghost:hover{background:#16233A}

/* hero */
.hero{padding:64px 0 40px;background:
  radial-gradient(900px 500px at 15% -10%,rgba(46,155,255,.15),transparent 60%),
  radial-gradient(800px 500px at 90% -5%,rgba(232,52,43,.10),transparent 60%)}
.hero.slim{padding:46px 0 26px}
.heroGrid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
@media(max-width:900px){.heroGrid{grid-template-columns:1fr;gap:28px}.hero{padding:38px 0 28px}}
.eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue2);font-weight:800;margin-bottom:14px;
  background:rgba(46,155,255,.1);border:1px solid rgba(46,155,255,.28);
  padding:5px 11px;border-radius:20px}
.heroCta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.heroNote{font-size:13.5px;color:var(--dim);margin-top:14px}
.shot{border-radius:12px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 20px 60px rgba(0,0,0,.55)}

/* sections */
section{padding:56px 0;border-top:1px solid var(--line)}
section.alt{background:var(--bg2)}
.kicker{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  font-weight:800;margin-bottom:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
@media(max-width:860px){.grid3,.grid2,.grid4{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);font-size:15px;margin:0}
.card .num{font-size:26px;font-weight:800;color:var(--blue2);line-height:1;margin-bottom:8px;
  letter-spacing:-.02em}
.card a{font-weight:650}
.viewCard img{border-radius:10px;border:1px solid var(--line2);margin-bottom:12px}

/* breadcrumbs */
.crumbs{font-size:13.5px;color:var(--dim);padding:14px 0 0}
.crumbs a{color:var(--muted)}
.crumbs span{padding:0 7px;color:var(--line2)}

/* prose */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.5em;color:var(--txt)}
.prose p,.prose li{color:var(--muted);font-size:16.5px}
.prose strong{color:var(--txt);font-weight:700}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

/* callouts */
.note{border-left:3px solid var(--blue);background:rgba(46,155,255,.07);
  padding:14px 18px;border-radius:0 10px 10px 0;margin:0 0 1.4em}
.note.warn{border-left-color:var(--warn);background:rgba(231,200,154,.07)}
.note p{margin:0;color:var(--muted);font-size:15.5px}
.note b{color:var(--txt)}

/* tables */
.tableWrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:22px 0;
  background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
caption{text-align:left;padding:14px 16px 0;color:var(--dim);font-size:13px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-weight:800;white-space:nowrap;background:#0C1523}
td{color:var(--muted)}
td.sku{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--txt);white-space:nowrap}
td.num{font-family:ui-monospace,Consolas,monospace;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--txt)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#0C1523}

/* price rows */
.priceRow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.priceRow:last-child{border-bottom:0}
.priceRow .l{color:var(--muted);font-size:15.5px}
.priceRow .l b{color:var(--txt);display:block;font-size:16px;font-weight:700}
.priceRow .v{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--txt);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* brands */
.brands{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.brands span,.brands a{padding:8px 15px;border-radius:22px;background:var(--panel);
  border:1px solid var(--line2);font-size:14px;font-weight:650;color:var(--muted)}
.brands a:hover{color:var(--txt);border-color:var(--blue);text-decoration:none}
.brands b{color:var(--txt);font-weight:750}
.tier{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  padding:3px 8px;border-radius:20px;background:#16233A;color:var(--muted)}

/* steps */
.steps{margin-top:28px;display:grid;gap:16px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#2E9BFF,#1668C4);font-weight:800;font-size:15px;color:#fff}
.step h3{margin-bottom:3px}
.step p{color:var(--muted);margin:0;font-size:15.5px}

/* faq */
details{border-bottom:1px solid var(--line);padding:15px 0}
details summary{cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--blue2);font-size:22px;font-weight:400;flex:0 0 auto;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--muted);font-size:15.5px;max-width:75ch}

/* cta band */
.band{background:linear-gradient(180deg,#101C2E,#0A1220);border:1px solid var(--line2);
  border-radius:16px;padding:34px;text-align:center;margin-top:10px}
.band h2{margin-bottom:8px}
.band p{color:var(--muted);max-width:56ch;margin:0 auto 20px}

/* forms */
.formWrap{background:linear-gradient(180deg,#131F31,#0C1420);border:1px solid var(--line2);
  border-radius:16px;padding:30px;max-width:560px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:650;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border-radius:9px;
  background:#0A121E;border:1px solid var(--line2);color:var(--txt);font-size:15.5px;outline:none;
  font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(46,155,255,.16)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}
.formWrap .btn{width:100%;margin-top:6px;padding:15px}
.fineprint{font-size:12.5px;color:var(--dim);margin:12px 0 0}
.err{color:#FF9A92;font-size:13.5px;margin-top:10px;display:none}

/* footer */
footer{padding:40px 0 60px;border-top:1px solid var(--line);color:var(--dim);font-size:14px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;margin-bottom:28px}
@media(max-width:860px){.fcols{grid-template-columns:1fr 1fr}}
footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
footer a{color:var(--dim)}
footer a:hover{color:var(--txt)}
.legal{border-top:1px solid var(--line);padding-top:18px;font-size:13px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
  scroll-behavior:auto!important}}

/* Header menu. Built on <details> so it works on touch with no JavaScript at
   all — the nav links are hidden under 760px, which until now left a phone with
   no navigation beyond the CTA. */
.menuWrap{position:relative}
.menuWrap>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:6px;padding:7px 12px;border:1px solid var(--line2);border-radius:8px;
  color:var(--muted);font-size:13px;transition:.12s}
.menuWrap>summary::-webkit-details-marker{display:none}
.menuWrap>summary:hover,.menuWrap[open]>summary{color:var(--txt);border-color:#3A5580}
.menuPanel{position:absolute;right:0;top:calc(100% + 8px);min-width:238px;z-index:60;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.menuPanel h5{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dim);margin:8px 8px 4px;font-weight:700}
.menuPanel a{display:block;padding:7px 8px;border-radius:7px;color:var(--muted);
  font-size:13.5px;text-decoration:none}
.menuPanel a:hover{background:var(--bg2);color:var(--txt)}

/* Under ~560px the brand wordmark, the Menu button and the CTA do not fit on
   one line and the Menu button lands on top of the wordmark. The emblem is the
   brand at that size, so the text drops. */
@media(max-width:560px){
  header .brand b{display:none}
  .menuWrap>summary{padding:7px 10px}
  header nav{gap:8px}
  /* Anchored to the button, a 238px panel runs off the left edge of a phone.
     Let it hang off the (sticky, so positioned) header instead: full width,
     just below it, wherever the button happens to land on this page. */
  .menuWrap{position:static}
  .menuPanel{left:12px;right:12px;top:100%;min-width:0}
}