/* Inter variable 400–800 (SIL OFL 1.1), self-hosted from assets/fonts.
   Same subsets and unicode ranges Google Fonts serves, so a page only
   downloads what its text needs. Paths are relative to dist/theme.css. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * BackHere — the product site of an app for saving places you want to return to.
 *
 * 0.2 redesign: the page opens ON the map, the way the app does. A drawn street
 * plan fills the hero, with the headline on a white card in one corner and the
 * app's own place card floating in the other; then one outing told as three
 * distances, the four actions as a bento in their four fixed colours, plans,
 * where the data lives, and a dark closing band.
 *
 * The app's rules still decide the details. Four things the app does, four
 * fixed colours (orange: save · blue: where am I · green: back here · purple:
 * send a location); one big button per screen; type a step larger than a site
 * would normally use, because the app is used outdoors, one-handed, and by
 * older readers.
 */

/* -------------------------------------------------------------------------
 * Colour modes — three blocks, and the order is the mechanism.
 *
 *   1. `:root`                      — LIGHT, the base.
 *   2. `prefers-color-scheme: dark` — the OS, unless the visitor chose light.
 *   3. `[data-theme="dark"]`        — an explicit choice, which beats the OS.
 *
 * The dark tokens are written twice, in 2 and 3, and build.mjs refuses to build
 * when the two lists drift.
 * ---------------------------------------------------------------------- */

:root {
  /* The app's four action colours, unchanged from `src/ui/theme.ts`. Each one
     names one thing the app does; using one for anything else breaks the
     promise that colour alone tells you what a button will do. */
  --bh-save: #f26a1b;
  --bh-where: #2563eb;
  --bh-back: #16a34a;
  --bh-send: #8b5cf6;
  /* The same four, deep enough to carry white text at AA (orange carries dark
     text instead — white on #f26a1b is 3:1). */
  --bh-save-on: #1c1206;
  --bh-back-deep: #15803d;
  --bh-send-deep: #7c3aed;

  /* The category badges, same values as `src/places/categories.ts`. */
  --bh-cat-car: #e8443a;
  --bh-cat-hotel: #8b5cf6;
  --bh-cat-home: #2563eb;
  --bh-cat-food: #f97316;
  --bh-cat-favorite: #ec4899;
  --bh-cat-other: #6b7280;

  --bh-accent: #f26a1b;
  --bh-on-accent: #1c1206;

  --bh-font: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", sans-serif;
  --bh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bh-r-sm: 10px;
  --bh-r: 14px;
  --bh-r-lg: 24px;
  --bh-r-xl: 28px;
  --bh-pill: 999px;

  --bh-band: clamp(56px, 7vw, 112px);
  --bh-head-gap: clamp(32px, 4vw, 56px);
  --bh-doc-gap: 40px;

  /* ---- LIGHT (base) ---- */
  --bh-bg: #ffffff;
  --bh-surface: #ffffff;
  --bh-panel: #ffffff;
  --bh-panel-2: #f2f0ec;
  --bh-tint: #f6f4f0;
  --bh-line: #e6e2db;
  --bh-line-strong: #d3cec4;
  --bh-ink: #1b2129;
  --bh-muted: #5a626d;
  --bh-accent-text: #a8410c;
  --bh-shadow: 0 30px 70px -20px rgba(27, 33, 41, 0.32), 0 2px 8px rgba(27, 33, 41, 0.06);
  --bh-shadow-sm: 0 10px 28px -10px rgba(27, 33, 41, 0.28);
  --bh-map-land: #ece7dd;
  --bh-map-road: #ffffff;
  --bh-map-block: #ddd6c8;
  --bh-map-lot: #f4d7c0;
  --bh-map-park: #cfe2c2;
  --bh-map-water: #c6dbea;
  --bh-night: #14181e;
  --bh-night-2: #1d232b;
  --bh-night-ink: #f4f2ee;
  --bh-night-muted: #b0b7c1;
  --bh-night-line: rgba(255, 255, 255, 0.1);
}

/* ---- DARK, from the OS, while no explicit light choice is in force ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bh-bg: #0e1115;
    --bh-surface: #13171c;
    --bh-panel: #181d23;
    --bh-panel-2: #222830;
    --bh-tint: #13171c;
    --bh-line: #272d35;
    --bh-line-strong: #363d47;
    --bh-ink: #eef0f3;
    --bh-muted: #a3abb6;
    --bh-accent-text: #fda94b;
    --bh-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
    --bh-shadow-sm: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
    --bh-map-land: #161b21;
    --bh-map-road: #29303a;
    --bh-map-block: #1e242c;
    --bh-map-lot: #3a2719;
    --bh-map-park: #18271e;
    --bh-map-water: #132232;
    --bh-night: #07090c;
    --bh-night-2: #12161b;
    --bh-night-ink: #f4f2ee;
    --bh-night-muted: #a3abb6;
    --bh-night-line: rgba(255, 255, 255, 0.08);
  }
}

/* ---- DARK, chosen by the visitor. Same list as above. ---- */
:root[data-theme="dark"] {
  --bh-bg: #0e1115;
  --bh-surface: #13171c;
  --bh-panel: #181d23;
  --bh-panel-2: #222830;
  --bh-tint: #13171c;
  --bh-line: #272d35;
  --bh-line-strong: #363d47;
  --bh-ink: #eef0f3;
  --bh-muted: #a3abb6;
  --bh-accent-text: #fda94b;
  --bh-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
  --bh-shadow-sm: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  --bh-map-land: #161b21;
  --bh-map-road: #29303a;
  --bh-map-block: #1e242c;
  --bh-map-lot: #3a2719;
  --bh-map-park: #18271e;
  --bh-map-water: #132232;
  --bh-night: #07090c;
  --bh-night-2: #12161b;
  --bh-night-ink: #f4f2ee;
  --bh-night-muted: #a3abb6;
  --bh-night-line: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

.bh {
  background: var(--bh-bg);
  color: var(--bh-ink);
  font-family: var(--bh-font);
  /* One step larger than a site would normally set: outdoors, one-handed,
     older readers. */
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

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

/* Element defaults at zero specificity, so every class below wins over them. */
:where(.bh) h1,
:where(.bh) h2,
:where(.bh) h3 {
  margin: 0;
  font-weight: 750;
  text-wrap: balance;
}

:where(.bh) h1 {
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

:where(.bh) h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

:where(.bh) h3 {
  font-size: clamp(20px, 1.6vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Vietnamese stacks two marks over a vowel; at line-height 1 they touch the
   line above. Japanese is never tracked tight. */
.bh:lang(vi) h1,
.bh:lang(vi) h2 {
  line-height: 1.12;
}

.bh:lang(ja) h1,
.bh:lang(ja) h2,
.bh:lang(ja) h3 {
  letter-spacing: -0.01em;
  line-height: 1.3;
}

:where(.bh) p {
  margin: 0;
}

:where(.bh) a {
  color: inherit;
}

:where(.bh) img {
  max-width: 100%;
}

.bh__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px);
}

.bh__measure {
  max-width: 820px;
}

.bh__section {
  padding: var(--bh-band) 0;
}

/* The outing and the four actions are one story on one ground. */
.bh__section--moments + .bh__section:not(.bh__section--tint) {
  padding-top: 0;
}

.bh__section--tint {
  background: var(--bh-tint);
}

.bh__section--alt {
  background: var(--bh-bg);
}

.bh__skip {
  position: absolute;
  left: -9999px;
}

.bh__skip:focus {
  left: 12px;
  top: 12px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--bh-accent);
  color: var(--bh-on-accent);
  border-radius: var(--bh-pill);
}

.bh :focus-visible {
  outline: 3px solid var(--bh-where);
  outline-offset: 3px;
  border-radius: 6px;
}

.bh__accent {
  color: var(--bh-accent-text);
}

/* -------------------------------------------------------------------------
 * Type furniture
 * ---------------------------------------------------------------------- */

.bh__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--bh-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bh-accent-text);
}

