/* GTM Labs · Signal brand · gtmlabs.sg
   Layout: one left-aligned 1120px column. Paper and Stone sections alternate;
   Charcoal carries the process. Signal appears once or twice per view.
   Flat and bordered: no shadows, glows, gradients, tints or tilts. */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Colour: the five core colours plus supporting tones from the Signal system */
  --paper: #FAFAF6;
  --stone: #F0EFE8;
  --card: #FFFFFC;
  --line: #E1E0D8;
  --ink: #1C1D1F;
  --ink-muted: #5C5F64;
  --charcoal: #16171A;
  --charcoal-raised: #232429;
  --on-charcoal: #F3F2EC;
  --on-charcoal-muted: #A7AAB0;
  --signal: #E4572E;
  --rust: #B03E1B;
  --on-signal: #16171A;
  --hair-dark: color-mix(in srgb, var(--on-charcoal-muted) 28%, var(--charcoal-raised));

  /* Type: Manrope for headlines, DM Sans for everything else */
  --font-display: "Manrope", "DM Sans", Arial, sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;

  /* Shape and space: 8px rhythm */
  --r-sm: 8px;
  --r-md: 16px;
  --r-pill: 999px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(64px, 9vw, 96px);
  --head-gap: 48px;
  --card-pad: 32px;
  --gap: 24px;
  --ease-out: cubic-bezier(.32, .72, 0, 1);

  color-scheme: light;
}
@media (max-width: 560px) { :root { --card-pad: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (max-width: 560px) { html { scroll-padding-bottom: 96px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: inherit;
  text-wrap: balance;
}
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--signal); }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.bg-paper { background: var(--paper); }
.bg-stone { background: var(--stone); }
.on-dark { background: var(--charcoal); color: var(--on-charcoal); }

/* ---------- Type ---------- */
.kicker {
  display: block;
  font: 700 13px/1.4 var(--font-body);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--rust);
}
.on-dark .kicker { color: var(--signal); }
.label, .label-rust { font: 700 14px/1.4 var(--font-body); color: var(--ink); }
.label-rust { color: var(--rust); }
.on-dark .label { color: var(--on-charcoal); }
.display {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.1;
  letter-spacing: -2px;
}
.h2 {
  font-size: clamp(30px, 3.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -1px;
}
.h3 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.5px;
}
.hl { color: var(--signal); }
.hl-line { display: block; }
.nowrap { white-space: nowrap; }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink-muted); max-width: 56ch; }
.on-dark .lead { color: var(--on-charcoal-muted); }
@media (max-width: 560px) { .lead { font-size: 18px; } }
.muted { color: var(--ink-muted); }
.on-dark .muted { color: var(--on-charcoal-muted); }
.small { font-size: 14px; line-height: 1.55; }
.strong-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.5px;
  max-width: 40ch;
  text-wrap: balance;
  padding-left: 20px;
  border-left: 2px solid var(--ink);
}
.section-head { display: grid; gap: 16px; max-width: 760px; }
.stack { display: grid; gap: 16px; }
.vis-caption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }

/* Placeholders still to fill: easy to spot, easy to search for "[" */
.ph { color: var(--rust); border-bottom: 1px dashed currentColor; }
.on-dark .ph { color: var(--on-charcoal); }

/* ---------- Icons ---------- */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 24px; height: 24px; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font: 700 16px/1.2 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn-signal { background: var(--signal); color: var(--on-signal); }
.btn-signal:hover, .btn-signal:active { background: var(--ink); color: var(--paper); }
.on-dark .btn-signal:hover, .on-dark .btn-signal:active { background: var(--on-charcoal); color: var(--charcoal); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover, .btn-outline:active { background: var(--ink); color: var(--paper); }
.on-dark .btn-outline { border-color: var(--on-charcoal); color: var(--on-charcoal); }
.on-dark .btn-outline:hover, .on-dark .btn-outline:active { background: var(--on-charcoal); color: var(--charcoal); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }
.text-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); font-weight: 700; text-decoration: none;
  border-bottom: 1.5px solid var(--line); padding-bottom: 2px;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
/* A 44px-tall hit area that leaves the underline where it is */
.text-link::after { content: ""; position: absolute; inset: -10px -4px; }
.text-link:hover { border-color: var(--ink); }
.text-link-rust { color: var(--rust); border-color: currentColor; font-size: 14px; }
.text-link-rust:hover { color: var(--ink); border-color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- Surfaces ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--card-pad); display: grid; gap: 12px; align-content: start; min-width: 0;
}
.card .i-lg { color: var(--rust); margin-bottom: 8px; }
.card p { color: var(--ink-muted); }
.tag {
  display: inline-block; font: 700 12px/1.4 var(--font-body);
  color: var(--ink-muted); background: var(--stone); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 8px;
}

