:root {
  /* ── Brand palette, 2026-09-22 ──────────────────────────────────────────
     Sampled out of the logo artwork and the advertising, not invented. The
     mark runs a gradient from teal through blue into purple, on deep indigo.

       teal   #00B8C0     blue   #1888D8
       indigo #3038A0     purple #7040B8     ad background #131047

     The page ground is a shade deeper than the ad's #131047. An advert is a
     logo held for two seconds; a page is paragraphs held for two minutes, and
     #131047 across a whole page fights the text. The ad colour lives on as
     --surface, so cards read as the advertising.

     The teal survives from the previous palette almost unchanged
     (#00d4cc → #00B8C0), which is why this is a shift, not a restart. */
  --bg: #0B0A26;
  --bg-deep: #070620;
  --surface: #131047;            /* the advertising background */
  --surface-strong: #1A1656;
  --text: #f0f0f5;
  --muted: #b6b7c2;
  --subtle: #8f92a3;

  /* The lead colour. Blue carries the mark and reads as clickable, which teal
     at this saturation does not. */
  --accent: #1888D8;
  --accent-strong: #2060C0;

  /* The other two points of the gradient. For emphasis — never both on one
     element, or it turns into a paint chart. */
  --purple: #7040B8;
  --purple-strong: #5A2E9E;
  --teal: #00B8C0;

  /* The gradient IS the brand; a single flat colour loses what makes the mark
     recognisable. Headlines and hero elements only — on small text it muddies. */
  --brand-gradient: linear-gradient(100deg, var(--teal), var(--accent) 45%, var(--purple));

  /* Kept so anything still referencing --gold does not break. No longer part
     of the brand — the purple took its job as the second accent. */
  --gold: #e8c547;

  --border: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(24, 136, 216, 0.42);
  --max: 1160px;
  --radius: 18px;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 5%, rgba(24, 136, 216, 0.20), transparent 30rem),
    radial-gradient(circle at 90% 28%, rgba(112, 64, 184, 0.20), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
img, iframe { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
h1, h2, h3, .brand, .eyebrow, .price {
  font-family: "Inter Tight", system-ui, sans-serif;
}
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.035em; }
p { margin: 0; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--text);
  color: var(--bg);
}
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 10, 38, 0.9);
  backdrop-filter: blur(18px);
}
.nav {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text);
}
/* The mark carries the brand's gradient itself, so it needs no colour here.
   Height is fixed and width auto so it cannot stretch if the file is ever
   replaced with a differently-shaped one. */