.bh__eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--bh-accent);
}

.bh__lead {
  margin-top: 20px;
  font-size: clamp(19px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--bh-muted);
  max-width: 40em;
}

.bh__note {
  margin-top: 24px;
  font-size: 16px;
  color: var(--bh-muted);
}

.bh__empty {
  padding: 32px;
  border: 1px dashed var(--bh-line-strong);
  border-radius: var(--bh-r-lg);
  color: var(--bh-muted);
  text-align: center;
}

.bh__section-head {
  display: grid;
  gap: 0 56px;
  margin-bottom: var(--bh-head-gap);
}

.bh__section-head h2 {
  max-width: 18ch;
}

.bh:lang(ja) .bh__section-head h2 {
  max-width: 24em;
}

@media (min-width: 960px) {
  .bh__section-head {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
  }

  .bh__section-head .bh__lead {
    margin-top: 0;
  }
}

.bh__section-head--center {
  text-align: center;
  justify-items: center;
}

.bh__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * One filled button per band, the shape of the app's own big button.
 * ---------------------------------------------------------------------- */

.bh__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--bh-pill);
  background: var(--bh-accent);
  color: var(--bh-on-accent);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.bh a.bh__button {
  color: var(--bh-on-accent);
}

.bh__button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.bh__button--ghost,
.bh a.bh__button--ghost {
  background: transparent;
  color: var(--bh-ink);
  box-shadow: inset 0 0 0 1px var(--bh-line-strong);
}

.bh__button--small {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15.5px;
}

.bh__text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--bh-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.bh a.bh__text-link {
  color: var(--bh-accent-text);
}

.bh__text-link:hover {
  text-decoration-thickness: 2px;
}

.bh__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 22px;
}

/* Store badges: dark rounded rectangles in both modes, as the stores draw them. */
.bh__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.bh__store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 22px 0 18px;
  border-radius: var(--bh-r);
  background: #0d0f12;
  color: #ffffff;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 0.15s ease;
}

/* `.bh a { color: inherit }` out-specifies a bare class; an anchor badge would
   inherit the band's colour and the glyph (fill: currentColor) would vanish. */
.bh a.bh__store {
  color: #ffffff;
}

.bh a.bh__store:hover {
  transform: translateY(-1px);
}

.bh__store svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.bh__store small {
  display: block;
  font-size: 11.5px;
  opacity: 0.78;
  line-height: 1.2;
}

.bh__store strong {
  display: block;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.bh__store--soon {
  background: transparent;
  color: var(--bh-muted);
  box-shadow: inset 0 0 0 1px var(--bh-line-strong);
  cursor: default;
}

/* -------------------------------------------------------------------------
 * Header
 *
 * A phone menu that grows into a bar. Below 960px everything but the brand
 * sits in a panel opened by the checkbox before it (CSS-only — a theme ships
 * no client script); above it the panel is the row it always was.
 * ---------------------------------------------------------------------- */

.bh__header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bh-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--bh-line);
}

.bh__header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.bh__menu-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.bh__menu-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border-radius: var(--bh-pill);
  box-shadow: inset 0 0 0 1px var(--bh-line-strong);
  color: var(--bh-ink);
  cursor: pointer;
}

.bh__menu-bars,
.bh__menu-bars::before,
.bh__menu-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.bh__menu-bars {
  position: relative;
}

.bh__menu-bars::before,
.bh__menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.bh__menu-bars::before {
  top: -6px;
}

.bh__menu-bars::after {
  top: 6px;
}

.bh__menu-check:checked + .bh__menu-button .bh__menu-bars {
  background: transparent;
}

.bh__menu-check:checked + .bh__menu-button .bh__menu-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.bh__menu-check:checked + .bh__menu-button .bh__menu-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.bh__menu-check:focus-visible + .bh__menu-button {
  outline: 3px solid var(--bh-where);
  outline-offset: 2px;
}

.bh__header-panel {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 8px 0 16px;
}

.bh__menu-check:checked ~ .bh__header-panel {
  display: flex;
}

.bh__header-panel .bh__nav ul {
  flex-direction: column;
  gap: 2px;
}