/* ---------- Announcement bar (homepage only) ---------- */
.annc { background: var(--stone); border-bottom: 1px solid var(--line); }
.annc .wrap { display: flex; justify-content: center; align-items: center; min-height: 44px; }
.annc-link {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 44px; padding-block: 8px;
  font-size: 14px; line-height: 1.4; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.annc-tag { flex: none; font: 700 12px/1.4 var(--font-body); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 8px; }
.annc-long { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.annc-short { display: none; }
.annc-cta { flex: none; margin-left: 4px; font-weight: 700; color: var(--rust); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s var(--ease-out); }
.annc .i { width: 14px; height: 14px; color: var(--rust); }
.annc-link:hover .annc-cta { color: var(--ink); }
@media (max-width: 560px) {
  .annc-long, .annc-cta { display: none; }
  .annc-short { display: inline; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: flex; align-items: center; flex: none; min-height: 44px; }
.brand img { width: 145px; height: 24px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { position: relative; text-decoration: none; font-size: 15px; font-weight: 400; color: var(--ink-muted); transition: color .2s var(--ease-out); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.nav a:hover, .nav a.is-current { color: var(--ink); }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 560px) {
  .header-cta { display: none; }
  .brand img { width: 121px; height: 20px; }
  .header-inner { min-height: 64px; }
}

/* Hamburger (built by main.js): two lines that fold into an X */
.menu-btn { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .6s var(--ease-out), top .6s var(--ease-out); }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 24px; }
.menu-open .menu-btn span { top: 20.25px; }
.menu-open .menu-btn span:first-child { transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: rotate(-45deg); }
@media (max-width: 860px) { .menu-btn { display: block; } .header-cta { margin-left: auto; } .header-cta + .menu-btn { margin-left: 0; } }

/* Full-screen menu sheet with a staggered rise */
.menu {
  position: fixed; inset: 0; z-index: 70; display: grid; align-content: center; gap: 40px;
  padding: 120px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility 0s linear .5s;
}
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out), visibility 0s; }
/* Lock scroll on html only: overflow on body would make it a scroll container and unstick the header */
.menu-open { overflow: hidden; }
.menu-open .site-header { z-index: 80; }
.menu-open .mbar, .menu-open .mbar.is-visible, .menu-open .header-cta { visibility: hidden; }
.menu-links { display: grid; gap: 4px; }
.menu-links a, .menu-cta { opacity: 0; transform: translateY(48px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.menu-links a { font: 700 clamp(36px, 10vw, 56px)/1.15 var(--font-display); letter-spacing: -1.5px; text-decoration: none; color: var(--ink); padding: 4px 0; }
.menu-links a:active { color: var(--rust); }
.menu-open .menu-links a, .menu-open .menu-cta { opacity: 1; transform: none; }
.menu-open .menu-links a:nth-child(1) { transition-delay: .08s; }
.menu-open .menu-links a:nth-child(2) { transition-delay: .14s; }
.menu-open .menu-links a:nth-child(3) { transition-delay: .2s; }
.menu-open .menu-cta { transition-delay: .28s; }
@media (min-width: 861px) { .menu { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 4.5vw, 64px) 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.hero-copy { display: grid; min-width: 0; }
.hero-copy .lead { max-width: 52ch; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* Sample meeting brief */
.brief {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--card-pad); display: grid; gap: 16px; min-width: 0;
}
.brief-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brief-when { display: flex; gap: 16px; align-items: stretch; }
.cal-chip {
  flex: none; width: 64px; border: 1px solid var(--line); border-radius: var(--r-sm);
  display: grid; place-items: center; padding: 8px 0; text-align: center; background: var(--paper);
}
.cal-chip .dow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rust); }
.cal-chip .time { font: 700 18px/1.1 var(--font-display); letter-spacing: -0.5px; }
.cal-chip .ampm { font-size: 11px; color: var(--ink-muted); }
.brief-when-text { display: grid; align-content: center; gap: 2px; min-width: 0; }
.brief-when-text strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.2px; }
.brief-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.brief-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.brief-row dt { font-size: 13px; font-weight: 700; color: var(--ink-muted); padding-top: 2px; }
.brief-row dd { margin: 0; font-size: 15px; line-height: 1.5; }
.brief-quote { font-style: normal; }
.brief-foot { display: grid; font-size: 14px; color: var(--ink-muted); }
@media (max-width: 420px) { .brief-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- Problem and the usual fixes ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.pain-list { border-top: 1px solid var(--line); }
.pain-list li { display: flex; gap: 14px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.5; }
.pain-list .dash { flex: none; width: 14px; height: 2px; background: var(--ink-muted); transform: translateY(-5px); }
.bridge { margin-top: 40px; }

.fixes { border-top: 1px solid var(--line); }
.fixes .card { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.fixes .card .i-lg { margin: 0; align-self: start; width: 40px; height: 40px; padding: 8px; border-radius: var(--r-sm); background: var(--stone); }
.fixes .card p { max-width: 52ch; }
@media (max-width: 760px) { .fixes .card .i-lg { width: 36px; height: 36px; padding: 7px; } }

/* ---------- Method: signals, annotated email, sequence ---------- */
.method-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 900px) { .method-grid { grid-template-columns: minmax(0, 1fr); } }
.method-copy { display: grid; }
.signals { display: flex; flex-wrap: wrap; gap: 8px; }
.signals span { font-size: 14px; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 4px 12px; }
.method-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.5px; }
.email { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; min-width: 0; }
.email-label { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.email-label .muted { font-size: 13px; }
.email-head { padding: 16px 24px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.email-head span { color: var(--ink-muted); display: inline-block; width: 64px; }
.email-body { padding: 24px; display: grid; gap: 16px; font-size: 16px; line-height: 1.6; }
.email-body p { position: relative; padding-right: 36px; }
.mark {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--rust); color: var(--rust); font: 700 12px/1 var(--font-body);
  flex: none;
}
.email-body .mark { position: absolute; right: 0; top: 0; }
.annotations { display: grid; gap: 16px; margin-top: 24px; }
.annotations li { display: flex; gap: 14px; align-items: flex-start; }
.annotations p { color: var(--ink-muted); }
.annotations strong { color: var(--ink); }

/* Sequence ruler: positions are true to the day */
.seq { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 32px; display: grid; gap: 24px; }
.seq-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; }
.ruler { position: relative; height: 112px; margin-inline: 44px; }
.ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.ruler .tick { position: absolute; transform: translateX(-50%); top: calc(50% - 4px); width: 1px; height: 9px; background: var(--ink-muted); }
.ruler .stop { position: absolute; top: 0; bottom: 0; width: max-content; transform: translateX(-50%); display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; }
.ruler .stop .ch { align-self: end; padding-bottom: 12px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.ruler .stop .dot { width: 17px; height: 17px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); }
.ruler .stop .day { align-self: start; padding-top: 12px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.d1 { left: 0%; } .d2 { left: 7.143%; } .d3 { left: 14.286%; } .d4 { left: 21.429%; } .d5 { left: 28.571%; }
.d6 { left: 35.714%; } .d7 { left: 42.857%; } .d8 { left: 50%; } .d9 { left: 57.143%; } .d10 { left: 64.286%; }
.d11 { left: 71.429%; } .d12 { left: 78.571%; } .d13 { left: 85.714%; } .d14 { left: 92.857%; } .d15 { left: 100%; }
@media (max-width: 900px) {
  .ruler { display: none; }
  .seq-list { display: grid; gap: 0; border-left: 1px solid var(--line); margin-left: 6px; }
  .seq-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0 10px 20px; position: relative; font-size: 15px; }
  .seq-list li::before { content: ""; position: absolute; left: -6px; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
  .seq-list li span { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
}
.how-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.how-foot p { color: var(--ink-muted); }
.how-foot strong { color: var(--ink); font-weight: 700; }

/* ---------- Channels: three cards with zoomed-in UI ---------- */
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--head-gap); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.chan { display: grid; grid-template-rows: auto 1fr; border-left: 1px solid var(--line); min-width: 0; }
.chan:first-child { border-left: 0; }
.chan-vis { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; display: grid; align-content: center; }
.chan-text { padding: var(--card-pad); display: grid; gap: 8px; align-content: start; }
.chan-text p { color: var(--ink-muted); }
@media (max-width: 900px) {
  .channels { grid-template-columns: minmax(0, 1fr); }
  .chan { border-left: 0; border-top: 1px solid var(--line); }
  .chan:first-child { border-top: 0; }
}

/* Mini UI kit: product-style "screenshots" built in HTML. Ink, Rust, Paper and Stone only: no Signal. */
.ui { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; line-height: 1.45; color: var(--ink); min-width: 0; }
.ui b { font-weight: 700; }
.ui small { display: block; font-size: 12px; color: var(--ink-muted); }
.ui .i { width: 14px; height: 14px; }
.ui-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-display); background: var(--stone); color: var(--ink); }
.ui-av-ink { background: var(--ink); color: var(--paper); }
.ui-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); white-space: nowrap; }
.ui-pill.go { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ui-pill.ok { color: var(--rust); border-color: currentColor; background: transparent; }
.ui-pill.muted { color: var(--ink-muted); border-style: dashed; }
.ui-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rust); }
.ui-muted { font-size: 12px; color: var(--ink-muted); }
.ui-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; width: max-content; max-width: 92%; }
.ui-toast-text { display: grid; color: var(--ink-muted); }
.ui-toast-text b { color: var(--ink); }

