/* VanBelkum Help — portal chrome shared by the home page and the product hubs.
   Register: refined product-catalogue. One typeface, one accent, flat surfaces,
   depth from imagery, alternating light and dark bands, colour-only hovers. */
:root{
  --ink:#0B1A26; --ink-2:#12283A; --ink-3:#1B3448;
  --fg:#0B1A26; --muted:#5B6B78; --muted-2:#6E7D8A;
  --bg:#FFFFFF; --bg-2:#EEF2F5; --card:#F3F6F9; --line:#DDE3E8; --line-dark:rgba(255,255,255,.14);
  --accent:#1A6FD1; --accent-dark:#12529E;
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --r:6px;
  --container:1216px; --gutter:24px;
  --shadow:0 1px 1px rgba(11,26,38,.04),0 3px 3px rgba(11,26,38,.04),0 6px 7px rgba(11,26,38,.04),0 14px 22px rgba(11,26,38,.04);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; transition:color .4s var(--ease); }
a:hover{ color:var(--accent-dark); }
img{ display:block; max-width:100%; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:normal; line-height:1.05; }
h1{ font-size:clamp(2.25rem,5vw,3.5rem); }
h2{ font-size:clamp(1.75rem,3.4vw,2.875rem); }
h3{ font-size:1.5rem; font-weight:500; line-height:1.15; }
p{ margin:0; }
.container{ width:min(var(--container),100% - 2*var(--gutter)); margin-inline:auto; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Buttons: ink-filled pill, or the same pill outlined. Never a shadow. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 24px; border-radius:999px; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), opacity .5s var(--ease); }
.btn:hover{ color:#fff; opacity:.82; }
.btn--outline{ background:transparent; color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:#fff; opacity:1; }
.btn--light{ background:#fff; border-color:#fff; color:var(--ink); }
.btn--light:hover{ color:var(--ink); opacity:.88; }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--ink); opacity:1; }

/* ---------- Header ---------- */
.top{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.top__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px; height:72px; }
.top__brand{ display:flex; align-items:center; gap:12px; color:var(--fg); }
.top__brand img{ height:22px; width:auto; }
.top__brand span{ font-size:15px; font-weight:500; color:var(--muted); padding-left:12px; border-left:1px solid var(--line); line-height:1; }
.top__nav{ display:flex; gap:4px; }
.top__nav a{ position:relative; padding:0 14px; font-size:14px; font-weight:500; color:var(--fg); line-height:72px; white-space:nowrap; }
.top__nav a:hover{ color:var(--accent); }
.top__nav a[aria-current]{ color:var(--accent); }
.top__nav a[aria-current]::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px; background:var(--accent); }
.top__tools{ display:flex; align-items:center; gap:20px; }
.top__phone{ font-size:14px; font-weight:500; color:var(--fg); white-space:nowrap; }
.top__phone:hover{ color:var(--accent); }

/* Search lives in the header, like a help center, not in a hero. */
.search{ position:relative; }
.search input{ width:min(100%,360px); height:40px; padding:0 16px 0 40px; font:inherit; font-size:14px; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:999px; transition:border-color .3s var(--ease), background-color .3s var(--ease); }
.search input::placeholder{ color:var(--muted-2); }
.search input:focus{ border-color:var(--accent); background:#fff; }
.search svg{ position:absolute; left:14px; top:12px; width:16px; height:16px; color:var(--muted); pointer-events:none; }
.search__results{ position:absolute; top:48px; left:0; width:min(100vw - 48px,520px); list-style:none; margin:0; padding:6px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); z-index:60; }
.search__results a{ display:block; padding:10px 12px; border-radius:4px; color:var(--fg); }
.search__results a:hover{ background:var(--bg-2); color:var(--fg); }
.search__results b{ font-weight:600; font-size:15px; }
.search__results small{ font-size:12px; color:var(--muted); margin-left:8px; }
.search__results p{ font-size:14px; color:var(--muted); margin-top:2px; }
.search__none{ padding:10px 12px; font-size:14px; color:var(--muted); }

