/*
Theme Name: Bots For That
Theme URI: https://botsforthat.example
Author: Bots For That
Author URI: https://botsforthat.example
Description: A dark, cinematic automation-as-a-service theme. Faithfully reproduces the Bots For That brand system (Instrument Serif headings, Garet body, ambient gradient motion, glassmorphic cards, marquee testimonials). Ships with editable block patterns for every section so pages can be built and extended entirely from the WordPress block editor.
Version: 1.4.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bots-for-that
*/

/* =========================================================
   BRAND FONT — Garet (bundled), the primary UI/body face,
   exactly as the source mockup. Instrument Serif (headings)
   loads from Google Fonts (see functions.php).
   ========================================================= */
@font-face {
  font-family: 'Garet';
  src: url('assets/fonts/GaretBook.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('assets/fonts/GaretHeavy.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --bft-bg: #17101d;
  --bft-bg-2: #1e1526;
  --bft-text: #f4eef7;
  --bft-muted: rgba(244, 238, 247, 0.66);
  --bft-accent: #e21766;
  --bft-accent-2: #b4124f;
  --bft-card: rgba(255, 255, 255, 0.05);
  --bft-card-border: rgba(255, 255, 255, 0.12);
  --bft-radius: 22px;
  --bft-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --bft-sans: 'Garet', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --bft-maxw: 1180px;
}

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bft-bg);
  color: var(--bft-text);
  font-family: var(--bft-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--bft-accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--bft-serif);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
  -webkit-text-stroke: 0.5px currentColor;
  text-wrap: balance;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(40px, 7.5vw, 88px); }
h2 { font-size: clamp(30px, 4.6vw, 56px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); font-family: var(--bft-sans); font-weight: 600; -webkit-text-stroke: 0; letter-spacing: -.01em; }

/* Match the source mockup exactly. Instrument Serif ships only a 400 weight, so
   any heavier value (e.g. the .bft-h2 / hero / Learning-Centre section headings
   set to 700) renders as faux-bold and reads too heavy. The mockup pins every
   h1/h2 to 400 with a fine optical stroke; reproduce that here, overriding the
   section classes. h3 card/step titles use Garet (a real bold) and are left as-is. */
h1, h2 {
  font-weight: 400 !important;
  -webkit-text-stroke: 0.6px currentColor;
  text-stroke: 0.6px currentColor;
}
p { margin: 0 0 1em; color: var(--bft-muted); }

