/*
 * Budkin marketing site.
 *
 * Colour is ported from the app's src/theme/tokens.ts; type, spacing and radii
 * from design-handoff-web/README.md. Keep them in step: if a token changes in
 * the app, change it here rather than inventing a near-match.
 *
 * Night is the default, as it is in the app. Daylight arrives two ways —
 * prefers-color-scheme for people who never touch the toggle, and
 * [data-theme] for people who do. The explicit attribute must win in both
 * directions, which is why the media query is scoped :not([data-theme]).
 */

/* ---------------------------------------------------------------- fonts -- */

/* Latin-subset Figtree, self-hosted. A page arguing that nothing leaves your
   device should not open by handing the visitor's IP to a font CDN. */
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  --bg: #16110E;
  --surface: #221B16;
  --chip: #2C231C;
  --elevated: #3A2E25;
  --line: rgba(255, 255, 255, 0.07);
  --line2: rgba(255, 255, 255, 0.13);
  --text: #F3EBE1;
  --dim: #B4A492;
  /* App value is #7C6F61. Raised to 5.05:1 because on a web page `faint`
     carries real prose (the footer disclaimer, "last updated") rather than the
     app's incidental captions, and 3.84:1 fails WCAG AA for body text. */
  --faint: #90836F;
  --primary: #EC9A66;
  --on-primary: #2A170B;
  /* Primary as a *text* colour. Already AA on Night's background (8.37:1), so
     here it is simply the primary; Daylight needs a darker one. */
  --primary-text: #EC9A66;
  /* The call-to-action surface. Night uses the primary with the app's dark
     on-primary, which is 7.65:1. */
  --cta: #EC9A66;
  --on-cta: #2A170B;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --card-shadow: none;

  --feeding: #F0A878;
  --sleep: #A99EDC;
  --diaper: #6FC0A6;
  --pumping: #E6BE5E;
  --bath: #6FB2D8;
  --medication: #C88AD6;

  /* Handoff: icon chips and toggles tint at 16%, hover borders at 55%.
     These must carry the % unit — color-mix() rejects a bare number and the
     declaration is dropped silently, leaving the chip with no fill at all. */
  --tint: 16%;
  --tint-hover: 55%;

  --page: 1140px;
  --r-chip: 12px;
  --r-card: 20px;
  --r-band: 26px;
}

.daylight {
  --bg: #F6EDE3;
  --surface: #FFFCF8;
  --chip: #F1E6D8;
  --elevated: #E8DAC8;
  --line: rgba(58, 46, 36, 0.10);
  --line2: rgba(58, 46, 36, 0.18);
  /* Daylight text tokens diverge from the app's on purpose. The app's values
     were tuned for mobile UI chrome; on a page carrying prose they fall below
     WCAG AA on the cream background: dim 4.36:1, faint 2.46:1, primary-as-link
     2.76:1. Hue is preserved, luminance is not. */
  --text: #3A2E24;
  --dim: #655648;
  --faint: #79695A;
  --primary: #D17A45;
  --on-primary: #FFFFFF;
  --primary-text: #9E5222;
  --cta: #B25F2C;
  --on-cta: #FFFFFF;
  --shadow: 0 12px 36px rgba(120, 86, 52, 0.16);
  /* Light mode cards carry a hairline lift the dark ones do not. */
  --card-shadow: 0 1px 2px rgba(120, 86, 52, 0.05);

  --feeding: #D9854B;
  --sleep: #7E6FC9;
  --diaper: #3E9D80;
  --pumping: #C79A36;
  --bath: #4E96C4;
  --medication: #A85CB8;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F6EDE3;
    --surface: #FFFCF8;
    --chip: #F1E6D8;
    --elevated: #E8DAC8;
    --line: rgba(58, 46, 36, 0.10);
    --line2: rgba(58, 46, 36, 0.18);
    /* Daylight text tokens diverge from the app's on purpose. The app's values
       were tuned for mobile UI chrome; on a page carrying prose they fall below
       WCAG AA on the cream background: dim 4.36:1, faint 2.46:1, primary-as-link
       2.76:1. Hue is preserved, luminance is not. */
    --text: #3A2E24;
    --dim: #655648;
    --faint: #79695A;
    --primary: #D17A45;
    --on-primary: #FFFFFF;
    --primary-text: #9E5222;
    --cta: #B25F2C;
    --on-cta: #FFFFFF;
    --shadow: 0 12px 36px rgba(120, 86, 52, 0.16);
    --card-shadow: 0 1px 2px rgba(120, 86, 52, 0.05);

    --feeding: #D9854B;
    --sleep: #7E6FC9;
    --diaper: #3E9D80;
    --pumping: #C79A36;
    --bath: #4E96C4;
    --medication: #A85CB8;
  }
}

