/* RV Shop Desk, rvdesk.com. Light, bright, photo-led.
   Anthony, 2026-09-26: "drastically improve the design, front page and
   lighten it up ... maximize the quality looks." One stylesheet, no build
   step, shared by index, privacy, terms and 404.
   The home page carries this file and pages.css INLINE: after editing either,
   run tools/rvdesk-blog/build.py, which re-inlines them into index.html. */

/* Fonts, self-hosted (2026-09-29 speed pass): the same Google Fonts files,
   Inter trimmed to 400-700. The Fallback faces are Arial rescaled to each
   font's measured metrics so the swap does not move the hero. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');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}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/rajdhani-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/rajdhani-600-latin.woff2) format('woff2');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}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rajdhani-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rajdhani-700-latin.woff2) format('woff2');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}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:105.93%;ascent-override:91.45%;descent-override:22.77%;line-gap-override:0%}
@font-face{font-family:'Rajdhani Fallback';src:local('Arial Bold'),local('Arial');font-weight:700;size-adjust:84.85%;ascent-override:109.61%;descent-override:40.78%;line-gap-override:0%}

:root{
  --bg:#fbfaf7;
  --bg2:#f3f1ea;
  --card:#ffffff;
  --ink:#0f1f1e;
  --ink2:#4a5a58;
  --ink3:#7b8a88;
  --line:#e6e2d8;
  --teal:#0f766e;
  --teal2:#0b5f58;
  --teal-soft:#e3f3f0;
  --sun:#f59e0b;
  --sun2:#d97706;
  --sun-soft:#fff4dc;
  --sky:#e8f3fb;
  --radius:20px;
  --shadow-sm:0 1px 2px rgba(15,31,30,.06),0 2px 8px rgba(15,31,30,.05);
  --shadow:0 2px 6px rgba(15,31,30,.05),0 18px 40px -12px rgba(15,31,30,.18);
  --shadow-lg:0 30px 80px -20px rgba(15,31,30,.35);
  --display:"Rajdhani","Rajdhani Fallback","Arial Narrow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.005em}
p{margin:0}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:var(--ink);color:#fff;border-radius:10px;z-index:100}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:0;font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold,.btn-primary{background:var(--teal);color:#fff;box-shadow:0 8px 20px -8px rgba(15,118,110,.7)}
.btn-gold:hover,.btn-primary:hover{background:var(--teal2)}
.btn-sun{background:var(--sun);color:#1f1300;box-shadow:0 8px 20px -8px rgba(217,119,6,.7)}
.btn-sun:hover{background:#fbb13a}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink3)}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(230,226,216,.7)}
.hdr .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 19px/1 var(--sans);color:var(--ink);text-decoration:none;letter-spacing:-.01em;margin-right:auto}
.brand img{width:auto;height:44px;display:block}
/* "RV Shop Desk" runs 242px at 44px tall; on the narrowest phones step it down so the menu button keeps its room. */
@media (max-width:359px){.hdr .brand img{height:36px}}
.nav{display:none;gap:28px}
.nav a{color:var(--ink2);text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover{color:var(--ink)}
.hdr-signin{display:none;color:var(--ink2);text-decoration:none;font-size:15px;font-weight:500}
.hdr-signin:hover{color:var(--ink)}
@media (min-width:960px){.nav{display:flex;margin-right:12px}.hdr-signin{display:inline}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#eaf4fb 0%,var(--bg) 100%)}
.hero-media{position:absolute;inset:0}
.hero-media picture{display:contents}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 75%}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(251,250,247,.97) 0%,rgba(251,250,247,.9) 34%,rgba(251,250,247,.35) 60%,rgba(251,250,247,0) 78%),
  linear-gradient(0deg,var(--bg) 0%,rgba(251,250,247,0) 22%)}
@media (max-width:899px){
  .hero-media::after{background:linear-gradient(180deg,rgba(251,250,247,.55) 0%,rgba(251,250,247,.92) 42%,var(--bg) 70%)}
  .hero-media img{object-position:60% 30%}
}
.hero .wrap{position:relative;display:grid;gap:40px;padding-top:56px;padding-bottom:72px}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr;align-items:center;padding-top:96px;padding-bottom:120px}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:var(--shadow-sm);font-size:14px;font-weight:600;color:var(--teal2)}
.pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18);margin-left:6px}
.hero h1{margin-top:20px;font-size:clamp(42px,6.4vw,76px);line-height:1.02}
.hero h1 em{font-style:normal;color:var(--teal)}
.lede{margin-top:20px;max-width:560px;font-size:clamp(18px,1.6vw,20px);color:var(--ink2)}

.optin{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;max-width:520px;padding:6px;background:#fff;border-radius:999px;box-shadow:var(--shadow)}
.optin input[type=email]{flex:1 1 220px;min-width:0;min-height:48px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:16px var(--sans);color:var(--ink)}
.optin input[type=email]:focus{outline:none}
.optin:focus-within{box-shadow:0 0 0 3px rgba(15,118,110,.25),var(--shadow)}
@media (max-width:480px){.optin{border-radius:22px}.optin .btn{flex:1 1 100%}}
.fine{margin-top:12px;font-size:14px;color:var(--ink3)}
.ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:15px;color:var(--ink2);font-weight:500}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks svg{width:18px;height:18px;color:var(--teal);flex:none}

/* ---------- the app mock in the hero ---------- */
.mock{position:relative;justify-self:center;width:100%;max-width:460px}
.mock-card{background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);padding:18px;border:1px solid rgba(230,226,216,.8)}
.mock-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.mock-top img{width:28px;height:28px}
.mock-top b{font-size:15px}
.mock-top span{margin-left:auto;font-size:12px;color:var(--ink3)}
.mock-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mock-stats div{background:var(--bg);border-radius:14px;padding:10px 8px;text-align:center}
.mock-stats b{display:block;font:700 22px/1.1 var(--sans);letter-spacing:-.02em}
.mock-stats span{font-size:11px;color:var(--ink3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.mock-stats .hot b{color:var(--sun2)}
.mock-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.mock-tile{border-radius:14px;border:1px solid var(--line);overflow:hidden;background:#fff}
.mock-tile img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#eef1f0}
.mock-tile span{display:block;padding:4px 8px 7px;font-size:12px;font-weight:700}
.mock-tile small{float:right;color:var(--teal);font-weight:700}
.mock-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--bg)}
.mock-row .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);flex:none}
.mock-row .dot.sun{background:var(--sun)}
.mock-row p{font-size:13px;line-height:1.35}
.mock-row p b{display:block;font-size:14px}
.mock-row .amt{margin-left:auto;font-weight:700;font-size:14px}
.toast{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-radius:16px;box-shadow:var(--shadow);font-size:13px;line-height:1.3;max-width:250px}
.toast .ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--teal-soft);color:var(--teal);flex:none}
.toast .ico.sun{background:var(--sun-soft);color:var(--sun2)}
.toast svg{width:18px;height:18px}
.toast b{display:block;font-size:14px}
.toast-a{left:-36px;top:-58px}
.toast-b{right:-22px;bottom:-26px}
@media (max-width:560px){.toast-a{left:-6px}.toast-b{right:-6px}}
@media (prefers-reduced-motion:no-preference){
  .toast-a{animation:float 6s ease-in-out infinite}
  .toast-b{animation:float 6s ease-in-out -3s infinite}
  @keyframes float{50%{transform:translateY(-8px)}}
}