/* ---------- Bands ---------- */
.band{ padding:80px 0; }
.band--gray{ background:var(--bg-2); }
.band--dark{ background:var(--ink); color:#fff; }
.band__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:40px; }
.band__head p{ max-width:52ch; padding-top:.45em; font-size:18px; line-height:1.55; color:var(--muted); }
.band--dark .band__head p{ color:rgba(255,255,255,.72); }
.band--dark a:not(.btn):not(.badge){ color:#fff; }

/* Hero: one full-bleed photograph of our own hardware, headline in the scrim. */
.hero{ position:relative; min-height:clamp(440px,58vh,640px); display:flex; align-items:flex-end; background:var(--ink) url(assets/tiles/hero.webp) center 30%/cover no-repeat; color:#fff; isolation:isolate; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(11,26,38,.82) 0%,rgba(11,26,38,.55) 45%,rgba(11,26,38,.15) 100%),linear-gradient(0deg,rgba(11,26,38,.65) 0%,rgba(11,26,38,0) 55%); }
.hero .container{ padding:72px 0 64px; }
.hero h1{ max-width:14ch; color:#fff; }
.hero p{ max-width:46ch; margin:20px 0 32px; font-size:18px; line-height:1.55; color:rgba(255,255,255,.86); }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* Product tiles: flat, no border, depth from the image plate. */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.tile{ display:flex; flex-direction:column; background:#fff; border-radius:var(--r); overflow:hidden; color:var(--fg); }
.tile__plate{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(160deg,var(--ink-3) 0%,var(--ink) 100%); overflow:hidden; }
.tile__plate svg{ width:72px; height:72px; color:#fff; opacity:.92; }
.tile__plate img{ width:100%; height:100%; object-fit:cover; }
/* Product plate: one component, three treatments. A cutout render or a device
   screen sits on the ink gradient with the same floor shadow; a photograph fills it. */
.tile__plate img.tile__phone{ position:absolute; top:12%; left:50%; transform:translateX(-50%); width:44%; height:auto; object-fit:contain; border-radius:14px 14px 0 0; filter:drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.tile__plate img.tile__shot{ position:absolute; top:18%; left:10%; width:100%; height:auto; object-fit:contain; border-radius:8px 0 0 0; filter:drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.tile__plate img.tile__cutout{ width:auto; height:72%; object-fit:contain; filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
.tile--soon .tile__plate img{ filter:saturate(.35) brightness(.75); }
.tile__body{ padding:24px 24px 28px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tile h3{ transition:color .4s var(--ease); }
.tile:hover h3{ color:var(--accent); }
.tile p{ color:var(--muted); font-size:15px; line-height:1.5; }
.tile__meta{ margin-top:auto; padding-top:12px; font-size:14px; font-weight:500; color:var(--accent); }
.tile__meta::after{ content:" \203A"; }
.tile--soon .tile__plate{ background:linear-gradient(160deg,#5E7183 0%,#3B4C5C 100%); }
.tile--soon .tile__meta{ color:var(--muted); }
.tile--soon .tile__meta::after{ content:""; }
.tile--soon:hover h3{ color:var(--fg); }

/* Guide rows: a plain list with hairlines, the icon does the identifying. */
.rows{ border-top:1px solid var(--line); }
.row{ display:grid; grid-template-columns:48px 1fr auto; gap:24px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); color:var(--fg); }
.row__ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r); background:var(--bg-2); color:var(--ink); }
.row__ico svg{ width:26px; height:26px; }
.row small{ display:block; font-size:13px; color:var(--muted); margin-bottom:2px; }
.row h3{ font-size:20px; font-weight:500; line-height:1.2; transition:color .4s var(--ease); }
.row:hover h3{ color:var(--accent); }
.row p{ font-size:15px; color:var(--muted); margin-top:4px; }
.row__go{ font-size:14px; font-weight:500; color:var(--accent); white-space:nowrap; }
.row__go::after{ content:" \203A"; }

/* Sign-in badges on the dark band. */
.badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.badge{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:16px 20px 16px 16px; background:#fff; border-radius:var(--r); color:var(--fg); transition:background-color .4s var(--ease); }
.badge:hover{ background:var(--bg-2); color:var(--fg); }
.badge img{ width:40px; height:40px; border-radius:8px; }
.badge b{ display:block; font-size:16px; font-weight:600; line-height:1.2; }
.badge small{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.badge__go{ color:var(--muted); font-size:15px; }

/* Help band. */
.assist{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.assist p{ max-width:52ch; font-size:18px; line-height:1.55; color:var(--muted); margin-top:12px; }
.assist__phone{ display:block; margin-top:20px; font-size:clamp(1.5rem,3vw,2rem); font-weight:600; color:var(--fg); line-height:1; }
.assist__phone:hover{ color:var(--accent); }

/* Hub title block and empty state. */
.crumbs{ font-size:13px; color:var(--muted); margin-bottom:16px; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ color:var(--muted-2); margin:0 8px; }
.title{ padding:64px 0 48px; }
.title p{ max-width:56ch; margin-top:16px; font-size:18px; line-height:1.55; color:var(--muted); }
.empty{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; padding:32px; background:#fff; border-radius:var(--r); }
.empty{ grid-template-columns:1fr; gap:24px; }
.empty b{ display:block; font-size:20px; font-weight:500; }
.empty p{ margin-top:6px; font-size:15px; color:var(--muted); max-width:60ch; }
.empty .badge{ background:var(--bg-2); max-width:420px; }
.empty .badge:hover{ background:var(--line); }
/* A hub with a single guide shows it as one wide feature tile instead of a lonely column. */
.tiles:has(> :only-child) .tile{ grid-column:span 2; flex-direction:row; }
.tiles:has(> :only-child) .tile__plate{ flex:0 0 55%; aspect-ratio:auto; }
.tiles:has(> :only-child) .tile__body{ padding:32px; }
.note{ margin-top:24px; font-size:15px; color:var(--muted); }

/* Footer. */
.foot{ border-top:1px solid var(--line); padding:28px 0; font-size:14px; color:var(--muted); }
.foot .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot span{ white-space:nowrap; }
.foot a{ color:var(--muted); }
.foot a:hover{ color:var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){ .tiles{ grid-template-columns:repeat(2,1fr); } .top__phone{ display:none; } }
@media (max-width:960px){
  .top__nav{ display:none; }
  .top__row{ grid-template-columns:auto 1fr auto; gap:16px; }
  .search input{ width:100%; }

}
@media (max-width:720px){
  .band{ padding:56px 0; }
  .top__row{ display:flex; flex-wrap:wrap; justify-content:space-between; height:auto; padding:14px 0; row-gap:12px; }
  .top__brand span{ display:none; }
  .top__tools{ display:contents; }
  .search{ order:3; flex:1 0 100%; }
  .search input{ width:100%; }
  .search__results{ width:100%; }
  .band__head{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:28px; }
  .tiles{ grid-template-columns:1fr; gap:20px; }
  .badges{ grid-template-columns:1fr; }
  .assist{ grid-template-columns:1fr; }
  .tiles:has(> :only-child) .tile{ grid-column:auto; flex-direction:column; }
  .tiles:has(> :only-child) .tile__plate{ flex:none; aspect-ratio:16/10; }
  .row{ grid-template-columns:44px 1fr; }
  .row__go{ display:none; }
  .hero .container{ padding:56px 0 44px; }
  .hero{ background-position:center 20%; }
  .hero::before{ background:linear-gradient(0deg,rgba(11,26,38,.95) 0%,rgba(11,26,38,.7) 60%,rgba(11,26,38,.3) 100%); }
}
@media (max-width:480px){ .hero{ background-image:url(assets/tiles/hero-960.webp); } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }