/* Track My Trash product site. Oct 2026. Dark, photo led, one idea per block. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --ground:#0D0D0C; --block:#141412; --raise:#1C1C1A; --line:#2A2A27;
  --paper:#F2F0EB; --ink:#141412; --muted:#55524C;
  --text:#F4F2EE; --soft:#B8B4AC; --dim:#85817A;
  --red:#E0121C; --red-hot:#FF2A33;
  --display:"Archivo",system-ui,sans-serif;
  --gut:clamp(16px,5vw,64px); --max:1240px; --sec:clamp(88px,12vw,168px);
  --ease:cubic-bezier(.22,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--text);font-family:var(--display);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--red-hot);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#000;padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.x,h1,h2{font-family:var(--display);font-stretch:100%;font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.red{color:var(--red-hot)}
.eye{font-stretch:125%;font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--red-hot);display:flex;align-items:center;gap:12px}
.eye::before{content:"";width:28px;height:3px;background:var(--red);flex:none}
.lede{color:var(--soft);font-size:clamp(17px,1.5vw,20px);max-width:58ch;text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;font-stretch:112%;font-weight:800;font-size:16px;letter-spacing:.01em;border:0;transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s}
.btn:active{transform:scale(.97)}
.btn.go{background:var(--red);color:#fff}
.btn.go:hover{background:var(--red-hot)}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn.go:hover svg{transform:translateX(4px)}
.btn.line{border:2px solid rgba(255,255,255,.35);color:#fff;background:none}
.btn.line:hover{border-color:#fff}
.more{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:#fff;border-bottom:2px solid var(--red);padding-bottom:4px;align-self:flex-start}
.more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.more:hover svg{transform:translateX(4px)}

/* top */
.ann{background:var(--block);padding:10px var(--gut);display:flex;justify-content:center}
.ann a{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--soft);max-width:100%}
.ann b{width:8px;height:8px;border-radius:50%;background:var(--red-hot);flex:none;animation:pulse 2s infinite}
.ann span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann em{font-style:normal;color:#fff;text-decoration:underline;text-underline-offset:3px;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,42,51,.6)}70%{box-shadow:0 0 0 9px rgba(255,42,51,0)}100%{box-shadow:0 0 0 0 rgba(255,42,51,0)}}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(13,13,12,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:12px;font-stretch:125%;font-weight:900;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.brand img{width:44px;height:44px}
.links{display:flex;gap:4px;margin-left:auto;align-items:center}
.links a{padding:10px 13px;border-radius:999px;font-weight:600;font-size:15px;color:var(--soft);transition:color .2s,background .2s}
.links a:hover,.links a[aria-current]{color:#fff;background:var(--raise)}
.nav .btn{min-height:46px;padding:0 20px;font-size:15px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2px;background:#fff;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:first-child{top:19px}.burger i:last-child{top:27px}
.open .burger i:first-child{top:23px;transform:rotate(45deg)}
.open .burger i:last-child{top:23px;transform:rotate(-45deg)}
.menu{display:none}

/* home hero: street at dawn, big live phone in front */
.hero{position:relative;background:#06080B;overflow:hidden;padding-top:clamp(56px,7vw,104px)}
.hero>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 26%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,11,.82) 0%,rgba(6,8,11,.45) 34%,rgba(6,8,11,.2) 55%,rgba(6,8,11,.55) 85%,rgba(13,13,12,.95) 100%)}
.hero .head{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hero h1{font-size:clamp(38px,5.6vw,88px);max-width:15ch}
.hero h1 span{display:block}
.flow{font-weight:600;font-size:clamp(16px,1.5vw,21px);color:#E4E0D8;max-width:56ch;text-wrap:balance}
.flow i{font-style:normal;color:var(--red-hot);margin:0 .25em}
.flow b{display:block;color:#fff;font-weight:800;margin-top:4px}
.hero .ctas{justify-content:center}
.hstage{position:relative;max-width:1180px;margin:clamp(24px,4vw,56px) auto 0;padding-inline:var(--gut)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.proofbar{background:var(--ground);border-top:1px solid var(--line)}
.proofbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding-block:20px;font-weight:600;color:var(--soft);font-size:15px;flex-wrap:wrap;text-align:center}
.proofbar img{width:30px}
.proofbar a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700}
.proofbar a svg{width:16px;height:16px;color:var(--red-hot)}

/* blocks */
.sec{padding-block:var(--sec)}
.b1{background:var(--ground)}.b2{background:var(--block)}
.callsplit{grid-template-columns:1.1fr .9fr}
.callsplit .rl{max-width:520px;margin-left:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.pic{position:relative;border-radius:28px;overflow:hidden;background:var(--raise)}
.pic img{width:100%;height:100%;object-fit:cover}
.pic.tall{aspect-ratio:4/5}.pic.wide{aspect-ratio:3/2}
.txt{display:flex;flex-direction:column;gap:22px;min-width:0}
.txt h2{font-size:clamp(36px,4.6vw,66px)}
.bleed{position:relative;overflow:hidden;background:#000}
.bleed picture img{width:100%;height:clamp(520px,58vw,820px);object-fit:cover}
.bleed .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,0) 58%)}
.bleed .copy{position:absolute;inset:0;display:flex}
.bleed .copy .wrap{width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding-block:clamp(40px,6vw,88px)}
.bleed h2{font-size:clamp(44px,6.4vw,96px)}
.bleed .lede{color:#D8D4CC}
.bleed.side .shade{background:linear-gradient(270deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 40%,rgba(0,0,0,0) 70%),linear-gradient(0deg,var(--ground) 0%,rgba(13,13,12,0) 30%)}
.bleed.side .copy .wrap{justify-content:flex-start;align-items:flex-end;padding-top:clamp(48px,7vw,110px)}
.bleed.side .box{max-width:520px;display:flex;flex-direction:column;gap:18px}
.pull{padding-top:0}
.pull>.wrap{margin-top:clamp(-300px,-20vw,-80px);position:relative;max-width:1180px}
.hd2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.hd2 h2{font-size:clamp(36px,4.6vw,66px);margin-top:18px}
.hd2 .txt{gap:18px}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
.plist a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:22px 20px;border-radius:20px;transition:background .3s var(--ease)}
.plist a:hover{background:var(--raise)}
.plist em{font-style:normal;font-stretch:125%;font-weight:900;font-size:15px;color:var(--red-hot);letter-spacing:.06em}
.plist b{display:block;font-stretch:100%;letter-spacing:-.02em;font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1.1}
.plist small{color:var(--soft);font-size:15.5px}
.plist svg{width:22px;height:22px;color:var(--red-hot);transition:transform .3s var(--ease)}
.plist a:hover svg{transform:translateX(5px)}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:#E6E2DB;font-size:16.5px}
.ticks li::before{content:"";width:18px;height:18px;flex:none;margin-top:3px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
#haulers .seal{width:clamp(130px,14vw,200px)}
#haulers h2{font-size:clamp(44px,6vw,92px)}
.haul{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:center}
.haul .seal{width:clamp(150px,18vw,230px)}
.haul h2{font-size:clamp(44px,6vw,92px)}
.light-sec{background:var(--paper);color:var(--ink)}
.light-sec .eye{color:var(--red)}
.light-sec .lede{color:var(--muted)}
.prf{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.prf .shield{width:clamp(130px,16vw,200px)}
.prf h2{font-size:clamp(36px,4.8vw,68px)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(36px,5vw,64px)}
.fact{background:#fff;border-radius:22px;padding:26px 24px}
.fact b{display:block;font-stretch:100%;letter-spacing:-.02em;font-weight:800;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.01em;line-height:1.05;margin-bottom:8px}
.fact p{color:var(--muted);font-size:16px}

/* feature page hero */
.phero{padding-block:clamp(56px,8vw,112px) clamp(64px,9vw,128px);background:var(--ground)}
.phero .split{align-items:center}
.phero h1{font-size:clamp(38px,5vw,74px)}
.phero.wide .txt.c{align-items:center;text-align:center;max-width:960px;margin:0 auto}
.phero.wide .ctas{justify-content:center}
.phero.wide .rw{margin-top:clamp(40px,6vw,80px)}
.moodsplit{grid-template-columns:.9fr 1.1fr;align-items:start}
.moodsplit .pic{position:sticky;top:110px}
.moodsplit.tallp{grid-template-columns:.8fr 1.2fr}
.moodsplit .txt h2,.hd2 h2{font-size:clamp(34px,4.4vw,62px)}
.dlist{display:grid;gap:28px;margin-top:12px}
.dlist.two{grid-template-columns:1fr 1fr;gap:40px 64px}
.dlist .it{padding-left:22px;border-left:3px solid var(--red)}
.dlist h3{font-stretch:100%;letter-spacing:-.02em;font-weight:800;font-size:clamp(20px,1.9vw,24px);line-height:1.15;margin-bottom:8px}
.dlist p{color:var(--soft);font-size:17px}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(28px,4vw,40px)}
.rel a{border:1.5px solid var(--line);border-radius:20px;padding:20px 22px;background:var(--raise);display:flex;justify-content:space-between;align-items:center;gap:14px;transition:border-color .4s var(--ease)}
.rel a:hover{border-color:var(--red)}
.rel b{display:block;font-stretch:100%;letter-spacing:-.02em;font-weight:800;font-size:18px}
.rel small{color:var(--soft);font-size:14.5px}
.rel svg{width:18px;height:18px;flex:none;color:var(--red-hot)}

/* faq */
.faqw{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.fh{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.fh h2{font-size:clamp(36px,4.6vw,66px)}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:20px;background:var(--raise)}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:700;font-size:clamp(17px,1.6vw,19px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:34px;height:34px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:20px;transition:transform .35s var(--ease),background .3s,border-color .3s}
.faq details[open] summary i{transform:rotate(45deg);background:var(--red);border-color:var(--red)}
.faq details p{padding:0 24px 22px;color:var(--soft);max-width:64ch}

/* demo */
.demo{position:relative;overflow:hidden;background:#000}
.demo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.demo .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.38) 100%)}
.demo>.wrap{position:relative;display:grid;grid-template-columns:1fr 460px;gap:clamp(32px,5vw,80px);align-items:center;padding-block:var(--sec)}
.demo h1,.demo h2{font-size:clamp(44px,6vw,92px)}
.form{background:var(--paper);color:var(--ink);border-radius:28px;padding:clamp(22px,3vw,32px)}
.form form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.form label small{font-weight:500;color:var(--muted)}
.form input,.form select{width:100%;min-width:0}
.form .two>*{min-width:0}
.form input,.form select,.form textarea{min-height:52px;border-radius:14px;border:1.5px solid #D9D5CC;background:#fff;padding:0 16px;font:inherit;font-size:16px;color:var(--ink)}
.form textarea{padding:12px 16px;min-height:88px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .btn{width:100%;margin-top:4px}
.form .fine{font-size:13px;color:#6B6862;text-align:center}
.form .msg{font-size:14px;font-weight:600;color:#B42318}
.form .msg:empty{display:none}
.form .hp{position:absolute;left:-9999px}
.form .done{text-align:center;padding:28px 0;display:flex;flex-direction:column;gap:10px;align-items:center}
.form .done b{font-stretch:100%;letter-spacing:-.02em;font-weight:800;font-size:28px}
.form .done:focus{outline:none}

/* footer */
.ft{background:var(--ground);padding-block:clamp(56px,7vw,96px) 36px;border-top:1px solid var(--line)}
.ft .row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.ft .seal{width:110px}
.ft .line{font-stretch:100%;letter-spacing:-.025em;font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1;margin-top:20px}
.ft nav{display:grid;grid-template-columns:repeat(3,auto);gap:12px 48px;color:var(--soft);font-weight:600;font-size:16px}
.ft nav a:hover{color:#fff}
.ft .base{margin-top:48px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:14px}
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.nf>div{display:flex;flex-direction:column;align-items:center;gap:22px}

/* motion: visible at rest, rises in only when JS runs */
.js .up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .up.in{opacity:1;transform:none}

@media (max-width:1100px){.rel{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){
  .links,.nav .btn{display:none}
  .burger{display:block}
  .menu{display:flex;flex-direction:column;gap:2px;position:fixed;inset:0;z-index:35;background:rgba(13,13,12,.97);padding:calc(100px + env(safe-area-inset-top,0px)) var(--gut) 40px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);overflow-y:auto}
  .open .menu{opacity:1;pointer-events:auto}
  .menu a{font-stretch:100%;letter-spacing:-.025em;font-weight:800;font-size:28px;padding:7px 0}
  .menu .btn{margin-top:20px;font-size:17px;align-self:flex-start}
  .split,.haul,.prf,.hd2,.faqw,.moodsplit,.callsplit{grid-template-columns:1fr}
  .fh,.moodsplit .pic{position:static}
  .callsplit .rl{margin:0 auto}
  .demo>.wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .hero{padding-top:44px}
  .hero .head{gap:20px}
  .hstage{padding-inline:10px}
  .flow b{margin-top:6px}
  .pull>.wrap{margin-top:-40px}
  .plist,.dlist.two{grid-template-columns:1fr}
  .plist a{padding:16px 6px;gap:16px}
  .eye{font-size:11.5px;letter-spacing:.14em}
  .ctas .btn{width:100%}
  .ticks,.facts,.rel{grid-template-columns:1fr}
  .bleed picture img{height:auto;aspect-ratio:1400/1322}
  .bleed .copy{position:relative}
  .bleed .shade{display:none}
  .bleed .copy .wrap{padding-block:36px 64px;background:#000}
  .form .two{grid-template-columns:1fr}
  .ft nav{grid-template-columns:1fr 1fr;gap:12px 28px}
}
@media (max-width:380px){.brand span{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .up{opacity:1;transform:none}
}
/* showreel columns get the room */
.phero .split{grid-template-columns:.85fr 1.15fr}
.phero h1{font-size:clamp(36px,4.2vw,62px)}
#app .split{grid-template-columns:1.15fr .85fr}
#haulers .split{grid-template-columns:.85fr 1.15fr}
.hero .eye::before{display:none}
@media (max-width:1000px){.phero .split,#app .split,#haulers .split{grid-template-columns:1fr}}
.hero{padding-top:clamp(44px,5vw,72px)}
.hero h1{font-size:clamp(38px,4.8vw,78px)}
.hero .head{gap:20px}
.phero h1{font-size:clamp(34px,3.6vw,54px)}
/* hero headline: normal width Archivo, two clean lines (Daniel picked A, Oct 4) */
.hero h1{font-stretch:100%;font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(36px,5vw,80px);max-width:none}
@media (max-width:760px){.hero h1{font-size:clamp(34px,9.6vw,44px);letter-spacing:-.03em}}

/* critique fixes (Oct 4): phone and cards in the first desktop screen */
.hero{padding-top:clamp(30px,3.4vw,52px)}
.hero .head{gap:16px}
.hero h1{font-size:clamp(36px,4.5vw,70px)}
.flow{font-size:clamp(15px,1.3vw,19px)}
.hstage{margin-top:clamp(16px,2.4vw,32px)}
@media (min-width:1001px){.hero .ctas .btn{min-height:50px}}
/* product rows: arrow sits beside the name */
.plist a{grid-template-columns:auto auto 1fr}
.plist svg{justify-self:start}
/* a soft glow behind the office and message showreels */
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;background:radial-gradient(50% 55% at 50% 55%,rgba(245,180,0,.10),rgba(224,18,28,.08) 45%,transparent 75%);pointer-events:none}
#office,#spanish{isolation:isolate}
/* proof: one line and a link, no repeat cards */
.prf .go2{margin-top:6px}
.light-sec .more{color:var(--ink)}
@media (max-width:760px){.eye{font-size:13px;letter-spacing:.16em}}

/* ===== Round 3: signature moments (Oct 4) ===== */
:root{--ground:#0B0B0A;--block:#171614;--spring:cubic-bezier(.32,.72,0,1)}
/* buttons: the arrow rides in its own circle */
.btn.go:has(svg){padding:0 7px 0 26px;gap:14px}
.btn.go svg{width:42px;height:42px;padding:12px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .5s var(--spring),background .3s}
.btn.go:hover svg{transform:translate(3px,-1px) scale(1.06);background:rgba(255,255,255,.28)}
.btn{transition:background .3s var(--spring),transform .4s var(--spring),border-color .3s}
.btn:active{transform:scale(.97)}
/* headings settle in from a soft blur */
.js h2.up{filter:blur(8px);transition:opacity .9s var(--spring),transform .9s var(--spring),filter .9s var(--spring)}
.js h2.up.in{filter:none}
/* hero background drifts as you scroll */
.hero>picture img{will-change:transform}


/* trays: the wide showreels sit in a machined frame */
.tray{padding:14px;border-radius:36px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12),0 50px 120px -50px rgba(224,18,28,.45)}
@media (max-width:760px){.tray{padding:8px;border-radius:24px}}

/* what you stop paying for */
.stop .stops{display:flex;flex-direction:column;gap:clamp(28px,4vw,52px);margin-top:clamp(28px,4vw,48px)}
.sp{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(18px,4vw,64px);align-items:center}
.sp>div{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.08;font-size:clamp(30px,4.6vw,68px);color:#8A857D}
.sp s{text-decoration:none;background:linear-gradient(var(--red-hot),var(--red-hot)) 0 58%/100% .085em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s .25s var(--spring)}
.js .sp.up s{background-size:0% .085em}
.js .sp.up.in s{background-size:100% .085em}
.sp p{font-weight:700;font-size:clamp(18px,1.7vw,23px);line-height:1.35;color:#F2F0EB;padding-left:22px;border-left:3px solid var(--red)}
@media (max-width:760px){.sp{grid-template-columns:1fr}}

/* product bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:290px;gap:14px}
.tile{display:block;padding:6px;border-radius:32px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:transform .6s var(--spring),box-shadow .4s}
.tile .tin{position:relative;display:block;height:100%;border-radius:26px;overflow:hidden;padding:26px 28px;background:linear-gradient(160deg,#201F1C,#121210 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,42,51,.55)}
.tt{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;max-width:70%}
.tt b{font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;line-height:1.05}
.tt small{color:var(--soft);font-size:15.5px}
.tile .ar{position:absolute;z-index:3;top:22px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:transform .5s var(--spring),background .3s}
.tile .ar svg{width:18px;height:18px;color:#fff}
.tile:hover .ar{background:var(--red);transform:translate(2px,-2px) scale(1.06)}
.shot{position:absolute;z-index:1;box-shadow:0 30px 60px rgba(0,0,0,.55);transition:transform .7s var(--spring)}
.shot.ph{right:26px;bottom:-34%;width:44%;border-radius:22px;outline:6px solid #0A0A09}
.shot.wd{left:28px;bottom:-26%;width:84%;border-radius:12px;outline:5px solid #0A0A09}
.tile:hover .shot{transform:translateY(-10px)}
.t-res{grid-row:span 2}.t-res .shot.ph{width:64%;right:50%;transform:translateX(50%);bottom:-12%}.t-res:hover .shot{transform:translate(50%,-10px)}
.t-off,.t-drv,.t-brd{grid-column:span 2}
.t-off .shot.wd,.t-drv .shot.wd{left:auto;right:-4%;width:62%;bottom:-18%}
.t-web .shot.wd{bottom:-38%}
.logos{position:absolute;left:28px;right:28px;bottom:28px;display:flex;gap:14px;align-items:center;z-index:1}
.logos img{height:clamp(64px,7vw,96px);width:auto;max-width:31%;object-fit:contain;background:#fff;border-radius:16px;padding:10px 14px}
.t-cta .tin{background:var(--red);display:flex;align-items:flex-end}
.t-cta .tt small{color:#ffe1e2}.t-cta .ar{background:rgba(0,0,0,.25)}
@media (max-width:1000px){.bento{grid-template-columns:1fr 1fr}.t-off,.t-drv,.t-brd{grid-column:span 2}}
@media (max-width:760px){.bento{grid-template-columns:1fr;grid-auto-rows:250px}.t-res{grid-row:span 1}.t-off,.t-drv,.t-brd{grid-column:span 1}
 .t-res .shot.ph{width:44%;right:26px;transform:none;bottom:-34%}.t-res:hover .shot{transform:translateY(-10px)}
 .t-off .shot.wd,.t-drv .shot.wd{right:-10%;width:80%;bottom:-24%}.logos img{height:56px}}

/* how you switch */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{padding:6px;border-radius:32px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.step .tin{display:flex;flex-direction:column;gap:10px;height:100%;border-radius:26px;padding:30px 30px 34px;background:linear-gradient(160deg,#201F1C,#121210 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.step em{font-style:normal;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(44px,5vw,72px);line-height:1;color:var(--red-hot);margin-bottom:10px}
.step b{font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;line-height:1.1}
.step p{color:var(--soft);font-size:17px}
@media (max-width:1000px){.steps{grid-template-columns:1fr}}

/* the red statement band */
.redband{background:var(--red);padding-block:clamp(72px,10vw,150px);overflow:hidden}
.redband p{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.98;font-size:clamp(40px,7vw,112px);color:#fff;text-wrap:balance}
.redband p span{color:#0B0B0A}

/* phones: Book a demo stays one tap away */
.mbar{display:none}
@media (max-width:760px){
 .mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;justify-content:center;gap:12px;height:58px;border-radius:999px;background:var(--red);color:#fff;font-stretch:112%;font-weight:800;font-size:17px;box-shadow:0 14px 34px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .55s var(--spring)}
 .mbar svg{width:18px;height:18px}
 .mbar.on{transform:none}
 .ft{padding-bottom:96px}
}

/* footer: the tailgate wordmark */
.ft{overflow:hidden}
.ft .wm{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(22px,7.6vw,160px);line-height:.82;letter-spacing:-.01em;text-align:center;white-space:nowrap;margin-top:clamp(40px,6vw,80px);background:linear-gradient(180deg,#2C2B28 0%,#141412 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;margin-bottom:-.12em}
@media (prefers-reduced-motion:reduce){.js h2.up{filter:none}}

/* guide pages */
.gw{max-width:820px}
.ghero h1{font-size:clamp(36px,5vw,68px);margin:18px 0 22px}
.ghero .lede{margin-bottom:16px}
.ghero .ctas{margin:26px 0 40px}
.toc{border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px 28px;background:rgba(255,255,255,.03)}
.toc b{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.toc ol{margin:0;padding-left:22px;display:grid;gap:8px}
.toc a{color:#ECE9E3;text-decoration:none;border-bottom:1px solid rgba(225,37,27,.5)}
.toc a:hover{color:var(--red-hot)}
.gsec h2{font-size:clamp(34px,4.2vw,58px);margin:14px 0 28px}
.gbody{color:var(--soft);font-size:clamp(17px,1.4vw,19px);line-height:1.65}
.gbody p{margin:0 0 18px}
.gbody h3{color:#ECE9E3;font-size:clamp(20px,1.8vw,24px);font-weight:800;letter-spacing:-.01em;margin:34px 0 10px}
.gbody h3:first-child{margin-top:0}
.gbody b{color:#ECE9E3}
.gl{margin:0 0 20px;padding-left:20px;display:grid;gap:12px}
.gbody a,#see-it .dlist a{color:#ECE9E3;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}