.bh__header-panel .bh__nav a {
  display: block;
  padding: 13px 14px;
  border-radius: var(--bh-r);
  font-size: 18px;
  color: var(--bh-ink);
}

.bh__header-panel .bh__header-actions {
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--bh-line);
}

.bh__header-panel .bh__header-actions .bh__button {
  flex: 1 1 100%;
}

@media (min-width: 960px) {
  .bh__menu-check,
  .bh__menu-button {
    display: none;
  }

  .bh__lang ul {
    left: auto;
    right: 0;
  }

  .bh__header-panel {
    display: flex;
    flex: 1;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0;
  }

  /* One row, whatever the labels say: a label too long for the bar is cut
     with an ellipsis rather than growing a second row. */
  .bh__header-panel .bh__nav {
    min-width: 0;
    margin-left: 20px;
  }

  .bh__header-panel .bh__nav ul {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .bh__header-panel .bh__nav li {
    min-width: 0;
  }

  .bh__header-panel .bh__nav a {
    display: block;
    max-width: 22ch;
    padding: 8px 14px;
    border-radius: var(--bh-pill);
    font-size: 16px;
    color: var(--bh-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bh__header-panel .bh__header-actions {
    padding-top: 0;
    border-top: none;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .bh__header-panel .bh__header-actions .bh__button {
    flex: none;
  }
}

.bh__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.bh__brand img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  object-fit: cover;
}

.bh__brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--bh-save);
  color: #fff;
}

.bh__brand-mark svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.bh__brand-text strong {
  display: block;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.bh__brand-text small {
  display: block;
  font-size: 13px;
  color: var(--bh-muted);
  line-height: 1.3;
}

.bh__brand--compact .bh__brand-text small {
  display: none;
}

.bh__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh__nav a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--bh-pill);
  font-size: 16px;
  font-weight: 550;
  text-decoration: none;
  color: var(--bh-muted);
}

.bh__nav a:hover {
  background: var(--bh-panel-2);
  color: var(--bh-ink);
}

.bh__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bh__icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--bh-line-strong);
  background: transparent;
  color: var(--bh-ink);
  cursor: pointer;
}

.bh__lang {
  position: relative;
}

.bh__lang summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--bh-pill);
  box-shadow: inset 0 0 0 1px var(--bh-line-strong);
  font-family: var(--bh-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
}

.bh__lang summary::-webkit-details-marker {
  display: none;
}

.bh__lang summary i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.bh__lang ul {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bh-panel);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-r);
  box-shadow: var(--bh-shadow);
  z-index: 50;
}

.bh__lang a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--bh-r-sm);
  font-size: 16px;
  text-decoration: none;
}

.bh__lang a:hover,
.bh__lang a[aria-current="page"] {
  background: var(--bh-panel-2);
}

/* -------------------------------------------------------------------------
 * The map hero
 *
 * Two layouts. From 1180px the map fills the band and both cards float on
 * it: the headline bottom-left, the app's place card top-right, the pin and
 * the dot in the street between them. Below that the map becomes a strip
 * with the place card on it and the headline card overlapping its foot.
 *
 * In the narrow layout the drawing is not `slice`-scaled to the box (that
 * would push the pin under the place card on a tall, thin screen); it is a
 * fixed-size drawing centred on the walk between the dot and the pin.
 * ---------------------------------------------------------------------- */

.bh__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The narrow layout's map height; the card below starts just above it. */
  --bh-map-h: 620px;
  --bh-map-s: 0.694;
  --bh-map-top: 92px;
}

.bh__map {
  position: absolute;
  inset: 0 0 auto;
  height: var(--bh-map-h);
  z-index: -1;
  overflow: hidden;
  background: var(--bh-map-land);
}

.bh__map svg {
  position: absolute;
  left: 50%;
  top: var(--bh-map-top);
  width: calc(1440px * var(--bh-map-s));
  height: calc(820px * var(--bh-map-s));
  /* 830 is the midpoint of the dot and the pin in map units. */
  transform: translateX(calc(-830px * var(--bh-map-s)));
  overflow: visible;
}

.bh__map-water { fill: var(--bh-map-water); }
.bh__map-park { fill: var(--bh-map-park); }
.bh__map-blocks rect { fill: var(--bh-map-block); }
.bh__map-blocks .bh__map-block--lot { fill: var(--bh-map-lot); }

.bh__map-roads path {
  fill: none;
  stroke: var(--bh-map-road);
  stroke-width: 22;
  stroke-linecap: round;
}

.bh__map-roads .bh__map-road--major {
  stroke-width: 36;
}

.bh__map-roads .bh__map-road--minor {
  stroke-width: 11;
}

.bh__map-route {
  fill: none;
  stroke: var(--bh-save);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0.1 17;
}

.bh__map-halo {
  fill: color-mix(in srgb, var(--bh-where) 18%, transparent);
  transform-box: fill-box;
  transform-origin: center;
}

.bh__map-me {
  fill: var(--bh-where);
  stroke: #ffffff;
  stroke-width: 5;
}

