/* Layout and type polish (18 Oct 2026, owner: "make sure everything is symmetrical and lined up", "some of the smaller text is too small").
   Loaded last on every page. */

/* 1. Section heads: the lede sat in a far right column, bottom-aligned, with a wide gap to the headline.
   Now the kicker, headline and lede stack on one left edge, the way the barbershop pages already do. */
.head { display: block; max-width: 980px; }
.head .kicker { margin-bottom: 22px; }
.head h2 { max-width: 16ch; }
.head .lede { margin-top: 28px; max-width: 62ch; }
.head .lede p { max-width: 62ch; font-size: clamp(18px, 1.4vw, 21px); }
.head .lede .note { font-size: 15px; }

/* 2. Home hero: the TV and the phone are one group the height of the text beside it.
   The TV fills the top right of the column, the phone stands at the bottom left over its corner, and the caption sits under the TV next to the phone. */
@media (min-width: 901px) {
  .hero { align-items: center; }
  .hero-media { position: relative; padding: 0; aspect-ratio: 660 / 480; align-self: center; }
  .hero-media .shot-tv { position: absolute; top: 0; right: 0; width: 78%; }
  .hero-media .shot-phone { position: absolute; left: 0; bottom: 0; top: auto; width: 25%; }
  .hero-media figcaption { position: absolute; top: 65%; left: 29%; right: 0; margin: 0; max-width: 44ch; }
}

/* 3. A floor for small text: captions, labels and fine print at 14 to 15px, body text at 16px or more */
.kicker { font-size: 15px; }
.hero-media figcaption, .bd-media figcaption, .bds-shot figcaption, .b-shots figcaption { font-size: 15px; line-height: 1.5; }
.sys .sys-top { font-size: 14px; }
.sys li > p:not(.sys-top), .sys li.sys-custom div p { font-size: 16px; }
.part-head .no { font-size: 14px; }
.ai-label, .ai-foot { font-size: 15px; }
.ai-card li::before { font-size: 13px; }
.bd-row figcaption { font-size: 16px; }
.about .lead-name span, .about blockquote footer { font-size: 15px; }
.send label, .way-label, .brief .lbl, .brief-step-no { font-size: 15px; }
.way-label .opt, .day span { font-size: 14px; }
.vs-label, .pl-h, .tr.th, .p-no, .seg legend { font-size: 14px; }
.vs-shots figcaption, .demo-form label { font-size: 15px; }
.calc-f label, .calc-eg, .calc-err, .chair-loss, .chair-steady-text, .calc-scroll caption { font-size: 15px; }
.chair-tag, .chair-steady-label, .calc-scroll thead th, .chair-nums span, .est { font-size: 13px; }
.calc-fine { font-size: 15px; }
@media (max-width: 760px) {
  .hero-media figcaption { font-size: 14.5px; }
  .tr, .p-table .tr { font-size: 14px; }
  .tr.th, .p-table .tr.th, .calc-scroll thead th { font-size: 13px; }
  .get figcaption { font-size: 15px; }
  .calc-f label { font-size: 14px; }
}

/* Mobile symmetry pass (26 Oct 2026, owner: "make sure ... all the text and elements are symmetrical").
   Phones only, except where noted. Found by a 3-reviewer sweep at 375/390/430. */
@media (max-width: 760px) {
  /* the Menu button sat 12px inside the right gutter: site.css's three-column menu grid beat nav.css's two columns */
  .gnav.nav:has(.menu-btn) { grid-template-columns: 1fr auto; }
  .gnav .menu-btn { height: 44px; }

  /* home hero: the phone's right edge on the gutter, like the TV's */
  .hero-media .shot-phone { right: 0; }

  /* home call booker: the Call / Note switch spans the card instead of hugging the left */
  .talk .seg { display: flex; justify-self: stretch; }
  .talk .seg [role=tab] { flex: 1 1 0; height: 44px; }

  /* calculator: both switches span the width, equal halves */
  .calc-segs .seg { flex: 1 1 100%; }
  .seg-opts { display: flex; width: 100%; }
  .seg-opt { flex: 1 1 0; }
  .seg-opt span { padding: 8px 10px; }
  /* calculator: the three boxes line up even when one label wraps to two lines */
  .calc-f { grid-template-rows: 1fr auto; align-content: stretch; }
  .calc-f label { align-self: end; }
  /* calculator: the full table fits a 375 screen */
  .calc-scroll thead th, .calc-scroll tbody th, .calc-scroll td { padding-inline: 8px; }
  .calc-scroll tbody th { font-size: 14px; }

  /* "Four screens" swipe row: phones line up by their tops, not by their captions' bottoms */
  .gets { align-items: flex-start; }

  /* /barbershops/ hero caption: left-aligned with the copy above it, the two links on their own line */
  .b-shots figcaption { text-align: left; margin-inline: 0; max-width: none; }

  /* /barbershops/ comparison table: the same phone layout as /demo/ and /booksy/ (label on its own line, two answers under it) */
  .table .tr { grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 14px 16px; font-size: 15px; align-items: start; }
  .table .tr > span:first-child { grid-column: 1 / -1; font-weight: 650; }
  .table .tr.th > span:first-child { display: none; }
  .table .tr.th { font-size: 12px; }
  /* "Yes" rows: the second line wraps under the words, not under the dot */
  .tr .yes { display: flex; gap: 10px; align-items: baseline; }
  .tr .yes::before { flex: none; margin-right: 0; }

  /* one inner padding for every card on phones */
  .vs-card, .b-steps li, .price-main, .price-list, .b-demo, .p-body { padding-left: 24px; padding-right: 24px; }

  /* /demo/: the phone in each card is the same size as the phones on /barbershops/, not a small one floating in black */
  .p-media.phone { aspect-ratio: auto; padding: 28px 0; align-items: center; }
  .p-media.phone img { width: 46%; height: auto; max-width: none; }   /* whole phone, never cropped */

  /* /demo/ hero line runs to the gutter like every other page's */
  .p-hero .b-sub { max-width: none; }

  /* brand form: "Next" as wide as the fields (an empty status line was taking a flex gap) */
  .brief .row .status:empty { display: none; }
  .brief .row .pill-lg { flex: 1 1 100%; justify-content: center; }
  .bd-price-band .pill-lg { width: 100%; justify-content: center; }

  /* tap targets: text links and footer links at least 44px tall */
  /* (an invisible 44px hit area around the words, so the underline stays where it was) */
  .link-arrow, .small-link { position: relative; }
  .link-arrow::before, .small-link::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .foot-row nav { gap: 0; }
  .foot-row nav a { min-height: 44px; display: flex; align-items: center; }
}
/* headlines: no single word left alone on the last line */
.b-band h2, .b-hero h1, .p-hero h1, .ai-label { text-wrap: balance; }
/* /barbershops/ hero caption: its two links sit together on their own line under the sentence (was a dangling "·" on phones) */
.b-shots .cap-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; }
.b-shots .cap-links a { position: relative; }
.b-shots .cap-links a::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }

/* Footer, wide screens (27 Oct 2026): the link row grew to 9 links and squeezed "Built by hand." and the copyright
   into one-word columns at 1200 to 1440. The two ends keep their natural width; the links wrap in the middle. */
@media (min-width: 1101px) {
  .foot-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .foot-row > p { white-space: nowrap; }
  .foot-row > nav { justify-content: center; }
}