/* Email card */
.ui-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); }
.ui-dots { display: flex; gap: 4px; }
.ui-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.ui-field { padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.ui-field b { display: inline-block; width: 52px; font-weight: 400; color: var(--ink-muted); }
.ui-text { padding: 10px 12px 14px; font-size: 13px; }
.ui-text mark { background: transparent; color: inherit; border-bottom: 2px solid var(--rust); }
.ui-mail-reply { margin: -14px 0 0 28px; }

/* LinkedIn card */
.ui-li { padding: 12px; display: grid; gap: 8px; }
.ui-li-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ui-bubble { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; }
.ui-bubble.out { background: var(--stone); justify-self: end; border-bottom-right-radius: 4px; }
.ui-bubble.in { border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 4px; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 6px 12px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.ui-chip .i { color: var(--rust); }

/* Call log */
.ui-calls { overflow: hidden; }
.ui-calls-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.ui-calls-head span { color: var(--ink-muted); }
.ui-call { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.ui-call:last-child { border-bottom: 0; }
.ui-call-text { flex: 1; min-width: 0; }
.ui-call-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-muted); }
.ui-call-ico.ok { border-color: var(--ink); color: var(--rust); }

/* Panels, lists, routing and invites */
.ui-panel { overflow: hidden; }
.ui-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ui-kv { display: grid; }
.ui-kv div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.ui-kv div:last-child { border-bottom: 0; }
.ui-kv dt { color: var(--ink-muted); font-size: 12px; }
.ui-kv dd { margin: 0; }
.ui-dom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ui-dom:last-child { border-bottom: 0; }
.ui-dom-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ui-dom small { grid-column: 1 / -1; }
.ui-dom.main { background: var(--stone); }
.ui-tags { display: flex; gap: 4px; }
.ui-tags i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 2px 6px; border-radius: var(--r-sm); border: 1px solid var(--rust); color: var(--rust); }
.ui-sig { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ui-sig:last-child { border-bottom: 0; }
.ui-sig.hot { position: relative; }
.ui-sig.hot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rust); }
.ui-sig-ico { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--stone); color: var(--ink); }
.ui-sig.hot .ui-sig-ico { background: var(--ink); color: var(--paper); }
.ui-sig-text { min-width: 0; }
.ui-when { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.ui-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) 72px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.ui-tr:last-child { border-bottom: 0; }
.ui-tr.th { padding-block: 7px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-muted); }
.ui-tr .ui-pill { justify-self: start; }
.ui-co { min-width: 0; }
.ui-co b, .ui-co small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.ui-meter i { height: 6px; border-radius: 2px; background: var(--line); }
.m3 i:nth-child(-n+3), .m4 i:nth-child(-n+4), .m5 i { background: var(--ink); }
.ui-tier { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-sm); font: 700 12px/1 var(--font-display); border: 1.5px solid var(--ink); justify-self: start; white-space: nowrap; }
.ui-tier.t1 { background: var(--ink); color: var(--paper); }
.ui-tier.t3 { border-style: dashed; color: var(--ink-muted); border-color: var(--ink-muted); }
.ui-tier.wide { min-width: 64px; }
.ui-route { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.ui-line { height: 1px; background: var(--ink-muted); position: relative; }
.ui-line::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--ink-muted); border-right: 1px solid var(--ink-muted); transform: rotate(45deg); }
.ui-chans { display: flex; gap: 6px; }
.ui-chans i { font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--r-sm); background: var(--stone); border: 1px solid var(--line); }
.ui-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 12px; color: var(--ink-muted); }
.ui-foot .i { color: var(--rust); }
.ui-invite { display: flex; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.ui-invite .cal-chip { width: 64px; }
.ui-invite-text b { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.2px; }
.ui-status { display: grid; gap: 8px; padding: 14px 16px; }
.ui-status span { display: flex; align-items: center; gap: 8px; }
.ui-status .i { color: var(--rust); }

/* ---------- How it works (Charcoal): five steps with a live visual ---------- */
.proc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); margin-top: var(--head-gap); align-items: start; }
.proc-stage { position: sticky; top: 96px; height: 540px; background: var(--charcoal-raised); border-radius: var(--r-md); overflow: hidden; }
.tag-dark { position: absolute; top: 16px; left: 16px; z-index: 2; background: transparent; border-color: var(--hair-dark); color: var(--on-charcoal-muted); }
.pv { display: none; height: 100%; padding: 56px 32px 32px; align-content: center; gap: 0; }
.pv.is-on { display: grid; animation: pv-in .35s var(--ease-out) both; }
@keyframes pv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pv .pv-a { margin-right: 14%; z-index: 1; }
.pv .pv-b { margin: 14px 0 0 14%; z-index: 2; }
.pv .pv-wide { margin-right: 0; }
.pv .pv-reply { margin: 0 0 14px 0; }
.your-part { display: flex; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--hair-dark); font-size: 14px; color: var(--on-charcoal); }
.your-part .i { color: var(--signal); }

