/* Hyke Studio — The public site's own stylesheet: the shared navigation, footer, cards and the home page, as the approved
site-core designs draw them (home__a and its states). Every colour and typeface comes from tokens.css.
 * Built from the approved design's own styles: the brand tokens live in tokens.css alone, and the
 * design canvas's review aid is left out. Light is the default (Decision 278); the visitor's footer switch picks Light,
 * Dark or Device (Decision 387), and dark applies under html[data-theme="dark"] alone.
 * Owning section(s): §35 */

/* Variables the approved pages declare beyond the brand package's tokens.css. */
:root {
  --hs-card-border: rgba(26,25,23,0.12);
  --hs-hairline: rgba(26,25,23,0.10);
}
html[data-theme="dark"] {
  /* the browser's own controls (tick boxes, radio buttons, select menus) drawn for the dark ground (Decision 387) */
  color-scheme: dark;
  --hs-amber-ink: #E09A12;
  --hs-card-border: rgba(251,248,239,0.14);
  --hs-hairline: rgba(251,248,239,0.10);
}
* { box-sizing: border-box; }
/* At least the window's height, so the floor's gradients (.hs-floor, tokens.css) are sized to the whole window and
   drawn once — a shorter body would have the browser repeat them below the footer. */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--hs-font-sans);
  color: var(--hs-ink-body);
}
a { color: var(--hs-amber-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1328px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) {
.container { padding: 0 20px; }
}
/* nav (shared frame) — one bar rule on every public page: 76px tall (44px control + 16px above + 15px below + the 1px --hs-line at its foot).
   Below 640px the bar is one row of 56px — wordmark left, "Menu" and Start free right — and the seven links live inside the
   Menu disclosure (a <details> element); above 640px the disclosure is open and its summary collapses to nothing, so the links
   read as the ordinary row. One set of links in the markup, never a second copy for the phone. */
.nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hs-line); background: var(--hs-ground); }
.nav .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding-top: 16px; padding-bottom: 15px; flex-wrap: wrap; }
.nav-lockup { display: flex; align-items: center; gap: 13px; }
/* the lock-up is the link home (Decision 279): no underline on hover */
.nav-lockup, .nav-lockup:hover { text-decoration: none; }
.nav-wordmark { font-size: 20px; font-weight: 700; letter-spacing: -0.035em; color: var(--hs-ink); }
.nav-divider { width: 1px; height: 17px; background: rgba(128,120,100,0.30); display: block; }
.nav-by { font-family: var(--hs-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--hs-ink-muted); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-menu { display: flex; align-items: center; }
.nav-menu-summary { width: 0; height: 0; overflow: hidden; visibility: hidden; list-style: none; }
.nav-menu-summary::-webkit-details-marker { display: none; }
.nav-menu-list { display: flex; align-items: center; gap: 24px; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--hs-ink-body); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav-current { font-size: 14px; font-weight: 600; color: var(--hs-ink); padding-bottom: 3px; border-bottom: 2px solid var(--hs-amber); }
.nav-divider-2 { width: 1px; height: 18px; background: rgba(128,120,100,0.26); display: block; }
@media (max-width: 639px) {
.nav .nav-inner { min-height: 56px; height: 56px; padding-top: 8px; padding-bottom: 7px; flex-wrap: nowrap; }
.nav-divider, .nav-by { max-width: 0; overflow: hidden; margin-left: -13px; }
.nav-links { gap: 14px; }
.nav .btn-primary { height: 40px; padding: 0 16px; }
.nav-menu { display: block; }
.nav-menu-summary { width: auto; height: 40px; overflow: visible; visibility: visible; display: inline-flex; align-items: center; padding: 0 4px; font-size: 14px; font-weight: 500; color: var(--hs-ink-body); cursor: pointer; }
.nav-menu-summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.nav-menu[open] .nav-menu-summary { color: var(--hs-ink); }
.nav-menu[open] .nav-menu-summary::after { margin-top: 3px; transform: rotate(225deg); }
.nav-menu-list { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 20px 10px; background: var(--hs-ground); border-bottom: 1px solid var(--hs-line); }
.nav-menu-list .nav-link, .nav-menu-list .nav-current { padding: 14px 0 12px; font-size: 15px; }
.nav-divider-2 { width: 100%; height: 1px; margin: 6px 0; }
}
.btn-primary {
  font-size: 14px; font-weight: 600; color: var(--hs-on-action); background: var(--hs-action);
  border: none; border-radius: var(--hs-r-button); height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-secondary {
  font-size: 14px; font-weight: 600; color: var(--hs-ink); background: transparent;
  border: 1px solid rgba(26,25,23,0.25); border-radius: var(--hs-r-button); height: 44px;
  padding: 0 18px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
html[data-theme="dark"] .btn-secondary { border-color: rgba(251,248,239,0.28); }
/* hero — the headline leads on one line at desktop (the brand sample's own 1,060 measure) and the three promises
   stand under it as one evenly spaced row: three columns, each a lead and its second line, a hairline between them
   (Decision 184, owner review 2026-09-25 H2). The showcase starts a clear step below. */
.hero { padding: 36px 0 34px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-kicker { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--hs-amber-ink); }
html[data-theme="dark"] .hero-kicker { color: var(--hs-amber); }
.hero-title { margin: 14px 0 0; font-size: clamp(32px, 4.6vw, 54px); font-weight: 700; letter-spacing: -0.042em; line-height: 1.04; color: var(--hs-ink); max-width: 1060px; text-wrap: balance; }
/* The home heading's first line, "Premium studio images of any kind of vehicle," (owner 2026-10-19 14:40), is about
   19.6 times its font size wide (1,060 px at 54 px): a wider cap than the shared 1,060 px keeps it on one line on
   desktop (1280 and 1440), and a slightly slower size step keeps it on one line down to about 745 px wide, so
   "vehicle," is never left alone on a line of its own at tablet widths. */
.hero-title--home { text-wrap: wrap; max-width: 1140px; font-size: clamp(32px, 4.3vw, 54px); }
.hero-claims { margin-top: 28px; width: 100%; max-width: 1080px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-claim { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 28px; }
.hero-claim + .hero-claim { border-left: 1px solid var(--hs-line); }
.hero-claim-lead { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; color: var(--hs-ink); }
.hero-claim-support { font-size: 13.5px; line-height: 1.45; color: var(--hs-ink-muted); text-wrap: balance; }
/* the kinds promise links to the vehicle index (refold 2026-09-28, A2 Section 35 home row): ink text with the amber
   underline the brand's other text links carry, balanced across its lines */
.hero-claim-lead--link { color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-amber); text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-wrap: balance; }
@media (max-width: 720px) {
.hero { padding: 26px 0 22px; }
.hero-claims { grid-template-columns: 1fr; max-width: 420px; margin-top: 18px; }
.hero-claim { padding: 11px 0; }
.hero-claim + .hero-claim { border-left: none; border-top: 1px solid var(--hs-line); }
}
/* the "Computer-generated representation" line under a picture, in the mono small type */
.picture-disclaimer { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); text-align: center; }
.picture-disclaimer--left { text-align: left; margin: 10px 0 0; }
/* ================================================================================================================
   the make-and-model picker (Decision 184, owner review 2026-09-25 H1) — the component in
   _assets/components/make-model-picker.html, carried as it stands. One type-to-search field; the matching library
   vehicles open in a list under it, the body type a quiet tag on each row. No amber in the control area except the
   keyboard focus ring: the highlighted row is shown by fill and weight, never by colour.
   ================================================================================================================ */
.hs-picker { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-picker-label { font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em; color: var(--hs-ink-muted); }
.hs-picker-field { position: relative; display: flex; align-items: center; height: 38px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-field); cursor: text; transition: border-color .12s ease, box-shadow .12s ease; }
@media (hover: hover) {
.hs-picker-field:hover { border-color: color-mix(in srgb, var(--hs-ink) 30%, transparent); }
}
.hs-picker-field:focus-within, .hs-picker-field--open { outline: 2px solid var(--hs-amber); outline-offset: 2px; border-color: color-mix(in srgb, var(--hs-ink) 30%, transparent); }
.hs-picker-search { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 8px 0 11px; color: var(--hs-ink-muted); }
.hs-picker-input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; font-family: var(--hs-font-sans); font-size: 13.5px; font-weight: 500; color: var(--hs-ink); }
.hs-picker-input::placeholder { color: var(--hs-ink-muted); font-weight: 400; }
.hs-picker-input:focus, .hs-picker-input:focus-visible { outline: none; }
.hs-picker-toggle { flex: 0 0 auto; width: 34px; height: 100%; border: 0; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--hs-ink-muted); cursor: pointer; border-radius: 0 var(--hs-r-field) var(--hs-r-field) 0; }
@media (hover: hover) {
.hs-picker-toggle:hover { color: var(--hs-ink); }
}
.hs-picker-toggle svg { transition: transform .12s ease; }
.hs-picker-field--open .hs-picker-toggle svg { transform: rotate(180deg); }
.hs-picker-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-tile); box-shadow: 0 0 0 5px var(--hs-surface), var(--hs-lift); padding: 6px; }
.hs-picker-count { margin: 0; padding: 6px 8px 7px; font-family: var(--hs-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em; color: var(--hs-ink-muted); }
.hs-picker-options { list-style: none; margin: 0; padding: 0; max-height: 228px; overflow-y: auto; }
.hs-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 8px 0 10px; border-radius: var(--hs-r-field); cursor: pointer; }
@media (hover: hover) {
.hs-picker-option:hover { background: var(--hs-surface-sunk); }
}
.hs-picker-option--active { background: var(--hs-surface-sunk); box-shadow: inset 0 0 0 1px var(--hs-card-border); }
.hs-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--hs-ink-body); }
.hs-picker-option--active .hs-picker-name { color: var(--hs-ink); font-weight: 500; }
.hs-picker-match { background: none; color: var(--hs-ink); font-weight: 700; }
.hs-picker-body { flex: 0 0 auto; font-family: var(--hs-font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--hs-ink-muted); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-chip); padding: 2px 6px; }
.hs-picker-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; padding: 8px 8px 3px; border-top: 1px solid var(--hs-hairline); font-family: var(--hs-font-mono); font-size: 10px; color: var(--hs-ink-muted); }
.hs-picker-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 17px; padding: 0 5px; margin-right: 3px; font-family: var(--hs-font-mono); font-size: 9.5px; color: var(--hs-ink-body); background: var(--hs-surface-sunk); border: 1px solid var(--hs-card-border); border-radius: 4px; }
@media (max-width: 940px) {
.hs-picker-field { height: 44px; }
.hs-picker-toggle { width: 44px; }
.hs-picker-option { min-height: 44px; }
.hs-picker-options { max-height: 220px; }
.hs-picker-keys { display: none; }
}
/* a request address and its Copy control — the vehicle pages' request rows (vehicle_page.html, vehicles.css
   .request-row); the class names are the old home bench's, which drew the same pair */
