/* vanbelkum.us — product-page additions on top of help.css (copied from the
   vanbelkum.help portal: tokens, Figtree, header, bands, tiles, rows, footer).
   Same register: one typeface, one accent, flat surfaces, depth from photos.
   Mobile-first; 16px gutters on phones. */
:root{ --gutter:16px; --plate:#F2F7FA; --confirm:#FFE14D; --confirm-ink:#3D3100; }
@media (min-width:720px){ :root{ --gutter:24px; } }
html,body{ overflow-x:hidden; }

/* Buttons: squared to the house radius on this site (no pills). */
.btn{ border-radius:var(--r); }
.btn--accent{ background:var(--accent); border-color:var(--accent); }
.btn--accent:hover{ background:var(--accent-dark); border-color:var(--accent-dark); opacity:1; }

/* Header: brand, short nav, one action. */
.top__row{ grid-template-columns:auto 1fr auto; }
.top__nav{ justify-content:flex-end; }
@media (max-width:720px){
  .top__row{ flex-wrap:nowrap; padding:12px 0; }
  .top__tools .btn{ height:40px; padding:0 16px; }
}

/* TO CONFIRM: open questions for Todd. Loud on purpose; clear before launch. */
.confirm{ display:inline; background:var(--confirm); color:var(--confirm-ink); font-size:.86em; font-weight:500; line-height:1.5; padding:.1em .45em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.confirm::before{ content:"TO CONFIRM"; font-size:.78em; font-weight:700; letter-spacing:.06em; margin-right:.5em; }
.band--dark .confirm{ color:var(--confirm-ink); }
.confirm a{ color:inherit; text-decoration:underline; }

/* Section rhythm. */
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.band--dark .eyebrow{ color:#8CC2FF; }
.lead{ font-size:18px; line-height:1.55; color:var(--muted); max-width:58ch; }
.band--dark .lead{ color:rgba(255,255,255,.76); }
.section-head{ margin-bottom:32px; }
.section-head .lead{ margin-top:14px; }
.prose p{ color:var(--muted); font-size:16.5px; line-height:1.6; max-width:62ch; }
.prose p + p{ margin-top:12px; }
.prose b{ color:var(--fg); font-weight:600; }
.band--dark .prose p{ color:rgba(255,255,255,.76); }
.band--dark .prose b{ color:#fff; }

/* Product intro: copy beside the photograph on a plate matched to its backdrop. */
.intro{ padding:32px 0 56px; }
.intro__grid{ display:grid; gap:32px; }
.intro h1{ max-width:16ch; }
.intro .lead{ margin-top:16px; }
.intro__cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px; }
.intro__cta .confirm{ flex-basis:100%; }
.intro__plate{ background:var(--plate); border-radius:var(--r); display:grid; place-items:center; padding:16px; }
.intro__plate.photo img{ width:auto; max-width:100%; max-height:min(72vh,620px); height:auto; object-fit:contain; }
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:32px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.facts div{ background:#fff; padding:14px 16px; }
.facts b{ display:block; font-size:20px; font-weight:600; line-height:1.15; }
.facts span{ display:block; font-size:13px; color:var(--muted); margin-top:4px; }
@media (min-width:960px){
  .intro{ padding:48px 0 80px; }
  .intro__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
  .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* On-this-page jump links: wraps, never scrolls sideways. */
.jump{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.jump ul{ list-style:none; margin:0; padding:10px 0; display:flex; flex-wrap:wrap; gap:4px 20px; }
.jump a{ font-size:14px; font-weight:500; color:var(--muted); line-height:32px; white-space:nowrap; }
.jump a:hover{ color:var(--accent); }

/* Uses: three plain columns, icon, heading, sentence. */
.uses{ display:grid; gap:32px; }
@media (min-width:720px){ .uses{ grid-template-columns:repeat(3,1fr); } }
.use__ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r); background:#fff; color:var(--ink); margin-bottom:16px; }
.band--dark .use__ico{ background:var(--ink-3); color:#fff; }
.use__ico svg, .row__ico svg{ width:26px; height:26px; }
.use h3{ font-size:20px; }
.use p{ color:var(--muted); font-size:15.5px; line-height:1.55; margin-top:8px; }

/* Photo beside content. */
.split{ display:grid; gap:32px; align-items:start; }
@media (min-width:960px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
  .split--rev > :first-child{ order:2; }
}
.photo{ margin:0; }
.photo img{ width:100%; height:auto; border-radius:var(--r); }
.photo figcaption{ font-size:13px; color:var(--muted-2); margin-top:8px; }
.band--dark .photo figcaption{ color:rgba(255,255,255,.6); }
.photo--plate{ background:var(--plate); border-radius:var(--r); padding:16px; }
.photos2{ display:grid; gap:16px; }
@media (min-width:720px){ .photos2{ grid-template-columns:1fr 1fr; } }

/* Rows from help.css, without the trailing link column. */
.rows--plain .row{ grid-template-columns:48px 1fr; padding:20px 0; }
.rows--plain .row h3{ font-size:18px; }
.rows--plain .row:hover h3{ color:var(--fg); }
a.row:hover h3{ color:var(--accent); }

/* Tables: the portal's .compare, plus a two-column spec variant. */
.tablewrap{ margin-top:8px; }
.compare{ min-width:0; }
.compare--wide{ min-width:560px; }
.compare td b{ color:var(--fg); font-weight:600; }
.compare .yes{ color:var(--fg); }
.specs tbody th{ width:34%; }
@media (max-width:560px){
  .specs, .specs tbody, .specs tr, .specs th, .specs td{ display:block; width:auto !important; }
  .specs tr{ border-bottom:1px solid var(--line); padding:12px 14px; }
  .specs tr:last-child{ border-bottom:0; }
  .specs th, .specs td{ padding:0; border:0; }
  .specs td{ margin-top:4px; }
}
.subhead{ font-size:20px; font-weight:600; margin:40px 0 12px; }
.note{ margin-top:16px; }

/* Checklists (Verkada, warranty). Hairlines, a small check glyph. */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:0 40px; }
@media (min-width:720px){ .checks--2{ grid-template-columns:1fr 1fr; } }
.checks li{ position:relative; padding:12px 0 12px 30px; border-bottom:1px solid var(--line); font-size:16px; line-height:1.5; color:var(--muted); }
.checks li::before{ content:""; position:absolute; left:2px; top:17px; width:14px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); border-radius:1px; }
.checks li b{ color:var(--fg); font-weight:600; }
.band--dark .checks li{ color:rgba(255,255,255,.78); border-color:var(--line-dark); }
.band--dark .checks li b{ color:#fff; }
.band--dark .checks li::before{ border-color:#8CC2FF; }

/* Two-up columns for warranty. */
.cols{ display:grid; gap:40px; }
@media (min-width:960px){ .cols{ grid-template-columns:1fr 1fr; gap:56px; } }
.cols h3{ font-size:20px; font-weight:600; margin-bottom:8px; }
.fine{ font-size:13px; color:var(--muted-2); margin-top:12px; }

/* Contact block. */
.assist__lines{ display:grid; gap:10px; margin-top:20px; }
.assist__lines a{ font-weight:500; }
.assist .assist__phone{ margin-top:0; }

/* Tile plate for cutout or light-backdrop product photos. */
.tile__plate--light{ background:var(--plate); }
.tile__plate.tile__plate--light img{ position:absolute; inset:6%; width:88%; height:88%; object-fit:contain; }
.tile--soon .tile__plate--light{ background:#E3E8EC; }
.tiles--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:720px){ .tiles--2{ grid-template-columns:1fr; } }
.soon{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:2px 8px; margin-left:8px; vertical-align:middle; }

/* Home. */
.home{ padding:56px 0 64px; }
.home .lead{ margin-top:16px; }
.home .rows{ margin-top:40px; }

/* Field photos: four real shots of a deployed trailer. */
.field{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:880px){ .field{ grid-template-columns:repeat(4,1fr); } }
.field .photo img{ aspect-ratio:3/5; object-fit:cover; object-position:50% 20%; }
.field__cap{ font-size:13px; color:var(--muted-2); margin-top:10px; }

/* Phone-app screenshots: always two across so tall screens stay short on phones. */
.photos2--screens{ grid-template-columns:1fr 1fr; max-width:560px; }
.photos2--screens .photo--plate{ padding:12px; }
/* Product tiles that are not links (Starpeer phones). */
div.tile:hover h3{ color:var(--fg); }