/* The home page and the Custom page on OUTLINE v2 (/v2/preview/home-v2/, /v2/preview/custom/; api/previews.py
   home2_html, custom_html; hb-j0p6c). Built from tokens.css; the fan and price styles come from preview.css. */

.hb { padding-bottom: var(--s8); }

/* top bar: brand, then Shop · Get inspired · Custom, then the two small links */
.hb-top { flex-wrap: wrap; row-gap: var(--s1); }
.hb-nav { display: flex; gap: var(--s4); order: 3; width: 100%; }
.hb-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; padding: var(--s2) 0; min-height: 40px;
  display: inline-flex; align-items: center;
}
.hb-nav a[aria-current="page"], .hb-nav a.is-on { color: var(--accent); }
.hb-small { display: flex; gap: var(--s3); }
.hb-small a { color: var(--ink-2); text-decoration: none; padding: var(--s2) 0; }
@media (min-width: 720px) {
  .hb-nav { order: 0; width: auto; margin-left: var(--s6); margin-right: auto; }
}

/* the headline and the reel */
.hb-hero { padding: var(--s3) 0 var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.hb-title { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-tight); }
.hb-reel {
  overflow: hidden; margin: 0 calc(-1 * var(--s5)); padding: var(--s2) 0 var(--s3);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hb-reel-track { display: flex; gap: var(--s3); width: max-content; animation: hb-slide 70s linear infinite; }
.hb-reel:hover .hb-reel-track, .hb-reel:focus-within .hb-reel-track { animation-play-state: paused; }
.hb-reel-copy { display: flex; gap: var(--s3); }
.hb-reel-card { flex: none; display: block; border-radius: 8px; box-shadow: var(--shadow-card); background: var(--card); }
.hb-reel-card img { display: block; height: 200px; width: auto; border-radius: 8px; }
@keyframes hb-slide { to { transform: translateX(calc(-50% - var(--s3) / 2)); } }
@media (prefers-reduced-motion: reduce) {
  .hb-reel { overflow-x: auto; mask-image: none; }
  .hb-reel-track { animation: none; padding: 0 var(--s5); }
  .hb-reel-copy { display: none; }
}

/* Shop | Get inspired */
.hb-tablist { display: flex; gap: var(--s2); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); }
.hb-tab {
  padding: var(--s3) var(--s4); min-height: var(--tap); display: inline-flex; align-items: center;
  font-weight: 700; color: var(--ink-2); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.hb-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.hb-sec { padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); }
.hb-panel > .hb-sec:first-child { border-top: 0; }
.hb-h3 { margin: 0; font-size: var(--text-xl); }
.hb-sec-line { margin: 0; color: var(--ink-2); }
/* a section with its own page (Map decks: /maps) links its heading there, with a small "See all" beside it */
.hb-h3 a { color: inherit; text-decoration: none; }
.hb-h3 .hb-sec-all { margin-left: var(--s2); font-family: var(--font-ui); font-size: var(--text-s); font-weight: 700;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.hb-rail {
  display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: var(--s2) calc(-1 * var(--s5)) 0; padding: 2px var(--s5) var(--s3); scroll-padding-inline: var(--s5);
}
.hb-rail::-webkit-scrollbar { display: none; }

/* a tile; positioned, so an open notify form's hidden label stays inside the rail (it widened the page to 565 px at
   390 when the second tile's form was open; hb-j0p6c shift 6) */
.hb-tile {
  position: relative; flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-1);
}
.hb-stage { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #2b2733; }
.hb-stage .hb-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-tile.is-soon .hb-pic { filter: saturate(0.85); }
.hb-cap { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.hb-cap h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-l); font-weight: 600; line-height: 1.15; }
.hb-cap h4 a { color: inherit; text-decoration: none; }
.hb-line { margin: 0; font-size: var(--text-s); color: var(--ink-2); }
.hb-cap .pv-price { margin: auto 0 0; font-weight: 600; font-size: var(--text-s); }
.hb-cap .btn { min-height: 44px; font-size: var(--text-s); }
.hb-soon { margin: auto 0 0; font-weight: 700; font-size: var(--text-s); color: var(--accent); }
.hb-notify summary { list-style: none; cursor: pointer; width: 100%; min-height: 44px; font-size: var(--text-s); }
.hb-notify summary::-webkit-details-marker { display: none; }
.hb-notify[open] summary { display: none; }
/* the summary already says "Tell me when it's ready": the form's label stays for screen readers only */
.hb-notify .nl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hb-notify .nl-row { flex-direction: column; }
.hb-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.hb-acts .btn { flex: 1 1 auto; }
.hb-insp .hb-stage { background: var(--paper-2); }

/* the one line to Custom */
.hb-strip {
  display: flex; flex-direction: column; gap: var(--s2); margin: var(--s4) 0 var(--s6); padding: var(--s4) var(--s5);
  background: var(--ink); color: var(--paper); border-radius: var(--radius-m); text-decoration: none;
}
.hb-strip-line { font-family: var(--font-display); font-size: var(--text-l); line-height: 1.25; }
.hb-strip-go { font-weight: 700; color: var(--gold); }
.hb-strip .pv-todo { color: #5a4600; }

/* the Custom page's doors */
.hb-doors { display: flex; flex-direction: column; }
.hb-door { padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.hb-door .l-kicker { margin: 0; }
.hb-door-h { margin: 0; font-size: var(--text-xl); line-height: 1.15; }
.hb-door-h a { color: inherit; text-decoration: none; }
.hb-ideas { margin: 0; padding-left: 1.2em; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; }
.hb-prices { margin: 0; padding: var(--s3) var(--s4); list-style: none; background: var(--card); border-radius: var(--radius-s);
  box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--s1); font-size: var(--text-s); }
.hb-samples { margin-top: 0; }
.hb-sample { flex: 0 0 62%; max-width: 240px; margin: 0; scroll-snap-align: start; }
.hb-sample img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); box-shadow: var(--shadow-1); }
.hb-sample figcaption { margin-top: var(--s1); font-size: var(--text-s); font-weight: 600; }
.hb-sample-tag {
  display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--paper-3); color: var(--ink-2);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

@media (min-width: 1024px) {
  .hb-title { font-size: var(--text-3xl); }
  .hb-reel-card img { height: 260px; }
  .hb-tile { flex-basis: 260px; }
  .hb-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .hb-door { border-top: 0; }
}