.bench-url-value { font-family: var(--hs-font-mono); font-size: 11.5px; line-height: 1.5; color: var(--hs-ink-body); background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: 7px; padding: 9px 11px; flex-grow: 1; min-width: 200px; overflow-wrap: anywhere; word-break: break-word; }
.bench-copy-btn { font-size: 13px; font-weight: 600; color: var(--hs-ink); background: transparent; border: 1px solid var(--hs-card-border); border-radius: 7px; padding: 0 14px; height: 38px; cursor: pointer; flex-shrink: 0; }
/* section headings */
.section-block { padding: 34px 0 0; }
.section-heading-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.section-heading { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); margin: 0; }
.section-sub { font-size: 13.5px; color: var(--hs-ink-muted); }
/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) {
.gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
.gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* each library tile opens the try-it page with that vehicle filled in, through the page address, in the picture
   address's own names — make, model, color, angle (Decision 184, owner review 2026-09-25 H3) */
.gallery-card { background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-tile); padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--hs-ink-body); text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
a.gallery-card:hover { text-decoration: none; }
.gallery-img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; object-position: center; margin-bottom: 6px; }
/* each library picture is served through the website's key-less demo path, so it carries the public preview's corner
   mark — the public preview's own treatment (a hairline pill with the brand mark and the wordmark), scaled to the tile */
