/* Velotrak website — shared stylesheet: bible tokens (both themes), base, components, motion. Copied verbatim from the approved mockup (shared section of every mockup); values come from
   velotrak_web_bible_v0_1.html. Don't edit values here without updating the bible. */

/* ==========================================================================
   SHARED SITE CSS: copied verbatim from velotrak_web_bible_v0_1.html (tokens, base, components, motion).
   In the build this is one shared stylesheet every page links to.
   ========================================================================== */

/* ==========================================================================
   VELOTRAK WEB DESIGN BIBLE v0.1
   Web translation of the add-on bible v1.2. Every colour is a ROLE token.
   Dark values are the v1.2 values unchanged. Light values are derived from
   them: same hues, adjusted lightness, contrast-checked.
   Theme is set with data-theme="dark" | "light" on <html> or any container.
   ========================================================================== */

:root, [data-theme="dark"]{
  color-scheme: dark;
  /* Surfaces */
  --page:        #3d434e;   /* v1.2 Base: the site background */
  --chrome:      #2a2e35;   /* v1.2 Chrome: header and footer bars */
  --deep:        #1b1d21;   /* v1.2 Workspace: footer floor, behind everything */
  --panel:       linear-gradient(135deg,#2c313a 0%,#262a31 55%,#22262d 100%);
  --panel-solid: #262a31;
  --raised:      #2e333b;
  --raised-hov:  #333841;
  --field:       linear-gradient(180deg,#20242a 0%,#262a31 70%,#2a2e35 100%);
  --channel:     linear-gradient(180deg,#1d2026 0%,#22262c 70%,#262a31 100%);
  --popup:       #2a2e35;
  --line:        rgba(255,255,255,0.06);
  --line-strong: rgba(255,255,255,0.12);
  --scrim:       rgba(20,22,26,0.55);

  /* Text */
  --text-hi:  #f2f3f5;
  --text-mid: #c8cdd5;
  --text-low: #a3aab5;

  /* Accent and meaning */
  --accent:      #ff6a1a;   /* fills: buttons, underline, toggle, logo */
  --accent-text: #ff6a1a;   /* accent used AS text (links, key amounts) */
  --accent-soft: rgba(255,106,26,0.14);
  --pos:      #4cc38a;  --pos-text: #4cc38a;  --pos-soft: rgba(76,195,138,0.13);
  --neg:      #e5534b;  --neg-text: #e5534b;  --neg-soft: rgba(229,83,75,0.13);

  /* Buttons */
  --btn-pri:     linear-gradient(180deg,#ff7f3a 0%,#ff6a1a 55%,#ef5f12 100%);
  --btn-pri-hov: linear-gradient(180deg,#ff9152 0%,#ff7a30 55%,#ff6a1a 100%);
  --btn-pri-prs: linear-gradient(180deg,#e85a0e 0%,#d85209 100%);
  --btn-sec:     linear-gradient(180deg,#363c45 0%,#2e333b 60%,#292d34 100%);
  --btn-sec-hov: linear-gradient(180deg,#3f4651 0%,#363c45 60%,#30353d 100%);
  --btn-sec-prs: linear-gradient(180deg,#24282e 0%,#2a2f36 100%);
  --btn-ghost-hov: #2e333b;

  /* Effects */
  --shadow-panel: 0 10px 24px rgba(0,0,0,0.38);
  --shadow-ctrl:  0 3px 8px rgba(0,0,0,0.30);
  --shadow-pop:   0 10px 24px rgba(0,0,0,0.45);
  --glow-pri:     0 0 14px rgba(255,106,26,0.45);
  --glow-sec:     0 0 10px rgba(255,255,255,0.08);
  --sunken:       inset 0 2px 3px rgba(0,0,0,0.28);
  --sunken-edge:  inset 0 1px 0 rgba(0,0,0,0.30);
  --field-border: rgba(0,0,0,0.20);
  --field-border-hov: rgba(0,0,0,0.40);
  --hl-pri:       inset 0 1px 0 rgba(255,255,255,0.25);
  --hl-sec:       inset 0 1px 0 rgba(255,255,255,0.06);
  --hl-panel:     inset 0 1px 0 rgba(255,255,255,0.04);
  --focus-ring:   0 0 0 3px rgba(255,106,26,0.25);

  /* Product art (footprint preview cells) */
  --cell-empty: rgba(0,0,0,0.25);
  --show-sun: block; --show-moon: none;   /* theme button shows where it goes next */
}

[data-theme="light"]{
  color-scheme: light;
  --page:        #e9ecf0;
  --chrome:      #f7f8fa;
  --deep:        #dfe3e8;
  --panel:       linear-gradient(135deg,#ffffff 0%,#fafbfc 55%,#f4f6f8 100%);
  --panel-solid: #fafbfc;
  --raised:      #f1f3f6;
  --raised-hov:  #e9ecf0;
  --field:       linear-gradient(180deg,#e3e6eb 0%,#eceef2 70%,#f1f3f6 100%);
  --channel:     linear-gradient(180deg,#dde1e7 0%,#e5e8ed 70%,#eceef2 100%);
  --popup:       #ffffff;
  --line:        rgba(27,29,33,0.08);
  --line-strong: rgba(27,29,33,0.14);
  --scrim:       rgba(27,29,33,0.35);

  --text-hi:  #1b1d21;
  --text-mid: #3d434e;
  --text-low: #5c6370;

  --accent:      #ff6a1a;
  --accent-text: #b84a0c;
  --accent-soft: rgba(255,106,26,0.12);
  --pos:      #2fae72;  --pos-text: #1a7a4c;  --pos-soft: rgba(47,174,114,0.12);
  --neg:      #e5534b;  --neg-text: #c4362e;  --neg-soft: rgba(229,83,75,0.11);

  --btn-pri:     linear-gradient(180deg,#ff7f3a 0%,#ff6a1a 55%,#ef5f12 100%);
  --btn-pri-hov: linear-gradient(180deg,#ff9152 0%,#ff7a30 55%,#ff6a1a 100%);
  --btn-pri-prs: linear-gradient(180deg,#e85a0e 0%,#d85209 100%);
  --btn-sec:     linear-gradient(180deg,#ffffff 0%,#f6f7f9 60%,#eef0f3 100%);
  --btn-sec-hov: linear-gradient(180deg,#ffffff 0%,#fbfbfc 60%,#f3f5f7 100%);
  --btn-sec-prs: linear-gradient(180deg,#e6e9ed 0%,#eef0f3 100%);
  --btn-ghost-hov: #e3e6eb;

  --shadow-panel: 0 10px 24px rgba(30,35,45,0.10), 0 1px 2px rgba(30,35,45,0.06);
  --shadow-ctrl:  0 2px 6px rgba(30,35,45,0.12);
  --shadow-pop:   0 10px 24px rgba(30,35,45,0.16);
  --glow-pri:     0 0 14px rgba(255,106,26,0.40);
  --glow-sec:     0 0 0 1px rgba(27,29,33,0.06), 0 4px 10px rgba(30,35,45,0.10);
  --sunken:       inset 0 2px 3px rgba(30,35,45,0.10);
  --sunken-edge:  inset 0 1px 0 rgba(30,35,45,0.08);
  --field-border: rgba(27,29,33,0.12);
  --field-border-hov: rgba(27,29,33,0.24);
  --hl-pri:       inset 0 1px 0 rgba(255,255,255,0.25);
  --hl-sec:       inset 0 1px 0 rgba(255,255,255,0.9);
  --hl-panel:     inset 0 1px 0 rgba(255,255,255,0.9);
  --focus-ring:   0 0 0 3px rgba(255,106,26,0.30);

  --cell-empty: rgba(27,29,33,0.06);
  --show-sun: none; --show-moon: block;
}

/* ---------- Shared, theme-independent tokens ---------- */
:root{
  --font: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, monospace;

  /* Shape (v1.2) */
  --r-panel: 16px; --r-ctrl: 10px; --r-tab: 7px; --r-pill: 999px;

  /* Spacing scale: 4-based */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; --s9:72px; --s10:96px;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  --nav-h: 64px;

  /* Motion */
  --t-fast: 150ms;   /* hover, press, focus */
  --t-med:  200ms;   /* menus, card action swap */
  --t-theme: 240ms;  /* theme crossfade */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-std: cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-padding-top: calc(var(--nav-h) + 16px + env(safe-area-inset-top,0px)); }
:root{ padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }
body{
  margin:0; background:var(--page); color:var(--text-mid);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; transition: background .15s, color .15s;
}
img,svg{ max-width:100%; }
a{ color:var(--accent-text); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-ctrl); }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- Web type scale ---------- */
.t-display{ font-size:56px; line-height:1.05; font-weight:700; letter-spacing:-0.02em; color:var(--text-hi); margin:0; }
.t-h1     { font-size:40px; line-height:1.1;  font-weight:700; letter-spacing:-0.01em; color:var(--text-hi); margin:0; }
.t-h2     { font-size:28px; line-height:1.2;  font-weight:600; color:var(--text-hi); margin:0; }
.t-h3     { font-size:20px; line-height:1.3;  font-weight:600; color:var(--text-hi); margin:0; }
.t-h4     { font-size:15px; line-height:1.4;  font-weight:600; color:var(--text-hi); margin:0; }
.t-lead   { font-size:18px; line-height:1.55; font-weight:400; color:var(--text-mid); margin:0; }
.t-body   { font-size:16px; line-height:1.6;  font-weight:400; color:var(--text-mid); margin:0; }
.t-small  { font-size:14px; line-height:1.5;  font-weight:400; color:var(--text-mid); margin:0; }
.t-caption{ font-size:13px; line-height:1.45; font-weight:400; color:var(--text-low); margin:0; }
.t-label  { font-size:12px; line-height:1.4;  font-weight:600; color:var(--text-low); margin:0; }
.t-price  { font-size:26px; line-height:1.1;  font-weight:700; color:var(--text-hi); font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .t-display{ font-size:40px; } .t-h1{ font-size:32px; } .t-h2{ font-size:24px; } .t-lead{ font-size:17px; }
}

/* ==========================================================================
   Components
   ========================================================================== */

/* ---------- Surfaces ---------- */
.panel{ background:var(--panel); border-radius:var(--r-panel); box-shadow:var(--shadow-panel), var(--hl-panel); }
.raised{ background:var(--raised); border-radius:var(--r-ctrl); }
.sunken{ background:var(--channel); border-radius:var(--r-ctrl); box-shadow:var(--sunken), var(--sunken-edge); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 20px; border:none; border-radius:var(--r-ctrl);
  font-family:var(--font); font-size:14px; font-weight:600; line-height:1; white-space:nowrap;
  cursor:pointer; text-decoration:none !important;
  transition: background .15s, box-shadow .15s, color .15s;
}
.btn-lg{ height:48px; padding:0 26px; font-size:16px; }
.btn-sm{ height:32px; padding:0 14px; font-size:13px; }
.btn-block{ width:100%; }
.btn-primary{ color:#fff; background:var(--btn-pri); box-shadow:var(--shadow-ctrl), var(--hl-pri); }
.btn-primary:hover, .btn-primary.s-hover{ background:var(--btn-pri-hov); box-shadow:var(--glow-pri), var(--hl-pri); }
.btn-primary:active, .btn-primary.s-press{ background:var(--btn-pri-prs); box-shadow:inset 0 2px 4px rgba(0,0,0,0.30); }
.btn-secondary{ color:var(--text-hi); background:var(--btn-sec); box-shadow:var(--shadow-ctrl), var(--hl-sec); }
.btn-secondary:hover, .btn-secondary.s-hover{ background:var(--btn-sec-hov); box-shadow:var(--glow-sec), var(--hl-sec); }
.btn-secondary:active, .btn-secondary.s-press{ background:var(--btn-sec-prs); box-shadow:inset 0 2px 4px rgba(0,0,0,0.20); }
.btn-ghost{ color:var(--text-mid); background:transparent; }
.btn-ghost:hover, .btn-ghost.s-hover{ color:var(--text-hi); background:var(--btn-ghost-hov); }
.btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.btn:focus-visible{ box-shadow:var(--focus-ring); }
.icon-btn{
  width:40px; height:40px; padding:0; border:none; border-radius:50%; display:inline-grid; place-items:center; position:relative;
  color:var(--text-mid); background:var(--btn-sec); box-shadow:var(--shadow-ctrl), var(--hl-sec); cursor:pointer;
  transition: background .15s, box-shadow .15s, color .15s;
}
.icon-btn:hover, .icon-btn.s-hover{ color:var(--accent); background:var(--btn-sec-hov); box-shadow:var(--glow-sec), var(--hl-sec); }
.icon-btn svg{ width:18px; height:18px; }
.theme-btn .sun{ display:var(--show-sun); } .theme-btn .moon{ display:var(--show-moon); }
.nav .theme-btn{ width:36px; height:36px; }
.icon-btn .count{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;
}

/* ---------- Segmented control ---------- */
.seg{ display:inline-flex; gap:4px; padding:4px; background:var(--channel); box-shadow:var(--sunken); border-radius:var(--r-ctrl); }
.seg button{
  border:none; cursor:pointer; padding:7px 15px; border-radius:var(--r-tab);
  font-family:var(--font); font-size:13px; font-weight:600; color:var(--text-low); background:transparent;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button:hover:not(.on){ color:var(--text-mid); }
.seg button.on{ color:var(--text-hi); background:var(--btn-sec); box-shadow:var(--shadow-ctrl), var(--hl-sec); }

/* ---------- Chips and tags ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; line-height:1;
  padding:5px 10px; border-radius:var(--r-pill); color:var(--text-mid);
  background:var(--channel); box-shadow:var(--sunken); white-space:nowrap;
}
.chip svg{ width:12px; height:12px; }
.tag{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:var(--r-pill); line-height:1; }
.tag.accent{ color:var(--accent-text); background:var(--accent-soft); }
.tag.pos{ color:var(--pos-text); background:var(--pos-soft); }
.tag.neg{ color:var(--neg-text); background:var(--neg-soft); }

/* ---------- Navigation ---------- */
.nav{ background:var(--chrome); box-shadow:0 1px 0 var(--line); }
.nav-in{ height:var(--nav-h); display:flex; align-items:center; gap:28px; padding:0 var(--gutter); max-width:var(--container); margin:0 auto; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text-hi) !important; font-weight:700; font-size:17px; text-decoration:none !important; letter-spacing:-0.01em; }
.brand .mark{ width:18px; height:18px; border-radius:5px; background:var(--accent); box-shadow:var(--hl-pri); }
.nav-links{ display:flex; gap:4px; }
.nav-links a{ color:var(--text-low); font-size:14px; font-weight:600; padding:8px 12px; border-radius:var(--r-tab); text-decoration:none; position:relative; transition: color .15s; }
.nav-links a:hover{ color:var(--text-hi); }
.nav-links a.on{ color:var(--text-hi); }
.nav-links a.on::after{ content:""; position:absolute; left:50%; bottom:-1px; width:18px; height:2px; margin-left:-9px; border-radius:2px; background:var(--accent); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav .menu-btn{ display:none; }
.avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--text-hi); background:var(--btn-sec); box-shadow:var(--shadow-ctrl), var(--hl-sec); }

/* ---------- Product card ---------- */
.pcard{ display:flex; flex-direction:column; padding:20px; gap:16px; }
.pcard .art{ border-radius:12px; overflow:hidden; background:#1e1f22; box-shadow:var(--sunken), var(--sunken-edge); }
.pcard .art svg{ width:100%; height:auto; display:block; }
.chartart{ border-radius:12px; overflow:hidden; background:#1e1f22; box-shadow:var(--shadow-panel); }
.chartart svg{ width:100%; height:auto; display:block; }
/* Wide charts stay readable on phones: they keep a minimum width and swipe sideways */
@media (max-width:760px){ .chartart.wide{ overflow-x:auto; } .chartart.wide svg{ min-width:720px; } }
.pcard .meta{ display:flex; gap:6px; flex-wrap:wrap; }
.pcard .head{ display:flex; flex-direction:column; gap:6px; }
.pcard .desc{ font-size:14px; line-height:1.5; color:var(--text-mid); margin:0; }
.pcard .buy{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--line); margin-top:auto; }
.pcard .buy .per{ font-size:13px; font-weight:400; color:var(--text-low); margin-left:2px; }
.pcard .hint{ font-size:13px; color:var(--text-low); margin:0; }
.pcard .state-owned{ font-size:13px; color:var(--text-mid); display:flex; align-items:center; gap:6px; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field label{ font-size:12px; font-weight:600; color:var(--text-low); }
.input{
  width:100%; height:42px; padding:0 14px; font-family:var(--font); font-size:15px; color:var(--text-hi);
  background:var(--field); border:1px solid var(--field-border); border-radius:var(--r-ctrl);
  box-shadow:var(--sunken), var(--sunken-edge); outline:none; transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{ color:var(--text-low); }
.input:hover{ border-color:var(--field-border-hov); }
.input:focus, .input.s-focus{ border-color:var(--accent); box-shadow:var(--sunken), var(--focus-ring); }
.field.error .input{ border-color:var(--neg); }
.field .err{ font-size:12px; color:var(--neg-text); }
.field .help{ font-size:12px; color:var(--text-low); }

/* ---------- Footer ---------- */
.foot{ background:var(--chrome); box-shadow:0 -1px 0 var(--line); }
.foot-in{ max-width:var(--container); margin:0 auto; padding:40px var(--gutter) 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.foot h5{ margin:0 0 12px; font-size:12px; font-weight:600; color:var(--text-low); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.foot ul a{ color:var(--text-mid); font-size:14px; }
.foot ul a:hover{ color:var(--text-hi); }
.foot .legal{ max-width:var(--container); margin:0 auto; padding:16px var(--gutter) 28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-low); }
@media (max-width:760px){ .foot-in{ grid-template-columns:1fr 1fr; } }

.sheet{ background:var(--popup); box-shadow:var(--shadow-pop); padding:8px; display:flex; flex-direction:column; gap:2px; }
.sheet a{ display:block; padding:12px 14px; border-radius:var(--r-tab); color:var(--text-mid); font-weight:600; font-size:15px; text-decoration:none; }
.sheet a.on{ color:var(--text-hi); background:var(--raised); box-shadow:inset 3px 0 0 var(--accent); }
.sheet .sep{ height:1px; background:var(--line); margin:6px 4px; }
.sheet .acts{ display:grid; gap:8px; padding:6px 6px 8px; }
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav .menu-btn{ display:inline-grid; }
  .nav-right .hide-m{ display:none; }
  .nav-in{ gap:12px; } .nav-right{ gap:6px; } .nav .icon-btn{ width:34px; height:34px; } .nav .btn-sm{ padding:0 12px; }
}
/* ---------- Motion ---------- */
/* Theme switch: whole-page crossfade (View Transitions; instant where unsupported) */
::view-transition-old(root), ::view-transition-new(root){ animation-duration:var(--t-theme); animation-timing-function:var(--ease-std); }
/* Mobile menu sheet */
.sheet{ transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s; transform-origin:top; }
.sheet.closed{ opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s var(--t-med); }
/* Card action swap: only the action row moves */
@keyframes swapIn{ from{ opacity:0; transform:translateY(4px); } }
.pcard .buy.swap, .pcard .hint.swap{ animation: swapIn var(--t-med) var(--ease-out) both; }

/* Reduced motion: everything instant, site-wide (the mockups' last shared rule) */
@media (prefers-reduced-motion:reduce){ *, ::view-transition-old(root), ::view-transition-new(root){ transition:none !important; animation:none !important; } }

/* ==========================================================================
   Site-wide rules from the mockups' page section (every page uses them)
   ========================================================================== */
.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.nav{ position:sticky; top:0; z-index:30; }
.read{ max-width:72ch; }
.risk{ font-size:13px; color:var(--text-low); max-width:var(--container); margin:0 auto; padding:0 var(--gutter) 16px; }
.tbd{ display:inline-block; font-size:11px; font-weight:600; line-height:1; padding:4px 8px; border-radius:var(--r-pill);
      color:var(--accent-text); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(255,106,26,0.35); vertical-align:2px; white-space:nowrap; }

/* ==========================================================================
   Build additions (W1): not in the mockups, kept to the bible's tokens
   ========================================================================== */
/* Logo: replaces the 18px .mark placeholder. The left stroke is currentColor = text-hi in both
   themes; the candles stay #ff6a1a. Sized to the mark's visual weight. */
.brand .logo{ display:block; height:22px; width:auto; color:var(--text-hi); }
/* Signed in: the header's Sign out form sits inline with the other header actions */
.nav-right form.signout{ margin:0; }
@media (min-width:761px){ .nav-right form.signout{ display:inline-flex; } }
/* Signed in, the header carries more actions: the logo never shrinks, and 761-960px uses tighter spacing */
.brand, .brand .logo{ flex-shrink:0; }
@media (min-width:761px) and (max-width:960px){ .nav-in{ gap:14px; } .nav-links a{ padding:8px 8px; } .nav-right{ gap:4px; } .nav-right .btn-sm{ padding:0 10px; } }
/* Narrow phones: logo + theme + Create account + menu don't fit in 320–399px (the mockup scrolls
   sideways there). Create account moves into the menu sheet below 400px. */
@media (max-width:399px){ .nav-right .nav-create{ display:none; } }
@media (min-width:400px){ .sheet .sheet-create{ display:none; } }
a.avatar{ text-decoration:none; }
a.avatar:hover{ color:var(--accent-text); }
/* Mobile menu sheet under the bar (bible: links collapse into a sheet at 760 and below) */
.nav .sheet{ position:absolute; left:0; right:0; top:100%; margin:0 var(--gutter); }
@media (min-width:761px){ .nav .sheet{ display:none; } }
.sheet form{ margin:0; }
/* Placeholder pages (C4) */
.ph{ padding:72px 0 24px; display:grid; gap:14px; max-width:720px; }
/* Unlisted Velotrak download page (A4) */
.dl{ padding:72px 0 24px; display:grid; gap:16px; max-width:720px; }