/* ============================================================
   /call — page-unique act content only.
   Shared machinery (nav, acts, reveals, sections, footer, CTA)
   lives in site.css. Nothing here hardcodes a colour or size:
   every value comes from tokens.css.
   ============================================================ */

/* ---------- ACT · what the twenty-five minutes actually is ---------- */

.call-lede {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--text-body-lg);
  color: var(--slope);
}

.beats {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  max-width: 1000px;
}
@media (min-width: 860px) { .beats { grid-template-columns: repeat(3, 1fr); } }

.beat {
  background: var(--surface);
  border: 1px solid rgba(236, 237, 236, 0.1);
  border-radius: 16px;
  padding: var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-content: start;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.beat__n {
  font-family: var(--font-label);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  color: var(--slate);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.beat h3 { font-size: var(--text-h4); color: var(--paper); margin-bottom: var(--space-2); }
.beat p  { font-size: var(--text-small); color: var(--slope); }

.call-bring {
  margin-top: var(--space-8);
  font-size: var(--text-body);
  color: var(--slope);
  max-width: 60ch;
}
.call-bring strong { color: var(--paper); }

/* ---------- 01 · the booking panel ----------
   The 17hats scheduler permits framing (`frame-ancestors *`, no
   X-Frame-Options) but its hash-routed SPA renders BLANK inside an iframe —
   verified live on 2026-08-27, the frame loaded and stayed empty. So the
   scheduler is opened in a new tab from a framed panel instead: the page
   still does the saying, the measuring and the second rung, which is the
   whole reason it exists. Revisit if 17hats publishes an official embed
   snippet. */

.booker { margin-top: var(--space-8); }

.booker__panel {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--radius-standard);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: 0 18px 50px rgba(14, 19, 24, 0.10);
}

.booker__meta {
  display: grid;
  gap: var(--space-5);
  justify-content: center;
  margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
  .booker__meta { grid-auto-flow: column; gap: var(--space-12); }
}
.booker__k {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--logo);
  margin-bottom: var(--space-2);
}
.booker__meta p { font-size: var(--text-body); color: var(--ink); }

.booker__cta { font-size: var(--text-body); }

.booker__note {
  margin-top: var(--space-5);
  font-size: var(--text-small);
  color: var(--slate);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 02 · the rungs that need no conversation ---------- */

.doors {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (min-width: 860px) { .doors { grid-template-columns: repeat(3, 1fr); } }

.door {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: 16px;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.door__k {
  font-family: var(--font-label);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--logo);
}
.door h3 { font-size: var(--text-h4); color: var(--ink); }
.door p  { font-size: var(--text-small); color: var(--body-ink); }
.door .tm-arrow { margin-top: var(--space-2); font-size: var(--text-small); }


/* ---------- hero (static, not an act) ---------- */
.call-hero { padding-top: var(--space-16); }
.call-topline {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-6); margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule-dark-soft);
}
.call-stage h1 { color: var(--paper); }