.proc-steps { border-top: 1px solid var(--hair-dark); }
.ps { border-bottom: 1px solid var(--hair-dark); }
.ps-h { font-size: inherit; }
.ps-btn {
  appearance: none; background: none; border: 0; margin: 0; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 20px 4px; border-radius: var(--r-sm);
  font: 700 clamp(17px, 1.5vw, 19px)/1.35 var(--font-display); letter-spacing: -0.2px; color: var(--on-charcoal-muted);
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.ps-btn:hover, .ps.is-open .ps-btn { color: var(--on-charcoal); }
.ps:not(.is-open) .ps-btn:hover { background: var(--charcoal-raised); }
.ps-num { font-size: 14px; font-variant-numeric: tabular-nums; }
.ps.is-open .ps-num { color: var(--on-charcoal); }
.ps-phase { font: 700 13px/1 var(--font-body); color: var(--on-charcoal-muted); border: 1px solid var(--hair-dark); border-radius: var(--r-sm); padding: 6px 10px; transition: border-color .2s var(--ease-out), color .2s var(--ease-out); }
.ps.is-open .ps-phase { border-color: var(--on-charcoal-muted); color: var(--on-charcoal); }
.ps-body { display: grid; gap: 18px; padding: 0 4px 28px 52px; }
.ps-body > p { color: var(--on-charcoal-muted); }
.ps-body .your-part { border-top: 0; padding-top: 0; }
.ps-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark); border-radius: var(--r-md); overflow: hidden; }
.ps-facts.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-facts div { background: var(--charcoal-raised); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.ps-facts dt { font: 700 18px/1.2 var(--font-display); letter-spacing: -0.2px; color: var(--on-charcoal); }
.ps-facts dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--on-charcoal-muted); }
.js .ps:not(.is-open) .ps-body { display: none; }

@media (max-width: 900px) {
  .proc { grid-template-columns: minmax(0, 1fr); }
  .proc-stage { position: relative; top: auto; height: auto; min-height: 360px; }
  .js .proc > .proc-stage { display: none; }
  .ps-body .proc-stage { margin: 4px 0; }
  .ps-body { padding-left: 4px; }
  .pv { padding: 52px 20px 24px; }
}
@media (max-width: 480px) {
  .ps-facts, .ps-facts.tiers { grid-template-columns: minmax(0, 1fr); }
  .ui-tr { grid-template-columns: minmax(0, 1fr) 56px 40px; }
  .ui-tr > :nth-child(3) { display: none; }
  .ui-route { grid-template-columns: auto 18px minmax(0, 1fr); gap: 8px; padding: 14px 12px; }
  .ui-chans { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .ui-chans i { padding: 4px 8px; }
  .pv .pv-a { margin-right: 0; }
  .pv .pv-b { margin-left: 8%; }
}

/* ---------- Founders ---------- */
.founders { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--head-gap); }
@media (min-width: 1180px) { .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.founder { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--card-pad); }
.founder img { width: 200px; height: 200px; object-fit: cover; border-radius: var(--r-md); background: var(--stone); }
.founder-text { display: grid; gap: 8px; align-content: start; min-width: 0; }
.founder-bio { color: var(--ink-muted); }
@media (max-width: 560px) {
  .founder { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .founder img { width: 160px; height: 160px; }
}
.points { display: grid; }
.points li { display: grid; gap: 8px; align-content: start; padding-left: 20px; border-left: 1px solid var(--line); }
.points h3 { font-size: 18px; letter-spacing: -0.2px; }
.points p { color: var(--ink-muted); font-size: 15px; }

/* ---------- Fit ---------- */

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq-side { display: grid; gap: 16px; position: sticky; top: 104px; }
@media (max-width: 900px) { .faq-side { position: static; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font: 700 18px/1.35 var(--font-display); letter-spacing: -0.2px;
  transition: color .2s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rust); }
.faq summary .i { width: 28px; height: 28px; padding: 5px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); transition: transform .3s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.faq details[open] summary .i { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: var(--paper); }
.faq .answer { padding: 0 40px 24px 0; color: var(--ink-muted); max-width: 64ch; }
.faq .answer p + p { margin-top: 12px; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Free list form ---------- */
.list-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 900px) { .list-grid { grid-template-columns: minmax(0, 1fr); } }
.list-copy { display: grid; gap: 20px; }
.list-sample { max-width: 480px; }
@media (max-width: 900px) { .list-sample { max-width: none; } }
.list-sample .ui-sig { align-items: start; }
.list-sample .ui-sig small { white-space: normal; }
.list-sample-more { display: grid; gap: 8px; padding: 14px 16px 16px; }
.list-sample-more span { height: 8px; border-radius: 4px; background: var(--stone); }
.list-sample-more span:nth-child(2) { width: 82%; }
.list-sample-more span:nth-child(3) { width: 64%; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--card-pad); }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; }
.field input, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--font-body); color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; min-height: 48px;
  transition: border-color .2s var(--ease-out);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field input:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field input:focus, .field textarea:focus { border: 1.5px solid var(--ink); padding: 11.5px 13.5px; outline: 2px solid var(--rust); outline-offset: 2px; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--rust); }
