/* =====================================================================
   HOW TO BUY PAGE STYLES (/how-to-buy/)
   Page-specific styles, built on the shared flasher-v2.css design system
   and tokens. Load AFTER flasher-v2.css.
   ===================================================================== */

/* ---- intro ---- */
.htb-intro{background:var(--black);padding:90px 0 60px;}
.htb-intro__copy{
  font-family:'IBM Plex Mono','Courier New',monospace;font-weight:400;color:#fff;
  font-size:clamp(18px,2vw,26px);line-height:1.5;margin:0 0 22px;max-width:960px;
}
.htb-intro__copy:last-child{margin-bottom:0;}
.htb-intro__copy .hl{color:var(--yellow);}

/* ---- hero subhead: keep the stacked 3-line lockup on this page ---- */
.v2-hero-sub{line-height:1.18;}

/* ---- shared section heading + supporting copy ---- */
.htb-heading{
  font-family:'Inter',sans-serif;font-weight:800;color:#fff;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,36px);line-height:1.15;letter-spacing:-.5px;margin:0 0 26px;max-width:900px;
}
.htb-lede{
  font-family:'IBM Plex Mono','Courier New',monospace;color:#dcdcdc;
  font-size:clamp(15px,1.6vw,18px);line-height:1.55;margin:0 0 40px;max-width:900px;
}
.htb-body{
  font-family:'IBM Plex Mono','Courier New',monospace;color:#dcdcdc;
  font-size:clamp(15px,1.6vw,18px);line-height:1.6;margin:0;max-width:900px;
}
.htb-body a,.htb-lede a{color:var(--yellow);}
.htb-body a:hover,.htb-lede a:hover{color:#fff;}
.htb-note{
  font-family:'IBM Plex Mono','Courier New',monospace;color:var(--yellow);
  font-size:clamp(15px,1.6vw,17px);line-height:1.5;margin:38px 0 0;max-width:900px;
}

/* ---- card grid (ways to buy + why fleets buy from us) ---- */
.htb-ways{background:var(--black);padding:0 0 100px;}
.htb-why{background:var(--black);padding:0 0 100px;}
.htb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.htb-card{
  position:relative;display:flex;gap:20px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);padding:30px;overflow:hidden;
  transition:border-color .25s,transform .25s,background .25s;
}
.htb-card::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
  background:var(--yellow);transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.htb-card:hover{border-color:rgba(255,203,5,.5);transform:translateY(-4px);background:#191b1e;}
.htb-card:hover::before{transform:scaleY(1);}
.htb-card__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:52px;height:52px;color:var(--yellow);
  background:rgba(255,203,5,.1);border:1px solid rgba(255,203,5,.3);border-radius:4px;
}
.htb-card__icon svg{width:26px;height:26px;}
.htb-card__title{
  font-family:'Inter',sans-serif;font-weight:900;color:#fff;text-transform:uppercase;
  font-size:clamp(18px,1.5vw,22px);line-height:1.1;letter-spacing:-.3px;margin:0 0 10px;
}
.htb-card__desc{
  font-family:'IBM Plex Mono','Courier New',monospace;font-weight:400;color:var(--gray);
  font-size:15px;line-height:1.5;margin:0;
}
.htb-card__desc a{color:var(--yellow);}
.htb-card__desc a:hover{color:#fff;}
@media (max-width:860px){.htb-grid{grid-template-columns:1fr;}}

/* ---- who signs off ---- */
.htb-signoff{background:var(--black-2);border-top:1px solid var(--line);padding:90px 0 100px;}
/* This heading is longer than the others, so the shared 900px measure broke it
   over two lines. Give it the full container, and hold it to one line from the
   width where it comfortably fits. */
.htb-signoff .htb-heading{max-width:none;}
@media (min-width:1200px){.htb-signoff .htb-heading{white-space:nowrap;}}
.htb-signoff__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.htb-signoff__item{
  background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--red);
  padding:32px 30px;transition:border-color .25s,transform .25s;
}
.htb-signoff__item:hover{border-color:rgba(255,203,5,.5);border-top-color:var(--red);transform:translateY(-4px);}
.htb-signoff__label{
  font-family:'Inter',sans-serif;font-weight:900;color:var(--yellow);text-transform:uppercase;
  font-size:clamp(17px,1.6vw,21px);line-height:1.1;letter-spacing:-.3px;margin:0 0 14px;
}
.htb-signoff__desc{
  font-family:'IBM Plex Mono','Courier New',monospace;color:#dcdcdc;
  font-size:15px;line-height:1.55;margin:0;
}
@media (max-width:900px){.htb-signoff__grid{grid-template-columns:1fr;}}

