@font-face {
  font-family: 'Jokker';
  font-weight: 400;
  font-display: swap;
  src: url('jokker-font-family/Jokker-TRIAL-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Jokker';
  font-weight: 500;
  font-display: swap;
  src: url('jokker-font-family/Jokker-TRIAL-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Jokker';
  font-weight: 600;
  font-display: swap;
  src: url('jokker-font-family/Jokker-TRIAL-Semibold.otf') format('opentype');
}
@font-face {
  font-family: 'Jokker';
  font-weight: 700;
  font-display: swap;
  src: url('jokker-font-family/Jokker-TRIAL-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Jokker';
  font-weight: 800;
  font-display: swap;
  src: url('jokker-font-family/Jokker-TRIAL-Heavy.otf') format('opentype');
}

.gradient-bg {
  background: linear-gradient(180deg, #010C1E 0%, #010C1E 35%, #02132A 70%, #051934 100%);
  position: relative;
}
.gradient-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 1200px 600px at 50% 85%, rgba(20, 50, 100, 0.4) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-text-gradient {
  background-image: linear-gradient(180deg, #e0e6ec 0%, #96a2b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
  paint-order: stroke fill;
  padding-bottom: 0.15em;
}

.icon-hero-gradient {
  display: inline-block;
  -webkit-mask: url('wreath-logo.svg') center / contain no-repeat;
  mask: url('wreath-logo.svg') center / contain no-repeat;
  background: linear-gradient(180deg, #e0e6ec 0%, #96a2b4 100%);
}

.cta-text-gradient {
  background-image: linear-gradient(180deg, #e0e6ec 0%, #96a2b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-glow {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(0, 0, 0, 0.38),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.18),
    0 0 48px rgba(32, 103, 255, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

.pill-3d {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.pill-3d::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, transparent 100%);
}
.pill-3d::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 50%;
  background: linear-gradient(to left, rgba(0,0,0,0.2) 0%, transparent 100%);
}

.card-dark {
  background-color: #020F22;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
}

.card-light {
  background-color: #FFFFFF;
  box-shadow: 0 4px 24px rgba(0, 19, 46, 0.04);
  border-radius: 20px;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.off-white-section {
  background-color: #F8F9FB;
  border-radius: 24px;
}

/* ─── Nav pill ─── */
#nav-inner {
  max-width: 1280px;
  padding: 24px 40px;
  border: 1px solid transparent;
  transition:
    max-width  800ms cubic-bezier(0.4, 0, 0.2, 1),
    background 800ms cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 800ms cubic-bezier(0.4, 0, 0.2, 1),
    padding    800ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 800ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 800ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 800ms;
}
#nav-links {
  max-width: 400px;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 800ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 400ms ease,
    visibility 400ms ease;
}
#nav-logo {
  white-space: nowrap;
  flex-shrink: 0;
  transform-origin: left center;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease;
}
#nav-cta {
  transform-origin: right center;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
#nav-cta a {
  border-radius: 8px;
}
.nav-scrolled #nav-inner {
  max-width: 520px;
  margin-top: 16px;
  border-radius: 9999px;
  background: rgba(20, 30, 50, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
  padding: 10px 24px;
}
.nav-scrolled #nav-links {
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-scrolled #nav-logo { transform: scale(0.80); }
.nav-scrolled #nav-cta  { transform: scale(0.82); }
@media (max-width: 767px) {
  .nav-scrolled #nav-logo {
    opacity: 0;
    pointer-events: none;
  }
  .nav-scrolled #nav-inner {
    max-width: 160px;
  }
}

/* ─── Hero pill float ─── */
@keyframes pill-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: no-preference) {
  .pf1 { animation: pill-float 4.2s ease-in-out infinite 0.0s; }
  .pf2 { animation: pill-float 3.8s ease-in-out infinite 0.6s; }
  .pf3 { animation: pill-float 5.0s ease-in-out infinite 1.1s; }
  .pf4 { animation: pill-float 4.6s ease-in-out infinite 0.3s; }
  .pf5 { animation: pill-float 3.9s ease-in-out infinite 1.5s; }
  .pf6 { animation: pill-float 5.2s ease-in-out infinite 0.9s; }
  .pf7 { animation: pill-float 4.4s ease-in-out infinite 1.8s; }
}


/* ─── CTA button hover micro-interactions ─── */
.btn-glow {
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-glow:hover  { transform: scale(1.03); }
  .btn-glow:active { transform: scale(0.97); }
}

/* ─── Section reveal on scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.revealed { opacity: 1; transform: none; transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CASE STUDIES / SERVICES / REVIEWS
   Ported + adapted from case-studies/case-studies.css (A4 mm units → fluid web)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sm-card-bg: #020F22;
  --sm-well-bg: #040B1B;
  --sm-brand-blue: #2067FF;
  --sm-text-primary: #E1E5EB;
  --sm-text-secondary: #ccced1;
  --sm-text-muted: #8B95A7;
}

/* ─── Shared section heading helpers ─── */
.sm-eyebrow {
  font-family: 'Jokker', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
}

/* ─── Scrolling rating marquee chips ─── */
.rating-strip { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 22px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.rating-chip .stars { color: #F5C46B; font-size: 16px; letter-spacing: 1px; }
.rating-chip .rc-role { font-family: 'Jokker', sans-serif; font-weight: 600; font-size: 16px; color: var(--sm-text-primary); }
.rating-chip .rc-company { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--sm-text-muted); }
.rating-chip.is-rating { background: rgba(32, 103, 255, 0.12); border-color: rgba(75, 125, 255, 0.3); }

/* ─── Step cards (.outcome) ─── */
.outcome {
  background:
    radial-gradient(circle at 12% 0%, rgba(32, 103, 255, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(32, 103, 255, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #0a1834 0%, #061227 100%);
  border: 1px solid rgba(75, 125, 255, 0.22);
  border-radius: 18px;
  padding: 24px 28px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.outcome::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
}

.step-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.step-num {
  font-family: 'Jokker', sans-serif;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  background-image: linear-gradient(180deg, #ffffff 0%, #6c80a2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-eyebrow {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  color: var(--sm-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.step-title {
  font-family: 'Jokker', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--sm-text-primary);
}

.bullets { display: flex; flex-direction: column; gap: 12px; }
.bullet { display: flex; gap: 12px; align-items: flex-start; }
.bullet-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 5px;
  background: rgba(32, 103, 255, 0.12);
  border: 1px solid rgba(32, 103, 255, 0.32);
  display: flex; align-items: center; justify-content: center;
  color: var(--sm-brand-blue);
}
.bullet-icon svg { display: block; }
.bullet p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sm-text-secondary);
  text-wrap: pretty;
}
.bullet p strong { color: var(--sm-text-primary); font-weight: 600; }

/* ─── Breadcrumb + code sub-line ─── */
.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--sm-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.crumb .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sm-brand-blue);
  box-shadow: 0 0 0 3px rgba(32, 103, 255, 0.18);
}
.crumb strong { color: var(--sm-text-primary); font-weight: 600; letter-spacing: 0.12em; }

