/* ==========================================================================
   Your Food Trailers — design system
   One file, no external requests. The only web font is one self-hosted
   heading face (Archivo Expanded 800, Latin subset); everything else is the
   system stack.
   ========================================================================== */

/* Archivo, SIL Open Font License 1.1 (assets/fonts/OFL-Archivo.txt).
   One static instance: weight 800 at 112% width, Latin subset (covers
   Spanish). The filename carries a version because /assets/* is cached
   immutable for a year; bump it if the file ever changes. */
@font-face{
  font-family:"Archivo Expanded";
  src:url("/assets/fonts/archivo-expanded-800-latin.v1.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Metric-matched fallback so the swap from system font to Archivo doesn't
   reflow the hero (CLS). Measured: the same headline set at 800/100px is
   4100px in Archivo Expanded and 3990px in Arial Bold, hence 102.8%. */
@font-face{
  font-family:"Archivo Expanded Fallback";
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");
  font-weight:800;
  size-adjust:102.8%;
}

: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;
  --flame-t:#b04508;        /* orange for small text on light: 5.2:1+ on paper/paper-2 (AA) */
  --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;
  /* Drawer curve (Vaul/Ionic): soft settle, for the full-screen nav only. */
  --ease:cubic-bezier(.32,.72,0,1);
  /* Strong ease-out for small UI: presses, hovers, dropdowns, toggles. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --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;
  /* Headline face: H1/H2, the problem list and big display numbers only.
     Buttons, nav, eyebrows and small H3s stay on --f-d; wide type at small
     sizes reads poorly and would push button labels onto two lines. */
  --f-h: "Archivo Expanded", "Archivo Expanded Fallback", var(--f-d);

  --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;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!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;
  /* clip, not hidden: hidden makes body a scroll box, which silently turns off
     every position:sticky (the header, the sidebar, the builder's drawing).
     Browsers without clip keep hidden. */
  overflow-x:hidden;overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--flame-t);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--flame-t);text-decoration-thickness:.14em}
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)}
/* Archivo Expanded runs ~15% wider than the system face, so the scale steps
   down to keep the hero headline on two lines. */
h1,h2{font-family:var(--f-h);font-weight:800}
h1{font-size:clamp(1.95rem,4.5vw,3.35rem);letter-spacing:-.022em;line-height:1.06}
h2{font-size:clamp(1.5rem,2.7vw,2.25rem);letter-spacing:-.018em}
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:var(--txt);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 var(--ease-out)}
.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(4px) scale(.98);transform-origin:top left;transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),visibility .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-t)}
.nav-cta{display:flex;gap:.5rem;flex:0 0 auto}
.subtoggle{display:none}
.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:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
.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)}

/* Small laptops (1024-1279): the full nav still fits if the header's Call
   button steps aside (the number is in the topbar right above) and the items
   tighten a little. Below 1024 it becomes the menu. */
@media(min-width:1024px) and (max-width:1279px){
  .header-in{gap:.9rem}
  .mainnav{gap:.6rem}
  .mainnav>ul>li>a{padding:.55rem .42rem}
  .nav-cta .btn-ghost{display:none}
}