.gallery-pic { position: relative; display: block; width: 100%; margin-bottom: 6px; }
.gallery-pic .gallery-img { margin-bottom: 0; }
.gallery-mark { position: absolute; right: 2px; bottom: 2px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--hs-surface) 78%, transparent); font-size: 9.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; color: var(--hs-ink); pointer-events: none; }
.gallery-mark svg { display: block; flex-shrink: 0; }
.gallery-caption { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--hs-ink); text-align: center; }
/* the kind line pushes the action row to the card's floor, so a kind that wraps (the Cessna's at 1,440 and 390) never
   steps its "Try this one" below its neighbours', and a wrapped line breaks evenly rather than leaving one word alone
   (round 14 polish-02) */
.gallery-meta { font-size: 11.5px; color: var(--hs-ink-muted); text-align: center; margin-bottom: auto; text-wrap: balance; }
.gallery-cue { margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--hs-font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--hs-ink-muted); transition: color .12s ease; }
.gallery-cue-icon { display: block; transition: transform .12s ease; }
@media (hover: hover) {
a.gallery-card:hover { border-color: color-mix(in srgb, var(--hs-ink) 30%, transparent); box-shadow: var(--hs-lift); transform: translateY(-2px); }
a.gallery-card:hover .gallery-cue { color: var(--hs-ink); }
a.gallery-card:hover .gallery-cue-icon { transform: translateX(2px); }
}
a.gallery-card:focus-visible .gallery-cue { color: var(--hs-ink); }
@media (max-width: 940px) {
.gallery-cue { min-height: 24px; }
}
/* stat panels */
.panel { background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card); padding: 18px 22px; }
.numbers-strip { display: flex; gap: 0; flex-wrap: wrap; }
.numbers-item { flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; padding: 4px 30px; border-right: 1px solid var(--hs-hairline); }
.numbers-item:first-child { padding-left: 0; }
.numbers-item:last-child { border-right: none; padding-right: 0; }
@media (max-width: 640px) {
.numbers-strip { flex-direction: column; gap: 14px; }
.numbers-item { flex: 0 0 auto !important; padding: 0 0 14px !important; border-right: none !important; border-bottom: 1px solid var(--hs-hairline); }
.numbers-item:last-child { border-bottom: none; padding-bottom: 0 !important; }
}
.numbers-note { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.55; color: var(--hs-ink-body); max-width: 900px; }
.numbers-note strong { color: var(--hs-ink); font-weight: 600; }
.numbers-value { font-size: 32px; font-weight: 600; letter-spacing: -0.035em; color: var(--hs-ink); font-variant-numeric: tabular-nums; }
.numbers-label { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); }
.reliability-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px 22px; }
@media (max-width: 900px) {
.reliability-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.reliability-figure { display: flex; flex-direction: column; gap: 3px; }
.reliability-value { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); font-variant-numeric: tabular-nums; }
.reliability-label { font-family: var(--hs-font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--hs-ink-muted); text-transform: uppercase; }
.reliability-support { font-size: 11.5px; color: var(--hs-ink-muted); }
/* T-SB-33 (Section 36): every figure is shown for the three spans — one row each for today, the last thirty days and
   all time — and the wait for a new vehicle, the one all-time figure, sits on its own row under a hairline */
