/* ============================================================
   The marketing pages

   Home, for-barbers, for-shops, 404. Each is the same handful of
   section types in a different order: a hero, a ruled band of claims, a
   bento of features, a strip of real product, a price table, a closing
   call. Nothing here is used by the directory or the feed.
   ============================================================ */

/* ============================================================
   Hero

   Centred, which is the idiom's default and also the right answer once
   the art beside it is gone: with no second column there is nothing for
   a left-aligned column to balance against.
   ============================================================ */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 10vw, 132px) clamp(52px, 7vw, 92px);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero-in { position: relative; z-index: 2; max-width: 880px; margin-inline: auto; }
.hero .glow {
  width: min(760px, 120%); height: 420px;
  left: 50%; top: -200px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(237, 228, 211, .16), transparent 68%);
}
/* only where a pill still sits above it — the trade pages have one and
   the homepage no longer does, and left unscoped this was 26px of
   nothing pushing the headline off the top padding */
.hero .pill + h1 { margin-top: 26px; }
.hero .lede { margin: 22px auto 0; text-align: center; }
.hero .btn-row { margin-top: 34px; justify-content: center; }
.hero .fine { margin-top: 20px; }

/* A hero that holds a live sample of the product rather than a picture
   of it: the cards below the fold line are the same markup the
   directory uses, cropped by the band they sit in. */
.hero-strip {
  position: relative; z-index: 2;
  margin-top: clamp(44px, 6vw, 72px);
  -webkit-mask-image: linear-gradient(180deg, #000 48%, transparent);
  mask-image: linear-gradient(180deg, #000 48%, transparent);
  pointer-events: none;
}

/* ============================================================
   The ticker

   Two identical runs side by side, the pair translated by exactly half
   its own width, so the seam lands where the second run's first item
   sits on top of where the first run's was. Any other number and it
   visibly jumps.
   ============================================================ */

.ticker {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-run { display: flex; width: max-content; animation: slide 52s linear infinite; }
.ticker:hover .ticker-run { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.ticker-item {
  display: flex; align-items: center; gap: 10px; padding-inline: 22px;
  font-size: 14px; font-weight: 450; color: var(--fg-2); white-space: nowrap;
}
.ticker-item span {
  font-family: var(--mono); font-size: 12.5px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.ticker-item::after {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--line-3); margin-left: 22px;
}

/* ============================================================
   A statement — one paragraph at display size, used once per page
   ============================================================ */

.statement {
  font-size: clamp(22px, 3.1vw, 36px);
  line-height: 1.26; letter-spacing: -.03em; font-weight: 500;
  max-width: 20ch;
}
.statement em { font-style: normal; color: var(--fg-3); }
.statement + .lede { margin-top: 24px; }

/* ============================================================
   Bento

   A grid of bordered cards, some wide, some tall. The borders are the
   design; there is no gap colour and no shadow.
   ============================================================ */

.bento {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, 1fr);
}
.bento > * { grid-column: span 2; }
.bento .wide { grid-column: span 3; }
.bento .full { grid-column: span 6; }

.bcard {
  position: relative; overflow: hidden;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  transition: border-color .18s, background .18s;
}
.bcard:hover { border-color: var(--line-2); }
.bcard h3 { letter-spacing: -.022em; }
.bcard p { margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.bcard .eyebrow { margin-bottom: 14px; }

/* the drawn part of a card, above its words */
.bcard-art {
  position: relative; margin: -26px -24px 22px; height: 168px;
  border-bottom: 1px solid var(--line);
  overflow: hidden; background: var(--bg);
}
.bcard-art .clip { position: absolute; inset: 0; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento .wide { grid-column: span 1; }
  .bento .full { grid-column: span 2; }
}
@media (max-width: 580px) {
  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento .wide, .bento .full { grid-column: span 1; }
}

/* ============================================================
   Steps — numbered, ruled, no cards
   ============================================================ */

.steps {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
}
.step { background: var(--bg-1); padding: 26px 24px 28px; }
.step-n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--fg-4);
}
.step h3 { margin-top: 14px; }
.step p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }

/* the small drawn panel at the top of a step */
.step-art {
  position: relative; height: 150px; margin: -26px -24px 22px;
  border-bottom: 1px solid var(--line); overflow: hidden;
  display: grid; place-items: center; padding: 16px;
  background: var(--bg);
}
.step-art .clip { position: absolute; inset: 0; }

/* a grid of bookable slots, drawn */
.slots {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%;
  max-width: 230px;
}
.slots i {
  display: grid; place-items: center; height: 30px; border-radius: 6px;
  font-family: var(--mono); font-size: 11.5px; font-style: normal;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg-2);
}
.slots i.off { opacity: .32; text-decoration: line-through; }
.slots i.on { background: var(--bone); border-color: var(--bone); color: #0a0a0a; font-weight: 600; }

/* a confirmed booking */
.done-card {
  position: relative; z-index: 2; text-align: center;
  display: grid; justify-items: center; gap: 4px;
}
.done-tick {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bone); color: #0a0a0a; margin-bottom: 8px;
}
.done-tick svg { width: 20px; height: 20px; }
.done-card b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.done-card span { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }

/* a price list, drawn */
.plist { position: relative; z-index: 2; width: 100%; max-width: 250px; display: grid; gap: 5px; }
.plist div {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--fg-2);
}
.plist b { margin-left: auto; font-family: var(--mono); color: var(--fg); font-weight: 500; }

@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   Facts — a ruled row of numbers
   ============================================================ */

.facts {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.facts div { background: var(--bg-1); padding: 24px 22px 26px; }
.facts b {
  display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1;
}
.facts span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--fg-3); line-height: 1.45; }

/* ============================================================
   A full-bleed run of cuts
   ============================================================ */

.cutrow {
  display: grid; gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.cut { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg); }
.cut .clip { position: absolute; inset: 0; }
.cut figcaption {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: 36px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .86));
  display: flex; align-items: baseline; gap: 8px;
}
.cut figcaption b { font-size: 13.5px; font-weight: 500; letter-spacing: -.015em; }
.cut figcaption span { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--bone-dim); }

/* ============================================================
   A table of rows — used for pricing and for what-you-get lists
   ============================================================ */

.rows {
  margin-top: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 22px; border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.row:first-child { border-top: 0; }
.row-k { flex: none; width: 190px; font-size: 14.5px; font-weight: 500; }
.row-v { font-size: 14.5px; color: var(--fg-2); line-height: 1.55; }
.row-v b { color: var(--fg); font-weight: 500; }
.row .mono { color: var(--fg); }

@media (max-width: 640px) {
  .row { flex-direction: column; gap: 6px; padding: 16px 18px; }
  .row-k { width: auto; }
}

/* ============================================================
   Bands — a labelled row of prose, for the trade pages

   The label is in the margin at desktop width and above the prose on a
   phone, which is the only honest way to keep a two-column reading
   order from becoming two unrelated columns.
   ============================================================ */

.bands {
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
.band {
  display: grid; gap: 8px 32px;
  grid-template-columns: 170px minmax(0, 1fr);
  padding-block: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
}
.band-k {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4);
  padding-top: 5px;
}
.band-v h3 { letter-spacing: -.022em; }
.band-v p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--fg-2); max-width: 62ch; }

@media (max-width: 720px) {
  .band { grid-template-columns: 1fr; gap: 10px; }
  .band-k { padding-top: 0; }
}

/* ============================================================
   The price block
   ============================================================ */

.price-hero {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1);
}
@media (max-width: 820px) { .price-hero { grid-template-columns: 1fr; } }

.price-huge {
  font-size: clamp(56px, 9vw, 104px); font-weight: 600;
  letter-spacing: -.055em; line-height: .92;
}
.price-huge span {
  display: block; margin-top: 16px;
  font-size: 15px; font-weight: 400; letter-spacing: -.01em; line-height: 1.5;
  color: var(--fg-3); max-width: 22ch;
}

.ticks { display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.ticks svg {
  width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--bone);
}
.ticks b { color: var(--fg); font-weight: 550; }

/* ============================================================
   The closing call
   ============================================================ */

.cta-band {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  padding-block: clamp(60px, 8vw, 104px);
  text-align: center;
}
.cta-band .glow {
  width: min(640px, 110%); height: 340px;
  left: 50%; bottom: -190px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(237, 228, 211, .13), transparent 68%);
}
.cta-band > .wrap { position: relative; z-index: 2; }
.cta-band .lede { margin: 16px auto 0; text-align: center; }
.cta-band .btn-row { margin-top: 30px; justify-content: center; }

/* ============================================================
   Legal pages

   Long-form text, one column, nothing else on the page. The measure is
   the whole design: these are read, not scanned.
   ============================================================ */

.legal {
  max-width: 740px; margin-inline: auto;
  padding-block: clamp(40px, 6vw, 72px) clamp(40px, 6vw, 80px);
}
.legal h1 { font-size: clamp(32px, 4.4vw, 48px); margin-top: 14px; }
.legal-date {
  margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--fg-4);
}
.legal h2 {
  font-size: clamp(18px, 1.9vw, 21px); letter-spacing: -.024em; font-weight: 600;
  margin-top: clamp(34px, 4vw, 48px); padding-top: clamp(22px, 2.6vw, 28px);
  border-top: 1px solid var(--line);
}
.legal > p, .legal li { font-size: 15.5px; line-height: 1.65; color: var(--fg-2); }
.legal > p { margin-top: 14px; }
.legal > .lede { margin-top: 24px; }
.legal ul { margin-top: 14px; display: grid; gap: 10px; }
.legal li { padding-left: 18px; position: relative; }
.legal li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--fg-4);
}
.legal b { color: var(--fg); font-weight: 550; }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-3); }
.legal a:hover { text-decoration-color: currentColor; }

/* ============================================================
   404
   ============================================================ */

.nf { padding-block: clamp(80px, 14vw, 180px); text-align: center; }
.nf .mono { font-size: 13px; color: var(--fg-4); letter-spacing: .1em; }
.nf h1 { margin-top: 18px; }
.nf .lede { margin: 18px auto 0; }
.nf .btn-row { margin-top: 30px; justify-content: center; }