/* ==========================================================================
   Live Heat Press — v8 "Analog Instrument Panel / Heat Hardware"
   Warm brushed-metal control deck: amber LEDs, bronze knobs, mono readouts.
   Bespoke ground-up layout — not a recolored template.
   ========================================================================== */

:root{
  --char: #1b1a17;        /* charcoal chassis */
  --graphite: #2a2825;    /* panel face */
  --graphite-2: #34312c;  /* raised panel */
  --bronze: #b8915a;      /* brushed bronze/tan */
  --bronze-dim: #8a6c40;
  --amber: #ffb02e;       /* warm amber LED */
  --amber-soft: #ffc861;
  --readout: #f0e9dd;     /* off-white readout */
  --readout-dim: #c4baa8;
  --grime: #0f0e0c;       /* deepest shadow */
  --rivet: #6b6255;
  --line: rgba(184,145,90,.28);
  --line-soft: rgba(240,233,221,.10);
  --green-led: #6fcf97;
  --red-led: #ff6b4a;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --head: "Oswald", "Sora", Arial, sans-serif;
  --body: "Sora", "Inter", Arial, sans-serif;
  --maxw: 1180px;
  --panel-grad: linear-gradient(180deg,#34312c 0%, #2a2825 48%, #211f1b 100%);
  --brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,.05) 2px 4px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;
  font-family:var(--body);
  color:var(--readout);
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(255,176,46,.10), transparent 60%),
    radial-gradient(900px 500px at -5% 12%, rgba(184,145,90,.08), transparent 55%),
    var(--char);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.06;letter-spacing:.01em;margin:0}
h1{font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-size:clamp(1.5rem,3vw,2.4rem)}
h3{font-size:1.12rem;font-weight:500}
p{margin:0 0 1rem}

/* ---- mono readout labels (eyebrow / kickers) ---- */
.eyebrow,.accessory-kicker,.hero-livebug,.hero-timestamp{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.66rem;
  color:var(--amber);
  margin:0 0 .9rem;
}
.eyebrow::before{content:"\203A  ";color:var(--bronze)}

/* ---- scroll progress = amber filament ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:120;transform-origin:left;
  background:linear-gradient(90deg,var(--bronze),var(--amber));
  box-shadow:0 0 10px var(--amber);
}

/* ==========================================================================
   HEADER — top rack rail with riveted edge
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.6rem);
  background:linear-gradient(180deg,#242118 0%, rgba(27,26,23,.94) 100%);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,176,46,.12), 0 6px 22px rgba(0,0,0,.5);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.brand-mark{
  font-family:var(--mono);font-weight:700;font-size:.92rem;
  display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;
  color:var(--char);
  background:radial-gradient(circle at 35% 30%, var(--amber-soft), var(--bronze) 70%);
  border-radius:9px;
  border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.4), 0 0 14px rgba(255,176,46,.35);
}
.brand strong{display:block;font-family:var(--head);font-weight:600;font-size:1.04rem;color:var(--readout);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.brand small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}

.nav-toggle{
  display:none;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;
  background:var(--graphite-2);color:var(--readout);
  border:1px solid var(--line);border-radius:8px;padding:.55rem .9rem;cursor:pointer;
}
.site-nav{display:flex;align-items:center;gap:.3rem}
.site-nav a{
  font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  text-decoration:none;color:var(--readout-dim);padding:.45rem .7rem;border-radius:7px;
  transition:color .15s, background .15s;
}
.site-nav a:hover{color:var(--amber);background:rgba(255,176,46,.08)}
.site-nav a[href="#quote"]{
  color:var(--char);background:linear-gradient(180deg,var(--amber-soft),var(--bronze));
  border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.site-nav a[href="#quote"]:hover{filter:brightness(1.08)}

/* ==========================================================================
   HERO — the control deck
   ========================================================================== */
.hero{
  position:relative;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.6rem) clamp(2.4rem,5vw,4rem);
  display:grid;gap:1.6rem;
  grid-template-columns:1.25fr .9fr;
  grid-template-areas:
    "copy accessory"
    "media accessory";
  align-items:start;
}
.hero-livebug,.hero-timestamp{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0;font-size:.62rem;color:var(--readout-dim);
}
.hero-livebug{justify-self:start;grid-row:1;grid-column:1}
.hero-livebug span{
  width:9px;height:9px;border-radius:50%;background:var(--red-led);
  box-shadow:0 0 8px var(--red-led);animation:blink 1.4s infinite steps(1);
}
@keyframes blink{50%{opacity:.25}}
.hero-timestamp{color:var(--bronze);justify-self:end;grid-row:1;grid-column:2}