.reliability-figure--wait { grid-column: 1 / -1; border-top: 1px solid var(--hs-hairline); padding-top: 14px; }
.status-badge { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-standin { display: inline-flex; align-items: center; gap: 9px; border: 1px dashed color-mix(in srgb, var(--hs-ink) 24%, transparent); border-radius: 7px; background: var(--hs-surface-sunk); padding: 6px 11px; }
.status-standin-mark { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid color-mix(in srgb, var(--hs-ink) 30%, transparent); display: block; flex-shrink: 0; }
.status-standin-text { font-size: 11.5px; color: var(--hs-ink-muted); }
.status-link { font-size: 11.5px; color: var(--hs-ink); text-decoration: underline; text-underline-offset: 2px; }
/* customer panel — Hitchhyke's logo and the van it runs as ONE lock-up inside the picture (Decisions 184 and 198):
   logo · 1px rule · van, all three on one centre line — the brand's horizontal lock-up (mark · 1px rule · label,
   brand section 6), with the customer's logo and its vehicle as the two partners. The logo is the owner-supplied
   file, used as delivered in both themes; its letters sit exactly in the middle of its picture (clear space 28 of
   512 above and below), and the van's body sits in the middle of its own picture, so centring the pictures centres
   what you see. The pair is one box of fixed proportions (467.4 × 220 at full size) with its three parts placed by
   percentage, so the relationship is identical at every width. Measured at full size: logo 116 wide (its letters
   52 tall), rule 80 tall, van 330 wide (its body 306 × 142); 22 either side of the rule to the logo and to the van's
   nose; the box is as wide as what you see, and the van's picture runs 12 past its right edge into clear space. */
.customer-panel { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); align-items: center; gap: 36px; padding: 22px; }
.customer-stage { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 8px 36px; background: var(--hs-surface-sunk); border-radius: var(--hs-r-tile); }
.customer-pair { position: relative; width: min(100%, 467.4px); aspect-ratio: 467.4 / 220; }
.customer-logo { position: absolute; display: block; left: 0; top: 38.05%; width: 24.82%; height: auto; }
.customer-pair-rule { position: absolute; display: block; left: 29.52%; top: 33.05%; width: 1px; height: 36.36%; background: rgba(128,120,100,0.30); }
.customer-img { position: absolute; display: block; left: 31.96%; top: 0; width: 70.60%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; object-position: center; }
.customer-copy { min-width: 0; }
@media (max-width: 980px) {
.customer-panel { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
.customer-panel { padding: 16px; }
.customer-stage { padding: 6px 10px; }
}
.customer-disclaimer { text-align: left; margin: 8px 0 0; }
.customer-heading { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--hs-ink-muted); margin: 0 0 6px; }
.customer-body { font-size: 14.5px; line-height: 1.55; color: var(--hs-ink-body); margin: 0; max-width: 620px; }
.customer-body strong { color: var(--hs-ink); font-weight: 600; }
/* cta band */
.cta-band { margin: 34px 0 0; padding: 30px 24px; background: color-mix(in srgb, var(--hs-surface) 66%, transparent); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-card); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; text-align: left; }
.cta-heading { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); margin: 0; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
/* the clause under "Sign up free" (adopted public proposal 6) — body ink, because the band sits on the lower, darker floor */
.cta-free-note { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-body); text-align: right; }
@media (max-width: 720px) {
.cta-actions { align-items: flex-start; }
.cta-free-note { text-align: left; }
}
/* footer */
.site-footer { border-top: 1px solid var(--hs-hairline); margin-top: 34px; padding: 22px 0 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-lockup { display: flex; align-items: center; gap: 10px; }
.footer-copyright { font-size: 13px; color: var(--hs-ink-body); }
.footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-link { font-size: 13px; font-weight: 500; color: var(--hs-ink-body); }
/* T-SB-40 (Section 35: only the twelve search pages marked ready for the first release are linked from the site's
   navigation, the sitemap and the home page): the base template's footer carries them as a second row of footer links,
   the same link style as the row above, under a hairline — on every public and documentation page, the home page included */
.footer-learn { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--hs-hairline); }
/* The Light / Dark / Device switch (Decision 387): the footer's last row, at its right. The switch itself is the
   dashboard's segmented control, rule for rule (dashboard.css), so the three faces draw one component. */
