/* ============================================================
   daXos Move — site layer.
   Loaded AFTER css/move.css, which is the shared daXos system
   stylesheet (the same one daxosfresh.com and the order pages
   use). This file adds only what Move has on top of it: the
   hero, the line drawings, and the pieces built around them.
   ============================================================ */

/* ---------- support: three levels (as on the other daXos sites) ---------- */
.grid.g3.sup{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(24px,3vw,40px)}
.grid.g3.sup .card{border:1px solid var(--rule);border-radius:var(--r);padding:26px;background:var(--paper);display:grid;gap:12px;align-content:start}
.grid.g3.sup .card .marker{margin:0}
.grid.g3.sup .card h3{font-size:clamp(19px,1.7vw,22px)}
.grid.g3.sup .card p{color:var(--ink-2);font-size:15.5px}
@media (max-width:860px){.grid.g3.sup{grid-template-columns:1fr}}

/* ============================================================
   daXos Move — the layer on top of the daXos system stylesheet.
   The system (tokens, nav, sections, cards, buttons, footer) is
   base.css, taken from daxosfresh.com. Everything here is either
   the hero, which is kept exactly as it was, or a piece Move has
   and Fresh does not: the line drawings and the pieces built
   around them.
   ============================================================ */

:root{
  /* names the Move markup and drawings use, pointed at the system's tokens */
  --lime:var(--green); --mute:var(--ink-3); --ghost:#c9ccc4; --white:#fff;
  --display:var(--sans); --body:var(--sans); --pad:var(--gutter); --emc:var(--green-deep);
  --sage:#e7ecd9;
}

/* ---------- the hero, untouched ---------- */
/* the system's hero grid overlay and padding do not apply to the photo hero */
.hero::before{display:none}
.hero{padding:clamp(20px,3vw,40px) 0 0}
.shot{position:relative;margin:0;border-radius:20px;overflow:hidden;isolation:isolate;background:#0b0c0b;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);container-type:inline-size}
.shot img{display:block;width:100%;object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none}
.shot-copy,.shot-foot{position:absolute;z-index:2}
.shot-copy{left:clamp(20px,3.6vw,52px);top:clamp(24px,5vw,56px);right:clamp(20px,3.6vw,52px);max-width:min(64ch,62%)}
.shot-copy .lead{margin-top:clamp(12px,1.6vw,20px);max-width:46ch;color:#e3e7de;font-size:clamp(1rem,1.15vw,1.1rem)}
.shot-copy h1.hero-mark{display:grid;gap:1.6cqw;margin:0;font-size:inherit;line-height:1}
.hero-mark .lockup{display:flex;align-items:center;gap:1.9cqw}
.hero-mark .lockup img{width:auto;height:5.4cqw}
.hero-mark .prod{font-family:var(--sans);font-weight:400;font-size:4cqw;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.hero-mark .tag{font-family:var(--sans);font-weight:800;font-size:2.35cqw;line-height:1.1;letter-spacing:-.01em;
  text-transform:uppercase;color:#e9ece5}
.shot-foot{left:clamp(20px,3.6vw,52px);right:clamp(20px,3.6vw,52px);bottom:clamp(18px,2.6vw,36px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.shot-foot .mono{font-family:var(--mono);color:#e9ece5;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.shot .go{display:flex;flex-wrap:wrap;gap:12px 14px}
/* the hero keeps the pill buttons it was built with */
.shot .btn{display:inline-flex;align-items:center;gap:16px;min-height:60px;padding:6px 8px 6px 28px;border:0;
  border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:1.05rem;text-decoration:none;white-space:nowrap}
.shot .btn b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--green);
  color:var(--ink);font-weight:500;font-size:1.2rem;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.shot .btn:hover b{transform:rotate(-45deg) scale(1.06)}
.shot .btn.inv{background:var(--green);color:var(--ink)}
.shot .btn.inv b{background:var(--ink);color:var(--green)}
.shot .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.shot .btn.ghost b{background:#fff;color:var(--ink)}
@media (max-width:900px){
  .shot-copy{position:static;max-width:none;padding:clamp(20px,5vw,30px) clamp(18px,5vw,28px) 0}
  .shot-foot{position:static;padding:clamp(14px,3vw,20px) clamp(18px,5vw,28px) clamp(20px,5vw,28px);justify-content:flex-start}
  .shot .go{width:100%}
  .shot .go .btn{flex:1 1 auto}
  .shot-copy h1.hero-mark{gap:10px}
  .hero-mark .lockup img{height:34px}
  .hero-mark .prod{font-size:25px}
  .hero-mark .tag{font-size:17px}
}

/* the operating loop under the photo */
.beat{list-style:none;margin:clamp(28px,4vw,56px) 0 0;padding:clamp(14px,2vw,22px) var(--gutter) clamp(16px,2.4vw,26px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,56px);
  background:var(--ink);border-top:1px solid var(--ink-rule)}
.beat .ln{display:block;position:relative;height:2px;margin:6px 0 clamp(10px,1.8vh,20px);background:rgba(182,206,56,.22)}
.beat .ln::before{content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--green)}
.beat .ln::after{content:"";position:absolute;inset:0;background:var(--green);opacity:.75;transform:scaleX(0);
  transform-origin:left;transition:transform 1.1s cubic-bezier(.5,0,.2,1)}
.beat li.done .ln::after,.beat li.on .ln::after{transform:scaleX(1)}
.beat strong{display:block;font-weight:800;font-size:clamp(15px,1.42vw,19px);letter-spacing:.01em;text-transform:uppercase;
  color:var(--on-ink);transition:color .4s}
.beat li.on strong{color:var(--green)}
.beat span{display:block;margin-top:8px;font-family:var(--mono);font-size:clamp(12px,.98vw,13.5px);line-height:1.45;color:var(--on-ink-3)}
@media (max-width:900px){.beat{grid-template-columns:1fr 1fr;gap:22px 24px}}
@media (max-width:440px){.beat{grid-template-columns:1fr;gap:18px}.beat span{display:none}}
@media (prefers-reduced-motion:reduce){.beat .ln::after{transform:scaleX(1)}}

/* ---------- the line drawings ---------- */
.sig{margin:0}
.sig svg{width:100%;height:auto;overflow:visible}
.sig .base{fill:none;stroke:var(--rule);stroke-width:2}
.sig .ln{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.sig .fence{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:3 6;opacity:.6}
.sig .dot{fill:var(--ink)}
.sig .hot{fill:var(--green);stroke:var(--ink);stroke-width:1.6}
.sig figcaption{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
.on-ink .sig .base{stroke:var(--ink-rule)}
.on-ink .sig .ln,.on-ink .sig .fence{stroke:var(--on-ink)}
.on-ink .sig .dot{fill:var(--on-ink)}
.on-ink .sig figcaption{color:var(--on-ink-3)}

.art{width:100%;height:auto;overflow:visible}
.art *{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art .l{fill:var(--green-tint);stroke:var(--green-deep);stroke-width:1.6}
.art .dash{stroke:var(--green-deep);stroke-width:1.6;stroke-dasharray:4 7;opacity:.7}
.on-ink .art *{stroke:var(--on-ink)}
.on-ink .art .l{fill:rgba(182,206,56,.18);stroke:var(--green)}
.on-ink .art .dash{stroke:var(--green)}

/* the truck that drives across the trial band */
.drive{position:absolute;left:0;right:0;bottom:18px;height:96px;pointer-events:none;opacity:.5}
.drive::after{content:"";position:absolute;left:0;right:-160px;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--on-ink-3) 0 60px,transparent 60px 140px)}
.drive svg{position:absolute;bottom:8px;left:0;width:200px;height:auto;overflow:visible}
.drive svg *{fill:none;stroke:var(--on-ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drive svg .l{fill:rgba(182,206,56,.25);stroke:var(--green)}
@media (prefers-reduced-motion:no-preference){
  .drive svg{animation:cross 18s linear infinite}
  .drive::after{animation:lane2 1.6s linear infinite}
  .drive .wh{transform-box:fill-box;transform-origin:center;animation:spin 1.2s linear infinite}
}
@keyframes cross{from{transform:translateX(-240px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes lane2{to{transform:translateX(-140px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* reveals, as before */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);
    transition-delay:calc(var(--d,0)*110ms)}
  .rv.in{opacity:1;transform:none}
  .rv .ln{stroke-dashoffset:1}
  .rv.in .ln{animation:draw 1.7s .35s cubic-bezier(.5,0,.2,1) forwards}
  .rv .pop{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
    transition:opacity .3s,transform .5s cubic-bezier(.2,1.6,.4,1);transition-delay:calc(var(--k)*180ms + 500ms)}
  .rv.in .pop{opacity:1;transform:none}
}

/* ---------- the four questions ---------- */
.qcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:860px){.qcards{grid-template-columns:1fr}}
.qcard{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
  display:grid;gap:14px;align-content:start;grid-template-rows:auto auto auto 1fr auto}
.qcard .idx{display:flex;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.qcard .idx b{color:var(--ink);font-weight:700}
.qcard h3{font-size:clamp(20px,2vw,25px);line-height:1.16}
.qcard .kick{font-weight:800;letter-spacing:-.015em;font-size:clamp(17px,1.5vw,19px);line-height:1.2;color:var(--green-deep)}
.qcard p.a{color:var(--ink-2);font-size:16px}
.qcard .fact{border-top:1px solid var(--rule);padding-top:12px;font-size:13.5px;color:var(--ink-3)}
.qcard .fact b{font-family:var(--mono);font-size:17px;color:var(--ink);margin-right:8px}
.qcard .fact a{color:var(--ink-3)}
.qcard .sig{margin-top:2px}

/* ---------- the two packages ---------- */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:720px){.packs{grid-template-columns:1fr}}
.pack{position:relative;display:grid;gap:14px;align-content:start;background:#fff;border:1px solid var(--rule);
  border-radius:10px;padding:clamp(22px,2.6vw,32px);text-decoration:none;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.pack:hover{border-color:var(--ink);box-shadow:0 18px 40px -30px rgba(15,17,16,.55);transform:translateY(-2px)}
.pack .name{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:flex;gap:10px;align-items:center}
.pack h3{font-size:clamp(22px,2.2vw,28px);line-height:1.12}
.pack ul{display:grid;gap:7px;border-top:1px solid var(--rule);padding-top:12px}
.pack li{font-size:15px;padding-left:18px;position:relative;color:var(--ink-2)}
.pack li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--green-deep)}
.pack .go-on{font-weight:700;font-size:15px;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.pack:hover .go-on{color:var(--green-deep)}
.pack .art{margin-top:6px}

/* ---------- the price band ---------- */
.prices{display:grid;grid-template-columns:auto auto 1fr;gap:24px clamp(28px,5vw,80px);align-items:end}
@media (max-width:900px){.prices{grid-template-columns:1fr 1fr}.prices .r{grid-column:1/-1}}
.prices .n{font-family:var(--mono);font-weight:700;font-size:clamp(40px,6vw,76px);letter-spacing:-.03em;line-height:1}
.prices small{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.prices .r p{color:var(--ink-2);max-width:56ch}
.prices .r .btn{margin-top:16px}

/* ---------- the sticky call to action on phones ---------- */
.dock{position:fixed;inset:auto 12px 12px 12px;z-index:60;display:none}
.dock .btn{width:100%;justify-content:center;box-shadow:0 14px 40px -12px rgba(15,17,16,.6)}
@media (max-width:700px){.dock{display:block}.dock.hide{display:none}}

/* ---------- the trial band keeps room for the truck ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band.with-drive{padding-bottom:clamp(96px,12vw,150px)}
.cta-band .in{position:relative;z-index:1}
/* ===== round 6 (Sept 23): photo hero, in the shape daxosfresh.com uses ===== */
.hero{display:block;height:auto;min-height:0;max-height:none;padding:clamp(92px,12vh,124px) 0 0}
.hero .wrap{padding-inline:var(--pad)}
.shot{position:relative;margin:0;border-radius:20px;overflow:hidden;isolation:isolate;background:#0b0c0b;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.shot img{display:block;width:100%;height:clamp(400px,62vh,680px);object-fit:cover;object-position:58% 58%}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,9,8,.95) 0%,rgba(8,9,8,.84) 30%,rgba(8,9,8,.30) 56%,rgba(8,9,8,0) 76%),
             linear-gradient(to top,rgba(8,9,8,.88) 0%,rgba(8,9,8,.35) 26%,rgba(8,9,8,0) 52%),
             linear-gradient(to bottom,rgba(8,9,8,.45) 0%,rgba(8,9,8,0) 26%)}
.shot-copy,.shot-foot{position:absolute;z-index:2}
.shot-copy{left:clamp(20px,3.6vw,52px);top:clamp(24px,5vw,56px);right:clamp(20px,3.6vw,52px);max-width:min(64ch,62%)}
.shot-copy h1{font-size:clamp(1.9rem,3.5vw,3.5rem);line-height:1.04;color:#fff}
.shot-copy h1 em{color:var(--lime)}
.shot-copy .lead{margin-top:clamp(12px,1.6vw,20px);max-width:46ch;color:#e3e7de;font-size:clamp(1rem,1.15vw,1.1rem)}
.shot-foot{left:clamp(20px,3.6vw,52px);right:clamp(20px,3.6vw,52px);bottom:clamp(18px,2.6vw,36px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.shot-foot .mono{color:#e9ece5;font-size:.76rem;letter-spacing:.1em}
.shot-foot .go{gap:12px 14px}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.btn.ghost b{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.hero .beat{margin-top:clamp(28px,4vw,56px)}
@media (max-width:900px){
  .shot-copy{position:static;max-width:none;padding:clamp(20px,5vw,30px) clamp(18px,5vw,28px) 0}
  .shot-foot{position:static;padding:clamp(14px,3vw,20px) clamp(18px,5vw,28px) clamp(20px,5vw,28px);justify-content:flex-start}
  .shot::after{background:linear-gradient(to bottom,rgba(8,9,8,0) 40%,rgba(8,9,8,.55) 78%,rgba(8,9,8,.9) 100%);inset:0 0 auto;height:clamp(240px,48vw,340px)}
  .shot img{height:clamp(240px,48vw,340px)}
  .shot-foot .go{width:100%}
  .shot-foot .go .btn{flex:1 1 auto}
}

/* ===== round 7 (Sept 23): the daXos Move lockup over the photo, as daxosfresh.com does ===== */
.shot{container-type:inline-size}
.shot-copy h1.hero-mark{display:grid;gap:1.6cqw;margin:0;font-size:inherit;line-height:1}
.hero-mark .lockup{display:flex;align-items:center;gap:1.9cqw}
.hero-mark .lockup img{width:auto;height:5.4cqw}
.hero-mark .prod{font-family:var(--sans);font-weight:400;font-size:4cqw;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.hero-mark .tag{font-family:var(--sans);font-weight:800;font-size:2.35cqw;line-height:1.1;letter-spacing:-.01em;
  text-transform:uppercase;color:#e9ece5}
@media (max-width:900px){
  .shot{container-type:normal}
  .shot-copy h1.hero-mark{gap:10px}
  .hero-mark .lockup{gap:11px}
  .hero-mark .lockup img{height:34px}
  .hero-mark .prod{font-size:25px}
  .hero-mark .tag{font-size:17px}
}

/* ===== round 8 (Sept 23): the hero copy sits at the foot of the photo ===== */
.shot-bottom{position:absolute;z-index:2;left:clamp(20px,3.6vw,52px);right:clamp(20px,3.6vw,52px);
  bottom:clamp(18px,2.6vw,36px);display:grid;gap:clamp(14px,1.8vw,24px)}
.shot-bottom .shot-copy{position:static;left:auto;right:auto;top:auto;max-width:min(64ch,58%)}
.shot-bottom .shot-foot{position:static;left:auto;right:auto;bottom:auto}
.shot::after{background:linear-gradient(100deg,rgba(8,9,8,.92) 0%,rgba(8,9,8,.78) 28%,rgba(8,9,8,.26) 54%,rgba(8,9,8,0) 76%),
             linear-gradient(to top,rgba(8,9,8,.94) 0%,rgba(8,9,8,.72) 24%,rgba(8,9,8,.18) 46%,rgba(8,9,8,0) 62%),
             linear-gradient(to bottom,rgba(8,9,8,.35) 0%,rgba(8,9,8,0) 22%)}
@media (max-width:900px){
  .shot-bottom{position:static;display:block;left:auto;right:auto;bottom:auto}
  .shot-bottom .shot-copy{max-width:none}
}

/* ===== round 9 (Sept 23): the photo takes the top banner's own width ===== */
.hero>.wrap{max-width:none;padding-inline:0}
.shot{width:min(1100px,calc(100% - 28px));margin-inline:auto}
.shot img{object-position:100% 58%}
@media (max-width:600px){.shot{width:calc(100% - 20px)}}
.shot::after{background:linear-gradient(100deg,rgba(8,9,8,.95) 0%,rgba(8,9,8,.86) 34%,rgba(8,9,8,.42) 58%,rgba(8,9,8,0) 80%),
             linear-gradient(to top,rgba(8,9,8,.96) 0%,rgba(8,9,8,.80) 26%,rgba(8,9,8,.30) 50%,rgba(8,9,8,0) 68%),
             linear-gradient(to bottom,rgba(8,9,8,.35) 0%,rgba(8,9,8,0) 22%)}
@media (max-width:900px){
  .shot::after{background:linear-gradient(to bottom,rgba(8,9,8,0) 42%,rgba(8,9,8,.45) 76%,rgba(8,9,8,.88) 100%);
    inset:0 0 auto;height:clamp(240px,48vw,340px)}
}

.hero-mark .lockup{gap:.9cqw}
@media (max-width:900px){.hero-mark .lockup{gap:7px}}

.shot img{height:clamp(420px,66vh,700px);object-position:100% 100%}
@media (max-width:900px){.shot img{height:clamp(240px,48vw,340px)}}

/* ===== round 10 (Sept 23): let the route map read — the shading is pulled down to the copy ===== */
.shot::after{background:
  radial-gradient(130% 92% at -8% 112%, rgba(8,9,8,.95) 0%, rgba(8,9,8,.88) 28%, rgba(8,9,8,.55) 48%, rgba(8,9,8,.12) 66%, rgba(8,9,8,0) 78%),
  linear-gradient(to top, rgba(8,9,8,.92) 0%, rgba(8,9,8,.58) 20%, rgba(8,9,8,.14) 42%, rgba(8,9,8,0) 58%)}
.shot::after{background:linear-gradient(to top,rgba(8,9,8,.78) 0%,rgba(8,9,8,.38) 13%,rgba(8,9,8,.08) 26%,rgba(8,9,8,0) 36%)}
.shot-bottom::before{content:"";position:absolute;z-index:-1;inset:-150px -90px -60px -70px;
  background:radial-gradient(98% 96% at 14% 78%,rgba(8,9,8,.94) 0%,rgba(8,9,8,.88) 34%,rgba(8,9,8,.6) 56%,rgba(8,9,8,.24) 72%,rgba(8,9,8,0) 88%)}
@media (max-width:900px){.shot-bottom::before{display:none}}
.on-ink .prices .r p{color:var(--on-ink-2)}
.on-ink .prices small{color:var(--on-ink-3)}
.on-ink .prices .n{color:var(--on-ink)}

/* ============================================================
   Inner pages — the Move pieces, in the system's language
   ============================================================ */

/* the three reports: tab list beside the drawing */
.show{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.show{grid-template-columns:1fr}}
.tabs{display:grid;align-content:start;border-top:1px solid var(--rule)}
.tab{position:relative;display:grid;gap:6px;text-align:left;padding:20px 0;border:0;border-bottom:1px solid var(--rule);
  background:none;color:inherit;font:inherit;cursor:pointer}
.tab .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tab strong{font-weight:800;font-size:clamp(19px,1.8vw,23px);letter-spacing:-.015em;line-height:1.16;color:var(--ink-3);transition:color .2s}
.tab:hover strong,.tab.on strong{color:var(--ink)}
.tab .more-t{display:none;margin-top:4px;color:var(--ink-2);font-size:15.5px;max-width:46ch}
.tab.on .more-t{display:block}
.tab .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left}
.tab.on .bar{transform:scaleX(1)}
.tabs .link{justify-self:start;margin-top:18px;font-weight:700;font-size:15px;text-decoration:none;
  border-bottom:2px solid var(--green);padding-bottom:2px}
.stage{position:relative;background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--green);z-index:1}
.pane{display:none;width:100%;height:auto}
.pane.on{display:block}
.pane text{font-family:var(--mono);font-size:12px;fill:var(--ink-3)}
.pane .ph{font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:-.02em;fill:var(--ink)}
.pane .pl text{fill:var(--ink)}
.pane .fig text{font-family:var(--mono);font-weight:700;font-size:34px;letter-spacing:-.02em;fill:var(--ink)}
.pane .quote{font-family:var(--sans);font-weight:800;font-size:18px;fill:var(--ink)}
.pane .rule{stroke:var(--ink);stroke-width:1}
.pane .grid{stroke:var(--rule);stroke-width:1;fill:none}
.pane .base{stroke:#d3d0c4;stroke-width:2;fill:none}
.pane .seg path{fill:none;stroke:var(--ink);stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.pane .stop circle,.pane .hit circle{fill:var(--green);stroke:var(--ink);stroke-width:1.6}
.pane .route{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.pane .trace{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pane .fence{fill:rgba(182,206,56,.22);stroke:var(--ink);stroke-width:1.6;stroke-dasharray:4 6}
.pane .trl rect{fill:var(--ink)}
.pane .trk circle{fill:var(--green);stroke:var(--ink);stroke-width:2}

/* the package glyphs on the pricing page */
.glyph{width:min(280px,72%);height:auto;margin:6px 0;overflow:visible}
.glyph *{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.glyph .l{fill:var(--green-tint);stroke:var(--green-deep);stroke-width:1.6}
.glyph .dash{stroke:var(--green-deep);stroke-dasharray:4 7;stroke-width:1.6;opacity:.7}
.glyph .dot{fill:var(--green);stroke:var(--green-deep)}
.glyph .pingr{stroke:var(--green);stroke-width:1;opacity:.55}

/* build your monthly price */
.calc{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--ink);border-radius:12px;overflow:hidden;
  margin-top:clamp(40px,5vw,64px)}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc-in{background:#fff;padding:clamp(20px,3vw,32px);display:grid;gap:18px;align-content:start}
.calc-out{background:var(--ink);color:var(--on-ink);padding:clamp(20px,3vw,32px);display:grid;gap:14px;align-content:start}
.calc .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.calc-out .mono{color:var(--on-ink-3)}
.calc .row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--rule);padding-top:16px}
.calc .row:first-of-type{border-top:0;padding-top:0}
.calc label{font-weight:700;display:grid;gap:4px;min-width:0;flex:1 1 60%}
.calc label small{font-weight:500;font-size:13px;color:var(--ink-3)}
.step{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;align-items:stretch}
.step button{width:40px;height:42px;border:0;background:var(--paper-2);font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
.step button:hover{background:var(--green-tint)}
.step output{width:64px;height:42px;display:grid;place-items:center;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  font-family:var(--mono);font-weight:700;font-size:17px}
.calc .total{font-family:var(--mono);font-weight:700;font-size:clamp(38px,5vw,56px);letter-spacing:-.03em;color:var(--green);line-height:1}
.calc .fleet{display:flex;flex-wrap:wrap;gap:6px;opacity:.85}
.calc .fleet svg{width:40px;height:20px;fill:none;stroke:var(--on-ink-2);stroke-width:1.4}
.calc .fleet svg.tr{stroke:var(--green)}
.calc .fleet svg.vt{stroke:var(--green)}
.calc .fleet svg.vt circle.s{fill:var(--green);stroke:none}
.calc .fleet em{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--on-ink-3)}
.calc .note{color:var(--on-ink-2);font-size:14.5px;max-width:46ch}
.calc .note b{color:var(--on-ink)}
.calc .go{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:4px}
.calc .go .link{color:var(--on-ink-2);font-size:14.5px;text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:2px}

/* small shared pieces */
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.extras{display:flex;flex-wrap:wrap;gap:14px 44px;align-items:center;justify-content:space-between;
  margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--rule)}
.extras p{color:var(--ink-2);max-width:64ch;font-size:15.5px}
.extras p b{color:var(--ink)}
.extras .link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:2px}

/* section heads on the inner pages read like the system's */
.offer-head{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,56px);max-width:860px}
.offer-head h2 em,.offer-head h2 .g{color:var(--green-deep)}
.on-ink .offer-head h2 em{color:var(--green)}
.offer-head p{color:var(--ink-2);font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:62ch}
.on-ink .offer-head p{color:var(--on-ink-2)}

/* the package cards on the pricing page */
.packs .pack .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.packs .pack .mono .new{background:var(--green);color:var(--ink);border-radius:999px;padding:3px 8px;font-weight:700;letter-spacing:.04em}
.pack .price{font-family:var(--mono);font-weight:700;font-size:clamp(30px,3.4vw,40px);letter-spacing:-.03em;line-height:1}
.pack .price small{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:8px}
.pack li b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.pack li.opt{color:var(--ink-3)}

/* numbered steps, four across */
.steps{list-style:none;margin:clamp(28px,3.4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(20px,2.2vw,26px);display:grid;gap:10px;align-content:start}
.steps .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep)}
.steps h3{font-size:clamp(18px,1.6vw,21px);line-height:1.2}
.steps p{color:var(--ink-2);font-size:15.5px}
.steps .link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--green)}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.steps.three{grid-template-columns:1fr}}

/* "next page" link at the foot of an inner page */
.nextup{display:flex;align-items:center;justify-content:space-between;gap:20px;text-decoration:none;color:inherit;
  max-width:var(--max);margin:0 auto;padding:clamp(26px,3vw,40px) var(--gutter);border-top:1px solid var(--rule)}
.nextup .mono{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.nextup strong{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.nextup b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--green);color:var(--ink);font-weight:500}
.nextup:hover strong{color:var(--green-deep)}
.caption{margin-top:12px;font-size:13.5px;color:var(--ink-3)}
.caption a{color:var(--ink-3)}
/* the pages use <em> for the green second line, as they always have */
em{font-style:normal;color:var(--green-deep)}
.on-ink em,.on-ink em.g{color:var(--green)}
h1 em,h2 em,h3 em{font-weight:inherit;letter-spacing:inherit}

/* the trial band on the inner pages */
.cta-band .wrap:not(.in){display:block;position:relative;z-index:1}
.cta-band h2{max-width:20ch}
.ask-row{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;margin-top:18px}
.ask-row p{color:var(--on-ink-2);max-width:62ch;font-size:clamp(16px,1.4vw,18px)}
.calc .total{display:block}
.calc .go .btn span{margin-left:6px}

.section.pad{max-width:var(--max);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- parked trailers: the yard ---------- */
.yard-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.yard-grid{grid-template-columns:1fr}}
.yard{margin:0;background:rgba(255,255,255,.04);border:1px solid var(--ink-rule);border-radius:12px;
  padding:clamp(14px,2vw,22px);position:sticky;top:84px}
@media (max-width:900px){.yard{position:static}}
.yard svg{width:100%;height:auto;overflow:visible}
.yard .pad{fill:rgba(182,206,56,.07)}
.yard .fence{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:6 8}
.yard .yl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;fill:var(--green)}
.yard .t rect{fill:none;stroke:var(--on-ink);stroke-width:1.8}
.yard .t text{font-family:var(--mono);font-size:14px;fill:var(--on-ink)}
.yard .t .val{fill:var(--green)}
.yard .idle rect{stroke-dasharray:3 5;opacity:.7}
.yard .gone rect{stroke:var(--green);fill:rgba(182,206,56,.12)}
.yard .dot{fill:var(--green)}
.yard .ping{fill:none;stroke:var(--green);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.yard .track{stroke:var(--green);stroke-width:1.4;stroke-dasharray:3 6;opacity:.6;fill:none}
.yard figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--ink-rule)}
.yard figcaption .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-3)}
.feed{font-family:var(--mono);font-size:13px;color:var(--green);transition:opacity .35s}
@media (prefers-reduced-motion:no-preference){.yard .ping{animation:ping 2.6s ease-out infinite}}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(3.4);opacity:0}}
.fns{display:grid;gap:16px}
.fn{background:rgba(255,255,255,.045);border:1px solid var(--ink-rule);border-radius:var(--r);
  padding:clamp(18px,2vw,24px);display:grid;gap:10px;align-content:start}
.fn .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.fn h3{font-size:clamp(18px,1.7vw,22px);line-height:1.18;color:var(--on-ink)}
.fn p{color:var(--on-ink-2);font-size:15.5px}
.foot-note{margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid var(--ink-rule);
  color:var(--on-ink-3);font-size:14.5px;max-width:86ch}
.on-ink .offer-head h2 .new{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--green);border-radius:999px;padding:4px 9px;margin-bottom:12px}
.on-ink .offer-head p b{color:var(--green);font-weight:600}

/* ---------- the contact form ---------- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact .sub{margin-top:14px;color:var(--on-ink-2);font-size:clamp(17px,1.5vw,20px);max-width:52ch}
.contact .link{color:var(--on-ink);text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:2px}
form.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){form.form{grid-template-columns:1fr}}
form.form .wide{grid-column:1/-1}
form.form label{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--on-ink-2)}
form.form input,form.form select,form.form textarea{width:100%;font:inherit;font-size:16px;color:var(--on-ink);
  background:rgba(255,255,255,.05);border:1px solid var(--ink-rule);border-radius:var(--r);padding:12px 14px}
form.form input:focus,form.form textarea:focus{border-color:var(--green);outline:none}
form.form textarea{min-height:96px;resize:vertical}
form.form .send{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
form.form .send p{font-size:13.5px;color:var(--on-ink-3)}
form.form .hp{position:absolute;left:-9999px}

/* the FAQ list, on the system's rules */
.qs-head{margin-bottom:clamp(28px,3.4vw,44px)}
.qs-head h2{font-size:clamp(28px,3.4vw,44px)}
.qs-head p{margin-top:14px;color:var(--ink-2)}
.qs-head .link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:2px}

/* ============================================================
   The top banner, as daxosfresh.com carries it: a floating pill
   the width of the page's own measure (1180 px), with the photo
   below it on exactly the same width.
   ============================================================ */
html:has(.nav-pill){scroll-padding-top:104px}
.nav.nav-pill{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));
  padding:10px 10px 10px 26px;border:1px solid var(--ink-rule);border-radius:999px;background:rgba(15,17,16,.94);
  backdrop-filter:blur(12px);color:#fff;box-shadow:0 18px 50px -18px rgba(15,17,16,.55)}
.nav-pill .nav-in{max-width:none;padding:0;height:auto;gap:20px}
.nav-pill .brand.lk{flex-direction:row;align-items:center;gap:13px;text-decoration:none}
.nav-pill .brand.lk img{height:34px;width:auto}
.nav-pill .brand.lk strong{font-family:var(--sans);font-weight:400;font-size:25px;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.nav-pill .nav-links{margin-left:auto;gap:24px;align-items:center}
.nav-pill .nav-links a{font-weight:400;font-size:15px;color:#e9ece5;border-bottom:0;padding:0}
.nav-pill .nav-links a:hover{color:var(--green)}
.nav-pill .nav-right{margin-left:0;gap:20px}
.nav-pill .nav-account{display:inline;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;
  color:#eef2ea;opacity:.6;text-decoration:none}
.nav-pill .nav-account:hover{opacity:1;color:var(--green)}
.nav-pill .nav-toggle{font-family:var(--sans);font-size:14.4px;letter-spacing:0;text-transform:none;color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:9px 16px}
.btn-pill{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:4px 5px 4px 20px;border-radius:999px;
  background:var(--green);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.btn-pill b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--green);
  font-weight:500;font-size:16px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn-pill:hover b{transform:rotate(-45deg) scale(1.06)}
.nav-pill ~ main .hero{padding-top:98px}
@media (max-width:1140px){
  .nav-pill .nav-links{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;flex-direction:column;
    align-items:stretch;gap:0;padding:10px 24px 14px;border:1px solid var(--ink-rule);border-radius:22px;
    background:rgba(15,17,16,.97);box-shadow:0 18px 50px -18px rgba(15,17,16,.55)}
  .nav-pill.open .nav-links{display:flex}
  .nav-pill .nav-links a{padding:13px 0;border-bottom:1px solid var(--ink-rule);font-size:16px}
  .nav-pill .nav-links a:last-child{border-bottom:0}
  .nav-pill .nav-right{margin-left:auto;gap:14px}
  .nav-pill .nav-toggle{display:inline-block}
  .nav-pill .nav-right .nav-account{display:inline}
}
@media (max-width:600px){
  .nav.nav-pill{top:10px;width:calc(100% - 20px);padding:6px 6px 6px 16px}
  .nav-pill .brand.lk{gap:8px}
  .nav-pill .brand.lk img{height:24px}
  .nav-pill .brand.lk strong{font-size:17px}
  .nav-pill .nav-right{gap:8px}
  .nav-pill .nav-right .nav-account{display:none}
  .nav-pill .nav-right .btn-pill{display:inline-flex;padding:4px;min-height:0}
  .nav-pill .btn-pill span{display:none}
  .nav-pill .nav-toggle{padding:7px 12px;font-size:13.5px}
  .nav-pill ~ main .hero{padding-top:72px}
}
/* the photo keeps the banner's own width */
.shot{width:min(1180px,calc(100% - 28px))}
@media (max-width:600px){.shot{width:calc(100% - 20px)}}
/* the operating loop sits on the page's own measure, like the banner and the photo */
.beat{width:min(1180px,calc(100% - 28px));margin-inline:auto;padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,32px) clamp(20px,2.6vw,30px);
  border-top:0;border:1px solid var(--rule);border-radius:16px;background:var(--ink)}
@media (max-width:600px){.beat{width:calc(100% - 20px);border-radius:14px}}
/* the pill gets out of the way going down the page, and comes back on the way up */
.nav.nav-pill{transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.nav.nav-pill.hid{transform:translateX(-50%) translateY(calc(-100% - 26px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.nav.nav-pill{transition:none}}
/* the hero sits on ink, as it did before: the photo card and the loop band on black */
.hero{background:var(--ink);padding-bottom:clamp(28px,3.4vw,48px)}
.beat{background:rgba(255,255,255,.045);border-color:var(--ink-rule)}
/* the price band stacks: the two prices, then the note and the button under them */
.prices{grid-template-columns:repeat(2,auto);justify-content:start;
  column-gap:clamp(48px,9vw,140px);row-gap:clamp(24px,3vw,40px);align-items:end}
.prices .r{grid-column:1/-1;max-width:78ch}
.prices .r p{max-width:70ch}
@media (max-width:600px){.prices{grid-template-columns:1fr 1fr;column-gap:24px}}
/* the offer section, in the shape daxosfresh.com uses */
.module .pic{height:104px;display:flex;align-items:center}
.module .pic .art{width:auto;height:96px}
.module .name{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.module .go-on{margin-top:4px;font-weight:700;font-size:15px;text-decoration:none;color:var(--ink);
  display:inline-flex;gap:8px;align-items:center}
.module .go-on:hover{color:var(--green-deep)}
.module li b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);margin-bottom:2px}
.module ul.inline li b{display:inline;font-family:var(--sans);font-size:inherit;letter-spacing:inherit;
  text-transform:none;margin:0}
.service .price small{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3);margin-left:6px}
.offer-cta{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;
  margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--rule)}
.offer-cta p{color:var(--ink-2);max-width:60ch}
.service .top{align-items:baseline}
.service h3{font-size:17px}
.service .price{white-space:nowrap}
.module .pic .glyph{width:auto;height:96px;margin:0}
.module .tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* a page's first heading is an h1 for search engines and screen readers, sized like an h2 */
h1.as-h2{font-size:clamp(28px,3.4vw,44px)}
.qs-head h1.as-h2{font-size:clamp(28px,3.4vw,44px)}

/* the fleet numbers can be typed as well as stepped */
.step .num{width:72px;height:42px;border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  background:#fff;font-family:var(--mono);font-weight:700;font-size:16px;text-align:center;color:var(--ink);-moz-appearance:textfield}
.step .num::-webkit-outer-spin-button,.step .num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step .num:focus{outline:2px solid var(--green);outline-offset:-2px}

/* pages that open with a plain section, not the hero, start below the floating nav */
.nav-pill ~ main > .section:first-child{padding-top:clamp(108px,11vw,148px)}
@media (max-width:760px){.nav-pill ~ main > .section:first-child{padding-top:96px}}

/* ---------- touch targets: thumbs need 44 px, not 16 ---------- */
@media (max-width: 860px) {
  .footer ul li a, .footer .bottom a { display: inline-block; padding: 11px 0; }
  .footer ul { gap: 0; }
  a.link, .caption a, .version a { display: inline-block; padding: 10px 0; }
  .calc .go .link { padding: 12px 0; }
  .nav-pill .nav-toggle { min-height: 44px; padding: 11px 14px; }
  .skip { min-height: 44px; display: inline-flex; align-items: center; }
}
/* lime on ink, not the paper lime, wherever a marker sits on a dark panel */
.summary .marker, .on-ink .marker { color: var(--green); }
@media (max-width: 860px) { a.go-on { display: inline-flex; min-height: 44px; align-items: center; } }