.hero-copy{grid-area:copy;align-self:center}
.hero-copy h1{margin:.6rem 0 1rem;color:var(--readout);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.hero-copy h1::after{
  content:"";display:block;width:84px;height:4px;margin-top:1rem;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),transparent);box-shadow:0 0 12px rgba(255,176,46,.5);
}
.lede{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--readout-dim);max-width:40ch}

/* hero ticker = VU-meter scrolling readout */
.hero-ticker{
  overflow:hidden;margin:1.3rem 0;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(180deg,#16150f,#0f0e0a);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);padding:.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero-ticker-track{display:inline-flex;align-items:center;white-space:nowrap;animation:slide 26s linear infinite;font-family:var(--mono)}
.hero-ticker-track span{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--readout-dim);padding:0 .9rem}
.hero-ticker-track span.hot{color:var(--amber);text-shadow:0 0 8px rgba(255,176,46,.4)}
.hero-ticker-track i{width:6px;height:6px;border-radius:50%;background:var(--bronze-dim)}
@keyframes slide{to{transform:translateX(-50%)}}

.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.hero-note{font-family:var(--mono);font-size:.66rem;color:var(--rivet);letter-spacing:.06em;margin-top:1.1rem;line-height:1.5}

/* ---- BUTTONS — beveled amber/bronze hardware ---- */
.button,.button-ghost{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;text-decoration:none;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:500;
  padding:.85rem 1.3rem;border-radius:9px;transition:transform .1s, filter .15s, box-shadow .15s;
}
.button{
  color:var(--char);
  background:linear-gradient(180deg,var(--amber-soft) 0%, var(--amber) 55%, var(--bronze) 100%);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.28), 0 4px 14px rgba(255,176,46,.28);
}
.button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.button:active{transform:translateY(1px)}
.button-ghost{
  color:var(--readout);background:linear-gradient(180deg,#34312c,#211f1b);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.button-ghost:hover{border-color:var(--amber);color:var(--amber)}

/* ---- HERO ACCESSORY = the gauge / dial panel ---- */
.hero-accessory{
  grid-area:accessory;align-self:stretch;
  background:var(--panel-grad);
  position:relative;
  border:1px solid var(--line);border-radius:14px;
  padding:1.4rem 1.4rem 1.5rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.5);
}
.hero-accessory::before{
  content:"";position:absolute;inset:0;border-radius:14px;background:var(--brushed);opacity:.5;pointer-events:none;
}
.accessory-kicker{position:relative}
/* gauge dials */
.dial-row{display:flex;gap:1rem;justify-content:space-between;margin:.4rem 0 1.1rem;position:relative}
.dial-row span{
  flex:1;aspect-ratio:1;border-radius:50%;position:relative;
  background:conic-gradient(from 220deg, var(--amber) 0deg, var(--bronze) 95deg, #1a1813 95deg, #1a1813 360deg);
  box-shadow:inset 0 0 0 4px #1a1813, inset 0 0 14px rgba(0,0,0,.7), 0 0 10px rgba(255,176,46,.18);
}
.dial-row span::after{
  content:"";position:absolute;inset:30%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4a463e, #1c1a16);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18);
}
.dial-row span:nth-child(2){background:conic-gradient(from 220deg, var(--amber) 0deg, var(--bronze) 160deg, #1a1813 160deg, #1a1813 360deg)}
.dial-row span:nth-child(3){background:conic-gradient(from 220deg, var(--amber) 0deg, var(--bronze) 230deg, #1a1813 230deg, #1a1813 360deg)}
.hero-accessory h3{position:relative;color:var(--readout);font-family:var(--head);font-weight:500;margin-bottom:1rem;font-size:1.06rem}
.accessory-row{
  position:relative;display:flex;align-items:center;gap:.8rem;
  padding:.55rem 0;border-top:1px solid var(--line-soft);font-family:var(--mono);
}
.accessory-row span{
  font-size:.64rem;color:var(--char);background:var(--amber);border-radius:4px;
  padding:.15rem .4rem;letter-spacing:.05em;box-shadow:0 0 8px rgba(255,176,46,.4);
}
.accessory-row strong{font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--readout)}
.hero-accessory>a{
  position:relative;display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--amber);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:2px;
}
.hero-accessory>a:hover{color:var(--amber-soft)}

/* ---- HERO MEDIA ---- */
.hero-media{grid-area:media;position:relative;margin:0;border-radius:14px;overflow:hidden;
  min-height:18rem;border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.55)}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.02)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,14,12,.85));pointer-events:none}