@media(max-width:1023px){
  .navtoggle{display:flex}
  /* Always laid out, hidden with visibility: a transition (unlike a keyframe)
     can be interrupted and reversed mid-flight. Exit is faster than enter. */
  .mainnav{display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:#0e1014;flex-direction:column;align-items:stretch;gap:0;padding:calc(110px + 1rem) var(--pad) 6rem;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:0;z-index:1000;
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s}
  .mainnav.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s}
  .mainnav>ul{flex-direction:column;gap:0;order:2}
  /* Each group: the parent link on the left, a 44px expand button on the right,
     the child list collapsed underneath until that button is pressed. */
  .mainnav>ul>li{display:grid;grid-template-columns:1fr auto;align-items:center;margin:0;
    border-bottom:1px solid rgba(255,255,255,.1)}
  .mainnav>ul>li>a{padding:.9rem .2rem;min-height:48px;font-size:1.08rem;border-radius:0;font-weight:750;color:#fff}
  .mainnav>ul>li>a .chev{display:none}
  .mainnav>ul>li>a:hover,.has-sub:focus-within>a{background:none}
  .subtoggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-.4rem;
    background:none;border:0;border-radius:10px;color:var(--txt-inv-2);cursor:pointer}
  .subtoggle:active{background:rgba(255,255,255,.08)}
  .subtoggle svg{transition:transform .2s var(--ease-out)}
  .expanded>.subtoggle svg{transform:rotate(180deg)}
  .expanded>.subtoggle{color:#fff}
  .sub{grid-column:1/-1;position:static;opacity:1;visibility:inherit;transform:none;box-shadow:none;background:rgba(255,255,255,.05);border-radius:10px;border:0;padding:.35rem .6rem;margin:0 0 .8rem;min-width:0;display:none;grid-template-columns:1fr;gap:0}
  .expanded>.sub{display:grid}
  .sub a{color:var(--txt-inv-2);padding:.7rem .3rem;min-height:44px;font-size:.98rem;display:flex;align-items:center}
  .sub a:hover{background:none;color:var(--ember)}
  /* Call and Quote sit first, so the two actions that matter never need a scroll. */
  .nav-cta{order:1;display:grid;grid-template-columns:1fr 1.4fr;margin:0 0 1rem}
  .nav-cta .btn{justify-content:center;min-height:48px}
}

/* -------------------------------------------------------------- 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 .16s var(--ease-out),box-shadow .18s var(--ease-out),background-color .16s ease,color .16s ease;white-space:nowrap;line-height:1.25}
.btn:active{transform:scale(.97)}
/* Ink on flame is 5.8:1; white on flame was 3.1:1 and failed AA at button
   size. Hover lightens rather than darkens so the ink label keeps its contrast. */
.btn-primary{background:var(--flame);color:var(--txt);box-shadow:0 1px 0 rgba(0,0,0,.12),0 6px 14px -8px rgba(0,0,0,.45)}
.btn-primary:hover{background:#ff7a33;color:var(--txt);box-shadow:0 1px 0 rgba(0,0,0,.12),0 10px 20px -10px rgba(0,0,0,.5)}
.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(--flame-t);margin:0 0 .85rem}
/* --ember only reads on dark grounds (1.7:1 on paper), so it is scoped to them. */
.hero .kicker,.sec-dark .kicker,.lm .kicker{color:var(--ember)}
.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-t)}
.hero-alt::after{display:none}
.hero-sm{padding:clamp(2rem,4vw,3.4rem) 0}
.hero-sm h1{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.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:minmax(0,1fr);gap:1.6rem}
  .hero .btnrow{margin-bottom:.4rem}
  /* Flatten the copy column so the photo can sit between the pitch and the
     buttons; otherwise a phone's first screen is text only. */
  .hero-in:has(.hero-media){gap:0}
  .hero-in:has(.hero-media) .hero-copy{display:contents}
  .hero-in:has(.hero-media) .hero-media{order:1;margin:.3rem 0 1.1rem}
  .hero-in:has(.hero-media) .hero-copy>.ticks,
  .hero-in:has(.hero-media) .hero-copy>.btnrow,
  .hero-in:has(.hero-media) .hero-copy>.microcopy{order:2}
  .hero-media picture img{aspect-ratio:16/10}}
@media(max-width:600px){.topbar-msg{display:none}.topbar-in{justify-content:flex-end}}

