/* ===========================================================
   Marketing Asa home page
   Brand: Plus Jakarta Sans, white + near-black + ocean green #087F72,
   dashed-border cards. Recreated from the Framer site, redesigned
   with hand-built interactions. No emoji, no em dashes.
   =========================================================== */

:root {
  --black: #171717;
  --black-2: #212121;
  --orange: #008f7a;
  --orange-soft: #16aa91;
  --white: #fcfcfc;
  --pure-white: #ffffff;
  --white-2: #e6e6e6;
  --placeholder: #a6a6a6;
  --line: #e6e6e6;
  --ink-60: rgba(23, 23, 23, 0.62);
  --ink-45: rgba(23, 23, 23, 0.45);
  --shadow-sm: 0 2px 8px rgba(23, 23, 23, 0.05);
  --shadow-md: 0 18px 50px rgba(23, 23, 23, 0.10);
  --shadow-hot: 0 18px 40px rgba(0, 143, 122, 0.28);
  --radius: 20px;
  --radius-lg: 26px;
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  background: var(--white);
  color: var(--black);
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 600; font-size: 16px;
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  will-change: transform;
}
.btn-primary { background: var(--orange); color: var(--pure-white); box-shadow: var(--shadow-hot); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(0, 143, 122, 0.4); }
.btn-light { background: var(--pure-white); color: var(--black); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.25); }
.btn-lg { padding: 18px 38px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-soft));
  z-index: 200; transition: width 0.1s linear;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
}
.nav.scrolled {
  background: rgba(252, 252, 252, 0.8);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(23, 23, 23, 0.06);
}
.nav.scrolled .nav-inner { padding-top: 14px; padding-bottom: 14px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.04em; }
.brand-logo { height: 32px; width: auto; display: block; }

.nav-links { display: flex; gap: 30px; }
.nav-links a { font-weight: 600; font-size: 15px; color: var(--ink-60); position: relative; transition: color 0.2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--orange); transition: width 0.25s var(--ease);
}
.nav-links a:hover { color: var(--black); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-social {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-60);
  border: 1px solid var(--line); transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.nav-social:hover { color: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.nav-cta { padding: 11px 22px; font-size: 15px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--black); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column; gap: 4px; padding: 0 28px;
  max-height: 0; overflow: hidden; background: rgba(252, 252, 252, 0.98);
  backdrop-filter: blur(14px); transition: max-height 0.35s var(--ease), padding 0.35s var(--ease);
}
.mobile-menu.open { max-height: 420px; padding: 12px 28px 26px; box-shadow: var(--shadow-md); }
.mobile-menu a { padding: 14px 0; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 14px; }

/* ---------- layout ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 130px 28px; }
.section--tight { padding: 90px 28px; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-head--left { text-align: left; margin: 0; }
.kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange);
  padding: 7px 16px; border-radius: 999px; background: rgba(8, 127, 114, 0.09);
  margin-bottom: 20px;
}
.section-title { font-size: clamp(30px, 4.6vw, 48px); }
.section-lead { margin-top: 18px; font-size: 18px; color: var(--ink-60); }

/* ---------- generic card ---------- */
.card {
  background: var(--pure-white);
  border: 1px dashed var(--white-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ===========================================================
   HERO
   =========================================================== */
.hero { position: relative; padding: 170px 28px 60px; text-align: center; overflow: hidden; }
.hero-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px circle at var(--mx, 50%) var(--my, 28%), rgba(8, 127, 114, 0.12), transparent 60%),
    radial-gradient(1px 1px at 20% 30%, rgba(23,23,23,0.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 20%, rgba(23,23,23,0.14) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, rgba(23,23,23,0.12) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, rgba(23,23,23,0.12) 50%, transparent 51%);
  background-size: 100% 100%, 60px 60px, 80px 80px, 70px 70px, 90px 90px;
  transition: background-position 0.2s ease-out;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-60);
  background: var(--pure-white); border: 1px solid var(--line);
  padding: 8px 16px 8px 10px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.pill-avatars { display: inline-flex; }
.pill-avatars i {
  width: 22px; height: 22px; border-radius: 50%; margin-left: -8px;
  border: 2px solid var(--pure-white);
  background-size: cover; background-position: center; background-color: var(--white-2);
}
.pill-avatars i:first-child { margin-left: 0; }

.hero-title {
  font-size: clamp(34px, 6vw, 74px); letter-spacing: -0.045em; line-height: 1.06;
  margin: 28px auto 24px; max-width: 820px; position: relative; display: block; text-align: center;
}
.hero-title .hl-orange { display: block; color: var(--black); margin-top: 0.14em; }
.hero-title .hl-fill { color: var(--black); background: #1ac6a6; border-radius: 0.14em; padding: 0.015em 0.12em 0.065em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes cursorFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-6deg); } }

.hero-sub { font-size: clamp(16px, 2vw, 20px); color: var(--ink-60); max-width: 60ch; margin: 0 auto 44px; font-weight: 500; }

.vsl {
  position: relative; max-width: 880px; margin: 0 auto 36px;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  background: #000;
}
.vsl wistia-player { display: block; }

/* floating proof cards */
.float-card {
  position: absolute; z-index: 3; width: 270px; text-align: left;
  background: var(--pure-white); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow-md);
}
.float-card--left { top: 350px; left: 1.25vw; width: 205px; transform: rotate(-3deg); animation: bobA 6.5s var(--ease) infinite; }
.float-card--right { top: 250px; right: 1.25vw; width: 205px; transform: rotate(4deg); animation: bobB 7.5s var(--ease) infinite; }
@keyframes bobA { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-12px); } }
@keyframes bobB { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(10px); } }
.float-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.float-handle { font-weight: 700; font-size: 14px; }
.float-card blockquote { font-size: 14px; color: var(--ink-60); line-height: 1.5; }
.float-card::before {
  content: ""; position: absolute; top: 14px; right: 16px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}

/* trusted ticker */
.trusted { margin-top: 28px; }
.trusted-label { display: block; font-size: 15px; color: var(--ink-60); margin-bottom: 20px; font-weight: 700; }
.ticker { position: relative; max-width: 760px; margin: 0 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: ticker 26s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track img { height: 46px; width: auto; object-fit: contain; opacity: 0.68; filter: grayscale(1); transition: opacity 0.3s, filter 0.3s; }
.ticker-track img:hover { opacity: 0.9; filter: grayscale(0); }
.ticker-track img[src$="zentist-logo.svg"] { height: 39px; }
.ticker-track img[src$="stickit-logo.png"] { height: 37px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ===========================================================
   HOW IT WORKS
   =========================================================== */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { padding: 24px; position: relative; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.how-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step-no {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-size: 13px; font-weight: 700; color: var(--ink-60);
  background: var(--white); border: 1px dashed var(--white-2);
  padding: 4px 12px; border-radius: 10px;
}
.how-art {
  position: relative; height: 180px; border-radius: 15px; margin-bottom: 22px;
  background: var(--white); overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid rgba(23,23,23,0.04);
}
.how-card h3 { font-size: 20px; margin-bottom: 10px; }
.how-card p { font-size: 15px; color: var(--ink-60); }

/* art 1: mini dashboard bars */
.mini-dash { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 0 6px; position: relative; }
.mini-bar { width: 16px; height: var(--h); border-radius: 6px 6px 0 0; background: #dcdcdc; transition: height 0.6s var(--ease); }
.mini-bar--hot { background: linear-gradient(180deg, var(--orange), var(--orange-soft)); box-shadow: var(--shadow-hot); }
.mini-trend { position: absolute; left: 0; right: 0; bottom: 30%; height: 2px; background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 14px); opacity: 0.5; }

/* art 2 + 3: tags + cursor */
.art-tag { font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.art-tag--dark { background: var(--black-2); color: var(--pure-white); transform: translateY(-12px); }
.art-tag--white { background: var(--pure-white); border: 1px solid var(--line); color: var(--black); transform: translate(-26px, -14px); }
.art-tag--hot { background: var(--orange); color: var(--pure-white); transform: rotate(-14deg) translate(40px, 26px); box-shadow: var(--shadow-hot); position: absolute; }
.art-cursor { position: absolute; left: 38%; top: 58%; animation: cursorTap 2.6s ease-in-out infinite; }
.art-cursor--hot { left: 56%; top: 40%; }
@keyframes cursorTap { 0%,100% { transform: translate(0,0); } 45% { transform: translate(-8px,-6px); } 55% { transform: translate(-8px,-6px) scale(0.92); } }

/* ===========================================================
   STATS
   =========================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stat {
  text-align: center; padding: 48px 24px; border-radius: var(--radius);
  background: var(--pure-white); border: 1px dashed var(--white-2);
  position: relative; overflow: hidden;
}
.stat::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 60%; height: 3px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--orange), transparent); opacity: 0; transition: opacity 0.4s; }
.stat.counted::after { opacity: 1; }
.stat-num { display: block; font-size: clamp(42px, 6vw, 68px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; background: linear-gradient(135deg, var(--black), #4a4a4a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { display: block; margin-top: 14px; font-size: 16px; color: var(--ink-60); font-weight: 500; }

/* ===========================================================
   ROADMAP BENTO
   =========================================================== */
.bento { display: grid; grid-template-columns: 1fr 0.7fr; gap: 18px; }
.bento-card { padding: 30px; min-height: 230px; display: flex; flex-direction: column; gap: 16px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; }
.bento-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--orange); }
.bento-card--wide { grid-column: auto; }
.bento-card:nth-child(2) { grid-row: span 1; }
.bento-top { display: flex; flex-direction: column; gap: 14px; }
.bento-card h3 { font-size: 23px; }
.bento-card p { color: var(--ink-60); font-size: 15.5px; margin-top: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; font-weight: 600; color: var(--pure-white); background: var(--orange); border: 1px solid var(--orange); padding: 6px 13px; border-radius: 999px; box-shadow: 0 4px 12px rgba(8, 127, 114, 0.22); }

/* ===========================================================
   COMPARISON
   =========================================================== */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; padding: 38px; align-items: stretch; }
.compare-col { padding: 8px 30px; }
.compare-name { font-size: 22px; margin-bottom: 24px; }
.compare-col--them .compare-name { color: var(--ink-45); }
.compare-col--us .compare-name { color: var(--orange); }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.compare-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; font-weight: 500; }
.compare-col--them li { color: var(--ink-60); }
.compare-divider { position: relative; width: 1px; background: repeating-linear-gradient(180deg, var(--white-2) 0 6px, transparent 6px 12px); }
.compare-divider span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 13px; font-weight: 700; color: var(--ink-45);
  background: var(--pure-white); border: 1px dashed var(--white-2);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
}

