/* ==========================================================================
   Desert Forge IT — Backups console  ·  "desert-ops" visual language
   Same High-Desert Utility bones as desertforgeit.com, retuned for an ops
   console: steel/denim accent (rust demoted to alerts), hard edges, JBMono
   data readouts, tighter instrument density. Self-hosted Saira / JBMono.
   ========================================================================== */
@font-face{ font-family:'Saira Cond'; font-weight:700; font-display:swap; src:url('/assets/fonts/sairacond-700.woff2') format('woff2'); }
@font-face{ font-family:'Saira Cond'; font-weight:800; font-display:swap; src:url('/assets/fonts/sairacond-800.woff2') format('woff2'); }
@font-face{ font-family:'Saira'; font-weight:300 700; font-display:swap; src:url('/assets/fonts/saira-latin-var.woff2') format('woff2'); }
@font-face{ font-family:'JBMono'; font-weight:400 800; font-display:swap; src:url('/assets/fonts/jbmono-latin-var.woff2') format('woff2'); }

:root{
  --bg:#DFD7C4; --panel:#E6DFCE; --panel-2:#D4CBB4;
  --ink:#23231B; --ink-2:#5B5849; --muted:#7C765F;
  --line:rgba(35,35,27,.30); --line-2:rgba(35,35,27,.14); --hair:rgba(35,35,27,.10);
  --accent:#3F586B; --accent-2:#4E6575; --on-accent:#EFEADC;
  --accent-bg:rgba(63,88,107,.10); --accent-border:rgba(63,88,107,.42); --accent-light:rgba(63,88,107,.16);
  --rust:#9E4A2A; --rust-bg:rgba(158,74,42,.12);
  --olive:#5F6A3C; --olive-bg:rgba(95,106,60,.14);
  --success:var(--olive); --error:var(--rust);
  --display:'Saira Cond','Arial Narrow',system-ui,sans-serif;
  --body:'Saira',system-ui,-apple-system,sans-serif;
  --mono:'JBMono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* legacy aliases — keep existing markup/JS classnames working verbatim */
  --card:var(--panel); --text:var(--ink); --text2:var(--ink-2);
  --border:var(--line); --accent2:var(--accent-2);
  --badge-bg:var(--accent-bg); --badge-border:var(--accent-border);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161611; --panel:#20201A; --panel-2:#2A2A21;
    --ink:#E7E1D2; --ink-2:#A29C88; --muted:#847E6A;
    --line:rgba(231,225,210,.20); --line-2:rgba(231,225,210,.10); --hair:rgba(231,225,210,.07);
    --accent:#8AA1B1; --accent-2:#9CB0BE; --on-accent:#12161A;
    --accent-bg:rgba(138,161,177,.14); --accent-border:rgba(138,161,177,.42); --accent-light:rgba(138,161,177,.20);
    --rust:#C9663D; --rust-bg:rgba(201,102,61,.15);
    --olive:#98A06F; --olive-bg:rgba(152,160,111,.16);
  }
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.55; font-weight:420; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.96; letter-spacing:.006em; }
::selection{ background:var(--accent); color:var(--on-accent); }

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

/* Nav ------------------------------------------------------------------ */
nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:20px; letter-spacing:.01em; color:var(--ink); }
.brand img{ border-radius:0 !important; }
.nav-links{ display:flex; gap:2px; }
.nav-links a{ padding:7px 13px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); transition:color .18s, background .18s; }
.nav-links a:hover{ color:var(--ink); background:var(--accent-bg); }
.nav-links a.active{ color:var(--accent); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-btn{ padding:9px 18px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; transition:background .18s, border-color .18s, transform .12s; }
.nav-btn-primary{ background:var(--accent); color:var(--on-accent); }
.nav-btn-primary:hover{ background:var(--accent-2); transform:translateY(-1px); }
.nav-btn-secondary{ background:transparent; color:var(--ink-2); border-color:var(--line); }
.nav-btn-secondary:hover{ color:var(--ink); border-color:var(--ink-2); }
@media (max-width:680px){ .nav-links{ display:none; } }

/* Buttons -------------------------------------------------------------- */
.btn{ padding:13px 22px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--ink); cursor:pointer; transition:background .18s, color .18s, transform .12s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--bg); }
.btn:disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }

/* Hero ----------------------------------------------------------------- */
.hero{ padding:80px 0 56px; text-align:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border:1px solid var(--accent-border); background:var(--accent-bg); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; }
.dot{ width:7px; height:7px; background:var(--accent); flex-shrink:0; }
.hero h1{ font-size:clamp(40px,6.5vw,68px); font-weight:800; line-height:.94; letter-spacing:.004em; margin-bottom:18px; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p{ font-family:var(--body); font-size:18px; font-weight:400; text-transform:none; color:var(--ink-2); max-width:56ch; margin:0 auto 30px; line-height:1.5; }
.cta-group{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Hero comparison strip — reads as an instrument readout ---------------- */
.comparison-strip{ max-width:920px; margin:34px auto 0; background:var(--panel); border:2px solid var(--ink); text-align:left; }
.strip-header{ padding:12px 22px 10px; display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; font-weight:700; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.strip-header a{ font-size:10.5px; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.strip-row{ display:flex; justify-content:space-between; align-items:center; padding:13px 22px; border-top:1px solid var(--hair); border-left:3px solid transparent; transition:background .15s; }
.strip-row:hover{ background:var(--accent-bg); }
.strip-row.strip-you{ background:var(--accent-light); border-left-color:var(--accent); }
.strip-name{ font-family:var(--body); font-weight:600; font-size:14px; }
.strip-you .strip-name{ font-weight:700; color:var(--accent); }
.strip-tag{ font-family:var(--mono); font-size:9px; margin-left:8px; padding:2px 6px; background:var(--accent); color:var(--on-accent); letter-spacing:.1em; text-transform:uppercase; }
.strip-sub{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; letter-spacing:.04em; }
.strip-price{ font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:-.01em; }
.strip-you .strip-price{ color:var(--accent); }
.trust-bar strong{ font-weight:700; color:var(--ink); }

/* Sections ------------------------------------------------------------- */
section{ padding:72px 0; }
.section-label{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.section-label::before{ content:"// "; color:var(--accent-2); }
.section-title{ font-size:clamp(28px,4.2vw,42px); font-weight:800; letter-spacing:.005em; margin-bottom:14px; }
.section-sub{ font-family:var(--body); font-size:16px; text-transform:none; color:var(--ink-2); max-width:54ch; margin-bottom:40px; line-height:1.5; }
.alt-bg{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* Grid ----------------------------------------------------------------- */
.grid{ display:grid; gap:16px; }
.cols2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.cols3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.cols4{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

/* Cards ---------------------------------------------------------------- */
.card{ padding:24px; background:var(--panel); border:1px solid var(--line); transition:border-color .2s, transform .2s; }
.card:hover{ border-color:var(--accent-border); transform:translateY(-2px); }
.card-icon{ width:42px; height:42px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent); }
.card h3{ font-size:19px; font-weight:800; margin-bottom:8px; }
.card p{ font-family:var(--body); color:var(--ink-2); font-size:14px; line-height:1.6; text-transform:none; }

/* Plan cards ----------------------------------------------------------- */
.plans-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:2px solid var(--ink); }
.plans-grid > .plan-card{ border-right:1px solid var(--line); }
.plans-grid > .plan-card:last-child{ border-right:none; }
@media (max-width:960px){ .plans-grid{ grid-template-columns:repeat(2,1fr); } .plans-grid > .plan-card:nth-child(2){ border-right:none; } }
@media (max-width:500px){ .plans-grid{ grid-template-columns:1fr; } .plans-grid > .plan-card{ border-right:none; border-bottom:1px solid var(--line); } }

.plan-card{ padding:32px 22px; background:var(--panel); text-align:center; transition:background .25s; position:relative; display:flex; flex-direction:column; }
.plan-card:hover{ background:var(--accent-bg); }
.plan-card.popular{ background:var(--accent-light); box-shadow:inset 0 3px 0 var(--accent); }
.plan-card.popular::before{ content:'Most Popular'; position:absolute; top:0; left:50%; transform:translateX(-50%); padding:4px 12px; background:var(--accent); color:var(--on-accent); font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.plan-name{ font-size:22px; font-weight:800; margin-bottom:6px; }
.plan-storage{ font-family:var(--mono); font-size:42px; font-weight:700; color:var(--accent); line-height:1; margin-bottom:6px; letter-spacing:-.02em; }
.plan-storage span{ font-family:var(--mono); font-size:16px; font-weight:600; color:var(--ink-2); }
.plan-price{ font-family:var(--mono); font-size:26px; font-weight:700; margin:16px 0 4px; }
.plan-price span{ font-size:13px; font-weight:500; color:var(--muted); }
.plan-desc{ font-family:var(--body); font-size:13px; color:var(--ink-2); margin-bottom:20px; text-transform:none; }
.plan-features{ list-style:none; text-align:left; margin-bottom:24px; flex:1; }
.plan-features li{ padding:7px 0; font-family:var(--body); font-size:14px; color:var(--ink-2); display:flex; align-items:center; gap:10px; border-top:1px solid var(--hair); text-transform:none; }
.plan-features li:first-child{ border-top:none; }
.plan-features li::before{ content:'✓'; color:var(--olive); font-weight:700; font-size:13px; }
.plan-btn{ width:100%; padding:14px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--ink); cursor:pointer; transition:background .18s, color .18s; }
.plan-btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.plan-btn-primary:hover{ background:var(--accent-2); }
.plan-btn-secondary{ background:transparent; color:var(--accent); border-color:var(--accent-border); }
.plan-btn-secondary:hover{ background:var(--accent-bg); }
.plan-savings{ font-family:var(--mono); font-size:11px; color:var(--olive); font-weight:600; letter-spacing:.04em; margin-top:6px; min-height:16px; }
.plan-fineprint{ font-family:var(--mono); font-size:10px; color:var(--muted); text-align:center; margin-top:10px; letter-spacing:.04em; }
.plan-best-value::after{ content:'Best Value'; position:absolute; top:0; left:50%; transform:translateX(-50%); padding:4px 12px; background:var(--panel-2); color:var(--accent); border:1px solid var(--accent-border); border-top:none; font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }

/* Billing toggle — segmented control ----------------------------------- */
.billing-toggle{ display:flex; width:max-content; max-width:100%; align-items:stretch; gap:0; margin:0 auto 40px; border:1px solid var(--ink); flex-wrap:wrap; }
.billing-toggle label{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); cursor:pointer; padding:9px 16px; border-right:1px solid var(--line); transition:background .18s, color .18s; display:inline-flex; align-items:center; }
.billing-toggle label:last-child{ border-right:none; }
.billing-toggle label.active{ color:var(--on-accent); background:var(--accent); }
.billing-toggle .save-badge{ font-family:var(--mono); font-size:10px; font-weight:700; color:var(--olive); background:var(--olive-bg); padding:2px 7px; margin-left:7px; letter-spacing:.04em; }
.billing-toggle label.active .save-badge{ color:var(--on-accent); background:rgba(255,255,255,.2); }

/* How it works — a real 3-step sequence, numbering earns its place ----- */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:step; border:2px solid var(--ink); }
.steps-grid > .step-card{ border-right:1px solid var(--line); }
.steps-grid > .step-card:last-child{ border-right:none; }
@media (max-width:700px){ .steps-grid{ grid-template-columns:1fr; } .steps-grid > .step-card{ border-right:none; border-bottom:1px solid var(--line); } }
.step-card{ padding:32px 24px; background:var(--panel); text-align:left; position:relative; }
.step-card::before{ counter-increment:step; content:counter(step,decimal-leading-zero); display:block; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.14em; color:var(--accent); margin-bottom:16px; }
.step-card h3{ font-size:19px; font-weight:800; margin-bottom:8px; }
.step-card p{ font-family:var(--body); color:var(--ink-2); font-size:14px; text-transform:none; line-height:1.6; }

/* Trust bar ------------------------------------------------------------ */
.trust-bar{ display:flex; flex-wrap:wrap; gap:18px 24px; align-items:center; justify-content:center; margin-top:40px; padding-top:30px; border-top:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.trust-item{ display:flex; align-items:center; gap:7px; }
.check{ color:var(--olive); }

/* Storage calculator — the console signature --------------------------- */
.calc-card{ padding:0; background:var(--panel); border:2px solid var(--ink); display:grid; grid-template-columns:1.4fr 1fr; gap:0; }
@media (max-width:760px){ .calc-card{ grid-template-columns:1fr; } }
.calc-sliders{ display:flex; flex-direction:column; gap:22px; padding:30px; }
.calc-row label{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:9px; font-weight:600; }
.calc-row label .calc-val{ color:var(--ink); font-weight:700; font-family:var(--mono); }
.calc-row input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; background:var(--line); outline:none; }
.calc-row input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; background:var(--accent); cursor:pointer; border:0; box-shadow:0 0 0 3px var(--accent-bg); }
.calc-row input[type="range"]::-moz-range-thumb{ width:16px; height:16px; background:var(--accent); cursor:pointer; border:0; box-shadow:0 0 0 3px var(--accent-bg); }
.calc-row input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--accent); outline-offset:2px; }
.calc-headroom{ display:flex; gap:0; flex-wrap:wrap; margin-top:6px; border:1px solid var(--line); width:max-content; }
.calc-chip{ padding:7px 13px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; border:none; border-right:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s; }
.calc-chip:last-child{ border-right:none; }
.calc-chip.active{ background:var(--accent); color:var(--on-accent); }
.calc-result{ background:var(--panel-2); border-left:2px solid var(--ink); padding:28px; display:flex; flex-direction:column; justify-content:space-between; }
@media (max-width:760px){ .calc-result{ border-left:none; border-top:2px solid var(--ink); } }
.calc-total-label{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.calc-total{ font-family:var(--mono); font-size:40px; font-weight:700; color:var(--accent); line-height:1; margin:10px 0 4px; letter-spacing:-.02em; }
.calc-rec-label{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:20px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.calc-rec-name{ font-family:var(--display); font-size:24px; font-weight:800; text-transform:uppercase; margin-top:8px; line-height:1; }
.calc-rec-sub{ font-family:var(--body); font-size:13px; color:var(--ink-2); margin-top:6px; margin-bottom:18px; text-transform:none; }
.calc-cta{ width:100%; padding:13px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--accent); cursor:pointer; background:var(--accent); color:var(--on-accent); transition:background .18s; }
.calc-cta:hover{ background:var(--accent-2); }

/* Use cases ------------------------------------------------------------ */
.usecase-card{ padding:24px; background:var(--panel); border:1px solid var(--line); transition:border-color .2s, transform .2s; }
.usecase-card:hover{ border-color:var(--accent-border); transform:translateY(-2px); }
.usecase-icon{ font-size:26px; margin-bottom:12px; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; background:var(--accent-bg); border:1px solid var(--accent-border); }
.usecase-card h3{ font-size:18px; font-weight:800; margin-bottom:6px; }
.usecase-card p{ font-family:var(--body); color:var(--ink-2); font-size:14px; margin-bottom:14px; text-transform:none; line-height:1.55; }
.usecase-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-border); cursor:pointer; transition:background .15s; }
.usecase-chip:hover{ background:var(--accent-light); }
.plan-card.flash{ animation:planFlash 1.4s ease-out; }
@keyframes planFlash{ 0%{ box-shadow:inset 0 0 0 0 var(--accent); } 30%{ box-shadow:inset 0 0 0 4px var(--accent); } 100%{ box-shadow:inset 0 0 0 0 var(--accent); } }

