/* Adam Blue Plugins: the home page (index.html) in the Hairline look (2026-09-15)
   Loaded after css/style.css and css/hairline.css. Every rule is scoped under
   .hl-site main[data-home] (or .hl-site #cta), so no other page is touched.
   Uses the tokens and primitives of css/hairline.css.

   Contents
     1. hero: kicker, tagline, lede, hero ring cards, product dock
     2. the characteristics strip (.vstrip)
     3. featured release: badges, feature list, numbers, stage, changelog
     4. lineup rows
     5. constellation
     6. reviews wall (hidden until reviews exist), quote, final call to action
     7. ornaments and zone tints, phones, motion
*/

/* ============================================================
   1. HERO
   ============================================================ */
.hl-site main[data-home] .kicker {
  margin-bottom: 14px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
  text-wrap: balance;
}
.hl-site main[data-home] .kicker b { display: none; }
/* the builder line under the kicker reads as a quiet note, not a second label */
.hl-site main[data-home] .hero .pill.loud {
  font: 500 15px/1.5 "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hl-soft);
}
.hl-site main[data-home] .hero .lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--hl-lede);
  font-weight: 400;
}
/* the cycling word keeps its swap, without the glow under it */
.hl-site main[data-home] .kword, .hl-site main[data-home] .kword.serif-accent { text-shadow: none; }

/* hero ring: black stages on a hairline, no glow (the orbit stays JS driven) */
.hl-site main[data-home] .hfin {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--hl-stage);
  box-shadow: none;
}
.hl-site main[data-home] .hfc { border: 0; background: none; box-shadow: none; }
.hl-site main[data-home] .hfc:hover .hfin {
  border-color: rgba(205, 216, 255, 0.45);
  box-shadow: none;
}