.brand-mark {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand-words { display: inline-block; }
/* A quiet cue that the whole lockup is a link home. */
.brand:hover .brand-mark { opacity: 0.85; }
.brand:hover .brand-words { opacity: 0.85; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.brand-words > span { color: var(--accent); }  /* just the 'AI' — the
   wrapper is also a span, so this must not be plain `.brand span`. */
.nav-links { display: flex; align-items: center; gap: 1.35rem; }
.nav-links > a:not(.btn) {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.nav-links > a:hover, .nav-links > a:focus-visible { color: var(--text); }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone span { color: var(--accent); }
.header-phone:hover, .header-phone:focus-visible { color: var(--accent); }
.nav-mobile-actions, .header-page-actions { display: flex; align-items: center; gap: 0.65rem; }
.header-phone-mobile { display: none; }
.menu-toggle {
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  display: block;
  width: 1.2rem;
  height: 2px;
  margin: 0.25rem auto;
  background: currentColor;
  content: "";
}

.btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  color: #0B0A26 !important;
  box-shadow: 0 10px 34px rgba(24, 136, 216, 0.22);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-secondary {
  border-color: var(--border);
  background: rgba(19, 16, 71, 0.55);
  color: var(--text) !important;
  box-shadow: none;
}
.btn-secondary:hover { border-color: var(--border-accent); }

.hero { padding: clamp(4.75rem, 9vw, 8rem) 0 4.5rem; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.eyebrow {
  margin-bottom: 1rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h1 {
  max-width: 13ch;
  margin: 0 0 1.35rem;
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 900;
  background: linear-gradient(100deg, var(--teal), var(--accent) 45%, var(--purple));
  background-clip: text;
  color: transparent;
}
.hero-copy { max-width: 45rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.24rem); }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.trust-line { margin-top: 1.5rem; color: var(--subtle); font-size: 0.88rem; }

.employee-card {
  overflow: hidden;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(26, 22, 86, 0.96), rgba(19, 16, 71, 0.95));
  box-shadow: var(--shadow);
}
.employee-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.employee-id { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; }
.employee-avatar {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: var(--bg);
  font-family: "Inter Tight", sans-serif;
  font-weight: 900;
}
.status { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent); font-size: 0.76rem; font-weight: 700; }
.status::before { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.8rem var(--accent); content: ""; }
.message-thread { display: grid; gap: 0.9rem; padding: 1.25rem; }
.message { width: 90%; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: rgba(255,255,255,0.035); color: var(--muted); font-size: 0.91rem; }
.message strong { display: block; margin-bottom: 0.25rem; color: var(--text); }
.message.employee { margin-left: auto; border-color: rgba(24, 136, 216,0.28); background: rgba(24, 136, 216,0.08); }
.employee-footer { padding: 0.9rem 1.25rem; border-top: 1px solid var(--border); color: var(--subtle); font-size: 0.78rem; }

.problem-strip { border-block: 1px solid var(--border); background: rgba(11, 10, 38, 0.7); }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.problem { padding: 2rem clamp(1rem, 3vw, 2rem); }
.problem + .problem { border-left: 1px solid var(--border); }
.problem-number { display: block; margin-bottom: 0.6rem; color: var(--purple); font-family: "Inter Tight", sans-serif; font-size: 1.8rem; font-weight: 900; }
.problem h2 { margin: 0 0 0.55rem; font-size: 1.18rem; }
.problem p { color: var(--muted); font-size: 0.92rem; }

section { padding: 5.5rem 0; }
.section-heading { max-width: 49rem; margin-bottom: 2.5rem; }
.section-heading h2 { margin: 0 0 1rem; font-size: clamp(2.15rem, 5vw, 3.7rem); }
.section-heading p { color: var(--muted); font-size: 1.04rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card, .step, .price-card, .proof-card, .industry-card, .audit-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(26, 22, 86, 0.92), rgba(19, 16, 71, 0.91));
}
.card { min-height: 100%; padding: 1.5rem; }
.card-icon { display: grid; width: 2.5rem; height: 2.5rem; margin-bottom: 1.15rem; place-items: center; border-radius: 0.65rem; background: rgba(24, 136, 216,0.1); color: var(--accent); font-weight: 800; }
.card h3, .step h3, .industry-card h3 { margin: 0 0 0.65rem; font-size: 1.28rem; }
.card p, .step p, .industry-card p { color: var(--muted); }
.card-add-on { border-color: var(--border-accent); }
.card .add-on-label { margin: -0.45rem 0 0.65rem; color: var(--purple); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.section-note { margin-top: 1.4rem; color: var(--muted); font-style: italic; text-align: center; }

.how-section { border-block: 1px solid var(--border); background: rgba(11, 10, 38, 0.58); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.step { padding: 1.45rem; }
.step-number { display: block; margin-bottom: 1.2rem; color: var(--accent); font-family: "Inter Tight", sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; }

.founding-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  background: rgba(24, 136, 216, 0.10);
}
.founding-banner strong { color: var(--accent); }
.price-card { position: relative; display: flex; min-height: 100%; flex-direction: column; padding: 1.55rem; }
.price-card.featured { border: 2px solid var(--accent); transform: translateY(-0.4rem); box-shadow: 0 22px 60px rgba(24,136,216,0.14); }
.featured-tag { position: absolute; top: -0.8rem; right: 1rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; }
.price-card h3 { margin: 0 0 0.35rem; font-size: 1.5rem; }
.plan-for { min-height: 2.8rem; color: var(--muted); }
.price { margin: 1rem 0 0; font-size: 2.45rem; font-weight: 900; letter-spacing: -0.05em; }
.price span { color: var(--muted); font-family: "Inter", sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0; }
.setup-fee { color: var(--subtle); font-size: 0.84rem; }
.feature-list { flex: 1; margin: 1.2rem 0 1.5rem; padding: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.55rem; padding: 0.5rem 0; color: var(--muted); }
.feature-list li::before { color: var(--accent); font-weight: 800; content: "✓"; }
.price-card .btn { width: 100%; }
.pricing-note { margin-top: 1.3rem; color: var(--subtle); font-size: 0.84rem; }
.audit-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; padding: 1.4rem 1.55rem; }
.audit-card h3 { margin: 0 0 0.35rem; font-size: 1.2rem; }
.audit-card p { color: var(--muted); }

.proof-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1.5rem; align-items: start; }
.proof-card { padding: 1.5rem; }
.proof-band { margin-top: 2.5rem; }
.proof-band .proof-list {
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
}
.proof-list { display: grid; gap: 0; }
.proof-item { padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.proof-item:first-child { padding-top: 0; }
.proof-item:last-child { padding-bottom: 0; border-bottom: 0; }
.proof-band .proof-item:nth-child(2) { padding-top: 0; }
.proof-band .proof-item:nth-last-child(2) { padding-bottom: 0; border-bottom: 0; }
.proof-item h3 { margin: 0 0 0.35rem; font-size: 1.12rem; }
.proof-item p { color: var(--muted); }
.disclosure { margin-top: 1.25rem; padding: 1rem; border-left: 3px solid var(--accent); background: rgba(24, 136, 216,0.07); color: var(--muted); font-size: 0.9rem; }

.industry-card { padding: 1.4rem; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.industry-card:hover { transform: translateY(-2px); border-color: var(--border-accent); }

.faq-list { max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; border: 0; background: transparent; color: var(--text); font-weight: 700; text-align: left; cursor: pointer; }
.faq-question span:last-child { color: var(--accent); font-size: 1.3rem; transition: transform 160ms ease; }
.faq-question[aria-expanded="true"] span:last-child { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.2rem; color: var(--muted); }
.faq-answer[hidden] { display: none; }

.cta { padding: 3.5rem; border: 1px solid var(--border-accent); border-radius: calc(var(--radius) + 0.4rem); background: linear-gradient(135deg, rgba(24,136,216,0.16), rgba(26,22,86,0.95) 52%, rgba(112,64,184,0.14)); text-align: center; }
.cta h2 { max-width: 20ch; margin: 0 auto 1rem; font-size: clamp(2.15rem, 5vw, 3.7rem); }
.cta p { max-width: 43rem; margin: 0 auto; color: var(--muted); }
.cta .actions { justify-content: center; }
.call-disclosure { max-width: 42rem; margin: 1rem auto 0; color: var(--subtle) !important; font-size: 0.82rem; }

footer { padding: 2.5rem 0 6rem; border-top: 1px solid var(--border); color: var(--subtle); font-size: 0.85rem; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a:hover { color: var(--text); }
.mobile-cta { display: none; }

.error-page { min-height: calc(100vh - 12rem); display: grid; place-items: center; padding: 5rem 0; text-align: center; }
.error-content { max-width: 40rem; }
.error-content .brand { display: inline-block; margin-bottom: 2rem; font-size: 1.1rem; }
.error-content h1 { max-width: none; margin-inline: auto; font-size: clamp(2.6rem, 7vw, 4.8rem); }
.error-content p { color: var(--muted); }
.error-content .actions { justify-content: center; }

.book-hero { padding: 4.5rem 0 2rem; text-align: center; }
.book-hero h1 { max-width: 15ch; margin-inline: auto; font-size: clamp(2.6rem, 6vw, 4.8rem); }
.book-hero p { max-width: 42rem; margin-inline: auto; color: var(--muted); font-size: 1.05rem; }
.cal-shell { height: 760px; margin: 0 auto 5rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #151515; }
#my-cal-inline-ai-employee-call { width: 100%; height: 760px; overflow: auto; }
.book-fallback { padding: 1rem; color: var(--muted); font-size: 0.86rem; text-align: center; }

.legal-page { padding: clamp(4rem, 8vw, 7rem) 0; }
.legal-content { max-width: 820px; }
.legal-content h1 { max-width: none; margin-bottom: 1.25rem; font-size: clamp(2.8rem, 7vw, 5rem); }
.legal-content h2 { margin: 2.6rem 0 0.8rem; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.legal-content p, .legal-content li { color: var(--muted); }
.legal-content p + p { margin-top: 0.85rem; }
.legal-content ul { display: grid; gap: 0.45rem; padding-left: 1.25rem; }
.legal-content a { color: var(--accent); }
.legal-intro { font-size: 1.08rem; }
.legal-notice { margin: 2rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--border-accent); border-radius: 0.8rem; background: rgba(24, 136, 216, 0.09); color: var(--muted); }
.legal-notice strong { color: var(--text); }

.insights-hero { padding: clamp(4.75rem, 9vw, 7.5rem) 0 3.5rem; }
.insights-hero-content { max-width: 900px; }
.insights-hero h1 {
  max-width: 14ch;
  font-size: clamp(3rem, 7vw, 5.4rem);
}
.insights-hero-content > p:last-child {
  max-width: 47rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
}
.insights-listing { padding-top: 3.5rem; border-top: 1px solid var(--border); }
.insight-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.insight-card {
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(26, 22, 86, 0.94), rgba(19, 16, 71, 0.92));
}
.insight-card-featured { border-color: var(--border-accent); }
.insight-meta { margin-bottom: 1rem; color: var(--purple); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.insight-card h3 { max-width: 19ch; margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3.4rem); }
.insight-card h3 a { text-decoration: none; }
.insight-card h3 a:hover, .insight-card h3 a:focus-visible { color: var(--accent); }
.insight-card p:not(.insight-meta) { max-width: 48rem; color: var(--muted); font-size: 1.02rem; }
.insight-link { align-self: flex-start; color: var(--accent); font-weight: 800; text-decoration: none; }
.insight-link:hover span { display: inline-block; transform: translateX(0.2rem); }
.insights-principles { border-block: 1px solid var(--border); background: rgba(11, 10, 38, 0.58); }
.insights-principles-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); }
.insights-principles h2 { max-width: 12ch; margin: 0; font-size: clamp(2.15rem, 5vw, 3.7rem); }
.insights-principles-copy { display: grid; gap: 1rem; }
.insights-principles-copy p { color: var(--muted); font-size: 1.03rem; }

.article-page { padding-bottom: 5rem; }
.article-header { max-width: 980px; padding-top: clamp(4.5rem, 9vw, 7.5rem); padding-bottom: 3.5rem; }
.breadcrumb { display: flex; gap: 0.55rem; margin-bottom: 2.5rem; color: var(--subtle); font-size: 0.86rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.article-header h1 { max-width: 14ch; font-size: clamp(3rem, 7vw, 5.5rem); }
.article-deck { max-width: 48rem; color: var(--muted); font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.article-byline { display: flex; flex-wrap: wrap; gap: 0.65rem 1.4rem; margin-top: 1.75rem; color: var(--subtle); font-size: 0.86rem; }
.article-content { max-width: 820px; }
.article-content > p, .article-content > ul, .article-content > ol { color: var(--muted); font-size: 1.04rem; }
.article-content > p + p { margin-top: 1.15rem; }
.article-content h2 { margin: 3.5rem 0 1rem; font-size: clamp(1.8rem, 4vw, 2.55rem); }
.article-content ul, .article-content ol { display: grid; gap: 0.7rem; padding-left: 1.4rem; }
.article-content li { padding-left: 0.25rem; }
.article-content strong { color: var(--text); }
.article-lead { color: var(--text) !important; font-family: "Inter Tight", sans-serif; font-size: clamp(1.35rem, 3vw, 1.75rem) !important; font-weight: 700; line-height: 1.35; }
.article-callout, .evidence-note {
  margin: 2.2rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border-accent);
  border-radius: 0.9rem;
  background: rgba(24, 136, 216, 0.09);
}
.article-callout p { color: var(--muted); }
.article-callout p + p { margin-top: 0.5rem; }
.evidence-note { border-color: rgba(112, 64, 184, 0.35); background: rgba(112, 64, 184, 0.07); color: var(--muted); font-size: 0.94rem !important; }
.article-table-wrap { margin: 2rem 0; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.9rem; }
.article-table { width: 100%; min-width: 640px; border-collapse: collapse; background: rgba(19, 16, 71, 0.72); }
.article-table th, .article-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); color: var(--muted); text-align: left; vertical-align: top; }
.article-table th { color: var(--text); font-family: "Inter Tight", sans-serif; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
.article-table tr:last-child td { border-bottom: 0; }
.article-question { margin-top: 4rem; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--border-accent); border-radius: var(--radius); background: linear-gradient(135deg, rgba(24,136,216,0.14), rgba(26,22,86,0.96)); }
.article-question h2 { max-width: 19ch; margin-top: 0; }
.article-question > p:not(.eyebrow) { color: var(--muted); }