/* Social proof --------------------------------------------------------- */
.logo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:36px; }
.logo-box{ aspect-ratio:5/2; border:1px solid var(--line); background:repeating-linear-gradient(45deg, var(--panel) 0 8px, var(--panel-2) 8px 16px); display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.testimonial{ padding:24px; background:var(--panel); border:1px solid var(--line); }
.testimonial-quote{ font-family:var(--body); font-size:15px; line-height:1.6; color:var(--ink); margin-bottom:14px; text-transform:none; }
.testimonial-meta{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--ink-2); letter-spacing:.04em; }
.testimonial-avatar{ width:36px; height:36px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--on-accent); font-family:var(--display); font-weight:800; font-size:15px; }

/* Guarantee block ------------------------------------------------------ */
.guarantee-card{ padding:44px 32px; background:var(--accent-bg); border:2px solid var(--ink); display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; }
@media (max-width:720px){ .guarantee-card{ grid-template-columns:1fr; text-align:center; gap:22px; } }
.seal{ width:150px; height:150px; background:var(--panel); border:2px solid var(--accent); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; margin:0 auto; }
.seal-num{ font-family:var(--display); font-weight:800; font-size:66px; line-height:1; color:var(--accent); }
.seal-day{ font-family:var(--mono); font-size:11px; color:var(--accent-2); letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin-top:2px; }
.seal-promise{ font-family:var(--mono); font-size:10px; color:var(--ink-2); letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-top:10px; }
.guarantee-card h2{ font-size:clamp(24px,3.2vw,32px); font-weight:800; margin-bottom:10px; }
.guarantee-card p{ font-family:var(--body); color:var(--ink-2); font-size:15px; line-height:1.6; text-transform:none; }

/* Founder/local block -------------------------------------------------- */
.local-strip{ display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:center; padding:20px; border:1px solid var(--line); background:var(--panel); font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink-2); margin-bottom:12px; }
.local-strip strong{ color:var(--ink); font-weight:700; }
.local-pill{ display:inline-flex; align-items:center; gap:6px; }

/* Comparison table — the money view, styled as a data panel ------------ */
.compare-wrap{ overflow-x:auto; border:2px solid var(--ink); background:var(--panel); }
.compare-table{ width:100%; min-width:640px; border-collapse:collapse; }
.compare-table th, .compare-table td{ padding:13px 18px; text-align:left; font-family:var(--mono); font-size:13px; border-bottom:1px solid var(--hair); }
.compare-table thead th{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; background:var(--panel-2); border-bottom:1px solid var(--line); }
.compare-table th:first-child, .compare-table td:first-child{ color:var(--ink-2); font-weight:500; font-family:var(--body); text-transform:none; }
.compare-table .col-you{ background:var(--accent-light); color:var(--ink); font-weight:700; border-left:1px solid var(--accent-border); border-right:1px solid var(--accent-border); }
.compare-table thead .col-you{ color:var(--accent); }
.compare-table tr.compare-allin td{ background:var(--accent-bg); font-weight:800; font-size:14px; }
.compare-table tr.compare-allin td.col-you{ background:var(--accent-light); color:var(--accent); }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-foot{ padding:15px 22px; font-family:var(--body); font-size:13px; color:var(--muted); font-style:italic; border-top:1px solid var(--line); background:var(--panel-2); text-transform:none; }
.compare-yes{ color:var(--olive); font-weight:700; }
.compare-no{ color:var(--muted); }

/* FAQ ------------------------------------------------------------------ */
.faq-list{ display:grid; gap:0; max-width:760px; border:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); background:var(--panel); transition:background .2s; }
.faq-item:last-child{ border-bottom:none; }
.faq-item:hover{ background:var(--accent-bg); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; cursor:pointer; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:17px; letter-spacing:.01em; width:100%; background:none; border:none; color:var(--ink); text-align:left; line-height:1.2; }
.faq-q::after{ content:'+'; font-family:var(--mono); font-size:20px; color:var(--accent); transition:transform .2s; flex-shrink:0; margin-left:16px; }
.faq-item.open .faq-q::after{ content:'−'; }
.faq-a{ padding:0 22px 20px; font-family:var(--body); color:var(--ink-2); font-size:14px; line-height:1.7; display:none; text-transform:none; }
.faq-item.open .faq-a{ display:block; }

/* CTA box -------------------------------------------------------------- */
.contact-box{ padding:52px 40px; background:var(--accent-bg); border:2px solid var(--ink); text-align:center; }
.contact-box h2{ font-size:clamp(26px,3.5vw,40px); font-weight:800; margin-bottom:12px; }
.contact-box p{ font-family:var(--body); color:var(--ink-2); font-size:16px; max-width:50ch; margin:0 auto 28px; text-transform:none; line-height:1.5; }
.contact-links{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.contact-link{ padding:11px 22px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--accent-border); background:var(--accent-bg); color:var(--accent); transition:background .18s; display:flex; align-items:center; gap:7px; }
.contact-link:hover{ background:var(--accent-light); }

/* Footer --------------------------------------------------------------- */
footer{ padding:30px 0; border-top:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-links{ display:flex; gap:16px; text-transform:uppercase; }
.footer-links a{ transition:color .18s; }
.footer-links a:hover{ color:var(--accent); }
.footer-links a.hl{ color:var(--accent); }

/* Auth modal ----------------------------------------------------------- */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(20,18,12,.66); z-index:100; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--panel); border:2px solid var(--ink); padding:38px; width:100%; max-width:420px; position:relative; }
.modal-close{ position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:22px; cursor:pointer; padding:4px; line-height:1; }
.modal-close:hover{ color:var(--ink); }
.modal h2{ font-size:26px; font-weight:800; margin-bottom:8px; }
.modal p{ font-family:var(--body); color:var(--ink-2); font-size:14px; margin-bottom:24px; text-transform:none; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:7px; }
.form-group input{ width:100%; padding:12px 14px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-family:var(--body); font-size:15px; }
.form-group input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.form-submit{ width:100%; padding:14px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); cursor:pointer; transition:background .18s; margin-top:8px; }
.form-submit:hover{ background:var(--accent-2); }
.form-submit:disabled{ opacity:.5; cursor:not-allowed; }
.form-error{ color:var(--rust); font-family:var(--mono); font-size:12px; margin-top:8px; display:none; letter-spacing:.03em; }
.form-error.show{ display:block; }
.form-toggle{ text-align:center; margin-top:16px; font-family:var(--body); font-size:13px; color:var(--ink-2); text-transform:none; }
.form-toggle a{ color:var(--accent); cursor:pointer; font-weight:600; }
.form-toggle a:hover{ text-decoration:underline; }