.hero-artifact{
  position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--char);
  background:var(--amber);padding:.25rem .55rem;border-radius:5px;box-shadow:0 0 12px rgba(255,176,46,.45);
}
.hero-media figcaption{
  position:absolute;left:14px;bottom:12px;right:14px;z-index:2;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;color:var(--readout-dim);
}

/* ==========================================================================
   SECTION SCAFFOLD
   ========================================================================== */
main>section{max-width:var(--maxw);margin:0 auto;padding:clamp(2.4rem,5vw,4.2rem) clamp(1rem,4vw,2.6rem)}
main>section>h2{margin-bottom:.4rem}

/* ---- BESPOKE CONTROL (intro deck) ---- */
.bespoke-control{
  display:grid;gap:1.6rem;grid-template-columns:1.1fr .9fr;align-items:center;
}
.bespoke-control>div:first-child h2{margin:.4rem 0 .8rem}
.bespoke-control>div:first-child p{color:var(--readout-dim);max-width:46ch}
.bespoke-link{
  display:inline-block;margin-top:.4rem;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--char);background:linear-gradient(180deg,var(--amber-soft),var(--bronze));
  padding:.7rem 1.1rem;border-radius:9px;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px rgba(255,176,46,.25);
}
.bespoke-link:hover{filter:brightness(1.08)}
.control-console{
  background:var(--panel-grad);border:1px solid var(--line);border-radius:14px;padding:1.5rem;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 38px rgba(0,0,0,.45);
}
.control-console::before{content:"";position:absolute;inset:0;border-radius:14px;background:var(--brushed);opacity:.5;pointer-events:none}
.artifact-list{list-style:none;margin:0;padding:0;counter-reset:seq;position:relative;display:grid;gap:.7rem}
.artifact-list li{
  display:flex;align-items:center;gap:.9rem;counter-increment:seq;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--readout);
  padding:.7rem .9rem;border:1px solid var(--line-soft);border-radius:9px;
  background:linear-gradient(180deg,#2c2924,#211f1b);
}
.artifact-list li::before{
  content:counter(seq,decimal-leading-zero);color:var(--char);background:var(--amber);
  font-size:.66rem;padding:.25rem .45rem;border-radius:5px;box-shadow:0 0 8px rgba(255,176,46,.35);
}
.artifact-list li::after{
  content:"";margin-left:auto;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--green-led), #1f6f43);box-shadow:0 0 8px var(--green-led);
}