/* product dock: an open hairline band, the three Makers split by inset dividers */
.hl-site main[data-home] .dock2 {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-top: 44px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.hl-site main[data-home] .d2item {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 18px 30px 16px;
  border-radius: 0;
  background: none;
  text-align: left;
}
.hl-site main[data-home] .d2item:hover { background: none; }
.hl-site main[data-home] .d2ico { display: none; }
.hl-site main[data-home] .d2name {
  font: 600 15px/1.3 "Inter", sans-serif;
  color: var(--hl-bright);
  transition: color 0.15s ease;
}
.hl-site main[data-home] .d2item:hover .d2name { color: #fff; }
.hl-site main[data-home] .d2price {
  font: 600 18px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--hl-num-sm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-site main[data-home] .d2price s {
  margin-left: 6px;
  font: 500 14px/1 "Inter", sans-serif;
  letter-spacing: 0;
  color: var(--hl-soft);
  -webkit-text-fill-color: var(--hl-soft);
}
.hl-site main[data-home] .d2item.soon { opacity: 1; }
.hl-site main[data-home] .d2item.soon .d2name { color: var(--hl-body); }
.hl-site main[data-home] .d2item.soon .d2price {
  font: 600 12px/1.5 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  color: var(--hl-eyebrow);
  -webkit-text-fill-color: var(--hl-eyebrow);
}
.hl-site main[data-home] .d2sep {
  align-self: stretch;
  width: 1px;
  height: auto;
  margin: 18px 0;
  background: var(--line);
}

/* ============================================================
   2. THE CHARACTERISTICS STRIP (the .tm-stats recipe from textmaker.html)
   ============================================================ */
.hl-site main[data-home] .hm-strip-sec {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
}
.hl-site main[data-home] .vstrip { gap: 0; margin-top: 0; grid-template-rows: auto auto auto; }
.hl-site main[data-home] .vcell {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  transition: none;
  /* the proximity tilt from main.js writes an inline transform; the strip stays still */
  transform: none !important;
}
.hl-site main[data-home] .vcell:hover { border-color: transparent; box-shadow: none; }
.hl-site main[data-home] .vcell::before { content: none; }
.hl-site main[data-home] .vval {
  display: block;
  align-self: end;
  font: 600 clamp(26px, 2.5vw, 34px)/1.04 "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
  background: var(--hl-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-site main[data-home] .vcell:first-child .vval {
  font-size: clamp(46px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.hl-site main[data-home] .vval em {
  margin-left: 4px;
  font: 600 15px/1 "Inter", sans-serif;
  font-style: normal;
  letter-spacing: 0;
  color: var(--hl-soft);
  -webkit-text-fill-color: var(--hl-soft);
}
.hl-site main[data-home] .vlab,
.hl-site main[data-home] .vcell:nth-child(3) .vlab,
.hl-site main[data-home] .vcell:nth-child(4) .vlab {
  display: block;
  margin: 14px 0 0;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
}
.hl-site main[data-home] .vnote {
  display: block;
  margin-top: 8px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hl-soft);
}

/* ============================================================
   3. FEATURED RELEASE
   ============================================================ */
.hl-site main[data-home] .feat {
  gap: 40px clamp(32px, 4vw, 56px);
  margin-top: 32px;
}
/* badges: one row of tracked labels split by short hairlines */
.hl-site main[data-home] .fbadges { gap: 8px 0; margin-bottom: 22px; }
.hl-site main[data-home] .fbadges > span {
  position: relative;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
}
.hl-site main[data-home] .fbadges > span:first-child { padding-left: 0; color: #fff; }
.hl-site main[data-home] .fbadges > .ffeat { display: none; }
.hl-site main[data-home] .fbadges > span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: var(--line);
}
/* feature list: two columns of rows on inner rules, no chips */
.hl-site main[data-home] .fchips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin-top: 28px;
  border-bottom: 1px solid var(--hl-rule);
}
.hl-site main[data-home] .fchips i {
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--hl-rule);
  border-radius: 0;
  background: none;
  font: 500 15px/1.4 "Inter", sans-serif;
  font-style: normal;
  letter-spacing: 0;
  color: var(--hl-body);
}
/* the numbers: a small strip, light numerals, tracked labels, inset dividers */
.hl-site main[data-home] .fnums {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hl-site main[data-home] .fnums::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--hl-light);
  pointer-events: none;
}
.hl-site main[data-home] .fnum {
  position: relative;
  flex: 1 1 auto;
  gap: 0;
  padding: 22px 0 20px 20px;
}
.hl-site main[data-home] .fnum:first-child { padding-left: 0; }
.hl-site main[data-home] .fnum + .fnum::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 20px;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.hl-site main[data-home] .fnum .num {
  display: block;
  font: 600 40px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--hl-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-site main[data-home] .fnum > span:last-child {
  display: block;
  margin-top: 12px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
}
.hl-site main[data-home] .fbuy { gap: 12px 28px; margin-top: 32px; }
.hl-site main[data-home] .fdemonote {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hl-soft);
}

/* the workflow stage: black, one hairline border, no glow and no travelling bevel */
.hl-site main[data-home] .feat-demo { gap: 36px; }
.hl-site main[data-home] .wfpanel {
  border: 1px solid var(--line);
  border-radius: var(--hl-radius);
  background: var(--hl-stage);
  box-shadow: none;
}
.hl-site main[data-home] .wfpanel::before { content: none; }
.hl-site main[data-home] .wfpanel video { border-radius: 0; }
/* its caption sits under the stage (was a glass chip over the video) */
.hl-site main[data-home] .wf-chip {
  position: static;
  z-index: auto;
  display: block;
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
}

/* changelog: open rows on hairlines */
.hl-site main[data-home] .changelog {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hl-site main[data-home] .clog-head { align-items: baseline; gap: 16px; margin-bottom: 14px; }
.hl-site main[data-home] .clog-head .fnew {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.hl-site main[data-home] .clog-head .rkt { display: none; }
.hl-site main[data-home] .clog-date {
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--hl-eyebrow);
}
.hl-site main[data-home] .changelog ul { gap: 0; margin: 0; padding: 0; }
.hl-site main[data-home] .changelog li {
  padding: 13px 0;
  border-top: 1px solid var(--hl-rule);
  font-size: 15px;
  line-height: 1.5;
  color: var(--hl-body);
}
.hl-site main[data-home] .changelog li:first-child { border-top-color: var(--line); }
.hl-site main[data-home] .changelog li:last-child { border-bottom: 1px solid var(--line); }
.hl-site main[data-home] .changelog li b { display: none; }

/* ============================================================
   4. LINEUP ROWS
   ============================================================ */
.hl-site main[data-home] .plist {
  position: relative;
  margin-top: 48px;
  border-top: 1px solid var(--line);
}
.hl-site main[data-home] .plist::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--hl-light);
  pointer-events: none;
}
.hl-site main[data-home] .prow {
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--hl-rule);
}
.hl-site main[data-home] .prow:last-child { border-bottom-color: var(--line); }
.hl-site main[data-home] .prow.live:hover {
  padding-left: 16px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* the light that runs along the hovered row's rule (was a blue sweep) */
.hl-site main[data-home] .prow.live::after { background: var(--hl-light); }
.hl-site main[data-home] .plist:has(.prow:hover) .prow:not(:hover) { opacity: 0.5; filter: none; }
.hl-site main[data-home] .pnum {
  flex: none;
  width: 30px;
  font: 600 22px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--hl-num-sm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the decorative icon column is hidden at every width (it was hidden on phones only) */
.hl-site main[data-home] .picon {
  display: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 600 20px "Space Grotesk", sans-serif;
  color: var(--hl-ice);
}
.hl-site main[data-home] .prow:hover .pname { text-shadow: none; }
/* the live row's name is its real link (the row still opens on click and drag) */
.hl-site main[data-home] a.pname { align-self: flex-start; color: var(--white); text-decoration: none; }
.hl-site main[data-home] .psub { font-size: 15px; line-height: 1.5; color: var(--hl-soft); }
/* coming soon: full opacity (style.css dims .soon to 60%, under AA contrast);
   the quiet tokens and the Coming soon label carry it */
.hl-site main[data-home] .prow.soon { opacity: 1; }
.hl-site main[data-home] .prow.soon .pname { color: var(--hl-body); }
.hl-site main[data-home] .prow.soon .psub { color: var(--hl-soft); }
.hl-site main[data-home] .pchips { gap: 0; margin-top: 10px; }
.hl-site main[data-home] .pchips i {
  padding: 0 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font: 500 14px/1.3 "Inter", sans-serif;
  font-style: normal;
  letter-spacing: 0;
  color: var(--hl-body);
}
.hl-site main[data-home] .pchips i:first-child { padding-left: 0; border-left: 0; }
.hl-site main[data-home] .prow.soon .pchips i { color: var(--hl-soft); }
.hl-site main[data-home] .pspec {
  display: none;
  margin-top: 12px;
  font: 600 12.5px/1.5 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
  text-wrap: balance;
}
.hl-site main[data-home] .pricecol { align-items: flex-end; gap: 6px; }
.hl-site main[data-home] .price-pill {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--hl-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  box-shadow: none;
  text-shadow: none;
  font: 600 32px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.hl-site main[data-home] .pwas { margin: 0; font: 500 14px/1 "Inter", sans-serif; color: var(--hl-soft); }
/* the row's Buy becomes a hairline text link (the white pill stays the only pill) */
.hl-site main[data-home] .rowbuy {
  padding: 12px 2px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 15px/1.3 "Inter", sans-serif;
  letter-spacing: 0;
  color: var(--hl-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.hl-site main[data-home] .rowbuy:hover { transform: none; box-shadow: none; color: #fff; text-decoration-color: var(--hl-ice); }
/* .hl-link would show it again on narrow screens, where style.css hides the row's Buy */
@media (max-width: 700px) { .hl-site main[data-home] .rowbuy { display: none; } }
.hl-site main[data-home] .prow.live:hover .rowbuy { animation: none; }
.hl-site main[data-home] .pthumb {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--hl-stage);
  box-shadow: none;
}
.hl-site main[data-home] .prow:hover .pthumb {
  transform: scale(1.06);
  border-color: rgba(205, 216, 255, 0.45);
  box-shadow: none;
}
.hl-site main[data-home] .pthumb.art-shadow, .hl-site main[data-home] .pthumb.art-shatter { background: var(--hl-stage); }
.hl-site main[data-home] .pthumb.art-shadow b, .hl-site main[data-home] .pthumb.art-shatter b { display: none; animation: none; text-shadow: none; }
.hl-site main[data-home] .pthumb.art-shadow::after, .hl-site main[data-home] .pthumb.art-shatter::after {
  content: "In the workshop";
  padding: 0 12px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--hl-eyebrow);
}
.hl-site main[data-home] .bsoon {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 600 12.5px/1.5 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
}
.hl-site main[data-home] .bsoon i { display: none; }
.hl-site main[data-home] .parrow { font-size: 20px; color: var(--hl-ice); }
.hl-site main[data-home] .draghint {
  font: 600 12px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  color: var(--hl-ice);
  text-shadow: none;
}

/* ============================================================
   5. CONSTELLATION: the sky sits in a band; stars and lines without glow
   ============================================================ */
.hl-site main[data-home] .sec-right { text-align: left; }
.hl-site main[data-home] .sec-right > .eyebrow,
.hl-site main[data-home] .sec-right > h2,
.hl-site main[data-home] .sec-right > p { margin-left: 0 !important; margin-right: auto !important; }
.hl-site main[data-home] .valmap {
  position: relative;
  margin-top: 48px;
  padding: 28px 0 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.hl-site main[data-home] .valmap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--hl-light);
  pointer-events: none;
}
.hl-site main[data-home] .vm-line {
  stroke: rgba(143, 208, 255, 0.24);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hl-site main[data-home] .vm-halo { fill: rgba(205, 216, 255, 0.05); }
.hl-site main[data-home] .vm-star:hover .vm-halo { fill: rgba(205, 216, 255, 0.14); }
.hl-site main[data-home] .vm-core { fill: #eef2ff; filter: none; }
.hl-site main[data-home] .vm-label {
  fill: var(--hl-soft);
  font: 500 15px "Inter", sans-serif;
  letter-spacing: 0;
  opacity: 1;
}
.hl-site main[data-home] .vm-star:hover .vm-label { fill: #fff; }
.hl-site main[data-home] .vm-list { display: none; }

/* ============================================================
   6. REVIEWS WALL, QUOTE, FINAL CALL TO ACTION
   ============================================================ */
/* reviews (the section stays hidden until data/products.json has reviews) */
.hl-site main[data-home] .revwall {
  margin-top: 48px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hl-site main[data-home] .rev-track { gap: 0; }
.hl-site main[data-home] .rev-card {
  padding: 2px 26px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hl-site main[data-home] .rev-card h5 { font: 600 15px/1.4 "Inter", sans-serif; color: #fff; }
.hl-site main[data-home] .rev-card p { font-size: 15px; line-height: 1.55; color: var(--hl-soft); }
.hl-site main[data-home] .rev-ava { background: none; border: 1px solid var(--line); color: var(--hl-ice); font: 600 11px "Inter", sans-serif; }
.hl-site main[data-home] .rev-meta span { font: 600 12px/1.4 "Inter", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hl-eyebrow); }
.hl-site main[data-home] .rev-meta b { color: var(--hl-bright); }

/* the builder's quote */
.hl-site main[data-home] .quotewrap { padding-top: 8px; padding-bottom: 0; }
.hl-site main[data-home] .bigquote { color: #eef2ff; text-shadow: none; }
.hl-site main[data-home] .quotesig {
  gap: 12px;
  margin-top: 22px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  color: var(--hl-eyebrow);
}
.hl-site main[data-home] .qavatar { border: 1px solid var(--line); }

/* final call to action */
.hl-site main[data-home] #cta { padding-bottom: clamp(88px, 10vw, 144px); }
.hl-site main[data-home] #cta .hero-cta { margin-top: 32px; }

/* ============================================================
   7. ORNAMENTS, PHONES, MOTION
   ============================================================ */
/* star glyphs set before labels (markup kept, hidden) */
.hl-site main[data-home] .hm-orn { display: none; }
/* tinted section zones behind featured, lineup, constellation and quote */
.hl-site main[data-home] .zone-tm::before, .hl-site main[data-home] .zone-mix::before,
.hl-site main[data-home] .zone-deep::before, .hl-site main[data-home] .zone-warm::before { content: none; }

@media (max-width: 1100px) {
  .hl-site main[data-home] .prow { gap: 22px; }
}
@media (max-width: 940px) {
  .hl-site main[data-home] .feat { gap: 56px; }
}
@media (max-width: 820px) {
  .hl-site main[data-home] .hero .lead { font-size: 17px; }
  .hl-site main[data-home] .hm-strip-sec { padding-top: 8px; }
  .hl-site main[data-home] .vval { font-size: 26px; }
  .hl-site main[data-home] .vcell:first-child .vval { font-size: 46px; }
  .hl-site main[data-home] .quotewrap { padding-top: 0; }
  /* the strip's lit top rule closes the dock, so the dock drops its own bottom rule */
  .hl-site main[data-home] .dock2 { border-bottom: 0; }
}
@media (max-width: 700px) {
  .hl-site main[data-home] .prow { gap: 12px 18px; padding: 24px 0; flex-wrap: wrap; }
  .hl-site main[data-home] .prow.live:hover { padding-left: 0; }
  .hl-site main[data-home] .pmain { flex: 1 1 calc(100% - 120px); }
}
@media (max-width: 620px) {
  /* the dock keeps its names on phones (the icons are gone, so the names carry it) */
  .hl-site main[data-home] .dock2 { display: flex; margin-top: 36px; }
  .hl-site main[data-home] .d2name { display: block; font-size: 14px; white-space: normal; }
  .hl-site main[data-home] .d2sep { display: block; margin: 16px 0; }
  .hl-site main[data-home] .d2item { flex: 1 1 0; min-width: 0; padding: 16px 12px 14px; }
  .hl-site main[data-home] .d2item:first-child { padding-left: 0; }
  .hl-site main[data-home] .d2item:last-child { padding-right: 0; }
  .hl-site main[data-home] .d2price s { display: block; margin: 4px 0 0; }
  .hl-site main[data-home] .d2item.soon .d2price { font-size: 12.5px; letter-spacing: 0.16em; }
  /* the price and the SOON labels share one bottom line when a name wraps */
  .hl-site main[data-home] .d2item { display: flex; flex-direction: column; justify-content: space-between; }
}
@media (max-width: 560px) {
  /* phones: each lineup row stacks, name first, price or status below */
  .hl-site main[data-home] .pthumb, .hl-site main[data-home] .pthumb.art-shadow, .hl-site main[data-home] .pthumb.art-shatter { display: none; }
  .hl-site main[data-home] .pmain { flex: 1 1 100%; order: 0; }
  .hl-site main[data-home] .pricecol { order: 1; flex-direction: row; align-items: baseline; gap: 10px; }
  .hl-site main[data-home] .bsoon { order: 1; }
  .hl-site main[data-home] .parrow { order: 2; margin-left: auto; }
  .hl-site main[data-home] .fbadges { gap: 8px 22px; }
  .hl-site main[data-home] .fbadges > span, .hl-site main[data-home] .fbadges > span:first-child { padding: 0; }
  .hl-site main[data-home] .fbadges > span + span::before { content: none; }
  .hl-site main[data-home] .fchips { gap: 0 16px; }
  .hl-site main[data-home] .fchips i { font-size: 14px; }
}
@media (max-width: 480px) {
  .hl-site main[data-home] .fnums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-site main[data-home] .fnum { padding: 20px 0 18px 16px; }
  .hl-site main[data-home] .fnum:nth-child(2n+1) { padding-left: 0; }
  .hl-site main[data-home] .fnum:nth-child(2n+1)::after { display: none; }
  .hl-site main[data-home] .fnum:nth-child(n+3) { border-top: 1px solid var(--hl-rule); }
}
@media (max-width: 640px) {
  /* the strip's lit rule closes the dock again (style.css forced 84px padding here) */
  .hl-site main[data-home] .hm-strip-sec { padding-top: 8px !important; }
  .hl-site main[data-home] .hero { padding-bottom: 0 !important; }
  /* the sky's labels would be 7px on a phone: the nine promises become a list */
  .hl-site main[data-home] .valmap svg, .hl-site main[data-home] .vm-hint { display: none; }
  .hl-site main[data-home] .vm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; }
  .hl-site main[data-home] .vm-list li { padding: 12px 0; border-top: 1px solid var(--hl-rule); font: 500 14px/1.4 "Inter", sans-serif; color: var(--hl-soft); }
  .hl-site main[data-home] .vm-list li:nth-child(-n+2) { border-top: 0; }
}
/* the strip on tablets and phones: two by two like the textmaker strip's small
   cells (four cells here, so the first one does not take a row of its own) */
@media (max-width: 820px) {
  .hl-site main[data-home] .vstrip.hl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-site main[data-home] .vstrip.hl-cols > .vcell.hl-col { grid-column: auto; padding: 22px 0 20px 16px; border-top: 0; }
  .hl-site main[data-home] .vstrip.hl-cols > .vcell.hl-col:nth-child(2n+1) { padding-left: 0; }
  .hl-site main[data-home] .vstrip.hl-cols > .vcell.hl-col:nth-child(2n+1)::after { display: none; }
  .hl-site main[data-home] .vstrip.hl-cols > .vcell.hl-col:nth-child(2n)::after { display: block; top: 22px; bottom: 20px; }
  .hl-site main[data-home] .vstrip.hl-cols > .vcell.hl-col:nth-child(n+3) { border-top: 1px solid var(--hl-rule); }
}

@media (prefers-reduced-motion: reduce) {
  .hl-site main[data-home] .d2name, .hl-site main[data-home] .rowbuy { transition: none; }
}
html[data-motion="off"] .hl-site main[data-home] .d2name, html[data-motion="off"] .hl-site main[data-home] .rowbuy { transition: none; }
@media (forced-colors: active) {
  .hl-site main[data-home] .fnums::before, .hl-site main[data-home] .plist::before,
  .hl-site main[data-home] .valmap::before, .hl-site main[data-home] .prow.live::after {
    forced-color-adjust: none; background: CanvasText;
  }
}

/* phone audit (2026-09-16): no hover instructions on touch screens */
@media (hover: none) {
  .hl-site main[data-home] .hm-hover { display: none; }
}

/* 2026-09-29 (v224) the Gallery Maker featured stage: Adam's still fills the
   workflow panel until assets/gallerymaker/workflow.mp4 exists, so the column
   is never empty and keeps the top alignment the clip will have (the rule that
   centred a changelog alone is gone). The clip and its caption wait hidden
   (their display rules above would show them), and once the clip shows the
   still steps out, so the panel keeps the clip's own frame (height auto) */
.hl-site main[data-home] .wfpanel video[hidden], .hl-site main[data-home] .wf-chip[hidden] { display: none; }
.hl-site main[data-home] .wfpanel .wf-still { display: block; width: 100%; height: auto; }
.hl-site main[data-home] .wfpanel video:not([hidden]) + .wf-still { display: none; }

/* 2026-09-29 four numbers on one line: the long labels break onto two lines instead of
   pushing the last number onto a row of its own (the phone keeps its 2 x 2 grid) */
@media (min-width: 481px) {
  .hl-site main[data-home] .fnums { flex-wrap: nowrap; }
  .hl-site main[data-home] .fnum { flex: 1 1 0; min-width: 0; padding-right: 12px; }
}