.footer-theme { flex-basis: 100%; display: flex; justify-content: flex-end; }
/* At phone width the footer reads left-aligned throughout, so the switch starts at the left with everything else. */
@media (max-width: 640px) { .footer-theme { justify-content: flex-start; } }
/* On the dark footer the switch's own sunk track almost matches the ground; a hairline keeps it reading as one control. */
html[data-theme="dark"] .footer-theme .hs-theme-switch { box-shadow: inset 0 0 0 1px var(--hs-hairline); }
.hs-theme-switch { display: flex; gap: 5px; background: var(--hs-surface-sunk); border-radius: var(--hs-r-field); padding: 3px; flex-shrink: 0; }
.hs-theme-option { font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1; padding: 6px 12px; border-radius: 7px; color: var(--hs-ink-muted); cursor: pointer; border: none; background: transparent; }
.hs-theme-option.is-active { background: var(--hs-action); color: var(--hs-on-action); }
/* Below 900 pixels each option takes a tap anywhere in a 44 by 44 box centred on it, drawn exactly as before (the
   dashboard's own phone touch rule). */
@media (max-width: 900px) {
.hs-theme-option { position: relative; }
.hs-theme-option::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
/* The documentation's own bar under the site's bar — QUICK START, GUIDES, REFERENCE — drawn by _docs_nav.html on every
   documentation page (docs-home__c, guides__c, guide__c, docs-reference__a); its styles live here alone. */
.docs-subnav { display: flex; align-items: center; gap: 22px; padding: 12px 0; border-bottom: 1px solid var(--hs-hairline); flex-wrap: wrap; }
.docs-subnav-current { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--hs-ink); border-bottom: 2px solid var(--hs-amber); padding-bottom: 4px; }
.docs-subnav-link { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--hs-ink-muted); }
.docs-subnav-link:hover { color: var(--hs-ink); text-decoration: none; }
/* ================================================================================================================
   polish re-check, round two (2026-09-22) — the try-it shell's craft fixes: the same block the try-it page family
   carries at the end of its stylesheet. Nothing here adds or removes an element; every colour is a brand token or a
   mix of two brand tokens.
   ================================================================================================================ */
/* controls take the page's type: a button, a select or an input does not inherit a font on its own, so without this
   rule Render and Copy fall to the browser's default face */
button, select, input, textarea { font: inherit; }
/* the Copy control below the box it copies, right-aligned — the try-it page's address-card form */
.bench-copy-btn { align-self: flex-end; }
/* every control answers the pointer, the keyboard and the press: a hover rule in the brand's tokens (only where a
   pointer can hover) and one focus ring */