.hidden{ display:none !important; }

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

/* ==========================================================================
   CONSOLE LAYOUT LAYER  ·  v2
   Re-lays the landing page on the same High-Desert Utility bones as
   desertforgeit.com — hard-bordered grids, mono index headers, a dark trust
   band — but re-cast as a STORAGE OPERATIONS CONSOLE: a live status panel,
   capacity gauges, targeting-bracket hovers, and a boot-log entrance. Cooler
   denim accent throughout (rust stays reserved for alerts).
   ========================================================================== */
:root{
  --console-dark:#1C1C15; --on-dark:#E7E1D2; --on-dark-2:#A7A18C;
  --grid-line:rgba(35,35,27,.09); --scan:rgba(63,88,107,.9);
}
@media (prefers-color-scheme:dark){
  :root{ --console-dark:#100F0A; --on-dark:#E7E1D2; --on-dark-2:#8F8974;
    --grid-line:rgba(231,225,210,.06); --scan:rgba(138,161,177,.9); }
}

/* ---- graph-paper backdrop (behind hero) ---- */
.grid-bg{ background-image:
  linear-gradient(var(--grid-line) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:30px 30px; }

/* ---- top strip: dark utility band with a live status light ---- */
.topstrip{ background:var(--console-dark); color:var(--on-dark-2); border-bottom:2px solid var(--accent); }
.topstrip .wrap{ display:flex; justify-content:space-between; align-items:center; gap:12px; height:34px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.topstrip a{ color:var(--on-dark); font-weight:600; }
.topstrip a:hover{ color:#fff; }
.status-live{ display:inline-flex; align-items:center; gap:8px; color:var(--on-dark); }
.status-live .lamp{ width:8px; height:8px; background:var(--olive); box-shadow:0 0 0 0 rgba(120,150,80,.6);
  animation:lampPulse 2.4s infinite; }
@keyframes lampPulse{ 0%{ box-shadow:0 0 0 0 rgba(120,150,80,.55);} 70%{ box-shadow:0 0 0 7px rgba(120,150,80,0);} 100%{ box-shadow:0 0 0 0 rgba(120,150,80,0);} }
@media(max-width:560px){ .topstrip .wrap > .ts-left{ display:none; } }

/* ---- inspection stamp (hero eyebrows) ---- */
.stamp{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:600;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; border:1.5px solid var(--ink);
  padding:5px 11px; color:var(--ink); line-height:1; }
.stamp .sq{ width:7px; height:7px; background:currentColor; }
.stamp.accent{ border-color:var(--accent); color:var(--accent); }
.stamp.olive{ border-color:var(--olive); color:var(--olive); }

/* ---- section index header:  SVC.02 // THE MATH  (rule draws in) ---- */
.sec-head{ display:grid; grid-template-columns:1fr; gap:8px 20px; margin-bottom:38px; }
.sec-idx{ font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:12px; }
.sec-idx::after{ content:""; height:2px; flex:1; background:var(--line);
  transform:scaleX(0); transform-origin:left; }
.sec-head.in .sec-idx::after{ transform:scaleX(1); transition:transform .8s cubic-bezier(.65,0,.35,1); }
.sec-head h2{ font-size:clamp(28px,4.4vw,46px); letter-spacing:.004em; }
.sec-head .lead{ font-family:var(--body); font-size:17px; color:var(--ink-2); max-width:52ch; text-transform:none; }
@media(min-width:860px){
  .sec-head{ grid-template-columns:1.05fr 1fr; align-items:end; }
  .sec-idx{ grid-column:1 / -1; }
  .sec-head h2{ grid-column:1; }
  .sec-head .lead{ grid-column:2; align-self:end; padding-bottom:6px; }
}

/* ============================================================
   HERO — operations console
   ============================================================ */
.hero-c{ border-bottom:2px solid var(--ink); position:relative; overflow:hidden; }
.hero-c .wrap{ padding-top:56px; }
.hero-c-top{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:30px; }
.hero-c-body{ display:grid; grid-template-columns:1fr; gap:34px; padding-bottom:0; }
@media(min-width:940px){ .hero-c-body{ grid-template-columns:1.15fr .85fr; align-items:stretch; } }
.hero-c h1{ font-size:clamp(42px,7.4vw,92px); line-height:.9; letter-spacing:-.012em; }
.hero-c h1 .u{ color:var(--accent); position:relative; white-space:nowrap; }
.hero-c h1 .u::after{ content:""; position:absolute; left:0; right:0; bottom:.02em; height:.08em; background:var(--accent); }
.hero-c-sub{ font-family:var(--body); font-size:clamp(16px,2vw,19px); color:var(--ink-2); max-width:50ch;
  margin-top:22px; text-transform:none; line-height:1.5; }
.hero-c-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.hero-c-lead{ display:flex; flex-direction:column; justify-content:center; }

/* headline line-wipe entrance (distinct from main site's per-char slot-in) */
html.js .hero-c h1 .line{ display:block; overflow:hidden; }
html.js .hero-c h1 .line > span{ display:block; transform:translateY(102%); }
html.js .hero-c h1.in .line > span{ transform:translateY(0);
  transition:transform .72s cubic-bezier(.16,.84,.3,1); }
html.js .hero-c h1.in .line:nth-child(2) > span{ transition-delay:.09s; }
html.js .hero-c h1 .u::after{ transform:scaleX(0); transform-origin:left; }
html.js .hero-c h1.in .u::after{ transform:scaleX(1); transition:transform .55s cubic-bezier(.65,0,.35,1) .7s; }

/* the console panel itself — the page signature */
.console{ border:2px solid var(--ink); background:var(--panel); display:flex; flex-direction:column;
  font-family:var(--mono); min-height:300px; }
.console-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; background:var(--console-dark); color:var(--on-dark); border-bottom:2px solid var(--ink);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.console-bar .node{ display:inline-flex; align-items:center; gap:8px; }
.console-bar .lamp{ width:7px; height:7px; background:var(--olive); animation:lampPulse 2.4s infinite; }
.console-bar .cbtns{ display:inline-flex; gap:5px; }
.console-bar .cbtns i{ width:8px; height:8px; border:1px solid var(--on-dark-2); display:block; }
.console-log{ padding:14px 15px 8px; display:flex; flex-direction:column; gap:5px; font-size:12px;
  color:var(--ink-2); line-height:1.5; flex:1; }
.console-log .cl{ opacity:0; }
html:not(.js) .console-log .cl{ opacity:1; }
.console-log .cl.on{ opacity:1; transition:opacity .12s ease; }
.console-log .cl .ok{ color:var(--olive); }
.console-log .cl .tag{ color:var(--accent); }
.console-log .cursor{ display:inline-block; width:8px; height:1.05em; background:var(--accent);
  vertical-align:-2px; margin-left:2px; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.console-gauges{ border-top:2px solid var(--ink); padding:16px 15px; display:grid; gap:14px; background:var(--panel-2); }
.gauge{ display:grid; gap:6px; }
.gauge-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.gauge-top b{ font-size:13px; color:var(--ink); font-weight:700; letter-spacing:.02em; }
.gauge-track{ height:8px; background:var(--line-2); border:1px solid var(--line); position:relative; overflow:hidden; }
.gauge-fill{ position:absolute; inset:0 100% 0 0; background:var(--accent);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 7px); }
.gauge-fill.olive{ background-color:var(--olive); }
html.js .gauge.in .gauge-fill{ transition:inset 1.1s cubic-bezier(.65,0,.35,1); }

/* ---- spec strip beneath hero (4 hard cells) ---- */
.specstrip{ border-top:2px solid var(--ink); display:grid; grid-template-columns:repeat(4,1fr); margin-top:40px; }
.specstrip .cell{ padding:16px 20px; border-right:1px solid var(--line); }
.specstrip .cell:last-child{ border-right:0; }
.specstrip .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.specstrip .v{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.4vw,28px); margin-top:5px; line-height:1; }
.specstrip .v.accent{ color:var(--accent); }
@media(max-width:760px){ .specstrip{ grid-template-columns:repeat(2,1fr); }
  .specstrip .cell:nth-child(2){ border-right:0; }
  .specstrip .cell:nth-child(-n+2){ border-bottom:1px solid var(--line); } }
@media(max-width:420px){ .specstrip{ grid-template-columns:1fr; }
  .specstrip .cell{ border-right:0; border-bottom:1px solid var(--line); } }

/* ============================================================
   CATALOG — feature manifest as justified parts rows
   ============================================================ */
.catalog{ border:2px solid var(--ink); background:var(--panel); }
.catalog .row{ display:grid; grid-template-columns:104px 1fr; border-top:1px solid var(--line); }
.catalog .row:first-child{ border-top:0; }
.catalog .row .pn{ padding:22px 18px; border-right:1px solid var(--line); font-family:var(--mono); font-weight:700;
  font-size:13px; letter-spacing:.06em; color:var(--accent); display:flex; align-items:flex-start; }
.catalog .row .rc{ padding:22px 24px; }
.catalog .row h3{ font-family:var(--display); font-weight:700; font-size:22px; margin-bottom:6px; text-transform:uppercase; }
.catalog .row p{ font-family:var(--body); color:var(--ink-2); font-size:15px; text-transform:none; max-width:72ch; line-height:1.55; }
.catalog .row:hover{ background:var(--panel-2); }
@media(max-width:560px){ .catalog .row{ grid-template-columns:1fr; }
  .catalog .row .pn{ border-right:0; border-bottom:1px solid var(--line); padding:14px 18px; } }

/* ============================================================
   DARK TRUST BAND
   ============================================================ */
.band-dark{ background:var(--console-dark); color:var(--on-dark); border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); }
.band-dark .sec-idx{ color:var(--accent); }
.band-dark .sec-idx::after{ background:rgba(231,225,210,.2); }
.band-dark .sec-head h2{ color:var(--on-dark); }
.band-dark .sec-head .lead{ color:var(--on-dark-2); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--accent); }
.trust-cell{ padding:26px 22px; border-right:1px solid rgba(231,225,210,.16); }
.trust-cell:last-child{ border-right:0; }
.trust-cell .ti{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--accent); margin-bottom:14px; }
.trust-cell h3{ font-family:var(--display); font-weight:700; font-size:20px; margin-bottom:8px; color:var(--on-dark); text-transform:uppercase; }
.trust-cell p{ font-family:var(--body); color:var(--on-dark-2); font-size:14.5px; text-transform:none; line-height:1.55; }
@media(max-width:820px){ .trust-grid{ grid-template-columns:1fr 1fr; }
  .trust-cell:nth-child(2){ border-right:0; }
  .trust-cell:nth-child(-n+2){ border-bottom:1px solid rgba(231,225,210,.16); } }