.form-note { font-size: 13px; color: var(--ink-muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Final CTA ---------- */
.final { padding-block: var(--section); }
.final-inner { display: grid; }
.final .h2 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.1; letter-spacing: -1.5px; }
.final .lead { max-width: 52ch; }

/* ---------- Homepage sections ---------- */
/* One block per blueprint section, in page order. Rules are scoped to the section id or to a
   component class that only that section uses; the base rules they build on sit above. */

/* -- 1 · Hero: copy rhythm, founder note, brief trail -- */
#hero-title { margin: 16px 0 24px; }
.hero-actions { margin-top: 32px; gap: 16px; }
.hero .hero-note { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.hero .hero-note p { min-width: 0; max-width: 48ch; }
@media (max-width: 900px) { .hero .hero-grid { gap: 40px; } }
@media (max-width: 560px) {
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* "How it got here": four steps on one connector. The last brief row's hairline is its top rule. */
.brief-trail { display: grid; gap: 12px; }
.brief-trail .label { font-size: 13px; color: var(--ink-muted); }
.brief-trail ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.brief-trail li { position: relative; display: grid; gap: 2px; align-content: start; min-width: 0; padding-top: 18px; }
.brief-trail li::before {
  content: ""; position: absolute; top: 4.5px; left: 5px; width: calc(100% + 8px); height: 1px; background: var(--line);
}
.brief-trail li:last-child::before { display: none; }
.brief-trail li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--ink-muted);
}
.brief-trail li:last-child::after { background: var(--ink); border-color: var(--ink); }
.brief-trail-phase { font: 700 12px/1.4 var(--font-body); color: var(--rust); }
.brief-trail-title { font-size: 13px; line-height: 1.35; color: var(--ink); }
.hero .brief-foot a { justify-self: start; }
@media (max-width: 420px) {
  .brief-trail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .brief-trail li::before { display: none; }
}

/* -- 2 · Target · Reach · Book band (Charcoal, attached to the hero) -- */
.band { padding-block: 48px; }
.band-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: baseline; align-content: start;
  min-width: 0; padding-inline: 32px;
}
.band-list li:first-child { padding-left: 0; }
.band-list li + li { border-left: 1px solid var(--hair-dark); }
.band-num { font: 700 13px/1.4 var(--font-body); letter-spacing: 2.5px; color: var(--signal); font-variant-numeric: tabular-nums; }
.band-word { font: 700 28px/1.2 var(--font-display); letter-spacing: -0.5px; color: var(--on-charcoal); }
.band-fact { grid-column: 1 / -1; max-width: 36ch; color: var(--on-charcoal-muted); }
.band-fact b { font-weight: 700; color: var(--on-charcoal); }
@media (max-width: 900px) {
  .band-list { grid-template-columns: minmax(0, 1fr); }
  .band-list li { padding: 20px 0; }
  .band-list li:first-child { padding-top: 0; }
  .band-list li:last-child { padding-bottom: 0; }
  .band-list li + li { border-left: 0; border-top: 1px solid var(--hair-dark); }
}
/* Short laptop screens (1280×800, 1366×768): the remaining fold cuts, so Target · Reach · Book shows under the hero.
   The trail label stays in the accessibility tree. */