.bh__map-pin { fill: var(--bh-save); }
.bh__map-pin-dot { fill: #ffffff; }
.bh__map-pin-shadow { fill: rgba(0, 0, 0, 0.18); }

@media (prefers-reduced-motion: no-preference) {
  .bh__map-route {
    animation: bh-walk 1.6s linear infinite;
  }

  .bh__map-halo {
    animation: bh-pulse 2.8s ease-out infinite;
  }
}

@keyframes bh-walk {
  to {
    stroke-dashoffset: -17.1;
  }
}

@keyframes bh-pulse {
  0% {
    transform: scale(0.55);
    opacity: 1;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.bh__hero-stage {
  position: relative;
  padding-top: 20px;
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* The app's place card. */
.bh__float {
  position: absolute;
  top: 20px;
  right: clamp(18px, 4vw, 36px);
  left: clamp(18px, 4vw, 36px);
  max-width: 360px;
  margin-left: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--bh-r-lg);
  background: var(--bh-panel);
  box-shadow: var(--bh-shadow);
}

.bh__float p {
  margin: 0;
}

.bh__float-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bh__float-top .bh__badge {
  width: 44px;
  height: 44px;
}

.bh__float-place {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.bh__float-saved {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--bh-muted);
}

.bh__float-distance {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--bh-r);
  background: color-mix(in srgb, var(--bh-back) 10%, var(--bh-panel));
}

.bh__float-dial {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bh-back-deep);
  color: #fff;
}

.bh__float-dial svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.bh__float-distance div > strong {
  display: block;
  font-size: 32px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.bh__float-distance div > span {
  display: block;
  font-size: 14.5px;
  color: var(--bh-muted);
}

.bh__float-go,
.bh__float-save {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: var(--bh-pill);
  font-size: 17px;
  font-weight: 650;
  text-align: center;
}

.bh__float-go {
  background: var(--bh-back-deep);
  color: #fff;
}

.bh__float-save {
  min-height: 58px;
  background: var(--bh-save);
  color: var(--bh-save-on);
  font-size: 18px;
}

.bh__float-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bh__float-tile {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--bh-r);
  background: var(--bh-panel-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.bh__float-tile::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--k, var(--bh-where));
}

.bh__float-tile--where { --k: var(--bh-where); }
.bh__float-tile--back { --k: var(--bh-back); }
.bh__float-tile--send { --k: var(--bh-send); }

/* The app's one big button, at the foot of the map. Wide layout only. */
.bh__fab {
  display: none;
}

.bh__hero-card {
  position: relative;
  margin-top: calc(var(--bh-map-h) - 60px);
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--bh-r-xl);
  background: var(--bh-panel);
  box-shadow: var(--bh-shadow);
}

.bh__hero-card h1 {
  font-size: clamp(34px, 3.4vw, 50px);
  letter-spacing: -0.045em;
}

.bh__hero-card .bh__lead {
  font-size: clamp(18px, 1.4vw, 20px);
}

.bh__hero-card .bh__stores {
  margin-top: 26px;
}

.bh__hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--bh-line);
}

.bh__hero-notes li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: var(--bh-pill);
  background: var(--bh-panel-2);
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.4;
}

.bh__hero-notes li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bh-back);
}

@media (min-width: 640px) {
  .bh__hero {
    --bh-map-s: 0.86;
    --bh-map-h: 680px;
    --bh-map-top: 60px;
  }

  .bh__hero-card {
    max-width: 640px;
  }
}

@media (min-width: 1180px) {
  .bh__hero {
    --bh-map-h: 100%;
  }

  .bh__map {
    inset: 0;
    height: auto;
  }

  .bh__map svg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    overflow: hidden;
  }

  .bh__hero-stage {
    display: flex;
    align-items: flex-end;
    min-height: clamp(760px, 92vh, 900px);
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .bh__float {
    top: 48px;
    left: auto;
    width: 340px;
  }

  .bh__fab {
    position: absolute;
    right: clamp(18px, 4vw, 36px);
    bottom: 56px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 0 26px 0 20px;
    border-radius: var(--bh-pill);
    background: var(--bh-save);
    color: var(--bh-save-on);
    font-size: 18px;
    font-weight: 650;
    box-shadow: var(--bh-shadow-sm);
  }

  .bh__fab svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
  }

  .bh__hero-card {
    margin-top: 0;
    width: 580px;
    max-width: 580px;
  }
}

/* -------------------------------------------------------------------------
 * Category badges — a colour disc with a white glyph, as in the app
 * ---------------------------------------------------------------------- */

.bh__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bh-cat-other);
  color: #fff;
}

.bh__badge svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh__badge--car { background: var(--bh-cat-car); }
.bh__badge--hotel { background: var(--bh-cat-hotel); }
.bh__badge--home { background: var(--bh-cat-home); }
.bh__badge--food { background: var(--bh-cat-food); }
.bh__badge--favorite { background: var(--bh-cat-favorite); }
.bh__badge--other { background: var(--bh-cat-other); }

/* -------------------------------------------------------------------------
 * The outing — three distances on one line
 * ---------------------------------------------------------------------- */

.bh__moments {
  position: relative;
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The walk, dashed, behind the nodes. */
.bh__moments::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 26px;
  bottom: 26px;
  border-left: 2px dashed var(--bh-line-strong);
}

.bh__moment {
  position: relative;
  padding-left: 76px;
}

.bh__moment-node {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bh-bg);
  box-shadow: inset 0 0 0 1.5px var(--bh-line-strong);
  color: var(--bh-ink);
}

.bh__moment--on .bh__moment-node {
  background: var(--bh-save);
  box-shadow: none;
  color: var(--bh-save-on);
}