@media(max-width:520px){ .trust-grid{ grid-template-columns:1fr; }
  .trust-cell{ border-right:0; border-bottom:1px solid rgba(231,225,210,.16); } }

/* ============================================================
   FINAL CTA — big type
   ============================================================ */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(32px,6vw,68px); line-height:.92; margin-bottom:16px; }
.cta-final .lead{ font-family:var(--body); color:var(--ink-2); font-size:18px; max-width:54ch; margin:0 auto 26px; text-transform:none; line-height:1.5; }
.cta-final .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   DARK SITE FOOTER (multi-column)
   ============================================================ */
.site-footer{ background:var(--console-dark); color:var(--on-dark-2); border-top:2px solid var(--accent); padding:52px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:32px; }
.foot-brand .brand{ color:var(--on-dark); margin-bottom:12px; }
.foot-brand p{ font-family:var(--body); font-size:14px; color:var(--on-dark-2); max-width:38ch; text-transform:none; line-height:1.55; }
.foot-col h4{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--on-dark); margin-bottom:14px; text-transform:uppercase; }
.foot-col a{ display:block; color:var(--on-dark-2); font-size:14px; padding:4px 0; }
.foot-col a:hover{ color:var(--on-dark); }
.foot-bottom{ border-top:1px solid rgba(231,225,210,.14); margin-top:36px; padding-top:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-2);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media(max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:24px; } }
@media(max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ============================================================
   TARGETING-BRACKET HOVER  (console take on the main-site crop marks)
   ============================================================ */
.bracket{ position:relative; }
.bracket::before,.bracket::after{ content:""; position:absolute; width:13px; height:13px; border:2px solid var(--accent);
  opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
.bracket::before{ top:5px; left:5px; border-right:0; border-bottom:0; transform:translate(4px,4px); }
.bracket::after{ bottom:5px; right:5px; border-left:0; border-top:0; transform:translate(-4px,-4px); }
.bracket:hover::before,.bracket:hover::after,.bracket:focus-within::before,.bracket:focus-within::after{ opacity:1; transform:translate(0,0); }

/* ============================================================
   SCROLL REVEAL  (generic) — gated on html.js so no-JS shows all
   ============================================================ */
html.js .reveal{ opacity:0; transform:translateY(18px); }
html.js .reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
/* row-population: children lifted, released in sequence via inline delay from JS */
html.js .pop > *{ opacity:0; transform:translateY(12px); }
html.js .pop.in > *{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }