/* ===========================================================================
   Rental fleet software. Marketing site.

   One accent (deep pine), one radius scale (4px family), one theme that
   follows the reader's system preference. Screenshots carry the page, so the
   type and the chrome stay quiet.
   =========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg:            #f6f7f6;
  --bg-raised:     #ffffff;
  --bg-sunken:     #eceeec;
  --ink:           #141714;
  --ink-2:         #46504a;
  --ink-3:         #6d7a73;
  --line:          #d9ded9;
  --line-strong:   #b9c2bb;
  --accent:        #0d6a51;
  --accent-ink:    #ffffff;
  --accent-wash:   #e3efe9;
  --shadow:        0 1px 2px rgba(20, 30, 24, .05), 0 12px 32px -12px rgba(20, 30, 24, .18);

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;

  --page: 1240px;
  --gap:  clamp(1rem, 2.5vw, 2rem);

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 1.7vw, 3rem);
  --step-4:  clamp(2.5rem, 1.9rem + 2.8vw, 4.2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0e100f;
    --bg-raised:   #171a18;
    --bg-sunken:   #090a09;
    --ink:         #eef1ee;
    --ink-2:       #adb8b1;
    --ink-3:       #7f8b84;
    --line:        #272c29;
    --line-strong: #3b423e;
    --accent:      #4cc39c;
    --accent-ink:  #06120e;
    --accent-wash: #142a22;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .7);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 560; text-wrap: balance; }
h1 { font-size: var(--step-4); letter-spacing: -.03em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.014em; }
h4 { font-size: var(--step-0); font-weight: 600; }
p  { margin: 0; text-wrap: pretty; }
a  { color: inherit; }

.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; font-feature-settings: 'zero'; }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 58ch; line-height: 1.45; }
.body { color: var(--ink-2); max-width: 68ch; }
.dim  { color: var(--ink-3); }

section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
section + section { border-top: 1px solid var(--line); }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: 68px;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 1.75rem; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.brand svg { display: block; }

.nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.nav a {
  text-decoration: none; color: var(--ink-2); font-size: var(--step--1);
  white-space: nowrap; padding-block: .35rem;
  border-bottom: 1.5px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }

.langswitch {
  font-family: 'Geist Mono', monospace; font-size: .72rem; letter-spacing: .06em;
  text-decoration: none; color: var(--ink-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .28rem .5rem;
}
.langswitch:hover { color: var(--ink); border-color: var(--ink-3); }

.menutoggle { display: none; }

@media (max-width: 1180px) {
  .nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-raised); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1rem;
  }
  .nav a { padding-block: .7rem; border-bottom: 1px solid var(--line); font-size: var(--step-0); }
  .topbar:has(.menutoggle:checked) .nav { display: flex; }
  .menuicon {
    display: flex; align-items: center; margin-left: auto; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .35rem .55rem;
    font-size: var(--step--1);
  }
}
@media (min-width: 1181px) { .menuicon { display: none; } }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem; border-radius: var(--r);
  font-size: var(--step--1); font-weight: 550; text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--bg-raised); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.btnrow { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --- hero --------------------------------------------------------------- */

.hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 49fr) minmax(0, 51fr); } }
.hero h1 { font-size: clamp(2.4rem, 1.6rem + 2.3vw, 3.3rem); max-width: 24ch; }
.hero .lede { margin-top: 1.25rem; }
.hero .btnrow { margin-top: 1.9rem; }

.eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}

/* --- page header (inner pages) ------------------------------------------ */

.pagehead { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.pagehead h1 { font-size: var(--step-3); max-width: 20ch; }
.pagehead .lede { margin-top: 1.1rem; }

/* --- screenshots -------------------------------------------------------- */

figure { margin: 0; }
.shot {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg-raised); box-shadow: var(--shadow);
}
.shot img { display: block; width: 100%; height: auto; }
/* Clip a tall screenshot at the fold instead of shrinking it. The height lives
   on the container, not on the img: a fixed img height also crops sideways, so
   a wide short crop (a toolbar, a page fold) came out sliced down the middle. */
.shot--crop { max-height: 620px; }
figcaption { margin-top: .8rem; font-size: var(--step--1); color: var(--ink-3); max-width: 62ch; }

/* --- stat strip --------------------------------------------------------- */

.stats { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .stats { grid-template-columns: repeat(6, 1fr); } }
.stat { background: var(--bg); padding: 1.4rem 1.1rem; }
.stat b { display: block; font-family: 'Geist Mono', monospace; font-size: var(--step-2); font-weight: 500; letter-spacing: -.03em; }
.stat span { display: block; margin-top: .3rem; font-size: var(--step--1); color: var(--ink-3); line-height: 1.35; }

/* --- bento -------------------------------------------------------------- */