.bh__moment-figure {
  font-size: clamp(54px, 7.4vw, 108px);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bh__moment--on .bh__moment-figure {
  color: var(--bh-accent-text);
}

.bh__moment h3 {
  margin-top: 16px;
}

.bh__moment-body {
  margin-top: 8px;
  color: var(--bh-muted);
  max-width: 30ch;
}

.bh:lang(ja) .bh__moment-body {
  max-width: 22em;
}

@media (min-width: 760px) {
  .bh__moments {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: 32px;
  }

  .bh__moments::before {
    left: 26px;
    right: 26px;
    top: 25px;
    bottom: auto;
    border-left: 0;
    border-top: 2px dashed var(--bh-line-strong);
  }

  .bh__moment {
    padding-left: 0;
  }

  .bh__moment-node {
    position: relative;
    margin-bottom: 36px;
  }
}

/* -------------------------------------------------------------------------
 * The four actions — a bento in the app's four colours
 * ---------------------------------------------------------------------- */

.bh__bento {
  display: grid;
  gap: 16px;
}

.bh__tile {
  --k: var(--bh-save);
  --k-fill: var(--bh-save);
  --k-on: var(--bh-save-on);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--bh-r-lg);
  background: color-mix(in srgb, var(--k) 7%, var(--bh-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 22%, var(--bh-line));
  overflow: hidden;
}

.bh__tile--where { --k: var(--bh-where); --k-fill: var(--bh-where); --k-on: #ffffff; }
.bh__tile--back { --k: var(--bh-back); --k-fill: var(--bh-back-deep); --k-on: #ffffff; }
.bh__tile--send { --k: var(--bh-send); --k-fill: var(--bh-send-deep); --k-on: #ffffff; }

.bh__tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bh__tile-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--k-fill);
  color: var(--k-on);
}

.bh__tile-icon .bh__icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.1;
}

.bh__tile-num {
  font-family: var(--bh-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--bh-muted);
  font-variant-numeric: tabular-nums;
}

.bh__tile h3 {
  font-size: clamp(23px, 2vw, 28px);
  letter-spacing: -0.03em;
}

.bh__tile p {
  margin-top: 10px;
  color: var(--bh-muted);
  font-size: 17.5px;
  max-width: 36ch;
}

/* The lead tile: filled with its own colour, the one big button of the app. */
.bh__tile--lead {
  background: var(--k-fill);
  color: var(--k-on);
  box-shadow: none;
}

.bh__tile--lead .bh__tile-icon {
  background: color-mix(in srgb, var(--k-on) 14%, transparent);
  color: var(--k-on);
}

.bh__tile--lead .bh__tile-num {
  color: var(--k-on);
  opacity: 0.75;
}

.bh__tile--lead h3 {
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.bh__tile--lead p {
  color: var(--k-on);
  opacity: 0.86;
  font-size: clamp(18px, 1.4vw, 20px);
}

.bh__tile--lead .bh__scene {
  margin-top: auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}

@media (min-width: 760px) {
  .bh__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bh__tile--lead {
    grid-column: 1 / -1;
  }

  /* Four items: the three small tiles would leave one alone on a row. */
  .bh__bento--n4 .bh__tile:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1040px) {
  .bh__bento {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  }

  .bh__tile--lead {
    grid-column: 1;
    grid-row: span 2;
    min-height: 560px;
  }

  .bh__bento--n4 .bh__tile:last-child {
    grid-column: 2 / -1;
  }

  .bh__bento--n2 .bh__tile:last-child,
  .bh__bento--n3 .bh__tile:last-child {
    grid-column: 2 / -1;
  }

  .bh__bento--n3 .bh__tile:nth-child(2) {
    grid-column: 2 / -1;
  }
}

/* -------------------------------------------------------------------------
 * Scenes — drawn pictures of the app doing one thing (no text in them)
 * ---------------------------------------------------------------------- */

.bh__scene {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bh-map-land);
}

.bh__scene > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bh__scene-block { fill: var(--bh-map-block); }
.bh__scene-road { fill: none; stroke: var(--bh-map-road); stroke-width: 5; stroke-linecap: round; }
.bh__scene-road--major { stroke-width: 9; }
.bh__scene-shadow { fill: rgba(0, 0, 0, 0.16); }
.bh__scene-pin { fill: var(--bh-save); }
.bh__scene-pin-dot { fill: #fff; }
.bh__scene-card { fill: var(--bh-panel); stroke: var(--bh-line); stroke-width: 1; }
.bh__scene-bar { fill: var(--bh-ink); opacity: 0.7; }
.bh__scene-bar--dim { opacity: 0.3; }
.bh__scene-bar--on { fill: var(--bh-save-on); opacity: 0.9; }
.bh__scene-dot { fill: var(--bh-cat-other); }
.bh__scene-dot--save { fill: var(--bh-save); }
.bh__scene-dot--where { fill: var(--bh-where); }
.bh__scene-dot--back { fill: var(--bh-back); }
.bh__scene-dot--send { fill: var(--bh-send); }
.bh__scene-button { fill: var(--bh-save); stroke: rgba(0, 0, 0, 0.12); stroke-width: 1; }
.bh__scene-me { fill: var(--bh-where); stroke: #fff; stroke-width: 3; }
.bh__scene-accuracy { fill: color-mix(in srgb, var(--bh-where) 20%, transparent); }
.bh__scene-walk { fill: none; stroke: var(--bh-back); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 8; }
.bh__scene-arrow { fill: var(--bh-back); }
.bh__scene-dial { fill: color-mix(in srgb, var(--bh-back) 16%, transparent); }
.bh__scene-park { fill: var(--bh-map-park); }
.bh__scene-water { fill: var(--bh-map-water); }
.bh__scene-chip { fill: var(--bh-panel-2); }
.bh__scene-chip--send { fill: var(--bh-send); }
.bh__scene-chip--save { fill: var(--bh-save); }
.bh__scene-photo { fill: var(--bh-panel); stroke: var(--bh-line); stroke-width: 1; }
.bh__scene-photo-sky { fill: color-mix(in srgb, var(--bh-where) 16%, var(--bh-panel-2)); }
.bh__scene-photo-pillar { fill: var(--bh-muted); opacity: 0.5; }
.bh__scene-clock-face { fill: var(--bh-panel); stroke: var(--bh-line); stroke-width: 1; }
.bh__scene-clock-hand { fill: none; stroke: var(--bh-ink); stroke-width: 2.4; stroke-linecap: round; }
.bh__scene-signal rect { fill: var(--bh-muted); opacity: 0.5; }
.bh__scene-strike { stroke: var(--bh-cat-car); stroke-width: 3; stroke-linecap: round; fill: none; }

/* -------------------------------------------------------------------------
 * Feature wall and situations
 * ---------------------------------------------------------------------- */

.bh__feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.bh__feature {
  --bh-tone: var(--bh-save);
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--bh-r-lg);
  background: var(--bh-panel);
  box-shadow: inset 0 0 0 1px var(--bh-line);
}

.bh__feature--t0 { --bh-tone: var(--bh-cat-car); }
.bh__feature--t1 { --bh-tone: var(--bh-where); }
.bh__feature--t2 { --bh-tone: var(--bh-back); }
.bh__feature--t3 { --bh-tone: var(--bh-send); }
.bh__feature--t4 { --bh-tone: var(--bh-cat-food); }
.bh__feature--t5 { --bh-tone: var(--bh-cat-favorite); }

.bh__feature h3 {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.bh__feature-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bh-tone) 14%, transparent);
  color: var(--bh-tone);
}