/* ---- PROOF SUITE (control cards) ---- */
.proof-suite h2{margin:.3rem 0 1.6rem;max-width:24ch}
.proof-card-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
.proof-card{
  position:relative;background:var(--panel-grad);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem 1.4rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 32px rgba(0,0,0,.4);
  transition:transform .15s, border-color .15s;
}
.proof-card:hover{transform:translateY(-3px);border-color:var(--amber)}
.proof-card>span{
  display:block;width:38px;height:38px;border-radius:9px;margin-bottom:1rem;
  background:conic-gradient(from 200deg, var(--amber), var(--bronze) 70%, #1a1813 70%);
  box-shadow:inset 0 0 0 3px #1a1813, 0 0 12px rgba(255,176,46,.25);
}
.proof-card h3{color:var(--readout);font-family:var(--head);font-weight:500;margin-bottom:.5rem}
.proof-card p{color:var(--readout-dim);margin:0;font-size:.95rem}

/* ---- BESPOKE FLOW (set->heat->press->peel sequence) ---- */
.bespoke-flow>div>p{color:var(--readout-dim);max-width:50ch;margin-bottom:1.8rem}
.flow-steps{display:grid;gap:1.1rem;grid-template-columns:repeat(4,1fr)}
.flow-steps article{
  position:relative;padding:1.5rem 1.1rem 1.3rem;border:1px solid var(--line);border-radius:13px;
  background:linear-gradient(180deg,#2c2924,#1e1c18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* indicator LED above each step */
.flow-steps article::before{
  content:"";position:absolute;top:-7px;left:1.3rem;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--amber-soft), var(--bronze));
  box-shadow:0 0 12px var(--amber), inset 0 1px 1px rgba(255,255,255,.5);
}
.flow-steps article span{
  font-family:var(--mono);font-size:1.7rem;font-weight:700;color:var(--bronze);display:block;margin-bottom:.5rem;
}
.flow-steps article h3{font-family:var(--head);font-weight:500;color:var(--readout);font-size:1rem;margin-bottom:.45rem;line-height:1.2}
.flow-steps article p{color:var(--readout-dim);font-size:.86rem;margin:0}

/* ---- GALLERY ---- */
.bespoke-gallery h2{margin:.3rem 0 1.6rem;max-width:26ch}
.photo-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-top:1.25rem}
.photo-grid figure{
  margin:0;position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.photo-grid img{width:100%;height:240px;object-fit:cover;filter:saturate(1.02);transition:transform .35s}
.photo-grid figure:hover img{transform:scale(1.05)}
.photo-grid figcaption{
  position:absolute;left:10px;right:10px;bottom:10px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--readout);
  background:rgba(15,14,12,.78);backdrop-filter:blur(3px);
  padding:.4rem .6rem;border-radius:7px;border:1px solid var(--line-soft);
}

/* ---- INTENT RIBBON = toggle-switch chips ---- */
.intent-ribbon{
  max-width:var(--maxw);margin:0 auto;padding:1.4rem clamp(1rem,4vw,2.6rem)!important;
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
}
.intent-ribbon span{
  position:relative;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--readout-dim);
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem .9rem .5rem .65rem;border:1px solid var(--line);border-radius:30px;
  background:linear-gradient(180deg,#2c2924,#211f1b);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.intent-ribbon span::before{
  content:"";width:24px;height:13px;border-radius:8px;background:#16150f;border:1px solid var(--line);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.intent-ribbon span::after{
  content:"";position:absolute;left:.7rem;width:11px;height:11px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 8px var(--amber);
}

/* ---- HOME FAQ ---- */
.home-faq h2{margin:.3rem 0 1.4rem}
.faq-list{display:grid;gap:.8rem;max-width:900px}
.faq-list details{
  border:1px solid var(--line);border-radius:12px;background:var(--panel-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;
}
.faq-list summary{
  cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-family:var(--head);font-weight:500;
  color:var(--readout);font-size:1.04rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";font-family:var(--mono);color:var(--amber);font-size:1.3rem;line-height:1;transition:transform .2s;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq-list p{padding:0 1.3rem 1.2rem;margin:1rem 0 0;color:var(--readout-dim);font-size:.95rem}

/* ==========================================================================
   QUOTE BAND + LEAD FORM — the readout console
   ========================================================================== */
.quote-band{
  display:grid;gap:1.8rem;grid-template-columns:.9fr 1.1fr;align-items:start;
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(255,176,46,.10), transparent 60%),
    linear-gradient(180deg,#211f1b, #16150f);
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.6rem,4vw,2.8rem)!important;
  margin:1rem auto 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 22px 50px rgba(0,0,0,.5);
}
.quote-band>div h2{margin:.4rem 0 .8rem;color:var(--readout)}
.quote-band>div p{color:var(--readout-dim);max-width:42ch}

.lead-form{display:grid;gap:.9rem;position:relative}
.field-grid{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
.lead-form label{
  display:flex;flex-direction:column;gap:.4rem;
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--bronze);
}
.lead-form input,.lead-form textarea{
  font-family:var(--body);font-size:.95rem;color:var(--readout);width:100%;
  background:#13120e;
  border:1px solid var(--line);border-radius:9px;padding:.7rem .8rem;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
  transition:border-color .15s, box-shadow .15s;
}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--rivet)}
.lead-form input:focus,.lead-form textarea:focus{
  outline:none;border-color:var(--amber);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), 0 0 0 3px rgba(255,176,46,.18);
}
.lead-form input[type="date"]{color-scheme:dark}
.lead-form textarea{resize:vertical;min-height:108px}
.hp-wrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit{
  margin-top:.3rem;cursor:pointer;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;font-weight:500;color:var(--char);
  background:linear-gradient(180deg,var(--amber-soft) 0%, var(--amber) 55%, var(--bronze) 100%);
  border:1px solid rgba(0,0,0,.35);border-radius:10px;padding:.95rem 1.3rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.25), 0 4px 16px rgba(255,176,46,.3);
  transition:filter .15s, transform .1s;
}
.form-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.form-submit:active{transform:translateY(1px)}
.form-note{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--rivet);margin:.2rem 0 0;line-height:1.5}