.code-sub {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: clamp(15px, 2.6vw, 21px);
  line-height: 1.1;
  font-weight: 400;
}
.code-sub .kw { color: #C792EA; }
.code-sub .id { color: var(--sm-text-primary); }
.code-sub .op { color: #89DDFF; }
.code-sub .str { color: #C3E88D; }

/* ─── Result badges ─── */
.badge {
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: 9999px;
  font-family: 'Jokker', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
  box-shadow:
    0 6px 15px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.25);
  position: relative;
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.badge span { position: relative; z-index: 1; }
.badge.b-onboarding { background-color: #75D359; background-image: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #8ee072, #5ec244); }
.badge.b-engagement { background-color: #C42F31; background-image: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #d24345, #a82526); }
.badge.b-cs         { background-color: #EC359F; background-image: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #f04dac, #d11f8a); }
.badge.b-retention  { background-color: #C9A437; background-image: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #dab94a, #b08c25); }
.badge.b-dashboards { background-color: #9230E5; background-image: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #a44df0, #7a1cc8); }
.badge.b-referrals  { background-color: #F2852A; background-image: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #f89849, #d96e1a); }
.badge.b-ai         { background-color: #2067FF; background-image: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #3a7dff, #1755e3); }

/* ─── Case-study titles ─── */
.cs-title {
  font-family: 'Jokker', sans-serif;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--sm-text-primary);
}

/* ─── Tab system ─── */
.cs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}
.cs-tab {
  font-family: 'Jokker', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--sm-text-secondary);
  padding: 10px 22px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cs-tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cs-tab.is-active {
  color: #fff;
  background: rgba(32, 103, 255, 0.18);
  border-color: rgba(75, 125, 255, 0.45);
  box-shadow: 0 0 24px rgba(32, 103, 255, 0.25);
}
.cs-panel { display: none; }
.cs-panel.is-active { display: block; animation: cs-fade 400ms ease; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cs-panel.is-active { animation: none; }
}

.cs-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.cs-steps { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── Device frames (fluid; iframe scaled by main.js) ─── */
.dev-frame {
  position: relative;
  overflow: hidden;
  background: var(--sm-well-bg);
}
.dev-frame iframe { border: 0; display: block; background: transparent; transform-origin: top left; }

/* desktop + phone composite */
.cs-devices {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.cs-devices .device-desktop {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.cs-devices .device-phone {
  position: absolute;
  right: -4%;
  bottom: -10%;
  width: 27%;
  z-index: 4;
  border-radius: 16px;
  border: 2px solid #1e2533;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.6));
}
.cs-email {
  width: 100%;
  max-width: 460px;
  margin: 8px auto 0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.cs-dashboard-img,
.cs-svg {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ─── Workflow nodes (referrals study + Success Maxxed) ─── */
.flow-row {
  --c-trigger: #ff7a1a;
  --c-email: #f4c46a;
  --c-crm: #f06292;
  --c-data: #9aa3b2;
  --c-wait: #4d8cff;
  --flow-connector: rgba(255, 255, 255, 0.25);
  --flow-card: 78px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: safe center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}
.flow-row::-webkit-scrollbar { display: none; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 108px; position: relative; flex: 0 0 auto; z-index: 1; scroll-snap-align: center; }
.flow-node::after {
  content: '';
  position: absolute;
  top: calc(var(--flow-card) / 2); right: -2px;
  width: 8px; height: 2px;
  background: var(--flow-connector);
}
.flow-node:last-child::after { display: none; }
.flow-card {
  width: var(--flow-card); height: var(--flow-card);
  background: var(--sm-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.35);
}
.flow-node.trigger .flow-card { border-radius: 39px 18px 18px 39px; }
.flow-node.trigger .flow-card::before {
  content: '';
  position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-trigger); box-shadow: 0 0 6px rgba(255, 122, 26, 0.6);
}
.flow-card svg { width: 38px; height: 38px; color: #fff; }
.flow-label {
  font-family: 'Jokker', sans-serif;
  font-size: 11.5px; font-weight: 500;
  color: var(--sm-text-muted);
  line-height: 1.2; text-align: center; max-width: 104px;
}

/* Full-width spread (Success Automated rows): nodes pushed to the edges,
   one continuous connector line behind them */
.flow-row.spread { justify-content: space-between; gap: 0; }
.flow-row.spread .flow-node::after { display: none; }
.flow-row.spread::before {
  content: '';
  position: absolute;
  top: calc(var(--flow-card) / 2);
  left: 54px; right: 54px;
  height: 2px;
  background: var(--flow-connector);
  z-index: 0;
}

/* White nodes on dark background (Referrals study — PDF page-referral-flow) */
.flow-row.nodes-white .flow-card {
  background: #F8F9FB;
  border-color: rgba(5, 25, 52, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px rgba(0, 0, 0, 0.3);
}
.flow-row.nodes-white .flow-card svg { color: #051934; }
.flow-row.nodes-white .flow-label { color: var(--sm-text-muted); }

/* Navy nodes on white background (Success Automated — PDF page 4) */
.flow-row.on-white {
  --flow-connector: rgba(5, 25, 52, 0.3);
}
.flow-row.on-white .flow-label { color: #1f2937; }

/* ─── Bento (reviews + services) ─── */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: min-content;
  gap: 16px;
}
.card {
  background-color: #061226;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }

.author { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(32,103,255,0.25) 0%, rgba(32,103,255,0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jokker', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sm-text-primary);
  flex-shrink: 0;
}
.author-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.author-role { font-family: 'Jokker', sans-serif; font-size: 15px; font-weight: 600; color: var(--sm-text-primary); line-height: 1.15; }
.author-company { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--sm-text-muted); line-height: 1.2; }

.quote {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; line-height: 1.5; font-weight: 400;
  color: var(--sm-text-secondary);
  text-wrap: pretty;
}
.quote strong { color: var(--sm-text-primary); font-weight: 600; }
.quote.lg { font-size: 18px; line-height: 1.5; color: #d9dde5; }

.stars { display: inline-flex; gap: 2px; color: #F5C46B; font-size: 17px; }

.card.feat {
  background:
    radial-gradient(circle at 12% 0%, rgba(32, 103, 255, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #0a1834 0%, #061227 100%);
  border-color: rgba(75, 125, 255, 0.18);
}
.feat .open-quote {
  font-family: 'Jokker', sans-serif;
  font-size: 110px; line-height: 0.7;
  color: rgba(32, 103, 255, 0.35);
  font-weight: 700;
  position: absolute; top: 16px; right: 24px;
  user-select: none;
}
.card.stat {
  background:
    radial-gradient(circle at 100% 100%, rgba(32, 103, 255, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, #0a1a3a 0%, #050f24 100%);
  border-color: rgba(75, 125, 255, 0.22);
  justify-content: space-between;
}
.stat-row { display: flex; align-items: baseline; }
.stat-big {
  font-family: 'Jokker', sans-serif;
  font-size: clamp(56px, 9vw, 88px);
  line-height: 0.85; font-weight: 700; letter-spacing: -0.04em;
  background-image: linear-gradient(180deg, #ffffff 0%, #6c80a2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-out { font-family: 'Jokker', sans-serif; font-size: 15px; color: var(--sm-text-muted); font-weight: 500; margin-left: 6px; }
.stat-label { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--sm-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.stat-divider { height: 1px; background: rgba(255, 255, 255, 0.08); }

/* ─── Services: overlapping screens cluster (left bento box) ─── */
.svc-grid-top {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.svc-side { display: flex; flex-direction: column; gap: 16px; }
.svc-side .card { flex: 1; justify-content: center; }

.svc-cluster {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 18% 12%, rgba(32, 103, 255, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 92% 90%, rgba(245, 196, 107, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #061226 0%, #040c1c 100%);
  min-height: clamp(300px, 34vw, 430px);
}
.svc-cluster::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  z-index: 6;
}
.svc-cluster img {
  position: absolute;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}
/* overlapping collage — dashboard large to fill the box, others arranged around it */
.svc-cluster .c-dashboard { width: 64%;  left: 3%;  top: 7%;   z-index: 2; }
.svc-cluster .c-wrapped   { width: 18%;  left: 79%; top: 8%;   z-index: 3; }
.svc-cluster .c-onboarding{ width: 24%;  left: 56%; top: 40%;  z-index: 5; }
.svc-cluster .c-referral  { width: 52%;  left: 5%;  bottom: 7%; z-index: 4; }

@keyframes svc-float-a { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-6px,-14px) rotate(-0.2deg); } }
@keyframes svc-float-b { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(5px,-11px) rotate(0.3deg); } }
@keyframes svc-float-c { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-7px,-16px) rotate(-0.35deg); } }
@keyframes svc-float-d { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(6px,-9px) rotate(0.15deg); } }
@media (prefers-reduced-motion: no-preference) {
  .svc-cluster .c-dashboard  { animation: svc-float-a 16.9s ease-in-out infinite -3.2s; }
  .svc-cluster .c-onboarding { animation: svc-float-c 13.5s ease-in-out infinite -6.1s; }
  .svc-cluster .c-wrapped    { animation: svc-float-b 11.1s ease-in-out infinite -2.4s; }
  .svc-cluster .c-referral   { animation: svc-float-d 11.4s ease-in-out infinite -8.0s; }
}

/* ══════════════════════════════════════════════════════════════════════════
   OFF-WHITE SECTIONS (Success Automated + Slack) — full-bleed, no grid
   ══════════════════════════════════════════════════════════════════════════ */
.sm-white {
  background-color: #F8F9FB;
  color: #051934;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
}

.maxxed-title {
  font-family: 'Jokker', sans-serif;
  font-size: clamp(56px, 13vw, 150px);
  line-height: 0.88;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-align: center;
  background-image: linear-gradient(180deg, #0a214d 0%, #010b1d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 -0.4px 0 rgba(255,255,255,0.35))
    drop-shadow(0 0.6px 0 rgba(0,0,0,0.55))
    drop-shadow(0 1.5px 2px rgba(0,0,0,0.18));
}
.maxxed-title span { display: block; padding-bottom: 0.02em; }
.white-heading {
  font-family: 'Jokker', sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
  background-image: linear-gradient(180deg, #0a214d 0%, #010b1d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Slack mockup (PDF page 7) ─── */
.slack-wrap *{box-sizing:border-box;margin:0;padding:0}
.slack-wrap{display:flex;flex-direction:column;height:560px}
.slack-wrap .sw{display:flex;flex:1;min-height:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12.6px;border-radius:14px;overflow:hidden;border:0.5px solid #1a1d21;box-shadow:0 8px 40px rgba(0,0,0,0.18)}
.slack-wrap .sidebar{width:auto;min-width:0;background:#3f0e40;display:flex;flex-direction:column;flex-shrink:0}
.slack-wrap .sb-header{padding:12px 16px 8px;border-bottom:0.5px solid rgba(255,255,255,0.1)}
.slack-wrap .sb-ws{color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.slack-wrap .sb-status{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:10.8px;color:rgba(255,255,255,0.6)}
.slack-wrap .sdot{width:8px;height:8px;border-radius:50%;background:#2bac76;flex-shrink:0}
.slack-wrap .sb-section{padding:4px 0}
.slack-wrap .sb-label{padding:8px 16px 3px;font-size:10.8px;color:rgba(255,255,255,0.5);font-weight:700;letter-spacing:0.02em;display:flex;align-items:center;justify-content:space-between}
.slack-wrap .sb-item{padding:5px 16px;font-size:12.6px;color:rgba(255,255,255,0.7);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slack-wrap .sb-item.active{background:#1164a3;color:#fff}
.slack-wrap .sb-item .bold{font-weight:700;color:#fff}
.slack-wrap .main{flex:1;display:flex;flex-direction:column;background:#fff;min-width:0}
.slack-wrap .ch-header{padding:10px 20px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;background:#fff}
.slack-wrap .ch-left{display:flex;align-items:center;gap:8px}
.slack-wrap .ch-title{font-size:13.5px;font-weight:900;color:#1d1c1d}
.slack-wrap .ch-meta{font-size:10.8px;color:#616061;margin-top:1px}
.slack-wrap .ch-actions{display:flex;align-items:center;gap:4px}
.slack-wrap .ch-btn{padding:5px 10px;border:1px solid #ddd;border-radius:4px;font-size:10.8px;color:#616061;background:#fff;display:flex;align-items:center;gap:4px}
.slack-wrap .msgs{flex:1;overflow:hidden;padding:16px 20px;display:flex;flex-direction:column;gap:1px;background:#fff}
.slack-wrap .msg{display:flex;gap:10px;padding:4px 8px;border-radius:4px}
.slack-wrap .av{width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9.9px;font-weight:700;flex-shrink:0;align-self:flex-start;margin-top:2px}
.slack-wrap .av-frank{background:#ecb22e;color:#1d1c1d}
.slack-wrap .av-soc{background:#e01e5a;color:#fff}
.slack-wrap .av-plato{background:#36c5f0;color:#fff}
.slack-wrap .mb{flex:1;min-width:0}
.slack-wrap .mm{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.slack-wrap .mn{font-size:12.6px;font-weight:900;color:#1d1c1d}
.slack-wrap .mt{font-size:9.9px;color:#616061}
.slack-wrap .mx{font-size:12.6px;color:#1d1c1d;line-height:1.46875}
.slack-wrap .bot-reply{background:#f8f8f8;border-left:3px solid #1164a3;border-radius:0 4px 4px 0;padding:10px 14px;margin-top:6px;font-size:11.7px;color:#1d1c1d;line-height:1.6}
.slack-wrap .bot-reply p{margin:0 0 6px}
.slack-wrap .bot-reply p:last-child{margin:0}
.slack-wrap .bot-reply .step{font-weight:700;color:#1264a3;display:inline}
.slack-wrap .reactions{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.slack-wrap .rx{display:inline-flex;align-items:center;gap:4px;background:#f8f8f8;border:1px solid #ddd;border-radius:24px;padding:2px 8px;font-size:10.8px;color:#616061}
.slack-wrap .rx.me{background:#e8f5fa;border-color:#1264a3;color:#1264a3}
.slack-wrap .input-wrap{padding:12px 20px 16px;background:#fff}
.slack-wrap .input-box{border:1px solid #ddd;border-radius:8px;display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff}
.slack-wrap .input-box input{flex:1;border:none;font-size:12.6px;color:#1d1c1d;outline:none;background:transparent}
.slack-wrap .input-box input::placeholder{color:#999}
.slack-wrap .send-btn{background:#007a5a;color:#fff;border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:12.6px;flex-shrink:0}
@media (max-width: 767px) {
  .slack-wrap{height:480px}
  .slack-wrap .sidebar{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — collapse multi-column layouts on mobile
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4 { grid-column: span 2; }
}
@media (max-width: 767px) {
  .cs-panel-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-2 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .span-2, .span-3, .span-4 { grid-column: span 1; }
  .cs-devices { max-width: 380px; }
  .feat .open-quote { font-size: 80px; }
  .svc-grid-top { grid-template-columns: 1fr; }
  .svc-cluster { min-height: 300px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-ONLY OVERRIDES (≤767px) — desktop layout untouched
   ══════════════════════════════════════════════════════════════════════════ */

/* Mobile brand block + floating CTA: hidden on desktop by default */
#hero-brand { display: none; }
#mobile-cta { display: none; }

/* Referrals flow (desktop): collapse marquee wrappers so the .flow-node
   children act as direct flex children of .flow-row exactly as before, and
   hide the duplicated set. */
.flow-row.nodes-white .rf-track,
.flow-row.nodes-white .rf-set { display: contents; }
.flow-row.nodes-white .rf-set[aria-hidden="true"] { display: none; }

@keyframes rf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  /* Nav removed entirely on mobile (element kept in DOM for main.js) */
  #main-nav { display: none; }

  /* Hero decorative pills removed on mobile */
  .hero-decor { display: none; }

  /* Drop the "Reduced team size" award on mobile */
  .award-team { display: none; }

  /* Stacked brand block above the hero; extra top space + space before heading.
     Also trim the desktop 80px side padding down to 24px so the headline column
     is wide enough (otherwise "management" overflows and clips). */
  #hero-section { padding-top: 100px; padding-left: 24px; padding-right: 24px; }
  #hero-brand { display: flex; margin-bottom: 80px; }

  /* Persistent floating "Get Started" CTA — white rounded rectangle, top-right */
  #mobile-cta {
    position: fixed; top: 14px; right: 14px; z-index: 60;
    display: inline-flex; align-items: center;
    background: #fff; color: #051934;
    font-family: 'Jokker', sans-serif; font-size: 16px; font-weight: 600;
    text-decoration: none;
    padding: 10px 18px; border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }

  /* Hero headline fits the viewport width; normalize whitespace (!important to
     beat the inline pre-line style that adds a leading empty line/space and
     throws off centering); force full width so text-align:center centres each
     line against the viewport (the parent's flex items-center otherwise
     shrink-wraps the box off-centre); drop the text stroke on mobile */
  #hero-headline {
    font-size: clamp(30px, 10vw, 46px);
    white-space: normal !important;
    width: 100%;
    align-self: stretch;
    text-align: center;
    -webkit-text-stroke: 0;
  }

  /* Hero subheading scaled down on mobile */
  #hero-sub { font-size: 18px; line-height: 1.45; margin-bottom: 36px; }

  /* Section headings: bump weight (mobile text-5xl carries no weight → 400) */
  .font-section-headline { font-weight: 600; }

  /* "Success. Automated." flow rows scale proportionally to screen width */
  .flow-row.spread { --flow-card: 12vw; gap: 0; }
  .flow-row.spread .flow-node { width: 18vw; }
  .flow-row.spread .flow-card svg { width: 6vw; height: 6vw; }
  .flow-row.spread .flow-label { font-size: 2.7vw; max-width: 18vw; }
  .flow-row.spread::before { left: 9vw; right: 9vw; }

  /* Referrals flow: keep full size, scroll sideways infinitely */
  .flow-row.nodes-white { overflow: hidden; }
  .flow-row.nodes-white .rf-track {
    display: flex; width: max-content;
    animation: rf-marquee 28s linear infinite;
  }
  .flow-row.nodes-white .rf-set { display: flex; gap: 4px; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-row.nodes-white .rf-track { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRICING PAGE (pricing.html) — reuses card / badge / cs-tab / btn-glow looks
   ══════════════════════════════════════════════════════════════════════════ */

/* Compact page header */
.price-header {
  padding-top: 120px;
  text-align: center;
}
.price-header h1 {
  font-family: 'Jokker', sans-serif;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 600;
}
@media (max-width: 767px) {
  .price-header { padding-top: 96px; }
}

/* Section eyebrow */
.price-eyebrow {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
}

/* ─── Plan cards ─── */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-card .plan-name {
  font-family: 'Jokker', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--sm-text-primary);
}
.price-card .plan-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--sm-text-muted);
}

/* Big headline price reuses the .stat-big gradient treatment */
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price-amount .num {
  font-family: 'Jokker', sans-serif;
  font-size: clamp(46px, 6vw, 60px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.04em;
  background-image: linear-gradient(180deg, #ffffff 0%, #6c80a2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-amount .per {
  font-family: 'Jokker', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--sm-text-muted);
}

/* Fee / breakdown lines */
.price-lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 16px;
}
.price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--sm-text-secondary);
}
.price-line .lbl { color: var(--sm-text-muted); }
.price-line .val { color: var(--sm-text-primary); font-weight: 600; white-space: nowrap; }
.price-line.total .lbl,
.price-line.total .val { color: #fff; font-weight: 700; }

/* Hourly: 40-hour total — prominent secondary callout below the $80 headline */
.price-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: rgba(32, 103, 255, 0.1);
  border: 1px solid rgba(75, 125, 255, 0.28);
  border-radius: 12px;
  padding: 12px 16px;
}
.price-subtotal .st-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
}
.price-subtotal .st-val {
  font-family: 'Jokker', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* Retainer discount: struck hourly-equivalent + a clean Save tag */
.price-compare {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
}
.price-compare .was {
  font-family: 'Jokker', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--sm-text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(139, 149, 167, 0.65);
  text-decoration-thickness: 1.5px;
}
.price-compare .off {
  font-family: 'Jokker', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #b6efa3;
  background: rgba(94, 194, 68, 0.14);
  border: 1px solid rgba(94, 194, 68, 0.42);
  border-radius: 9999px;
  padding: 4px 11px;
}

/* Plan notes (roll-over, downgrade) */
.price-notes {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.price-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--sm-text-secondary);
}
.price-note svg { flex-shrink: 0; margin-top: 2px; color: var(--sm-brand-blue); }

.price-card .btn-glow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sm-brand-blue);
  color: #fff;
  padding: 13px 20px;
  border-radius: 14px;
  font-family: 'Jokker', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* Best-value highlight + interactive selected state */
.price-card.is-best {
  background:
    radial-gradient(circle at 90% 0%, rgba(32,103,255,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #0a1834 0%, #061227 100%);
  border-color: rgba(75,125,255,0.4);
}
.price-card.is-selected {
  border-color: rgba(75, 125, 255, 0.6);
  box-shadow: 0 0 30px rgba(32, 103, 255, 0.22);
}
.plan-flag {
  position: absolute;
  top: 16px; right: 16px;
  font-family: 'Jokker', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(32, 103, 255, 0.9);
  border-radius: 9999px;
  padding: 4px 10px;
}

/* ─── Timeline ─── */
.tl-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}
.tl-track-block { margin-bottom: 28px; }
.tl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.tl-head .tl-name {
  font-family: 'Jokker', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--sm-text-primary);
}
.tl-head .tl-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--sm-text-muted);
}
.tl-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 4px;
}
.tl-track::-webkit-scrollbar { display: none; }
.tl-track::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 40px; right: 40px;
  height: 2px;
  background: rgba(75, 125, 255, 0.3);
  z-index: 0;
}
.tl-node {
  position: relative;
  z-index: 1;
  flex: 1 0 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.tl-node .tl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sm-brand-blue);
  box-shadow: 0 0 0 4px rgba(32, 103, 255, 0.18), 0 0 14px rgba(32, 103, 255, 0.5);
}
.tl-node.is-first .tl-dot {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 14px rgba(255, 255, 255, 0.4);
}
.tl-node .tl-date {
  font-family: 'Jokker', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--sm-text-primary);
}
.tl-amt {
  font-family: 'Jokker', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--sm-text-primary);
  background: rgba(32, 103, 255, 0.12);
  border: 1px solid rgba(75, 125, 255, 0.3);
  border-radius: 9999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.tl-node .tl-kind {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--sm-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .tl-track { justify-content: flex-start; }
  .tl-node { flex: 0 0 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRICING CALCULATOR (pricing-calculator.html)
   ══════════════════════════════════════════════════════════════════════════ */

/* Segmented control */
.calc-seg-wrap { margin-bottom: 20px; }

.calc-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 4px;
  width: 100%;
}
.calc-seg-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 12px;
  background: var(--sm-brand-blue);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
    0 0 20px rgba(32, 103, 255, 0.4);
  transition: left 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
              width 120ms ease;
  pointer-events: none;
  z-index: 0;
}
.calc-seg-btn {
  position: relative;
  z-index: 1;
  padding: 12px 6px;
  font-family: 'Jokker', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sm-text-muted);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: color 160ms ease;
  background: none;
  border: none;
}
.calc-seg-btn.is-active { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .calc-seg-pill { transition: none; }
}
@media (max-width: 600px) {
  .calc-seg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .calc-seg-wrap::-webkit-scrollbar { display: none; }
  .calc-seg { min-width: 460px; }
}

/* Two-card layout */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 767px) {
  .calc-grid { grid-template-columns: 1fr; }
}

.calc-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* CTA button inside a calc card */
.calc-card .btn-glow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sm-brand-blue);
  color: #fff;
  padding: 13px 20px;
  border-radius: 14px;
  font-family: 'Jokker', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* Prominent hours counter on the hourly card */
.calc-hours-display {
  font-family: 'Jokker', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sm-text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 13px 18px;
  text-align: center;
}

/* Green discount value in the retainer breakdown */
.calc-disc-val {
  color: #b6efa3 !important;
  font-weight: 700;
}

.calc-card-label {
  font-family: 'Jokker', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
}

/* Save bar on retainer card */
.calc-save-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(94, 194, 68, 0.1);
  border: 1px solid rgba(94, 194, 68, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #b6efa3;
  text-align: center;
  margin-top: auto;
}
.calc-save-bar strong {
  font-family: 'Jokker', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #b6efa3;
}