@media (min-width: 901px) and (max-height: 860px) {
  .hero { padding-block: 40px 32px; }
  .band { padding-top: 32px; }
  .brief-trail .label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* -- 3 · What we do (channels) -- */
/* The three cards share rows (subgrid), so every mock well is as tall as the tallest
   mock plus 24px top and bottom, and the three titles stay on one line. */
#channels .chan { grid-row: span 2; grid-template-rows: subgrid; }
/* Mocks sit whole inside the well, centred, never wider than 400px (no right-edge bleed) */
#channels .chan-vis { min-height: 240px; padding: 24px; grid-template-columns: minmax(0, 400px); justify-content: center; }
@media (max-width: 900px) {
  #channels .chan-vis { min-height: 224px; }
}
/* Narrow three-up wells (901–1100px): the status pill drops under the name, so names and call notes stay on one line */
@media (min-width: 901px) and (max-width: 1100px) {
  #channels .ui-call { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; }
  #channels .ui-call .ui-pill { grid-column: 2; justify-self: start; }
}

/* -- 4 · The problem and the usual fixes -- */
#problem .split { gap: 64px; margin-bottom: 40px; }
/* Line the list up with the top of the H2: kicker line (13px × 1.4) plus the 16px head gap */
#problem .pain-list { margin-top: calc(13px * 1.4 + 16px); }
#problem .pain-list li { text-wrap: pretty; }
#problem .fixes { margin-top: 16px; }
/* Compact ledger rows: the title sits on the icon's centre line, the text shares its baseline */
#problem .fixes .card { grid-template-columns: 40px minmax(0, 240px) minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; align-items: baseline; }
#problem .fixes .card .h3 { font-size: 20px; margin-top: 8px; }
@media (max-width: 860px) {
  #problem .split { gap: var(--head-gap); }
  #problem .pain-list { margin-top: 0; }
}
@media (max-width: 760px) {
  #problem .fixes .card { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 16px; align-items: center; }
  #problem .fixes .card .h3 { margin-top: 0; }
  #problem .fixes .card p { grid-column: 2; }
}

/* -- 5 · How it works -- */
/* The legacy How block (.proc, .proc-stage, .pv, .ps*, .your-part) already matches the blueprint.
   Phones only: the domain tags drop under the domain name, so the name never breaks and the tags never stretch. */
@media (max-width: 480px) {
  #how .ui-dom { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* -- 6 · Our method -- */
/* Same head rhythm as .section-head (kicker, 16px, H2, 16px, lead); the chips sit 24px off the lead */
#method .method-copy { gap: 16px; }
#method .signals { margin-block: 8px; }
/* 901–1179px: a wider copy column, so the H2 keeps its two lines ('something true about them.' is 391–464px) */
@media (min-width: 901px) and (max-width: 1179px) {
  #method .method-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 48px; }
}

/* The ruler is aria-hidden, so on desktop the day list stays in the page for screen readers */
@media (min-width: 901px) {
  #method .seq-list {
    display: block; position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Go-live row: hairline on top, the commitment on the left, the Signal button and a text link on the right */
#method .how-foot { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); gap: 24px 32px; }
#method .how-foot p { max-width: 62ch; }
@media (max-width: 560px) {
  #method .how-foot .cta-row { flex-direction: column; align-items: stretch; width: 100%; }
  #method .how-foot .text-link { align-self: flex-start; }
}

/* Case-study slot: the inert <template> after #method, styled for when it is switched on */
#case-study .case-card { gap: 16px; max-width: 760px; }
#case-study .case-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#case-study .case-chips li { font-size: 14px; padding: 4px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); }

/* -- 7 · What you get (bento) -- */
/* 2 × 2 cards, each a Paper well (the alternate ground in a Stone section) over the text.
   Fixed 240px wells while two-up keep every row's dividing line level; stacked wells grow. */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--head-gap); }
.bento-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.bento-vis { height: 240px; padding: 24px; display: grid; place-items: center; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.bento-text { display: grid; gap: 8px; align-content: start; padding: var(--card-pad); }
.bento-text p { color: var(--ink-muted); }
@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-vis { height: auto; min-height: 220px; }
}
@media (max-width: 560px) { .bento-vis { min-height: 200px; } }

/* (1) List → Messages → Replies → Meetings */
.ui-flow { display: flex; align-items: center; width: 100%; max-width: 420px; }
.ui-flow-chip {
  flex: none; display: grid; justify-items: center; gap: 6px; min-width: 64px; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  font: 700 13px/1.4 var(--font-body); color: var(--ink);
}
.ui-flow-chip .i { color: var(--rust); }
.ui-flow-chip:last-child { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ui-flow-chip:last-child .i { color: var(--paper); }
#benefits .ui-flow .ui-line { flex: 1 1 24px; min-width: 8px; margin-inline: 2px 4px; }
@media (max-width: 560px) {
  .ui-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #benefits .ui-flow .ui-line { display: none; }
}

/* (2) The qualified-meeting definition */
.bento-def { width: 100%; max-width: 400px; }
#benefits .bento-def .ui-panel-head { flex-wrap: wrap; row-gap: 2px; padding-block: 10px; }
#benefits .bento-def .ui-panel-head > * { white-space: nowrap; }
.ui-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); font: 700 14px/1.4 var(--font-body); }
#benefits .ui-check small { display: inline; font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); }
#benefits .ui-check .i, #benefits .bento-def .ui-foot .i { width: 16px; height: 16px; color: var(--rust); }
#benefits .ui-check .i { margin-top: 2px; }
#benefits .bento-def .ui-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; font-size: 13px; }
#benefits .bento-def .ui-foot span { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 9px 16px; }
#benefits .bento-def .ui-foot span + span { border-left: 1px solid var(--line); }
/* Narrow wells (two-up below 1180px, and phones): the sign-offs wrap as whole phrases */
@media (min-width: 901px) and (max-width: 1179px), (max-width: 560px) {
  #benefits .bento-def .ui-foot { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 16px; }
  #benefits .bento-def .ui-foot span { padding: 0; white-space: nowrap; }
  #benefits .bento-def .ui-foot span + span { border-left: 0; }
}
/* Phones: the note drops to its own line */
@media (max-width: 560px) {
  #benefits .ui-check small { display: block; }
  .ui-check-sep { display: none; }
}

/* (3) Main domain | dashed wall | outreach domains */
.bento-dom { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.25fr); align-items: center; width: 100%; max-width: 460px; }
#benefits .bento-dom .ui-dom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
}
#benefits .bento-dom .ui-dom small { flex-basis: 100%; }
#benefits .bento-dom .ui-dom-name { white-space: nowrap; }
#benefits .bento-dom-main small { text-wrap: balance; }
#benefits .bento-dom .ui-dom-name .i { color: var(--rust); }
#benefits .bento-dom .bento-dom-main { border: 1.5px solid var(--ink); }
#benefits .bento-dom-main .ui-dom-name .i { color: var(--ink); }
.bento-dom-out { display: grid; gap: 8px; }
.bento-dom-wall { position: relative; align-self: stretch; display: grid; place-items: center; }
.bento-dom-wall::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--ink-muted); }
.bento-dom-wall span { position: relative; padding-block: 6px; background: var(--paper); font-size: 12px; line-height: 1.4; color: var(--ink-muted); text-align: center; text-wrap: balance; }
/* Narrow wells (two-up below 1180px, and phones): stack the zones, the wall turns horizontal */
@media (min-width: 901px) and (max-width: 1179px), (max-width: 560px) {
  .bento-dom { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
  .bento-dom-wall { height: 32px; }
  .bento-dom-wall::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed var(--ink-muted); }
  .bento-dom-wall span { padding: 0 8px; }
}
@media (min-width: 901px) and (max-width: 1179px) { #benefits .bento-dom-out .ui-dom small { flex-basis: auto; } }

/* (4) Send windows and channels per market */
.ui-markets { width: 100%; max-width: 400px; }
.ui-markets-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.ui-markets-row:last-child { border-bottom: 0; }
.ui-markets-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.ui-markets-text b { flex: 0 0 76px; font-size: 14px; }
.ui-markets .ui-markets-text small { display: inline; }
.ui-markets-chans { flex: none; display: flex; gap: 4px; }
.ui-markets-chans span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); }
/* A channel not used in that market: a short dash in the slot, so the columns stay aligned */
.ui-markets-chans .off { border-color: transparent; }
.ui-markets-chans .off::before { content: ""; width: 8px; height: 1px; background: var(--ink-muted); }
#benefits .ui-markets-chans .i { width: 16px; height: 16px; }