/* ==========================================================================
   SUBPAGE GENERIC: card-grid / cards / product-strip / trust-bar / content
   ========================================================================== */
.card-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:1.4rem}
.card{
  background:var(--panel-grad);border:1px solid var(--line);border-radius:13px;padding:1.4rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.4);
  transition:transform .15s, border-color .15s;
}
.card:hover{transform:translateY(-3px);border-color:var(--amber)}
.card h3{color:var(--readout);font-family:var(--head);font-weight:500;margin-bottom:.5rem}
.card p{color:var(--readout-dim);font-size:.95rem;margin:0 0 .6rem}
.card a{color:var(--amber);text-decoration:none;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.card a:hover{color:var(--amber-soft)}

.product-strip{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem;list-style:none;padding:0}
.product-strip span,.product-strip li,.product-strip figure{
  list-style:none;margin:0;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--readout-dim);
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#2c2924,#211f1b);
}

.trust-bar{max-width:var(--maxw);margin:0 auto;padding:1.6rem clamp(1rem,4vw,2.6rem);text-align:center}
.trust-bar .eyebrow{margin-bottom:1rem}
.trust-logos{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;justify-content:center;align-items:center}
.trust-logos span{
  font-family:var(--head);font-weight:500;font-size:1.02rem;letter-spacing:.04em;color:var(--readout-dim);
  opacity:.78;transition:opacity .15s,color .15s;
}
.trust-logos span:hover{opacity:1;color:var(--amber)}

/* article / answer body on deeper subpages */
.answer,.article-body{max-width:860px}
.article-body p,.answer p{font-size:1.05rem;line-height:1.7;color:var(--readout-dim)}
.article-body h2,.answer h2{margin:1.8rem 0 .6rem;color:var(--readout)}

/* ==========================================================================
   FOOTER — base chassis plate
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#16150f,#100f0c);
  margin-top:2rem;padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,2.6rem);
  display:grid;gap:1.4rem;
}
.site-footer>div{max-width:var(--maxw);margin:0 auto;width:100%}
.site-footer nav{max-width:var(--maxw);margin:0 auto;width:100%}
.site-footer strong{font-family:var(--head);font-weight:600;font-size:1.1rem;color:var(--readout);display:block;margin-bottom:.5rem}
.site-footer p{color:var(--readout-dim);font-size:.9rem;max-width:60ch;margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.site-footer nav a{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--readout-dim);text-decoration:none;transition:color .15s;
}
.site-footer nav a:hover{color:var(--amber)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:920px){
  .hero{grid-template-columns:1fr;grid-template-areas:"copy" "accessory" "media"}
  .hero-livebug{grid-row:auto;grid-column:auto}
  .hero-timestamp{grid-row:auto;grid-column:auto;justify-self:start}
  .proof-card-grid{grid-template-columns:1fr 1fr}
  .flow-steps{grid-template-columns:1fr 1fr}
  .photo-grid{grid-template-columns:1fr 1fr}
  .bespoke-control,.quote-band{grid-template-columns:1fr}
}
@media (max-width:680px){
  .nav-toggle{display:block}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.3rem;
    padding:1rem clamp(1rem,4vw,2.6rem);background:#1d1b16;border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.6);
  }
  .site-nav.is-open{display:flex}
  .site-nav a{padding:.7rem .8rem}
  .proof-card-grid,.flow-steps,.photo-grid,.field-grid{grid-template-columns:1fr}
  .photo-grid img{height:220px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .button,.button-ghost{justify-content:center}
  .brand strong{max-width:48vw}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
}