.bh__feature p {
  margin-top: 10px;
  color: var(--bh-muted);
  font-size: 17.5px;
}

.bh__scenarios {
  display: grid;
  gap: 0 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.bh__scenario {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--bh-line);
}

.bh__scenario .bh__badge {
  width: 46px;
  height: 46px;
}

.bh__scenario div > strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.bh__scenario div > span {
  display: block;
  margin-top: 4px;
  color: var(--bh-muted);
  font-size: 16.5px;
}

/* -------------------------------------------------------------------------
 * Plans
 * ---------------------------------------------------------------------- */

.bh__plans {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.bh__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--bh-r-xl);
  background: var(--bh-panel);
  box-shadow: inset 0 0 0 1px var(--bh-line);
}

.bh__plan--pick {
  background: var(--bh-night);
  color: var(--bh-night-ink);
  box-shadow: var(--bh-shadow), inset 0 0 0 1px var(--bh-night-line);
}

.bh__plan-tag {
  position: absolute;
  top: clamp(26px, 3vw, 40px);
  right: clamp(26px, 3vw, 40px);
  padding: 5px 12px;
  border-radius: var(--bh-pill);
  background: var(--bh-save);
  color: var(--bh-save-on);
  font-family: var(--bh-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bh .bh__plan-name {
  font-family: var(--bh-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bh-muted);
}

.bh__plan--pick .bh__plan-name {
  color: var(--bh-night-muted);
}

.bh__plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 22px;
}

.bh__plan-price strong {
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

.bh__plan-price span {
  font-size: 17px;
  color: var(--bh-muted);
}

.bh__plan--pick .bh__plan-price span,
.bh__plan--pick .bh__plan-body {
  color: var(--bh-night-muted);
}

.bh__plan-body {
  margin-top: 14px;
  color: var(--bh-muted);
}

.bh__plan ul {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 26px 0 0;
  list-style: none;
  border-top: 1px solid var(--bh-line);
}

.bh__plan--pick ul {
  border-top-color: var(--bh-night-line);
}

.bh__plan li {
  display: flex;
  gap: 12px;
  font-size: 17.5px;
  line-height: 1.5;
}

.bh__plan li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--bh-back-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.bh__plan li.bh__plan-no {
  color: var(--bh-muted);
}

.bh__plan li.bh__plan-no::before {
  background: var(--bh-panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919b' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.bh__plan .bh__button {
  width: 100%;
  margin-top: 30px;
}

/* -------------------------------------------------------------------------
 * The data list — what is stored, and whether it leaves the phone
 *
 * On the homepage a split: the promise on the left, the entries on the right.
 * On a policy page (`bh__page--doc`) one column, entries as rows in a panel.
 * ---------------------------------------------------------------------- */

.bh__data-split {
  display: grid;
  gap: 8px 72px;
}

.bh__data-aside .bh__section-head {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

.bh__data-aside .bh__section-head .bh__lead {
  margin-top: 20px;
}

.bh__data-aside .bh__text-link {
  margin-top: 18px;
}

@media (min-width: 1040px) {
  .bh__data-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .bh__data-aside {
    position: sticky;
    top: 110px;
  }
}

.bh__data {
  display: grid;
  margin: 24px 0 0;
  padding: 0 clamp(20px, 2.4vw, 30px);
  list-style: none;
  border-radius: var(--bh-r-lg);
  background: var(--bh-panel);
  box-shadow: inset 0 0 0 1px var(--bh-line);
}

.bh__data-item {
  padding: 22px 0;
}

.bh__data-item + .bh__data-item {
  border-top: 1px solid var(--bh-line);
}

/* Name on the left; the verdict, and its condition under it, on the right. */
.bh__data-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
}

.bh .bh__data-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.bh__data-verdict {
  display: grid;
  justify-items: end;
  gap: 4px;
  flex: none;
}

.bh__data-when {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--bh-muted);
  text-align: right;
}

.bh__data-where {
  margin: 8px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--bh-muted);
}

.bh__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--bh-pill);
  background: var(--bh-panel-2);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.bh__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.bh__chip--stays {
  background: color-mix(in srgb, var(--bh-back) 14%, transparent);
  color: var(--bh-back-deep);
}

.bh__chip--leaves {
  background: color-mix(in srgb, var(--bh-save) 16%, transparent);
  color: var(--bh-accent-text);
}

:root[data-theme="dark"] .bh__chip--stays {
  color: #4ade80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bh__chip--stays {
    color: #4ade80;
  }
}

/* On a phone the name takes the full line and the verdict sits under it. */
@media (max-width: 640px) {
  .bh__data-head {
    flex-direction: column;
  }

  .bh__data-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
  }
}

@media (min-width: 1040px) {
  .bh__data-split > .bh__data {
    margin-top: 0;
  }
}

/* -------------------------------------------------------------------------
 * Notice — what the app does not do, at the weight of a feature
 * ---------------------------------------------------------------------- */

.bh__notice {
  padding: 0 0 var(--bh-band);
}

.bh__notice-inner {
  --tone: var(--bh-where);
  display: grid;
  gap: 20px;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--bh-r-xl);
  background: var(--bh-tint);
  box-shadow: inset 0 0 0 1px var(--bh-line);
}

.bh__notice--warn .bh__notice-inner { --tone: var(--bh-cat-food); }
.bh__notice--critical .bh__notice-inner { --tone: var(--bh-cat-car); }

@media (min-width: 760px) {
  .bh__notice-inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
  }
}

.bh__notice-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tone);
  color: #1c1206;
  font-family: var(--bh-mono);
  font-size: 20px;
  font-weight: 700;
}

.bh__notice--info .bh__notice-mark,
.bh__notice--critical .bh__notice-mark {
  color: #ffffff;
}

.bh .bh__notice h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -0.04em;
}

.bh__notice p {
  margin-top: 10px;
  color: var(--bh-muted);
}