:focus-visible { outline: 3px solid rgba(24, 136, 216, 0.7); outline-offset: 3px; }

@media (max-width: 920px) {
  .hero-grid, .proof-grid, .insights-principles-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 2.5rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card.featured { transform: none; }
  .nav-links {
    position: fixed;
    inset: 4.75rem 0 auto;
    display: none;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(11, 10, 38,0.98);
  }
  .nav-links.open { display: grid; }
  .nav-links > a { min-height: 2.8rem; display: flex; align-items: center; }
  .nav-links .btn { width: 100%; }
  .menu-toggle { display: block; }
  .header-phone-mobile { display: inline-flex; }
  .header-phone-desktop { display: none !important; }
}

@media (max-width: 767px) {
  body { padding-bottom: 4.9rem; }
  footer { padding-bottom: 7rem; }
  .mobile-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.65rem;
    border-top: 1px solid #252525;
    background: #0a0a0a;
  }
  .mobile-cta .btn { width: 100%; }
  .mobile-call {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-call span { color: var(--accent); }
}

@media (max-width: 680px) {
  .container { width: min(calc(100% - 1.25rem), var(--max)); }
  .hero { padding-top: 3.6rem; }
  .hero-copy { font-size: 1rem; }
  .actions { align-items: stretch; flex-direction: column; }
  .actions .btn { width: 100%; }
  .problem-grid, .grid-3, .steps { grid-template-columns: 1fr; }
  .problem + .problem { border-top: 1px solid var(--border); border-left: 0; }
  section { padding: 4.25rem 0; }
  .founding-banner, .audit-card { align-items: flex-start; flex-direction: column; }
  .cta { padding: 2.25rem 1.1rem; }
  .cal-shell, #my-cal-inline-ai-employee-call { height: 720px; }
  .article-header { padding-top: 3.6rem; }
  .article-content > p, .article-content > ul, .article-content > ol { font-size: 1rem; }
}

@media (max-width: 480px) {
  .nav { gap: 0.55rem; }
  .brand { font-size: 0.86rem; }
  .nav-mobile-actions { gap: 0.45rem; }
  .header-phone-mobile { font-size: 0.75rem; }
  .menu-toggle { width: 2.55rem; height: 2.55rem; }
  .header-page-actions .btn { display: none; }
}

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

/* ── Founder portrait ─────────────────────────────────────────────── */
/* The face belongs next to the credibility claims, not on a separate
   page. Sized in rem so it scales with the type, and framed with the
   site's own radius and border tokens. */
/* Johnny and Sofia are a matched pair. One class frames both, so they can
   never drift apart again — whatever the source crops happen to be, the
   rendered shape, size and framing are identical. */
.headshot {
  width: 100%;
  max-width: 20rem;
  /* height:auto is required, not decorative: the img tags carry width/height
     attributes, and a non-auto height stops aspect-ratio from ever applying. */
  height: auto;
  /* 7:10, not 4:5. Both source photos are now exactly this shape, so the
     frame crops neither of them. At 4:5 Sofia's source was taller than the
     frame and object-fit trimmed the bottom — which cut her at the neck. */
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.founder { margin: 0 0 1.5rem; }
.founder-caption { display: grid; gap: 0.2rem; margin-top: 0.9rem; }
.founder-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.founder-role { color: var(--subtle); font-size: 0.85rem; }

/* ── Sofia: the working proof ─────────────────────────────────────── */
/* Both "person" sections use this: photo beside copy, vertically centred.
   Johnny's used to live inside a narrow heading column next to the four
   proof blocks, which left a 1017px column beside a 467px one — the photo
   read as stretched because the column around it was. */
.person-grid, .sofia-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2.5rem;
  align-items: center;
}
.person-copy { margin-bottom: 0; }
.sofia-figure { margin: 0; }