/* ---- funding timelines ---- */
.htb-funding{background:var(--black);padding:90px 0 100px;}
.htb-funding__chips{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 40px;}
.htb-chip{
  flex:1 1 220px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--yellow);
  padding:22px 24px;transition:border-color .25s,transform .25s;
}
.htb-chip:hover{transform:translateY(-4px);border-color:rgba(255,203,5,.5);border-left-color:var(--yellow);}
.htb-chip__figure{
  display:block;font-family:'Inter',sans-serif;font-weight:900;color:#fff;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,28px);line-height:1.05;letter-spacing:-.5px;margin:0 0 8px;
}
.htb-chip__label{
  display:block;font-family:'IBM Plex Mono','Courier New',monospace;color:var(--gray-dim);
  text-transform:uppercase;letter-spacing:1.6px;font-size:12px;line-height:1.4;
}

/* ---- pull quote ---- */
.htb-quote{background:var(--black-2);border-top:1px solid var(--line);padding:90px 0;}
.htb-quote__inner{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;}
.htb-quote__figure{margin:0;border-left:4px solid var(--red);padding:6px 0 6px 32px;}
.htb-quote__text{margin:0;}
.htb-quote__text p{
  font-family:'Inter',sans-serif;font-weight:800;color:#fff;
  font-size:clamp(21px,2.5vw,32px);line-height:1.28;letter-spacing:-.5px;margin:0;
}
.htb-quote__text p::before{content:"\201C";}
.htb-quote__text p::after{content:"\201D";}
.htb-quote__cite{display:flex;flex-direction:column;gap:4px;margin:26px 0 0;}
.htb-quote__author{
  font-family:'Inter',sans-serif;font-weight:900;color:var(--yellow);text-transform:uppercase;
  font-size:15px;letter-spacing:1.5px;width:max-content;
}
a.htb-quote__author{border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
a.htb-quote__author:hover{color:#fff;border-bottom-color:#fff;}
.htb-quote__role{
  font-family:'IBM Plex Mono','Courier New',monospace;color:var(--gray-dim);
  text-transform:uppercase;letter-spacing:2px;font-size:12px;
}
.htb-quote__media{position:relative;overflow:hidden;border:1px solid var(--line);}
.htb-quote__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
@media (max-width:900px){
  .htb-quote__inner{grid-template-columns:1fr;gap:32px;}
  .htb-quote__figure{padding-left:22px;}
}

/* ---- what to have ready ---- */
.htb-ready{background:var(--black);padding:90px 0 100px;}
.htb-ready__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none;}
.htb-ready__item{
  display:flex;flex-direction:column;gap:14px;
  background:var(--panel);border:1px solid var(--line);padding:30px;
  transition:border-color .25s,transform .25s;
}
.htb-ready__item:hover{border-color:rgba(255,203,5,.5);transform:translateY(-4px);}
.htb-ready__num{
  font-family:'Inter',sans-serif;font-weight:900;color:var(--yellow);
  font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:-1px;
}
.htb-ready__text{
  font-family:'IBM Plex Mono','Courier New',monospace;color:#fff;
  font-size:15px;line-height:1.5;
}
@media (max-width:900px){.htb-ready__list{grid-template-columns:1fr;}}

/* ---- related links ---- */
.htb-related{background:var(--black-2);border-top:1px solid var(--line);padding:80px 0 90px;}
.htb-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.htb-related__item{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--panel);border:1px solid var(--line);padding:26px 26px 44px;
  transition:border-color .25s,transform .25s,background .25s;
}
.htb-related__item:hover{border-color:var(--yellow);transform:translateY(-4px);background:#191b1e;}
.htb-related__label{
  font-family:'Inter',sans-serif;font-weight:900;color:#fff;text-transform:uppercase;
  font-size:16px;line-height:1.15;letter-spacing:-.2px;
}
.htb-related__desc{
  font-family:'IBM Plex Mono','Courier New',monospace;color:var(--gray-dim);
  font-size:13.5px;line-height:1.45;
}
.htb-related__arrow{position:absolute;right:22px;bottom:18px;color:var(--yellow);font-size:18px;line-height:1;}
@media (max-width:1000px){.htb-related__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.htb-related__grid{grid-template-columns:1fr;}}

/* ---- CTA + quote form ---- */
.htb-form-sec{position:relative;background-color:#000;padding:70px 24px 100px;}
.htb-form-card{
  background:#fff;color:#000;width:100%;max-width:880px;margin:0 auto;
  padding:clamp(34px,5vw,60px) clamp(24px,4vw,56px);
}
.htb-form-card__title{
  font-family:'Inter',sans-serif;font-weight:900;color:#000;text-transform:uppercase;
  font-size:clamp(26px,3vw,40px);line-height:1.05;letter-spacing:-1px;margin:0 0 14px;
}
.htb-form-card__intro{
  font-family:'IBM Plex Mono','Courier New',monospace;color:#222;
  font-size:clamp(15px,1.5vw,17px);line-height:1.5;margin:0 0 30px;
}
.htb-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.htb-field{margin-bottom:22px;}
.htb-field.full{grid-column:1 / -1;}
.htb-field label{
  display:block;font-family:'IBM Plex Mono','Courier New',monospace;text-transform:uppercase;
  letter-spacing:1px;font-size:14px;color:#000;margin-bottom:8px;
}
.htb-field input,.htb-field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid #000;color:#000;
  padding:9px 2px;font-family:'IBM Plex Mono','Courier New',monospace;font-size:15px;transition:border-color .2s;
}
.htb-field input:focus,.htb-field textarea:focus{outline:none;border-bottom-width:2px;}
.htb-field input::placeholder{color:#8a8a8a;}
.htb-field textarea{min-height:130px;resize:vertical;}
.htb-field__hint{
  display:block;font-family:'IBM Plex Mono','Courier New',monospace;color:#666;
  font-size:12px;margin-top:6px;letter-spacing:.2px;text-transform:none;
}
.htb-form__submit{text-align:center;margin-top:18px;}
.htb-submit{
  background:#000;border:1px solid #000;color:#fff;cursor:pointer;border-radius:0;padding:16px 56px;
  font-family:'IBM Plex Mono','Courier New',monospace;letter-spacing:2px;text-transform:uppercase;
  font-size:14px;transition:.2s;
}
.htb-submit:hover{background:var(--red);border-color:var(--red);}
.htb-submit:disabled{opacity:.6;cursor:default;}
.htb-form__error{
  text-align:center;margin:0 0 16px;color:var(--red-dark);font-weight:600;
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:14px;
}
@media (max-width:680px){.htb-form .frow{grid-template-columns:1fr;}}

/* ---- success state (swapped in after a successful AJAX submit) ---- */
.htb-form-card__success{text-align:center;padding:20px 0;}
.htb-form-card__success-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;color:#0a7d32;background:rgba(10,125,50,.1);
  border:1px solid rgba(10,125,50,.35);border-radius:50%;margin:0 0 22px;
}
.htb-form-card__success-icon svg{width:32px;height:32px;}
.htb-form-card__success-title{
  font-family:'Inter',sans-serif;font-weight:900;color:#000;text-transform:uppercase;
  font-size:clamp(24px,2.8vw,34px);line-height:1.1;letter-spacing:-.5px;margin:0 0 14px;
}
.htb-form-card__success-copy{
  font-family:'IBM Plex Mono','Courier New',monospace;color:#333;
  font-size:clamp(15px,1.5vw,17px);line-height:1.5;margin:0 auto;max-width:520px;
}

/* ---- direct contact info (both shops) ---- */
.htb-contact{background:var(--black-2);border-top:1px solid var(--line);padding:90px 0 110px;}
.htb-contact__head{text-align:center;margin:0 0 48px;}
.htb-contact__title{
  font-family:'Inter',sans-serif;font-weight:900;color:#fff;text-transform:uppercase;
  font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-1px;margin:0;
}
.htb-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.htb-loc{
  background:var(--panel);border:1px solid var(--line);padding:36px 34px;
  transition:border-color .25s,transform .25s;
}
.htb-loc:hover{border-color:rgba(255,203,5,.5);transform:translateY(-4px);}
.htb-loc__state{
  font-family:'IBM Plex Mono','Courier New',monospace;text-transform:uppercase;
  color:var(--yellow);letter-spacing:3px;font-size:13px;margin:0 0 6px;
}
.htb-loc__city{
  font-family:'Inter',sans-serif;font-weight:900;color:#fff;text-transform:uppercase;
  font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.5px;margin:0 0 20px;
}
.htb-loc__row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);}
.htb-loc__row svg{width:20px;height:20px;color:var(--yellow);flex:none;margin-top:2px;}
.htb-loc__row a{
  font-family:'IBM Plex Mono','Courier New',monospace;color:#dcdcdc;
  font-size:16px;line-height:1.4;
}
.htb-loc__row a:hover{color:var(--yellow);}
@media (max-width:760px){.htb-contact__grid{grid-template-columns:1fr;}}