.bh__notice-list {
  display: grid;
  gap: 0 40px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .bh__notice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bh__notice-list li {
  padding: 18px 0;
  border-top: 1px solid var(--bh-line-strong);
}

.bh__notice-list li strong {
  display: block;
  font-size: 18.5px;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.bh__notice-list li span {
  display: block;
  margin-top: 6px;
  color: var(--bh-muted);
  font-size: 16.5px;
}

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

.bh__faq {
  display: grid;
  border-top: 1px solid var(--bh-line);
}

.bh__faq details {
  border-bottom: 1px solid var(--bh-line);
}

.bh__faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 18px 0;
  font-weight: 650;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.bh__faq summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a minus. */
.bh__faq summary i {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--bh-line-strong);
}

.bh__faq summary i::before,
.bh__faq summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.15s ease;
}

.bh__faq summary i::after {
  transform: rotate(90deg);
}

.bh__faq details[open] summary i::after {
  transform: rotate(0deg);
}

.bh__faq details[open] summary i {
  background: var(--bh-accent);
  color: var(--bh-on-accent);
  box-shadow: none;
}

.bh__faq-answer {
  padding: 0 56px 24px 0;
  color: var(--bh-muted);
}

/* -------------------------------------------------------------------------
 * Closing band — dark, the map faint underneath
 * ---------------------------------------------------------------------- */

.bh__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 140px) 0;
  background: var(--bh-night);
  color: var(--bh-night-ink);
  text-align: center;
}

.bh__cta-map {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 72%);
}

.bh__cta-map svg {
  width: 100%;
  height: 100%;
}

.bh__cta-map path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 18;
  stroke-linecap: round;
}

.bh__cta-inner {
  display: grid;
  justify-items: center;
}

.bh__cta-pin {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
  border-radius: 20px;
  background: var(--bh-save);
  color: var(--bh-save-on);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--bh-save) 18%, transparent);
}

.bh__cta-pin svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.bh__cta .bh__eyebrow {
  color: #fdb07a;
}

.bh__cta h2 {
  max-width: 16ch;
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.bh:lang(vi) .bh__cta h2 {
  line-height: 1.1;
}

.bh__cta .bh__lead {
  margin-inline: auto;
  color: var(--bh-night-muted);
  max-width: 34em;
}

.bh__cta .bh__stores,
.bh__cta .bh__actions {
  justify-content: center;
}

.bh__cta .bh__store {
  background: #ffffff;
  color: #0d0f12;
  box-shadow: none;
}

.bh a.bh__cta .bh__store,
.bh .bh__cta a.bh__store {
  color: #0d0f12;
}

.bh__cta .bh__store--soon {
  background: transparent;
  color: var(--bh-night-muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.bh .bh__cta .bh__text-link {
  color: #fdb07a;
}

/* -------------------------------------------------------------------------
 * Pages, posts, prose
 * ---------------------------------------------------------------------- */

.bh__page-head {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 96px) 0 clamp(36px, 4.4vw, 64px);
  background: var(--bh-tint);
  border-bottom: 1px solid var(--bh-line);
}

.bh__page-head .bh__container {
  position: relative;
  z-index: 1;
}

.bh__page-head h1 {
  max-width: 20ch;
  font-size: clamp(38px, 5vw, 68px);
}

.bh__post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-family: var(--bh-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bh-muted);
}

/* One column per document page: every container on it pinned to one width. */
.bh__page--doc .bh__container,
.bh__page--doc .bh__measure {
  max-width: 860px;
}

/* A document spaces its blocks itself, at the distance a heading already gets
   from its own prose — the homepage bands would leave gaps that read as the
   end of the page. */
.bh__doc .bh__section,
.bh__doc .bh__notice {
  padding: 0;
}

.bh__doc > * + * {
  margin-top: var(--bh-doc-gap);
}

.bh__doc > .bh__page-head + * {
  margin-top: clamp(40px, 5vw, 64px);
}

.bh__doc > :last-child {
  margin-bottom: var(--bh-band);
}

.bh__doc .bh__prose > div > *:first-child {
  margin-top: 0;
}

.bh__doc .bh__section-head {
  gap: 8px;
  margin-bottom: 14px;
}

.bh .bh__doc .bh__section-head h2 {
  max-width: none;
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.bh__doc .bh__section-head .bh__eyebrow {
  display: none;
}

.bh__doc .bh__section-head .bh__lead {
  margin-top: 0;
  font-size: 18px;
}

/* Inside a document the data list and its head are one column, and the note
   and the link follow the list instead of sitting above it. */
.bh__page--doc .bh__data-split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.bh__page--doc .bh__data-aside {
  display: contents;
}

.bh__page--doc .bh__data-split > .bh__data {
  order: 1;
  margin-top: 8px;
}

.bh__page--doc .bh__data-aside .bh__note,
.bh__page--doc .bh__data-aside .bh__text-link {
  order: 2;
}

.bh__page--doc .bh__data-aside .bh__text-link {
  align-self: flex-start;
}

.bh__page--doc .bh__notice-list {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .bh__page--doc .bh__section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .bh__page--doc .bh__section-head .bh__lead {
    margin-top: 4px;
  }
}

.bh__page--doc .bh__page-head .bh__lead {
  max-width: 100%;
}

/* A page built from homepage bands (FAQ, Support) keeps its bands. */
.bh__page--doc:not(.bh__doc) > .bh__page-head + .bh__section {
  padding-top: clamp(40px, 5vw, 72px);
}

/* Document furniture — the date, the summary, the contents. */
.bh__doc-updated {
  margin: 14px 0 0;
  font-family: var(--bh-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--bh-muted);
}

.bh__doc-lead {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: var(--bh-r-lg);
  background: var(--bh-panel);
  box-shadow: inset 0 0 0 1px var(--bh-line);
  color: var(--bh-ink);
}

.bh__toc {
  margin-top: 14px;
  padding: 20px 24px;
  border-radius: var(--bh-r-lg);
  background: var(--bh-panel);
  box-shadow: inset 0 0 0 1px var(--bh-line);
}

.bh__toc b {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bh-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bh-accent-text);
}

.bh__toc b::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--bh-accent);
}