/* ---------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary-text);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.6px;
  font-weight: 800;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2.5px solid var(--primary-text);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- skeleton -- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-text);
  margin-bottom: 14px;
}

.lede {
  font-size: 17px;
  color: var(--dim);
  max-width: 62ch;
}

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand svg {
  width: 32px;
  height: 32px;
  flex: none;
}

.header-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--dim);
  text-decoration: none;
}

.header-link:hover {
  color: var(--text);
}

/* Real button, aria-pressed, works without JS present (it simply does
   nothing, and the media query still gives the visitor the right theme). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--line2);
  border-radius: var(--r-chip);
  background: var(--chip);
  color: var(--dim);
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--primary);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
}

/* One icon per theme; the inactive one is removed from the tree entirely. */
.theme-toggle .icon-sun {
  display: none;
}

.daylight .theme-toggle .icon-sun {
  display: block;
}

.daylight .theme-toggle .icon-moon {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .icon-sun {
    display: block;
  }
  :root:not([data-theme]) .theme-toggle .icon-moon {
    display: none;
  }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  padding: 68px 0 40px;
  position: relative;
  overflow: hidden;
}

/* Warm bloom behind the hero, primary at low alpha. Decorative only. */
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  left: 50%;
  width: 900px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--primary) 16%, transparent),
    transparent 68%
  );
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(38px, 5.4vw, 58px);
  letter-spacing: -1.6px;
  margin-bottom: 20px;
}

.hero h1 em {
  font-style: normal;
  color: var(--primary-text);
  /* Keeps the highlighted phrase on one line; without it the wrap orphans
     "taps." onto a line of its own. */
  white-space: nowrap;
}

.hero .lede {
  font-size: 18px;
  margin-bottom: 32px;
}

.hero-mark {
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
}

/* -------------------------------------------------------------- buttons -- */

/* stretch, not center: the Play button is two lines tall and the iOS pill is
   one, so centring leaves the pill visibly shorter. Stretching matches them
   without hardcoding a height that would break if either label wrapped. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}

.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 13px 24px 13px 20px;
  border-radius: 16px;
  background: var(--cta);
  color: var(--on-cta);
  text-decoration: none;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--cta) 35%, transparent);
  transition: transform 0.14s, box-shadow 0.14s;
}

.btn-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cta) 45%, transparent);
}

.btn-play svg {
  width: 26px;
  height: 26px;
  flex: none;
}

/* The two lines are styled separately rather than by inheritance: an opacity
   on the wrapper would fade "Google Play" along with the eyebrow. */
.btn-play .btn-lines {
  display: block;
  text-align: left;
}

.btn-play .btn-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.75;
  line-height: 1.3;
}

.btn-play strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* Deliberately not a link: there is nothing to link to yet. */
.pill-soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 16px;
  border: 1.5px dashed var(--line2);
  background: transparent;
  color: var(--dim);
  font-size: 14.5px;
  font-weight: 700;
}

.pill-soon svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.8;
}

/* Not a flex row: when the text wraps to two lines a flex dot centres itself
   against the whole block and reads as floating. Inline keeps it on the first
   line, next to the words. */
.hero-note {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  vertical-align: middle;
  border-radius: 99px;
  background: var(--diaper);
}

/* ------------------------------------------------------------ shotframe -- */

.shots {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.phone {
  width: 100%;
  max-width: 264px;
  aspect-ratio: 9 / 19.5;
  border-radius: 30px;
  border: 1.5px solid var(--line2);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.phone:nth-child(2) {
  margin-top: 34px;
}

/* Placeholder state. Dropping a real capture into assets/screenshots/ and
   pointing an <img> at it replaces this without touching the frame. */
.phone-placeholder svg {
  width: 34px;
  height: 34px;
  opacity: 0.4;
}

.phone-placeholder .cap {
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: -0.2px;
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A real capture fills the frame edge to edge. The padding and centring on
   .phone exist for the placeholder's icon-and-caption fallback, and would
   inset a screenshot inside its own bezel. */
.phone-shot {
  padding: 0;
  gap: 0;
  background: var(--chip);
}

/* ------------------------------------------------------------- lightbox -- */

/* Click to enlarge. The affordance is added by script, so a frame never
   looks clickable on a page where nothing would happen. */
.phone-shot.is-zoomable {
  cursor: zoom-in;
}

.phone-shot.is-zoomable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.lightbox {
  width: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  color: var(--text);
}

.lightbox::backdrop {
  background: rgba(8, 10, 16, 0.72);
  backdrop-filter: blur(3px);
}

.lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* The captures are 540px wide, so the frame is capped there rather than
   scaled past its own resolution. */
.lightbox .phone {
  width: min(86vw, calc((100vh - 140px) * 9 / 19.5), 380px);
  max-width: none;
  border-radius: 34px;
}

.lightbox figcaption {
  max-width: min(86vw, 380px);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: var(--dim);
}

.lightbox figcaption strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}

.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.lightbox-close svg {
  width: 18px;
  height: 18px;
}

.lightbox figure {
  margin: 0;
}

/* -------------------------------------------------------------- section -- */

.section {
  padding: 76px 0;
}

.section-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.prose p + p {
  margin-top: 16px;
}

.prose {
  max-width: 68ch;
  color: var(--dim);
  font-size: 16.5px;
}

.prose strong {
  color: var(--text);
  font-weight: 700;
}

/* ---------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 24px 26px;
  box-shadow: var(--card-shadow);
  transition: transform 0.14s, border-color 0.14s;
}

.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) var(--tint-hover), transparent);
}

/* Each card names its activity colour; the icon chip is that colour at the
   app's 16% tint, exactly as the activity tiles are drawn in-app. */
.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--accent) var(--tint), transparent);
  color: var(--accent);
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  font-size: 18px;
  letter-spacing: -0.3px;
  font-weight: 700;
  margin-bottom: 9px;
}

.card p {
  font-size: 15px;
  color: var(--dim);
}

.a-feeding { --accent: var(--feeding); }
.a-sleep { --accent: var(--sleep); }
.a-diaper { --accent: var(--diaper); }
.a-pumping { --accent: var(--pumping); }
.a-bath { --accent: var(--bath); }
.a-medication { --accent: var(--medication); }

/* ----------------------------------------------------------------- tour -- */

/* Full-bleed rail. Five phone frames wrap into a ragged last row at most
   widths, and sideways is how a store listing is read anyway. */
.tour-rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Breathing room for the frames' shadow, which a tight overflow box clips. */
  padding-block: 6px 12px;
}

.tour {
  list-style: none;
  /* Not `0 auto`. The padding below does the aligning; an auto margin would
     centre whatever is left over once the row fits, pushing the first frame
     well past the heading it sits under. */
  margin: 0;
  display: flex;
  gap: 24px;
  width: max-content;
  /* What the rail needs before it genuinely has to scroll: five frames, the
     four gaps between them, and the trailing gutter. Keep in step with
     `.tour .phone` and the gap above. */
  --run: calc(5 * 228px + 4 * 24px + 24px);
  /* The leading gutter lines the first frame up with .wrap's, without the rail
     itself being boxed in by .wrap, but only as far as the frames still fit.
     Past that the alignment gives way rather than the row: the gutter shrinks
     to a plain 24px, and only then does the rail scroll. Mirroring the gutter
     on the trailing side instead would make the padding alone wider than a
     large viewport, leaving it permanently scrolled with room to spare. */
  padding-inline-start: max(
    24px,
    min(calc((100% - var(--page)) / 2 + 24px), calc(100% - var(--run)))
  );
  padding-inline-end: 24px;
}

.tour li {
  scroll-snap-align: center;
}

.tour figure {
  margin: 0;
}

.tour .phone {
  width: 228px;
  max-width: 228px;
}

.tour figcaption {
  width: 228px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dim);
}

.tour figcaption strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}

/* ----------------------------------------------------------------- band -- */

/* The data-ownership pitch, given its own surface so it reads as the point
   rather than as a seventh feature. */
.band {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-band);
  padding: 48px 44px;
  box-shadow: var(--card-shadow);
}

.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px;
  margin-top: 36px;
}

.band-item h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.band-item h3 svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex: none;
}

.band-item p {
  font-size: 15px;
  color: var(--dim);
}

.checks {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 12px 22px;
}

/* The Baby Buddy list runs to whole clauses rather than the band's two-word
   claims, so it needs wider columns to avoid three-line cells. */
.checks-wide {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 26px;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dim);
}