.bench-copy-btn { transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
@media (hover: hover) {
.bench-copy-btn:hover { border-color: var(--hs-amber); background: var(--hs-surface-sunk); }
}
:is(a, button, select, input, textarea, summary):focus-visible { outline: 2px solid var(--hs-amber); outline-offset: 2px; }
/* below 940px the Copy control clears the 44px touch floor */
@media (max-width: 940px) {
.bench-copy-btn { min-height: 44px; }
}
/* phone touch floor (44 px) on the bar and the footer without changing how they look: "Menu" grows into the bar's own
   padding, Start free's press area reaches 2 px past its drawn edge, and each footer link's press area reaches past
   its line into the gap between rows */
@media (max-width: 639px) {
.nav-menu-summary { height: 44px; margin: -2px 0; }
.nav .btn-primary { position: relative; }
.nav .btn-primary::before { content: ""; position: absolute; inset: -2px 0; }
.footer-link { display: inline-block; padding: 15px 0; margin: -15px 0; }
/* usability pass 2026-09-30: the breadcrumb and the documentation's QUICK START / GUIDES / REFERENCE row were 13 px tall
   to a thumb; each link's press area now reaches 44 px into the space around it, drawn exactly as before */
a.crumb, .docs-subnav-link { display: inline-block; padding: 16px 0; margin: -16px 0; }
/* the documentation's small Copy buttons (28 px) and example tabs (30 px) keep their drawn size; their press area
   reaches 8 px above and below, as Start free's does */
.copy-btn, .ex-tab { position: relative; }
.copy-btn::before, .ex-tab::before { content: ""; position: absolute; inset: -8px 0; }
}
/* A Copy control just used (js/copy-button.js): it reads "Copied" for two seconds with the amber edge, so the press
   visibly did something; the status line that says so to a screen reader is kept off screen, as the dashboard's is. */
.bench-copy-btn[data-copied="true"], .copy-btn[data-copied="true"], .tryCopyBtn[data-copied="true"] { border-color: var(--hs-amber); background: var(--hs-surface-sunk); }
.hs-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Scrollbars in the product's own colours (Decision 185) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--hs-ink-muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hs-ink-muted) 45%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--hs-ink-muted); }
/* hyke-studio: vehicles sit on the surface */
img[src^="/vehicle-pictures/"], img[src^="/showcase/"], img[src^="/static/img/"][src$=".webp"] {
  /* two shadows: a tight one for contact, a wide soft one for the light in the room. Lengths are
     in pixels, not em - on a picture, em resolves against the inherited font size, which would
     have given a half-pixel shadow nobody could see. */
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.34)) drop-shadow(0 20px 16px rgba(0,0,0,.22));
}
/* the bar stays above everything the page pins beneath it — the picture (4) and the picker's Render foot (5), which
   on a phone slides up under the bar as the card leaves the screen — at its own rule's level (.nav above) */
[data-element-id="site.nav.navBar"] {position:sticky;top:0;z-index:20;}
[data-element-id="site.footer.footerBar"] {overflow:hidden;}
/* loading state (screen map line 52; T-SB-4): the page's words and figures arrive with it — it is rendered on the
server after its reads — so the only things still arriving are pictures: the gallery's six (the showcase keeps its own
frames, css/home-showcase.css). Each
keeps its frame's size with a plain placeholder (the sunk surface with the hairline, in both looks) until its picture
arrives; there is no spinner anywhere, and the corner mark arrives with each picture, since it is part of the picture. */
.hs-skeleton { display: block; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-chip); }
.gallery-img.hs-skeleton { width: 100%; aspect-ratio: 3 / 2; height: auto; border-radius: var(--hs-r-field); }
/* badge-missing state (screen map line 108; owner review 2026-09-25 H4): the uptime service's badge did not load.
Its space shows nothing — never a broken-image mark — and keeps the badge's height, so the row does not shift;
the page's own status link beside it stays, so the visitor has exactly one way to the status page. */
.status-badge--badge-failed { min-height: 32px; }
/* The uptime service's own badge (Section 40): a plain image at the badge's height. */
.status-badge-image { display: block; height: 32px; width: auto; }
/* Section 59d: the figures page's link under the reliability panel's figures. */
.reliability-more { margin: 12px 0 0; }
/* A hidden part stays hidden whatever its class. */
.hs-floor [hidden] { display: none !important; }