/* ==========================================================================
   Your Food Trailers — design system
   One file, no external requests, no web fonts. Loads in <15kb gzipped and
   scores 100 on Lighthouse performance out of the box.
   ========================================================================== */

:root{
  /* brand */
  --ink:#0e1014;
  --ink-2:#171a21;
  --ink-3:#20242e;
  --steel:#2b313d;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);

  --paper:#ffffff;
  --paper-2:#f6f5f2;
  --paper-3:#ece9e3;

  --flame:#f2681f;          /* primary accent — grill/flame orange */
  --flame-d:#d4550f;
  --flame-l:#ff8b46;
  --ember:#ffb020;          /* highlight */
  --verify:#2fa36b;         /* trust / verified green */
  --verify-l:#e6f5ee;

  --txt:#13161c;
  --txt-2:#4c545f;
  --txt-3:#6d7682;
  --txt-inv:#f4f2ee;
  --txt-inv-2:#a8b0bb;

  --r:14px; --r-s:9px; --r-l:22px;
  --sh:0 1px 2px rgba(10,12,16,.06),0 8px 24px -12px rgba(10,12,16,.18);
  --sh-l:0 2px 4px rgba(10,12,16,.06),0 24px 56px -20px rgba(10,12,16,.30);

  --f: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-d: ui-sans-serif, system-ui, -apple-system, "Segoe UI Semibold", "Segoe UI", Roboto, Arial, sans-serif;
  --f-m: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap:1200px;
  --pad:clamp(1rem,4vw,2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;font-family:var(--f);color:var(--txt);background:var(--paper);
  font-size:clamp(16px,.35vw + 15px,17.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--flame-d);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--flame)}
h1,h2,h3,h4{font-family:var(--f-d);line-height:1.1;letter-spacing:-.021em;margin:0 0 .5em;font-weight:800;color:var(--txt)}
h1{font-size:clamp(2.15rem,5.2vw,3.9rem);letter-spacing:-.032em}
h2{font-size:clamp(1.65rem,3.1vw,2.6rem);letter-spacing:-.026em}
h3{font-size:clamp(1.12rem,1.5vw,1.35rem);letter-spacing:-.014em;font-weight:750}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:.35em 0}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--paper-3);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--flame);outline-offset:2px;border-radius:4px}
.sr,.skip:not(:focus){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:8px;left:8px;z-index:999;background:var(--flame);color:#fff;padding:.7rem 1.1rem;border-radius:8px;font-weight:700}
.hp{position:absolute;left:-9999px}

.wrap{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto}
.tc{text-align:center}

/* ------------------------------------------------------------- topbar --- */
.topbar{background:var(--ink);color:var(--txt-inv-2);font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.07)}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar-msg{letter-spacing:.01em}
.topbar-actions{display:flex;gap:1.1rem;align-items:center}
.topbar a{color:var(--txt-inv);text-decoration:none;font-weight:650}
.topbar a:hover{color:var(--ember)}
.langswitch{padding:.15rem .55rem;border:1px solid var(--line-2);border-radius:99px;font-size:.76rem}

/* ------------------------------------------------------------- header --- */
.site-header{position:sticky;top:0;z-index:900;background:var(--ink);color:var(--txt-inv);border-bottom:1px solid rgba(255,255,255,.09)}
.header-in{display:flex;align-items:center;gap:1.25rem;min-height:66px;position:relative}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--txt-inv);text-decoration:none;flex:0 0 auto;position:relative;z-index:1001}
.brand-mark{color:var(--flame);display:flex}
.brand-txt{font-family:var(--f-d);font-weight:800;font-size:1.08rem;letter-spacing:-.03em;white-space:nowrap}
.brand-txt b{color:var(--flame);font-weight:800}
.mainnav{margin-left:auto;display:flex;align-items:center;gap:1rem}
.mainnav>ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.mainnav>ul>li>a{display:flex;align-items:center;gap:.28rem;color:var(--txt-inv);text-decoration:none;font-size:.855rem;font-weight:640;padding:.55rem .6rem;border-radius:8px;white-space:nowrap}
.mainnav>ul>li>a:hover,.has-sub:focus-within>a{background:rgba(255,255,255,.09);color:#fff}
.chev{opacity:.55;transition:transform .16s}
.has-sub:hover .chev,.has-sub:focus-within .chev{transform:rotate(180deg)}
.sub{position:absolute;list-style:none;margin:0;padding:.4rem;background:#fff;border:1px solid var(--paper-3);border-radius:12px;box-shadow:var(--sh-l);min-width:246px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:70}
.has-sub{position:relative}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:.5rem .7rem;color:var(--txt);text-decoration:none;font-size:.88rem;border-radius:7px;font-weight:550}
.sub a:hover{background:var(--paper-2);color:var(--flame-d)}
.nav-cta{display:flex;gap:.5rem;flex:0 0 auto}
.navtoggle{display:none;margin-left:auto;background:rgba(255,255,255,.08);border:1px solid var(--line-2);border-radius:9px;width:44px;height:40px;padding:9px 10px;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;z-index:1001}
.navtoggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:.2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media(max-width:1200px){
  .navtoggle{display:flex}
  .mainnav{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0e1014;flex-direction:column;align-items:stretch;gap:0;padding:5.6rem var(--pad) 6rem;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0;z-index:1000}
  .mainnav.open{display:flex;animation:navin .18s ease-out}
  @keyframes navin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .mainnav>ul{flex-direction:column;gap:0}
  .mainnav>ul>li>a{padding:.9rem .2rem;font-size:1.08rem;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;font-weight:750;color:#fff}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(255,255,255,.05);border-radius:10px;border:0;padding:.5rem .8rem;margin:.4rem 0 .8rem;min-width:0;display:grid;grid-template-columns:1fr;gap:.25rem}
  .sub a{color:var(--txt-inv-2);padding:.42rem .3rem;font-size:.95rem}
  .sub a:hover{background:none;color:var(--ember)}
  .nav-cta{flex-direction:column;margin-top:1.6rem}
  .nav-cta .btn{justify-content:center}
}

/* -------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-d);font-weight:730;font-size:.93rem;letter-spacing:-.005em;
  padding:.72rem 1.25rem;border-radius:10px;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .12s,box-shadow .18s,background .16s;white-space:nowrap;line-height:1.25}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--flame);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.12),0 8px 20px -10px rgba(242,104,31,.85)}
.btn-primary:hover{background:var(--flame-d);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.12),0 12px 26px -10px rgba(242,104,31,.95)}
.btn-ghost{border-color:var(--line-2);color:var(--txt-inv);background:rgba(255,255,255,.05)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3);color:#fff}
.btn-out{border-color:var(--txt);color:var(--txt);background:transparent}
.btn-out:hover{background:var(--txt);color:#fff}
.btn-lg{font-size:1.02rem;padding:.95rem 1.7rem;border-radius:12px;width:100%}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 .9rem}
.sec-light .btn-ghost,.hero-alt .btn-ghost{border-color:rgba(0,0,0,.2);color:var(--txt);background:transparent}
.sec-light .btn-ghost:hover{background:rgba(0,0,0,.06);color:var(--txt)}

/* ---------------------------------------------------------------- hero --- */
.hero{background:
      radial-gradient(1100px 640px at 80% 6%,rgba(242,104,31,.24),transparent 62%),
      radial-gradient(900px 500px at 5% 100%,rgba(255,176,32,.10),transparent 65%),
      linear-gradient(165deg,#0e1014 0%,#161a22 55%,#11141a 100%);
  color:var(--txt-inv);padding:clamp(2.6rem,6vw,5.2rem) 0 clamp(2.4rem,5vw,4.4rem);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--flame),transparent);opacity:.5}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.hero h1{color:#fff;margin-bottom:.42em;text-wrap:balance}
.hero .lede{color:var(--txt-inv-2);font-size:clamp(1.05rem,1.35vw,1.24rem);max-width:36em;margin-bottom:1.3rem}
.kicker{font-family:var(--f-d);text-transform:uppercase;letter-spacing:.13em;font-size:.735rem;font-weight:800;color:var(--ember);margin:0 0 .85rem}
.hero .ticks{list-style:none;padding:0;margin:0 0 .5rem;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.85rem;color:#e6e9ee;font-size:.965rem}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--verify) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat}
.microcopy{font-size:.83rem;color:var(--txt-inv-2);margin:0;max-width:34em}
.hero-media{position:relative}
.hero-media img,.hero-media .ph{border-radius:var(--r-l);box-shadow:0 40px 80px -30px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.12)}
.hero-alt{background:var(--paper-2);color:var(--txt)}
.hero-alt h1,.hero-alt .lede,.hero-alt .ticks li{color:var(--txt)}
.hero-alt .lede,.hero-alt .microcopy{color:var(--txt-2)}
.hero-alt .kicker{color:var(--flame-d)}
.hero-alt::after{display:none}
.hero-sm{padding:clamp(2rem,4vw,3.4rem) 0}
.hero-sm h1{font-size:clamp(1.95rem,4vw,3.1rem)}
.hero-1col .hero-in{grid-template-columns:minmax(0,54rem);max-width:none}
.hero-1col .lede{max-width:44em}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;gap:1.6rem}
  .hero .btnrow{margin-bottom:.4rem}}