/* ---------- pillars band ---------- */
.band{position:relative;margin-top:-40px;z-index:2}
.pillars{display:grid;gap:14px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
@media (min-width:768px){.pillars{grid-template-columns:repeat(3,1fr);padding:28px 32px;gap:32px}}
.pillar{display:flex;gap:14px;align-items:flex-start}
.pillar .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--teal-soft);color:var(--teal);flex:none}
.pillar:nth-child(2) .ico{background:var(--sun-soft);color:var(--sun2)}
.pillar:nth-child(3) .ico{background:var(--sky);color:#1d6fa5}
.pillar svg{width:22px;height:22px}
.pillar b{display:block;font-size:17px}
.pillar span{font-size:15px;color:var(--ink2);line-height:1.45}

/* ---------- sections ---------- */
section{padding:88px 0}
/* Sections below the hero skip style and layout until they near the viewport
   (speed pass 2026-09-29): first paint was waiting on layout of the whole page.
   Not #faq: its closed answers hold links that axe then reports as obscured. */
main>section:not(#faq){content-visibility:auto;contain-intrinsic-size:auto 900px}
@media (min-width:900px){section{padding:120px 0}}
.sec-alt{background:var(--bg2)}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-top:12px;font-size:clamp(34px,4.4vw,52px)}
.sec-head p{margin-top:16px;font-size:19px;color:var(--ink2)}

/* what you get: big photo cards */
.get{display:grid;gap:22px}
@media (min-width:900px){.get{grid-template-columns:repeat(3,1fr)}}
.get-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease}
.get-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.get-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.get-card div{padding:22px 24px 26px}
.get-card .num{font:600 13px var(--sans);color:var(--teal);letter-spacing:.08em}
.get-card h3{margin-top:6px;font-size:22px}
.get-card p{margin-top:10px;color:var(--ink2);font-size:16px}

/* split feature rows */
.split{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:72px}.split.rev .split-media{order:2}}
.split + .split{margin-top:96px}
.split-media{position:relative}
.split-media > img{border-radius:24px;box-shadow:var(--shadow);width:100%;aspect-ratio:5/4;object-fit:cover}
.split h3{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,40px)}
.split p{margin-top:14px;color:var(--ink2);font-size:18px}
.checks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.float-card{position:absolute;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:14px 16px;font-size:14px;line-height:1.35}
.float-card b{display:block;font-size:15px}
.float-card.fc-1{left:-14px;bottom:-22px;max-width:240px}
.float-card.fc-2{right:-14px;top:-18px}
@media (min-width:900px){.float-card.fc-1{left:-28px}.float-card.fc-2{right:-28px}}
.sig{font-family:"Brush Script MT","Segoe Script",cursive;font-size:24px;color:var(--teal2);line-height:1}
.fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fleet div{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.fleet img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#eef1f0}
.photo-note{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink2)}
.photo-note a{color:inherit}
.fleet span{display:flex;justify-content:space-between;padding:4px 12px 10px;font-size:14px;font-weight:700}
.fleet small{color:var(--teal)}

/* how it works: steps */
.steps{display:grid;gap:18px;counter-reset:step}
@media (min-width:768px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:#fff;border-radius:var(--radius);padding:26px 24px 28px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font:700 17px var(--sans)}
.step h3{margin-top:18px;font-size:19px}
.step p{margin-top:8px;color:var(--ink2);font-size:15.5px}

/* feature grid */
.feats{display:grid;gap:18px}
@media (min-width:640px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.feats{grid-template-columns:repeat(3,1fr)}}
.feat{padding:26px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.feat .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal)}
.feat svg{width:22px;height:22px}
.feat h3{margin-top:16px;font-size:18px}
.feat p{margin-top:8px;color:var(--ink2);font-size:15.5px}

