/* v3.1 additions. styles.css is a purged Tailwind build, so new components are styled here
   with the same tokens: ink #191a1c, ink2 #54555b, ink3 #8b8c93, accent #6e3fa7,
   mark #8a2fc8, tint #f6f2fb, pline #e6dcf3, line #eae8e2, canvas #fcfcfb. */

/* Mobile: 16px gutter, smaller display type */
@media (max-width: 640px) {
  .v31-gutter { padding-left: 16px; padding-right: 16px; }
  .v31-h1 { font-size: 40px; }
  .v31-h2 { font-size: 30px; }
}

/* Demonstration flow */
.v31-flow { list-style: none; margin: 0; padding: 28px; display: grid; gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: step; }
.v31-flow li { counter-increment: step; background: #fff; border: 1px solid #e6dcf3; border-radius: 12px;
  padding: 18px 16px; font-size: 14.5px; line-height: 1.45; color: #54555b; position: relative; }
.v31-flow li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 10px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #6e3fa7; }
@media (max-width: 900px) { .v31-flow { grid-template-columns: 1fr; } }
.v31-demo-links { padding: 0 28px 8px; font-size: 14.5px; color: #54555b; }
.v31-demo-links a { color: #6e3fa7; text-decoration: underline; }
.v31-demo-note { margin: 0; padding: 16px 28px 24px; font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.04em; color: #6e3fa7; }

/* Pricing table — stacks below 700px */
.v31-table { border: 1px solid #eae8e2; border-radius: 16px; overflow: hidden; background: #fff; }
.v31-row { display: grid; grid-template-columns: 0.8fr 1.6fr 1fr; border-top: 1px solid #eae8e2; }
.v31-row:first-child { border-top: 0; }
.v31-row > div { padding: 20px 26px; font-size: 14.5px; line-height: 1.5; color: #54555b; }
.v31-row > div + div { border-left: 1px solid #eae8e2; }
.v31-head { background: #fcfcfb; }
.v31-head > div { padding-top: 14px; padding-bottom: 14px; font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #8b8c93; }
.v31-stage { font-weight: 600; color: #191a1c !important; font-size: 15px !important; }
.v31-price { font-weight: 600; color: #191a1c !important; background: #f6f2fb; }
@media (max-width: 700px) {
  .v31-head { display: none; }
  .v31-row { grid-template-columns: 1fr; border-top-width: 1px; }
  .v31-row:nth-child(2) { border-top: 0; }
  .v31-row > div { padding: 10px 18px; }
  .v31-row > div + div { border-left: 0; }
  .v31-stage { padding-top: 18px !important; }
  .v31-price { padding-bottom: 18px !important; }
}

/* About */
.v31-about { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; max-width: 900px; }
.v31-photo { width: 200px; height: 200px; border-radius: 16px; background: #2a2b2f center/cover no-repeat url("/img/founder.jpg"); }
.v31-photo-placeholder { background-image: none; border: 1px dashed rgba(255,255,255,0.25); }
@media (max-width: 700px) { .v31-about { grid-template-columns: 1fr; gap: 28px; } .v31-photo { width: 140px; height: 140px; } }

/* Form */
.v31-formwrap { max-width: 720px; margin: 0 auto; padding: 56px; }
@media (max-width: 640px) { .v31-formwrap { padding: 28px 20px; } }
.v31-form { display: flex; flex-direction: column; }
.v31-form label { font-size: 14.5px; font-weight: 600; color: #191a1c; margin: 18px 0 8px; }
.v31-form label:first-child { margin-top: 0; }
.v31-form input, .v31-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #191a1c;
  background: #fff; border: 1px solid #e6dcf3; border-radius: 10px; padding: 12px 14px; }
.v31-form input:focus, .v31-form textarea:focus { outline: 2px solid #6e3fa7; outline-offset: 1px; border-color: #6e3fa7; }
.v31-form [aria-invalid="true"] { border-color: #b42318; }
.v31-form .cf-turnstile { margin-top: 18px; }
.v31-form button { align-self: flex-start; margin-top: 8px; cursor: pointer; border: 0; }
.v31-form button[disabled] { opacity: 0.6; cursor: wait; }
@media (max-width: 640px) { .v31-form button { align-self: stretch; } }
.v31-consent { margin: 18px 0 14px; font-size: 13.5px; color: #54555b; }
.v31-consent a, .v31-status a { color: #6e3fa7; text-decoration: underline; }
.v31-status { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; }
.v31-ok { background: #fff; border: 1px solid #e6dcf3; color: #191a1c; }
.v31-err { background: #fff5f4; border: 1px solid #f3c8c3; color: #7a1b12; }

/* Footer links */
.v31-footlinks { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: #54555b; }
.v31-footlinks a:hover { color: #191a1c; }

/* Simple pages (privacy, 404) */
.v31-page { max-width: 760px; margin: 0 auto; padding: 72px 32px 96px; }
@media (max-width: 640px) { .v31-page { padding: 48px 16px 72px; } }
.v31-page h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; margin: 0 0 24px; }
.v31-page h2 { font-size: 20px; font-weight: 600; margin: 36px 0 10px; }
.v31-page p, .v31-page li { font-size: 16px; line-height: 1.65; color: #54555b; }
.v31-page ul { padding-left: 20px; list-style: disc; }
.v31-page a { color: #6e3fa7; text-decoration: underline; }

/* Anchor targets clear the 74px sticky header */
section[id] { scroll-margin-top: 74px; }

/* Larger header/footer bars so the full logo (incl. "AI Agency") is legible */
.v31-bar { height: 96px; }
.v31-logo { height: 64px; width: auto; display: block; }
.v31-footbar { padding-top: 28px; padding-bottom: 28px; }
section[id] { scroll-margin-top: 96px; }
@media (max-width: 640px) {
  .v31-bar { height: 80px; }
  .v31-logo { height: 52px; }
  section[id] { scroll-margin-top: 80px; }
}

/* About page: photo and bio left blank until supplied */
.v31-photo-light { background-color: #f6f2fb; border: 1px dashed #e6dcf3; }
.v31-bio { min-height: 200px; }
@media (max-width: 700px) { .v31-bio { min-height: 120px; } }

/* Where the time goes: estimate stats + Eisenhower Matrix (dark section) */
.v31-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; margin-bottom: 56px; }
.v31-stat { background: #1f2023; padding: 30px 28px; }
.v31-stat-num { font-size: 46px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 10px; }
.v31-stat p { font-size: 15px; line-height: 1.5; color: #b9b9c2; margin: 0 0 14px; }
.v31-ref { font-size: 20px; vertical-align: super; color: #b79be0; margin-left: 2px; text-decoration: none; }
.v31-est { display: inline-block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #b79be0; border: 1px solid rgba(183,155,224,0.35); border-radius: 999px; padding: 4px 10px; }

.v31-matrix-head h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.v31-matrix-head p { font-size: 15px; color: #b9b9c2; margin: 0 0 22px; }
.v31-matrix { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 10px; }
.v31-axis { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8a7bb5; display: flex; align-items: flex-end; padding: 0 4px 2px; }
.v31-axis-row { align-items: center; }
.v31-q { background: #1f2023; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 22px 22px 24px; }
.v31-q p { font-size: 14px; line-height: 1.55; color: #a4a4ae; margin: 0; }
.v31-q p + p { margin-top: 10px; }
.v31-q-tag { display: inline-block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #b9b9c2; margin-bottom: 10px; }
.v31-q3 { background: #6e3fa7; border-color: #8a2fc8; box-shadow: 0 18px 40px -18px rgba(138,47,200,0.6); }
.v31-q3 .v31-q-tag { color: #fff; }
.v31-q3 p { color: #efe7fa; }
.v31-q3 strong { color: #fff; font-weight: 600; }
.v31-q3-cta { color: #fff !important; font-weight: 600; }
.v31-sources { margin: 28px 0 0; font-size: 13px; color: #8b8c93; }

@media (max-width: 700px) {
  .v31-stats { grid-template-columns: 1fr; }
  .v31-stat-num { font-size: 38px; }
  .v31-matrix { grid-template-columns: 1fr; }
  .v31-axis { display: none; }
}
.v31-q-axis { display: none; }
@media (max-width: 700px) { .v31-q-axis { display: inline; } }

/* Footer: logo, then two link columns; copyright row below */
.v31-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px 64px; }
.v31-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(160px, auto)); gap: 0 64px; }
.v31-foot-col { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: #54555b; }
.v31-foot-col a { color: #54555b; }
.v31-foot-col a:hover { color: #191a1c; text-decoration: underline; }
@media (max-width: 640px) {
  .v31-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; width: 100%; }
}

/* Business Optimization Consult (secondary offer, dark section) */
.v31-boc { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 26px 28px; background: rgba(255,255,255,0.03); }
.v31-boc > div { max-width: 640px; }
.v31-boc-tag { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7bb5; margin-bottom: 8px; }
.v31-boc h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.v31-boc p { font-size: 14.5px; line-height: 1.55; color: #a4a4ae; margin: 0; }
.v31-boc-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.25); border-radius: 10px;
  padding: 13px 20px; font-size: 14.5px; font-weight: 600; color: #fff; transition: border-color .15s; }
.v31-boc-btn:hover { border-color: #fff; }
@media (max-width: 640px) { .v31-boc { padding: 22px 20px; } .v31-boc-btn { width: 100%; justify-content: center; } }
.v31-mt { margin-top: 32px; }

/* "Last updated" line directly under a page title */
.v31-page h1 + .v31-updated { margin-top: -14px; margin-bottom: 28px; font-size: 13.5px; color: #8b8c93; }

/* Larger italic section label (About: "Why choose FRB?") */
.v31-eyebrow-lg { font-size: 22px; line-height: 1.3; }

/* About: founder bio */
.v31-bio { max-width: 680px; }
.v31-bio p { font-size: 16.5px; line-height: 1.7; color: #54555b; margin: 0 0 18px; }
.v31-bio p:last-child { margin-bottom: 0; }

/* Footer copyright row: copyright left, social icons right */
.v31-copyrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v31-social { display: flex; align-items: center; gap: 18px; }
.v31-social-link { display: inline-flex; color: #8b8c93; transition: color .15s; }
.v31-social-link[href] { cursor: pointer; }
.v31-social-link[href]:hover { color: #6e3fa7; }

/* Homepage: consultation booking options (replaces the review form) */
.v31-book { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .v31-book { grid-template-columns: 1fr; } }
.v31-book-card { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #eae8e2; border-radius: 18px; background: #fcfcfb; padding: 34px 32px; }
.v31-book-primary { border-color: #e6dcf3; background: #f6f2fb; }
.v31-book-card h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin: 14px 0 6px; }
.v31-book-meta { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #6e3fa7; margin-bottom: 14px; }
.v31-book-card p { font-size: 15px; line-height: 1.6; color: #54555b; margin: 0 0 26px; flex: 1; }
.v31-book-tag { display: inline-block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: #6e3fa7; border-radius: 999px; padding: 5px 11px; }
.v31-book-tag-muted { color: #54555b; background: #eae8e2; }
@media (max-width: 640px) { .v31-book-card { padding: 26px 20px; } .v31-book-card a { width: 100%; justify-content: center; } }

/* Footer: "Contact us" block beside the logo; legal links in the copyright row */
.v31-foot-contact { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: #54555b; min-width: 200px; }
.v31-foot-contact a { color: #54555b; }
.v31-foot-contact a:hover { color: #191a1c; text-decoration: underline; }
.v31-foot-heading { font-size: 14.5px; font-weight: 600; color: #191a1c; margin-bottom: 2px; }
.v31-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: #8b8c93; }
.v31-legal a { color: #8b8c93; }
.v31-legal a:hover { color: #191a1c; text-decoration: underline; }
@media (max-width: 640px) { .v31-copyrow { flex-direction: column; align-items: flex-start; } }

/* Header: "About FRB" link beside the booking button */
.v31-head-actions { display: flex; flex: none; align-items: center; gap: 22px; }
.v31-head-link { font-size: 14.5px; font-weight: 600; color: #54555b; white-space: nowrap; }
.v31-head-link:hover, .v31-head-link[aria-current="page"] { color: #191a1c; }
@media (max-width: 420px) { .v31-head-actions { gap: 14px; } .v31-head-link { font-size: 13.5px; } }

/* Footer: logo vertically centred against the Contact us block */
.v31-foot { align-items: center; }
.v31-foot-logo { align-self: center; display: flex; align-items: center; }

/* Softer label font (owner, 5 Oct): these labels and step numbers use the site's sans
   (Hanken Grotesk) instead of Geist Mono. */
#how article .font-mono,          /* How it works card numbers 01–03 */
.v31-flow li::before,             /* Demonstration step numbers 01–05 */
.v31-boc-tag,                     /* "More than one workflow?" */
.v31-est,                         /* "Estimate" */
.v31-axis,                        /* Urgent / Not urgent / Important / Not important */
.v31-book-tag,                    /* "Start here", "More than one workflow" */
.v31-book-meta                    /* "30 min · Free", "60 min" */
{ font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: 0.04em; }
#how article .font-mono, .v31-flow li::before { font-size: 14px; letter-spacing: 0.02em; }
/* Softer label font, part 2 (owner, 5 Oct): matrix quadrant tags and the demonstration footnote */
.v31-q-tag, .v31-demo-note { font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: 0.04em; }

/* Matrix: Q1, Q2, Q4 share one uniform size; Q3 stays the tall, featured quadrant */
@media (min-width: 701px) {
  .v31-q:not(.v31-q3) { align-self: start; min-height: 190px; box-sizing: border-box; }
}

/* Booking cards keep dark text now that the booking section sits on black */
.v31-book-card { color: #191a1c; }

/* About: founder photo (same slot size as the former placeholder) */
.v31-photo-img { display: block; width: 200px; height: 200px; object-fit: cover; border-radius: 16px; }
@media (max-width: 700px) { .v31-photo-img { width: 140px; height: 140px; } }