.bh__toc ul {
  columns: 2 16em;
  column-gap: 32px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.bh__toc li {
  break-inside: avoid;
  padding: 4px 0;
}

.bh__toc a {
  color: var(--bh-ink);
  text-decoration: none;
  font-size: 16.5px;
}

.bh__toc a:hover {
  color: var(--bh-accent-text);
  text-decoration: underline;
}

.bh__page--doc [id] {
  scroll-margin-top: 92px;
}

@media print {
  .bh__toc {
    display: none;
  }
}

.bh__prose {
  font-size: 18px;
  line-height: 1.7;
}

.bh__prose h2 {
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 44px 0 14px;
}

.bh__prose h3 {
  margin: 30px 0 10px;
}

.bh__prose p,
.bh__prose ul,
.bh__prose ol {
  margin: 0 0 18px;
}

.bh__prose ul,
.bh__prose ol {
  padding-left: 24px;
}

.bh__prose li {
  margin-bottom: 9px;
}

.bh__prose li::marker {
  color: var(--bh-accent-text);
}

.bh__prose a {
  color: var(--bh-accent-text);
  text-underline-offset: 4px;
}

.bh__prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bh-panel-2);
  font-family: var(--bh-mono);
  font-size: 0.88em;
}

.bh__prose blockquote {
  margin: 0 0 18px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--bh-accent);
  color: var(--bh-muted);
}

.bh__prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 16.5px;
}

.bh__prose th,
.bh__prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bh-line);
  text-align: left;
}

.bh__prose th {
  font-weight: 650;
}

.bh__figure {
  margin: 0;
}

.bh__figure img {
  display: block;
  border-radius: var(--bh-r-lg);
}

.bh__figure figcaption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--bh-muted);
}

.bh__post-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.bh__post-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--bh-r-lg);
  background: var(--bh-panel);
  box-shadow: inset 0 0 0 1px var(--bh-line);
}

.bh__post-card-date {
  margin-bottom: 12px;
  font-family: var(--bh-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bh-muted);
}

.bh__post-card h3 a {
  text-decoration: none;
}

.bh__post-card h3 a:hover {
  color: var(--bh-accent-text);
}

.bh__post-card p {
  margin-top: 10px;
  color: var(--bh-muted);
  font-size: 17px;
}

.bh__pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}

.bh__pager a {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border-radius: var(--bh-pill);
  box-shadow: inset 0 0 0 1px var(--bh-line-strong);
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bh__pager a[aria-current="page"] {
  background: var(--bh-ink);
  color: var(--bh-bg);
  box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 404 / error — a pin that is no longer there
 * ---------------------------------------------------------------------- */

.bh__state {
  padding: clamp(64px, 10vw, 140px) 0;
  text-align: center;
  background: var(--bh-map-land);
}

.bh__state .bh__measure {
  margin: 0 auto;
}

.bh__state .bh__actions {
  justify-content: center;
}

.bh__state-mark {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 36px;
}

/* The pin is the box turned 45°; the number stays level on top of it. */
.bh__state-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--bh-cat-other);
  box-shadow: var(--bh-shadow-sm);
}

.bh .bh__state-mark {
  color: #ffffff;
  font-family: var(--bh-mono);
  font-size: 24px;
  font-weight: 700;
}

.bh__state h1 {
  font-size: clamp(34px, 4.4vw, 58px);
}

.bh__state p {
  color: var(--bh-muted);
  margin-top: 16px;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.bh__footer {
  padding: clamp(56px, 6vw, 88px) 0 32px;
  background: var(--bh-bg);
  border-top: 1px solid var(--bh-line);
}

.bh__footer-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

@media (min-width: 960px) {
  .bh__footer-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
}

.bh__footer-about p {
  margin-top: 16px;
  color: var(--bh-muted);
  font-size: 16px;
  max-width: 34em;
}

.bh__footer-build {
  font-family: var(--bh-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.bh .bh__footer-col h2 {
  margin-bottom: 16px;
  font-family: var(--bh-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--bh-muted);
}

.bh__footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.bh__footer-col a,
.bh__footer-contact a {
  text-decoration: none;
  font-size: 16.5px;
}

.bh__footer-col a:hover,
.bh__footer-contact > a:not(.bh__button):hover {
  color: var(--bh-accent-text);
}

.bh__footer-contact {
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: start;
}

.bh__footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--bh-line);
  font-size: 14.5px;
  color: var(--bh-muted);
}

.bh__footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.bh__footer-bottom a {
  text-decoration: none;
}

.bh__footer-bottom a:hover {
  color: var(--bh-accent-text);
}

.bh__builtwith {
  margin-left: 14px;
}

/* -------------------------------------------------------------------------
 * Phones
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {
  .bh__section-head h2 {
    max-width: none;
  }

  .bh__tile p,
  .bh__feature p {
    font-size: 17px;
  }

  .bh__actions .bh__button {
    flex: 1 1 100%;
  }

  .bh__faq-answer {
    padding-right: 0;
  }

  .bh__plan-tag {
    position: static;
    justify-self: start;
    align-self: flex-start;
    margin-bottom: 18px;
  }

  /* Footer: the brand block left and full width, the two link columns side
     by side, centred, at every phone width. */
  .bh__footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    text-align: center;
  }

  .bh__footer-about,
  .bh__footer-contact {
    grid-column: 1 / -1;
  }

  .bh__footer-about {
    text-align: left;
  }

  .bh__footer-contact {
    justify-items: center;
  }

  .bh__footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .bh__footer-bottom div {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .bh__store {
    flex: 1 1 100%;
  }

  .bh__brand img,
  .bh__brand-mark {
    width: 38px;
    height: 38px;
  }

  .bh__brand-text strong {
    font-size: 18px;
  }

  .bh__brand-text small {
    display: none;
  }

  .bh__float {
    padding: 14px;
    gap: 12px;
  }

  .bh__float-distance div > strong {
    font-size: 28px;
  }
}