/* hand-drawn marks */
.mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; position: relative; margin-top: 1px; }
.mark--check { background: rgba(8, 127, 114, 0.12); }
.mark--check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid var(--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mark--x { background: rgba(23, 23, 23, 0.06); }
.mark--x::before, .mark--x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: var(--ink-45); border-radius: 2px; }
.mark--x::before { transform: translate(-50%, -50%) rotate(45deg); }
.mark--x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ===========================================================
   TESTIMONIALS  (sticky stacking)
   =========================================================== */
.reviews-wrap { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }
.reviews-stack { display: flex; flex-direction: column; gap: 22px; }
.review-card { padding: 28px 30px; position: sticky; top: 110px; }
.reviews-stack .review-card:nth-child(1) { top: 110px; }
.reviews-stack .review-card:nth-child(2) { top: 124px; }
.reviews-stack .review-card:nth-child(3) { top: 138px; }
.reviews-stack .review-card:nth-child(4) { top: 152px; }
.reviews-stack .review-card:nth-child(5) { top: 166px; }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--pure-white); background: linear-gradient(135deg, var(--orange), var(--orange-soft)); }
.review-handle { font-weight: 700; font-size: 16px; }
.review-card p { color: var(--ink-60); font-size: 15.5px; }

.review-cta { position: sticky; top: 110px; }
.book-card { padding: 32px; text-align: left; }
.book-card h3 { font-size: 26px; margin-bottom: 12px; }
.book-lead { color: var(--ink-60); margin-bottom: 22px; }
.book-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.book-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }

/* ===========================================================
   FAQ
   =========================================================== */
.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--pure-white); border: 1px dashed var(--white-2); border-radius: 16px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.faq-item[open] { border-color: rgba(8, 127, 114, 0.4); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 24px;
  font-weight: 700; font-size: 17px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--orange); border-radius: 2px; transition: transform 0.3s var(--ease); }
.faq-toggle::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-toggle::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-body { padding: 0 24px 24px; }
.faq-body p { color: var(--ink-60); font-size: 15.5px; }

/* ===========================================================
   FINAL CTA
   =========================================================== */
.final-cta { padding: 40px 28px 110px; }
.final-cta-card {
  position: relative; max-width: 1100px; margin: 0 auto; overflow: hidden;
  background: var(--black); color: var(--pure-white);
  border-radius: 32px; padding: 80px 40px; text-align: center;
}
.final-cta-glow { position: absolute; inset: 0; background: radial-gradient(600px circle at 50% -10%, rgba(8, 127, 114, 0.45), transparent 60%); pointer-events: none; }
.final-cta-card h2 { position: relative; font-size: clamp(28px, 4.4vw, 46px); max-width: 18ch; margin: 0 auto 18px; }
.final-cta-card p { position: relative; color: rgba(255, 255, 255, 0.72); font-size: 18px; max-width: 52ch; margin: 0 auto 36px; }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer { background: var(--pure-white); border-top: 1px dashed var(--white-2); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 64px 28px 40px; display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; }
.footer-brand p { color: var(--ink-60); margin-top: 16px; max-width: 34ch; font-size: 15px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-45); margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; color: var(--ink-60); font-weight: 500; transition: color 0.2s; }
.footer-col a:hover { color: var(--orange); }
.footer-cta { font-weight: 700 !important; color: var(--orange) !important; }
.footer-bottom { max-width: var(--maxw); margin: 0 auto; padding: 22px 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-45); }

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1080px) {
  .float-card { display: none; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .reviews-wrap { grid-template-columns: 1fr; }
  .review-cta { position: relative; top: 0; order: -1; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-social { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: flex; }
  .nav-cta { display: none; }

  .how-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .compare-divider { width: 100%; height: 1px; background: repeating-linear-gradient(90deg, var(--white-2) 0 6px, transparent 6px 12px); }
  .compare-divider span { position: static; margin: 0 auto; }
  .section { padding: 90px 22px; }
  .hero { padding: 140px 22px 40px; }
  .reviews-stack .review-card { position: relative; top: 0 !important; }
}

/* ===========================================================
   ADDED: avatars, hero orbit, scanning process art, host block
   =========================================================== */

/* avatars: photo with monogram fallback (img removed on error) */
.avatar { position: relative; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--orange), var(--orange-soft)); display: grid; place-items: center; }
.avatar-mono { color: var(--pure-white); font-weight: 700; font-size: 15px; line-height: 1; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 46px; height: 46px; }
.avatar--lg .avatar-mono { font-size: 18px; }
.avatar--xl { width: 58px; height: 58px; }
.avatar--xl .avatar-mono { font-size: 23px; }

/* booking host (Shoh, on the right of the testimonials) */
.book-host { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.book-host-meta { display: flex; flex-direction: column; }
.book-host-meta strong { font-size: 16px; }
.book-host-meta span { font-size: 13px; color: var(--ink-60); }

/* hero orbit: ambient agents-at-work accent */
.hero-orbit { position: absolute; z-index: 1; left: 5vw; top: 44%; width: 124px; height: 124px; pointer-events: none; }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 22px rgba(8, 127, 114, 0.85); }
.orbit-pulse { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--orange); animation: orbitPulse 2.8s ease-out infinite; }
@keyframes orbitPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(5); opacity: 0; } }
.orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(8, 127, 114, 0.4); animation: spin 9s linear infinite; }
.orbit-ring--2 { inset: 26px; border-color: rgba(23, 23, 23, 0.12); animation-duration: 5.5s; animation-direction: reverse; }
.orbit-ring i { position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px rgba(8, 127, 114, 0.7); }
.orbit-ring--2 i { width: 8px; height: 8px; background: var(--black-2); box-shadow: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* scanning process art (shared beam + grid) */
.scan { position: relative; overflow: hidden; }
.scan-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(23, 23, 23, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 23, 23, 0.05) 1px, transparent 1px); background-size: 22px 22px; }
.scan-beam { position: absolute; left: 0; right: 0; top: 0; height: 54px; background: linear-gradient(180deg, transparent, rgba(8, 127, 114, 0.32), rgba(8, 127, 114, 0.6), transparent); filter: blur(2px); animation: beam 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes beam { 0% { transform: translateY(-56px); } 100% { transform: translateY(196px); } }

/* card 1: data ingestion bars */
.scan-bars { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 9px; height: 100px; }
.scan-bars i { width: 14px; height: var(--h); border-radius: 5px 5px 0 0; background: #d8d8d8; animation: barGlow 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes barGlow { 0%, 100% { background: #d8d8d8; box-shadow: none; } 45%, 55% { background: linear-gradient(180deg, var(--orange), var(--orange-soft)); box-shadow: var(--shadow-hot); } }

/* card 2: A/B split test */
.ab { position: relative; z-index: 2; display: flex; gap: 16px; }
.ab-page { position: relative; width: 66px; height: 92px; background: var(--pure-white); border: 1px solid var(--line); border-radius: 8px; padding: 11px 9px; display: flex; flex-direction: column; gap: 7px; }
.ab-page > span { height: 6px; border-radius: 3px; background: #e3e3e3; }
.ab-page > span:nth-of-type(2) { width: 78%; }
.ab-page .ab-cta { margin-top: auto; height: 13px; border-radius: 4px; background: #d0d0d0; }
.ab-tag { position: absolute; top: -9px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--black-2); color: var(--pure-white); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ab-win { border-color: var(--orange); animation: winPulse 3s ease-in-out infinite; }
.ab-win .ab-tag { background: var(--orange); }
.ab-win .ab-cta { background: var(--orange); }
@keyframes winPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(8, 127, 114, 0); } 50% { box-shadow: 0 0 0 5px rgba(8, 127, 114, 0.16); } }

/* card 3: radar qualify */
.radar { position: relative; z-index: 2; width: 122px; height: 122px; border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle, rgba(8, 127, 114, 0.06), transparent 70%); }
.radar-ring { position: absolute; inset: 26px; border-radius: 50%; border: 1px dashed rgba(23, 23, 23, 0.12); }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(8, 127, 114, 0.38), transparent 70deg); animation: spin 2.4s linear infinite; }
.radar-core { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(8, 127, 114, 0.85); }
.radar-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); opacity: 0; }
.radar-blip.b1 { top: 30%; left: 62%; animation: blip 2.4s ease-in-out infinite; }
.radar-blip.b2 { top: 60%; left: 36%; animation: blip 2.4s ease-in-out 0.9s infinite; }
@keyframes blip { 0%, 40% { opacity: 0; transform: scale(0.4); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.4); } }
.scan-pill { position: absolute; z-index: 3; bottom: 16px; right: 14px; background: var(--orange); color: var(--pure-white); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-hot); animation: pillIn 3s ease-in-out infinite; }
@keyframes pillIn { 0%, 50% { opacity: 0; transform: translateY(8px); } 65%, 100% { opacity: 1; transform: translateY(0); } }