::selection { background: rgba(226, 23, 102, .32); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.bft-wrap { width: 100%; max-width: var(--bft-maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.bft-section { position: relative; z-index: 2; padding: clamp(64px, 9vw, 120px) 0; }
[hidden] { display: none !important; }
.bft-center { text-align: center; }
.bft-lead { font-size: clamp(18px, 2vw, 22px); max-width: 60ch; color: var(--bft-muted); }
.bft-center .bft-lead { margin-left: auto; margin-right: auto; }
.bft-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .24em;
  font-size: 11px; font-weight: 600; color: var(--bft-accent);
  margin-bottom: 14px;
}

/* =========================================================
   AMBIENT BACKGROUND MOTION
   ========================================================= */
.bft-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bft-ambient span { position: absolute; display: block; border-radius: 50%; }
.bft-ambient .b1 { top: -12%; left: -6%; width: 46vw; height: 46vw; background: radial-gradient(circle at 30% 30%, rgba(226,23,102,.40), transparent 62%); filter: blur(42px); animation: bftDrift 18s ease-in-out infinite; }
.bft-ambient .b2 { bottom: -18%; right: -10%; width: 52vw; height: 52vw; background: radial-gradient(circle at 60% 40%, rgba(120,40,150,.32), transparent 62%); filter: blur(50px); animation: bftDrift2 22s ease-in-out infinite; }
.bft-ambient .b3 { top: 40%; left: 52%; width: 30vw; height: 30vw; background: radial-gradient(circle, rgba(54,40,56,.60), transparent 64%); filter: blur(48px); animation: bftDrift 26s ease-in-out infinite; }

@keyframes bftDrift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%, 6%) scale(1.08); } 100% { transform: translate(0,0) scale(1); } }
@keyframes bftDrift2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%, -4%) scale(1.1); } 100% { transform: translate(0,0) scale(1); } }
@keyframes bftUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bftHeadIn { 0% { opacity: 0; transform: translateY(20px); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes bftLogoIn { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bftFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-9px); } 100% { transform: translateY(0); } }
@keyframes bftMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes bftPulse { 0% { box-shadow: 0 0 0 0 rgba(226,23,102,.45); } 70% { box-shadow: 0 0 0 16px rgba(226,23,102,0); } 100% { box-shadow: 0 0 0 0 rgba(226,23,102,0); } }
@keyframes bftLineGrow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes bftLineFade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bftDot { 0% { top: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Connector line that draws down into the size options (from the industry pick) */
.bft-size-top { position: relative; margin-top: clamp(24px, 7vh, 80px); }
.bft-sizeline { position: absolute; left: 50%; bottom: calc(100% + 10px); margin-left: -1.5px; width: 3px; height: clamp(90px, 15vh, 160px); transform-origin: top center; border-radius: 3px; background: linear-gradient(180deg, rgba(226,23,102,0), var(--bft-accent) 22%, var(--bft-accent)); box-shadow: 0 0 16px rgba(226,23,102,.85), 0 0 36px rgba(226,23,102,.5); animation: bftLineGrow .95s cubic-bezier(.5,0,.2,1) both, bftLineFade .8s ease 1.9s both; pointer-events: none; }
.bft-sizeline-dot { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 24px var(--bft-accent); animation: bftDot .95s cubic-bezier(.5,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .bft-sizeline { animation: none; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bft-ambient span { animation: none !important; }
  * { animation-duration: .001ms !important; }
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.bft-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(23, 16, 29, 0.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bft-header .bft-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.bft-header { transition: opacity .5s ease, transform .5s ease, visibility .5s ease; }

/* On the homepage intro, the menu is hidden; it slides in once the
   visitor makes their first choice (matches the source mockup). */
body.bft-intro .bft-header {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  pointer-events: none;
}
.bft-logo img { display: block; height: 30px; width: auto; }
.bft-nav { display: flex; align-items: center; gap: 8px; }
.bft-nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.bft-nav a { color: var(--bft-text); font-family: var(--bft-sans); font-size: 15px; font-weight: 500; padding: 9px 14px; border-radius: 10px; position: relative; }
.bft-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.bft-nav .current-menu-item > a,
.bft-nav .current_page_item > a,
.bft-nav .current-menu-ancestor > a,
.bft-nav a[aria-current="page"] { color: #fff; }
/* Active page indicator bar (accent underline) */
.bft-nav .current-menu-item > a::after,
.bft-nav .current_page_item > a::after,
.bft-nav .current-menu-ancestor > a::after,
.bft-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--bft-accent);
}
.bft-menu-toggle { display: none; background: none; border: 0; color: var(--bft-text); font-size: 26px; cursor: pointer; padding: 6px; }

/* Header action buttons (Book a discovery call + Log in) */
.bft-nav-actions { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
.bft-header-cta { font-size: 14px; padding: 11px 22px; border-radius: 999px; box-shadow: 0 8px 24px rgba(226,23,102,.32); }
/* When the header CTA is an <a> (the small-firm "Start your free demo"), keep it
   looking like the button — .bft-nav a rules would otherwise lighten/reshape it. */
.bft-nav-actions a.bft-header-cta { font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: 999px; }
.bft-nav-actions a.bft-header-cta:hover { background: var(--bft-accent); color: #fff !important; }
.bft-login {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bft-sans); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 20px; border-radius: 999px !important; cursor: pointer; text-decoration: none;
  color: var(--bft-accent) !important; background: transparent; border: 1px solid var(--bft-accent);
  transition: background .2s ease, color .2s ease;
}
.bft-login:hover { background: var(--bft-accent) !important; border-color: var(--bft-accent); color: #fff !important; }

.bft-getintouch {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bft-sans); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  color: var(--bft-text); background: transparent; border: 1px solid var(--bft-card-border);
  transition: border-color .2s ease, color .2s ease;
}
.bft-getintouch:hover { border-color: var(--bft-accent); color: #fff; }

@media (max-width: 860px) {
  .bft-menu-toggle { display: block; }
  .bft-nav { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: rgba(23,16,29,.98); border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 12px clamp(20px,5vw,56px); gap: 4px; display: none; }
  .bft-nav.is-open { display: flex; }
  .bft-nav ul { flex-direction: column; gap: 2px; }
  .bft-nav a { padding: 12px 8px; }
  .bft-nav-actions { flex-direction: column; align-items: stretch; margin-left: 0; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
  .bft-header-cta, .bft-login, .bft-getintouch { width: 100%; }
}

/* =========================================================
   BUTTONS  (styles WP core buttons + .bft-cta)
   ========================================================= */
.bft-cta,
.wp-block-button__link,
.bft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--bft-sans); font-weight: 600; font-size: 16px; line-height: 1;
  padding: 15px 26px; border-radius: 999px; cursor: pointer; border: 0;
  background: var(--bft-accent); color: #fff !important;
  box-shadow: 0 10px 28px rgba(226,23,102,.35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.bft-cta:hover,
.wp-block-button__link:hover,
.bft-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(226,23,102,.5); color: #fff !important; }

/* Ghost / secondary button — apply "is-style-outline" in editor */
.wp-block-button.is-style-outline .wp-block-button__link,
.bft-btn-ghost {
  background: transparent; color: var(--bft-text) !important;
  border: 1px solid rgba(255,255,255,.24); box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.bft-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff !important; }

/* =========================================================
   CARDS  (glassmorphic — add className "bft-card")
   ========================================================= */
.bft-card {
  background: var(--bft-card);
  border: 1px solid var(--bft-card-border);
  border-radius: var(--bft-radius);
  padding: clamp(24px, 3vw, 34px);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bft-card:hover { transform: translateY(-6px); border-color: rgba(226,23,102,.45); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.bft-card h3 { margin-top: 0; color: #fff; }
.bft-card .bft-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(226,23,102,.16); color: var(--bft-accent);
  font-family: var(--bft-serif); font-size: 22px; margin-bottom: 14px;
}

/* Firm-size / choice cards (links) */
.bft-choice {
  display: block; text-align: left; color: var(--bft-text);
  background: var(--bft-card); border: 1px solid var(--bft-card-border);
  border-radius: var(--bft-radius); padding: 28px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bft-choice:hover { transform: translateY(-6px); border-color: rgba(226,23,102,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 24px 52px rgba(0,0,0,.5), 0 0 40px rgba(226,23,102,.3); color: var(--bft-text); }
.bft-choice h3 { margin: 0 0 8px; color: #fff; }
.bft-choice p { margin: 0; font-size: 15px; }

/* =========================================================
   TESTIMONIAL MARQUEE
   ========================================================= */
.bft-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bft-track { display: flex; align-items: stretch; gap: 22px; width: max-content; animation: bftMarquee 42s linear infinite; }
.bft-marquee:hover .bft-track { animation-play-state: paused; }
.bft-tcard {
  width: 360px; flex: 0 0 auto;
  display: flex; flex-direction: column;
  background: var(--bft-card); border: 1px solid var(--bft-card-border);
  border-radius: var(--bft-radius); padding: 28px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* Wider cards for longer quotes so all cards can share one height. */
.bft-tw-md { width: 460px; }
.bft-tw-lg { width: 620px; }
.bft-tcard:hover { border-color: rgba(226,23,102,.5); box-shadow: 0 24px 56px rgba(0,0,0,.5); }
.bft-tcard p { color: var(--bft-text); font-size: 17px; }
.bft-tcard .bft-who { color: var(--bft-muted); font-size: 14px; margin: 0; margin-top: auto; padding-top: 8px; }
.bft-tcard .bft-who strong { color: #fff; font-weight: 600; }

/* =========================================================
   CTA BAND  (add className "bft-ctaband" to a Group)
   ========================================================= */
.bft-ctaband {
  text-align: center;
  background: linear-gradient(135deg, rgba(226,23,102,.14), rgba(120,40,150,.14));
  border: 1px solid rgba(226,23,102,.28);
  border-radius: 32px;
  padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 60px);
}
.bft-ctaband h2 { color: #fff; }

/* =========================================================
   BLOG / POSTS
   ========================================================= */
.bft-posts .wp-block-latest-posts,
.bft-postgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wp-block-latest-posts.is-grid li,
.bft-postgrid li, .bft-postgrid article {
  background: var(--bft-card); border: 1px solid var(--bft-card-border);
  border-radius: var(--bft-radius); padding: 26px; margin: 0;
  transition: transform .25s ease, border-color .25s ease;
}
.wp-block-latest-posts.is-grid li:hover,
.bft-postgrid li:hover { transform: translateY(-5px); border-color: rgba(226,23,102,.4); }
.wp-block-latest-posts__post-title { color: #fff !important; font-family: var(--bft-serif); font-size: 24px; }
.wp-block-latest-posts__post-date { color: var(--bft-muted); }

/* =========================================================
   SINGLE POST / PAGE CONTENT
   ========================================================= */
.bft-article { max-width: 900px; margin: 0 auto; }
.bft-article h1 { font-size: clamp(30px, 4.5vw, 52px); line-height: 1.08; }
.bft-back { display: inline-block; margin-bottom: 22px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--bft-muted); text-decoration: none; transition: color .2s, transform .2s; }
.bft-back:hover { color: var(--bft-accent); transform: translateX(-3px); }
.bft-article .entry-content { font-size: 19px; }
.bft-article .entry-content a { text-decoration: underline; }
.bft-article .entry-content h2 { margin-top: 1.5em; }
.bft-article .entry-content h3 { margin-top: 1.2em; }
.bft-article .entry-content h2:first-child,
.bft-article .entry-content h3:first-child { margin-top: 0; }
.bft-meta { color: var(--bft-muted); font-size: 15px; margin-bottom: 30px; }
.bft-article-kicker { display: inline-block; margin-bottom: 14px; }
.bft-article-hero { border-radius: var(--bft-radius); overflow: hidden; margin: 8px 0 36px; }
.bft-article-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.bft-article-hero-ph { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; aspect-ratio: 16 / 9; padding: clamp(22px, 3vw, 40px); background: linear-gradient(135deg, rgba(226,23,102,.30), rgba(120,40,150,.18)); border: 1px solid rgba(255,255,255,.12); }
.bft-article-hero-tag { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.bft-article-hero-mark { font-family: var(--bft-serif); font-size: clamp(34px, 6vw, 68px); line-height: .95; color: #fff; }
.bft-article-hero-mark span { display: block; font-size: .5em; color: rgba(255,255,255,.7); }
.bft-article-cta { margin: 42px 0; padding: clamp(26px,3vw,40px); text-align: center; border-radius: var(--bft-radius); background: linear-gradient(155deg, rgba(226,23,102,.12), rgba(255,255,255,.03)); border: 1px solid rgba(226,23,102,.32); }
.bft-article-cta-lead { margin: 0 0 18px; font-family: var(--bft-serif); font-size: clamp(19px,2.2vw,26px); line-height: 1.3; color: #fff; }
.bft-article-foot { margin-top: 46px; }
.entry-content blockquote { border-left: 3px solid var(--bft-accent); padding-left: 20px; margin: 1.4em 0; color: #fff; font-family: var(--bft-serif); font-size: 26px; }
.entry-content code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px; }

/* Animation entrances for patterns */
.bft-animate { animation: bftUp .8s cubic-bezier(.2,.7,.2,1) both; }

/* =========================================================
   FOOTER
   ========================================================= */
.bft-footer { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.08); padding: 56px 0 40px; margin-top: 40px; }
.bft-footer .bft-wrap { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.bft-footer img { height: 26px; width: auto; margin-bottom: 14px; }
.bft-footer .bft-fnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.bft-footer .bft-fnav a { color: var(--bft-muted); font-family: var(--bft-sans); font-size: 15px; }
.bft-footer .bft-fnav a:hover { color: #fff; }
.bft-copy { width: 100%; color: var(--bft-muted); font-size: 13px; margin-top: 26px; }

/* WP alignment + gutenberg helpers on dark bg */
.aligncenter { text-align: center; }
.entry-content > * { max-width: var(--bft-maxw); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95em; }
.entry-content th, .entry-content td { text-align: left; padding: 10px 14px; border: 1px solid var(--bft-card-border); vertical-align: top; }
.entry-content thead th { background: rgba(255,255,255,.05); color: #fff; font-family: var(--bft-sans); font-weight: 600; letter-spacing: .01em; }
.entry-content td { color: var(--bft-muted); }
.bft-article .entry-content ul { padding-left: 1.25em; margin: 1em 0; }
.bft-article .entry-content li { margin: .35em 0; }
.bft-article .entry-content li::marker { color: var(--bft-accent); }
.wp-block-columns { gap: 26px; }

/* =========================================================
   INTERACTIVE JOURNEY  (front page)
   Reproduces the source mockup: staged intro, floating
   industry pills, click-to-reveal firm size / destination.
   ========================================================= */
.bft-journey { position: relative; z-index: 2; }

section.bft-step {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 90px clamp(20px, 5vw, 60px) 60px;
}
.bft-step[hidden] { display: none; }

/* Intro logo */
.bft-intro-logo img { display: block; height: clamp(39px, 6vw, 69px); width: auto; margin: 0 auto; }

/* Staged entrance animations (match source delays) */
.bft-intro-logo { animation: bftLogoIn .9s cubic-bezier(.2,.7,.2,1) .15s both; }
.bft-intro-head { margin: 26px 0 0; font-size: clamp(40px, 7.5vw, 92px); line-height: 1.0; letter-spacing: -.035em; animation: bftHeadIn 1s cubic-bezier(.2,.7,.2,1) 1.3s both; }
.bft-intro-head i { font-style: italic; }
.bft-intro-sub { margin: 26px auto 0; max-width: 62ch; font-size: clamp(15px,1.6vw,19px); line-height: 1.65; color: rgba(255,255,255,.74); animation: bftUp .9s ease 2.2s both; }
.bft-intro-q { margin-top: 26px; font-size: 13px; font-weight: 500; letter-spacing: .03em; color: rgba(255,255,255,.5); animation: bftUp .9s ease 3.4s both; }

@keyframes bftHeadIn { 0% { opacity:0; transform: translateY(20px); filter: blur(6px);} 100% { opacity:1; transform: translateY(0); filter: blur(0);} }
@keyframes bftPillPop { 0% { opacity:0; transform: scale(.6) translateY(24px);} 60% { opacity:1; transform: scale(1.06) translateY(0);} 100% { opacity:1; transform: scale(1) translateY(0);} }

/* Pill row */
.bft-pillrow { margin-top: clamp(36px, 6vh, 60px); display: flex; flex-wrap: wrap; gap: clamp(10px,1.2vw,18px); justify-content: center; max-width: 100%; }
.bft-sizerow { margin-top: clamp(34px,6vh,54px); display: flex; flex-wrap: wrap; gap: clamp(14px,2vw,24px); justify-content: center; }

/* pop wrapper (staggered) + float wrapper (infinite bob) */
.bft-pop { animation: bftPillPop .6s cubic-bezier(.2,.8,.2,1) both; }
.bft-pillrow .bft-pop:nth-child(1){ animation-delay: 2.90s;} 
.bft-pillrow .bft-pop:nth-child(2){ animation-delay: 3.02s;}
.bft-pillrow .bft-pop:nth-child(3){ animation-delay: 3.14s;}
.bft-pillrow .bft-pop:nth-child(4){ animation-delay: 3.26s;}
.bft-pillrow .bft-pop:nth-child(5){ animation-delay: 3.38s;}
.bft-pillrow .bft-pop:nth-child(6){ animation-delay: 3.50s;}

.bft-float { animation: bftFloat 4.2s ease-in-out 4s infinite; }
.bft-pillrow .bft-pop:nth-child(1) .bft-float{ animation-duration:4.20s; animation-delay:4.00s;}
.bft-pillrow .bft-pop:nth-child(2) .bft-float{ animation-duration:4.70s; animation-delay:4.35s;}
.bft-pillrow .bft-pop:nth-child(3) .bft-float{ animation-duration:5.20s; animation-delay:4.70s;}
.bft-pillrow .bft-pop:nth-child(4) .bft-float{ animation-duration:5.70s; animation-delay:5.05s;}
.bft-pillrow .bft-pop:nth-child(5) .bft-float{ animation-duration:6.20s; animation-delay:5.40s;}
.bft-pillrow .bft-pop:nth-child(6) .bft-float{ animation-duration:6.70s; animation-delay:5.75s;}

/* Glass pill button (exact source styling) */
.bft-pill {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: inherit; font-size: clamp(14px,1.6vw,17px); font-weight: 600; color: #fff;
  padding: 14px clamp(16px,2vw,26px); border-radius: 999px; cursor: pointer;
  background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 34px rgba(0,0,0,.4);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bft-pill:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 20px 44px rgba(0,0,0,.5), 0 0 40px rgba(226,23,102,.35); }
.bft-pill.is-selected { border-color: var(--bft-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 2px var(--bft-accent), 0 0 42px rgba(226,23,102,.55); }

/* Size pill (column) */
.bft-size-pill {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: inherit; color: #fff; width: clamp(150px,22vw,200px); padding: 26px 20px;
  border-radius: 22px; cursor: pointer;
  background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 40px rgba(0,0,0,.42);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  animation: bftPillPop .55s cubic-bezier(.2,.8,.2,1) both;
}
.bft-sizerow .bft-size-pill:nth-child(1){ animation-delay:.05s;}
.bft-sizerow .bft-size-pill:nth-child(2){ animation-delay:.17s;}
.bft-sizerow .bft-size-pill:nth-child(3){ animation-delay:.29s;}
.bft-size-pill:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 22px 50px rgba(0,0,0,.5), 0 0 40px rgba(226,23,102,.3); }
.bft-size-pill .lbl { font-size: clamp(18px,2vw,24px); font-weight: 700; letter-spacing: -.02em; }
.bft-size-pill .sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); }

.bft-size-kicker { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bft-accent); }
.bft-startover { margin-top: 36px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; color: rgba(255,255,255,.45); transition: color .2s; }
.bft-startover:hover { color: #fff; }

/* Destination transition */
.bft-dest { opacity: 1; transition: opacity .45s ease, transform .45s ease; }
.bft-dest.trans-out { opacity: 0; transform: translateY(18px); }
.bft-dest.trans-in { animation: bftUp .6s ease both; }

/* Destination internals */
.bft-crumb { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bft-accent); margin-bottom: 14px; }
.bft-dest .bft-hero { min-height: auto; padding-top: 60px; }
.bft-stats { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 40px; }
.bft-stat { min-width: 180px; }
.bft-stat .n { font-family: var(--bft-serif); font-size: clamp(34px,4vw,52px); color: #fff; line-height: 1; }
.bft-stat .l { color: var(--bft-muted); font-size: 14px; margin-top: 8px; max-width: 22ch; margin-left:auto; margin-right:auto; }
.bft-pain-grid, .bft-gets-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-top: 44px; text-align: left; }
.bft-pain .tag { display:inline-block; font-size: 11px; font-weight: 700; letter-spacing:.12em; text-transform: uppercase; color: var(--bft-accent); margin-bottom: 10px; }

/* =========================================================
   CHAT / BOOKING WIDGET  (Book a discovery call)
   Slide-in panel with a chat view and a booking form,
   reproducing the source mockup. Launched bottom-right.
   ========================================================= */
.bft-chat { position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 200; font-family: var(--bft-sans); }
body.bft-intro .bft-chat { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility .4s ease; }

.bft-launch {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.2); cursor: pointer;
  font-family: inherit; text-align: left; color: #fff;
  background: linear-gradient(145deg, rgba(46,30,52,.7), rgba(23,16,29,.85));
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 12px 34px rgba(0,0,0,.45); transition: transform .2s ease, box-shadow .2s ease;
}
.bft-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(226,23,102,.4); }
.bft-launch-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; display: block; object-fit: contain; background: #fff; padding: 3px; animation: bftPulse 2.6s infinite; }
@media (prefers-reduced-motion: reduce) { .bft-launch-avatar { animation: none; } }
.bft-launch-text { display: flex; flex-direction: column; line-height: 1.2; }
.bft-launch-text .l1 { font-size: 14px; font-weight: 600; }
.bft-launch-text .l2 { font-size: 12px; color: rgba(255,255,255,.7); }

.bft-panel {
  position: absolute; right: 0; bottom: 64px; width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: linear-gradient(160deg, #241a2c, #17101d); border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.bft-chat.is-open .bft-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.bft-chat.is-open .bft-launch { display: none; }

.bft-panel-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.bft-panel-head .who { display: flex; align-items: center; gap: 12px; }
.bft-panel-head .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; background: #fff; padding: 2px; display: block; }
.bft-panel-head .name { font-weight: 600; font-size: 15px; color: #fff; }
.bft-panel-head .status { font-size: 12px; color: var(--bft-muted); display: flex; align-items: center; gap: 6px; }
.bft-panel-head .status .live { width: 7px; height: 7px; border-radius: 50%; background: #46d17a; }
.bft-panel-close { background: none; border: 0; color: var(--bft-muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.bft-panel-close:hover { color: #fff; background: rgba(255,255,255,.08); }

.bft-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bft-view { display: none; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 0; }
.bft-view.is-active { display: flex; }

.bft-msg { max-width: 85%; padding: 12px 15px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.bft-msg.bot { align-self: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-bottom-left-radius: 6px; color: var(--bft-text); }
.bft-msg.user { align-self: flex-end; background: var(--bft-accent); color: #fff; border-bottom-right-radius: 6px; }
.bft-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bft-chip {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--bft-text);
  background: rgba(226,23,102,.1); border: 1px solid rgba(226,23,102,.35);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.bft-chip:hover { background: rgba(226,23,102,.2); border-color: rgba(226,23,102,.6); color: #fff; }

.bft-typing { display: flex; gap: 5px; padding: 12px 15px; align-self: flex-start; }
.bft-typing span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); animation: bftDots 1.2s infinite; }
.bft-typing span:nth-child(2){ animation-delay: .2s;} .bft-typing span:nth-child(3){ animation-delay: .4s;}
@keyframes bftDots { 0%,60%,100%{opacity:.25;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }

.bft-panel-input { flex: 0 0 auto; display: flex; gap: 8px; padding: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.bft-in {
  flex: 1; font-family: inherit; font-size: 14px; color: #fff; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); outline: none;
}
.bft-in::placeholder { color: rgba(255,255,255,.4); }
.bft-in:focus { border-color: var(--bft-accent); background: rgba(255,255,255,.1); }
.bft-send { border: 0; border-radius: 12px; background: var(--bft-accent); color: #fff; width: 44px; font-size: 18px; cursor: pointer; }

/* Book view */
.bft-book-back { align-self: flex-start; background: none; border: 0; color: var(--bft-muted); font-size: 13px; cursor: pointer; padding: 0; }
.bft-book-back:hover { color: #fff; }
.bft-book h3 { color: #fff; margin: 6px 0 2px; }
.bft-book p.sub { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 8px 0 18px; }
.bft-book-form { display: flex; flex-direction: column; gap: 11px; }
.bft-book input, .bft-book textarea {
  width: 100%; font-family: inherit; font-size: 13.5px; color: #fff; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); outline: none;
}
.bft-book input:focus, .bft-book textarea:focus { border-color: var(--bft-accent); background: rgba(255,255,255,.1); }
.bft-book .bft-cta { width: 100%; margin-top: 4px; }

/* "or" divider */
.bft-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.bft-or span:first-child, .bft-or span:last-child { flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.bft-or-t { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* Call / email rows */
.bft-contact-methods { display: flex; flex-direction: column; gap: 10px; }
.bft-contact-row { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: background .2s ease, border-color .2s ease; }
.bft-contact-row:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); }
.bft-contact-row .k { font-size: 13.5px; color: rgba(255,255,255,.55); }
.bft-contact-row .v { font-size: 13.5px; font-weight: 600; color: #fff; }
.bft-booked { text-align: center; padding: 20px 6px; }
.bft-booked .tick { width: 54px; height: 54px; border-radius: 50%; background: rgba(70,209,122,.15); color: #46d17a; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 14px; }
.bft-booked h3 { color: #fff; margin: 0 0 8px; }
.bft-err { color: #ff8a80; font-size: 13px; }

/* =========================================================
   DESTINATION PAGE LAYOUTS (journey)
   ========================================================= */
/* Two-column hero: copy left, video right */
.bft-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,52px); align-items: center; }
.bft-split-hero { align-items: center; }
.bft-dest-hero { padding-top: clamp(40px,7vh,80px); }
.bft-hero-copy .bft-crumb { text-align: left; }
.bft-hero-copy h1 { text-align: left; font-size: clamp(30px, 3.9vw, 52px); line-height: 1.05; letter-spacing: -.025em; }
.bft-hero-copy .bft-lead { margin-left: 0; }
.bft-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.bft-hero-media { width: 100%; }
@media (max-width: 820px) {
  .bft-split, .bft-split-hero { grid-template-columns: 1fr; }
  .bft-hero-media { order: -1; }
}

/* Explainer video placeholder */
.bft-video {
  position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16/9; width: 100%;
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 36px 80px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; cursor: pointer;
}
.bft-video-glow { position: absolute; top: -30%; left: -10%; width: 60%; height: 120%; background: radial-gradient(circle, rgba(226,23,102,.28), transparent 65%); filter: blur(30px); }
.bft-play {
  position: relative; width: 74px; height: 74px; border-radius: 50%; border: none;
  background: var(--bft-accent); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(226,23,102,.5); transition: transform .2s ease, box-shadow .2s ease;
}
.bft-video:hover .bft-play { transform: scale(1.08); box-shadow: 0 12px 34px rgba(226,23,102,.6); }
.bft-play .tri { display: block; width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 22px solid #fff; margin-left: 5px; }
.bft-video-label { position: relative; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8); }

/* Grids */
.bft-grid { display: grid; gap: 22px; text-align: left; }
.bft-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bft-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bft-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .bft-grid-3, .bft-grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .bft-grid-2, .bft-grid-3, .bft-grid-4 { grid-template-columns: 1fr;} }

/* Letter badge (benefits) */
.bft-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(226,23,102,.16); color: var(--bft-accent); font-family: var(--bft-serif); font-size: 22px; margin-bottom: 14px; }
.bft-step-k { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--bft-accent); margin-bottom: 10px; }

/* Who-we-help item */
.bft-who-item { display: flex; align-items: center; gap: 14px; }
.bft-who-item p { margin: 0; color: var(--bft-text); }
.bft-check { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(226,23,102,.16); color: var(--bft-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Why-us split */
.bft-why-cards { display: grid; gap: 18px; }

/* Products shelf */
.bft-product { position: relative; padding-left: 30px; }
.bft-product-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 22px 0 0 22px; background: linear-gradient(180deg, var(--bft-accent), var(--bft-accent-2)); }
.bft-product-tag { color: var(--bft-accent) !important; font-weight: 600; font-size: 14px; margin: 0 0 10px; }
.bft-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bft-feat { font-size: 12px; font-weight: 500; color: var(--bft-text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 11px; }

/* Pricing */
.bft-price-card { width: 100%; text-align: center; border-radius: 24px; padding: clamp(34px, 4vw, 56px); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.bft-price { font-family: var(--bft-serif); font-size: clamp(46px,7vw,88px); color: #fff; margin: 16px 0 0; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bft-price span { font-family: var(--bft-sans); font-size: 16px; color: var(--bft-muted); font-weight: 500; }
.bft-price-card p { max-width: 48ch; margin: 18px auto 0; }
.bft-price-card .bft-cta { margin-top: 12px; }

/* =========================================================
   GATED RESOURCE (HubSpot-integrated PDF)
   ========================================================= */
.bft-gated { max-width: 760px; margin: 0 auto; }
.bft-gated .bft-card { text-align: left; }
.bft-gated h3 { color: #fff; margin-top: 0; }
.bft-gated .lead { color: var(--bft-muted); }
.bft-gated .bft-lock { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bft-accent); margin-bottom: 12px; }
.bft-gated .bft-hsform { margin-top: 18px; }
.bft-gated-note { font-size: 13px; color: var(--bft-muted); margin-top: 10px; }
.bft-gated-doc { margin-top: 20px; border-radius: 16px; overflow: hidden; border: 1px solid var(--bft-card-border); }
.bft-gated-doc iframe { display: block; width: 100%; height: 70vh; border: 0; background: #fff; }
.bft-gated-reveal { animation: bftUp .6s ease both; }
.bft-gated-dl { margin-top: 14px; }

/* Simple built-in fallback form (no HubSpot configured) */
.bft-gated-simple { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.bft-gated-simple input { flex: 1 1 220px; }

/* =========================================================
   MOBILE SCALING  (consolidated)
   ========================================================= */
@media (max-width: 768px) {
  body { font-size: 17px; }
  .bft-section { padding: clamp(48px,10vw,72px) 0; }

  /* Journey intro */
  section.bft-step { padding: 84px clamp(16px,5vw,28px) 48px; min-height: 100svh; }
  .bft-intro-head { font-size: clamp(34px,10vw,56px); }
  .bft-pillrow { gap: 10px; }
  .bft-pill { font-size: 14px; padding: 12px 16px; }
  .bft-sizerow { gap: 12px; }
  .bft-size-pill { width: 100%; max-width: 320px; }

  /* Destination hero: video first, copy below, buttons full-width */
  .bft-split-hero { gap: 26px; }
  .bft-hero-copy h1 { font-size: clamp(32px,9vw,48px); }
  .bft-hero-btns { gap: 10px; }
  .bft-hero-btns .bft-cta, .bft-hero-btns .bft-pill { flex: 1 1 auto; justify-content: center; }

  /* Why-us split stacks */
  .bft-split { gap: 24px; }

  /* Testimonials: narrower cards */
  .bft-tcard { width: 78vw; max-width: 320px; }

  /* CTA band tighter */
  .bft-ctaband { padding: 40px 20px; }

  /* Footer stacks */
  .bft-footer .bft-wrap { flex-direction: column; gap: 20px; }

  /* Chat widget full width, bottom sheet feel */
  .bft-chat { right: 12px; bottom: 12px; left: 12px; }
  .bft-panel { width: 100%; height: min(72svh, 620px); right: 0; bottom: 60px; }
  .bft-launch { margin-left: auto; }

  /* Gated doc shorter on phones */
  .bft-gated-doc iframe { height: 60vh; }
}

@media (max-width: 420px) {
  .bft-intro-head { font-size: clamp(30px,11vw,42px); }
  .bft-pill { font-size: 13px; padding: 11px 13px; }
  .bft-price { font-size: clamp(34px,12vw,48px); }
}

/* =========================================================
   DESTINATION PAGES — mockup-accurate section styling
   ========================================================= */
.bft-h2 { text-align: left; font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 14px 0 0; }
.bft-section .bft-wrap > .bft-eyebrow { display: block; text-align: left; }

/* Cards: smaller type to match mockup (title 20px, body 14.5px) */
.bft-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 16px 0 0; }
.bft-card p  { font-size: 14.5px; line-height: 1.6; color: var(--bft-muted); margin: 12px 0 0; }

/* Accent pill label on impact/problem cards ("The problem", "For players", …) */
.bft-taglabel {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: rgba(226,23,102,.14); border: 1px solid rgba(226,23,102,.35);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--bft-accent);
}
/* Divider line between destination-page sections (matches mockup) */
.bft-dest .bft-section { padding: clamp(40px, 6vh, 80px) 0; }
.bft-dest .bft-section + .bft-section { border-top: 1px solid rgba(255,255,255,.08); }
/* Pain / "what changes" tiles — compact and left-aligned, per mockup */
.bft-pain { padding: 28px; text-align: left; }
.bft-pain h3 { margin-top: 16px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.bft-pain p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
/* Numbered variant (e.g. large-firm page): number badge inline with title */
.bft-pain-num .bft-pain-head { display: flex; align-items: center; gap: 12px; }
.bft-pain-num .bft-pain-head h3 { margin-top: 0; font-size: 19px; }
.bft-pain-num p { margin-top: 14px; }
.bft-numbadge { flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(226,23,102,.16); border: 1px solid rgba(226,23,102,.4); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--bft-accent); }

/* ---- Small-firm page: centered hero + big video ---- */
.bft-smallhero .bft-wrap { text-align: center; }
.bft-smallhero-kicker { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--bft-accent); }
.bft-smallhero h1 { margin: 16px auto 0; max-width: 16ch; text-align: center; }
.bft-smallhero .bft-lead { margin: 22px auto 0; max-width: 56ch; }
.bft-bigvideo { position: relative; margin: 40px auto 0; max-width: 860px; border-radius: 24px; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 36px 80px rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; cursor: pointer; }
.bft-bigvideo-glow { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 50%; height: 120%; background: radial-gradient(circle, rgba(226,23,102,.26), transparent 65%); filter: blur(34px); }
.bft-bigvideo .bft-play { position: relative; width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer; background: var(--bft-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(226,23,102,.5); }
.bft-bigvideo .bft-play .tri { display: block; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 23px solid #fff; margin-left: 5px; }
.bft-bigvideo-label { position: relative; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.72); }
.bft-bigvideo-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bft-bigvideo--yt::after { content: ""; position: absolute; inset: 0; background: rgba(10,6,14,.34); z-index: 1; }
.bft-bigvideo--yt .bft-play { z-index: 2; }
.bft-bigvideo--yt .bft-bigvideo-label { z-index: 2; color: #fff; }
.bft-bigvideo--yt:hover .bft-play { transform: scale(1.06); box-shadow: 0 12px 34px rgba(226,23,102,.6); }
.bft-bigvideo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* ---- "What our automations give you back" — image left, rows right ---- */
.bft-getgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.bft-get-media { width: 100%; height: clamp(360px, 40vw, 480px); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: linear-gradient(160deg, rgba(226,23,102,.16), rgba(120,40,150,.12)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 13px; }
.bft-get-media--photo { padding: 0; overflow: hidden; }
.bft-get-media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bft-getrows { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.bft-getrow { display: flex; gap: 15px; align-items: flex-start; }
.bft-getrow .bft-numbadge { width: 32px; height: 32px; }
.bft-get-t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.bft-get-copy p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.68); }
@media (max-width: 820px) { .bft-getgrid { grid-template-columns: 1fr; } .bft-get-media { height: 240px; } }

/* ---- Demo button row after pains ---- */
.bft-demo-row { margin-top: 30px; display: flex; justify-content: center; }

/* ---- Browse the shelf — product carousel ---- */
.bft-shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.bft-shelf-nav { display: flex; align-items: center; gap: 14px; }
.bft-shelf-count { font-family: var(--bft-serif); font-size: 22px; color: rgba(255,255,255,.75); }
.bft-shelf-stage { perspective: 1800px; }
.bft-shelf { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.bft-shelf-card { display: none; grid-template-columns: 1fr 1fr; min-height: 420px; }
.bft-shelf-card.is-active { display: grid; animation: bftFlip .55s cubic-bezier(.4,0,.2,1) both; }
@keyframes bftFlip { 0% { opacity: 0; transform: perspective(1400px) rotateY(-14deg) translateX(40px); } 100% { opacity: 1; transform: perspective(1400px) rotateY(0) translateX(0); } }
.bft-shelf-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.bft-shelf-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.25); transition: background .2s, transform .2s; }
.bft-shelf-dot:hover { transform: scale(1.2); }
.bft-shelf-dot.is-active { background: var(--bft-accent); }
@media (prefers-reduced-motion: reduce) { .bft-shelf-card.is-active { animation: none; } }
.bft-shelf-cover { position: relative; padding: clamp(30px,4vw,52px); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: linear-gradient(135deg, rgba(226,23,102,.24), rgba(120,40,150,.16)); border-right: 1px solid rgba(255,255,255,.12); }
.bft-shelf-bestfor { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.bft-shelf-bestfor-v { font-family: var(--bft-serif); font-size: clamp(22px,3vw,34px); line-height: 1.05; color: rgba(255,255,255,.85); }
.bft-shelf-name { font-size: clamp(30px,4.2vw,52px); font-weight: 700; letter-spacing: -.02em; line-height: 1.03; }
.bft-shelf-tag { margin-top: 12px; font-family: var(--bft-serif); font-style: italic; font-size: clamp(17px,1.8vw,22px); color: rgba(255,255,255,.82); }
.bft-shelf-detail { padding: clamp(30px,4vw,52px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.bft-shelf-detail p { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.75); }
.bft-shelf-detail .bft-feats { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) { .bft-shelf-card.is-active { grid-template-columns: 1fr; } .bft-shelf-cover { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); } }

/* Step cards */
.bft-card.bft-step { padding: 28px; text-align: left; }
.bft-step .bft-step-k { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--bft-accent); }
.bft-card.bft-step h3 { font-size: 19px; margin-top: 12px; font-weight: 700; }
.bft-card.bft-step p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.65); }

/* Why us — two columns: heading + photo left, body + stats right */
.bft-why { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.bft-why-h { margin: 14px 0 0; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.05; }
.bft-why-media {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: clamp(340px, 34vw, 440px); margin-top: 26px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  background: linear-gradient(160deg, rgba(226,23,102,.10), rgba(255,255,255,.03));
  color: var(--bft-muted); font-size: 13px;
}
.bft-why-media--photo { padding: 0; overflow: hidden; }
.bft-why-media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bft-why-body { margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: rgba(255,255,255,.74); }
.bft-whystats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.bft-whystat { border-left: 2px solid var(--bft-accent); padding-left: 16px; }
.bft-whystat .n { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.bft-whystat .l { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }

@media (max-width: 860px) {
  .bft-why { grid-template-columns: 1fr; }
  .bft-why-media { height: 220px; }
}

/* =========================================================
   LEARNING CENTRE — blog thumbnail tiles + arrow paging
   ========================================================= */
.bft-lc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; text-align: left; }
.bft-lc-head .bft-eyebrow { display: block; text-align: left; }
.bft-blog-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.bft-galarrow {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85);
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.bft-galarrow:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #fff; }
.bft-galarrow[disabled] { opacity: .35; cursor: default; }

.bft-blog-viewport { overflow: hidden; }
.bft-blog-track { display: flex; gap: 22px; transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* Each tile is exactly one-third of the row (3 across, 22px gap) */
.bft-blog-tile {
  flex: 0 0 calc((100% - 44px) / 3); max-width: calc((100% - 44px) / 3); min-width: 0;
  display: flex; flex-direction: column; color: var(--bft-text);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bft-blog-tile:hover { transform: translateY(-6px); border-color: rgba(226,23,102,.45); box-shadow: 0 30px 70px rgba(0,0,0,.5); color: var(--bft-text); }

/* Gradient header with the category pill sitting bottom-left */
.bft-blog-thumb {
  position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 14px;
  background: linear-gradient(135deg, rgba(226,23,102,.28), rgba(120,40,150,.24)); overflow: hidden;
}
.bft-blog-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bft-blog-tag {
  position: relative; z-index: 1; padding: 5px 11px; border-radius: 999px;
  background: rgba(0,0,0,.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff; text-transform: none;
}

.bft-blog-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
/* Title: 18px, max 2 lines */
.bft-blog-title {
  font-family: var(--bft-sans); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; margin: 0; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Excerpt: 14px muted, max 3 lines, fills to push footer down */
.bft-blog-excerpt {
  margin: 10px 0 0; color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Footer: Read article → (left, accent) + read time (right, muted) */
.bft-blog-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; }
.bft-blog-more { font-size: 13.5px; font-weight: 600; color: var(--bft-accent); }
.bft-blog-read { font-size: 12px; color: rgba(255,255,255,.45); }

@media (max-width: 900px) {
  .bft-blog-tile { flex-basis: calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }
}
@media (max-width: 600px) {
  .bft-blog-tile { flex-basis: 84%; max-width: 84%; }
  .bft-lc-head { flex-direction: row; align-items: center; }
}

/* =========================================================
   LEARNING CENTRE — guides, cases, FAQ, videos, events
   ========================================================= */
/* Divider line above each section (matches mockup) */
.bft-lc-sec { border-top: 1px solid rgba(255,255,255,.08); }
/* Learning Centre uses the mockup's tighter section rhythm */
.bft-lc-page .bft-section { padding: clamp(40px, 6vh, 72px) 0; }
.bft-lc-page .bft-section.bft-center { padding-top: clamp(50px, 7vh, 90px); padding-bottom: clamp(30px, 4vh, 48px); }
/* Larger section intro (e.g. the gated-resources subtitle) */
.bft-section-intro { margin: 14px 0 0; max-width: 62ch; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; color: rgba(255,255,255,.72); }
/* Gated guide cards */
.bft-guide { display: flex; flex-direction: column; }
.bft-guide-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bft-accent); }
.bft-guide-meta svg { flex: 0 0 auto; }
.bft-guide h3 { margin-top: 10px; }
.bft-guide-gate { margin-top: 18px; }
.bft-guide-row { display: flex; gap: 8px; }
.bft-guide-email { flex: 1; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: var(--bft-text); padding: 11px 14px; font-family: var(--bft-sans); font-size: 14px; }
.bft-guide-email:focus { outline: none; border-color: var(--bft-accent); }
.bft-guide-unlock { padding: 11px 20px; border-radius: 12px; }
.bft-guide-err { color: #ff8fae; font-size: 13px; margin: 10px 0 0; }
.bft-guide-note { color: rgba(255,255,255,.4); font-size: 11.5px; margin: 9px 0 0; }
.bft-guide-done { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bft-guide-ok { color: #7ee0b0; font-size: 14px; font-weight: 600; }
/* Single guide (the "Read now" article page) */
.bft-guide-wrap { max-width: 860px; }
.bft-guide-article { margin-top: 24px; color: var(--bft-text); font-size: 17px; line-height: 1.7; }
.bft-guide-article h2, .bft-guide-article h3 { margin: 1.4em 0 .4em; }
.bft-guide-article p { margin: 0 0 1em; color: var(--bft-text); }
.bft-guide-pdf { margin-top: 30px; }
.bft-guide-embed { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.bft-guide-embed iframe { display: block; width: 100%; height: 78vh; min-height: 520px; border: 0; }
.bft-guide-pdf .bft-cta { margin-top: 18px; }

/* Case study cards */
.bft-case-sector { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.bft-case h3 { margin-top: 12px; font-size: 20px; }
.bft-case-block { margin-top: 16px; }
.bft-case-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bft-accent); margin-bottom: 6px; }
.bft-case-block p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }
.bft-case-result { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); color: #fff; font-weight: 600; font-size: 14px; }

/* FAQ accordion */
.bft-faq { max-width: 860px; }
.bft-faq-item { border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.03); margin-bottom: 12px; overflow: hidden; }
.bft-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 17px; font-weight: 600; color: #fff; }
.bft-faq-item summary::-webkit-details-marker { display: none; }
.bft-faq-plus { flex: 0 0 auto; font-size: 22px; color: var(--bft-accent); transition: transform .2s ease; }
.bft-faq-item[open] .bft-faq-plus { transform: rotate(45deg); }
.bft-faq-item p { margin: 0; padding: 0 22px 20px; color: var(--bft-muted); font-size: 15px; line-height: 1.6; }

/* Explainer video cards */
.bft-videocard { display: block; padding: 0; color: var(--bft-text); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.bft-videocard:hover { transform: translateY(-4px); border-color: rgba(226,23,102,.45); box-shadow: 0 24px 60px rgba(0,0,0,.45); color: var(--bft-text); }
.bft-videobox { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(226,23,102,.26), rgba(120,40,150,.22)); }
.bft-videobox .bft-play { width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--bft-accent); display: flex; align-items: center; justify-content: center; }
.bft-videobox .bft-play .tri { display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 17px solid #fff; margin-left: 4px; }
.bft-video-len { position: absolute; bottom: 12px; right: 12px; padding: 4px 9px; border-radius: 6px; background: rgba(0,0,0,.5); font-size: 11.5px; font-weight: 600; color: #fff; }
.bft-videocard-title { padding: 20px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #fff; }

/* Events rows */
.bft-events { display: flex; flex-direction: column; gap: 14px; }
.bft-event { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.03); }
.bft-event-when { flex: 0 0 150px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bft-event-date { font-size: 13px; color: var(--bft-muted); }
.bft-event-main { flex: 1; }
.bft-event-main h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.bft-event-main p { margin: 4px 0 0; font-size: 14px; color: var(--bft-muted); }
.bft-event .bft-btn { flex: 0 0 auto; }

/* FAQ (Learning Centre) */
.bft-faq { padding: 26px; }
.bft-faq-q { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: #fff; }
.bft-faq-mark { flex: none; font-family: var(--bft-serif); font-size: 22px; line-height: 1; color: var(--bft-accent); }
.bft-faq-a { margin: 12px 0 0; padding-left: 34px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.7); }
@media (max-width: 640px) {
  .bft-event { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bft-event-when { flex-direction: row; align-items: center; }
}

/* Partner badge (Xero connected app) in the hero */
.bft-badges { margin: 4px 0 22px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.bft-badges img { height: 138px; width: auto; display: block; }
.bft-smallhero .bft-badges { justify-content: center; }
@media (max-width: 640px) { .bft-badges img { height: 110px; } .bft-badges { gap: 16px; } }