/* 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-h);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--flame-d);line-height:1}
.paybadge b small{font-size:.5em;letter-spacing:0;font-weight:700;color:var(--txt-2);margin-left:.15em}
.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-t);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)}
/* Text links on dark grounds use ember (9.9:1); --flame-t is for light grounds. */
.sec-dark a,.hero:not(.hero-alt) a:not(.btn),.lm a:not(.btn){color:var(--ember)}
.sec-dark a:hover,.hero:not(.hero-alt) a:not(.btn):hover,.lm a:not(.btn):hover{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;grid-template-columns:minmax(0,1fr);gap:1.2rem}
@media(max-width:960px){.layout-side{grid-template-columns:minmax(0,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 var(--ease-out),box-shadow .18s var(--ease-out)}
/* A lift says "clickable", so only cards whose title is a link get one. */
@media (hover:hover) and (pointer:fine){.card:has(h3 a):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}
/* Grows to fit stat values like "6–24" or "$35k"; single digits stay a 42px square. */
.card-ic{width:fit-content;min-width:42px;height:42px;padding:0 .65rem;white-space:nowrap;border-radius:11px;background:linear-gradient(140deg,var(--flame),var(--ember));color:var(--txt);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}

/* ------------------------------------------------------- problem list --- */
.problems{list-style:none;margin:0;padding:0;counter-reset:none}
.problems>li{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:.6rem clamp(1.5rem,4vw,3.5rem);
  margin:0;padding:clamp(1.3rem,2.6vw,1.9rem) 0;border-top:1px solid var(--paper-3)}
.problems>li:first-child{border-top:0;padding-top:.4rem}
.problems h3{font-family:var(--f-h);font-weight:800;font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.015em;line-height:1.15;margin:0;text-wrap:balance}
.pl-b{color:var(--txt-2);max-width:40rem}
.pl-b p:last-child{margin-bottom:0}
@media(max-width:760px){.problems>li{grid-template-columns:1fr}}

/* --------------------------------------------------------------- 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);color:var(--txt)}
.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-h);font-weight:800;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-t)}
.faq-x{flex:0 0 14px;margin-top:.4em;color:var(--flame);transition:transform .18s var(--ease-out)}
.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}
/* One accent (flame) plus the green "verified" state. Info and legal notes are
   neutral ink rather than extra blue/purple accents. */
.note-info{background:var(--paper-2);border-color:var(--steel);color:var(--txt)}
.note-warn{background:#fff7ed;border-color:#f59e0b;color:#78350f}
.note-good{background:var(--verify-l);border-color:var(--verify);color:#12503a}
.note-law{background:var(--paper-2);border-color:var(--ink);color:var(--txt)}
.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:transform .15s var(--ease-out),border-color .15s ease,box-shadow .15s ease,color .15s ease;box-shadow:var(--sh)}
.lg-i:hover{border-color:var(--flame);color:var(--flame-t)}
@media (hover:hover) and (pointer:fine){.lg-i:hover{transform:translateX(2px)}}
.lg-i:active{transform:scale(.98)}
.sub a:active{transform:scale(.98)}
.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 --- */
/* The form is a white card that often sits inside the dark hero; it sets its
   own ink colour instead of inheriting the hero's light text (the legend was
   rendering at 1.1:1). */
.qform{color:var(--txt);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}
/* 16px minimum: iOS Safari zooms the page on focus for anything smaller. */
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;padding:.7rem .85rem;
  border:1.5px solid var(--paper-3);border-radius:9px;background:var(--paper-2);color:var(--txt);transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease}
.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}
.fld input::placeholder,.fld textarea::placeholder{color:#676f7a;opacity:1}
/* Inline validation (site.js). Red is reserved for errors; 6.4:1 on white. */
.fld [aria-invalid="true"]{border-color:#b3261e;background:#fff}
.fld [aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(179,38,30,.16)}
.fld-err{color:#b3261e;font-size:.86rem;font-weight:600;line-height:1.4;margin:.4rem 0 0}
.btn[aria-busy="true"]{cursor:progress;opacity:.8}
.btn:disabled{cursor:progress}
.ty-echo{color:#fff;font-weight:700;font-size:1.05rem;margin:0 0 .2rem}
.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-t);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:var(--txt);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 --- */
/* Burnt-orange band so white text holds 4.7:1 across the whole gradient. */
.ctaband{background:linear-gradient(115deg,#a8420a,#c2500c);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.4rem,2.3vw,1.9rem)}
.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-t);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:#8a939e;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-t);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-h);font-weight:800;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:#fff1e8;color:var(--flame-t)}
.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}

/* --- "talk to an owner" band (shown until real reviews exist) ------------ */
.promo.promo-owner{
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;
  background:var(--paper-2);border:1px solid var(--paper-3);border-left:4px solid var(--flame);
  border-radius:var(--r-l);padding:clamp(1.2rem,2.6vw,2rem);max-width:56rem;margin:0 auto;
}
.promo.promo-owner>div{flex:1 1 26rem}
.promo.promo-owner h3{margin:0 0 .4rem}
.promo.promo-owner p{color:var(--txt-2);margin:0;max-width:56ch}
.promo.promo-owner .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: var(--flame-t); text-decoration: underline; font-weight: 600; }
.fld-consent .chk a:hover { color: var(--flame-t); text-decoration-thickness: .14em; }

/* Key-facts summary box — top-of-guide, built for answer engines / LLMs */
.keyfacts { background:#fff; border:1px solid var(--paper-3,#ece9e3);
  border-left:4px solid var(--flame,#f2681f); border-radius:12px;
  padding:1.1rem 1.35rem; margin:0 0 1.7rem; }
.keyfacts .kf-h { font-family:var(--f-d); font-weight:800; font-size:1.08rem;
  letter-spacing:-.01em; margin:0 0 .6rem; }
.keyfacts .kf-list { margin:0 0 .75rem; padding-left:1.15rem; }
.keyfacts .kf-list li { margin:.35rem 0; line-height:1.5; }
.keyfacts .kf-src { margin:0; font-size:.82rem; color:var(--muted,#6d7682); }
.keyfacts .kf-src a { color:var(--flame-t); }
.keyfacts .kf-ver { white-space:nowrap; }

/* ---- 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)}

/* ---- sticky mobile call / quote bar ------------------------------------ */
/* Server-rendered on every page; CSS decides when it shows. */
.stickybar{display:none}
@media (max-width:819px){
  .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:1fr 1.5fr;
    box-shadow:0 -6px 22px -8px rgba(0,0,0,.4);background:#171a21}
  .stickybar a{padding:.95rem .5rem;text-align:center;font-weight:750;text-decoration:none;font-size:.95rem;
    min-height:48px;transition:filter .12s ease}
  .stickybar a:active{filter:brightness(.92)}
  /* Clear the iPhone home indicator; the background runs to the edge. */
  .sb-call{background:#171a21;color:#fff;padding-bottom:calc(.95rem + env(safe-area-inset-bottom))}
  .sb-quote{background:var(--flame);color:var(--txt);padding-bottom:calc(.95rem + env(safe-area-inset-bottom))}
  /* Keep the bar's own label colours on hover; the global link hover is
     for text on light backgrounds. */
  .sb-call:hover{color:#fff}
  .sb-quote:hover{color:var(--txt)}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
@media print{.stickybar{display:none!important}}

/* ---- touch targets ------------------------------------------------------ */
/* Stand-alone links (not links inside a sentence) get a 44px tall hit area on
   touch screens. Mouse users keep the compact spacing. */
@media (pointer:coarse){
  .topbar a,.faddr a,.fsocial a,.fcol a,.footer-bottom a,.crumbs a{
    display:inline-flex;align-items:center;min-height:44px}
  .fcol li{margin:0}
  .faddr{line-height:1.4}
  .fsocial{gap:0 1.2rem}
  .topbar-in{min-height:44px}
  /* The pill stays visually compact; a pseudo-element extends its hit area. */
  .langswitch{min-height:32px!important;padding:0 .75rem;position:relative}
  .langswitch::after{content:"";position:absolute;inset:-6px -4px}
}
/* Small phones: long buttons wrap, and a wide headline word can't push past the edge. */
@media(max-width:400px){.btn{white-space:normal;text-align:center}h1{font-size:1.7rem;overflow-wrap:break-word}}