/* -- Testimonials (inert template after #benefits; styles apply once switched on) -- */
.quotes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 360px; gap: var(--gap);
  margin-top: var(--head-gap); padding-bottom: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
}
.quote { scroll-snap-align: start; min-width: 0; }
.quote figure { height: 100%; display: grid; gap: 24px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--card-pad); }
.quote-by { display: flex; align-items: center; gap: 12px; min-width: 0; }
.quote-by b { display: block; font-size: 15px; }
.quote-role { display: block; font-size: 14px; color: var(--ink-muted); }
.quote-av { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--stone); font: 700 15px/1 var(--font-display); }
.quote-av img { width: 100%; height: 100%; object-fit: cover; }
.quote-av:has(.ph) { width: auto; height: auto; max-width: 50%; border-radius: var(--r-sm); padding: 4px 8px; font: 400 13px/1.4 var(--font-body); }
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.5; }
@media (max-width: 560px) { .quotes { grid-auto-columns: 85vw; } }

/* -- 8 · After you say yes (phases) -- */
/* Four week cards: 4-up from 1180px, 2 × 2 from 561px, one railed column on phones.
   While side by side, subgrid rows keep titles, rules and checklists level across a row. */
.phases { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--head-gap); }
.phase {
  display: grid; grid-template-rows: auto auto auto 1fr; gap: 12px; align-content: start; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--card-pad);
}
.phase.is-live { border-color: var(--ink); }
.phase-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.phase-top .i { color: var(--rust); }
.phase-text { color: var(--ink-muted); }
.phase-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.phase-list li { display: flex; gap: 10px; align-items: flex-start; text-wrap: pretty; }
/* 'Your part' closes every list; side by side, it sits level across the row */
.phase-list .you { margin-top: auto; }
.phase-list .i { margin-top: 3px; color: var(--rust); }
.phases-note { margin-top: 24px; max-width: 72ch; }
@media (min-width: 561px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
  .phases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phase { padding: 24px; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 561px) { .phase { grid-row: span 4; grid-template-rows: subgrid; } }
}
/* Phones: a 1px Line rail on the left with an 8px Ink node level with each week label */
@media (max-width: 560px) {
  .phases { padding-left: 24px; }
  .phase { position: relative; }
  .phase::before {
    content: ""; position: absolute; left: -25px; top: calc(var(--card-pad) + 8px);
    width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  }
  .phase:not(:last-child)::after {
    content: ""; position: absolute; left: -21.5px; width: 1px; background: var(--line);
    top: calc(var(--card-pad) + 16px); bottom: calc(-1 * (var(--gap) + var(--card-pad) + 10px));
  }
}

/* -- 9 · Who it's for -- */

/* -- 10 · Who you'll work with (founders) -- */
/* Base .founders/.founder/.points rules live in styles.css (200px photo, 2-up from 1180px).
   Here: the name row with its LinkedIn slot, the background chips and the points spacing.
   While a card spans the full width (761–1179px), the short text sits centred against the photo. */