/* audience chips */
.aud-grid{display:grid;gap:14px}
@media (min-width:640px){.aud-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.aud-grid{grid-template-columns:repeat(3,1fr)}}
.aud{position:relative;border-radius:var(--radius);overflow:hidden;min-height:260px;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm)}
.aud img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.aud:hover img{transform:scale(1.04)}
.aud::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,20,19,.82) 0%,rgba(8,20,19,.2) 55%,rgba(8,20,19,0) 75%)}
.aud div{position:relative;z-index:1;padding:22px}
.aud h3{font-size:21px}
.aud p{margin-top:6px;font-size:15px;opacity:.92}
.aud.main{min-height:340px}
@media (min-width:1000px){.aud.main{grid-column:span 2}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.stat b{display:block;font:700 34px/1 var(--display);color:var(--teal2)}
.stat span{display:block;margin-top:8px;font-size:15px;color:var(--ink2)}

/* pricing */
.pricing{display:grid;gap:24px;align-items:stretch}
@media (min-width:960px){.pricing{grid-template-columns:1.1fr .9fr}}
.calc,.incl{background:#fff;border-radius:24px;padding:32px;border:1px solid var(--line);box-shadow:var(--shadow)}
.calc h3,.incl h3{font-size:20px}
.calc-amt{display:flex;align-items:baseline;gap:8px;margin-top:18px}
.calc-amt b{font:700 clamp(56px,8vw,80px)/1 var(--display);letter-spacing:-.01em}
.calc-amt span{font-size:18px;color:var(--ink2)}
.calc-note{margin-top:6px;color:var(--ink2);min-height:1.6em}
.calc-note.cap{color:var(--teal2);font-weight:600}
.range{margin-top:26px}
.range label{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.range output{color:var(--teal2)}
.range input{width:100%;margin-top:12px;accent-color:var(--teal);height:28px}
.range .scale{display:flex;justify-content:space-between;font-size:13px;color:var(--ink3)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.tiers div,.tiers a{padding:14px 10px;border-radius:14px;background:var(--bg);text-align:center;color:inherit;text-decoration:none;border:2px solid transparent}
.tiers a:hover,.tiers a.on{border-color:var(--teal,#0f766e)}
.tiers b{display:block;font-size:14px}
.tiers span{font-size:15px;color:var(--ink2)}
.calc > .btn{margin-top:22px}
.incl ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.incl li{display:flex;gap:12px;font-size:16px}
.incl li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.calc .optin{box-shadow:none;background:var(--bg);margin-top:26px;max-width:none}

/* faq */
.faq{max-width:820px;margin:0 auto}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:600;font-size:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg2);font-size:20px;font-weight:500;color:var(--teal2);transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--ink2);font-size:16.5px}

/* closing call to action */
.cta{position:relative;overflow:hidden;border-radius:28px;color:#fff;padding:72px 28px;text-align:center;box-shadow:var(--shadow-lg)}
.cta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,40,37,.35),rgba(8,40,37,.72))}
.cta > div{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta h2{font-size:clamp(34px,4.6vw,54px)}
.cta p{margin-top:14px;font-size:19px;opacity:.92}
.cta .optin{margin:28px auto 0}
.cta .fine{color:rgba(255,255,255,.8)}
.cta-wrap{padding:0 0 96px}

/* footer */
.ftr{border-top:1px solid var(--line);background:#fff;padding:36px 0;font-size:14px;color:var(--ink3)}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.ftr .brand{font-size:16px;margin-right:auto}
.ftr .brand img{width:auto;height:36px}
.ftr a{color:var(--ink2);text-decoration:none}
.ftr a:hover{color:var(--ink)}
.ftr .coop{flex-basis:100%;order:9}

/* legal pages and 404 */
.legal{max-width:780px;padding-top:56px;padding-bottom:96px}
.legal h1{font-size:clamp(34px,5vw,48px)}
.legal h2{margin-top:36px;font-size:24px}
.legal p,.legal li{color:var(--ink2);margin-top:12px}
.legal ul{padding-left:22px}
.legal ul.res{list-style:none;padding-left:0}
.res li{padding:12px 0;border-bottom:1px solid var(--line);margin-top:0}
.res li a{font-weight:600;color:var(--ink)}
.res li span{display:block;margin-top:2px}

/* On a phone the app preview sits under the form; give the floating
   "texted back" card room so it does not land on the ticks above it. */
@media (max-width:899px){.mock{margin-top:44px}}

/* ---------- the software: a browser frame and a row of phones ---------- */
.browser{margin:0 auto;max-width:1060px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#e2ddd0}
.browser-bar i:nth-child(1){background:#f87171}.browser-bar i:nth-child(2){background:#fbbf24}.browser-bar i:nth-child(3){background:#34d399}
.browser-bar span{margin-left:14px;padding:4px 14px;border-radius:999px;background:#fff;font-size:13px;color:var(--ink3)}
.browser img{width:100%;aspect-ratio:1280/620;object-fit:cover;object-position:top left}
.phones{display:flex;gap:22px;margin-top:56px;padding:6px 20px 24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-left:-20px;margin-right:-20px}
@media (min-width:1100px){.phones{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;margin-left:0;margin-right:0;padding:6px 0 0}}
.phone{flex:0 0 220px;margin:0;scroll-snap-align:center}
.phone-screen{border-radius:30px;padding:8px;background:#11201f;box-shadow:var(--shadow)}
/* The screen keeps a phone's shape and shows each render from the top at
   full width: a long screen is cut at the bottom like a real scroll, and a
   short one (invoices) sits on the app's own background instead of being
   zoomed until it is unreadable. */
.phone-screen > div{aspect-ratio:9/17;overflow:hidden;border-radius:23px;background:#f4f5f1}
.phone-screen img{width:100%;height:auto}
.phone figcaption{margin-top:14px;font-size:14px;color:var(--ink2);line-height:1.45}
.phone figcaption b{display:block;font-size:15px;color:var(--ink)}
.phone figcaption em{font-style:normal;color:var(--sun2);font-weight:600}

/* "Watch the overview" link in the hero, and the page videos */
.watch{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:600;color:var(--ink);text-decoration:none}
.watch .play{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sun);color:#1f1300;box-shadow:0 8px 20px -8px rgba(217,119,6,.7)}
.watch .play svg{width:16px;height:16px;margin-left:2px}
.watch:hover{color:var(--teal)}
.demo{padding-bottom:0}
.video{margin:0 auto;max-width:1060px;border-radius:18px;overflow:hidden;background:#0f1f1e;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0f1f1e}
.video.is-vertical{max-width:380px}
.video.is-vertical video{aspect-ratio:9/16}
.yt-link{margin:12px 0 0;text-align:center;font-size:14px;color:var(--ink3)}
.yt-link a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- mobile pass (2026-09-27) ---------- */
/* Grid children default to min-width:auto, so one wide child (the fleet
   slider, a floating card) pushed the pricing cards and split images past a
   320px screen and the whole page scrolled sideways. */
.pricing > *,.split > *,.get > *,.feats > *{min-width:0}
/* Check rows: a link inside an li that is display:flex becomes its own flex
   item, so "Works for rental fleets and repair shops" broke into columns.
   Keep the tick as a positioned mark and let the text flow as one line. */
.checks li,.incl li{display:block;position:relative;padding-left:34px}
.checks li::before,.incl li::before{position:absolute;left:0;top:2px;margin:0}
/* Links that sit on a photo or a dark panel need to read as white. */
.aud a,.cta a:not(.btn){color:#fff}
@media (max-width:480px){
  .calc,.incl{padding:24px 18px;border-radius:20px}
  .tiers{gap:6px}
  .tiers div,.tiers a{padding:12px 4px}
  .tiers b{font-size:13px}
  .tiers span{font-size:14px;white-space:nowrap}
  .cta{padding:56px 20px}
  .float-card.fc-1{left:-4px}
  .float-card.fc-2{right:-4px}
  /* Footer and legal links: give each a finger-sized target. */
  .ftr a{display:inline-block;padding:7px 0}
  .ftr .coop a{display:inline;padding:0}
  .hdr .brand{padding:6px 0}
}