.bento { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
.bento > * { grid-column: span 6; }
@media (min-width: 780px) {
  .bento > *          { grid-column: span 3; }
  .bento > .cell-wide { grid-column: span 6; }
  .bento > .cell-third{ grid-column: span 2; }
}
.cell {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; background: var(--bg-raised);
  display: flex; flex-direction: column; gap: .65rem;
}
.cell h3 { font-size: var(--step-0); font-weight: 600; }
.cell p  { color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.cell--accent { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cell--sunken { background: var(--bg-sunken); }
.cell--media  { padding: 0; overflow: hidden; }
.cell--media img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: top left; }
.cell--split { flex-direction: row; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cell--split > div { flex: 1 1 260px; }

/* --- grouped feature columns (for long lists) --------------------------- */

.groups { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px)  { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .groups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.group h3 { margin-bottom: .85rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line-strong); }
.group dl { margin: 0; display: grid; gap: .9rem; }
.group dt { font-weight: 560; font-size: var(--step--1); }
.group dd { margin: .15rem 0 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }

/* --- rows (report table style) ------------------------------------------ */

.rows { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-raised); }
.row { display: grid; gap: .35rem 1.25rem; padding: 1.05rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; } }
.row + .row { border-top: 1px solid var(--line); }
.row > b { font-weight: 560; }
.row > span { color: var(--ink-2); font-size: var(--step--1); }

/* --- accordion ---------------------------------------------------------- */

.deep { border-top: 1px solid var(--line); }
.deep details { border-bottom: 1px solid var(--line); }
.deep summary {
  cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 550; list-style: none;
}
.deep summary::-webkit-details-marker { display: none; }
.deep summary::after {
  content: '+'; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  font-family: 'Geist Mono', monospace; color: var(--ink-3); font-size: 1.2rem;
}
.deep details[open] summary::after { content: '\2013'; }
.deep summary:hover { color: var(--accent); }
.deep .inner { padding: 0 0 1.4rem; display: grid; gap: .9rem; max-width: 76ch; }
.deep .inner p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }

/* --- principle callout -------------------------------------------------- */

.principle { border-left: 3px solid var(--accent); padding: .4rem 0 .4rem 1.5rem; max-width: 46ch; }
.principle p { font-size: var(--step-2); line-height: 1.25; letter-spacing: -.02em; }
.principle .body { margin-top: 1rem; font-size: var(--step-0); }

/* --- alternating feature blocks ----------------------------------------- */

.feature { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) {
  .feature { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  .feature--flip > :first-child { order: 2; }
}
.feature + .feature { margin-top: clamp(3rem, 6vw, 5rem); }
.feature h3 { font-size: var(--step-2); }
.feature .body { margin-top: .9rem; }
.feature ul { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.feature li { padding-left: 1.3rem; position: relative; color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.feature li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .45rem; height: .45rem; border-radius: 1px; background: var(--accent);
}

/* --- pricing ------------------------------------------------------------ */

.price-panel {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg-raised); padding: clamp(1.75rem, 4vw, 3rem);
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) { .price-panel { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: 3rem; } }
.price-figure { font-family: 'Geist Mono', monospace; font-size: clamp(3.5rem, 9vw, 6rem); line-height: .95; letter-spacing: -.05em; font-weight: 500; }
.price-figure sup { font-size: .32em; vertical-align: super; letter-spacing: 0; }
.price-of { margin-top: .6rem; font-size: var(--step-1); letter-spacing: -.02em; }
.price-panel dl { margin: 0; display: grid; gap: 1.1rem; }
.price-panel dt { font-weight: 560; }
.price-panel dd { margin: .2rem 0 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }

.ledger { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.ledger th, .ledger td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.ledger th { font-weight: 560; color: var(--ink-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.ledger td:last-child, .ledger th:last-child { text-align: right; font-family: 'Geist Mono', monospace; }
.ledger tr:last-child td { border-bottom: 0; font-weight: 600; }
.tablescroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raised); }

/* --- contact form ------------------------------------------------------- */

.form { display: grid; gap: 1.2rem; max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--step--1); font-weight: 550; }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--step--1); color: var(--ink);
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: .65rem .8rem; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field :is(input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field small { color: var(--ink-3); font-size: .78rem; }

/* --- closing band ------------------------------------------------------- */

.band { background: var(--bg-sunken); }
.band .wrap { display: grid; gap: 1.5rem; align-items: end; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .band .wrap { grid-template-columns: minmax(0, 1fr) auto; } }
.band h2 { max-width: 20ch; }

/* --- footer ------------------------------------------------------------- */

footer { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; font-size: var(--step--1); }
.footgrid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px)  { .footgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footgrid { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.footgrid h4 { margin-bottom: .7rem; color: var(--ink-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 550; }
.footgrid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.footgrid a { color: var(--ink-2); text-decoration: none; }
.footgrid a:hover { color: var(--ink); }
.footnote { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* --- scroll reveal ------------------------------------------------------

   Driven by the scroll position itself, not by a script. The first version set
   opacity to 0 in CSS and cleared it from an IntersectionObserver, which meant
   any page whose observer did not fire rendered blank sections: a full-page
   screenshot did exactly that. Here the hidden state only exists inside the
   @supports block, so a browser without scroll-driven animations, or a reader
   who asked for less motion, simply gets the page.                          */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section > .wrap,
    main > .stats {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Printing has no scroll, so a view() timeline would leave every section at 0%
   opacity and the page would come out blank. */
@media print {
  main > section > .wrap, main > .stats { animation: none !important; opacity: 1 !important; transform: none !important; }
  .topbar { position: static; }
}