@media (min-width: 761px) and (max-width: 1179px) { #team .founder { align-items: center; } }
.founder-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
#team .founder-bio { margin-top: 4px; max-width: 60ch; }
.founder-li {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0;
  border-radius: var(--r-sm); color: var(--rust); transition: color .2s var(--ease-out);
}
.founder-li:hover { color: var(--ink); }

.creds { display: grid; gap: 12px; margin-top: 32px; }
.creds ul { display: flex; flex-wrap: wrap; gap: 8px; }
.creds li {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.4; color: var(--ink);
}
.creds .i { color: var(--rust); }

#team .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
@media (max-width: 560px) { #team .points { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* -- 11 · Free list -- */
/* Base .list-grid/.list-copy/.form-card rules live in styles.css and are shared with free-list.html,
   so everything here is id-scoped: the 16px head rhythm, 48px from the lead to the sample,
   and the Illustrative tag in the sample head. */
#free-list .list-copy { gap: 16px; }
#free-list .list-sample { margin-top: 32px; }
#free-list .list-sample .ui-panel-head { flex-wrap: wrap; row-gap: 8px; }
#free-list .list-sample-meta { display: inline-flex; align-items: center; gap: 8px; }

/* -- 12 · FAQ -- */
/* Base .faq-* rules live in styles.css. Stacked, the side panel sits the usual 48px above the list. */
@media (max-width: 900px) { #faq .faq-grid { gap: var(--head-gap); } }

/* -- 13 · Final CTA -- */
/* A Card panel on Stone that hugs its one left-aligned 680px column (680 + 2 × 64), centred as a closing card. */
#next-step .final-inner {
  grid-template-columns: minmax(0, 680px); gap: 16px; max-width: 808px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 64px;
}
#next-step .cta-row { margin-top: 16px; }
.final-alt { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 760px) { #next-step .final-inner { padding: 32px; } }
@media (max-width: 560px) { #next-step .final-inner { padding: 24px; } }
@media (max-width: 560px) { #next-step .cta-row .btn { width: 100%; } }

/* ---------- Footer (Charcoal) ---------- */
.site-footer { background: var(--charcoal); color: var(--on-charcoal); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 48px; padding-block: 64px 48px; }
.footer-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.footer-col ul { display: grid; gap: 8px; }
.footer-col a { font-size: 15px; color: var(--on-charcoal); text-decoration: none; text-underline-offset: 3px; }
.footer-col a:hover { text-decoration: underline; }
.footer-brand { gap: 0; }
.footer-brand img { width: 145px; height: 24px; }
.footer-tagline { margin-top: 24px; font-size: 15px; color: var(--on-charcoal); }
.footer-label { font: 700 14px/1.4 var(--font-body); color: var(--on-charcoal-muted); }
.footer-note { display: block; font-size: 13px; color: var(--on-charcoal-muted); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hair-dark); font-size: 13px; color: var(--on-charcoal-muted);
}
.footer-bottom a { color: var(--on-charcoal-muted); text-decoration: none; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--on-charcoal); text-decoration: underline; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  /* Touch layouts: 44px-tall links; the list gap folds into that height */
  .footer-col ul { gap: 0; }
  .footer-col a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom { align-items: center; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  body:has([data-mbar]) .footer-bottom { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Mobile sticky bar ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--line);
  transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease-out), visibility 0s linear .25s;
}
.mbar.is-visible { transform: none; visibility: visible; transition: transform .25s var(--ease-out), visibility 0s; }
@media (min-width: 561px) { .mbar { display: none; } }

/* ---------- Inner pages ---------- */
.page-hero { padding-block: clamp(40px, 7vw, 80px) clamp(32px, 5vw, 56px); }
.page-hero .section-head { max-width: 720px; }
.page-hero-full { padding-bottom: var(--section); }
.book-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; padding-bottom: var(--section); }
@media (max-width: 900px) { .book-grid { grid-template-columns: minmax(0, 1fr); } }
.book-side { display: grid; gap: 28px; }
.book-side h2 { font-size: 18px; letter-spacing: -0.2px; }
.checks { display: grid; gap: 12px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.checks .i { color: var(--rust); margin-top: 2px; }
.cal-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; min-height: 700px; display: grid; }
.cal-wrap iframe { width: 100%; border: 0; display: block; }
.cal-msg { display: grid; place-items: center; align-content: center; gap: 16px; padding: 48px 24px; text-align: center; color: var(--ink-muted); }
.cal-msg strong { color: var(--ink); font-family: var(--font-display); font-size: 20px; }
.cal-fallback { font-size: 14px; color: var(--ink-muted); margin-top: 12px; }
.prep { counter-reset: prep; display: grid; gap: 14px; }
.prep li { counter-increment: prep; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 17px; }
.prep li::before { content: counter(prep); font: 700 14px/1 var(--font-display); color: var(--rust); border: 1.5px solid var(--rust); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
/* Used on a .wrap: the column keeps the wrap's left edge and only its content is capped */
.narrow > * { max-width: 720px; }
.prose { display: grid; gap: 20px; }
.prose > * { max-width: 68ch; }
.prose h2 { font-size: 20px; letter-spacing: -0.2px; margin-top: 12px; }
.prose p { color: var(--ink-muted); }
.notice { border: 1px dashed var(--rust); border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; color: var(--rust); }
.inner-cta { padding-block: 0 var(--section); }
/* free-list.html: in the half-width .list-grid column the Display size breaks the H1 into four lines and splits the
   Signal phrase. The guide's H1 scale keeps it to two plain lines plus one accent line from 901px up. */
@media (min-width: 901px) { #fl-title { font-size: clamp(40px, 4.5vw, 48px); letter-spacing: -1.5px; } }
/* Full-width column (1180px up): 44px keeps it to one plain line plus the accent line, as on the homepage */
@media (min-width: 1180px) { #fl-title { font-size: 44px; } }

/* ---------- Scroll reveal: only once JS confirms it can show things again ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Craft layer: physical motion and machined edges, within the brand rules ----------
   Depth comes from lines, not shadows: a second hairline ring (outline) sits around the key
   objects like a tray. Motion uses one spring curve and only transform/opacity. */
:root { --ease-spring: cubic-bezier(.34, 1.36, .64, 1); }

/* Machined edge: a flat second ring around the page's main objects */
.brief, .email, .form-card, .final-inner { outline: 1px solid var(--line); outline-offset: 6px; }
@media (max-width: 560px) { .brief, .email, .form-card, .final-inner { outline-offset: 4px; } }

/* Buttons press like hardware */
.btn { transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .45s var(--ease-spring); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .1s; }

/* Text links: the arrow leans the way it points */
.text-link .i, .annc-link .i { transition: transform .45s var(--ease-spring); }
.text-link:hover .i { transform: translateY(2px); }
.annc-link:hover .i { transform: translateX(3px); }

/* Cards answer the pointer: the border firms up and the mock UI lifts */
.chan, .bento-card, .phase, .founder { transition: border-color .35s var(--ease-out); }
.chan .ui, .bento-card .ui, .bento-card .ui-flow { transition: transform .6s var(--ease-spring); }
@media (hover: hover) {
  .bento-card:hover, .phase:hover, .founder:hover { border-color: var(--ink-muted); }
  .chan:hover .ui, .bento-card:hover .ui, .bento-card:hover .ui-flow { transform: translateY(-4px); }
}

/* Hero entrance: the copy rises line by line, then the brief settles in */
@keyframes craft-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js .hero-copy > * { animation: craft-rise .9s var(--ease-out) both; }
.js .hero-copy > :nth-child(1) { animation-delay: .05s; }
.js .hero-copy > :nth-child(2) { animation-delay: .12s; }
.js .hero-copy > :nth-child(3) { animation-delay: .22s; }
.js .hero-copy > :nth-child(4) { animation-delay: .32s; }
.js .hero-copy > :nth-child(5) { animation-delay: .4s; }
.js .hero .brief { animation: craft-rise 1s var(--ease-out) .3s both; }
.js .band li { animation: craft-rise .9s var(--ease-out) both; }
.js .band li:nth-child(1) { animation-delay: .5s; }
.js .band li:nth-child(2) { animation-delay: .6s; }
.js .band li:nth-child(3) { animation-delay: .7s; }

/* Scroll reveal: a heavier, slower settle */
.js .reveal { transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }

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