/* hide ambient hero decoration on smaller screens */
@media (max-width: 1080px) {
  .hero-orbit { display: none; }
}
/* the floating quote cards only show when the viewport is wide enough to clear the wider headline */
@media (max-width: 1279px) {
  .float-card { display: none; }
}
/* keep key states visible when motion is reduced (global rule kills animations) */
@media (prefers-reduced-motion: reduce) {
  .radar-blip, .scan-pill { opacity: 1 !important; }
}

/* Scalebound adaptations. The Marketing ASA type and card language remains. */
:root { --orange:#008f7a; --orange-soft:#16aa91; --shadow-hot:0 15px 35px rgba(0,143,122,.22); }
.skip-link { position:absolute; top:-80px; left:16px; z-index:300; background:#171717; color:#fff; padding:10px 15px; border-radius:8px; }
.skip-link:focus { top:10px; }
:focus-visible { outline:3px solid #087f72; outline-offset:4px; }
.sb-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:var(--orange); color:#fff; font-size:20px; font-weight:800; line-height:1; }
.brand-period { color:var(--orange); }
.btn svg { flex:none; }
.btn-outline { color:var(--black); border-color:#d9e0dd; background:#fff; }
.btn-outline:hover { transform:translateY(-2px); border-color:var(--orange); box-shadow:var(--shadow-sm); }
.hero { padding-bottom:77px; }
.hero-title { max-width:960px; font-size:clamp(38px,5.8vw,70px); }
.hero-title .hl-orange { color:var(--orange); }
.hero-sub { max-width:680px; margin-bottom:29px; }
.hero-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.hero-under { display:flex; justify-content:center; align-items:center; gap:22px; margin:40px auto 0; color:var(--ink-60); font-size:13px; font-weight:500; }
.hero-under b { color:var(--black); font-size:15px; margin-right:4px; }
.under-line { width:1px; height:20px; background:var(--line); }
.float-card { width:195px; }
.float-card--left { left:max(10px,calc((100vw - 1390px)/2)); top:355px; }
.float-card--right { right:max(10px,calc((100vw - 1390px)/2)); top:285px; }
.vsl-section { max-width:1000px; padding:54px 28px 120px; margin:auto; }
.vsl-section .section-head { margin-bottom:40px; }
.vsl-stage { border:1px solid #dfe5e2; padding:13px; border-radius:25px; background:#fff; box-shadow:0 30px 75px rgba(15,35,30,.09); }
.vsl-screen { position:relative; width:100%; aspect-ratio:16/9; background:#14211e; border-radius:15px; overflow:hidden; }
.vsl-screen iframe { width:100%; height:100%; border:0; display:block; }
.vsl-cover { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#14211e; cursor:pointer; }
.vsl-cover img { width:100%; height:100%; object-fit:cover; }
.vsl-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; padding-left:5px; width:72px; height:72px; border-radius:50%; color:var(--orange); background:#fff; font-size:25px; box-shadow:0 12px 35px rgba(0,0,0,.2); transition:transform .25s var(--ease); }
.vsl-cover:hover .vsl-play { transform:translate(-50%,-50%) scale(1.08); }
.vsl-foot { display:flex; justify-content:space-between; gap:14px; padding:13px 10px 4px; color:var(--ink-45); font-size:13px; }
.vsl-foot a { color:#066c61; font-weight:700; }
.journey { max-width:1200px; margin:auto; padding:100px 28px 130px; border-top:1px solid var(--line); }
.journey-heading { max-width:650px; margin:0 auto 65px; text-align:center; }
.journey-heading .section-lead { max-width:560px; margin-left:auto; margin-right:auto; }
.journey-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8%; align-items:start; }
.journey-steps { padding-bottom:40px; }
.journey-step { min-height:390px; padding:55px 20px 40px 0; border-top:1px solid var(--line); opacity:.45; transform:translateY(18px); transition:opacity .4s,transform .4s; }
.journey-step.active { opacity:1; transform:none; }
.journey-step:last-child { min-height:310px; }
.journey-no { display:inline-block; color:var(--orange); font-size:13px; font-weight:800; letter-spacing:.09em; margin-bottom:24px; }
.journey-step h3 { font-size:clamp(26px,3vw,38px); max-width:13ch; margin-bottom:18px; }
.journey-step p { font-size:17px; color:var(--ink-60); max-width:43ch; }
.journey-stage { position:sticky; top:118px; height:520px; display:grid; align-items:center; overflow:hidden; border-radius:25px; background:#f6f9f7; border:1px dashed #d5e0db; box-shadow:var(--shadow-sm); }
.journey-progress { position:absolute; top:0; left:0; height:4px; width:100%; background:#e0e9e4; z-index:4; }
.journey-progress i { display:block; width:25%; height:100%; background:var(--orange); transition:width .5s var(--ease); }
.journey-card { position:absolute; top:57px; left:8%; right:8%; bottom:65px; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(30px) scale(.96); pointer-events:none; transition:opacity .45s var(--ease),transform .45s var(--ease); }
.journey-card.active { opacity:1; transform:none; pointer-events:auto; }
.stage-label { display:block; font-size:12px; letter-spacing:.12em; font-weight:800; color:var(--orange); margin-bottom:30px; }
.search-pill { background:#fff; padding:18px 20px; border:1px solid #d6dfdb; border-radius:30px; font-weight:600; color:#394541; display:flex; justify-content:space-between; box-shadow:var(--shadow-sm); }
.search-pill span { color:var(--orange); font-size:23px; line-height:20px; }
.stage-result { background:#fff; border:1px solid #e4e8e6; border-radius:15px; padding:25px; margin-top:20px; box-shadow:var(--shadow-sm); }
.stage-result small { display:block; color:var(--orange); margin-bottom:8px; }
.stage-result strong { display:block; color:#183f36; font-size:19px; margin-bottom:8px; }
.stage-result p,.mock-browser p,.meeting-visual p { color:var(--ink-60); font-size:14px; }
.mock-browser { background:#fff; border:1px solid #dce5e0; border-radius:15px; padding:24px; box-shadow:0 20px 45px rgba(18,50,39,.08); }
.mock-dots { display:flex; gap:6px; margin-bottom:35px; }
.mock-dots i { width:7px; height:7px; border-radius:50%; background:#cad5cf; }
.mock-browser b { display:block; font-size:27px; line-height:1.15; max-width:14ch; }
.mock-browser p { margin:13px 0 20px; }
.mock-browser>span { display:inline-block; padding:9px 15px; background:var(--orange); color:#fff; border-radius:30px; font-size:12px; font-weight:700; }
.fit-visual { background:#fff; border:1px solid #dce5e0; border-radius:15px; padding:25px; box-shadow:var(--shadow-sm); }
.fit-visual p { font-size:13px; color:var(--ink-60); font-weight:700; margin:0 0 10px; }
.fit-visual p:not(:first-child) { margin-top:22px; }
.fit-visual span { display:block; padding:12px 15px; border:1px solid #e2e8e4; border-radius:9px; margin-top:8px; font-size:14px; }
.fit-visual span:first-of-type,.fit-visual span:last-child { border-color:var(--orange); background:#f1f8f4; }
.meeting-visual { display:flex; align-items:center; gap:20px; background:#fff; border:1px solid #dce5e0; border-radius:15px; padding:25px; box-shadow:var(--shadow-sm); }
.meeting-date { width:78px; min-width:78px; display:grid; place-items:center; border:1px solid #dce5e0; border-radius:10px; color:var(--orange); font-size:11px; font-weight:800; padding:8px; }
.meeting-date b { display:block; color:var(--black); font-size:31px; line-height:1; }
.meeting-visual strong { font-size:17px; }
.meeting-visual p { margin-top:5px; }
.stage-footer { position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--ink-45); font-size:12px; font-weight:700; }
.stage-footer span { color:var(--orange); padding:0 7px; }
.stats-proof { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; margin:auto; }
.stats-proof .stat { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:30px; border:1px dashed var(--white-2); border-radius:20px; transition:transform .25s var(--ease),border-color .25s; }
.stats-proof .stat:hover { transform:translateY(-5px); border-color:var(--orange); }
.stats-proof .stat-num { font-size:clamp(48px,6vw,76px); }
.stat-action { margin-top:18px; color:var(--orange); font-size:14px; font-weight:700; }
.compare-note { text-align:center; color:var(--ink-45); font-size:13px; margin-top:18px; }
.case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.case-card { min-height:425px; display:flex; flex-direction:column; align-items:flex-start; padding:30px; transition:transform .3s var(--ease),box-shadow .3s; }
.case-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.case-eyebrow { color:var(--orange); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; min-height:34px; }
.case-logo { height:33px; width:auto; object-fit:contain; object-position:left; max-width:160px; min-height:34px; }
.case-number { font-size:clamp(40px,5vw,67px); letter-spacing:-.06em; line-height:1; margin:36px 0 18px; }
.case-number small { font-size:.45em; color:var(--orange); }
.case-number--sql { font-size:clamp(45px,5vw,64px); }
.case-number--roas { font-size:clamp(30px,3.6vw,48px); white-space:nowrap; letter-spacing:-.02em; }
.case-card h3 { font-size:25px; margin-bottom:12px; }
.case-card p { color:var(--ink-60); font-size:15px; }
.case-link { display:inline-flex; align-items:center; gap:8px; color:var(--orange); font-size:14px; font-weight:700; margin-top:auto; padding-top:20px; }
.book-card .btn svg { width:17px; }
.mobile-book { display:none; }
.case-hero { padding:170px 28px 95px; background:radial-gradient(600px circle at 80% 15%,rgba(8,127,114,.07),transparent 60%),#fcfcfc; border-bottom:1px solid var(--line); }
.case-hero-inner { max-width:1150px; margin:auto; display:flex; align-items:end; justify-content:space-between; gap:50px; }
.case-intro { max-width:840px; }
.case-hero h1 { font-size:clamp(40px,6vw,75px); letter-spacing:-.055em; line-height:1.04; margin-bottom:22px; }
.case-hero p { color:var(--ink-60); font-size:19px; max-width:620px; }
.case-intro-meta { color:var(--orange); font-size:13px; font-weight:700; margin-top:28px; }
.story-logo { width:155px; max-height:70px; object-fit:contain; margin-bottom:20px; }
.story-wrap { max-width:1150px; margin:auto; padding:85px 28px 115px; display:grid; grid-template-columns:210px minmax(0,1fr); gap:85px; }
.story-side { position:sticky; top:120px; align-self:start; display:flex; flex-direction:column; gap:15px; }
.story-side>span { text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--ink-45); font-weight:800; margin-bottom:8px; }
.story-side>a:not(.btn) { color:var(--ink-60); font-size:14px; font-weight:600; }
.story-side>a:not(.btn):hover { color:var(--orange); }
.story-side .btn { margin-top:15px; font-size:13px; padding:11px 15px; }
.story-section { display:grid; grid-template-columns:60px 1fr; gap:25px; padding:0 0 65px; margin:0 0 65px; border-bottom:1px solid var(--line); }
.story-section:last-child { border:0; margin:0; padding:0; }
.story-index { color:var(--orange); font-size:13px; font-weight:800; padding-top:8px; }
.story-section h2 { font-size:clamp(27px,3vw,40px); margin-bottom:22px; }
.story-section p { color:var(--ink-60); font-size:17px; margin-bottom:17px; }
.story-result { display:flex; align-items:center; gap:25px; padding:25px; background:#f0f7f3; border:1px solid #d6e9dd; border-radius:15px; margin-bottom:25px; }
.story-result strong { white-space:nowrap; color:var(--orange); font-size:clamp(27px,3vw,42px); letter-spacing:-.06em; }
.story-result span { font-size:14px; color:#3b5047; }
.story-list { display:grid; gap:12px; margin-bottom:25px; }
.story-list article { display:grid; grid-template-columns:37px 1fr; gap:15px; padding:21px; background:#fff; border:1px dashed var(--white-2); border-radius:14px; }
.story-list b { color:var(--orange); font-size:13px; }
.story-list h3 { font-size:19px; margin-bottom:8px; }
.story-list p { margin:0; font-size:15px; }
.case-index-grid { padding-top:85px; }
.book-page { max-width:1180px; margin:auto; padding:170px 28px 110px; display:grid; grid-template-columns:.85fr 1.15fr; gap:85px; }
.book-page h1 { font-size:clamp(40px,5vw,68px); margin-bottom:23px; letter-spacing:-.05em; }
.book-page p { font-size:18px; color:var(--ink-60); }
.book-page ul { margin:25px 0 0 22px; color:var(--ink-60); }
.book-page li { margin-bottom:12px; }
.book-frame { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); }
.book-frame iframe { width:100%; min-height:735px; display:block; border:0; }
.book-frame p { padding:0 20px 20px; font-size:13px; }
.book-frame a,.legal-page a { color:var(--orange); font-weight:700; }
.legal-page { max-width:850px; margin:auto; padding:170px 28px 130px; min-height:65vh; }
.legal-page h1 { font-size:clamp(40px,5vw,68px); margin-bottom:22px; }
.legal-page h2 { font-size:27px; margin:35px 0 12px; }
.legal-page p { color:var(--ink-60); margin-bottom:17px; }
@media(max-width:1100px){.float-card{display:none}.hero-title{max-width:850px}}
@media(max-width:860px){.journey-grid{gap:30px}.journey-stage{height:440px}.journey-step{min-height:330px}.story-wrap{gap:35px;grid-template-columns:160px minmax(0,1fr)}.book-page{gap:35px}}
@media(max-width:680px){.hero{padding:132px 20px 50px}.hero-title{font-size:clamp(34px,9.1vw,47px);margin-top:23px}.hero-sub{font-size:16px}.hero-actions .btn{width:100%}.hero-under{display:block;font-size:12px;margin-top:27px}.hero-under span{display:block;margin:5px 0}.under-line{display:none}.vsl-section{padding:55px 16px 85px}.vsl-section .section-head{padding:0 8px}.vsl-stage{padding:7px;border-radius:17px}.vsl-screen{border-radius:11px}.vsl-play{width:52px;height:52px;font-size:17px}.vsl-foot{font-size:11px}.journey{padding:80px 20px 95px}.journey-heading{margin-bottom:35px}.journey-grid{display:flex;flex-direction:column}.journey-stage{order:0;position:sticky;top:71px;z-index:4;width:100%;height:340px}.journey-steps{order:1;width:100%}.journey-step{min-height:245px;padding:35px 0 20px}.journey-step:last-child{min-height:245px}.journey-step h3{font-size:26px;max-width:18ch}.journey-step p{font-size:15px}.journey-card{top:30px;bottom:47px}.stage-label{margin-bottom:15px}.search-pill{font-size:12px;padding:12px}.stage-result{padding:14px;margin-top:10px}.stage-result strong{font-size:15px}.stage-result p{font-size:11px}.mock-browser{padding:15px}.mock-dots{margin-bottom:15px}.mock-browser b{font-size:20px}.mock-browser p{font-size:11px;margin:8px 0 11px}.fit-visual{padding:14px}.fit-visual p{font-size:10px}.fit-visual span{padding:7px 10px;font-size:11px}.fit-visual p:not(:first-child){margin-top:10px}.meeting-visual{padding:14px;gap:10px}.meeting-date{width:55px;min-width:55px}.meeting-date b{font-size:21px}.meeting-visual strong{font-size:13px}.meeting-visual p{font-size:10px}.stage-footer{font-size:9px;bottom:17px}.stage-footer span{padding:0 2px}.stats-proof,.case-grid{grid-template-columns:1fr}.stats-proof .stat{padding:25px}.case-card{min-height:360px}.case-hero{padding:135px 20px 70px}.case-hero-inner{display:block}.case-hero h1{font-size:clamp(35px,9vw,50px)}.case-hero p{font-size:16px}.story-logo{margin:32px 0 0}.story-wrap{display:block;padding:65px 20px 90px}.story-side{display:none}.story-section{grid-template-columns:1fr;gap:8px;padding-bottom:45px;margin-bottom:45px}.story-section p{font-size:16px}.story-result{display:block}.story-result strong{display:block;margin-bottom:8px}.book-page{display:block;padding:135px 20px 80px}.book-page h1{font-size:42px}.book-frame{margin-top:42px}.legal-page{padding:135px 20px 90px}.mobile-book{display:block;position:fixed;z-index:85;bottom:0;left:0;right:0;background:rgba(252,252,252,.96);backdrop-filter:blur(12px);padding:9px 14px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}.mobile-book .btn{width:100%;padding:11px}.mobile-book .btn svg{width:15px}.footer{padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){.journey-step,.journey-card,.journey-progress i{transition:none}.journey-step{opacity:1;transform:none}}
@media(min-width:681px){.hero{padding-top:128px}.hero-title{font-size:clamp(42px,4.55vw,58px);max-width:880px;margin-top:23px;margin-bottom:17px}.hero-sub{margin-bottom:26px}.hero-under{margin-top:30px}}
@media(max-width:1440px){.float-card{display:none}}
/* The video begins in the first viewport, directly below the offer. */
.hero .vsl-stage { max-width:1030px; margin:31px auto 0; text-align:left; }
.hero .hero-actions { margin-top:29px; }
.hero .trusted { margin-top:32px; }
.hero .hero-under { margin-top:22px; }
.face-cover { overflow:hidden; background:linear-gradient(110deg,#162c27,#0c4940 65%,#8a8b77); text-align:left; }
.face-cover img { position:absolute; right:0; top:-95px; height:calc(100% + 190px); width:48%; object-fit:cover; object-position:center center; mask-image:linear-gradient(90deg,transparent 0%,#000 18%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%); }
.face-cover-copy { position:absolute; z-index:1; left:8%; top:50%; transform:translateY(-50%); color:#fff; }
.face-cover-copy small { display:block; font-size:13px; font-weight:800; letter-spacing:.14em; color:#8bd0ba; margin-bottom:20px; }
.face-cover-copy strong { display:block; font-size:clamp(28px,4vw,53px); line-height:1.1; letter-spacing:-.05em; }
.face-cover-copy em { display:block; font-style:normal; margin-top:22px; color:#d8e7e1; font-size:15px; font-weight:600; }
.face-cover .vsl-play { left:51%; top:40%; }
@media(min-width:681px){.hero{padding-top:107px}.hero-title{font-size:clamp(40px,4.1vw,53px);max-width:900px;margin-top:18px;margin-bottom:14px}.hero-sub{font-size:17px;margin-bottom:0;max-width:720px}.hero .vsl-stage{margin-top:29px}}
@media(max-width:680px){.hero{padding-top:108px}.hero .vsl-stage{margin-top:22px}.face-cover-copy{left:6%}.face-cover-copy small{font-size:8px;margin-bottom:7px}.face-cover-copy strong{font-size:17px}.face-cover-copy em{font-size:9px;margin-top:8px}.face-cover img{width:53%}.face-cover .vsl-play{left:50%;width:46px;height:46px;font-size:15px}}
@media(max-width:680px){.footer-inner{grid-template-columns:minmax(0,1fr)}.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 15px}.footer-col{min-width:0}}

/* Slimmer icon beside the original, unchanged wordmark. */
.brand-lockup { display:flex; align-items:center; gap:2px; width:190px; height:64px; overflow:hidden; flex:0 0 auto; }
.brand-symbol { display:block; width:38px; height:38px; object-fit:contain; flex:0 0 auto; transform:translateY(3px); }
.brand-wordmark { display:block; width:150px; height:64px; flex:0 0 auto; background-image:url('/assets/scalebound-logo.png?v=2'); background-repeat:no-repeat; background-size:190px auto; background-position:-58px -1px; }
.nav-inner { padding-top:12px; padding-bottom:12px; }
.nav.scrolled .nav-inner { padding-top:8px; padding-bottom:8px; }
@media(max-width:680px){.brand-lockup{width:155px;height:52px;gap:0}.brand-symbol{width:32px;height:32px;transform:translateY(2px)}.brand-wordmark{width:123px;height:52px;background-size:155px auto;background-position:-47px -1px}.nav-inner{padding-top:10px;padding-bottom:10px}}
@media(max-width:680px){.hero-under .under-line{display:none}}

/* Each process example stays beside its own explanation as the page scrolls. */
.journey-pairs { display:grid; gap:24px; }
.journey-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8%; align-items:center; padding:24px 0 52px; border-bottom:1px solid var(--line); }
.journey-pair:last-child { border-bottom:0; }
.journey-pair .journey-step { display:flex; flex-direction:column; justify-content:center; min-height:390px; padding:42px; border:1px solid #245448; border-radius:25px; background:#17332c; box-shadow:0 18px 45px rgba(10,46,37,.15); opacity:1; transform:none; }
.journey-pair .journey-no { color:#40dbbc; }
.journey-pair .journey-step h3 { color:#fff; }
.journey-pair .journey-step p { color:#d5e6df; }
.journey-pair .journey-stage { position:relative; top:auto; height:390px; }
.journey-pair .journey-card { top:42px; bottom:42px; opacity:1; transform:none; pointer-events:auto; }
@media(max-width:860px){.journey-pair{gap:28px}.journey-pair .journey-step{min-height:340px;padding:32px}.journey-pair .journey-stage{height:340px}}
@media(max-width:680px){.journey-pair{grid-template-columns:1fr;gap:20px;padding:34px 0}.journey-pair .journey-step{order:0;min-height:0;padding:30px}.journey-pair .journey-stage{order:1;position:relative;top:auto;height:300px}.journey-pair .journey-card{top:25px;bottom:25px}}

/* Reviews follow the case study cards in one continuous section. */
.case-reviews { margin-top:32px; scroll-margin-top:100px; }
.case-reviews-note { margin:0 0 20px; color:var(--ink-60); font-size:14px; }
.case-reviews .reviews-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.case-reviews .review-card { position:relative; top:auto!important; }
.case-reviews .review-card:last-child { grid-column:1 / -1; }
@media(max-width:680px){.case-reviews .reviews-stack{grid-template-columns:1fr}.case-reviews .review-card:last-child{grid-column:auto}}

/* Process visuals use actual client page copy and familiar product interfaces. */
.journey-pair .journey-step { min-height:450px; }
.journey-pair .journey-stage { height:450px; background:#eef3f0; border:1px solid #cad9d3; box-shadow:0 20px 50px rgba(13,47,38,.1); }
.real-ui { width:100%; height:100%; min-width:0; display:flex; flex-direction:column; padding:17px; text-align:left; overflow:hidden; }
.ui-browser-bar { height:30px; min-height:30px; display:flex; align-items:center; gap:12px; padding:0 12px; background:#f5f7f6; border-bottom:1px solid #e3e8e6; color:#61716b; font-size:10px; font-weight:600; white-space:nowrap; overflow:hidden; }
.ui-dots { display:flex; gap:4px; flex:none; }
.ui-dots i { display:block; width:6px; height:6px; border-radius:50%; background:#b9c5c0; }
.ui-dots i:first-child { background:#e39d98; }
.ui-dots i:nth-child(2) { background:#ddc68c; }
.ui-dots i:nth-child(3) { background:#8abfa5; }
.ui-provenance { margin-top:auto; padding-top:8px; color:#586963; font-size:10px; line-height:1.25; font-weight:650; letter-spacing:.01em; }

.search-ui { background:#fff; padding:17px 18px; }
.search-ui .ui-browser-bar { border:1px solid #e3e8e6; border-radius:9px 9px 0 0; }
.serp-head { display:flex; align-items:center; gap:17px; padding:15px 12px 12px; border-left:1px solid #e3e8e6; border-right:1px solid #e3e8e6; }
.google-wordmark { display:flex; align-items:center; font-size:20px; line-height:1; font-weight:800; letter-spacing:-.07em; flex:none; }
.google-wordmark span:nth-child(1),.google-wordmark span:nth-child(4) { color:#4285f4; }
.google-wordmark span:nth-child(2),.google-wordmark span:nth-child(6) { color:#ea4335; }
.google-wordmark span:nth-child(3) { color:#fbbc05; }
.google-wordmark span:nth-child(5) { color:#34a853; }
.serp-query { min-width:0; flex:1; display:flex; justify-content:space-between; align-items:center; gap:9px; padding:9px 12px; border:1px solid #e1e5e4; border-radius:999px; box-shadow:0 2px 9px rgba(0,0,0,.07); font-size:12px; color:#303a36; white-space:nowrap; overflow:hidden; }
.serp-query svg { width:15px; height:15px; flex:none; fill:none; stroke:#4285f4; stroke-width:2; stroke-linecap:round; }
.serp-nav { display:flex; gap:22px; padding:0 13px 10px; border-left:1px solid #e3e8e6; border-right:1px solid #e3e8e6; border-bottom:1px solid #e3e8e6; color:#68736e; font-size:10px; }
.serp-nav b { color:#1a73e8; border-bottom:2px solid #1a73e8; padding-bottom:7px; }
.serp-result { padding:18px 19px 21px; border:1px solid #e3e8e6; border-top:0; border-radius:0 0 9px 9px; min-height:193px; }
.serp-result-top { display:flex; align-items:center; gap:9px; margin-bottom:10px; color:#222; font-size:12px; }
.serp-brand-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#f05b78; background:#fff1f4; font-weight:800; font-size:18px; }
.serp-result-top b,.serp-result-top small { display:block; line-height:1.15; }
.serp-result-top small { margin-top:3px; color:#5d6c64; font-size:10px; }
.serp-sponsored { color:#4f5b55; font-size:10px; font-weight:650; }
.serp-result h4 { margin:5px 0 7px; color:#1a0dab; font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.serp-result p { color:#424b46; font-size:11px; line-height:1.55; }

.pages-ui { background:#edf2ef; gap:8px; }
.page-tabs { display:flex; align-items:center; gap:6px; }
.page-tab { appearance:none; border:1px solid #d2ddd7; border-radius:999px; padding:7px 12px; color:#52635b; background:#fff; font:700 11px "Plus Jakarta Sans",sans-serif; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.page-tab[aria-selected="true"] { background:#17332c; border-color:#17332c; color:#fff; }
.page-tab:focus-visible,.fit-screen button:focus-visible { outline:3px solid #008f7a; outline-offset:2px; }
.page-browser { min-height:0; flex:1; overflow:hidden; border:1px solid #d2ddd7; border-radius:11px; background:#fff; box-shadow:0 10px 25px rgba(18,45,36,.08); }
.page-address { overflow:hidden; text-overflow:ellipsis; }
.page-panel { position:relative; height:calc(100% - 30px); overflow:hidden; }
.page-panel[hidden] { display:none; }
.mini-page-link { position:absolute; right:10px; bottom:10px; z-index:2; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.95); color:#17332c; font-size:10px; font-weight:800; box-shadow:0 3px 12px rgba(0,0,0,.1); }
.mini-zentist { background:#fff; }
.mini-z-nav { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid #eee; }
.mini-z-nav img { width:auto; height:19px; }
.mini-z-nav span,.mini-z-button { background:#ed5777; color:#fff; font-size:9px; font-weight:800; padding:7px 12px; border-radius:999px; }
.mini-z-hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:17px 22px; }
.mini-z-hero small { padding:4px 9px; border-radius:999px; background:#fde8ef; color:#a52d50; font-size:8px; font-weight:700; }
.mini-z-hero strong { display:block; margin-top:14px; max-width:360px; color:#161616; font-size:22px; line-height:1.15; letter-spacing:-.05em; }
.mini-z-hero em { color:#ed5777; font-style:normal; }
.mini-z-hero p { max-width:330px; margin:11px 0 13px; color:#59605e; font-size:10px; line-height:1.45; }
.mini-specops { background:#07191b; }
.mini-specops img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.mini-outpost { background:linear-gradient(135deg,#143851,#1b5260); color:#fff; }
.mini-o-nav { padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.16); font-size:15px; font-weight:600; letter-spacing:-.04em; }
.mini-o-nav span { color:#5bbfc2; }
.mini-o-hero { padding:25px 23px; }
.mini-o-hero small { display:block; margin-bottom:14px; color:#79d1d0; font-size:9px; font-weight:800; letter-spacing:.16em; }
.mini-o-hero strong { display:block; max-width:330px; font-size:22px; font-weight:400; line-height:1.15; letter-spacing:-.025em; }
.mini-o-hero em { color:#5bbfc2; font-style:normal; }
.mini-o-hero p { max-width:350px; margin-top:15px; color:#e0edf0; font-size:10px; line-height:1.45; }

.fit-ui { background:#fff7f8; padding:0; }
.fit-preview-head { display:flex; align-items:center; gap:8px; height:47px; min-height:47px; padding:0 17px; background:#fff; color:#252525; border-bottom:1px solid #f0dce2; font-size:11px; font-weight:650; }
.fit-preview-head img { height:21px; width:auto; }
.fit-preview-head small { margin-left:auto; color:#9a6575; font-size:9px; }
.fit-progress { height:4px; background:#f6e0e6; }
.fit-progress span { display:block; width:50%; height:100%; background:#d1496c; transition:width .25s; }
.fit-ui.is-step-two .fit-progress span { width:100%; }
.fit-screen { flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px 28px 8px; }
.fit-screen[hidden] { display:none; }
.fit-screen small { color:#bd4665; font-size:10px; font-weight:800; letter-spacing:.13em; }
.fit-screen h4 { margin:12px 0 21px; color:#181818; font-size:23px; line-height:1.12; letter-spacing:-.04em; }
.fit-screen button { display:flex; align-items:center; gap:10px; width:100%; min-height:42px; margin:8px 0; padding:6px 11px; border:1px solid #e4ccd3; border-radius:9px; background:#fff; box-shadow:0 2px 10px rgba(65,30,42,.03); color:#252525; text-align:left; font:650 11px "Plus Jakarta Sans",sans-serif; cursor:pointer; }
.fit-screen button:hover,.fit-screen button[aria-pressed="true"] { border-color:#d1496c; box-shadow:0 4px 14px rgba(209,73,108,.13); }
.fit-screen button b { display:grid; place-items:center; width:22px; height:22px; flex:none; border:1px solid #efdee3; border-radius:6px; color:#a43b57; background:#fbf5f7; }
.fit-screen .fit-back { width:auto; min-height:0; margin-top:13px; padding:3px 0; border:0; box-shadow:none; background:transparent; color:#765862; }
.fit-ui .ui-provenance { margin:0 28px 15px; }

.calendar-ui { gap:8px; background:#eff3f1; }
.calendar-ui .ui-browser-bar { border:1px solid #d6ded9; border-radius:8px 8px 0 0; }
.cal-app { display:grid; grid-template-columns:36% minmax(0,1fr); min-height:0; flex:1; border:1px solid #d6ded9; border-top:0; border-radius:0 0 9px 9px; background:#fff; overflow:hidden; }
.cal-profile { display:flex; flex-direction:column; gap:10px; padding:17px 14px; border-right:1px solid #e7ebe9; }
.cal-profile img { width:31px; height:31px; object-fit:cover; border-radius:50%; }
.cal-profile small,.cal-profile strong,.cal-profile em { display:block; }
.cal-profile small { color:#6b7770; font-size:10px; }
.cal-profile strong { margin:7px 0; color:#171717; font-size:14px; line-height:1.25; }
.cal-profile em { color:#6b7770; font-size:10px; font-style:normal; line-height:1.3; }
.cal-main { padding:18px 13px; }
.cal-month { display:flex; justify-content:space-between; color:#242c28; font-size:12px; font-weight:800; }
.cal-month span { color:#88968f; }
.cal-days { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px 3px; margin-top:21px; text-align:center; }
.cal-days span { color:#79877f; font-size:8px; font-weight:800; }
.cal-days b { display:grid; place-items:center; min-height:27px; border-radius:7px; color:#3e4a43; font-size:11px; }
.cal-days .chosen { background:#17332c; color:#fff; }
.cal-time-label { display:flex; justify-content:space-between; gap:5px; margin-top:14px; color:#34453c; font-size:9px; font-weight:800; }
.cal-time-label span { color:#788880; font-weight:650; }
.cal-slots { display:flex; gap:5px; margin-top:8px; }
.cal-slots span { flex:1; padding:7px 2px; border:1px solid #dbe4de; border-radius:6px; color:#405448; font-size:9px; font-weight:700; text-align:center; white-space:nowrap; }
.cal-slots .chosen { border-color:#008f7a; color:#007565; background:#e9f6f1; }
.handoff-record { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #cbdcd3; border-radius:9px; background:#fff; }
.handoff-check { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:#008f7a; color:#fff; font-size:14px; font-weight:800; }
.handoff-record strong,.handoff-record small { display:block; }
.handoff-record strong { color:#1b3129; font-size:11px; }
.handoff-record small { margin-top:3px; color:#5b6961; font-size:9px; }
.calendar-ui .ui-provenance { padding-top:0; }

@media(max-width:860px){.journey-pair .journey-step{min-height:430px}.journey-pair .journey-stage{height:430px}}
@media(max-width:680px){.journey-pair .journey-step{min-height:0}.journey-pair .journey-stage{height:425px}.real-ui{padding:13px}.search-ui{padding:13px}.serp-head{gap:10px;padding:13px 9px 10px}.google-wordmark{font-size:18px}.serp-query{font-size:10px;padding:8px 10px}.serp-result{padding:14px;min-height:186px}.serp-result h4{font-size:16px}.page-tabs{gap:4px}.page-tab{padding:7px 9px;font-size:10px}.mini-z-hero{padding:15px 15px}.mini-z-hero strong{font-size:21px}.mini-o-hero{padding:21px 17px}.fit-ui{padding:0}.fit-screen{padding:30px 22px 8px}.fit-screen h4{font-size:22px}.fit-ui .ui-provenance{margin:0 22px 15px}.calendar-ui{padding:13px}.cal-profile{padding:14px 9px}.cal-profile strong{font-size:12px}.cal-main{padding:15px 9px}.cal-slots span{font-size:8px}}

/* The explanation and example move together as one row. */
.journey-pairs { gap:0; }
.journey-pair { gap:12px; align-items:stretch; padding:14px 0 30px; border-bottom:0; }
.journey-pair .journey-step,.journey-pair .journey-stage { min-height:450px; height:450px; }
.journey-pair .journey-step { box-shadow:0 12px 30px rgba(10,46,37,.1); }
.journey-pair .journey-stage { box-shadow:0 12px 30px rgba(13,47,38,.08); }
.journey-pair .journey-step h3 { max-width:15ch; }

/* Platform marks float outside the hero copy and video. */
.hero-platforms { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-platform { position:absolute; display:grid; place-items:center; width:62px; height:62px; border:1px solid #dfe8e3; border-radius:19px; background:rgba(255,255,255,.9); box-shadow:0 16px 35px rgba(15,58,47,.11); backdrop-filter:blur(10px); animation:platform-drift 6.5s ease-in-out infinite; }
.hero-platform img { width:34px; height:34px; object-fit:contain; }
.hero-platform--calendar { right:max(38px,calc((100vw - 1170px)/2)); top:170px; transform:rotate(9deg); animation-delay:-1s; }
.hero-platform--calendar img { filter:invert(38%) sepia(91%) saturate(1700%) hue-rotate(201deg); }
.hero-platform--ads { left:max(40px,calc((100vw - 1170px)/2)); top:276px; transform:rotate(-10deg); animation-delay:-2.3s; }
.hero-platform--ads img { filter:invert(39%) sepia(93%) saturate(1714%) hue-rotate(207deg); }
.hero-platform--meta { right:max(65px,calc((100vw - 1120px)/2)); top:520px; width:51px; height:51px; transform:rotate(-7deg); animation-delay:-3.5s; }
.hero-platform--meta img { width:28px; height:28px; filter:invert(31%) sepia(93%) saturate(2783%) hue-rotate(211deg); }
.hero-platform--cal { left:max(54px,calc((100vw - 1150px)/2)); top:540px; width:49px; height:49px; transform:rotate(7deg); animation-delay:-4.1s; }
.hero-platform--cal img { width:27px; height:27px; }
.cal-wordmark { color:#202824; font-size:10px; font-weight:800; letter-spacing:-.06em; }
@keyframes platform-drift { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }

/* Search scenes change while retaining the familiar Google layout. */
.search-demo { background:#fff; }
.search-demo .serp-query span { overflow:hidden; text-overflow:ellipsis; }
.search-demo .serp-result { flex:1; min-height:0; }
.search-content { transition:opacity .22s ease,transform .22s ease; }
.search-demo.is-switching .search-content,.search-demo.is-switching .serp-query { opacity:0; transform:translateY(8px); }
.serp-query { transition:opacity .22s ease,transform .22s ease; }
.serp-brand-icon { text-transform:uppercase; }
.search-demo-footer,.qualify-footer,.portfolio-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:10px; color:#51675e; font-size:10px; font-weight:700; }
.demo-dots { display:flex; align-items:center; gap:6px; flex:none; }
.demo-dots button { width:8px; height:8px; padding:0; border:0; border-radius:99px; background:#b8c9c2; cursor:pointer; transition:width .25s,background .25s; }
.demo-dots button.is-active { width:24px; background:#008f7a; }
.demo-dots button:focus-visible { outline:2px solid #008f7a; outline-offset:3px; }

/* Three distinct client page designs form a moving portfolio stack. */
.portfolio-ui { background:radial-gradient(circle at 50% 42%,#f6fffb,#e7f0eb 75%); padding:18px 18px 14px; }
.portfolio-top { display:flex; justify-content:space-between; align-items:center; color:#0f5548; font-size:10px; font-weight:800; letter-spacing:.17em; }
.portfolio-top-lines { display:flex; gap:4px; }
.portfolio-top-lines i { width:15px; height:4px; border-radius:3px; background:#b7cfc5; }
.portfolio-top-lines i:first-child { background:#008f7a; }
.portfolio-deck { position:relative; flex:1; min-height:0; perspective:800px; }
.portfolio-card { position:absolute; left:50%; top:50%; width:70%; max-width:306px; height:310px; padding:0; text-align:left; border:1px solid rgba(9,52,45,.22); border-radius:13px; overflow:hidden; cursor:pointer; box-shadow:0 18px 35px rgba(8,42,34,.18); font-family:inherit; transition:transform .7s var(--ease),filter .7s var(--ease),box-shadow .7s var(--ease),opacity .7s; }
.portfolio-card[data-position="center"] { z-index:3; transform:translate(-50%,-50%) scale(1) rotate(0); filter:none; }
.portfolio-card[data-position="left"] { z-index:2; transform:translate(calc(-50% - 175px),-48%) scale(.76) rotate(-10deg); filter:saturate(.76); }
.portfolio-card[data-position="right"] { z-index:2; transform:translate(calc(-50% + 175px),-48%) scale(.76) rotate(10deg); filter:saturate(.76); }
.portfolio-card:hover[data-position="left"] { transform:translate(calc(-50% - 165px),-51%) scale(.78) rotate(-8deg); }
.portfolio-card:hover[data-position="right"] { transform:translate(calc(-50% + 165px),-51%) scale(.78) rotate(8deg); }
.portfolio-card:focus-visible { outline:3px solid #008f7a; outline-offset:3px; }
.portfolio-browser { height:27px; display:flex; align-items:center; gap:4px; padding:0 10px; background:#f4f7f5; border-bottom:1px solid #dfe7e1; }
.portfolio-browser i { width:5px; height:5px; border-radius:50%; background:#e39895; }
.portfolio-browser i:nth-child(2) { background:#e5c778; }
.portfolio-browser i:nth-child(3) { background:#9dcaa8; }
.portfolio-browser small { margin-left:7px; color:#65776f; font-size:8px; font-weight:600; }
.portfolio-card--specops { background:#05191b; color:#fff; }
.portfolio-specops-body,.portfolio-zentist-body,.portfolio-outpost-body { display:flex; flex-direction:column; align-items:flex-start; height:calc(100% - 27px); padding:20px 21px; }
.portfolio-client { font-size:17px; font-weight:800; letter-spacing:.12em; line-height:1; }
.portfolio-client small { display:block; margin-top:5px; font-size:5px; letter-spacing:.15em; }
.portfolio-overline { margin-top:26px; font-size:7px; font-weight:800; letter-spacing:.16em; }
.portfolio-card strong { display:block; margin-top:9px; font-size:24px; line-height:1.13; letter-spacing:-.045em; }
.portfolio-card em { font-style:normal; }
.portfolio-copy { margin-top:10px; font-size:9px; line-height:1.5; }
.portfolio-cta { display:inline-block; margin-top:auto; padding:8px 11px; border-radius:6px; font-size:8px; font-weight:800; }
.portfolio-card--specops .portfolio-overline,.portfolio-card--specops em { color:#63c7cd; }
.portfolio-card--specops .portfolio-copy { color:#bfd5d4; }
.portfolio-card--specops .portfolio-cta { background:#62c2c9; color:#05242a; }
.portfolio-card--zentist { background:#fff9fb; color:#1e1a1b; }
.portfolio-zentist-body { align-items:center; text-align:center; }
.portfolio-zentist-body img { width:82px; height:24px; object-fit:contain; }
.portfolio-card--zentist .portfolio-overline { margin-top:20px; color:#ae6376; }
.portfolio-card--zentist strong { font-size:23px; }
.portfolio-card--zentist em { color:#e85a80; }
.portfolio-card--zentist .portfolio-copy { color:#6b5d61; }
.portfolio-card--zentist .portfolio-cta { background:#e85a80; color:#fff; }
.portfolio-card--outpost { background:linear-gradient(150deg,#10283f,#174f60); color:#fff; }
.portfolio-card--outpost .portfolio-client { letter-spacing:-.05em; }
.portfolio-card--outpost .portfolio-client span,.portfolio-card--outpost em { color:#65d0ce; }
.portfolio-card--outpost .portfolio-overline { color:#8bd2d5; }
.portfolio-card--outpost .portfolio-copy { color:#d5e8ec; }
.portfolio-card--outpost .portfolio-cta { background:#e8f3f4; color:#153b48; }
.portfolio-caption { margin-top:0; }

/* Rotating, generic fit checks demonstrate different buyer criteria. */
.qualify-ui { background:#eef6f1; padding:20px; }
.qualify-window { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; border:1px solid #c6dacf; border-radius:13px; background:#fff; box-shadow:0 15px 30px rgba(18,57,42,.08); }
.qualify-header { display:flex; justify-content:space-between; align-items:center; height:51px; padding:0 22px; border-bottom:1px solid #e8efe9; }
.qualify-brand { display:flex; align-items:center; gap:9px; color:#17362c; font-size:13px; font-weight:800; }
.qualify-brand i { width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,#0a9d7d,#1b5b4b); box-shadow:inset 0 0 0 6px #d2f0e3; }
.qualify-header small { color:#728a7c; font-size:9px; font-weight:700; }
.qualify-progress { height:4px; background:#e4eee8; }
.qualify-progress span { display:block; width:38%; height:100%; background:#0b987e; }
.qualify-body { display:flex; flex-direction:column; justify-content:center; flex:1; padding:16px 25px 22px; transition:opacity .22s,transform .22s; }
.qualify-ui.is-switching .qualify-body { opacity:0; transform:translateY(8px); }
.qualify-body small { color:#0f8b73; font-size:9px; font-weight:800; letter-spacing:.16em; }
.qualify-body h4 { margin:10px 0 18px; max-width:350px; color:#1a2c23; font-size:23px; line-height:1.15; letter-spacing:-.035em; }
.qualify-options { display:grid; gap:8px; }
.qualify-options button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:6px 10px; border:1px solid #dce7df; border-radius:8px; background:#fff; color:#1e3328; text-align:left; font-family:inherit; cursor:pointer; transition:border-color .2s,background .2s; }
.qualify-options button:hover,.qualify-options button.is-picked { border-color:#0a9d7d; background:#f0faf5; }
.qualify-options button span { display:grid; place-items:center; width:24px; height:24px; flex:none; border:1px solid #d9e9de; border-radius:5px; color:#107a65; background:#f4faf6; font-size:9px; font-weight:800; }
.qualify-options button b { font-size:11px; font-weight:700; }
.qualify-footer { flex:none; }

/* A calendar and booking ecosystem, without an individual profile photo. */
.calendar-showcase { position:relative; justify-content:center; background:radial-gradient(circle at 55% 42%,#f8fffb,#e8f2ed 80%); padding:19px; }
.calendar-tools { position:absolute; inset:0; pointer-events:none; }
.calendar-tool { position:absolute; display:flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid #c9dbd0; border-radius:999px; background:#fff; color:#245244; font-size:9px; font-weight:800; box-shadow:0 8px 20px rgba(22,73,52,.1); animation:platform-drift 5.5s ease-in-out infinite; }
.calendar-tool img { width:15px; height:15px; }
.calendar-tool--google { top:14px; left:14px; transform:rotate(-4deg); }
.calendar-tool--google img { filter:invert(38%) sepia(91%) saturate(1700%) hue-rotate(201deg); }
.calendar-tool--cal { top:24px; right:14px; transform:rotate(5deg); animation-delay:-2s; }
.calendar-tool--cal img { width:13px; height:13px; }
.calendar-tool--calendly { bottom:15px; right:15px; transform:rotate(-3deg); animation-delay:-3.5s; }
.calendar-tool--calendly img { filter:invert(29%) sepia(98%) saturate(2037%) hue-rotate(199deg); }
.calendar-window { position:relative; z-index:1; width:91%; height:305px; margin-top:17px; overflow:hidden; border:1px solid #d1ded6; border-radius:12px; background:#fff; box-shadow:0 17px 36px rgba(20,67,49,.13); }
.calendar-window-top { display:flex; align-items:center; justify-content:space-between; height:45px; padding:0 15px; border-bottom:1px solid #e6ece7; }
.calendar-window-title { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:#1e3a2c; }
.calendar-window-title img { width:18px; height:18px; filter:invert(38%) sepia(91%) saturate(1700%) hue-rotate(201deg); }
.calendar-nav { color:#789083; font-size:9px; font-weight:700; }
.calendar-week { display:grid; grid-template-columns:repeat(5,1fr); margin-left:45px; border-bottom:1px solid #e7eee9; }
.calendar-week span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:42px; color:#779184; font-size:8px; font-weight:750; }
.calendar-week b { color:#25382c; font-size:13px; }
.calendar-grid { display:flex; height:calc(100% - 87px); }
.calendar-hours { display:grid; grid-template-rows:repeat(4,1fr); width:45px; flex:none; padding:0 7px 0 4px; color:#9aa99f; font-size:8px; text-align:right; }
.calendar-hours span { transform:translateY(-5px); }
.calendar-columns { position:relative; display:grid; grid-template-columns:repeat(5,1fr); flex:1; background:repeating-linear-gradient(to bottom,#fff 0,#fff 53px,#e8efe9 54px,#fff 55px); }
.calendar-columns > i { border-left:1px solid #e8efe9; }
.calendar-event { position:absolute; left:40.5%; top:72px; width:39%; min-height:78px; padding:8px 9px; border-left:3px solid #0a8e74; border-radius:5px; background:#dff3e8; box-shadow:0 4px 10px rgba(14,100,70,.08); }
.calendar-event small,.calendar-event strong,.calendar-event span { display:block; }
.calendar-event small { color:#3a8a70; font-size:8px; }
.calendar-event strong { margin-top:5px; color:#16553f; font-size:11px; }
.calendar-event span { margin-top:3px; color:#557a63; font-size:8px; }
.calendar-footnote { position:absolute; left:20px; bottom:14px; color:#315d48; font-size:10px; font-weight:750; }

@media(max-width:1200px){.hero-platform--meta,.hero-platform--cal{display:none}}
@media(max-width:1050px){.hero-platforms{display:none}}
@media(max-width:860px){.journey-pair{gap:10px}.journey-pair .journey-step,.journey-pair .journey-stage{min-height:430px;height:430px}.portfolio-card{width:76%;height:292px}.portfolio-card[data-position="left"]{transform:translate(calc(-50% - 120px),-48%) scale(.72) rotate(-10deg)}.portfolio-card[data-position="right"]{transform:translate(calc(-50% + 120px),-48%) scale(.72) rotate(10deg)}}
@media(max-width:680px){.journey-pair{grid-template-columns:1fr;gap:9px;padding:10px 0 22px}.journey-pair .journey-step{min-height:0;height:auto;padding:25px 28px}.journey-pair .journey-stage{height:405px;min-height:405px}.journey-pair .journey-step h3{font-size:25px;margin-bottom:10px}.journey-pair .journey-step p{font-size:14px}.portfolio-card{width:75%;height:280px}.portfolio-card[data-position="left"]{transform:translate(calc(-50% - 112px),-48%) scale(.72) rotate(-9deg)}.portfolio-card[data-position="right"]{transform:translate(calc(-50% + 112px),-48%) scale(.72) rotate(9deg)}.portfolio-card strong{font-size:20px}.portfolio-zentist-body strong{font-size:19px}.portfolio-caption span,.qualify-footer span{max-width:25ch}.qualify-ui{padding:13px}.qualify-body{padding:15px 17px}.qualify-body h4{font-size:20px}.calendar-showcase{padding:12px}.calendar-window{width:96%;height:293px}.calendar-tool{font-size:8px}.calendar-event{width:45%;left:38%}}
@media(prefers-reduced-motion:reduce){.hero-platform,.calendar-tool{animation:none}.search-content,.serp-query,.qualify-body,.portfolio-card{transition:none}}
.journey { padding-bottom:52px; }
#compare { padding-top:58px; }