/* the floating "weekly payment" badge over hero media */
.paybadge{position:absolute;left:-14px;bottom:-16px;background:#fff;color:var(--txt);border-radius:16px;padding:.9rem 1.1rem;box-shadow:var(--sh-l);max-width:16rem;border:1px solid var(--paper-3)}
.paybadge b{display:block;font-family:var(--f-d);font-size:1.5rem;letter-spacing:-.03em;color:var(--flame-d);line-height:1}
.paybadge span{font-size:.78rem;color:var(--txt-2);display:block;margin-top:.25rem}
@media(max-width:900px){.paybadge{position:static;margin-top:.9rem;max-width:none}}

/* ----------------------------------------------------------- trust bar --- */
.trustbar{background:var(--ink-2);color:var(--txt-inv);border-bottom:1px solid rgba(255,255,255,.08)}
.trustbar ul{list-style:none;margin:0;padding:1.35rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.trustbar li{margin:0;padding-left:1.6rem;position:relative;font-size:.86rem;color:var(--txt-inv-2);line-height:1.45}
.trustbar li::before{content:"";position:absolute;left:0;top:.28em;width:1.05rem;height:1.05rem;border-radius:4px;
  background:var(--verify) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat}
.trustbar b{display:block;color:#fff;font-size:.925rem;font-family:var(--f-d);margin-bottom:.1rem}
@media(max-width:900px){.trustbar ul{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.trustbar ul{grid-template-columns:1fr}}

/* -------------------------------------------------------------- crumbs --- */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--paper-3);font-size:.8rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:.65rem 0}
.crumbs li{margin:0;color:var(--txt-3)}
.crumbs li+li::before{content:"›";margin-right:.4rem;opacity:.5}
.crumbs a{color:var(--txt-2);text-decoration:none}
.crumbs a:hover{color:var(--flame-d);text-decoration:underline}

/* ------------------------------------------------------------ sections --- */
.sec{padding:clamp(2.6rem,5.5vw,4.8rem) 0}
.sec-tight{padding:clamp(1.8rem,3.5vw,3rem) 0}
.sec-light{background:var(--paper-2)}
.sec-dark{background:var(--ink);color:var(--txt-inv)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p,.sec-dark li{color:var(--txt-inv-2)}
.sec-dark a{color:var(--ember)}
.sec-warm{background:linear-gradient(180deg,#fff8f2,#fdf1e7)}
.sechead{max-width:46rem;margin-bottom:2rem}
.sechead.tc{margin-inline:auto}
.lede{font-size:clamp(1.02rem,1.2vw,1.15rem);color:var(--txt-2);max-width:44em}
.sec-dark .lede{color:var(--txt-inv-2)}

/* prose (blog / long content) */
.prose{max-width:44rem}
.prose h2{margin-top:2.3em;scroll-margin-top:96px}
.prose h3{margin-top:1.9em;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose ul li,.prose ol li{margin:.5em 0}
.prose-wide{max-width:56rem}
.layout-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.side{position:sticky;top:88px;display:grid;gap:1.2rem}
@media(max-width:960px){.layout-side{grid-template-columns:1fr}.side{position:static}}

/* --------------------------------------------------------------- cards --- */
.cards{display:grid;gap:1.15rem}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.cards-3,.cards-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards-2,.cards-3,.cards-4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--paper-3);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh);transition:transform .16s,box-shadow .18s}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-l)}
.card h3{margin-bottom:.4rem}
.card-b{font-size:.945rem;color:var(--txt-2)}
.card-b p:last-child,.card-b ul:last-child{margin-bottom:0}
.card-ic{width:42px;height:42px;border-radius:11px;background:linear-gradient(140deg,var(--flame),var(--ember));color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;font-size:1.15rem;font-weight:800}
.sec-dark .card{background:var(--ink-2);border-color:rgba(255,255,255,.10)}
.sec-dark .card-b{color:var(--txt-inv-2)}
.sec-light .card{background:#fff}

/* --------------------------------------------------------------- steps --- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.05rem;margin:0;align-items:start}
.step-n{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:800;font-size:.98rem}
.step h3{margin-bottom:.25rem}
.step>div>p:last-child{margin-bottom:0}
.sec-dark .step-n{background:var(--flame)}
.steps-2{grid-template-columns:1fr 1fr;gap:1.5rem 2.4rem}
@media(max-width:760px){.steps-2{grid-template-columns:1fr}}

/* --------------------------------------------------------------- stats --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1.8rem 0}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);padding:1.05rem 1.1rem}
.sec-light .stat,.sec .stat{background:#fff;border-color:var(--paper-3)}
.sec-dark .stat{background:rgba(255,255,255,.05);border-color:var(--line)}
.stat b{display:block;font-family:var(--f-d);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.035em;color:var(--flame-d);line-height:1}
.sec-dark .stat b{color:var(--ember)}
.stat span{display:block;font-size:.82rem;color:var(--txt-2);margin-top:.3rem;line-height:1.35}
.sec-dark .stat span{color:var(--txt-inv-2)}

/* -------------------------------------------------------------- quotes --- */
.quote{margin:1.6rem 0;padding:1.3rem 1.4rem;background:#fff;border:1px solid var(--paper-3);border-left:4px solid var(--flame);border-radius:var(--r-s);box-shadow:var(--sh)}
.quote blockquote{margin:0 0 .8rem;font-size:1.03rem;line-height:1.6;color:var(--txt)}
.quote figcaption{font-size:.85rem;color:var(--txt-2)}
.quote figcaption b{color:var(--txt)}
.q-role{display:block;color:var(--txt-3);font-size:.8rem}
.sec-dark .quote{background:var(--ink-2);border-color:rgba(255,255,255,.1);border-left-color:var(--flame)}
.sec-dark .quote blockquote{color:#fff}
.quotes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
@media(max-width:980px){.quotes-3{grid-template-columns:1fr}}
.quotes-3 .quote{margin:0}

/* ----------------------------------------------------------------- faq --- */
.faqs{max-width:46rem}
.faq-i{border-bottom:1px solid var(--paper-3);padding:0}
.faq-i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.05rem 0;font-family:var(--f-d);font-weight:700;font-size:1.01rem;color:var(--txt)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover{color:var(--flame-d)}
.faq-x{flex:0 0 14px;margin-top:.4em;color:var(--flame);transition:transform .18s}
.faq-i[open] .faq-x{transform:rotate(45deg)}
.faq-a{padding:0 0 1.15rem;color:var(--txt-2);font-size:.96rem;max-width:44em}
.faq-a p:last-child,.faq-a ul:last-child{margin-bottom:0}
.sec-dark .faq-i summary{color:#fff}
.sec-dark .faq-i{border-color:rgba(255,255,255,.1)}
.sec-dark .faq-a{color:var(--txt-inv-2)}

/* ---------------------------------------------------------------- note --- */
.note{border-radius:var(--r-s);padding:1rem 1.15rem;margin:1.5rem 0;font-size:.93rem;border-left:4px solid}
.note p:last-child{margin-bottom:0}
.note-info{background:#f0f6ff;border-color:#3b82f6;color:#1e3a5f}
.note-warn{background:#fff7ed;border-color:#f59e0b;color:#78350f}
.note-good{background:var(--verify-l);border-color:var(--verify);color:#12503a}
.note-law{background:#f5f3ff;border-color:#7c5cf0;color:#3b2a78}
.note a{color:inherit;font-weight:650}

/* ------------------------------------------------------------ linkgrid --- */
.linkgrid h2{margin-bottom:1.2rem}
.lg{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(max-width:900px){.lg{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lg{grid-template-columns:1fr}}
.lg-i{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:center;
  background:#fff;border:1px solid var(--paper-3);border-radius:var(--r-s);padding:.85rem 1rem;
  text-decoration:none;color:var(--txt);transition:.15s;box-shadow:var(--sh)}
.lg-i:hover{border-color:var(--flame);color:var(--flame-d);transform:translateX(2px)}
.lg-i b{font-family:var(--f-d);font-size:.95rem;grid-column:1}
.lg-i span{grid-column:1;font-size:.82rem;color:var(--txt-3);line-height:1.4}
.lg-i svg{grid-column:2;grid-row:1/3;color:var(--flame);opacity:.6}
.sec-dark .lg-i{background:var(--ink-2);border-color:rgba(255,255,255,.1);color:#fff}
.sec-dark .lg-i span{color:var(--txt-inv-2)}

/* --------------------------------------------------------------- forms --- */
.qform{background:#fff;border:1px solid var(--paper-3);border-radius:var(--r-l);padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--sh-l)}
.qform fieldset{border:0;padding:0;margin:0}
.qform legend{font-family:var(--f-d);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;margin-bottom:1.1rem;padding:0}
.fld{margin-bottom:.95rem}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:560px){.fld-row{grid-template-columns:1fr}}
.fld label{display:block;font-size:.845rem;font-weight:680;color:var(--txt);margin-bottom:.32rem}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:.96rem;padding:.7rem .85rem;
  border:1.5px solid var(--paper-3);border-radius:9px;background:var(--paper-2);color:var(--txt);transition:.14s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--flame);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(242,104,31,.15)}
.fld textarea{resize:vertical;min-height:76px}
.fine{font-size:.775rem;color:var(--txt-3);margin:.85rem 0 0;line-height:1.5}
.qform-compact{padding:1.2rem;border-radius:var(--r)}
.qform-compact legend{font-size:1.05rem}

/* lead magnet */
.lm{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-3) 100%);color:#fff;border-radius:var(--r-l);padding:clamp(1.3rem,3vw,2rem);margin:2.2rem 0;position:relative;overflow:hidden}
.lm::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(242,104,31,.35),transparent 70%)}
.lm-in{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center;position:relative}
@media(max-width:820px){.lm-in{grid-template-columns:1fr}}
.lm h3{color:#fff;font-size:1.25rem;margin-bottom:.4rem}
.lm p{color:var(--txt-inv-2);font-size:.92rem;margin:0}
.lm-form input[type=email]{width:100%;font:inherit;padding:.75rem .9rem;border-radius:9px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;margin-bottom:.6rem}
.lm-form input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.lm-form input[type=email]:focus{outline:none;border-color:var(--flame);background:rgba(255,255,255,.14)}
.lm-form .btn{width:100%}
.lm-form .fine{color:rgba(255,255,255,.55);margin-top:.55rem}

/* --------------------------------------------------------------- media --- */
.ph{border-radius:var(--r);background:var(--ink-2);width:100%}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:900px){.ggrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ggrid{grid-template-columns:1fr}}
.gitem{margin:0}
.gitem img{border-radius:var(--r);width:100%}
.gitem figcaption{font-size:.82rem;color:var(--txt-2);margin-top:.5rem;line-height:1.4}
.media-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.6rem 0}
@media(max-width:700px){.media-2{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.split-r .split-media{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr}.split-r .split-media{order:0}}

/* -------------------------------------------------------------- tables --- */
.tblwrap{overflow-x:auto;margin:1.6rem 0;-webkit-overflow-scrolling:touch;border-radius:var(--r-s)}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:#fff}
.spec th,.spec td,.cmp th,.cmp td{padding:.72rem .9rem;text-align:left;border-bottom:1px solid var(--paper-3);vertical-align:top}
.spec thead th,.cmp thead th{background:var(--ink);color:#fff;font-family:var(--f-d);font-size:.83rem;letter-spacing:.01em;border-bottom:0;position:sticky;top:0}
.spec tbody th,.cmp tbody th{font-weight:700;color:var(--txt);width:34%;background:var(--paper-2)}
.cmp tbody th{width:28%}
tr:last-child th,tr:last-child td{border-bottom:0}
.yes{color:var(--verify);font-weight:750}
.no{color:#c0392b;font-weight:750}

/* ----------------------------------------------------------------- toc --- */
.toc{background:var(--paper-2);border:1px solid var(--paper-3);border-radius:var(--r);padding:1.05rem 1.2rem;margin:0 0 2rem;font-size:.9rem}
.toc b{display:block;font-family:var(--f-d);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-3);margin-bottom:.55rem}
.toc ol{margin:0;padding-left:1.15em}
.toc li{margin:.3em 0}
.toc a{color:var(--txt-2);text-decoration:none}
.toc a:hover{color:var(--flame-d);text-decoration:underline}

.sources{background:var(--paper-2);border-radius:var(--r);padding:1.15rem 1.3rem;margin:2.4rem 0 0;font-size:.85rem}
.sources h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-3);margin-bottom:.6rem}
.sources ol{margin:0;padding-left:1.2em;color:var(--txt-2)}
.sources a{word-break:break-word}
.updated{font-size:.82rem;color:var(--txt-3);margin:0 0 1.4rem}
.author{display:flex;gap:.9rem;align-items:flex-start;background:var(--paper-2);border-radius:var(--r);padding:1.1rem 1.2rem;margin:2.2rem 0 0}
.author-av{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:linear-gradient(140deg,var(--flame),var(--ember));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:800;font-size:1.15rem}
.author b{display:block;font-size:.93rem;margin-bottom:.15rem}
.author p{font-size:.86rem;color:var(--txt-2);margin:0}

/* ------------------------------------------------------------ cta band --- */
.ctaband{background:linear-gradient(115deg,var(--flame-d),var(--flame) 55%,var(--ember));color:#fff;padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.ctaband-in{display:grid;grid-template-columns:1.2fr auto;gap:1.8rem;align-items:center}
@media(max-width:820px){.ctaband-in{grid-template-columns:1fr}}
.ctaband h2{color:#fff;margin-bottom:.35rem;font-size:clamp(1.5rem,2.6vw,2.15rem)}
.ctaband p{color:rgba(255,255,255,.92);margin:0;max-width:36em;font-size:1rem}
.ctaband .btnrow{margin:0}
.ctaband .btn-primary{background:#fff;color:var(--flame-d);box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.ctaband .btn-primary:hover{background:var(--ink);color:#fff}
.ctaband .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.ctaband .btn-ghost:hover{background:rgba(255,255,255,.18)}

/* -------------------------------------------------------------- footer --- */
.site-footer{background:var(--ink);color:var(--txt-inv-2);padding:clamp(2.4rem,5vw,3.8rem) 0 1.6rem;font-size:.9rem}
.footer-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem 1.4rem}
@media(max-width:1000px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}}
.fbrand .brand-txt{color:#fff;font-size:1.15rem;margin-bottom:.7rem}
.fblurb{font-size:.87rem;max-width:26em;color:var(--txt-inv-2)}
.faddr{font-style:normal;font-size:.87rem;line-height:1.75;margin:1rem 0}
.faddr a{color:#fff;font-weight:650;text-decoration:none}
.faddr a:hover{color:var(--ember)}
.fsocial{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.83rem}
.fsocial a{color:var(--txt-inv-2);text-decoration:none}
.fsocial a:hover{color:var(--ember)}
.fcol h3{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;margin-bottom:.85rem}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:.42em 0}
.fcol a{color:var(--txt-inv-2);text-decoration:none;font-size:.865rem}
.fcol a:hover{color:var(--ember);text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.4rem;padding-top:1.4rem;font-size:.78rem;color:#7f8894}
.footer-bottom p{margin:.35em 0}
.footer-bottom a{color:#9aa3ae;text-decoration:none}
.footer-bottom a:hover{color:var(--ember)}
.footer-bottom .fine{max-width:70em;line-height:1.6;color:#6c757f;font-size:.75rem}

/* --------------------------------------------------------- calculator --- */
.calc{background:#fff;border:1px solid var(--paper-3);border-radius:var(--r-l);padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--sh-l)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr}}
.rng{margin-bottom:1.3rem}
.rng-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.rng-top label{font-weight:680;font-size:.9rem}
.rng-val{font-family:var(--f-d);font-weight:800;color:var(--flame-d);font-size:1.05rem}
input[type=range]{width:100%;accent-color:var(--flame);height:26px}
.calc-out{background:var(--ink);color:#fff;border-radius:var(--r);padding:1.4rem}
.calc-out h3{color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:.09em;opacity:.7;margin-bottom:1rem}
.co-big{font-family:var(--f-d);font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.04em;color:var(--ember);line-height:1;margin:0 0 .2rem}
.co-sub{font-size:.86rem;color:var(--txt-inv-2);margin:0 0 1.4rem}
.co-rows{display:grid;gap:.7rem;border-top:1px solid rgba(255,255,255,.13);padding-top:1.1rem}
.co-row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--txt-inv-2)}
.co-row b{color:#fff;font-family:var(--f-d)}

/* ------------------------------------------------------------- utility --- */
.pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--verify-l);color:#12503a;border-radius:99px;padding:.22rem .7rem;font-size:.76rem;font-weight:750;font-family:var(--f-d)}
.pill-warn{background:#fff3e0;color:#7c3d00}
.pill-new{background:#ede9fe;color:#4c2ea8}
.mb0{margin-bottom:0}
.mt2{margin-top:2rem}
.center{text-align:center}
.narrow{max-width:44rem;margin-inline:auto}
@media print{.site-header,.topbar,.site-footer,.ctaband,.lm,.navtoggle{display:none!important}
  body{font-size:11pt}a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}}

/* --- configurator promo band ------------------------------------------- */
.promo.promo-cfg{
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--ink-2),var(--ink-3));color:var(--txt-inv);
  border-radius:var(--r-l);padding:clamp(1.1rem,2.4vw,1.9rem);box-shadow:var(--sh);
  margin:2rem 0;
}
.promo.promo-cfg h3{color:var(--txt-inv);margin:.1em 0 .35em}
.promo.promo-cfg p{color:var(--txt-inv-2);margin:0;max-width:56ch}
.promo.promo-cfg .kicker{color:var(--flame-l)}
.promo.promo-cfg .btn{flex:none}


/* ---- SMS consent -------------------------------------------------------
   Its own box, unchecked, never bundled into the submit button. TCPA and the
   carriers both want express written consent for marketing SMS, and "you
   agreed by pressing send" is not that. It also has to be legible: consent
   buried in 10px grey is the pattern regulators point at. */
.fld-consent { margin: 1.2rem 0 .3rem; }
.fld-consent .chk {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #f6f5f2; border: 1px solid #e7e4dd;
  border-left: 3px solid #f2681f; border-radius: 11px;
  padding: .9rem 1.05rem;
  font: 400 .875rem/1.55 inherit; color: #171a21;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.fld-consent .chk:hover { border-color: #f2681f; box-shadow: 0 1px 6px rgba(242,104,31,.12); }
.fld-consent .chk input[type="checkbox"] {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: .02rem 0 0;
  accent-color: #f2681f; cursor: pointer;
}
.fld-consent .chk a { color: #d4550f; text-decoration: underline; font-weight: 600; }
.fld-consent .chk a:hover { color: #f2681f; }

/* ---- real photography ------------------------------------------------- */
/* Several of these are portrait phone shots. Intrinsic width/height in the
   HTML reserves the true box (no layout shift); the hero slot then crops to a
   landscape band with object-fit rather than running two screens tall. */
picture{display:block}
picture img{width:100%;height:auto;display:block;border-radius:var(--r)}
.hero-media picture img{aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-l);box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.12)}
.prose picture,figure picture{margin:1.4rem 0}
.prose picture img,figure picture img{aspect-ratio:4/3;object-fit:cover}

/* ---- payment calculator: "toward the trailer + interest" (Option 2) ---- */
.cfin-money{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.cfin-money .co-big{margin:0}
.cfin-chip{font-family:var(--f-m);font-size:.95rem;color:var(--ember);white-space:nowrap;
  border:1px dashed rgba(255,176,32,.55);border-radius:8px;padding:3px 10px;line-height:1}
.cfin-cap{color:var(--txt-inv-2);font-size:.9rem;margin:.55rem 0 0;line-height:1.5}
.cfin-cap b{color:#fff}
.cfin-real{margin:1.1rem 0 0;padding:.85rem 1rem;border-radius:var(--r);
  background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.35);
  font-size:.88rem;color:var(--txt-inv-2);line-height:1.5}
.cfin-real b{color:#fff}
.cfin-disc{margin:1.6rem 0 0;padding:1rem 1.2rem;border:1px solid var(--paper-3);
  border-radius:var(--r);background:var(--paper-2);font-size:.84rem;color:var(--txt-2);line-height:1.6}
.cfin-disc b{color:var(--txt)}