.checks svg {
  width: 18px;
  height: 18px;
  color: var(--diaper);
  flex: none;
  margin-top: 3px;
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 52px;
  margin-top: 40px;
}

/* The brand/links row is the flex context; the disclaimer is a plain block
   underneath it. Keeping the disclaimer out of the flex line avoids the trap
   where its max-width clamps the hypothetical main size below 100% and the
   line therefore never breaks. */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
}

.site-footer .brand {
  font-size: 16px;
  margin-right: auto;
}

.site-footer .brand svg {
  width: 26px;
  height: 26px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14.5px;
  font-weight: 600;
}

.footer-links a {
  color: var(--dim);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--primary-text);
}

/* flex-basis, not width: a flex item with width:100% still shrinks onto the
   preceding line, which put the disclaimer beside the links instead of under
   them. flex:0 0 100% forces its own full-width row. */
.disclaimer {
  font-size: 13px;
  color: var(--faint);
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 82ch;
}

/* --------------------------------------------------------- policy pages -- */

.policy {
  padding: 56px 0 40px;
}

.policy-head {
  max-width: 720px;
  margin-bottom: 40px;
}

.policy-head h1 {
  font-size: clamp(32px, 4.4vw, 44px);
  letter-spacing: -1.2px;
  margin-bottom: 16px;
}

.updated {
  font-size: 14px;
  font-weight: 700;
  color: var(--faint);
}

/* The summary a reader gets if they read nothing else. */
.summary {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--primary);
  /* Square on the left so the accent bar reads as a straight rule; a radius
     there bends the bar into a sliver at both ends. */
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 26px 28px;
  margin-bottom: 48px;
  /* Matches .doc so the summary and the policy body share a left and right
     edge rather than the summary running wider. */
  max-width: 74ch;
  box-shadow: var(--card-shadow);
}

.summary h2 {
  font-size: 18px;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}

.summary p {
  color: var(--dim);
  font-size: 15.5px;
}

.summary p + p {
  margin-top: 12px;
}

.doc {
  max-width: 74ch;
}

.doc h2 {
  font-size: 23px;
  letter-spacing: -0.5px;
  margin: 46px 0 14px;
  scroll-margin-top: 88px;
}

.doc h2:first-child {
  margin-top: 0;
}

.doc h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 28px 0 10px;
}

.doc p,
.doc li {
  color: var(--dim);
  font-size: 16px;
}

.doc p + p {
  margin-top: 14px;
}

.doc ul {
  margin: 14px 0 0;
  padding-left: 22px;
}

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

.doc li::marker {
  color: var(--faint);
}

.doc strong {
  color: var(--text);
  font-weight: 700;
}

.doc code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  font-size: 0.88em;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5px 6px;
  color: var(--text);
  word-break: break-word;
}

/* The contact address is one 33-character token with no break opportunity of
   its own, so on a narrow screen it would push the paragraph past the gutter.
   `anywhere` only breaks it when it genuinely does not fit. */
.doc a[href^='mailto:'] {
  overflow-wrap: anywhere;
}

/* Wide content scrolls inside itself; the page body never does. */
.table-scroll {
  overflow-x: auto;
  /* Bottom margin matters: the paragraph after a table is not a p+p, so the
     sibling rule never fires and the text would sit flush against it. */
  margin: 18px 0 22px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 440px;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
}

th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--chip);
}

tbody tr:last-child td {
  border-bottom: none;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dim);
  text-decoration: none;
}

.back-link:hover {
  color: var(--primary-text);
}

.back-link svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------- breakpoints -- */

@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero {
    padding: 52px 0 64px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-mark {
    margin-inline: auto;
  }

  .hero .lede {
    margin-inline: auto;
  }

  .cta-row {
    justify-content: center;
  }

  .band {
    padding: 38px 28px;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 18px;
  }

  .section {
    padding: 56px 0;
  }

  .shots {
    gap: 14px;
  }

  .phone {
    max-width: 186px;
    border-radius: 24px;
  }

  .phone:nth-child(2) {
    margin-top: 22px;
  }

  .tour {
    gap: 16px;
    padding-inline: 18px;
  }

  .tour .phone,
  .tour figcaption {
    width: 176px;
    max-width: 176px;
  }

  .btn-play,
  .pill-soon {
    width: 100%;
    justify-content: center;
  }

  .band {
    padding: 30px 22px;
    border-radius: 20px;
  }

  .site-header .wrap {
    gap: 12px;
  }
}