/* Studio.909 — study recreation. All values measured from the live site. */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --orange:  #0E8C9E;   /* GetClarix teal — accent text, primary button (was #FF5500) */
  --green:   #16A34A;   /* GetClarix green — gradient end, used only on the button rim */
  --line:    #1F1F1F;   /* rgb(31,31,31)   — every card / pill border */
  --line-2:  #383838;   /* rgb(56,56,56)   — divider gradient midpoint */
  --white:   #fff;
  --muted:   #AEAEAE;   /* proof image border */
  --nav-btn: rgba(24,24,24,.5);   /* measured nav button bg */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #000; color: var(--white);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px; line-height: 20px; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- containers (measured) ---------- */
.container-1400 { width: 1400px; max-width: calc(100% - 25px); margin: 0 auto; }
.container-1140 { width: 1140px; max-width: calc(100% - 25px); margin: 0 auto; }
.container-940  { width: 940px;  max-width: calc(100% - 25px); margin: 0 auto; }

.spacer-100 { height: 100px; }
.spacer-120 { height: 120px; }
.spacer-150 { height: 150px; }

/* ---------- type scale (all measured) ---------- */
.heading-1-hero { font-size: 64px; line-height: 74px; font-weight: 400; color: #fff; margin: 10px 0; }  /* measured 64/74 w400 */
.heading-1-hero .accent { font-weight: 500; }                                                            /* measured w500 */
.heading-2 { font-size: 48px; line-height: 60px; font-weight: 300; color: #fff; }                        /* measured 48/60 w300 */
.heading-2 .accent { font-weight: 400; }                                                                 /* measured w400 */
.accent { color: var(--orange); }                                                                        /* measured rgb(255,85,0) */
.sub-text-large { font-size: 20px; line-height: 26px; font-weight: 300; color: #fff; }                   /* measured 20/26 w300 */
.sub-text-large.left { line-height: 28px; text-align: left; }                                            /* measured 20/28 */
.text-subheading { font-size: 20px; line-height: 28px; font-weight: 400; color: #fff; }                  /* measured 20/28 w400 */
.text-subheading.center { text-align: center; }
.text-subheading.big { font-size: 32px; line-height: 44px; font-weight: 300; }                           /* measured 32/44 w300 */
.text-subheading.medium { font-size: 28px; line-height: 36px; font-weight: 300; }         /* measured 28/36 w300 */
.text-subheading.light { font-size: 18px; line-height: 24px; font-weight: 300; }          /* measured 18/24 w300 */
.text-subheading.light.quote { font-size: 16px; line-height: 22px; }                      /* measured 16/22 */
.text-subheading-left { font-size: 20px; line-height: 26px; font-weight: 400; color: #fff; }             /* measured 20/26 w400 */
.text-copy-small { font-size: 16px; line-height: 22px; font-weight: 300; color: #fff; }                  /* measured 16/22 w300 */
.text-copy-small-left { font-size: 16px; line-height: 22px; font-weight: 300; color: #fff; }
.text-copy-small-left.medium { font-weight: 500; }
.text-copy-xs { font-size: 14px; line-height: 16.8px; font-weight: 300; color: #fff; }    /* measured 14/16.8 w300 */
.number-showcase { font-size: 32px; line-height: 28px; font-weight: 300; color: #fff; }                  /* measured 32/28 w300 */
.stat-label { font-size: 16px; line-height: 18px; font-weight: 300; color: var(--muted); }   /* measured 16/18 w300 #AEAEAE */

.heading-block { width: 940px; max-width: 100%; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }   /* measured gap 12 */
.heading-block.narrow { width: 818px; }                                                                  /* measured 818x60 */
.heading-block.narrow .heading-2 { white-space: nowrap; }                                                /* measured: one line on the original */
.sub-wrap { width: 800px; max-width: 100%; }                                                             /* measured */
.main-50 { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 50px; }   /* measured: .div-main-50 gap 50 */

/* ---------- scroll reveal (Webflow IX2 on the original) ----------
   Sampled off the live site: opacity 0 → 1 AND translateY(100px) → 0,
   ~800ms ease-out-cubic, firing when the element's top crosses the viewport bottom.
   The class is added by JS so the page stays visible without it. */
.reveal { opacity: 0; transform: translateY(100px); }
.reveal.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .8s cubic-bezier(.215, .61, .355, 1),
              transform .8s cubic-bezier(.215, .61, .355, 1);
}

/* ================= NAV ================= */
.nav-block-blurred { height: 0; }
.navbar-container {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  width: 1400px; max-width: calc(100% - 25px); margin: 0 auto;
  height: 90px; padding: 20px 0;                                    /* measured: h90, pad 20/0 */
}
.nav-div-blur {
  position: fixed; top: 0; left: 0; right: 0; height: 88px; z-index: 4;   /* measured: fixed, h88, z4 */
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);       /* measured: blur(20px) */
  pointer-events: none;
}
.navbar-wrapper { height: 50px; display: flex; align-items: center; justify-content: space-between; }   /* measured h50 */
.navbar-brand img { width: 140px; height: 21px; }                                                        /* measured 140x21 */
.nav-menu-wrapper {
  height: 48px; padding: 6px 2px; border-radius: 5px;                     /* measured */
  border: 1px solid var(--line);                                          /* measured 1px solid #1F1F1F */
  background: linear-gradient(rgba(17,17,17,.51), rgba(0,0,0,.5));        /* measured */
}
.nav-menu { display: flex; align-items: center; height: 100%; }
.nav-link {
  display: block; padding: 8px 18px 6px; margin: 0 5px; border-radius: 5px;   /* measured */
  font-size: 14px; line-height: 20px; font-weight: 300; letter-spacing: .25px; color: #fff;   /* measured 14/20 w300 ls.25 */
  white-space: nowrap;
}
.nav-link.current { background: linear-gradient(#fff, #e0e0e0); color: #000; font-weight: 500; }   /* measured w500 */
.dropdown { position: relative; }
.dropdown-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.icon-dd { width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 3px; }
.dropdown-list {
  position: absolute; top: 42px; left: 0; min-width: 230px; display: none; z-index: 20;
  background: #0b0b0b; border: 1px solid var(--line); border-radius: 8px; padding: 6px;
}
.dropdown:hover .dropdown-list { display: block; }
.dropdown-link { display: block; padding: 10px 14px; border-radius: 5px; font-size: 14px; font-weight: 400; color: #fff; }
.dropdown-link:hover { background: #191919; }
.nav-button {
  display: flex; align-items: center; justify-content: center;
  height: 50px; padding: 14px 25px; border-radius: 5px;                   /* measured 136x50, pad 14/25, r5 */
  border: 1px solid var(--line); background: var(--nav-btn); color: #fff;
  font-size: 14px; line-height: 20px; white-space: nowrap;
}

/* ================= PRIMARY BUTTON (rotating gradient rim) ================= */
.btn {
  position: relative; width: 262px; height: 48px; border-radius: 5px;      /* measured 262x48 r5 */
  overflow: hidden; flex: none;
}
.btn-gradient {
  position: absolute; top: 50%; left: 50%;
  width: 262px; height: 262px; margin: -131px 0 0 -131px;                  /* measured: a 262-long bar that spins */
  background: linear-gradient(90deg, var(--orange) 91%, #fff);             /* measured */
  animation: btnSpin 5s linear infinite;                                   /* measured: ~360° per 5.06s */
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-inner {
  position: absolute; top: 2px; left: 2px;
  width: 258px; height: 44px; border-radius: 5px;                          /* measured 258x44 */
  background: var(--orange); padding: 11px 0; gap: 6px;                    /* measured */
  display: flex; align-items: center; justify-content: center;
}
.btn-text { font-size: 14px; line-height: 22px; font-weight: 500; color: #fff; }   /* measured 14/22 w500 */
.button-orange {
  display: flex; align-items: center; justify-content: center;
  height: 50px; border-radius: 5px; background: var(--orange); color: #fff;
  font-size: 14px; font-weight: 500;
}
.button-proof {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 14px 24px; margin-top: 20px; border-radius: 5px;  /* measured 217x50 pad 14/24 mt20 */
  border: 1px solid var(--line); color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 300;
  align-self: flex-start;
}

/* ================= HERO ================= */
.hero-section {
  background: url('../assets/img/hero-grid.svg') no-repeat 50% 50%;        /* measured */
  position: relative;
}
.hero-container { width: 1400px; max-width: calc(100% - 25px); margin: 0 auto; position: relative; }
.hero-glow {
  position: absolute; top: 0; left: 0; z-index: -1;                        /* measured: absolute 0/0, z-1 */
  width: 1135px; height: 644px; opacity: .42;                              /* measured */
  background: url('../assets/img/hero-glow.svg') no-repeat 50% 50%;
  animation: glowSpin 9.7s linear infinite;                                /* measured: ~37°/s */
}
@keyframes glowSpin { to { transform: rotate(360deg); } }
.hero-stack { display: flex; flex-direction: column; align-items: center; }   /* measured: h424 via child margins below */
.hero-trust { display: flex; flex-direction: column; align-items: center; gap: 20px; }   /* measured 524x74, gap 20 */
.trust-row { display: flex; align-items: center; gap: 10px; }
.trust-text { font-size: 16px; line-height: 18px; font-weight: 400; color: #fff; }   /* measured 16/18 */
.hero-copy { width: 950px; max-width: 100%; margin-top: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }   /* measured 950x220 mt20 */
.hero-btn-wrap { width: 800px; max-width: 100%; margin-top: 50px; padding-bottom: 12px; display: flex; justify-content: center; }   /* measured 800x60 mt50 (btn 48 + 12 gap) */

/* ---- logo marquee: 2 rows, opposite directions, measured 41px/s ---- */
.logo-marquee-wrap {
  position: relative; overflow: hidden;
  background: linear-gradient(270deg, #000, rgba(0,0,0,0) 47%, rgba(0,0,0,0) 68%, #000);   /* measured */
}
.marquee-row { overflow: hidden; padding-bottom: 20px; }                   /* measured pb20 */
.marquee-track { display: flex; gap: 20px; width: max-content; }           /* measured gap 20 */
.track-left  { animation: marqLeft  70s linear infinite; }                 /* 2856px half-track ÷ 41px/s (measured) */
.track-right { animation: marqRight 70s linear infinite; }
@keyframes marqLeft  { from { transform: translateX(0); }       to { transform: translateX(-50%); } }
@keyframes marqRight { from { transform: translateX(-50%); }    to { transform: translateX(0); } }
.logo-cell {
  width: 184px; height: 74px; padding: 20px 30px; flex: none;              /* measured 184x74 pad 20/30 */
  border: 1px solid var(--line); border-radius: 5px;                       /* measured r5 */
  display: flex; align-items: center; justify-content: center;
}
.logo-cell img { max-height: 34px; width: auto; object-fit: contain; }
.black-gradient-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, #000);   /* measured */
}

/* ================= PITFALLS ================= */
.pitfall-block { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 50px; }   /* measured 1400x370 gap 50 */
.lead-line { font-size: 20px; line-height: 24px; font-weight: 400; color: #fff; text-align: center; }
.pitfall-row { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.pitfall { width: 383px; display: flex; flex-direction: column; align-items: center; gap: 24px; }  /* measured 383, gap 24 */
.pitfall-icon {
  width: 88px; height: 88px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pitfall-copy { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }   /* measured: copy block 110 → card 222 */
.pitfall-arrow { flex: none; }
.down-arrow-block { margin-top: 60px; padding-bottom: 60px; display: flex; justify-content: center; }   /* measured mt60 + 60 tail (padding so it can't collapse) */

/* ================= CASE MARQUEE + FEATURES ================= */
.section-9 { padding-top: 30px; }                                            /* measured: 30 above the marquee */
.case-marquee-wrap { position: relative; overflow: hidden; padding-bottom: 20px; }   /* measured h367 (347 img + 20 pb) */
.case-track {
  display: flex; gap: 20px; width: max-content;
  animation: marqRight 73s linear infinite;                                /* measured: rightward, ~72px/s */
}
.case-track img {
  width: 420px; height: 347px; object-fit: cover; border-radius: 20px; flex: none;   /* measured 420x347 r20 */
}
.feature-grid {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;   /* measured 1400x442, gap 12 */
}
.feature-card {
  padding: 30px 32px 32px; border-radius: 10px;                            /* measured pad 30/32/32 r10 */
  border: 1px solid var(--line);                                           /* measured */
  display: flex; flex-direction: column; gap: 24px;                        /* measured gap 24 */
}
.feature-icon { width: 40px; height: 40px; }                               /* measured 40x40 */
.feature-copy { display: flex; flex-direction: column; gap: 6px; }           /* measured: copy 100 → card 226 */

/* ================= PRICING ================= */
.pricing-row { width: 770px; max-width: 100%; margin-top: 24px; display: flex; gap: 20px; }   /* measured 770x811, mt24, gap 20 */
.pricing-col {
  width: 375px; height: 811px;                                             /* measured 375x811 */
  border: 1px solid var(--line); border-radius: 10px;                      /* measured r10 */
  display: flex; flex-direction: column;
}
.pricing-col.main { background: linear-gradient(#111, #000); }             /* measured */
.pricing-titles { min-height: 164px; padding: 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 6px; }   /* measured 373x164 */
.pricing-titles .text-copy-small { margin-top: 6px; }
.pricing-divider { height: 1px; width: 325px; margin: 0 auto; background: var(--line); }   /* measured 325x1 */
.pricing-list, .pricing-why { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pricing-list { height: 302px; gap: 12px; }                                   /* measured 373x302 */
.pricing-why  { flex: 1; min-height: 0; }                                     /* measured 373x226 — absorbs the remainder */
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; }
.check-row img { width: 16px; margin-top: 3px; flex: none; }               /* measured 16 */
.pricing-cta { min-height: 114px; padding: 24px; margin-top: auto; display: flex; align-items: center; }   /* measured 373x114 */
.pricing-cta .button-orange { width: 100%; }

/* ================= SOCIAL PROOF ================= */
.proof-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px; }   /* measured 1140x2137, gap 60 */
.proof-row { width: 100%; display: flex; gap: 60px; }                      /* measured gap 60 */
.proof-img {
  width: 393px; height: 455px; object-fit: cover; flex: none;              /* measured 393x455 */
  border-radius: 20px; border: 1px solid var(--muted);                     /* measured r20, 1px #AEAEAE */
}
.proof-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.proof-meta { display: flex; flex-direction: column; gap: 22px; }
.proof-person { display: flex; flex-direction: column; gap: 6px; }
.proof-person .text-copy-small-left { color: var(--muted); }                              /* measured rgb(174,174,174) */
.proof-hr { height: 1px; background: linear-gradient(90deg, var(--line-2) 31%, #000); }   /* measured */
.proof-stats { display: flex; gap: 60px; }
.stat { display: flex; align-items: baseline; gap: 12px; }
.proof-sep { width: 100%; height: 1px; background: linear-gradient(90deg, #000, var(--orange) 31%, #000); }  /* measured */
.proof-sep.alt { background: linear-gradient(90deg, #000, var(--orange) 31%, #000); }
.proof-stack > .btn { margin-top: 23px; }   /* measured: stack is 2137, children sum to 2114 */
.proof-vr { width: 1px; align-self: stretch; background: linear-gradient(#000, var(--line-2) 50%, #000); }   /* measured */
.proof-vr.short { height: 80px; }                                           /* measured 1x80 */

.review-row { width: 100%; height: 339px; display: flex; align-items: center; justify-content: space-between; }   /* measured 1140x339 */
.review-card { width: 337px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }  /* measured 337, gap 12 */
.review-top { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.review-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }   /* measured 120 */
.review-stars { width: 110px; }                                             /* measured 110 */
.quote-text { font-size: 14px; line-height: 22px; font-weight: 300; color: #fff; }        /* measured 14/22 w300 */
.review-person { display: flex; flex-direction: column; gap: 6px; }
.review-person .text-copy-small-left { color: var(--muted); }                             /* measured rgb(174,174,174) */

/* ================= PROCESS ================= */
.steps-grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }   /* measured 1140x438 */
.step-card { display: flex; flex-direction: column; gap: 18px; }            /* measured gap 18 */
.step-media { position: relative; }
.step-img { width: 100%; height: 256px; object-fit: cover; border-radius: 20px; }   /* measured h256 r20 */
.step-num {
  position: absolute; top: -34px; left: 0;                                  /* measured margin-top -34 */
  width: 64px; height: 64px; border-radius: 250px; background: #fff;        /* measured 64x64 r250 */
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 42px; font-weight: 700; color: #333;                       /* measured 30/42 w700 rgb(51,51,51) */
}
.step-copy { min-height: 164px; display: flex; flex-direction: column; gap: 8px; }   /* measured: card 438 = img 256 + 18 + 164 */
.step-label { font-size: 16px; line-height: 22.4px; font-weight: 400; color: #fff; }      /* measured 16/22.4 w400 */
.step-title { font-size: 20px; line-height: 28px; font-weight: 400; color: #fff; }        /* measured 20/28 w400 */
.step-copy .text-copy-small-left { font-size: 14px; line-height: 24px; }                  /* measured 14/24 w300 */
.stats-row { width: 910px; max-width: 100%; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }   /* measured 910x80, mt24 */
.stat-cell { width: 179px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }  /* measured 179x80 */

/* ================= FOUNDER ================= */
.founder-row { width: 100%; display: flex; gap: 0 50px; align-items: flex-start; }   /* measured 1140x579, gap 0/50 */
.founder-media { width: 545px; height: 579px; flex: none; display: flex; flex-direction: column; }   /* measured 545x579 */
.founder-img { width: 545px; flex: 1; min-height: 0; object-fit: cover; border-radius: 20px; }
.founder-caption { margin-top: 14px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 400; color: #fff; }
.founder-copy { width: 545px; display: flex; flex-direction: column; gap: 22px; padding-top: 40px; }   /* measured 545x352 */
.founder-copy .text-copy-small-left { line-height: 24px; }                                              /* measured 16/24 w300 */

/* ================= FAQ ================= */
.faq-wrapper { width: 100%; }   /* measured 940x486 */
.faq-item { border-bottom: 1px solid #232323; }
.faq-item:first-child { border-top: 1px solid #232323; }
.faq-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 30px 0;                                                          /* measured pad 30/0 */
}
.faq-title {
  font-size: 22px; line-height: 28.6px; font-weight: 400; letter-spacing: -.66px;   /* measured 22/28.6 ls -0.66 */
  color: #fff; margin: 4px 10px 0 0;
}
.faq-circle {
  width: 36px; height: 36px; flex: none;                                    /* measured 36x36 */
  background: url('../assets/img/ic-plus.avif') no-repeat 50% 50% / cover;  /* measured */
  transition: transform .3s;
}
.faq-item.open .faq-circle { transform: rotate(45deg); }
.faq-content { height: 0; overflow: hidden; transition: height .3s ease; }
.faq-paragraph { font-size: 16px; line-height: 25.6px; font-weight: 300; color: #fff; padding-bottom: 28px; }   /* measured 16/25.6 w300 */

/* ================= BOOKING + FOOTER ================= */
.section-footer { background: #000; border: 1px solid transparent; }        /* measured */
.footer-cta { margin: 200px 0 101px; display: flex; flex-direction: column; align-items: center; gap: 57px; }   /* measured 940x788, mt200, 101 tail */
.footer-cta .heading-block { min-height: 170px; justify-content: center; }    /* measured 940x170 */
.footer-cta .heading-2 { max-width: 700px; }                                  /* measured: wraps to 2 lines */
.booking-embed {
  width: 100%; display: grid; grid-template-columns: 240px 1fr;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;   /* height comes from .booking-main */
}
.booking-side { padding: 26px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.booking-title { font-size: 22px; line-height: 28px; font-weight: 500; color: #fff; }
.booking-note { font-size: 13px; line-height: 20px; font-weight: 300; color: #C9C9C9; }
.booking-note a { color: #6aa9ff; word-break: break-all; }
.booking-facts { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: #C9C9C9; margin-top: auto; }
/* Height is a floor only. form_embed.js resizes the iframe after load and on every view
   change, but the grid row does not re-measure it — an auto-height container keeps its
   first-pass size and clips the calendar. main.js mirrors the iframe's height onto this
   box so the row tracks it. */
.booking-main { display: block; padding: 12px; min-height: 561px; }
.booking-placeholder { text-align: center; font-size: 15px; line-height: 26px; color: #8A8A8A; }
.booking-placeholder a { color: var(--orange); }

.footer-bottom {
  padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 37px;   /* measured: 240 tall, 144 content */
  border-top: 1px solid var(--line);
}
.footer-links { display: flex; gap: 24px; }
.footer-link { font-size: 14px; line-height: 20px; font-weight: 400; color: #fff; }   /* measured 14/20 */
.footer-social { display: flex; gap: 12px; }
.footer-social img { width: 28px; height: 28px; }                           /* measured 28 */
.footer-copy { font-size: 12px; line-height: 20px; font-weight: 300; color: #fff; }       /* measured 12/20 w300 */

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .hero-copy, .heading-block, .heading-block.narrow, .sub-wrap { width: 100%; }
  .heading-1-hero { font-size: 46px; line-height: 56px; }
  .heading-2 { font-size: 36px; line-height: 46px; }
  .feature-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-row { width: 100%; flex-direction: column; align-items: center; }
  .proof-row { flex-direction: column; align-items: center; gap: 30px; }
  .proof-img { width: 100%; max-width: 393px; }
  .proof-row > .proof-copy { order: 2; }
  .review-row { flex-direction: column; align-items: center; gap: 40px; }
  .proof-vr:not(.short) { display: none; }
  .founder-row { flex-direction: column; align-items: center; }
  .founder-media, .founder-img, .founder-copy { width: 100%; max-width: 545px; }
  .stats-row { flex-wrap: wrap; justify-content: center; gap: 30px; }
  .stats-row .proof-vr { display: none; }
}
@media (max-width: 767px) {
  .heading-1-hero { font-size: 34px; line-height: 42px; }
  .heading-2 { font-size: 28px; line-height: 36px; }
  .sub-text-large { font-size: 17px; line-height: 24px; }
  .nav-menu-wrapper { display: none; }
  .feature-grid, .steps-grid { grid-template-columns: 1fr; }
  .pitfall-row { flex-direction: column; gap: 40px; }
  .pitfall-arrow { transform: rotate(90deg); }
  .pitfall { width: 100%; }
  .booking-embed { grid-template-columns: 1fr; }
  .booking-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .spacer-150 { height: 80px; }
}


/* ---------- GetClarix: hints only. Black scheme is the template's, untouched. ---------- */
.btn-gradient { background: linear-gradient(90deg, var(--orange) 45%, var(--green) 88%, #fff); }
.btn { display: inline-flex; align-items: center; justify-content: center; }   /* <a> needs a box or overflow:hidden can't clip the rim */
.hero-container { overflow: hidden; }                                          /* template bug: hero-glow caused h-scroll <420px */
section[id] { scroll-margin-top: 90px; }

.founder-img-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#0D0D0D; border:1px solid var(--line); color:#5A5A5A;
  font-size:15px; font-weight:600; letter-spacing:2px; text-align:center; line-height:1.6;
}
.founder-img-placeholder span { font-size:12px; font-weight:400; letter-spacing:0; color:#3D3D3D; }
.booking-main #msgsndr-calendar { width:100%; min-height:537px; border:0; display:block; border-radius:10px; background:#0D0D0D; }

/* ---------- rails repopulated with GetClarix content (no client logos exist) ---------- */
.cause-cell {
  color: var(--muted); font-size: 13px; line-height: 17px; font-weight: 400;
  text-align: center; letter-spacing: .01em;
}
.clawback-card {
  width: 420px; height: 347px; flex: none; border-radius: 20px;
  border: 1px solid var(--line); background: #0A0A0A;
  padding: 40px 42px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.cb-month { font-size: 14px; line-height: 18px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.cb-pct   { font-size: 64px; line-height: 70px; font-weight: 300; color: var(--orange); letter-spacing: -.03em; }
.cb-cap   { font-size: 14px; line-height: 18px; color: var(--muted); margin-bottom: 14px; }
.cb-note  { font-size: 16px; line-height: 23px; font-weight: 300; color: #fff; }

/* ---------- sections mirrored from getclarix.ai, rendered in the template's system ---------- */
.eyebrow-label {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 14px;
}
.feature-grid.four  { grid-template-columns: repeat(4, 1fr); }
.feature-grid.three { grid-template-columns: repeat(3, 1fr); }

.steps-grid.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.steps-grid.five .step-card { display: flex; flex-direction: column; }
.steps-grid.five .step-media { height: auto; padding: 0 0 18px; background: none; border: 0; }
.steps-grid.five .step-num {
  font-size: 34px; line-height: 38px; font-weight: 300; color: var(--orange); letter-spacing: -.02em;
}

.guarantee-card {
  border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(#101010, #000);
  padding: 56px 60px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.guarantee-icon { font-size: 34px; line-height: 1; }
.guarantee-card .btn { margin-top: 14px; }

.check-row.cross .x-mark {
  width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); font-size: 13px;
}
.section-fit .pricing-col { min-height: 0; }

.footer-legal { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; margin-top: 22px; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: #fff; }

@media (max-width: 1100px) {
  .feature-grid.four, .steps-grid.five { grid-template-columns: repeat(2, 1fr); }
  .feature-grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .feature-grid.four, .steps-grid.five { grid-template-columns: 1fr; }
  .guarantee-card { padding: 36px 24px; }
}

/* ============================================================
   AMBIENT FIELD — the page below the hero was flat #000.
   Slow-drifting teal/green blooms + per-section anchors.
   transform/opacity only; killed under reduced-motion.
   ============================================================ */
body { position: relative; }

body::before {
  content: ''; position: fixed; inset: -25vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%, rgba(14,140,158,.20), transparent 62%),
    radial-gradient(34vmax 28vmax at 82% 48%, rgba(22,163,74,.15),  transparent 60%),
    radial-gradient(30vmax 26vmax at 42% 82%, rgba(14,140,158,.13), transparent 62%);
  filter: blur(28px);
  animation: fieldDrift 42s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fieldDrift {
  0%   { transform: translate3d(0,0,0)            scale(1);    }
  50%  { transform: translate3d(2.5vmax,-2vmax,0) scale(1.06); }
  100% { transform: translate3d(-2vmax,1.5vmax,0) scale(1.02); }
}

/* per-section anchor glow, alternating sides so the eye keeps moving */
.section-clock, .section-9, .section-roadmap,
.section-deploy, .section-guarantee, .section-fit, .section-faq { position: relative; }

.section-clock::before, .section-9::before, .section-roadmap::before,
.section-deploy::before, .section-guarantee::before, .section-fit::before, .section-faq::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 52vmax; height: 40vmax; border-radius: 50%;
  filter: blur(70px); opacity: .55;
}
.section-clock::before     { top: 6%;  left: -18vmax;  background: radial-gradient(circle, rgba(14,140,158,.22), transparent 68%); }
.section-9::before         { top: 22%; right: -20vmax; background: radial-gradient(circle, rgba(22,163,74,.18),  transparent 68%); }
.section-roadmap::before   { top: -6%; left: -16vmax;  background: radial-gradient(circle, rgba(14,140,158,.18), transparent 68%); }
.section-deploy::before    { top: 10%; right: -18vmax; background: radial-gradient(circle, rgba(14,140,158,.16), transparent 68%); }
.section-guarantee::before { top: -4%; left: 50%; transform: translateX(-50%);
                             background: radial-gradient(circle, rgba(22,163,74,.20), transparent 66%); }
.section-fit::before       { top: 14%; left: -20vmax;  background: radial-gradient(circle, rgba(14,140,158,.16), transparent 68%); }
.section-faq::before       { top: 4%;  right: -18vmax; background: radial-gradient(circle, rgba(22,163,74,.14),  transparent 68%); }

/* hairline seams so sections read as separate planes, not one black sheet */
.section-9, .section-roadmap, .section-deploy,
.section-guarantee, .section-fit, .section-faq {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(14,140,158,.22) 50%, transparent) 1;
}

/* footer sits on a lifted plane rather than the same flat black */
.section-footer { background: linear-gradient(180deg, #050809, #000) !important; }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .hero-glow, .btn-gradient, .marquee-track, .case-track { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- audit fixes ---------- */
/* P0: .pricing-col is hard-set to 811px (template had CTAs + long copy). The fit
   columns hold only a list, leaving ~509px of dead space. Let them size to content. */
.section-fit .pricing-col   { height: auto; width: auto; }
.section-fit .pricing-list  { height: auto; padding-bottom: 32px; }
.section-fit .pricing-titles{ min-height: 0; padding: 28px 24px 20px; }
.section-fit .pricing-row   { align-items: stretch; }

/* P2: colour emoji clash with the monochrome + teal system */
.guarantee-icon { display: none; }

/* ============================================================
   POST-AUDIT PASS — arrange · typeset · colorize · polish
   ============================================================ */

/* ---- ARRANGE: section headers centred ---- */
.section-clock .heading-block,
.section-9 .heading-block,
.section-roadmap .heading-block,
.section-deploy .heading-block,
.section-fit .heading-block,
.section-faq .heading-block {
  text-align: center; align-items: center; width: 100%; max-width: 1000px; margin: 0 auto;
}
.section-clock .sub-wrap,
.section-9 .sub-wrap,
.section-roadmap .sub-wrap,
.section-deploy .sub-wrap,
.section-fit .sub-wrap,
.section-faq .sub-wrap { width: 720px; max-width: 100%; }
.section-clock .main-50,
.section-9 .main-50,
.section-roadmap .main-50,
.section-deploy .main-50,
.section-fit .main-50,
.section-faq .main-50 { align-items: stretch; }
.eyebrow-label { text-align: left; }

/* ---- ARRANGE: vertical rhythm — generous between movements, tight within ---- */
.spacer-150 { height: 190px; }
.section-clock  { padding-top: 40px; }
.section-9      { padding-top: 70px; }
.section-roadmap{ padding-top: 40px; }
.section-deploy { padding-top: 40px; }
.section-guarantee { padding-top: 60px; }
.section-fit    { padding-top: 40px; }
.section-faq    { padding-top: 40px; }
.section-footer { padding-top: 90px; }
.main-50 { gap: 64px; }
.feature-grid { gap: 18px; }
.steps-grid.five { gap: 20px; }

/* ---- TYPESET: kill orphans / widows ---- */
.heading-1-hero, .heading-2, .text-subheading, .text-subheading-left,
.text-subheading.center, .step-title, .lead-line { text-wrap: balance; }
.sub-text-large, .text-copy-small, .text-copy-small-left, .faq-paragraph { text-wrap: pretty; }

/* ---- COLORIZE: white icon discs were the loudest thing on the page ---- */
.pitfall-icon {
  background: rgba(14,140,158,.08);
  border: 1px solid rgba(14,140,158,.42);
  box-shadow: 0 0 0 6px rgba(14,140,158,.05);
}
.pitfall-icon img { filter: invert(58%) sepia(38%) saturate(760%) hue-rotate(135deg) brightness(92%); }
.feature-icon    { filter: invert(58%) sepia(38%) saturate(760%) hue-rotate(135deg) brightness(92%); }

/* arrows were nearly invisible at 40px teal on black */
.pitfall-arrow { width: 56px; opacity: .9; }
.down-arrow-block img { opacity: .8; }

/* ---- POLISH ---- */
.faq-bar { transition: opacity .2s ease; }
.faq-bar:hover { opacity: .72; }
.feature-card, .step-card, .clawback-card { transition: border-color .25s ease; }
.feature-card:hover, .step-card:hover { border-color: rgba(14,140,158,.4); }
.footer-link { transition: color .2s ease; }

@media (max-width: 900px) {
  .spacer-150 { height: 110px; }
  .main-50 { gap: 44px; }
  .section-9 .heading-block, .section-roadmap .heading-block,
  .section-deploy .heading-block, .section-fit .heading-block,
  .section-faq .heading-block { padding-left: 16px; }
}

/* the ::before ambient blobs sit at negative left/right offsets — clip them at the
   section box so they tint without extending the document width */
.section-clock, .section-9, .section-roadmap,
.section-deploy, .section-guarantee, .section-fit, .section-faq { overflow: clip; }
.navbar-brand img { display:block; height:34px; width:auto; }

/* What's-Possible cards: a media band beats an icon above every heading */
.feature-grid.four .feature-card { padding: 0 0 28px; overflow: hidden; }
.feature-media { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 22px;
                 border-bottom: 1px solid var(--line); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; display: block;
                     transition: transform .6s cubic-bezier(.215,.61,.355,1); }
.feature-grid.four .feature-card:hover .feature-media img { transform: scale(1.04); }
.feature-grid.four .feature-copy { padding: 0 28px; }

/* fit columns were shrink-wrapping and stacking left: .pricing-row is capped at 770px
   and .main-50 stretches, so the pair sat hard-left in the 1400 container */
.section-fit .pricing-row { width: 944px; max-width: 100%; margin-left: auto; margin-right: auto;
                            justify-content: center; gap: 24px; }
.section-fit .pricing-col { width: 460px; max-width: 100%; flex: 0 1 460px; }
@media (max-width: 1000px) {
  .section-fit .pricing-row { flex-direction: column; align-items: center; width: 100%; }
  .section-fit .pricing-col { width: 100%; max-width: 460px; flex: none; }
}

/* ---------- VSL ---------- */
.section-vsl .heading-block { margin-bottom: 44px; }
.vsl-frame {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #0A0A0A;
}
.vsl-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vsl-cta { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 767px) {
  .section-vsl .heading-block { margin-bottom: 28px; }
  .vsl-cta { margin-top: 28px; }
}