.sofia-copy { margin-bottom: 0; }
.sofia-list {
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.sofia-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted);
}
.sofia-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}
.sofia-actions { margin-top: 1.5rem; }

/* These come last on purpose: the .sofia-grid and .founder base rules are
   defined above, and in CSS the later rule wins when specificity ties. */
@media (max-width: 920px) {
  .person-grid, .sofia-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  /* Back to a single stacked list once the band has no room to be a band. */
  .proof-band .proof-list { grid-template-columns: 1fr; gap: 0; }
  .proof-band .proof-item:nth-child(2) { padding-top: 1.1rem; }
  .proof-band .proof-item:nth-last-child(2) { padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
}

@media (max-width: 480px) {
  /* Stack the founder photo and caption so neither is squeezed. */
  .founder { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Merged in from refined.css on 2026-09-19.

   refined.css used to load on index.html ONLY, and it overrode this file — so
   the homepage and the sub-pages quietly disagreed: flat buttons and a flat H1
   on the homepage, gradient ones everywhere else. Every style change had to be
   made twice, and it was easy to change the wrong copy.

   It lives here now, at the END of the file, because later wins when
   specificity ties. That is exactly the precedence it had before, so the
   homepage is unchanged. The sub-pages now match it.

   NOTE: most rules below target homepage-only sections (.hero-grid,
   .capability-ledger, .brief-item, .steps and friends) and do nothing
   elsewhere. The handful that DO reach every page are: body, .btn,
   .btn-secondary, .eyebrow, h1, .section-heading, .section-note and .cta.
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  background:
    radial-gradient(circle at 10% 4%, rgba(24, 136, 216,.12), transparent 28rem),
    radial-gradient(circle at 92% 22%, rgba(112, 64, 184,.07), transparent 26rem),
    var(--bg);
}
.phone-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn { background: var(--accent); box-shadow: none; }
.btn-secondary { background: rgba(19,16,71,.55); }
.eyebrow { letter-spacing: .025em; text-transform: none; font-size: .88rem; }
h1 { background: none; color: var(--text); }
.hero-grid > div:first-child { position: relative; }
.hero-grid > div:first-child::before { position: absolute; top: .25rem; left: -1.5rem; width: 3px; height: 6rem; background: linear-gradient(var(--accent), var(--purple)); content: ''; }
.trust-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem 1.2rem; max-width: 42rem; }
.trust-grid span { position: relative; padding-left: .9rem; }
.trust-grid span::before { position: absolute; left: 0; color: var(--accent); content: '/'; font-weight: 800; }
.employee-card { border-radius: 7px; background: var(--surface); box-shadow: 18px 18px 0 rgba(24, 136, 216,.06); }
.brief-overline { margin-bottom: .18rem; color: var(--purple); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.brief-list { display: grid; }
.brief-item { display: grid; grid-template-columns: .7rem minmax(0,1fr) auto; gap: .75rem; align-items: start; padding: 1.15rem 1.2rem; border-bottom: 1px solid var(--border); }
.brief-item strong { display: block; margin-bottom: .18rem; color: var(--text); font-size: .94rem; }
.brief-item p { color: var(--muted); font-size: .82rem; }
.brief-mark { width: .5rem; height: .5rem; margin-top: .34rem; border-radius: 50%; background: var(--gold); }
.brief-mark.urgent { background: #ff7a68; }
.brief-mark.ready { background: var(--accent); }
.brief-state { padding: .18rem .42rem; border: 1px solid var(--border); border-radius: 3px; color: var(--subtle); font-size: .68rem; font-weight: 700; }
.approval-queue { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: rgba(24, 136, 216,.07); }
.approval-queue span { color: var(--muted); font-size: .8rem; }
.approval-queue strong { color: var(--accent); font-size: .8rem; }
.problem-strip { background: rgba(11,10,38,.72); }
.section-heading { margin-bottom: 3rem; }
.capability-ledger { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--border); }
.capability-row { min-height: 13rem; padding: 1.65rem 2rem 1.65rem 0; border-bottom: 1px solid var(--border); }
.capability-row:nth-child(even) { padding-right: 0; padding-left: 2rem; border-left: 1px solid var(--border); }
.capability-row h3 { max-width: 24ch; margin: 0 0 .65rem; font-size: 1.35rem; }
.capability-row > p:last-child { max-width: 33rem; color: var(--muted); }
.capability-kicker { margin-bottom: .65rem; color: var(--accent); font-size: .78rem; font-weight: 800; }
.capability-add-on { grid-column: 1 / -1; min-height: auto; padding-right: 35%; border-left: 3px solid var(--gold); padding-left: 1.4rem; background: rgba(112, 64, 184,.045); }
.section-note { text-align: left; }
.how-section { background: rgba(11,10,38,.58); }
.steps { gap: 0; border-top: 1px solid var(--border); }
.step { position: relative; padding: 2rem 1.5rem 1rem 0; border: 0; border-radius: 0; background: transparent; }
.step + .step { padding-left: 1.5rem; border-left: 1px solid var(--border); }
.step::before { position: absolute; top: -3px; left: 0; width: 3.2rem; height: 5px; background: var(--accent); content: ''; }
.step:nth-child(even)::before { background: var(--gold); }
.price-card { border-radius: 8px; }
.proof-card { border: 0; border-left: 1px solid var(--border-accent); border-radius: 0; background: transparent; }
.industry-card { padding: 1.4rem 1.4rem 1.4rem 0; border: 0; border-top: 1px solid var(--border-accent); border-radius: 0; background: transparent; }
.industry-card + .industry-card { padding-left: 1.4rem; }
.cta { border-radius: 8px; }
@media (max-width: 920px) {
  .capability-ledger { grid-template-columns: 1fr; }
  .capability-row, .capability-row:nth-child(even) { padding: 1.4rem 0; border-left: 0; }
  .capability-add-on { grid-column: auto; padding-left: 1.2rem; padding-right: 1rem; }
}
@media (max-width: 680px) {
  .hero-grid > div:first-child::before { left: -.6rem; height: 4.5rem; }
  .trust-grid { grid-template-columns: 1fr; }
  .brief-item { grid-template-columns: .65rem minmax(0,1fr); }
  .brief-state { grid-column: 2; justify-self: start; }
  .approval-queue { align-items: flex-start; flex-direction: column; }
  .steps { border-top: 0; }
  .step, .step + .step { padding: 1.5rem 0; border-top: 1px solid var(--border); border-left: 0; }
  .industry-card + .industry-card { padding-left: 0; }
}

/* ── /try: the page behind the business card's QR code ───────────── */
/* Read on a phone, seconds after a handshake. So: one screen of words,
   the call button first, and the two paths side by side only when there
   is room for them. */
.try-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 1.5rem; text-align: center; }
.try-hero h1 { max-width: 16ch; margin-inline: auto; }
.try-hero .hero-copy { max-width: 36rem; margin-inline: auto; }

.try-proof { padding: 1rem 0 2rem; }
.try-proof-card {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.75rem;
  align-items: center;
  max-width: 46rem;
  margin-inline: auto;
  padding: 1.5rem;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(24,136,216,0.14), rgba(26,22,86,0.95));
}
.try-proof-card h2 { margin-top: 0; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.try-proof-card p { color: var(--muted); }
.try-sofia {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
}
.try-call { margin-top: 0.6rem; }
.try-proof-card .call-disclosure { margin: 0.9rem 0 0; text-align: left; }

.try-paths { padding: 1rem 0 5rem; }
.try-path-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; max-width: 46rem; }
.try-path { display: flex; flex-direction: column; align-items: flex-start; }
.try-path h2 { margin-top: 0; font-size: 1.35rem; }
.try-path-copy { flex: 1; margin-bottom: 1.2rem; color: var(--muted); }
.try-path-main { border-color: var(--border-accent); }
.try-fine-print { margin: 0.9rem 0 0; color: var(--subtle); font-size: 0.8rem; }

@media (max-width: 680px) {
  .try-proof-card { grid-template-columns: 1fr; text-align: center; }
  .try-sofia { width: 8rem; margin-inline: auto; }
  .try-proof-card .call-disclosure { text-align: center; }
  .try-call { width: 100%; justify-content: center; }
  .try-path-grid { grid-template-columns: 1fr; }
  .try-path .btn { width: 100%; justify-content: center; }
}

/* ── Working together (#pricing) ──────────────────────────────────── */
/* Replaced the three priced plans on 2026-09-24. No numbers on purpose. */
.terms-grid .card h3 { margin-top: 0.4rem; }
.terms-grid .card p { color: var(--muted); }
.terms-cta { margin-top: 2rem; text-align: center; }
.terms-cta > p { color: var(--muted); }
.terms-cta .actions { justify-content: center; margin-top: 1rem; }